[MDS-351] Create Buttons (#5)

* [MDS-351] Create MoonControlWrapper

* [MDS-351] FilledButton progress commit

* [MDS-351] Add MoonPlaceholderIcon

* [MDS-351] FilledButton and storybook changes

* [MDS-351] Add WidgetSurveyor

* [MDS-351] Add more getters to theme extension

* [MDS-351] Create MoonOpacity

* [MDS-351] Refactor MoonControlWrapper

* [MDS-351] Refactor MoonBorders types

* [MDS-351] Create MoonButtons theming

* [MDS-351] Correct theming lerp logic

* [MDS-351] Add button sizings

* [MDS-351] Add internal padding logic to buttons

* [MDS-351] Theming fixes

* [MDS-351] More theming fixes

* [MDS-351] Theming doc comments and values fixes

* [MDS-351] Refactor theming

* [MDS-351] MoonFilledButton progress commit

* [MDS-351] Finalise base button api

* [MDS-351] Create outlined and text button variants

* [MDS-351] Finalise MoonButton effects

* [MDS-351] Add SizedScaleTransition

* [MDS-351] Pulse effect start condition fix

* [MDS-351] Flutter upgrade dependency bump

* [MDS-351] Reorganize effects and button

* [MDS-351] Add and apply figma_squircle package

* [MDS-351] Finalize creating all buttons

* [MDS-351] Refactor BaseControl and Button

* [MDS-351] Flesh out Buttons story more

* [MDS-351] Finalize the Buttons

* [MDS-351] Add doc comments

.vscode/launch.json

@@ -0,0 +1,45 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "moon_flutter",
+      "request": "launch",
+      "type": "dart"
+    },
+    {
+      "name": "moon_flutter (profile mode)",
+      "request": "launch",
+      "type": "dart",
+      "flutterMode": "profile"
+    },
+    {
+      "name": "moon_flutter (release mode)",
+      "request": "launch",
+      "type": "dart",
+      "flutterMode": "release"
+    },
+    {
+      "name": "example",
+      "cwd": "example",
+      "request": "launch",
+      "type": "dart"
+    },
+    {
+      "name": "example (profile mode)",
+      "cwd": "example",
+      "request": "launch",
+      "type": "dart",
+      "flutterMode": "profile"
+    },
+    {
+      "name": "example (release mode)",
+      "cwd": "example",
+      "request": "launch",
+      "type": "dart",
+      "flutterMode": "release"
+    }
+  ]
+}

analysis_options.yaml

@@ -22,3 +22,4 @@ analyzer:
 linter:
   rules:
     depend_on_referenced_packages: false
+    use_setters_to_change_properties: false

example/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:example/src/storybook/storybook.dart';
 import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
@@ -35,7 +36,7 @@ class _HomePageState extends State<HomePage> {
     ),
   );
 
-  bool _isInStorybookMode = false;
+  bool _isInStorybookMode = true;
 
   void toggleStorybookMode() {
     setState(() {
@@ -46,53 +47,35 @@ class _HomePageState extends State<HomePage> {
   @override
   Widget build(BuildContext context) {
     return _isInStorybookMode
-        ? Storybook(
-            initialStory: "Default",
-            plugins: plugins,
-            wrapperBuilder: (context, child) => MaterialApp(
-              theme: ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.light]),
-              darkTheme: ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.dark]),
-              useInheritedMediaQuery: true,
-              home: Scaffold(body: child),
-            ),
-            stories: [
-              Story(
-                name: "Test Story",
-                description: "Test description",
-                builder: (context) {
-                  final theme = Theme.of(context).extension<MoonTheme>()!;
-                  return Container(
-                    color: theme.colors.piccolo,
-                    alignment: Alignment.center,
-                    child: Text("Test text", style: theme.typography.heading.text32),
-                  );
-                },
-              ),
-            ],
-          )
-        : Scaffold(
-            body: Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(
-                    "Moon Design for Flutter",
-                    style: TextStyle(
-                      fontSize: MediaQuery.of(context).size.width > 800 ? 72 : 32,
-                    ),
-                  ),
-                  SizedBox(height: MediaQuery.of(context).size.width > 800 ? 36 : 16),
-                  GestureDetector(
-                    onLongPress: toggleStorybookMode,
-                    child: Text(
-                      "Coming soon...",
+        ? const StorybookPage()
+        : MaterialApp(
+            theme: ThemeData.light().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.light]),
+            darkTheme: ThemeData.dark().copyWith(extensions: <ThemeExtension<dynamic>>[MoonTheme.dark]),
+            useInheritedMediaQuery: true,
+            home: Scaffold(
+              body: Center(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Moon Design for Flutter",
                       style: TextStyle(
-                        fontSize: MediaQuery.of(context).size.width > 800 ? 24 : 20,
-                        color: const Color(0xFF999CA0),
+                        fontSize: MediaQuery.of(context).size.width > 800 ? 72 : 32,
+                      ),
+                    ),
+                    SizedBox(height: MediaQuery.of(context).size.width > 800 ? 36 : 16),
+                    GestureDetector(
+                      onLongPress: toggleStorybookMode,
+                      child: Text(
+                        "Coming soon...",
+                        style: TextStyle(
+                          fontSize: MediaQuery.of(context).size.width > 800 ? 24 : 20,
+                          color: const Color(0xFF999CA0),
+                        ),
                       ),
                     ),
-                  ),
-                ],
+                  ],
+                ),
               ),
             ),
           );

example/lib/src/storybook/common/options.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+List<Option<Color>> colorOptions(BuildContext context) => [
+      Option(label: "piccolo", value: context.moonColors!.piccolo),
+      Option(label: "hit", value: context.moonColors!.hit),
+      Option(label: "beerus", value: context.moonColors!.beerus),
+      Option(label: "goku", value: context.moonColors!.goku),
+      Option(label: "gohan", value: context.moonColors!.gohan),
+      Option(label: "bulma", value: context.moonColors!.bulma),
+      Option(label: "trunks", value: context.moonColors!.trunks),
+      Option(label: "goten", value: context.moonColors!.goten),
+      Option(label: "popo", value: context.moonColors!.popo),
+      Option(label: "jiren", value: context.moonColors!.jiren),
+      Option(label: "heles", value: context.moonColors!.heles),
+      Option(label: "zeno", value: context.moonColors!.zeno),
+      Option(label: "krillin100", value: context.moonColors!.krillin100),
+      Option(label: "krillin60", value: context.moonColors!.krillin60),
+      Option(label: "krillin10", value: context.moonColors!.krillin10),
+      Option(label: "chichi100", value: context.moonColors!.chiChi100),
+      Option(label: "chichi60", value: context.moonColors!.chiChi60),
+      Option(label: "chichi10", value: context.moonColors!.chiChi10),
+      Option(label: "roshi100", value: context.moonColors!.roshi60),
+      Option(label: "roshi60", value: context.moonColors!.roshi100),
+      Option(label: "roshi10", value: context.moonColors!.roshi10),
+      Option(label: "frieza100", value: context.moonColors!.frieza100),
+      Option(label: "frieza60", value: context.moonColors!.frieza60),
+      Option(label: "frieza10", value: context.moonColors!.frieza10),
+      Option(label: "dodoria100", value: context.moonColors!.dodoria100),
+      Option(label: "dodoria60", value: context.moonColors!.dodoria60),
+      Option(label: "dodoria10", value: context.moonColors!.dodoria10),
+      Option(label: "cell100", value: context.moonColors!.cell100),
+      Option(label: "cell60", value: context.moonColors!.cell60),
+      Option(label: "cell10", value: context.moonColors!.cell10),
+      Option(label: "raditz100", value: context.moonColors!.raditz100),
+      Option(label: "raditz60", value: context.moonColors!.raditz60),
+      Option(label: "raditz10", value: context.moonColors!.raditz10),
+      Option(label: "nappa100", value: context.moonColors!.nappa100),
+      Option(label: "nappa60", value: context.moonColors!.nappa60),
+      Option(label: "nappa10", value: context.moonColors!.nappa10),
+      Option(label: "whis100", value: context.moonColors!.whis100),
+      Option(label: "whis60", value: context.moonColors!.whis60),
+      Option(label: "whis10", value: context.moonColors!.whis10),
+    ];

example/lib/src/storybook/common/widgets/text_divider.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/moon_design.dart';
+
+class TextDivider extends StatelessWidget {
+  final String text;
+
+  const TextDivider({
+    super.key,
+    required this.text,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const Expanded(child: Divider()),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+          child: Text(
+            text,
+            style: context.moonTypography!.text.text12.copyWith(color: context.moonColors!.trunks),
+          ),
+        ),
+        const Expanded(child: Divider()),
+      ],
+    );
+  }
+}

example/lib/src/storybook/common/widgets/version.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/moon_design.dart';
+
+class MoonVersionWidget extends StatelessWidget {
+  final String version;
+
+  const MoonVersionWidget({
+    super.key,
+    required this.version,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child: Padding(
+        padding: const EdgeInsets.only(bottom: 8.0),
+        child: Row(
+          mainAxisSize: MainAxisSize.min,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const MoonBrandIcon(),
+            const SizedBox(width: 8.0),
+            Text(
+              "Moon Design",
+              style: MoonTypography.textStyles.text.text16,
+            ),
+            const SizedBox(width: 6.0),
+            Text("v$version", style: MoonTypography.textStyles.heading.text16),
+          ],
+        ),
+      ),
+    );
+  }
+}