refactor: extract stories and simplifed

Author: hyochan

main/uis/Button/index.tsx

@@ -347,6 +347,7 @@ export function Button({
       style={[
         style,
         css`
+          flex-direction: row;
           border-radius: ${borderRadius + 'px'};
         `,
       ]}

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,
         ]}

main/uis/EditText/index.tsx

@@ -53,20 +53,17 @@ type CustomRenderType =
 export type EditTextProps = {
   testID?: TextInputProps['testID'];
   inputRef?: MutableRefObject<TextInput | undefined> | RefObject<TextInput>;
-  required?: boolean;
-
   style?: StyleProp<ViewStyle>;
   styles?: EditTextStyles;
 
   // Components
-  label?: string | RenderType;
-  error?: string | RenderType;
   startElement?: JSX.Element | CustomRenderType;
   endElement?: JSX.Element | CustomRenderType;
-
+  required?: boolean;
+  label?: string | RenderType;
+  error?: string | RenderType;
   direction?: 'row' | 'column';
   decoration?: 'underline' | 'boxed';
-
   value?: TextInputProps['value'];
   multiline?: TextInputProps['multiline'];
   onChange?: TextInputProps['onChange'];

main/uis/Icon/index.tsx

@@ -3782,14 +3782,14 @@ export const doobooIconList = [
 export type IconNames = typeof doobooIconList;
 export type IconName = IconNames[number];
 
-type Props = {
+export type IconProps = {
   name: IconName;
   size?: number;
   color?: string;
   style?: ViewStyle;
 };
 
-const Ico: FC<Props> = createIconSetFromIcoMoon(
+const Ico: FC<IconProps> = createIconSetFromIcoMoon(
   collectingFontIconSelection,
   'doobooui',
   require('./doobooui.ttf'),

main/uis/LoadingIndicator/index.tsx

@@ -13,14 +13,14 @@ type Styles = {
   image?: ImageStyle;
 };
 
-interface Props {
+type Props = {
   style?: StyleProp<ViewStyle>;
   styles?: Styles;
   color?: string;
   size?: ActivityIndicator['props']['size'];
   imgSource?: string | ImageSourcePropType;
   customElement?: JSX.Element | (() => JSX.Element);
-}
+};
 
 export function LoadingIndicator({
   customElement,

main/uis/NetworkImage/index.tsx

@@ -18,13 +18,13 @@ const Container = styled.View`
   align-items: center;
 `;
 
-interface Props {
+type Props = {
   style?: StyleProp<ViewStyle>;
   url: string | undefined;
   loadingSource?: ImageSourcePropType | JSX.Element;
   imageProps?: Partial<ImageProps>;
   shouldFixImageRatio?: boolean;
-}
+};
 
 function NetworkImage(props: Props): JSX.Element {
   const {themeType} = useTheme();

stories/modals/AlertDialogStories/AlertDialog.stories.tsx

@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {DoobooProvider} from '../../../main';
 import type AlertDialog from '../../../main/modals/AlertDialog';
+import {StoryContainer} from '../../GlobalStyles';
 
 import Component from './AlertDialogBasicStory';
 
@@ -13,7 +14,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],

stories/modals/SnackbarStories/Snackbar.stories.tsx

@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 
 import {DoobooProvider} from '../../../main';
 import type Snackbar from '../../../main/modals/Snackbar';
+import {StoryContainer} from '../../GlobalStyles';
 
 import Component from './SnackbarBasicStory';
 
@@ -13,7 +14,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],

stories/packages/CalendarCarousel.stories.tsx

@@ -0,0 +1,60 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider} from '../../main';
+import CalendarCarousel from '../../packages/CalendarCarousel';
+import {StoryContainer} from '../GlobalStyles';
+
+const meta = {
+  title: 'CalendarCarousel',
+  component: (props) => (
+    <CalendarCarousel
+      initialSelectedDate={new Date(2024, 11, 4)}
+      showNextDates={true}
+      showPrevDates={true}
+      width={350}
+      {...props}
+      // headerIconLeft={
+      //   <Icon color={theme.text.basic} name="ArrowCircleLeft" size={18} />
+      // }
+      // headerIconRight={
+      //   <Icon color={theme.text.basic} name="ArrowCircleRight" size={18} />
+      // }
+      // locale={ko}
+      // style={css`
+      //   margin-top: 80px;
+      // `}
+    />
+  ),
+  argTypes: {
+    initialSelectedDate: {
+      control: 'date',
+    },
+    showNextDates: {
+      control: 'boolean',
+    },
+    showPrevDates: {
+      control: 'boolean',
+    },
+    width: {
+      control: 'number',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof CalendarCarousel>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx

@@ -1,10 +1,11 @@
 import type {ComponentProps} from 'react';
 import type {Meta, StoryObj} from '@storybook/react';
 
-import {DoobooProvider} from '../../../main';
-import type {PinchZoom} from '../../../packages/PinchZoom';
+import {DoobooProvider} from '../../main';
+import type {PinchZoom} from '../../packages/PinchZoom/lib';
+import {StoryContainer} from '../GlobalStyles';
 
-import Component from './PinchZoomImageListStory';
+import Component from './PinchZoomStories/PinchZoomImageListStory';
 
 const meta = {
   title: 'PinchZoom',
@@ -14,7 +15,9 @@ const meta = {
   decorators: [
     (Story) => (
       <DoobooProvider>
-        <Story />
+        <StoryContainer>
+          <Story />
+        </StoryContainer>
       </DoobooProvider>
     ),
   ],

stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.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>
     ),
   ],