diff --git a/example/lib/example/storybook/.storybook/preview.js b/example/lib/example/storybook/.storybook/preview.js index e5b478e3..e3a302c7 100644 --- a/example/lib/example/storybook/.storybook/preview.js +++ b/example/lib/example/storybook/.storybook/preview.js @@ -22,6 +22,8 @@ export const parameters = { ["Introduction"], "Getting Started", ["Installation"], + "Styling", + ["Overview","Utility", "Responsiveness", "Platform Specific"], "Components", [ "Typography", diff --git a/example/lib/example/storybook/public/images/styling-platform-specific-ex1.png b/example/lib/example/storybook/public/images/styling-platform-specific-ex1.png new file mode 100644 index 00000000..e493261f Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-platform-specific-ex1.png differ diff --git a/example/lib/example/storybook/public/images/styling-responsive-flex-ex1.png b/example/lib/example/storybook/public/images/styling-responsive-flex-ex1.png new file mode 100644 index 00000000..db2fff3a Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-responsive-flex-ex1.png differ diff --git a/example/lib/example/storybook/public/images/styling-responsive-flex-ex2.png b/example/lib/example/storybook/public/images/styling-responsive-flex-ex2.png new file mode 100644 index 00000000..c3ef43ca Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-responsive-flex-ex2.png differ diff --git a/example/lib/example/storybook/public/images/styling-utility-button-ex.png b/example/lib/example/storybook/public/images/styling-utility-button-ex.png new file mode 100644 index 00000000..76dd2e35 Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-utility-button-ex.png differ diff --git a/example/lib/example/storybook/public/images/styling-utility-complex-ex1.png b/example/lib/example/storybook/public/images/styling-utility-complex-ex1.png new file mode 100644 index 00000000..1651fa39 Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-utility-complex-ex1.png differ diff --git a/example/lib/example/storybook/public/images/styling-utility-complex-ex2.png b/example/lib/example/storybook/public/images/styling-utility-complex-ex2.png new file mode 100644 index 00000000..952f5ddd Binary files /dev/null and b/example/lib/example/storybook/public/images/styling-utility-complex-ex2.png differ diff --git a/example/lib/example/storybook/src/styling/Overview/index.stories.mdx b/example/lib/example/storybook/src/styling/Overview/index.stories.mdx new file mode 100644 index 00000000..3c84e66c --- /dev/null +++ b/example/lib/example/storybook/src/styling/Overview/index.stories.mdx @@ -0,0 +1,51 @@ +--- +title: Overview | Styling | gluestack-ui +description: Overview of styling prowess in gluestack ui flutter. +--- + +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Styling Overview + +All the components of [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets) are unstyled by default and take values from [config](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/theme/config), whose default values can be configured by passing down a custom config object via the **Gluestack Provider** after wrapping the root **MaterialApp**. + +``` +GluestackProvider( + // This is how we can provide custom configuration to Gluestack Theme. + gluestackCustomConfig: GluestackCustomConfig( + button: customButton, + buttonText: customButtonText, + ), + child: MaterialApp(), +) +``` + +The imported custom theme object is basically a Map object that contains your custom json config. You can refer [here](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/theme/config) to find out the structure of the default config files that we use. +Following is an example of the **customButton** config that we have used above. +``` +Map customButton = { + 'bg': '\$error300', + '_dark': { + 'bg': '\$primary800', + 'borderColor': '\$primary700', + ':hover': { + 'bg': '\$error300', + 'borderColor': '\$primary400', + } + } +}; +``` +## Custom Tokens + +Similarly, all the token available in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/token) can also be configured by passing down a custom token config object via the **Gluestack Provider** after wrapping the root **MaterialApp**. +``` +GluestackProvider( + gluestackTokenConfig: GluestackTokenConfig( + gsColorsToken: GSColorsToken( + textLight0: Color(0xfffffff), + ), + ), +) +``` diff --git a/example/lib/example/storybook/src/styling/Platform-specific/index.stories.mdx b/example/lib/example/storybook/src/styling/Platform-specific/index.stories.mdx new file mode 100644 index 00000000..9ac01164 --- /dev/null +++ b/example/lib/example/storybook/src/styling/Platform-specific/index.stories.mdx @@ -0,0 +1,34 @@ +--- +title: Platform Specific | Styling | gluestack-ui +description: Overview of platform specific styling prowess of gluestack ui +--- + +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Platform Specific + +We can provide platform specific styles in the **GSStyle** prop of the component. There are params like android, ios, web which accepts **GSStyle** object as param, which defined the platform specific styling that will be applied to the component. + +Let's say that we wish for our button component to appear red when the app is running on android, we acheive that via the following implementation. + +![android red button example - platform specific](images/styling-platform-specific-ex1.png) +________________________________________________ +``` + GSButton( + style: GSStyle( + bg: $GSColors.green400, + web: GSStyle(bg: $GSColors.yellow400), + android: GSStyle(bg: $GSColors.red800), + ios: GSStyle(bg: $GSColors.blue400), + ), + onPressed: () {}, + child: const Row( + children: [ + GSButtonText(text: "Add"), + GSButtonIcon(icon: Icons.add) + ], + ), + ), +``` diff --git a/example/lib/example/storybook/src/styling/Responsiveness/index.stories.mdx b/example/lib/example/storybook/src/styling/Responsiveness/index.stories.mdx new file mode 100644 index 00000000..0711c5e1 --- /dev/null +++ b/example/lib/example/storybook/src/styling/Responsiveness/index.stories.mdx @@ -0,0 +1,79 @@ +--- +title: Responsiveness | Styling | gluestack-ui +description: Overview of UIs can be made responsive with help of Gluestack +--- + +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Responsiveness + +The components present in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets) are responsive and their styling can be changed according to device's screen. The screen breakpoints used in [@gluestack-ui-flutter](https://github.com/gluestack/gluestack-ui-flutter/tree/development) can be found [here](https://github.com/gluestack/gluestack-ui-flutter/blob/development/lib/src/token/screen_breakpoint.dart), or, you can also refer the following: +``` +sm: (min-width: 480px) +md: (min-width: 768px) +lg: (min-width: 992px) +xl: (min-width: 1280px) +``` +We can apply different styling based on different breakpoints, if we wish for your component to appear black on small screen when sm breakpoint is reached, we can do that too like so. +![web yellow button example](images/styling-utility-complex-ex2.png) +________________________________________________ +``` + GSButton( + style: GSStyle( + bg: $GSColors.green400, + sm: GSStyle(bg: $GSColors.black), + ), + onPressed: () {}, + child: const Row( + children: [ + GSButtonText(text: "Add"), + GSButtonIcon(icon: Icons.add) + ], + ), + ), +``` + +# Responsive Layouts +In real world applications, often time there is a need to control entire layouts or parts of layouts to be responsive, that's why we have created [multiple widgets](https://github.com/gluestack/gluestack-ui-flutter/tree/development/lib/src/widgets/gs_responsives) that makes this process easier. +Let's take an example of GSFlex which can arrange widget content inside to be displayed horizontally or vertically depending on screen size. + +![GSFlex on small display size](images/styling-responsive-flex-ex1.png) +__________________________________________________________________________ +![GSFlex on large display size](images/styling-responsive-flex-ex2.png) +__________________________________________________________________________ +``` + GSFlex( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + style: GSStyle( + direction: Axis.vertical, + md: GSStyle(direction: Axis.horizontal), + ), + children: [ + GSBox( + style: GSStyle( + height: 150, + width: 150, + bg: Colors.red, + ), + ), + GSBox( + style: GSStyle( + height: 150, + width: 150, + bg: Colors.green, + ), + ), + GSBox( + style: GSStyle( + height: 150, + width: 150, + bg: Colors.blue, + ), + ), + ], + ), +``` + diff --git a/example/lib/example/storybook/src/styling/Utility/index.stories.mdx b/example/lib/example/storybook/src/styling/Utility/index.stories.mdx new file mode 100644 index 00000000..81b96250 --- /dev/null +++ b/example/lib/example/storybook/src/styling/Utility/index.stories.mdx @@ -0,0 +1,77 @@ +--- +title: Utility | Styling | gluestack-ui +description: Overview of how styling is meant to be utilized. +--- + +import { Canvas, Meta, Story } from "@storybook/addon-docs"; + + + +# Basic Styling + +You can apply styling props directly to the components via style prop, which takes a **GSStyle** object. There are various props available in GSStyle object that control almost all aspect of styling that Gluestack ui Flutter provides! +Let's say we want a green colored button and we have defined a custom color token for green400 which we would like to use. The implementation for that would look like the following. + +![green button example](images/styling-utility-button-ex.png) +________________________________________________ +``` + GSButton( + style: GSStyle(bg: $GSColors.green400), + onPressed: () {}, + child: const Row( + children: [ + GSButtonText(text: "Add"), + GSButtonIcon(icon: Icons.add) + ], + ), + ), +``` +There are lot of other props as well to chose from. + + +# Complex Styling + +You can also handle more intricate styling, such as styles for different screen sizes, platform, system theme - light and dark and descendants. Certain style props take GSStyle object itself as a param, this unlocks whole new world of complex nested styling that was impossible in Flutter before. +Let's say you wish for your button component to appear yellow when the app is running on web, you can do that as follows +![web yellow button example](images/styling-utility-complex-ex1.png) +________________________________________________ +``` + GSButton( + style: GSStyle( + bg: $GSColors.green400, + web: GSStyle(bg: $GSColors.yellow400), + android: GSStyle(bg: $GSColors.red400), + //....other platforms + ), + onPressed: () {}, + child: const Row( + children: [ + GSButtonText(text: "Add"), + GSButtonIcon(icon: Icons.add) + ], + ), + ), +``` + +Similarly, if we wish for your component to appear black on small screen when sm breakpoint is reached in the code above, we can do that too like so. +![web yellow button example](images/styling-utility-complex-ex2.png) +________________________________________________ +``` + GSButton( + style: GSStyle( + bg: $GSColors.green400, + web: GSStyle(bg: $GSColors.yellow400), + sm: GSStyle(bg: $GSColors.black), + ), + onPressed: () {}, + child: const Row( + children: [ + GSButtonText(text: "Add"), + GSButtonIcon(icon: Icons.add) + ], + ), + ), +``` + +**Note:** Incase of duplicate definition of props, example - if dark mode style is defined inside the parent GSStyle but is also declared inside a screen breakpoint, md, the dark prop inside parent GSStyle will be applied as it would have more order of precedence that the rest of dark prop that is applied. + diff --git a/example/lib/widgets/storybook_widgets/avatar_group_preview.dart b/example/lib/widgets/storybook_widgets/avatar_group_preview.dart index 7d6ee8ef..4c006e42 100644 --- a/example/lib/widgets/storybook_widgets/avatar_group_preview.dart +++ b/example/lib/widgets/storybook_widgets/avatar_group_preview.dart @@ -21,7 +21,7 @@ class AvatarGroupPreview extends StatelessWidget { ), child: GSAvatarGroup(children: [ GSAvatar( - size: GSSizes.$sm, + size: GSAvatarSizes.$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', @@ -33,7 +33,7 @@ class AvatarGroupPreview extends StatelessWidget { fallBackText: const GSAvatarFallBackText('RA'), ), GSAvatar( - size: GSSizes.$sm, + size: GSAvatarSizes.$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', @@ -45,7 +45,7 @@ class AvatarGroupPreview extends StatelessWidget { fallBackText: const GSAvatarFallBackText('BA'), ), GSAvatar( - size: GSSizes.$sm, + size: GSAvatarSizes.$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', diff --git a/example/lib/widgets/storybook_widgets/fab_placement_preview.dart b/example/lib/widgets/storybook_widgets/fab_placement_preview.dart index fe68a246..ea10abe7 100644 --- a/example/lib/widgets/storybook_widgets/fab_placement_preview.dart +++ b/example/lib/widgets/storybook_widgets/fab_placement_preview.dart @@ -103,7 +103,7 @@ class FabPlacementPreview extends StatelessWidget { ), ), GSFab( - placement: GSPlacements.bottomCenter, + placement: GSFABPlacements.bottomCenter, onPressed: () {}, icon: GSFabIcon( icon: Icons.add, 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 index 6eedc728..41ddd226 100644 --- 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 @@ -186,7 +186,7 @@ class FabWithIconAndTextPreview extends StatelessWidget { ), ), GSFab( - placement: GSPlacements.topRight, + placement: GSFABPlacements.topRight, onPressed: () {}, icon: GSFabIcon( icon: Icons.search, diff --git a/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart b/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart index f46e579b..8dae63a7 100644 --- a/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart +++ b/example/lib/widgets/storybook_widgets/vstack_reversed_preview.dart @@ -15,7 +15,7 @@ class VStackReversedPreview extends StatelessWidget { Story( name: 'VStack', builder: (context) => GSVStack( - space: GSSpaces.$md, + space: GSVstackSpaces.$md, mainAxisAlignment: MainAxisAlignment.center, isReversed: true, children: [