From 13e5e20fb376256ab9fe4205d6bd097d9cc1a8e3 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 11 Jan 2024 16:51:19 +0530 Subject: [PATCH] fix: added useTheme and useStyled in doc and storybook --- example/storybook/.storybook/preview.js | 2 + example/storybook/.storybook/preview.style.js | 9 +++- .../styled/hooks/useStyled/index.stories.mdx | 41 +++++++++++++++++++ .../styled/hooks/useTheme/index.stories.mdx | 35 ++++++++++++++++ .../src/ui/hooks/use-styled/index.stories.mdx | 41 +++++++++++++++++++ .../hooks/use-styled/use-styled.stories.tsx | 9 ++++ .../src/ui/hooks/use-styled/useStyled.tsx | 16 ++++++++ .../src/ui/hooks/use-theme/index.stories.mdx | 35 ++++++++++++++++ 8 files changed, 187 insertions(+), 1 deletion(-) create mode 100644 example/storybook/src/styled/hooks/useStyled/index.stories.mdx create mode 100644 example/storybook/src/styled/hooks/useTheme/index.stories.mdx create mode 100644 example/storybook/src/ui/hooks/use-styled/index.stories.mdx create mode 100644 example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx create mode 100644 example/storybook/src/ui/hooks/use-styled/useStyled.tsx create mode 100644 example/storybook/src/ui/hooks/use-theme/index.stories.mdx diff --git a/example/storybook/.storybook/preview.js b/example/storybook/.storybook/preview.js index 7bceb11cf6..3bdc71b1aa 100644 --- a/example/storybook/.storybook/preview.js +++ b/example/storybook/.storybook/preview.js @@ -101,6 +101,8 @@ export const parameters = { 'useBreakpointValue', 'useMedia', 'useColorMode', + 'useStyled', + 'useTheme', ], 'Production Optimizations', ['With a Babel Plugin'], diff --git a/example/storybook/.storybook/preview.style.js b/example/storybook/.storybook/preview.style.js index 498a07bc83..e22b4c14d1 100644 --- a/example/storybook/.storybook/preview.style.js +++ b/example/storybook/.storybook/preview.style.js @@ -53,7 +53,14 @@ export const parameters = { 'CSS Variables Plugin', ], 'hooks', - ['useBreakPointValue', 'useMedia', 'useColorMode', 'useToken'], + [ + 'useBreakPointValue', + 'useMedia', + 'useColorMode', + 'useToken', + 'useStyled', + 'useTheme', + ], 'configuration', [ 'Theme Tokens', diff --git a/example/storybook/src/styled/hooks/useStyled/index.stories.mdx b/example/storybook/src/styled/hooks/useStyled/index.stories.mdx new file mode 100644 index 0000000000..bc8072eecd --- /dev/null +++ b/example/storybook/src/styled/hooks/useStyled/index.stories.mdx @@ -0,0 +1,41 @@ +--- +title: useStyled | gluestack-ui +description: useStyled is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useStyled + +**useStyled** is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components. + +### Import + +To use the `useStyled` in your project, import `useStyled` from `@gluestack-style/react`. as Demonstrated below. + +```jsx +import { useStyled } from '@gluestack-style/react'; +``` + +Let's use our `useStyled` value to give background color to `View` from `react-native`. + +```jsx +import { View } from 'react-native'; +import { useStyled } from '@gluestack-style/react'; + +const Example = () => { + const styled = useStyled(); + return ( + + ); +}; +``` \ No newline at end of file diff --git a/example/storybook/src/styled/hooks/useTheme/index.stories.mdx b/example/storybook/src/styled/hooks/useTheme/index.stories.mdx new file mode 100644 index 0000000000..5a56c908f1 --- /dev/null +++ b/example/storybook/src/styled/hooks/useTheme/index.stories.mdx @@ -0,0 +1,35 @@ +--- +title: useTheme | gluestack-ui +description: useTheme is a custom hook which returns an array of active themes +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useTheme + +**useTheme** is a custom hook which returns an array of active themes. + +### Import + +To use the `useTheme` in your project, import `useTheme` from `@gluestack-style/react`. as Demonstrated below. + +```jsx +import { useTheme } from '@gluestack-style/react'; +``` + +Demonstration of `useTheme` + +```jsx +import { View } from 'react-native'; +import { useTheme } from '@gluestack-style/react'; + +const Example = () => { + const theme = useTheme() + return ( + {/* Do something with the theme */} + ); +}; +``` diff --git a/example/storybook/src/ui/hooks/use-styled/index.stories.mdx b/example/storybook/src/ui/hooks/use-styled/index.stories.mdx new file mode 100644 index 0000000000..ab8f336323 --- /dev/null +++ b/example/storybook/src/ui/hooks/use-styled/index.stories.mdx @@ -0,0 +1,41 @@ +--- +title: useStyled | gluestack-ui +description: useStyled is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useStyled + +**useStyled** is a custom hook that returns a configuration object encompassing aliases, components, global styles, plugins, and tokens. This configuration facilitates easy access to essential styling elements and global functionalities for components. + +### Import + +To use the `useStyled` in your project, import `useStyled` from `@gluestack-ui/themed` as demonstrated below. + +```jsx +import { useStyled } from '@gluestack-ui/themed'; +``` + +Let's use our `useStyled` value to give background color to `View` from `react-native`. + +```jsx +import { View } from 'react-native'; +import { useStyled } from '@gluestack-ui/themed'; + +const Example = () => { + const styled = useStyled(); + return ( + + ); +}; +``` \ No newline at end of file diff --git a/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx b/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx new file mode 100644 index 0000000000..265f85db0b --- /dev/null +++ b/example/storybook/src/ui/hooks/use-styled/use-styled.stories.tsx @@ -0,0 +1,9 @@ +import type { ComponentMeta } from '@storybook/react-native'; +import useStyled from './useStyled'; +const useStyledMeta: ComponentMeta = { + title: 'stories/hooks/useStyled', + component: useStyled, +}; + +export default useStyledMeta; +export { useStyled }; diff --git a/example/storybook/src/ui/hooks/use-styled/useStyled.tsx b/example/storybook/src/ui/hooks/use-styled/useStyled.tsx new file mode 100644 index 0000000000..33af20deff --- /dev/null +++ b/example/storybook/src/ui/hooks/use-styled/useStyled.tsx @@ -0,0 +1,16 @@ +import { View } from 'react-native'; +import { useStyled } from '@gluestack-ui/themed'; +import React from 'react'; + +export default function Example({}: any) { + const styled = useStyled(); + return ( + + ); +} diff --git a/example/storybook/src/ui/hooks/use-theme/index.stories.mdx b/example/storybook/src/ui/hooks/use-theme/index.stories.mdx new file mode 100644 index 0000000000..64cba6fc3e --- /dev/null +++ b/example/storybook/src/ui/hooks/use-theme/index.stories.mdx @@ -0,0 +1,35 @@ +--- +title: useTheme | gluestack-ui +description: useTheme is a custom hook which returns an array of active themes +showHeader: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# useTheme + +**useTheme** is a custom hook which returns an array of active themes. + +### Import + +To use the `useTheme` in your project, import `useTheme` from `@gluestack-ui/themed` as demonstrated below. + +```jsx +import { useTheme } from '@gluestack-ui/themed'; +``` + +Demonstration of `useTheme` + +```jsx +import { View } from 'react-native'; +import { useTheme } from '@gluestack-ui/themed'; + +const Example = () => { + const theme = useTheme() + return ( + {/* Do something with the theme */} + ); +}; +```