feat: [MDS-1091] Storybook UI update (#395)

Co-authored-by: Birgitt Majas <birgitt.majas@yolo.com>
coingaming · Apr 19, 2024 · 12887d3 · 12887d3
1 parent 3667a4b
commit 12887d3
Show file tree

Hide file tree

Showing 22 changed files with 746 additions and 685 deletions.
diff --git a/...le/assets/code_snippets/search_generic.md → .../assets/code_snippets/search_with_list.md b/...le/assets/code_snippets/search_generic.md → .../assets/code_snippets/search_with_list.md
@@ -19,14 +19,14 @@ enum Options {
   }
 }
 
-class SearchGeneric extends StatefulWidget {
-  const SearchGeneric({super.key});
+class SearchWithList extends StatefulWidget {
+  const SearchWithList({super.key});
 
 @override
-  State<SearchGeneric> createState() => _SearchGenericState();
+  State<SearchWithList> createState() => _SearchWithListState();
 }
 
-class _SearchGenericState extends State<SearchGeneric> {
+class _SearchWithListState extends State<SearchWithList> {
   final TextEditingController _searchController = TextEditingController();
   final List<Options> _optionsList = Options.values;
 

diff --git a/example/assets/svg/moon-logo-long.svg b/example/assets/svg/moon-logo-long.svg
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,12 +1,17 @@
 import 'package:example/src/storybook/storybook.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_web_plugins/url_strategy.dart';
-import 'package:go_router/go_router.dart';
 import 'package:moon_design/moon_design.dart';
 
-void main() {
+void main() async {
   usePathUrlStrategy();
-  GoRouter.optionURLReflectsImperativeAPIs = true;
+
+  WidgetsFlutterBinding.ensureInitialized();
+
+  await SystemChrome.setPreferredOrientations(
+    [DeviceOrientation.portraitUp],
+  );
 
   runApp(const MyApp());
 }

diff --git a/example/lib/src/storybook/common/widgets/logo.dart b/example/lib/src/storybook/common/widgets/logo.dart
@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+
+class MoonLogoWidget extends StatefulWidget {
+  const MoonLogoWidget({super.key});
+
+  @override
+  State<MoonLogoWidget> createState() => _MoonLogoWidgetState();
+}
+
+class _MoonLogoWidgetState extends State<MoonLogoWidget> {
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: Padding(
+        padding: const EdgeInsets.only(top: 40.0, left: 36.0, right: 24.0, bottom: 8.0),
+        child: Row(
+          children: [
+            SvgPicture.asset("assets/svg/moon-logo-long.svg", width: 24.0, height: 24.0),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/...orybook/routing/routing_error_widget.dart → .../common/widgets/routing_error_widget.dart b/...orybook/routing/routing_error_widget.dart → .../common/widgets/routing_error_widget.dart
@@ -8,10 +8,6 @@ class RoutingErrorWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) => Scaffold(
-        appBar: AppBar(
-          title: const Text('Page Not Found'),
-          backgroundColor: context.moonColors!.piccolo,
-        ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
@@ -23,14 +19,15 @@ class RoutingErrorWidget extends StatelessWidget {
               ),
               Text(
                 'Lost in space',
-                style: context.moonTypography!.heading.text24,
+                style: context.moonTypography!.heading.text32,
               ),
-              const SizedBox(height: 16),
+              const SizedBox(height: 8),
               Text(
                 'Houston, we have a problem. Moon not found.',
                 style: context.moonTypography!.body.text16,
+                textAlign: TextAlign.center,
               ),
-              const SizedBox(height: 16),
+              const SizedBox(height: 32),
               MoonButton(
                 onTap: () => context.go('/'),
                 borderColor: context.moonColors!.piccolo,

diff --git a/example/lib/src/storybook/common/widgets/version.dart b/example/lib/src/storybook/common/widgets/version.dart
@@ -14,8 +14,8 @@ class MoonVersionWidget extends StatefulWidget {
 }
 
 class _MoonVersionWidgetState extends State<MoonVersionWidget> {
-  bool isLargeScreen = MediaQueryData.fromView(PlatformDispatcher.instance.implicitView!).size.width >
-      StorybookPage.autoLayoutThreshold;
+  bool isLargeScreen =
+      MediaQueryData.fromView(PlatformDispatcher.instance.implicitView!).size.width > StorybookPage.autoLayoutThreshold;
 
   String? _version = "";
 
@@ -25,9 +25,7 @@ class _MoonVersionWidgetState extends State<MoonVersionWidget> {
 
     final PackageInfo packageInfo = await PackageInfo.fromPlatform();
 
-    setState(() {
-      _version = packageInfo.version;
-    });
+    setState(() => _version = packageInfo.version);
   }
 
   @override
@@ -45,11 +43,11 @@ class _MoonVersionWidgetState extends State<MoonVersionWidget> {
                 const SizedBox(width: 8.0),
                 Text(
                   "Moon Design",
-                  style: MoonTypography.typography.heading.text16,
+                  style: MoonTypography.typography.heading.text14,
                 ),
               ],
               const SizedBox(width: 6.0),
-              Text("v$_version", style: MoonTypography.typography.heading.text16),
+              Text("v$_version", style: MoonTypography.typography.heading.text14),
             ],
           ),
         ),

diff --git a/example/lib/src/storybook/routing/app_router.dart b/example/lib/src/storybook/routing/app_router.dart
@@ -1,8 +1,8 @@
-import 'package:example/src/storybook/routing/routing_error_widget.dart';
+import 'package:example/src/storybook/common/widgets/routing_error_widget.dart';
 import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart';
 import 'package:example/src/storybook/stories/composites/combobox_single_select.dart';
-import 'package:example/src/storybook/stories/composites/search_generic.dart';
 import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart';
+import 'package:example/src/storybook/stories/composites/search_with_list.dart';
 import 'package:example/src/storybook/stories/primitives/accordion.dart';
 import 'package:example/src/storybook/stories/primitives/alert.dart';
 import 'package:example/src/storybook/stories/primitives/auth_code.dart';
@@ -38,7 +38,6 @@ import 'package:example/src/storybook/stories/primitives/tooltip.dart';
 
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:storybook_flutter/storybook_flutter.dart';
 
 const String primitivesDirectory = '/primitives';
 const String compositesDirectory = '/composites';
@@ -59,10 +58,10 @@ GoRouter router = GoRouter(
       case '$compositesDirectory${ComboboxSingleSelectStory.subdirectory}':
         return ComboboxSingleSelectStory.path;
 
-      case SearchGenericStory.subdirectory:
-        return SearchGenericStory.path;
-      case '$compositesDirectory${SearchGenericStory.subdirectory}':
-        return SearchGenericStory.path;
+      case SearchWithListStory.subdirectory:
+        return SearchWithListStory.path;
+      case '$compositesDirectory${SearchWithListStory.subdirectory}':
+        return SearchWithListStory.path;
 
       case CircularLoaderStory.subdirectory:
         return CircularLoaderStory.path;
@@ -81,7 +80,6 @@ GoRouter router = GoRouter(
     GoRoute(
       path: '/',
       redirect: (BuildContext _, GoRouterState __) {
-        Storybook.storyRouterNotifier.currentStoryRoute = AccordionStory.path;
         return AccordionStory.path;
       },
     ),
@@ -238,9 +236,9 @@ GoRouter router = GoRouter(
       ),
     ),
     GoRoute(
-      path: SearchGenericStory.path,
+      path: SearchWithListStory.path,
       pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage(
-        child: SearchGenericStory(),
+        child: SearchWithListStory(),
       ),
     ),
     GoRoute(

diff --git a/example/lib/src/storybook/routing/route_aware_stories.dart b/example/lib/src/storybook/routing/route_aware_stories.dart
@@ -1,8 +1,8 @@
 import 'package:example/src/storybook/routing/app_router.dart';
 import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart';
 import 'package:example/src/storybook/stories/composites/combobox_single_select.dart';
-import 'package:example/src/storybook/stories/composites/search_generic.dart';
 import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart';
+import 'package:example/src/storybook/stories/composites/search_with_list.dart';
 import 'package:example/src/storybook/stories/primitives/accordion.dart';
 import 'package:example/src/storybook/stories/primitives/alert.dart';
 import 'package:example/src/storybook/stories/primitives/auth_code.dart';
@@ -36,33 +36,32 @@ import 'package:example/src/storybook/stories/primitives/text_input_group.dart';
 import 'package:example/src/storybook/stories/primitives/toast.dart';
 import 'package:example/src/storybook/stories/primitives/tooltip.dart';
 import 'package:flutter/services.dart';
-
 import 'package:storybook_flutter/storybook_flutter.dart';
 
 const String directory = 'assets/code_snippets/';
 
 final List<Story> routeAwareStories = [
   // Composite stories.
   Story.asRoute(
-    name: 'Composites/Combobox/single select',
+    name: 'Composites/Combobox/single select combobox',
     routePath: ComboboxSingleSelectStory.path,
     router: router,
     codeString: fetchAsset('combobox_single_select.md'),
   ),
   Story.asRoute(
-    name: 'Composites/Combobox/multi select',
+    name: 'Composites/Combobox/multi select combobox',
     routePath: ComboboxMultiSelectStory.path,
     router: router,
     codeString: fetchAsset('combobox_multi_select.md'),
   ),
   Story.asRoute(
-    name: 'Composites/Search/generic',
-    routePath: SearchGenericStory.path,
+    name: 'Composites/Search/search with list',
+    routePath: SearchWithListStory.path,
     router: router,
-    codeString: fetchAsset('search_generic.md'),
+    codeString: fetchAsset('search_with_list.md'),
   ),
   Story.asRoute(
-    name: 'Composites/Search/with dropdown',
+    name: 'Composites/Search/search with dropdown',
     routePath: SearchWithDropdownStory.path,
     router: router,
     codeString: fetchAsset('search_with_dropdown.md'),

diff --git a/example/lib/src/storybook/stories/composites/search_with_dropdown.dart b/example/lib/src/storybook/stories/composites/search_with_dropdown.dart
@@ -7,7 +7,7 @@ import 'package:storybook_flutter/storybook_flutter.dart';
 enum Component { input, dropdown }
 
 class SearchWithDropdownStory extends StatefulWidget {
-  static const path = '/composites/search/dropdown';
+  static const path = '/composites/search/search_with_dropdown';
 
   const SearchWithDropdownStory({super.key});
 

diff --git a/...ok/stories/composites/search_generic.dart → .../stories/composites/search_with_list.dart b/...ok/stories/composites/search_generic.dart → .../stories/composites/search_with_list.dart
@@ -4,17 +4,17 @@ import 'package:flutter/material.dart';
 import 'package:moon_design/moon_design.dart';
 import 'package:storybook_flutter/storybook_flutter.dart';
 
-class SearchGenericStory extends StatefulWidget {
+class SearchWithListStory extends StatefulWidget {
   static const subdirectory = '/search';
-  static const path = '/composites/search/generic';
+  static const path = '/composites/search/search_with_list';
 
-  const SearchGenericStory({super.key});
+  const SearchWithListStory({super.key});
 
   @override
-  State<SearchGenericStory> createState() => _SearchGenericStoryState();
+  State<SearchWithListStory> createState() => _SearchWithListStoryState();
 }
 
-class _SearchGenericStoryState extends State<SearchGenericStory> {
+class _SearchWithListStoryState extends State<SearchWithListStory> {
   final TextEditingController _searchController = TextEditingController();
   final List<ComponentOptions> _optionsList = ComponentOptions.values;
 

diff --git a/example/lib/src/storybook/stories/primitives/avatar.dart b/example/lib/src/storybook/stories/primitives/avatar.dart
@@ -107,45 +107,47 @@ class AvatarStory extends StatelessWidget {
       initial: true,
     );
 
-    return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          const TextDivider(
-            text: "MoonAvatar",
-            paddingTop: 0,
-          ),
-          MoonAvatar(
-            avatarSize: avatarSizeKnob,
-            badgeSize: badgeSizeKnob?.toDouble(),
-            borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
-            badgeMarginValue: badgeMarginKnob?.toDouble(),
-            backgroundColor: backgroundColor,
-            showBadge: showBadgeKnob,
-            badgeColor: badgeColor,
-            badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
-            content: Padding(
-              padding: const EdgeInsets.only(top: 1.0),
-              child: Text(
-                customLabelTextKnob,
-                style: TextStyle(color: textColor),
+    return Center(
+      child: SingleChildScrollView(
+        padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            const TextDivider(
+              text: "MoonAvatar",
+              paddingTop: 0,
+            ),
+            MoonAvatar(
+              avatarSize: avatarSizeKnob,
+              badgeSize: badgeSizeKnob?.toDouble(),
+              borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+              badgeMarginValue: badgeMarginKnob?.toDouble(),
+              backgroundColor: backgroundColor,
+              showBadge: showBadgeKnob,
+              badgeColor: badgeColor,
+              badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
+              content: Padding(
+                padding: const EdgeInsets.only(top: 1.0),
+                child: Text(
+                  customLabelTextKnob,
+                  style: TextStyle(color: textColor),
+                ),
               ),
             ),
-          ),
-          const TextDivider(text: "Custom MoonAvatar with image background"),
-          MoonAvatar(
-            avatarSize: avatarSizeKnob,
-            badgeSize: badgeSizeKnob?.toDouble(),
-            borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
-            badgeMarginValue: badgeMarginKnob?.toDouble(),
-            backgroundColor: backgroundColor,
-            showBadge: showBadgeKnob,
-            badgeColor: badgeColor,
-            badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
-            backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"),
-          ),
-        ],
+            const TextDivider(text: "Custom MoonAvatar with image background"),
+            MoonAvatar(
+              avatarSize: avatarSizeKnob,
+              badgeSize: badgeSizeKnob?.toDouble(),
+              borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+              badgeMarginValue: badgeMarginKnob?.toDouble(),
+              backgroundColor: backgroundColor,
+              showBadge: showBadgeKnob,
+              badgeColor: badgeColor,
+              badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
+              backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"),
+            ),
+          ],
+        ),
       ),
     );
   }