poc of button and gallery

apps/design_system_gallery/.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-dependencies
+.pub-cache/
+.pub/
+/build/
+/coverage/
+
+# 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

apps/design_system_gallery/.metadata

@@ -0,0 +1,45 @@
+# 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: "05db9689081f091050f01aed79f04dce0c750154"
+  channel: "stable"
+
+project_type: app
+
+# Tracks metadata for the flutter migrate command
+migration:
+  platforms:
+    - platform: root
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: android
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: ios
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: linux
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: macos
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: web
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+    - platform: windows
+      create_revision: 05db9689081f091050f01aed79f04dce0c750154
+      base_revision: 05db9689081f091050f01aed79f04dce0c750154
+
+  # 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'

apps/design_system_gallery/README.md

@@ -0,0 +1,16 @@
+# design_system_gallery
+
+A new Flutter project.
+
+## Getting Started
+
+This project is a starting point for a Flutter application.
+
+A few resources to get you started if this is your first Flutter project:
+
+- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
+
+For help getting started with Flutter development, view the
+[online documentation](https://docs.flutter.dev/), which offers tutorials,
+samples, guidance on mobile development, and a full API reference.

apps/design_system_gallery/analysis_options.yaml

@@ -0,0 +1,28 @@
+# This file configures the analyzer, which statically analyzes Dart code to
+# check for errors, warnings, and lints.
+#
+# The issues identified by the analyzer are surfaced in the UI of Dart-enabled
+# IDEs (https://dart.dev/tools#ides-and-editors). The analyzer can also be
+# invoked from the command line by running `flutter analyze`.
+
+# The following line activates a set of recommended lints for Flutter apps,
+# packages, and plugins designed to encourage good coding practices.
+include: package:flutter_lints/flutter.yaml
+
+linter:
+  # The lint rules applied to this project can be customized in the
+  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
+  # included above or to enable additional rules. A list of all available lints
+  # and their documentation is published at https://dart.dev/lints.
+  #
+  # Instead of disabling a lint rule for the entire project in the
+  # section below, it can also be suppressed for a single line of code
+  # or a specific dart file by using the `// ignore: name_of_lint` and
+  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
+  # producing the lint.
+  rules:
+    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
+    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
+
+# Additional information about this file can be found at
+# https://dart.dev/guides/language/analysis-options

apps/design_system_gallery/lib/components/button.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:stream_core_flutter/stream_core_flutter.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+// Import the widget from your app
+
+
+
+@widgetbook.UseCase(name: 'Default', type: StreamButton)
+Widget buildCoolButtonUseCase(BuildContext context) {
+  return Center(
+    child: StreamButton(
+      label: context.knobs.string(label: 'Label', initialValue: 'Click me'),
+      onTap: () {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('Button clicked')));
+      },
+      type: context.knobs.object.dropdown(
+        label: 'Type',
+        options: StreamButtonType.values,
+        initialOption: StreamButtonType.primary,
+        labelBuilder: (option) => option.name,
+      ),
+      size: context.knobs.object.dropdown(
+        label: 'Size',
+        options: StreamButtonSize.values,
+        initialOption: StreamButtonSize.large,
+        labelBuilder: (option) => option.name,
+      ),
+    ),
+  );
+}

apps/design_system_gallery/lib/main.dart

@@ -0,0 +1,38 @@
+import 'package:design_system_gallery/theme_config.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+// This file does not exist yet,
+// it will be generated in the next step
+import 'main.directories.g.dart';
+
+void main() {
+  runApp(const WidgetbookApp());
+}
+
+@widgetbook.App()
+class WidgetbookApp extends StatelessWidget {
+  const WidgetbookApp({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => ThemeConfiguration.empty(),
+      child: Widgetbook.material(
+        themeMode: ThemeMode.light,
+        // The [directories] variable does not exist yet,
+        // it will be generated in the next step
+        directories: directories,
+
+        appBuilder: (context, child) => MaterialApp(
+          theme: ThemeData.light().copyWith(
+            extensions: [context.watch<ThemeConfiguration>().themeData],
+          ),
+          home: Scaffold(body: child),
+        ),
+      ),
+    );
+  }
+}

apps/design_system_gallery/lib/main.directories.g.dart

@@ -0,0 +1,44 @@
+// dart format width=80
+// coverage:ignore-file
+// ignore_for_file: type=lint
+// ignore_for_file: unused_import, prefer_relative_imports, directives_ordering
+
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+// **************************************************************************
+// AppGenerator
+// **************************************************************************
+
+// ignore_for_file: no_leading_underscores_for_library_prefixes
+import 'package:design_system_gallery/components/button.dart'
+    as _design_system_gallery_components_button;
+import 'package:design_system_gallery/theme_config.dart'
+    as _design_system_gallery_theme_config;
+import 'package:widgetbook/widgetbook.dart' as _widgetbook;
+
+final directories = <_widgetbook.WidgetbookNode>[
+  _widgetbook.WidgetbookComponent(
+    name: 'ThemeConfig',
+    useCases: [
+      _widgetbook.WidgetbookUseCase(
+        name: 'Default',
+        builder: _design_system_gallery_theme_config.buildCoolButtonUseCase,
+      ),
+    ],
+  ),
+  _widgetbook.WidgetbookFolder(
+    name: 'components',
+    children: [
+      _widgetbook.WidgetbookComponent(
+        name: 'StreamButton',
+        useCases: [
+          _widgetbook.WidgetbookUseCase(
+            name: 'Default',
+            builder:
+                _design_system_gallery_components_button.buildCoolButtonUseCase,
+          ),
+        ],
+      ),
+    ],
+  ),
+];

apps/design_system_gallery/lib/theme_config.dart

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_colorpicker/flutter_colorpicker.dart';
+import 'package:provider/provider.dart';
+import 'package:stream_core_flutter/stream_core_flutter.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(name: 'Default', type: ThemeConfig)
+Widget buildCoolButtonUseCase(BuildContext context) {
+  return ThemeConfig();
+}
+
+class ThemeConfig extends StatelessWidget {
+  const ThemeConfig({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final themeConfiguration = Provider.of<ThemeConfiguration>(context);
+
+    return Column(
+      children: [
+        Text('Theme config'),
+        Row(
+          spacing: 16,
+          children: [
+            Container(
+              width: 25,
+              height: 25,
+              color: themeConfiguration.themeData.primaryColor,
+            ),
+            Text('Primary color'),
+            StreamButton(
+              label: 'Pick color',
+              onTap: () => pickColor(
+                context,
+                themeConfiguration.themeData.primaryColor ??
+                    Theme.of(context).colorScheme.primary,
+                (color) {
+                  themeConfiguration.setPrimaryColor(color);
+                },
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+
+  void pickColor(
+    BuildContext context,
+    Color pickerColor,
+    ValueChanged<Color> onColorChanged,
+  ) {
+    showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: Text('Pick a color'),
+        content: SingleChildScrollView(
+          child: MaterialPicker(
+            pickerColor: pickerColor,
+            onColorChanged: onColorChanged,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ThemeConfiguration extends ChangeNotifier {
+  StreamTheme themeData;
+
+  ThemeConfiguration({required this.themeData});
+
+  ThemeConfiguration.empty() : themeData = StreamTheme();
+
+  void setPrimaryColor(Color color) {
+    themeData = themeData.copyWith(primaryColor: color);
+    notifyListeners();
+  }
+}

apps/design_system_gallery/macos/.gitignore

@@ -0,0 +1,7 @@
+# Flutter-related
+**/Flutter/ephemeral/
+**/Pods/
+
+# Xcode-related
+**/dgph
+**/xcuserdata/

apps/design_system_gallery/macos/Flutter/Flutter-Debug.xcconfig

@@ -0,0 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"
+#include "ephemeral/Flutter-Generated.xcconfig"

apps/design_system_gallery/macos/Flutter/Flutter-Release.xcconfig

@@ -0,0 +1,2 @@
+#include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"
+#include "ephemeral/Flutter-Generated.xcconfig"

apps/design_system_gallery/macos/Podfile

@@ -0,0 +1,42 @@
+platform :osx, '10.15'
+
+# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
+ENV['COCOAPODS_DISABLE_STATS'] = 'true'
+
+project 'Runner', {
+  'Debug' => :debug,
+  'Profile' => :release,
+  'Release' => :release,
+}
+
+def flutter_root
+  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'ephemeral', 'Flutter-Generated.xcconfig'), __FILE__)
+  unless File.exist?(generated_xcode_build_settings_path)
+    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure \"flutter pub get\" is executed first"
+  end
+
+  File.foreach(generated_xcode_build_settings_path) do |line|
+    matches = line.match(/FLUTTER_ROOT\=(.*)/)
+    return matches[1].strip if matches
+  end
+  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Flutter-Generated.xcconfig, then run \"flutter pub get\""
+end
+
+require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)
+
+flutter_macos_podfile_setup
+
+target 'Runner' do
+  use_frameworks!
+
+  flutter_install_all_macos_pods File.dirname(File.realpath(__FILE__))
+  target 'RunnerTests' do
+    inherit! :search_paths
+  end
+end
+
+post_install do |installer|
+  installer.pods_project.targets.each do |target|
+    flutter_additional_macos_build_settings(target)
+  end
+end