refactor: migrate basic stories

App.tsx

@@ -56,7 +56,6 @@ global.STORIES = stories;
 
 const preview: Preview = {
   decorators: [withBackgrounds],
-
   parameters: {
     backgrounds: {
       default: 'plain',

main/uis/Accordion/index.tsx

@@ -8,14 +8,14 @@ const Container = styled.View`
   flex-direction: column;
 `;
 
-interface Styles {
+type Styles = {
   container?: StyleProp<ViewStyle>;
   titleContainer?: StyleProp<ViewStyle>;
   titleText?: StyleProp<TextStyle>;
   itemContainer?: StyleProp<ViewStyle>;
   itemText?: StyleProp<TextStyle>;
   toggleElement?: StyleProp<ViewStyle>;
-}
+};
 
 export type AccordionBaseProps<T = string, K = string> = {
   data: AccordionItemDataType<T, K>[];

main/uis/Fab/index.tsx

@@ -6,10 +6,10 @@ import type {ButtonSizeType} from '../Button';
 import type {IconName} from '../Icon';
 import {IconButton} from '../IconButton';
 
-interface Styles {
+type Styles = {
   Fab?: StyleProp<ViewStyle>;
   FabItem?: StyleProp<ViewStyle>;
-}
+};
 
 export type FabProps = {
   isActive: boolean;

main/uis/Rating.tsx

@@ -1,8 +1,7 @@
 // React import is needed for expo-web
 import React, {useState} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
-import {View} from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
+import {Pressable, View} from 'react-native';
 import styled, {css} from '@emotion/native';
 
 import type {IconName} from './Icon';
@@ -107,7 +106,7 @@ export function Rating({
             style={{position: 'absolute'}}
           />
         )}
-        <TouchableOpacity
+        <Pressable
           accessibilityRole="button"
           disabled={disabled}
           onPress={() => handlePress(position, true)}
@@ -119,8 +118,8 @@ export function Rating({
               backgroundColor: 'transparent',
             }}
           />
-        </TouchableOpacity>
-        <TouchableOpacity
+        </Pressable>
+        <Pressable
           accessibilityRole="button"
           disabled={disabled}
           onPress={() => handlePress(position)}
@@ -132,7 +131,7 @@ export function Rating({
               backgroundColor: 'transparent',
             }}
           />
-        </TouchableOpacity>
+        </Pressable>
       </StarContainer>
     );
   };

stories/modals/AlertDialogStories/AlertDialog.stories.tsx

@@ -0,0 +1,28 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider} from '../../../main';
+import type AlertDialog from '../../../main/modals/AlertDialog';
+
+import Component from './AlertDialogBasicStory';
+
+const meta = {
+  title: 'AlertDialog',
+  component: Component,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <Story />
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof AlertDialog>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

stories/modals/SnackbarStories/Snackbar.stories.tsx

@@ -0,0 +1,28 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider} from '../../../main';
+import type Snackbar from '../../../main/modals/Snackbar';
+
+import Component from './SnackbarBasicStory';
+
+const meta = {
+  title: 'Snackbar',
+  component: Component,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <Story />
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof Snackbar>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx

@@ -0,0 +1,28 @@
+import type {ComponentProps} from 'react';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {DoobooProvider} from '../../../main';
+import type CalendarCarousel from '../../../packages/CalendarCarousel';
+
+import Component from './CalendarCarouselBasicStory';
+
+const meta = {
+  title: 'CalendarCarousel',
+  component: Component,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <Story />
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof CalendarCarousel>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

stories/uis/AccordionStories/Accordion.stories.tsx

@@ -1,9 +1,13 @@
+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';
 
+// @ts-ignore
 const meta = {
   title: 'Accordion',
   component: AccordionBasicStory,
@@ -14,28 +18,28 @@ const meta = {
       </DoobooProvider>
     ),
   ],
-} satisfies Meta<typeof AccordionBasicStory>;
+} satisfies Meta<ComponentProps<typeof Accordion>>;
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
   args: {
-    activityOpacity: 0.8,
     animDuration: 200,
     collapseOnStart: true,
+    onPressItem: action('onPressItem'),
     data: [
       {
-        title: 'Lists',
+        title: 'Item 1',
         items: ['User', 'Mail', 'Text'],
       },
       {
-        title: 'Lists',
+        title: 'Item 2',
         items: ['User', 'Mail', 'Text'],
       },
       {
-        title: 'Lists',
+        title: 'Item 3',
         items: ['User', 'Mail', 'Text'],
       },
     ],

stories/uis/AccordionStories/AccordionBasicStory.tsx

@@ -1,7 +1,5 @@
-// Caveat: Expo web needs React to be imported
-import React from 'react';
+import type {ComponentProps} from 'react';
 import styled from '@emotion/native';
-import {action} from '@storybook/addon-actions';
 
 import {Accordion} from '../../../main/uis/Accordion';
 import {StoryContainer, StoryTitle} from '../../GlobalStyles';
@@ -10,33 +8,12 @@ const ScrollContainer = styled.ScrollView`
   width: 100%;
 `;
 
-type AccordionBasicProps = {
-  activityOpacity?: number;
-  animDuration?: number;
-  collapseOnStart?: boolean;
-  data?: Array<{title: string; items: string[]}>;
-  shouldAnimate?: boolean;
-};
-
-function AccordionBasic({
-  activityOpacity,
-  animDuration,
-  collapseOnStart,
-  data,
-  shouldAnimate,
-}: AccordionBasicProps): JSX.Element {
+function AccordionBasic(props: ComponentProps<typeof Accordion>): JSX.Element {
   return (
     <ScrollContainer>
       <StoryContainer>
         <StoryTitle style={{fontSize: 18, marginBottom: 8}}>Basic</StoryTitle>
-        <Accordion<string, string>
-          activeOpacity={activityOpacity}
-          animDuration={animDuration}
-          collapseOnStart={collapseOnStart}
-          data={data || []}
-          onPressItem={action('onPressItem')}
-          shouldAnimate={shouldAnimate}
-        />
+        <Accordion {...props} />
       </StoryContainer>
     </ScrollContainer>
   );

stories/uis/ButtonGroupStories/ButtonGroup.stories.tsx

@@ -0,0 +1,45 @@
+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';
+
+const meta = {
+  title: 'ButtonGroup',
+  component: Component,
+  argTypes: {
+    color: {
+      control: 'select',
+      options: [
+        'primary',
+        'secondary',
+        'success',
+        'warning',
+        'danger',
+        'light',
+        'info',
+      ],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <DoobooProvider>
+        <Story />
+      </DoobooProvider>
+    ),
+  ],
+} satisfies Meta<ComponentProps<typeof ButtonGroup>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    color: 'primary', // 기본값으로 'primary' 설정
+    initialValue: 'Option1',
+    options: ['Option1', 'Option2', 'Option3'],
+  },
+};