From 4abe7ee412cedd0dd270c298d570d6d691b6a4c5 Mon Sep 17 00:00:00 2001 From: ashishg Date: Fri, 12 Jan 2024 23:29:38 +0530 Subject: [PATCH 1/6] fix: routing changes added --- example/lib/routes/router.dart | 265 +++++++++++++++++- .../avatar_with_label_preview.dart | 38 +++ .../icon_button_preview.dart | 29 ++ .../vstack_reversed_preview.dart | 44 +++ 4 files changed, 375 insertions(+), 1 deletion(-) create mode 100644 example/lib/widgets/storybook_widgets/avatar_with_label_preview.dart create mode 100644 example/lib/widgets/storybook_widgets/icon_button_preview.dart create mode 100644 example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart diff --git a/example/lib/routes/router.dart b/example/lib/routes/router.dart index 8b450540..f65816f8 100644 --- a/example/lib/routes/router.dart +++ b/example/lib/routes/router.dart @@ -2,10 +2,48 @@ import 'package:flutter/material.dart'; import 'package:gluestack_ui_example/example/public.dart'; import 'package:gluestack_ui_example/home.dart'; import 'package:gluestack_ui_example/widgets/storybook.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/avatar_with_label_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/badge_with_avatar_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/button_group_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/button_with_full_width_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/button_with_icon_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/checkbox_group_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/checkbox_with_help_text_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/controlled_checkbox_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/divider_variants_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/hstack_reversed_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/icon_button_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/input_with_formcontrol_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/input_with_icon_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/link_button_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/link_with_icon_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/link_with_text_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/loading_button_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/multiple_checkbox_horizontal_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/multiple_checkbox_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/multiple_radio_button_horizontal_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/multiple_radio_button_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/pressable_with_states_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/progress_colors_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/progress_custom_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/progress_value_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/public.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/radio_button_controlled_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/radio_button_with_formcontrol_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/radio_button_with_help_text_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/spinner_colors_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/spinner_with_label_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/switch_checked_state_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/switch_color_scheme_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/switch_with_label_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/textarea_formcontrol_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/uncontrolled_checkbox_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/vstack_reversed_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_wrapper.dart'; import 'package:go_router/go_router.dart'; +import '../widgets/storybook_widgets/formcontrol_checkbox_preview.dart'; + final GoRouter router = GoRouter( routes: [ GoRoute( @@ -28,14 +66,60 @@ final GoRouter router = GoRouter( path: "example-avatar", builder: (context, state) => const AvatarExample(), ), + GoRoute( + path: "avatar-with-label-preview", + builder: (BuildContext context, GoRouterState state) { + return const AvatarWithLabelPreview(); + }, + ), GoRoute( path: "example-badge", builder: (context, state) => const BadgeExample(), ), + GoRoute( + path: "badge-with-avatar-preview", + builder: (BuildContext context, GoRouterState state) { + return const BadgeWithAvatarPreview(); + }, + ), GoRoute( path: "example-button", builder: (context, state) => const ButtonExample(), ), + GoRoute( + path: "loading-button-preview", + builder: (context, state) => const LoadingButtonPreview(), + ), + GoRoute( + path: "icon-button-preview", + builder: (BuildContext context, GoRouterState state) { + return const IconButtonPreview(); + }, + ), + GoRoute( + path: "button-group-preview", + builder: (BuildContext context, GoRouterState state) { + return const ButtonGroupPreview(); + }, + ), + GoRoute( + path: "button-with-icons-preview", + builder: (BuildContext context, GoRouterState state) { + return const ButtonWithIconsPreview(); + }, + ), + GoRoute( + path: "button-with-link-preview", + builder: (BuildContext context, GoRouterState state) { + return const LinkButtonPreview(); + }, + ), + GoRoute( + path: "button-with-fullwidth-preview", + builder: (BuildContext context, GoRouterState state) { + return const ButtonWithFullWidthPreview(); + }, + ), GoRoute( path: "example-center", builder: (context, state) => const CenterExample(), @@ -44,10 +128,60 @@ final GoRouter router = GoRouter( path: "example-checkbox", builder: (context, state) => const CheckBoxExample(), ), + + GoRoute( + path: "multiple-checkbox-preview", + builder: (BuildContext context, GoRouterState state) { + return const MultipleCheckboxPreview(); + }, + ), + GoRoute( + path: "multiple-checkbox-horizontal-preview", + builder: (BuildContext context, GoRouterState state) { + return const MultipleCheckboxHorizontalPreview(); + }, + ), + GoRoute( + path: "checkbox-with-help-text-preview", + builder: (BuildContext context, GoRouterState state) { + return const CheckboxWithHelpTextPreview(); + }, + ), + GoRoute( + path: "form-control-checkbox-preview", + builder: (BuildContext context, GoRouterState state) { + return const FormControlCheckboxPreview(); + }, + ), + GoRoute( + path: "controlled-checkbox-preview", + builder: (BuildContext context, GoRouterState state) { + return const ControlledCheckboxPreview(); + }, + ), + GoRoute( + path: "uncontrolled-checkbox-preview", + builder: (BuildContext context, GoRouterState state) { + return const UncontrolledCheckboxPreview(); + }, + ), + GoRoute( + path: "checkbox-group-preview", + builder: (BuildContext context, GoRouterState state) { + return const CheckboxGroupPreview(); + }, + ), GoRoute( path: "example-divider", builder: (context, state) => const DividerExample(), ), + + GoRoute( + path: "divider-variants-preview", + builder: (BuildContext context, GoRouterState state) { + return const DividerVariantsPreview(); + }, + ), GoRoute( path: "example-fab", builder: (context, state) => const FabExample(), @@ -68,6 +202,12 @@ final GoRouter router = GoRouter( path: "example-hstack", builder: (context, state) => const HStackExample(), ), + GoRoute( + path: "hstack-reversed-preview", + builder: (BuildContext context, GoRouterState state) { + return const HStackReversedPreview(); + }, + ), GoRoute( path: "example-icon", builder: (context, state) => const IconExample(), @@ -80,34 +220,151 @@ final GoRouter router = GoRouter( path: "example-input", builder: (context, state) => const InputExample(), ), + GoRoute( + path: "input-with-formcontrol-preview", + builder: (BuildContext context, GoRouterState state) { + return const InputWithFormcontrolPreview(); + }, + ), + GoRoute( + path: "input-with-icon-preview", + builder: (BuildContext context, GoRouterState state) { + return const InputWithIconPreview(); + }, + ), GoRoute( path: "example-link", builder: (context, state) => const LinkExample(), ), + GoRoute( + path: "link-with-text-preview", + builder: (BuildContext context, GoRouterState state) { + return const LinkWithTextPreview(); + }, + ), + GoRoute( + path: "link-with-icon-preview", + builder: (BuildContext context, GoRouterState state) { + return const LinkWithIconPreview(); + }, + ), GoRoute( path: "example-pressable", builder: (context, state) => const PressableExample(), ), + GoRoute( + path: "pressable-with-states-preview", + builder: (BuildContext context, GoRouterState state) { + return const PressableWithStatesPreview(); + }, + ), GoRoute( path: "example-progress", builder: (context, state) => const ProgressExample(), ), + + GoRoute( + path: "progress-value-preview", + builder: (BuildContext context, GoRouterState state) { + return const ProgressValuePreview(); + }, + ), + GoRoute( + path: "progress-colors-preview", + builder: (BuildContext context, GoRouterState state) { + return const ProgressColorsPreview(); + }, + ), + GoRoute( + path: "progress-custom-preview", + builder: (BuildContext context, GoRouterState state) { + return const ProgressCustomPreview(); + }, + ), GoRoute( - path: "example-radio_button", + path: "example-radio-button", builder: (context, state) => const RadioButtonExample(), ), + + GoRoute( + path: "multiple-radio-button-preview", + builder: (BuildContext context, GoRouterState state) { + return const MultipleRadioButtonPreview(); + }, + ), + GoRoute( + path: "multiple-radio-button-horizontal-preview", + builder: (BuildContext context, GoRouterState state) { + return const MultipleRadioButtonHorizontalPreview(); + }, + ), + GoRoute( + path: "radio-button-with-help-text-preview", + builder: (BuildContext context, GoRouterState state) { + return const RadioButtonWithHelpTextPreview(); + }, + ), + GoRoute( + path: "radio-button-with-formcontrol-preview", + builder: (BuildContext context, GoRouterState state) { + return const RadioButtonWithFormControlPreview(); + }, + ), + GoRoute( + path: "radio-button-controlled-preview", + builder: (BuildContext context, GoRouterState state) { + return const RadioButtonControlledPreview(); + }, + ), GoRoute( path: "example-spinner", builder: (context, state) => const SpinnerExample(), ), + + GoRoute( + path: "spinner-with-label-preview", + builder: (BuildContext context, GoRouterState state) { + return const SpinnerWithLabelPreview(); + }, + ), + GoRoute( + path: "spinner-with-colors-preview", + builder: (BuildContext context, GoRouterState state) { + return const SpinnerWithColorsPreview(); + }, + ), GoRoute( path: "example-switch", builder: (context, state) => const SwitchExample(), ), + GoRoute( + path: "switch-with-label-preview", + builder: (BuildContext context, GoRouterState state) { + return const SwitchWithLabelPreview(); + }, + ), + GoRoute( + path: "switch-checked-state-preview", + builder: (BuildContext context, GoRouterState state) { + return const SwitchCheckedStatePreview(); + }, + ), + GoRoute( + path: "switch-with-color-scheme-preview", + builder: (BuildContext context, GoRouterState state) { + return const SwitchWithColorSchemePreview(); + }, + ), GoRoute( path: "example-text_area", builder: (context, state) => const TextAreaExample(), ), + GoRoute( + path: "textarea-formcontrol-preview", + builder: (BuildContext context, GoRouterState state) { + return const TextareaFormControlPreview(); + }, + ), GoRoute( path: "example-text", builder: (context, state) => const TextExample(), @@ -120,6 +377,12 @@ final GoRouter router = GoRouter( path: "example-vstack", builder: (context, state) => const VStackExample(), ), + GoRoute( + path: "vstack-reversed-preview", + builder: (BuildContext context, GoRouterState state) { + return const VStackReversedPreview(); + }, + ), // Generate individual Storybook screens for every widget. This is referenced in docs website iframe. ...kStories.map( diff --git a/example/lib/widgets/storybook_widgets/avatar_with_label_preview.dart b/example/lib/widgets/storybook_widgets/avatar_with_label_preview.dart new file mode 100644 index 00000000..8d2a8095 --- /dev/null +++ b/example/lib/widgets/storybook_widgets/avatar_with_label_preview.dart @@ -0,0 +1,38 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class AvatarWithLabelPreview extends StatelessWidget { + const AvatarWithLabelPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Avatar', + stories: [ + Story( + name: 'Avatar', + builder: (context) => GSVStack( + children: [ + GSHStack( + children: [ + GSAvatar( + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Geeky Stack'), + ), + const GSHeading(text: 'text') + ], + ), + ], + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/icon_button_preview.dart b/example/lib/widgets/storybook_widgets/icon_button_preview.dart new file mode 100644 index 00000000..853f9b90 --- /dev/null +++ b/example/lib/widgets/storybook_widgets/icon_button_preview.dart @@ -0,0 +1,29 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class IconButtonPreview extends StatelessWidget { + const IconButtonPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Button', + stories: [ + Story( + name: 'Button', + builder: (context) => GSButton( + style: GSStyle(width: 55, height: 55, borderRadius: 30), + child: const GSButtonIcon( + icon: Icons.calendar_view_week_outlined, + ), + onPressed: () {}, + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart b/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart new file mode 100644 index 00000000..f46e579b --- /dev/null +++ b/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart @@ -0,0 +1,44 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class VStackReversedPreview extends StatelessWidget { + const VStackReversedPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'VStack', + stories: [ + Story( + name: 'VStack', + builder: (context) => GSVStack( + space: GSSpaces.$md, + mainAxisAlignment: MainAxisAlignment.center, + isReversed: true, + children: [ + GSBox( + style: + GSStyle(height: 100, width: 100, bg: $GSColors.blue300), + child: const Text('1'), + ), + GSBox( + style: + GSStyle(height: 100, width: 100, bg: $GSColors.blue400), + child: const Text('2'), + ), + GSBox( + style: + GSStyle(height: 100, width: 100, bg: $GSColors.blue500), + child: const Text('3'), + ), + ], + ), + ), + ], + ), + ); + } +} From 8eeec40b18a8ebec8b537c3a0a4915fecfdcdbf6 Mon Sep 17 00:00:00 2001 From: ashishg Date: Fri, 12 Jan 2024 23:47:23 +0530 Subject: [PATCH 2/6] fix: routing changes added --- .../DataDisplay/Badge/index.stories.mdx | 10 +- example/lib/routes/router.dart | 147 +++++------------- 2 files changed, 44 insertions(+), 113 deletions(-) diff --git a/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx b/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx index 0c585f1b..0bd564a1 100644 --- a/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx +++ b/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx @@ -10,8 +10,8 @@ pageDescription: The badge widget lets you quickly and easily add status indicat showHeader: true --- -import { Meta } from "@storybook/addon-docs"; -import { env } from "process"; +import { Meta } from '@storybook/addon-docs'; +import { env } from 'process'; import { AppProvider, @@ -20,12 +20,12 @@ import { Table, TableContainer, InlineCode, -} from "@gluestack/design-system"; +} from '@gluestack/design-system'; + +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; + + +GSHStack( + children: [ + GSAvatar( + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Geeky Stack'), + ), + const GSHeading(text: 'text'), + ], +) + +``` + #### GSAvatar with Icon An GSAvatar widget with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface. @@ -194,3 +220,7 @@ A custom GSAvatar widget with text allows for personalized user or entity repres #### Fallback Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct. + +``` + +``` From f713e02b72907aacb6e2bd8a3679a9d272b7a39a Mon Sep 17 00:00:00 2001 From: ashishg Date: Mon, 15 Jan 2024 11:15:36 +0530 Subject: [PATCH 5/6] fix: Quotes fix --- .../src/components/DataDisplay/Badge/index.stories.mdx | 10 +++++----- .../components/MediaAndIcons/Avatar/index.stories.mdx | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx b/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx index 0bd564a1..0c585f1b 100644 --- a/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx +++ b/example/lib/example/storybook/src/components/DataDisplay/Badge/index.stories.mdx @@ -10,8 +10,8 @@ pageDescription: The badge widget lets you quickly and easily add status indicat showHeader: true --- -import { Meta } from '@storybook/addon-docs'; -import { env } from 'process'; +import { Meta } from "@storybook/addon-docs"; +import { env } from "process"; import { AppProvider, @@ -20,12 +20,12 @@ import { Table, TableContainer, InlineCode, -} from '@gluestack/design-system'; +} from "@gluestack/design-system"; + +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; +``` + #### Orientation A GSDivider widget with a specified divider orientation allows for clear visual separation of content, either horizontally or vertically, providing a structured and organized layout within a user interface. diff --git a/example/lib/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx b/example/lib/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx index c72bf4f6..bede3086 100644 --- a/example/lib/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx +++ b/example/lib/example/storybook/src/components/MediaAndIcons/Avatar/index.stories.mdx @@ -193,34 +193,143 @@ GSHStack( ``` -#### GSAvatar with Icon - -An GSAvatar widget with an icon combines a graphical symbol or icon with a user or entity representation, providing a visually appealing and easily recognizable identification within a user interface. - #### GSAvatar with Image An GSAvatar widget with an image incorporates a user or entity representation using a profile picture or image, adding a personalized touch and visual identification within a user interface. -#### GSAvatar Group - -The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality. + -#### GSAvatar Group (Without Badge) +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; -An GSAvatar Group widget without badges organizes multiple avatars in a visually cohesive manner, offering a streamlined display of user or entity representations without additional visual indicators or badges within a user interface. +GSVStack( + children: [ + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Ronald Richards'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Nursing Assistant'), + GSText(text: 'Ronald Richards'), + ], + ), + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Arlene McCoy'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Arlene McCoy'), + GSText(text: 'Marketing Coordinator'), + ], + ), + ], + ), + ], +) -#### GSAvatar Group (with Badge) +``` -An GSAvatar Group widget with badges presents a collection of avatars with accompanying badges, providing visual indicators or additional information associated with each user or entity representation within a user interface. +#### GSAvatar Group -#### Custom +The avatar group allows users to group avatars and display them in a horizontal or vertical row for better visual representation and functionality. -A custom GSAvatar widget with text allows for personalized user or entity representations by combining customized visuals, such as an image or icon, with accompanying text, providing a unique and identifiable presentation within a user interface. + -#### Fallback +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; -Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct. +GSAvatarGroup( + children: [ + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + padding: const EdgeInsets.symmetric(horizontal: 20), + ), + fallBackText: const GSAvatarFallBackText('RA'), + ), + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('BA'), + ), + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('GA'), + ), + ], +) ``` -``` +#### Fallback + +Fallback text is shown when the image fails to load, the image is not available or the provided image url is not correct. diff --git a/example/lib/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx b/example/lib/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx index 26ff53f3..8a1608ea 100644 --- a/example/lib/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx +++ b/example/lib/example/storybook/src/components/MediaAndIcons/Icon/index.stories.mdx @@ -107,7 +107,3 @@ GSIcon widget is created using Icon widget from flutter. It extends all the prop > Note: These properties are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. - -### Examples - -The Examples section provides visual representations of the different variants of the widget, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. diff --git a/example/lib/example/storybook/src/components/Others/Fab/index.stories.mdx b/example/lib/example/storybook/src/components/Others/Fab/index.stories.mdx index 19ef39ec..57f67379 100644 --- a/example/lib/example/storybook/src/components/Others/Fab/index.stories.mdx +++ b/example/lib/example/storybook/src/components/Others/Fab/index.stories.mdx @@ -277,10 +277,374 @@ The Examples section provides visual representations of the different variants o A GSFab widget with an icon adds a visually striking and easily recognizable button that triggers a specific action or function within a user interface. + + +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; + +GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 360, + width: 320, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20), + ), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Kevin James'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Kevin James'), + GSText(text: 'Tech Lead'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Jacob Jones'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Jacob Jones'), + GSText(text: 'Manager'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Albert Flores'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Albert Flores'), + GSText(text: 'HR'), + ], + ) + ], + ), + ], + ), + ), + GSFab( + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.edit_square, + style: GSStyle(color: $GSColors.white), + ), + ), + ], + ), +) + +``` + #### GSFab with Icon and Text A GSFab widget with an icon and text combines a visual icon with accompanying text to create a prominent and descriptive button that triggers a specific action or function within a user interface. + + +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; + +GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 360, + width: 320, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20), + ), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Kevin James'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Kevin James'), + GSText(text: 'Tech Lead'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Jacob Jones'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Jacob Jones'), + GSText(text: 'Manager'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80', + imageType: GSImageType.network, + ), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('Albert Flores'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Albert Flores'), + GSText(text: 'HR'), + ], + ) + ], + ), + ], + ), + ), + GSFab( + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.edit_square, + style: GSStyle(color: $GSColors.white), + ), + ), + ], + ), +) + +``` + #### Placement A GSFab widget with placement options allows for flexible positioning of the button within a user interface, enabling convenient and intuitive access to key actions or functionalities in various locations. + + + +```dart +import 'package:gluestack_ui/gluestack_ui.dart'; + +GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 300, + width: 450, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20), + ), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + ), + ), + child: const GSCheckBoxIcon(), + ), + value: "Design", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Design"), + GSText( + text: 'Subscribe to updates from the Design Feed', + ), + ], + ), + ), + const SizedBox( + height: 20, + ), + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + ), + ), + child: const GSCheckBoxIcon(), + ), + value: "Marketing", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Marketing"), + GSText( + text: 'Subscribe to updates from the Marketing Feed', + ), + ], + ), + ), + const SizedBox( + height: 20, + ), + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + ), + ), + child: const GSCheckBoxIcon(), + ), + value: "Engineering", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Engineering"), + GSText( + text: 'Subscribe to updates from the Engineering Feed', + ), + ], + ), + ), + ], + ), + ), + GSFab( + placement: GSPlacements.bottomCenter, + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.add, + style: GSStyle(color: $GSColors.white), + ), + ), + ], + ), +) + +``` diff --git a/example/lib/example/storybook/src/components/forms/Radio/index.stories.mdx b/example/lib/example/storybook/src/components/forms/Radio/index.stories.mdx index f00e9747..248a5b3c 100644 --- a/example/lib/example/storybook/src/components/forms/Radio/index.stories.mdx +++ b/example/lib/example/storybook/src/components/forms/Radio/index.stories.mdx @@ -571,11 +571,3 @@ GSVStack( ) ``` - -#### Uncontrolled - -The GSRadio widget can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally. - -#### Radio group - -The GSRadio group widget allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality. diff --git a/example/lib/example/storybook/src/components/forms/button/index.stories.mdx b/example/lib/example/storybook/src/components/forms/button/index.stories.mdx index 1058c94f..ca592fb4 100644 --- a/example/lib/example/storybook/src/components/forms/button/index.stories.mdx +++ b/example/lib/example/storybook/src/components/forms/button/index.stories.mdx @@ -135,119 +135,6 @@ Parameters to style child widgets. Contains all text related layout style, properties and actions. It inherits all the properties of Flutter's [Text](https://api.flutter.dev/flutter/widgets/Text-class.html) widget. -#### GSBox - -Contains all container related layout style, properties and actions. It inherits all the properties of Flutter's [Container](https://api.flutter.dev/flutter/widgets/Container-class.html) widget. - - - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - direction - - - - 'column' | 'row' - - - 'row' - - - - Set the direction of Button group to vertical or horizontal - - - - - - - isDisabled - - - - bool - - - false - - - {`When true, this will disable all the buttons in a ButtonGroup.`} - - - - - - isAttached - - - - bool - - - false - - - {`When attached, all buttons will be attached to each other.`} - - - - - - reversed - - - - bool - - - false - - - {`To reverse the order of components.`} - - - - - - space - - - - string - - - md - - - - It sets the space between different buttons. - - - - -
- - - **Descendants Styling Parameters** Parameters to style child widgets. @@ -698,7 +585,3 @@ GSBox( ``` - -#### Custom Button - -The custom button widget leverages the functionality of a button widget while offering additional customization options to tailor its appearance and behavior according to specific design requirements. diff --git a/example/lib/example/storybook/src/getting-started/Installation/index.stories.mdx b/example/lib/example/storybook/src/getting-started/Installation/index.stories.mdx index f6685c1f..8fd086d7 100644 --- a/example/lib/example/storybook/src/getting-started/Installation/index.stories.mdx +++ b/example/lib/example/storybook/src/getting-started/Installation/index.stories.mdx @@ -8,12 +8,22 @@ import { Canvas, Meta, Story } from "@storybook/addon-docs"; ## Documentation -TODO +You can try out the gluestack flutter widgets on this storybook link: https://gluestack-ui-example.web.app/#/storybook + +Web app build with gluestack: https://kitchensink-23184.web.app/ + +We are referring gluestack-ui to create gluestack-ui-flutter. Flutter documentation is in progress. You can find the detailed documentation for each component, including a list of props and examples, in https://gluestack.io/ui/docs website. ## Features - **Customizable widgets:** Each widget in the library comes with a set of customizable props that allow you to tailor its appearance and behavior to your specific needs. +- **Declarative and Dynamic Styling:** By using JSON for style configurations, you're enabling a more declarative approach to UI design. This can be particularly powerful when styles need to be changed dynamically or loaded from external sources. + +- **Web-focus:** While Material and Cupertino excel on mobile, gluestack-ui could be tailored for web experiences, offering components and styles optimized for desktop interaction and layout. Think responsive design, mouse hover interactions, and web-specific UI patterns. + +- **Flexibility for Developers:** Providing inline style overrides gives developers the flexibility to quickly customize components on a case-by-case basis, without the need to alter the JSON configuration for minor tweaks. + - **Responsive design:** The widgets are built using modern web design principles and are fully responsive, so they work seamlessly across a wide range of devices and screen sizes. - **Well-documented:** The comes with comprehensive documentation for each widget, including a list of props and examples, to help you get up and running quickly. @@ -32,7 +42,17 @@ flutter pub add gluestack_ui ## Usage -Here is how `GSButton` widget can be easily integrated into your flutter app. Here's an example of how to use it: +Wrap the MaterialApp with GluestackProvider. + +```dart + +GluestackProvider( + child: MaterialApp.router( + .... +) +``` + +Here's an example of how to use GSButton widget into your flutter app: ```dart import 'package:gluestack_ui/gluestack_ui.dart'; @@ -60,6 +80,81 @@ GSButton( ) ``` +All Gluestack widgets support dark theme. Package detects the current theme from Flutter's inbuilt Theme.of(context).brightness. Hence, you can manage the theme mode from MaterialApp itself using the state management of your choice. + +## Customize tokens via token config + +You can customize the default tokens to provide your own design values. + +```dart + +GluestackProvider( + gluestackTokenConfig: GluestackTokenConfig( + gsColorsToken: const GSColorsToken( + primary600: Colors.pink, + primary700: Colors.pink, + ), + gsFontSizeToken: const GSFontSizeToken( + $sm: 12, + $md: 14, + ), + // More token configurations.... + ), + child: MaterialApp.router( + .... + ), +) + +``` + +## Providing custom Widget Config + +We have build the widgets from Figma config file. In case you want to customise the default values provided by the package for individual widgets, you can specify your own configuration for the widgets. + +> **NOTE:** Format of the configuration must be same as the own used by Gluestack internally. For example, for button please refer to the default config file for GSButton. + +Below example provides custom configuration for GSButton widget. + +```dart + +// Example of button configuration. + +const Map customButtonConfig = { + ... + '_dark': { + 'bg': '\$primary400', + 'borderColor': '\$primary700', + ':hover': { + 'bg': '\$error300', + 'borderColor': '\$primary400', + } + } + ... +}; + + +GluestackProvider( + gluestackCustomConfig: GluestackCustomConfig( + button: customButtonConfig, + buttonText: customButtonTextConfig, + ... + ), + gluestackTokenConfig: GluestackTokenConfig(...), + child: MaterialApp.router( + ... + ), +) + +``` + +## Future Scope + +- **Omitting Material Dependency:** Developers can tailor the UI components to fit the exact needs and aesthetics of their applications without being restricted to Material Design standards. From performance improvement respective, by building a system independent of Material Design, you might optimize performance, especially for applications that require lightweight and fast-loading interfaces. + +- **Enhanced Widget Configuration:** The widgets will be designed in a modular fashion, allowing users to plug in different components or features as needed. This modular approach enables more complex and varied widget compositions.With more control over the widget design, developers can create applications that offer a better user experience, tailored to their target audience. + +- **Configurable Token System:** Design the token system to be scalable and customizable. Users should be able to add new tokens or modify existing ones to suit their project needs. + ## Contributing We welcome contributions from the community. If you'd like to contribute to `gluestack-ui-flutter`, please read our [contributing guide](./CONTRIBUTING.md) instructions on how to submit a pull request. diff --git a/example/lib/routes/router.dart b/example/lib/routes/router.dart index 24d40311..be73c31f 100644 --- a/example/lib/routes/router.dart +++ b/example/lib/routes/router.dart @@ -2,6 +2,8 @@ import 'package:flutter/material.dart'; import 'package:gluestack_ui_example/example/public.dart'; import 'package:gluestack_ui_example/home.dart'; import 'package:gluestack_ui_example/widgets/storybook.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/avatar_group_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/avatar_with_image_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/avatar_with_label_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/badge_with_avatar_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/button_group_preview.dart'; @@ -11,6 +13,9 @@ import 'package:gluestack_ui_example/widgets/storybook_widgets/checkbox_group_pr import 'package:gluestack_ui_example/widgets/storybook_widgets/checkbox_with_help_text_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/controlled_checkbox_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/divider_variants_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/fab_placement_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/fab_with_icon_and_text_preview.dart'; +import 'package:gluestack_ui_example/widgets/storybook_widgets/fab_with_icon_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/hstack_reversed_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/icon_button_preview.dart'; import 'package:gluestack_ui_example/widgets/storybook_widgets/input_with_formcontrol_preview.dart'; @@ -70,6 +75,15 @@ final GoRouter router = GoRouter( path: "avatar-with-label-preview", builder: (context, state) => const AvatarWithLabelPreview(), ), + GoRoute( + path: "avatar-with-image-preview", + builder: (context, state) => const AvatarWithImagePreview(), + ), + GoRoute( + path: "avatar-group-preview", + builder: (context, state) => const AvatarGroupPreview(), + ), + GoRoute( path: "example-badge", builder: (context, state) => const BadgeExample(), @@ -157,6 +171,19 @@ final GoRouter router = GoRouter( path: "example-fab", builder: (context, state) => const FabExample(), ), + GoRoute( + path: "fab-with-icon-preview", + builder: (context, state) => const FabWithIconPreview(), + ), + GoRoute( + path: "fab-with-icon-and-text-preview", + builder: (context, state) => const FabWithIconAndTextPreview(), + ), + GoRoute( + path: "fab-placement-preview", + builder: (context, state) => const FabPlacementPreview(), + ), + GoRoute( path: "example-flex", builder: (context, state) => const FlexExample(), diff --git a/example/lib/widgets/storybook_widgets/avatar_group_preview.dart b/example/lib/widgets/storybook_widgets/avatar_group_preview.dart new file mode 100644 index 00000000..7d6ee8ef --- /dev/null +++ b/example/lib/widgets/storybook_widgets/avatar_group_preview.dart @@ -0,0 +1,66 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class AvatarGroupPreview extends StatelessWidget { + const AvatarGroupPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Avatar', + stories: [ + Story( + name: 'Avatar', + builder: (context) => GSBox( + style: GSStyle( + width: 250, + height: 150, + ), + child: GSAvatarGroup(children: [ + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + padding: const EdgeInsets.symmetric(horizontal: 20)), + fallBackText: const GSAvatarFallBackText('RA'), + ), + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('BA'), + ), + GSAvatar( + size: GSSizes.$sm, + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: const GSAvatarFallBackText('GA'), + ), + ]), + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/avatar_with_image_preview.dart b/example/lib/widgets/storybook_widgets/avatar_with_image_preview.dart new file mode 100644 index 00000000..adf2ab7c --- /dev/null +++ b/example/lib/widgets/storybook_widgets/avatar_with_image_preview.dart @@ -0,0 +1,87 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class AvatarWithImagePreview extends StatelessWidget { + const AvatarWithImagePreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Avatar', + stories: [ + Story( + name: 'Avatar', + builder: (context) => GSBox( + style: GSStyle( + width: 250, + height: 150, + ), + child: GSVStack( + children: [ + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: + const GSAvatarFallBackText('Ronald Richards'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Nursing Assistant'), + GSText(text: 'Ronald Richards'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: + const GSAvatarFallBackText('Arlene McCoy'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Arlene McCoy'), + GSText(text: 'Marketing Coordinator'), + ], + ) + ], + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/fab_placement_preview.dart b/example/lib/widgets/storybook_widgets/fab_placement_preview.dart new file mode 100644 index 00000000..fe68a246 --- /dev/null +++ b/example/lib/widgets/storybook_widgets/fab_placement_preview.dart @@ -0,0 +1,121 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class FabPlacementPreview extends StatelessWidget { + const FabPlacementPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Fab', + stories: [ + Story( + name: 'Fab', + builder: (context) => GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 300, + width: 450, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20)), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + )), + child: const GSCheckBoxIcon(), + ), + value: "Design", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Design"), + GSText( + text: + 'Subscribe to updates from the Design Feed') + ], + ), + ), + const SizedBox( + height: 20, + ), + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + )), + child: const GSCheckBoxIcon(), + ), + value: "Marketing", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Marketing"), + GSText( + text: + 'Subscribe to updates from the Marketing Feed') + ], + ), + ), + const SizedBox( + height: 20, + ), + GSCheckBox( + icon: GSCheckBoxIndicator( + style: GSStyle( + margin: EdgeInsets.only( + right: $GSSpace.$4, + bottom: $GSSpace.$4, + )), + child: const GSCheckBoxIcon(), + ), + value: "Engineering", + onChanged: (value) {}, + label: const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSCheckBoxLabel(text: "Engineering"), + GSText( + text: + 'Subscribe to updates from the Engineering Feed') + ], + ), + ), + ], + ), + ), + GSFab( + placement: GSPlacements.bottomCenter, + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.add, + style: GSStyle(color: $GSColors.white), + ), + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/fab_with_icon_and_text_preview.dart b/example/lib/widgets/storybook_widgets/fab_with_icon_and_text_preview.dart new file mode 100644 index 00000000..6eedc728 --- /dev/null +++ b/example/lib/widgets/storybook_widgets/fab_with_icon_and_text_preview.dart @@ -0,0 +1,205 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class FabWithIconAndTextPreview extends StatelessWidget { + const FabWithIconAndTextPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Fab', + stories: [ + Story( + name: 'Fab', + builder: (context) => GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 360, + width: 400, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20)), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox( + height: 50, + ), + const GSHeading(text: 'Benefits of Oranges'), + GSText( + text: + 'Oranges are a great source of vitamin C, which is essential for a healthy immune system.', + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + GSHStack( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "Wade Warrem", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + GSDivider( + orientation: GSOrientations.vertical, + style: GSStyle( + height: 20, + color: $GSColors.warmGray400, + ), + ), + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "6th Oct, 2019", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + GSDivider( + orientation: GSOrientations.vertical, + style: GSStyle( + height: 20, + color: $GSColors.warmGray400, + ), + ), + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "5 mins read", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + ], + ), + const SizedBox( + height: 20, + ), + SizedBox( + child: GSDivider( + orientation: GSOrientations.horizontal, + style: GSStyle( + height: 1, + color: $GSColors.warmGray400, + ), + ), + ), + const SizedBox( + height: 20, + ), + const GSHeading( + text: 'How AI can benefit your business'), + GSText( + text: + 'AI can automate tasks and processes, allowing for increasing efficiency and productivity.', + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + GSHStack( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "Wade Warrem", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + GSDivider( + orientation: GSOrientations.vertical, + style: GSStyle( + height: 20, + color: $GSColors.warmGray400, + ), + ), + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "6th Oct, 2019", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + GSDivider( + orientation: GSOrientations.vertical, + style: GSStyle( + height: 20, + color: $GSColors.warmGray400, + ), + ), + GSBox( + style: GSStyle( + padding: const EdgeInsets.all(8.0), + ), + child: GSText( + text: "5 mins read", + style: GSStyle( + textStyle: TextStyle( + fontSize: 14, + color: $GSColors.warmGray400, + )), + ), + ), + ], + ), + ], + ), + ), + GSFab( + placement: GSPlacements.topRight, + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.search, + style: GSStyle(color: $GSColors.white), + ), + label: const GSFabLabel(text: 'Search'), + ), + ], + ), + ), + ), + ], + ), + ); + } +} diff --git a/example/lib/widgets/storybook_widgets/fab_with_icon_preview.dart b/example/lib/widgets/storybook_widgets/fab_with_icon_preview.dart new file mode 100644 index 00000000..5842c7af --- /dev/null +++ b/example/lib/widgets/storybook_widgets/fab_with_icon_preview.dart @@ -0,0 +1,132 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +class FabWithIconPreview extends StatelessWidget { + const FabWithIconPreview({super.key}); + + @override + Widget build(BuildContext context) { + return materialWrapper( + context, + Storybook( + initialStory: 'Fab', + stories: [ + Story( + name: 'Fab', + builder: (context) => GSCenter( + child: Stack( + children: [ + GSBox( + style: GSStyle( + height: 360, + width: 320, + borderRadius: $GSRadii.$md, + bg: $GSColors.trueGray800, + padding: const EdgeInsets.all(20)), + child: GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: + const GSAvatarFallBackText('Kevin James'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Kevin James'), + GSText(text: 'Tech Lead'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1180&q=80', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: + const GSAvatarFallBackText('Jacob Jones'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Jacob Jones'), + GSText(text: 'Manager'), + ], + ) + ], + ), + const SizedBox( + height: 20, + ), + GSHStack( + children: [ + GSAvatar( + avatarImage: const GSImage( + path: + 'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80', + imageType: GSImageType.network), + style: GSStyle( + bg: Colors.orange, + textStyle: const TextStyle(color: Colors.white), + ), + fallBackText: + const GSAvatarFallBackText('Albert Flores'), + ), + const SizedBox( + width: 10, + ), + const GSVStack( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GSHeading(text: 'Albert Flores'), + GSText(text: 'HR'), + ], + ) + ], + ), + ], + ), + ), + GSFab( + onPressed: () {}, + icon: GSFabIcon( + icon: Icons.edit_square, + style: GSStyle(color: $GSColors.white), + ), + ), + ], + ), + ), + ), + ], + ), + ); + } +}