refactor: extract some stories and simplified

hyochan · Feb 5, 2024 · c08bffd · c08bffd
1 parent ef24bf7
commit c08bffd
Show file tree

Hide file tree

Showing 38 changed files with 368 additions and 545 deletions.
diff --git a/main/uis/Checkbox/index.tsx b/main/uis/Checkbox/index.tsx
@@ -112,7 +112,8 @@ export function Checkbox({
             padding: 6px 0;
 
             flex-direction: row;
-            column-gap: 6px;
+            column-gap: 2px;
+            align-items: center;
           `,
           styles?.container,
         ]}

diff --git a/main/uis/LoadingIndicator/index.tsx b/main/uis/LoadingIndicator/index.tsx
@@ -13,7 +13,7 @@ type Styles = {
   image?: ImageStyle;
 };
 
-interface Props {
+type Props {
   style?: StyleProp<ViewStyle>;
   styles?: Styles;
   color?: string;

diff --git a/...is/AccordionStories/Accordion.stories.tsx → stories/uis/Accordion.stories.tsx b/...is/AccordionStories/Accordion.stories.tsx → stories/uis/Accordion.stories.tsx
@@ -2,19 +2,19 @@ import type {ComponentProps} from 'react';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {Accordion} from '../../../main';
-import {DoobooProvider} from '../../../main';
-
-import AccordionBasicStory from './AccordionBasicStory';
+import {Accordion, DoobooProvider} from '../../main';
+import {StoryWrapper} from '../Common';
 
 // @ts-ignore
 const meta = {
   title: 'Accordion',
-  component: AccordionBasicStory,
+  component: (props) => <Accordion {...props} />,
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
       </DoobooProvider>
     ),
   ],

diff --git a/...AccordionStories/AccordionCustomStory.tsx → stories/uis/AccordionCustom.stories.tsx b/...AccordionStories/AccordionCustomStory.tsx → stories/uis/AccordionCustom.stories.tsx
@@ -1,29 +1,27 @@
-// Caveat: Expo web needs React to be imported
-import React from 'react';
-import {View} from 'react-native';
-import styled, {css} from '@emotion/native';
+import {Text, View} from 'react-native';
+import {css} from '@emotion/native';
 import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
 
-import {useDooboo} from '../../../main';
-import {Accordion} from '../../../main/uis/Accordion';
-import {Icon} from '../../../main/uis/Icon';
-import {Typography} from '../../../main/uis/Typography';
-import {StoryWrapper} from '../../Common';
-
-const CustomStyledItem = styled.Text`
-  color: ${({theme}) => theme.text.basic};
-  padding-left: 8px;
-  font-family: Pretendard-Bold;
-`;
+import {
+  Accordion,
+  DoobooProvider,
+  Icon,
+  Typography,
+  useDooboo,
+} from '../../main';
+import {StoryWrapper} from '../Common';
 
 type AccordionTitle = {key: string; text: string};
 type AccordionItem = {text: string};
 
-export default function AccordionCustom(props): JSX.Element {
-  const {theme} = useDooboo();
+const meta = {
+  title: 'Accordion',
+  component: (props) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const {theme} = useDooboo();
 
-  return (
-    <StoryWrapper>
+    return (
       <Accordion<AccordionTitle, AccordionItem>
         onPressItem={action('onPressItem')}
         renderItem={({text}) => {
@@ -51,7 +49,15 @@ export default function AccordionCustom(props): JSX.Element {
                     margin-right: 4px;
                   `}
                 />
-                <CustomStyledItem>{text}</CustomStyledItem>
+                <Text
+                  style={css`
+                    color: ${theme.text.basic};
+                    padding-left: 8px;
+                    font-family: Pretendard-Bold;
+                  `}
+                >
+                  {text}
+                </Text>
               </View>
             );
           }
@@ -65,7 +71,15 @@ export default function AccordionCustom(props): JSX.Element {
                 align-items: center;
               `}
             >
-              <CustomStyledItem>{text}</CustomStyledItem>
+              <Text
+                style={css`
+                  color: ${theme.text.basic};
+                  padding-left: 8px;
+                  font-family: Pretendard-Bold;
+                `}
+              >
+                {text}
+              </Text>
             </View>
           );
         }}
@@ -107,6 +121,49 @@ export default function AccordionCustom(props): JSX.Element {
         toggleElementPosition="left"
         {...props}
       />
-    </StoryWrapper>
-  );
-}
+    );
+  },
+  args: {
+    animDuration: 200,
+    collapseOnStart: true,
+    data: [
+      {
+        title: {
+          key: 'HEADING_1',
+          text: 'accordion heading 1',
+        },
+        items: [{text: 'User'}, {text: 'Mail'}, {text: 'Text'}],
+      },
+      {
+        title: {
+          key: 'HEADING_2',
+          text: 'accordion heading 2',
+        },
+        items: [{text: 'Movie'}, {text: 'Image'}, {text: 'File'}],
+      },
+      {
+        title: {
+          key: 'HEADING_3',
+          text: 'accordion heading 3',
+        },
+        items: [{text: 'TicTok'}, {text: 'Youtube'}, {text: 'Puzz'}],
+      },
+    ],
+    shouldAnimate: true,
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<typeof Accordion<AccordionTitle, AccordionItem>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Custom: Story = {};
diff --git a/stories/uis/AccordionStories/AccordionBasicStory.tsx b/stories/uis/AccordionStories/AccordionBasicStory.tsx
diff --git a/stories/uis/AccordionStories/AccordionCustom.stories.tsx b/stories/uis/AccordionStories/AccordionCustom.stories.tsx
diff --git a/stories/uis/ButtonStories/Button.stories.tsx → stories/uis/Button.stories.tsx b/stories/uis/ButtonStories/Button.stories.tsx → stories/uis/Button.stories.tsx
@@ -2,15 +2,9 @@ import type {ComponentProps} from 'react';
 import {action} from '@storybook/addon-actions';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {
-  Button,
-  ButtonColorType,
-  ButtonSizeType,
-  ButtonType,
-} from '../../../main';
-import {DoobooProvider} from '../../../main';
-
-import Component from './ButtonBasicStory';
+import type {ButtonColorType, ButtonSizeType, ButtonType} from '../../main';
+import {Button, DoobooProvider} from '../../main';
+import {StoryWrapper} from '../Common';
 
 const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text'];
 const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small'];
@@ -27,7 +21,7 @@ const buttonColors: ButtonColorType[] = [
 
 const meta = {
   title: 'Button',
-  component: Component,
+  component: (props) => <Button {...props} />,
   argTypes: {
     type: {
       control: 'select',
@@ -45,7 +39,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
       </DoobooProvider>
     ),
   ],

diff --git a/...uttonGroupStories/ButtonGroup.stories.tsx → stories/uis/ButtonGroup.stories.tsx b/...uttonGroupStories/ButtonGroup.stories.tsx → stories/uis/ButtonGroup.stories.tsx
@@ -1,14 +1,12 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import type {ButtonGroup} from '../../../main';
-import {DoobooProvider} from '../../../main';
-
-import Component from './ButtonGroupBasicStory';
+import {ButtonGroup, DoobooProvider} from '../../main';
+import {StoryWrapper} from '../Common';
 
 const meta = {
   title: 'ButtonGroup',
-  component: Component,
+  component: (props) => <ButtonGroup {...props} />,
   argTypes: {
     color: {
       control: 'select',
@@ -26,7 +24,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
       </DoobooProvider>
     ),
   ],

diff --git a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx
diff --git a/stories/uis/ButtonStories/ButtonBasicStory.tsx b/stories/uis/ButtonStories/ButtonBasicStory.tsx
diff --git a/stories/uis/Checkbox.stories.tsx b/stories/uis/Checkbox.stories.tsx
@@ -0,0 +1,54 @@
+import {type ComponentProps} from 'react';
+import {Text} from 'react-native';
+import {action} from '@storybook/addon-actions';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import type {CheckboxColor} from '../../main';
+import {Checkbox, DoobooProvider} from '../../main';
+import {StoryWrapper} from '../Common';
+
+const colors: CheckboxColor[] = [
+  'primary',
+  'success',
+  'info',
+  'warning',
+  'danger',
+  'secondary',
+];
+
+const meta = {
+  title: 'Checkbox',
+  component: (props) => <Checkbox {...props} />,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: colors,
+    },
+    checked: {
+      defaultValue: false,
+      type: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <StoryWrapper>
+          <Story />
+        </StoryWrapper>
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof Checkbox>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    color: 'primary',
+    endElement: <Text>Click Checkbox!</Text>,
+    checked: false,
+    onPress: action('onCheck'),
+  },
+};