feat: added support for deploying to web

.flutter-plugins-dependencies

@@ -1 +1 @@
-{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"android":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"macos":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"linux":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"windows":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"web":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","dependencies":[]}]},"dependencyGraph":[{"name":"rive_common","dependencies":[]}],"date_created":"2024-10-02 14:16:18.732081","version":"3.24.1","swift_package_manager_enabled":false}
+{"info":"This is a generated file; do not edit or check into version control.","plugins":{"ios":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"android":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"macos":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"linux":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"windows":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","native_build":true,"dependencies":[]}],"web":[{"name":"rive_common","path":"/Users/vanlooverenkoen/.pub-cache/hosted/pub.dev/rive_common-0.4.11/","dependencies":[]}]},"dependencyGraph":[{"name":"rive_common","dependencies":[]}],"date_created":"2024-10-03 14:43:31.190499","version":"3.24.1","swift_package_manager_enabled":false}

.github/workflows/publish_to_githubpages.yaml

@@ -0,0 +1,37 @@
+name: Publish to github pages
+
+on:
+  push:
+    branches: ["main"]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - uses: actions/checkout@v4
+      - uses: subosito/flutter-action@v2
+      - run: flutter packages get
+      - run: dart analyze
+      - run: flutter packages get
+        working-directory: ./example
+      - run: dart analyze
+        working-directory: ./example
+      - run: flutter build web
+        working-directory: ./example
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: "./example/build/web"
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/test.yaml

@@ -0,0 +1,19 @@
+name: Automated tests
+
+on:
+  push:
+    branches:
+      - main
+jobs:
+  test:
+    name: Runs all tests on main
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v4
+      - name: Set up Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          channel: stable
+      - run: flutter pub get
+      - run: flutter test

README.md

@@ -1,39 +1,61 @@
-<!--
-This README describes the package. If you publish this package to pub.dev,
-this README's contents appear on the landing page for your package.
+# impaktfull_ui
 
-For information about how to write a good package README, see the guide for
-[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
+A UI library of Impaktfull.
 
-For general information about developing packages, see the Dart guide for
-[creating packages](https://dart.dev/guides/libraries/create-library-packages)
-and the Flutter guide for
-[developing packages and plugins](https://flutter.dev/developing-packages).
--->
+[![publish to github pages](https://github.com/impaktfull/flutter_impaktfull_ui_2/actions/workflows/publish_to_githubpages.yaml/badge.svg)](https://github.com/impaktfull/flutter_impaktfull_ui_2/actions/workflows/publish_to_githubpages.yaml/badge.svg)
+[![live_demo](https://img.shields.io/badge/Live%20Demo-Available-7D64F2)](https://example.snacky.opensource.impaktfull.com)
 
-TODO: Put a short description of the package here that helps potential users
-know whether this package might be useful for them.
+## Disclaimer
 
-## Features
+**impaktfull_ui is still in unstable & untested. everything under <1.0.0 should not be used unless you want to test it**
 
-TODO: List what your package can do. Maybe include images, gifs, or videos.
+## Purpose
 
-## Getting started
+This UI library was built to have a simple way to build UIs for impaktfull. This will limit the maintenance cost of open-source projects and make it easier to build applications. That way we can focus on building new tools & features instead of bugfixing and maintaining UI changes from Flutter.
 
-TODO: List prerequisites and provide or point to information on how to
-start using the package.
+- Open-source example projects
+- impaktfull applications
+
+# Demo
+
+[Live Web demo](https://example.impaktfull-ui.opensource.impaktfull.com)
 
 ## Usage
 
-TODO: Include short and useful examples for package users. Add longer examples
-to `/example` folder.
+<!--[![pub package](https://img.shields.io/pub/v/impaktfull_ui.svg)](https://pub.dartlang.org/packages/impaktfull_ui)-->
+
+### Setup
+
+- Setup your theme (colors, textStyles, shadows, dimens, assets)
+- Use ImapktfullUiApp
+- Use the components provided in the UI library
+
+### Component List
+
+Components are always prefixed with `ImpaktfullUi` to avoid conflicts with other libraries.
+
+- ImpaktfullUiAutoLayout
+
+Many more to come in the future, always with the focus on minimizing maintenance and maximizing a recognizable UI/brand for impaktfull
+
+### Theming
+
+The provided theme contains the default impaktfull branding. But it is super important for us that the theme is easy to configure and highly configurable. That is why we choose for component based theming.
+
+### Assets
+
+#### Lottie Animations
+
+These icons can be overriden be added to your assets folder to use the default lottie animations. The only thing you need to do extra is override `package` (in your own project)
+
+- assets/lottie/loading.json
+
+#### Icons
+
+# Todo
 
-```dart
-const like = 'sample';
-```
+- [ ] Add tests
 
-## Additional information
+## License
 
-TODO: Tell users more about the package: where to find more information, how to
-contribute to the package, how to file issues, what response they can expect
-from the package authors, and more.
+You are free to use this library as long as you give credit to impaktfull. You can use it for commercial and non-commercial projects. See the [LICENSE](LICENSE) file for more information.

example/lib/src/app.dart

@@ -1,14 +1,29 @@
 import 'package:flutter/material.dart';
 import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/screen/home/home_screen.dart';
+import 'package:impaktfull_ui_example/src/widget/theme/theme_button.dart';
 
-class MyApp extends StatelessWidget {
+class MyApp extends StatefulWidget {
   const MyApp({super.key});
+
+  @override
+  State<MyApp> createState() => MyAppState();
+
+  static MyAppState of(BuildContext context, {bool useRootNavigator = false}) =>
+      context.findRootAncestorStateOfType<MyAppState>()!;
+}
+
+class MyAppState extends State<MyApp> {
   @override
   Widget build(BuildContext context) {
-    return const ImpaktfullUiApp(
+    return ImpaktfullUiApp(
       title: 'impaktfull ui',
+      impaktfullUiTheme: ThemeButton.activeTheme,
+      // const is disabled here because it would not rebuild when the theme is set again.
+      // ignore: prefer_const_constructors
       home: HomeScreen(),
     );
   }
+
+  void refresh() => setState(() {});
 }

example/lib/src/component_library/components/color_picker/color_picker_library_variant.dart

@@ -2,9 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/color_picker/color_picker_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
+import 'package:impaktfull_ui_example/src/widget/components/components_library_variant_descriptor.dart';
 
-class ColorPickerLibraryVariant
-    extends ComponentLibraryVariant<ColorPickerLibraryPrimaryInputs> {
+class ColorPickerLibraryVariant extends ComponentLibraryVariant<ColorPickerLibraryPrimaryInputs> {
   final ImpaktfullUiColorPickerType type;
   const ColorPickerLibraryVariant(
     this.type,
@@ -14,19 +14,20 @@ class ColorPickerLibraryVariant
   String get title => type.name;
 
   @override
-  List<Widget> build(
-      BuildContext context, ColorPickerLibraryPrimaryInputs inputs) {
+  List<Widget> build(BuildContext context, ColorPickerLibraryPrimaryInputs inputs) {
     return [
-      ImpaktfullUiCard(
+      ComponentsLibraryVariantDescriptor(
         width: 500,
+        wrapWithCard: true,
         child: ImpaktfullUiColorPicker(
           type: type,
           selectedColor: theme.colors.accent,
           onColorChanged: inputs.color.updateState,
         ),
       ),
-      ImpaktfullUiCard(
+      ComponentsLibraryVariantDescriptor(
         width: 500,
+        wrapWithCard: true,
         child: ImpaktfullUiColorPicker(
           type: type,
           selectedColor: theme.colors.accent,

example/lib/src/component_library/components/icon_button/icon_button_library_variant.dart

@@ -3,21 +3,20 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/icon_button/icon_button_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
-class IconButtonTypeLibraryVariant
-    extends ComponentLibraryVariant<IconButtonLibraryVariantInputs> {
+class IconButtonTypeLibraryVariant extends ComponentLibraryVariant<IconButtonLibraryVariantInputs> {
   IconButtonTypeLibraryVariant();
 
   @override
   String get title => 'Default';
 
   @override
-  List<Widget> build(
-      BuildContext context, IconButtonLibraryVariantInputs inputs) {
+  List<Widget> build(BuildContext context, IconButtonLibraryVariantInputs inputs) {
     return [
       ImpaktfullUiIconButton(
         onTap: () => ImpaktfullUiNotification.show(title: 'IconButton tapped'),
         asset: ImpaktfullUiAsset.icon(inputs.icon.value!),
         tooltip: inputs.tooltip.value,
+        color: theme.colors.text,
       ),
     ];
   }

example/lib/src/component_library/components/list_item/list_item_library_item.dart

@@ -1,3 +1,4 @@
+import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/list_item/list_item_library_variant.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_inputs.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
@@ -11,7 +12,9 @@ class ListItemLibraryItem extends ComponentLibraryItem {
   @override
   List<ComponentLibraryVariant> getComponentVariants() {
     return [
-      const ListItemLibraryVariant(),
+      for (final type in ImpaktfullUiListItemType.values) ...[
+        ListItemLibraryVariant(type),
+      ],
     ];
   }
 }

example/lib/src/component_library/components/list_item/list_item_library_variant.dart

@@ -3,18 +3,27 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/list_item/list_item_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
-class ListItemLibraryVariant
-    extends ComponentLibraryVariant<ListItemLibraryPrimaryInputs> {
-  const ListItemLibraryVariant();
+class ListItemLibraryVariant extends ComponentLibraryVariant<ListItemLibraryPrimaryInputs> {
+  final ImpaktfullUiListItemType type;
+
+  const ListItemLibraryVariant(this.type);
 
   @override
-  String get title => 'Default';
+  String get title => type.name;
 
   @override
-  List<Widget> build(
-      BuildContext context, ListItemLibraryPrimaryInputs inputs) {
+  List<Widget> build(BuildContext context, ListItemLibraryPrimaryInputs inputs) {
     return [
-      const ImpaktfullUiListItem(),
+      ImpaktfullUiListItem(
+        leading: theme.assets.icons.settings,
+        title: 'Title',
+        subtitle: 'My subtitle',
+        type: type,
+        onAsyncTap: () async {
+          await Future.delayed(const Duration(seconds: 3));
+          ImpaktfullUiNotification.show(title: 'Loading completed');
+        },
+      ),
     ];
   }
 

example/lib/src/component_library/components/list_view/list_view_library_variant.dart

@@ -5,16 +5,14 @@ import 'package:impaktfull_ui_example/src/component_library/components/list_view
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 import 'package:impaktfull_ui_example/src/widget/components/components_library_variant_descriptor.dart';
 
-class ListViewLibraryVariant
-    extends ComponentLibraryVariant<ListViewLibraryPrimaryInputs> {
+class ListViewLibraryVariant extends ComponentLibraryVariant<ListViewLibraryPrimaryInputs> {
   const ListViewLibraryVariant();
 
   @override
   String get title => 'Default';
 
   @override
-  List<Widget> build(
-      BuildContext context, ListViewLibraryPrimaryInputs inputs) {
+  List<Widget> build(BuildContext context, ListViewLibraryPrimaryInputs inputs) {
     return [
       ComponentsLibraryVariantDescriptor(
         height: 400,

example/lib/src/component_library/components/notification_badge/notification_badge_library_variant.dart

@@ -3,32 +3,29 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/notification_badge/notification_badge_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
-class NotificationBadgeLibraryVariant
-    extends ComponentLibraryVariant<NotificationBadgeLibraryPrimaryInputs> {
+class NotificationBadgeLibraryVariant extends ComponentLibraryVariant<NotificationBadgeLibraryPrimaryInputs> {
   const NotificationBadgeLibraryVariant();
 
   @override
   String get title => 'Default';
 
   @override
-  List<Widget> build(
-      BuildContext context, NotificationBadgeLibraryPrimaryInputs inputs) {
+  List<Widget> build(BuildContext context, NotificationBadgeLibraryPrimaryInputs inputs) {
     return [
       ImpaktfullUiNotificationBadge(
         show: inputs.show.value ?? false,
         text: inputs.badgeText.value,
         color: theme.colors.accent,
         child: ImpaktfullUiAssetWidget(
           asset: theme.assets.icons.home,
+          color: theme.colors.text,
         ),
       ),
     ];
   }
 
   @override
-  NotificationBadgeLibraryPrimaryInputs inputs() =>
-      NotificationBadgeLibraryPrimaryInputs();
+  NotificationBadgeLibraryPrimaryInputs inputs() => NotificationBadgeLibraryPrimaryInputs();
 }
 
-class NotificationBadgeLibraryPrimaryInputs
-    extends NotificationBadgeLibraryInputs {}
+class NotificationBadgeLibraryPrimaryInputs extends NotificationBadgeLibraryInputs {}

example/lib/src/component_library/components/list_item/listitem_library_item.dart → example/lib/src/component_library/components/sidebar_navigation/sidebar_navigation_library_item.dart

@@ -1,22 +1,23 @@
-import 'package:impaktfull_ui_example/src/component_library/components/list_item/list_item_library_variant.dart';
+import 'package:impaktfull_ui_example/src/component_library/components/sidebar_navigation/sidebar_navigation_library_variant.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_inputs.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
-class ListItemLibraryItem extends ComponentLibraryItem {
-  const ListItemLibraryItem();
+class SidebarNavigationLibraryItem extends ComponentLibraryItem {
+  const SidebarNavigationLibraryItem();
 
   @override
-  String get title => 'ImpaktfullUiListItem';
+  String get title => 'ImpaktfullUiSidebarNavigation';
 
   @override
   List<ComponentLibraryVariant> getComponentVariants() {
     return [
-      const ListItemLibraryVariant(),
+      const SidebarNavigationLibraryVariant(),
     ];
   }
 }
 
-class ListItemLibraryInputs extends ComponentLibraryInputs {
+class SidebarNavigationLibraryInputs extends ComponentLibraryInputs {
   @override
   List<ComponentLibraryInputItem> buildInputItems() => [];
 }
+