Merge pull request #1614 from gluestack/feat/storybook-newComp

fix: added useTheme and useStyled in doc and storybook

example/storybook/.storybook/preview.js

@@ -104,6 +104,8 @@ export const parameters = {
           'useBreakpointValue',
           'useMedia',
           'useColorMode',
+          'useStyled',
+          'useTheme',
         ],
         'Production Optimizations',
         ['With a Babel Plugin'],

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',

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';
+
+<Meta title="styled/Hooks/useStyled" />
+
+# 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 (
+    <View
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: styled.config.tokens.colors.primary500,
+      }}
+    />
+  );
+};
+```

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';
+
+<Meta title="styled/Hooks/useTheme" />
+
+# 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 (
+    <View>{/* Do something with the theme */}</View>
+  );
+};
+```

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';
+
+<Meta title="ui/Hooks/useStyled" />
+
+# 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 (
+    <View
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: styled.config.tokens.colors.primary500,
+      }}
+    />
+  );
+};
+```

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<typeof useStyled> = {
+  title: 'stories/hooks/useStyled',
+  component: useStyled,
+};
+
+export default useStyledMeta;
+export { useStyled };

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 (
+    <View
+      style={{
+        width: 100,
+        height: 100,
+        backgroundColor: styled.config.tokens.colors.primary500,
+      }}
+    />
+  );
+}

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';
+
+<Meta title="ui/Hooks/useTheme" />
+
+# 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 (
+    <View>{/* Do something with the theme */}</View>
+  );
+};
+```