chore: overriding theme stories

.storybook/decorators.tsx

@@ -4,18 +4,20 @@ import {ThemeProvider} from '../src/providers/ThemeProvider';
 import {dark, light} from '../src/utils/colors';
 import styled from '@emotion/native';
 import {CpkProvider} from '../src/providers';
+import {ThemeParam} from '../src/utils/theme';
 
-export const withThemeProvider = (Story: React.FC, context: any) => {
+export const withThemeProvider = (
+  Story: React.FC,
+  context: any,
+  customTheme?: ThemeParam,
+) => {
   const isDarkMode = context.globals.theme === 'dark';
 
   return (
     <CpkProvider
       themeConfig={{
         initialThemeType: isDarkMode ? 'dark' : 'light',
-        customTheme: {
-          light,
-          dark,
-        },
+        customTheme,
       }}
     >
       <Container>

src/components/uis/Button/Button.stories.tsx

@@ -5,6 +5,7 @@ import {withThemeProvider} from '../../../../.storybook/decorators';
 
 import type {ButtonColorType, ButtonSizeType, ButtonType} from './Button';
 import {Button} from './Button';
+import {ThemeParam} from '../../../utils/theme';
 
 const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text'];
 const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small'];
@@ -43,7 +44,15 @@ const meta = {
       options: buttonSizes,
     },
   },
-  decorators: [withThemeProvider],
+  decorators: [
+    (Story, context) =>
+      withThemeProvider(
+        Story,
+        context,
+        // @ts-ignore
+        context.args.theme,
+      ),
+  ],
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -79,3 +88,54 @@ export const Danger: Story = {
     onPress: action('onPress'),
   },
 };
+
+const disableAllExcept = (allowedField: string) => {
+  const argTypes = {
+    text: {table: {disable: true}},
+    type: {table: {disable: true}},
+    color: {table: {disable: true}},
+    size: {table: {disable: true}},
+    onPress: {table: {disable: true}},
+    testID: {table: {disable: true}},
+    disabled: {table: {disable: true}},
+    loadingElement: {table: {disable: true}},
+    borderRadius: {table: {disable: true}},
+    startElement: {table: {disable: true}},
+    endElement: {table: {disable: true}},
+    activeOpacity: {table: {disable: true}},
+    touchableHighlightProps: {table: {disable: true}},
+    hitSlop: {table: {disable: true}},
+    theme: {control: 'object'},
+  };
+
+  if (argTypes[allowedField]) {
+    argTypes[allowedField] = {table: {disable: false}};
+  }
+
+  return argTypes;
+};
+
+export const CustomColor: Story = {
+  args: {
+    // @ts-ignore
+    theme: {
+      light: {
+        button: {
+          primary: {
+            bg: 'red',
+            text: 'white',
+          },
+        },
+      },
+      dark: {
+        button: {
+          primary: {
+            bg: 'pink',
+            text: 'red',
+          },
+        },
+      },
+    } as ThemeParam,
+  },
+  argTypes: disableAllExcept('theme'),
+};

src/components/uis/Button/Button.tsx

@@ -236,9 +236,11 @@ export function Button({
   const LoadingView = loadingElement ?? (
     <LoadingIndicator
       color={
-        loadingColor || type === 'solid'
-          ? theme.text.contrast
-          : theme.text.basic
+        loadingColor
+          ? loadingColor
+          : type === 'solid'
+            ? theme.text.contrast
+            : theme.text.basic
       }
       size="small"
     />
@@ -285,13 +287,11 @@ export function Button({
     ],
   );
 
-  function resolveStyle<T>(
-    style: StyleProp<T>
-  ): T | undefined {
+  function resolveStyle<T>(style: StyleProp<T>): T | undefined {
     if (Array.isArray(style)) {
       return style.find((s): s is T => !!s);
     }
-    return style as T || undefined;
+    return (style as T) || undefined;
   }
 
   const viewStyle = resolveStyle<ViewStyle>(compositeStyles.container);

src/components/uis/Typography/Typography.stories.tsx

@@ -0,0 +1,58 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Typography} from './Typography';
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {ScrollView, View} from 'react-native';
+import {ThemeParam} from '../../../utils/theme';
+
+const meta = {
+  title: 'Typography',
+  component: Typography.Title,
+  decorators: [
+    (Story, context) =>
+      withThemeProvider(
+        Story,
+        context,
+        (context.args.theme as any) || undefined,
+      ),
+  ],
+} satisfies Meta<typeof Typography.Title>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AllTypography: Story = {
+  render: (args) => (
+    <ScrollView contentContainerStyle={{padding: 16}}>
+      {Object.entries(Typography).map(([key, Component]) => (
+        <View key={key} style={{marginBottom: 16}}>
+          <Component {...args}>
+            {key} {args.children}
+          </Component>
+        </View>
+      ))}
+    </ScrollView>
+  ),
+  args: {
+    children: 'Hello world',
+  },
+};
+
+export const CustomTitle: Story = {
+  args: {
+    children: 'Custom Color',
+    // @ts-ignore
+    theme: {
+      light: {
+        text: {
+          basic: 'blue',
+        },
+      },
+      dark: {
+        text: {
+          basic: 'skyblue',
+        },
+      },
+    } as ThemeParam,
+  },
+};