feat(ui_showcase): Implement UI showcase toolkit

.cursor/rules/flutter.mdc

@@ -0,0 +1,8 @@
+---
+globs: app/**/*.dart,core/**/*.dart
+alwaysApply: false
+---
+
+## Widgets
+
+- Use SizedBox, DecoratedBox, Padding, etc. instead of Container.

.vscode/launch.json

@@ -20,6 +20,13 @@
       "type": "dart",
       "cwd": "${workspaceFolder}/app",
       "flutterMode": "release"
+    },
+    {
+      "name": "ui_library_showcase",
+      "request": "launch",
+      "type": "dart",
+      "cwd": "${workspaceFolder}/core/ui_library/example",
+      "program": "lib/main.dart"
     }
   ]
 }

core/ui_library/example/.gitignore

@@ -0,0 +1,45 @@
+# Miscellaneous
+*.class
+*.log
+*.pyc
+*.swp
+.DS_Store
+.atom/
+.build/
+.buildlog/
+.history
+.svn/
+.swiftpm/
+migrate_working_dir/
+
+# IntelliJ related
+*.iml
+*.ipr
+*.iws
+.idea/
+
+# The .vscode folder contains launch configuration and tasks you configure in
+# VS Code which you may wish to be included in version control, so this line
+# is commented out by default.
+#.vscode/
+
+# Flutter/Dart/Pub related
+**/doc/api/
+**/ios/Flutter/.last_build_id
+.dart_tool/
+.flutter-plugins
+.flutter-plugins-dependencies
+.pub-cache/
+.pub/
+/build/
+
+# Symbolication related
+app.*.symbols
+
+# Obfuscation related
+app.*.map.json
+
+# Android Studio will place build artifacts here
+/android/app/debug
+/android/app/profile
+/android/app/release

core/ui_library/example/.metadata

@@ -0,0 +1,30 @@
+# This file tracks properties of this Flutter project.
+# Used by Flutter tool to assess capabilities and perform upgrades etc.
+#
+# This file should be version controlled and should not be manually edited.
+
+version:
+  revision: "be698c48a6750c8cb8e61c740ca9991bb947aba2"
+  channel: "stable"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: be698c48a6750c8cb8e61c740ca9991bb947aba2
+      base_revision: be698c48a6750c8cb8e61c740ca9991bb947aba2
+    - platform: macos
+      create_revision: be698c48a6750c8cb8e61c740ca9991bb947aba2
+      base_revision: be698c48a6750c8cb8e61c740ca9991bb947aba2
+
+  # User provided section
+
+  # List of Local paths (relative to this file) that should be
+  # ignored by the migrate tool.
+  #
+  # Files that are not part of the templates will be ignored by default.
+  unmanaged_files:
+    - 'lib/main.dart'
+    - 'ios/Runner.xcodeproj/project.pbxproj'

core/ui_library/example/README.md

@@ -0,0 +1,3 @@
+# example
+
+A new Flutter project.

core/ui_library/example/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

core/ui_library/example/lib/main.dart

@@ -0,0 +1,52 @@
+import 'package:example/src/previews/button_preview.dart';
+import 'package:example/src/previews/card_preview.dart';
+import 'package:example/src/previews/checkbox_preview.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+final showcaseNodes = [
+  ShowcaseNode(name: 'Button', widget: const SomeButtonPreview()),
+  ShowcaseNode(name: 'Card', widget: const CardPreview()),
+  ShowcaseNode(name: 'Checkbox', widget: const CheckboxPreview()),
+];
+
+class MyApp extends StatefulWidget {
+  const MyApp({super.key});
+
+  @override
+  State<MyApp> createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  late final RouterConfig<Object> router;
+
+  @override
+  void initState() {
+    super.initState();
+    router = GoRouter(
+      routes: [
+        createRootShowcaseRoute(
+          nodes: showcaseNodes,
+          builder: (context, child) => ThemeOptionProvider(
+            options: [
+              ThemeOption(name: 'Light', theme: ThemeData.light()),
+              ThemeOption(name: 'Dark', theme: ThemeData.dark()),
+            ],
+            child: child,
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+    routerConfig: router,
+    debugShowCheckedModeBanner: false,
+  );
+}

core/ui_library/example/lib/src/previews/button_preview.dart

@@ -0,0 +1,39 @@
+import 'package:example/src/widget/component_preview.dart';
+import 'package:flutter/material.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+class SomeButtonPreview extends StatefulWidget {
+  const SomeButtonPreview({super.key});
+
+  @override
+  State<SomeButtonPreview> createState() => _SomeButtonPreviewState();
+}
+
+class _SomeButtonPreviewState extends State<SomeButtonPreview> {
+  final _labelController = TextEditingController(text: 'Click Me!');
+  final _enabledController = ValueNotifier(true);
+
+  @override
+  Widget build(BuildContext context) {
+    return ComponentPreview(
+      inputs: [
+        StringInput(
+          label: 'Label',
+          description: 'The label of the button',
+          controller: _labelController,
+        ),
+        BooleanInput(
+          label: 'Enabled',
+          description: 'Whether the button is enabled',
+          notifier: _enabledController,
+        ),
+      ],
+      builder: (context) {
+        return ElevatedButton(
+          onPressed: _enabledController.value ? () {} : null,
+          child: Text(_labelController.text),
+        );
+      },
+    );
+  }
+}

core/ui_library/example/lib/src/previews/card_preview.dart

@@ -0,0 +1,35 @@
+import 'package:example/src/widget/component_preview.dart';
+import 'package:flutter/material.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+class CardPreview extends StatefulWidget {
+  const CardPreview({super.key});
+
+  @override
+  State<CardPreview> createState() => _CardPreviewState();
+}
+
+class _CardPreviewState extends State<CardPreview> {
+  final _controller = TextEditingController(text: 'Card');
+
+  @override
+  Widget build(BuildContext context) {
+    return ComponentPreview(
+      inputs: [
+        StringInput(
+          label: 'Label',
+          description: 'The label of the button',
+          controller: _controller,
+        ),
+      ],
+      builder: (context) {
+        return Card(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(_controller.text),
+          ),
+        );
+      },
+    );
+  }
+}

core/ui_library/example/lib/src/previews/checkbox_preview.dart

@@ -0,0 +1,35 @@
+import 'package:example/src/widget/component_preview.dart';
+import 'package:flutter/material.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+class CheckboxPreview extends StatefulWidget {
+  const CheckboxPreview({super.key});
+
+  @override
+  State<CheckboxPreview> createState() => _CheckboxPreviewState();
+}
+
+class _CheckboxPreviewState extends State<CheckboxPreview> {
+  final _enabledController = ValueNotifier(true);
+
+  @override
+  Widget build(BuildContext context) {
+    return ComponentPreview(
+      inputs: [
+        BooleanInput(
+          label: 'Value',
+          description: 'The value of the checkbox',
+          notifier: _enabledController,
+        ),
+      ],
+      builder: (context) {
+        return Checkbox(
+          value: _enabledController.value,
+          onChanged: (value) {
+            _enabledController.value = value ?? false;
+          },
+        );
+      },
+    );
+  }
+}

core/ui_library/example/lib/src/widget/component_preview.dart

@@ -0,0 +1,27 @@
+import 'package:example/src/widget/sidebar.dart';
+import 'package:flutter/material.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+class ComponentPreview extends StatelessWidget {
+  const ComponentPreview({
+    required this.inputs,
+    required this.builder,
+    super.key,
+  });
+
+  final List<InputWidget> inputs;
+  final WidgetBuilder builder;
+
+  @override
+  Widget build(BuildContext context) => ShowcaseNodePreview(
+    builder: builder,
+    listenables: inputs.map((e) => e.listenable).toList(growable: false),
+    sidebar: Sidebar(children: inputs),
+    wrapWith: (child) {
+      return MaterialApp(
+        theme: ThemeOptionProvider.of(context).theme,
+        home: Scaffold(body: Center(child: child)),
+      );
+    },
+  );
+}

core/ui_library/example/lib/src/widget/sidebar.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:ui_showcase/ui_showcase.dart';
+
+class Sidebar extends StatelessWidget {
+  const Sidebar({
+    required this.children,
+    this.includeThemeSwitcher = true,
+    super.key,
+  });
+
+  final bool includeThemeSwitcher;
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      padding: const EdgeInsets.all(8),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        spacing: 24,
+        children: [
+          if (includeThemeSwitcher) const ThemeOptionInput(),
+          ...children,
+        ],
+      ),
+    );
+  }
+}