diff --git a/.storybook/main.cjs b/.storybook/main.cjs deleted file mode 100644 index 09f016f6..00000000 --- a/.storybook/main.cjs +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - addons: ['@storybook/addon-knobs', '@storybook/addon-actions'], - framework: '@storybook/react', - stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'], -}; diff --git a/.storybook/main.ts b/.storybook/main.ts new file mode 100644 index 00000000..eb8f4ef2 --- /dev/null +++ b/.storybook/main.ts @@ -0,0 +1,19 @@ +/** @type{import("@storybook/react-webpack5").StorybookConfig} */ +module.exports = { + stories: [ + "../stories/**/*.stories.mdx", + "../stories/**/*.stories.@(js|jsx|ts|tsx)", + ], + addons: [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-react-native-web", + ], + framework: { + name: "@storybook/react-webpack5", + options: {}, + }, + docs: { + autodocs: true, + }, +}; diff --git a/.storybook/package.json b/.storybook/package.json deleted file mode 100644 index 9e26dfee..00000000 --- a/.storybook/package.json +++ /dev/null @@ -1 +0,0 @@ -{} \ No newline at end of file diff --git a/.storybook/preview.ts b/.storybook/preview.ts new file mode 100644 index 00000000..3645ccd8 --- /dev/null +++ b/.storybook/preview.ts @@ -0,0 +1,13 @@ +import type { Preview } from "@storybook/react"; + +const preview: Preview = { + parameters: { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, +}; diff --git a/App.tsx b/App.tsx index 27210fb4..aabcee00 100644 --- a/App.tsx +++ b/App.tsx @@ -1,32 +1,92 @@ +import '@storybook/addon-ondevice-notes/register'; +import '@storybook/addon-ondevice-controls/register'; +import '@storybook/addon-ondevice-backgrounds/register'; +import '@storybook/addon-ondevice-actions/register'; import '@expo/match-media'; -import './storybook/addons'; import AsyncStorage from '@react-native-async-storage/async-storage'; -import {configure, getStorybookUI} from '@storybook/react-native'; +import {withBackgrounds} from '@storybook/addon-ondevice-backgrounds'; +import type {Preview} from '@storybook/react'; +import {start} from '@storybook/react-native'; -const storiesOfUIs = require.context('./stories/uis', true, /\.stories\.tsx$/); +const stories: Parameters[0]['storyEntries'] = [ + { + titlePrefix: 'UI', + directory: './stories/uis', + files: '**/*.stories.?(ts|tsx|js|jsx)', + importPathMatcher: + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + // @ts-ignore + req: require.context( + './stories/uis', + true, + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + ), + }, + { + titlePrefix: 'Modal', + directory: './stories/modals', + files: '**/*.stories.?(ts|tsx|js|jsx)', + importPathMatcher: + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + // @ts-ignore + req: require.context( + './stories/modals', + true, + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + ), + }, + { + titlePrefix: 'Package', + directory: './stories/packages', + files: '**/*.stories.?(ts|tsx|js|jsx)', + importPathMatcher: + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + // @ts-ignore + req: require.context( + './stories/packages', + true, + /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/, + ), + }, +]; -const storiesOfModals = require.context( - './stories/modals', - true, - /\.stories\.tsx$/, -); +// @ts-ignore +global.STORIES = stories; -const storiesOfPackages = require.context( - './stories/packages', - true, - /\.stories\.tsx$/, -); - -const getStories = (): any => { - storiesOfUIs.keys().forEach((filename) => storiesOfUIs(filename)); - storiesOfModals.keys().forEach((filename) => storiesOfModals(filename)); - storiesOfPackages.keys().forEach((filename) => storiesOfPackages(filename)); +const preview: Preview = { + decorators: [withBackgrounds], + parameters: { + backgrounds: { + default: 'plain', + values: [ + {name: 'plain', value: 'white'}, + {name: 'warm', value: 'hotpink'}, + {name: 'cool', value: 'deepskyblue'}, + ], + }, + actions: {argTypesRegex: '^on[A-Z].*'}, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, + }, }; -configure(getStories, module); +const view = start({ + annotations: [ + preview, + require('@storybook/react-native/dist/preview'), + require('@storybook/addon-actions/preview'), + ], + storyEntries: global.STORIES, +}); -export default getStorybookUI({ - // @ts-ignore - asyncStorage: AsyncStorage, +export default view.getStorybookUI({ + storage: { + getItem: AsyncStorage.getItem, + setItem: AsyncStorage.setItem, + }, }); diff --git a/main/providers/index.tsx b/main/providers/index.tsx index 7fce6647..4ce2cc3d 100644 --- a/main/providers/index.tsx +++ b/main/providers/index.tsx @@ -3,6 +3,7 @@ import {useRef} from 'react'; import {View} from 'react-native'; import type {ThemeContext, ThemeProps} from '@dooboo-ui/theme'; import {ThemeProvider, useTheme} from '@dooboo-ui/theme'; +import {css} from '@emotion/native'; import {useFonts} from 'expo-font'; import type {AlertDialogContext} from '../modals/AlertDialog'; @@ -66,7 +67,11 @@ function AppProvider({children}: {children: JSX.Element}): JSX.Element { }; return ( - + - {children} + {!assetLoaded ? null : ( + <> + {children} + + + + )} - - ); } diff --git a/main/uis/Accordion/index.tsx b/main/uis/Accordion/index.tsx index 8d80e1d4..df08440d 100644 --- a/main/uis/Accordion/index.tsx +++ b/main/uis/Accordion/index.tsx @@ -8,14 +8,14 @@ const Container = styled.View` flex-direction: column; `; -interface Styles { +type Styles = { container?: StyleProp; titleContainer?: StyleProp; titleText?: StyleProp; itemContainer?: StyleProp; itemText?: StyleProp; toggleElement?: StyleProp; -} +}; export type AccordionBaseProps = { data: AccordionItemDataType[]; diff --git a/main/uis/Fab/index.tsx b/main/uis/Fab/index.tsx index c322b922..c8436aab 100644 --- a/main/uis/Fab/index.tsx +++ b/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; FabItem?: StyleProp; -} +}; export type FabProps = { isActive: boolean; diff --git a/main/uis/Rating.tsx b/main/uis/Rating.tsx index 06f98240..879de887 100644 --- a/main/uis/Rating.tsx +++ b/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'}} /> )} - handlePress(position, true)} @@ -119,8 +118,8 @@ export function Rating({ backgroundColor: 'transparent', }} /> - - + handlePress(position)} @@ -132,7 +131,7 @@ export function Rating({ backgroundColor: 'transparent', }} /> - + ); }; diff --git a/metro.config.js b/metro.config.js deleted file mode 100644 index fd15f49b..00000000 --- a/metro.config.js +++ /dev/null @@ -1,9 +0,0 @@ -const {getDefaultConfig} = require('expo/metro-config'); - -const config = getDefaultConfig(__dirname); - -// The code below is a workaround for an issue arising when importing stylis from emotion. -// This problem is due to stylis being built as an ES module (ESM). -config.resolver.assetExts.push('mjs'); - -module.exports = config; diff --git a/metro.config.ts b/metro.config.ts index d39b6a7a..7b582f29 100644 --- a/metro.config.ts +++ b/metro.config.ts @@ -1,11 +1,21 @@ +const path = require('path'); const {getDefaultConfig} = require('expo/metro-config'); +const {generate} = require('@storybook/react-native/scripts/generate'); const exclusionList = require('metro-config/src/defaults/exclusionList'); +generate({ + configPath: path.resolve(__dirname, './.ondevice'), +}); + +const defaultConfig = getDefaultConfig(__dirname); + +defaultConfig.transformer.unstable_allowRequireContext = true; + const config = async (): Promise => { const { resolver: {sourceExts, assetExts}, - } = await getDefaultConfig(__dirname); + } = await defaultConfig; return { blacklist: exclusionList([/docs\/.*/]), @@ -16,6 +26,6 @@ const config = async (): Promise => { }; }; -const defaultConfig = config(); +const newConfig = config(); -module.exports = defaultConfig; +module.exports = newConfig; diff --git a/package.json b/package.json index 81385c29..8bdb1173 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "lint:ci": "commitlint --from HEAD~0 --to HEAD --verbose", "tsc": "tsc", "start": "expo start", + "start:reset": "watchman watch-del-all && lsof -t -i :8081 | xargs kill && expo start -c", "jest": "jest --runInBand", "android": "expo start --android", "ios": "expo start --ios", @@ -24,11 +25,13 @@ "cp:main": "cp -r main/* ./lib", "postbuild": "cp ./main/react-native.config.cjs ./lib/react-native.config.cjs && rm -rf ./lib/tsconfig* && cp README.md ./lib/README.md && cp -R main/__assets__ lib && cp ./main/uis/Icon/**.otf ./lib/uis/Icon/", "build:storybook": "NODE_OPTIONS=--openssl-legacy-provider expo export:web && sh web-build-postinstall.sh", + "build:storybook:web": "storybook dev -p 6006", "deploy:storybook": "gh-pages -d web-build", "build:packages": "lerna exec -- yarn build", "install:packages": "lerna exec -- yarn", "upgrade:packages": "lerna exec -- ncu -u && yarn install:packages", - "prepare": "husky install" + "prepare": "husky install", + "storybook:web": "storybook dev -p 6006" }, "dependencies": { "@dooboo-ui/theme": "^0.12.16", @@ -64,30 +67,33 @@ "@jest/types": "^29.6.3", "@react-native-community/datetimepicker": "7.6.1", "@react-native-community/slider": "4.4.2", - "@storybook/addon-actions": "^6.5.16", - "@storybook/addon-knobs": "^6.4.0", - "@storybook/addon-ondevice-actions": "^6.5.3", - "@storybook/addon-ondevice-knobs": "^6.5.3", - "@storybook/addons": "^6.5.16", + "@storybook/addon-ondevice-actions": "^7.6.11", + "@storybook/addon-ondevice-backgrounds": "^7.6.11", + "@storybook/addon-ondevice-controls": "^7.6.11", + "@storybook/addon-ondevice-knobs": "^7.6.14", + "@storybook/addon-ondevice-notes": "^7.6.11", + "@storybook/addon-react-native-web": "^0.0.22", + "@storybook/addons": "^7.6.12", "@storybook/preset-typescript": "^3.0.0", - "@storybook/react": "^6.5.16", - "@storybook/react-native": "6.5.6", - "@storybook/react-native-server": "6.5.6", - "@testing-library/jest-dom": "^6.4.1", + "@storybook/react": "^7.6.10", + "@storybook/react-native": "^7.6.11", + "@storybook/react-webpack5": "^7.6.10", "@testing-library/jest-native": "^5.4.3", "@testing-library/react-hooks": "^8.0.1", "@testing-library/react-native": "^12.4.3", "@types/jest": "^29.5.11", "@types/jest-plugin-context": "^2.9.7", "@types/node": "^20.11.15", - "@types/react": "~18.2.51", + "@types/react": "~18.2.45", "@types/react-dom": "~18.0.10", "@types/react-responsive": "^8.0.8", "@types/react-test-renderer": "^18.0.7", "babel-loader": "^9.1.3", + "babel-plugin-react-native-web": "^0.19.10", "babel-preset-expo": "^9.5.2", "babel-preset-react-app": "^10.0.1", "commitlint-plugin-function-rules": "^3.0.0", + "cross-env": "^7.0.3", "eslint": "^8.56.0", "eslint-plugin-storybook": "^0.6.15", "gh-pages": "^6.1.1", @@ -99,13 +105,25 @@ "lerna": "^8.0.2", "prettier": "^3.2.4", "react-test-renderer": "^18.2.0", + "storybook": "^7.6.10", "ts-jest": "^29.1.2", "ts-node": "^10.9.2", - "typescript": "5.3.3" + "typescript": "^5.3.0" }, "workspaces": { "packages": [ "packages/*" ] + }, + "resolutions": { + "react-docgen-typescript": "2.2.2" + }, + "overrides": { + "react-docgen-typescript": "2.2.2" + }, + "pnpm": { + "overrides": { + "react-docgen-typescript": "2.2.2" + } } } diff --git a/packages/CalendarCarousel/index.tsx b/packages/CalendarCarousel/index.tsx index a45c2a4d..6b03ab4f 100644 --- a/packages/CalendarCarousel/index.tsx +++ b/packages/CalendarCarousel/index.tsx @@ -149,6 +149,16 @@ function CalendarCarousel({ data={dates} horizontal keyExtractor={(_, i) => `calendar-${i}`} + onScrollEndDrag={() => { + if (index !== 1) { + setCurrentDate( + index === 0 + ? subMonths(currentDate, 1) + : addMonths(currentDate, 1), + ); + flatListRef.current?.scrollToIndex({index: 1, animated: false}); + } + }} onScrollToIndexFailed={() => { const wait = new Promise((resolve) => setTimeout(resolve, 500)); wait.then(() => { @@ -159,6 +169,7 @@ function CalendarCarousel({ ref={flatListRef} renderItem={({item}) => ( { onSelectDate?.(selectedDateObj.date); @@ -169,26 +180,15 @@ function CalendarCarousel({ flatListRef.current?.scrollToIndex({index: 1, animated: false}); } }} - dateObjects={item} - width={width} + renderDate={renderDate} selectedDateObject={selectedDateObject} showNextDates={showNextDates} showPrevDates={showPrevDates} - renderDate={renderDate} styles={styles?.date} + width={width} /> )} scrollEventThrottle={16} - onScrollEndDrag={() => { - if (index !== 1) { - setCurrentDate( - index === 0 - ? subMonths(currentDate, 1) - : addMonths(currentDate, 1), - ); - flatListRef.current?.scrollToIndex({index: 1, animated: false}); - } - }} // https://stackoverflow.com/a/60320726/8841562 showsHorizontalScrollIndicator={false} viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current} diff --git a/stories/GlobalStyles.ts b/stories/GlobalStyles.ts index c51c4cfa..2564369b 100644 --- a/stories/GlobalStyles.ts +++ b/stories/GlobalStyles.ts @@ -4,7 +4,7 @@ export const StoryContainer = styled.View` flex: 1; align-self: stretch; background-color: ${({theme}) => theme.bg.paper}; - padding: 0 12px; + padding: 24px 24px 48px; `; export const ScrollContainer = styled.ScrollView` diff --git a/stories/modals/AlertDialog.stories.tsx b/stories/modals/AlertDialog.stories.tsx deleted file mode 100644 index 08fd0998..00000000 --- a/stories/modals/AlertDialog.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../Common'; - -import AlertDialogBasicStory from './AlertDialogStories/AlertDialogBasicStory'; - -storiesOf('[Modal] AlertDialog', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()); diff --git a/stories/modals/AlertDialogStories/AlertDialog.stories.tsx b/stories/modals/AlertDialogStories/AlertDialog.stories.tsx new file mode 100644 index 00000000..1fbb4fab --- /dev/null +++ b/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) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/stories/modals/Snackbar.stories.tsx b/stories/modals/Snackbar.stories.tsx deleted file mode 100644 index ccaca0b4..00000000 --- a/stories/modals/Snackbar.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../Common'; - -import SnackbarBasicStory from './SnackbarStories/SnackbarBasicStory'; - -storiesOf('[Modal] Snackbar', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()); diff --git a/stories/modals/SnackbarStories/Snackbar.stories.tsx b/stories/modals/SnackbarStories/Snackbar.stories.tsx new file mode 100644 index 00000000..36f79944 --- /dev/null +++ b/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) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/stories/packages/CalendarCarousel.stories.tsx b/stories/packages/CalendarCarousel.stories.tsx deleted file mode 100644 index 674fae2f..00000000 --- a/stories/packages/CalendarCarousel.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../Common'; - -import CalendarCarouselBasicStory from './CalendarCarouselStories/CalendarCarouselBasicStory'; - -storiesOf('[Package] CalendarCarousel', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()); diff --git a/stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx b/stories/packages/CalendarCarouselStories/CalendarCarousel.stories.tsx new file mode 100644 index 00000000..c07b48c0 --- /dev/null +++ b/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) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/stories/packages/PinchZoomStories/PinchZoom.stories.tsx b/stories/packages/PinchZoomStories/PinchZoom.stories.tsx new file mode 100644 index 00000000..2a99d48b --- /dev/null +++ b/stories/packages/PinchZoomStories/PinchZoom.stories.tsx @@ -0,0 +1,29 @@ +import type {ComponentProps} from 'react'; +import type {Meta, StoryObj} from '@storybook/react'; + +import {DoobooProvider} from '../../../main'; +import type {PinchZoom} from '../../../packages/PinchZoom'; + +import Component from './PinchZoomImageListStory'; + +const meta = { + title: 'PinchZoom', + // @ts-ignore + component: Component, + argTypes: {}, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: {}, +}; diff --git a/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx b/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx deleted file mode 100644 index 3ddf62ad..00000000 --- a/stories/packages/PinchZoomStories/PinchZoomArticleStory.tsx +++ /dev/null @@ -1,27 +0,0 @@ -// Caveat: Expo web needs React to be imported -import styled from '@emotion/native'; - -import {PinchZoom} from '../../../packages/PinchZoom/lib'; - -const TitleText = styled.Text` - font-size: 16px; -`; - -const ContentText = styled.Text` - font-size: 14px; -`; - -function PinchZoomArticleStory(): JSX.Element { - return ( - - Article Title - - {`This block is for the content of the article. \ -PinchZoom works at only Image but also other views. So, let's zoom in with your fingers. -`} - - - ); -} - -export default PinchZoomArticleStory; diff --git a/stories/packages/PinchZoomStories/index.tsx b/stories/packages/PinchZoomStories/index.tsx deleted file mode 100644 index 159d710f..00000000 --- a/stories/packages/PinchZoomStories/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../../Common'; - -import PinchZoomArticleStory from './PinchZoomArticleStory'; -import PinchZoomImageListStory from './PinchZoomImageListStory'; -import PinchZoomImageSliderStory from './PinchZoomImageSliderStory'; - -storiesOf('[Package] PinchZoom', module) - .add('ImageSlider', () => renderStory()) - .add('Article', () => renderStory()) - .add('ImageList', () => renderStory()); diff --git a/stories/uis/Accordion.stories.tsx b/stories/uis/Accordion.stories.tsx deleted file mode 100644 index 264e9dc8..00000000 --- a/stories/uis/Accordion.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../Common'; - -import AccordionBasicStory from './AccordionStories/AccordionBasicStory'; -import AccordionCustomStory from './AccordionStories/AccordionCustomStory'; - -storiesOf('Accordion', module) - .addDecorator(withKnobs) - .add('Basic', () => renderStory()) - .add('Custom', () => renderStory()); diff --git a/stories/uis/AccordionStories/Accordion.stories.tsx b/stories/uis/AccordionStories/Accordion.stories.tsx new file mode 100644 index 00000000..ee80b34a --- /dev/null +++ b/stories/uis/AccordionStories/Accordion.stories.tsx @@ -0,0 +1,48 @@ +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, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + animDuration: 200, + collapseOnStart: true, + onPressItem: action('onPressItem'), + data: [ + { + title: 'Item 1', + items: ['User', 'Mail', 'Text'], + }, + { + title: 'Item 2', + items: ['User', 'Mail', 'Text'], + }, + { + title: 'Item 3', + items: ['User', 'Mail', 'Text'], + }, + ], + shouldAnimate: true, + }, +}; diff --git a/stories/uis/AccordionStories/AccordionBasicStory.tsx b/stories/uis/AccordionStories/AccordionBasicStory.tsx index c810e42e..9fbcd98a 100644 --- a/stories/uis/AccordionStories/AccordionBasicStory.tsx +++ b/stories/uis/AccordionStories/AccordionBasicStory.tsx @@ -1,8 +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 {boolean, number} from '@storybook/addon-knobs'; import {Accordion} from '../../../main/uis/Accordion'; import {StoryContainer, StoryTitle} from '../../GlobalStyles'; @@ -11,34 +8,12 @@ const ScrollContainer = styled.ScrollView` width: 100%; `; -const data = [ - { - title: 'Lists', - items: ['User', 'Mail', 'Text'], - }, - { - title: 'Lists', - items: ['User', 'Mail', 'Text'], - }, - { - title: 'Lists', - items: ['User', 'Mail', 'Text'], - }, -]; - -function AccordionBasic(): JSX.Element { +function AccordionBasic(props: ComponentProps): JSX.Element { return ( Basic - - activeOpacity={number('activeOpacity', 0.8)} - animDuration={number('animDuration', 200)} - collapseOnStart={boolean('collapseOnStart', true)} - data={data} - onPressItem={action('onPressItem')} - shouldAnimate={boolean('shouldAnimate', true)} - /> + ); diff --git a/stories/uis/AccordionStories/AccordionCustom.stories.tsx b/stories/uis/AccordionStories/AccordionCustom.stories.tsx new file mode 100644 index 00000000..2d324391 --- /dev/null +++ b/stories/uis/AccordionStories/AccordionCustom.stories.tsx @@ -0,0 +1,52 @@ +import type {Meta, StoryObj} from '@storybook/react'; + +import {DoobooProvider} from '../../../main'; + +import AccordionCustomStory from './AccordionCustomStory'; + +const meta = { + title: 'Accordion', + component: AccordionCustomStory, + args: { + activityOpacity: 0.8, + 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) => ( + + + + ), + ], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Custom: Story = {}; diff --git a/stories/uis/AccordionStories/AccordionCustomStory.tsx b/stories/uis/AccordionStories/AccordionCustomStory.tsx index a379f2d9..0d87adf8 100644 --- a/stories/uis/AccordionStories/AccordionCustomStory.tsx +++ b/stories/uis/AccordionStories/AccordionCustomStory.tsx @@ -3,7 +3,6 @@ import React from 'react'; import {View} from 'react-native'; import styled, {css} from '@emotion/native'; import {action} from '@storybook/addon-actions'; -import {boolean, number} from '@storybook/addon-knobs'; import {useDooboo} from '../../../main'; import {Accordion} from '../../../main/uis/Accordion'; @@ -20,31 +19,7 @@ const CustomStyledItem = styled.Text` type AccordionTitle = {key: string; text: string}; type AccordionItem = {text: string}; -const 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'}], - }, -]; - -function AccordionCustom(): JSX.Element { +function AccordionCustom(props): JSX.Element { const {theme} = useDooboo(); return ( @@ -54,10 +29,6 @@ function AccordionCustom(): JSX.Element { Custom Style - activeOpacity={number('activeOpacity', 1)} - animDuration={number('animDuration', 200)} - collapseOnStart={boolean('collapseOnStart', true)} - data={data} onPressItem={action('onPressItem')} renderItem={({text}) => { if (text === 'User' || text === 'Image' || text === 'Puzz') { @@ -129,7 +100,6 @@ function AccordionCustom(): JSX.Element { /> )} - shouldAnimate={boolean('shouldAnimate', true)} styles={{ titleContainer: css` padding-right: 0; @@ -139,6 +109,7 @@ function AccordionCustom(): JSX.Element { } toggleElementPosition="left" + {...props} /> diff --git a/stories/uis/Button.stories.tsx b/stories/uis/Button.stories.tsx deleted file mode 100644 index 6e682590..00000000 --- a/stories/uis/Button.stories.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -// Caveat: Expo web needs React to be imported -import {renderStory} from '../Common'; - -import ButtonBasic from './ButtonStories/ButtonBasicStory'; -import ButtonColor from './ButtonStories/ButtonColorStory'; -import ButtonCustom from './ButtonStories/ButtonCustomStory'; -import ButtonDisabled from './ButtonStories/ButtonDisabledStory'; -import ButtonEvent from './ButtonStories/ButtonEventStory'; -import ButtonLoading from './ButtonStories/ButtonLoadingStory'; -import ButtonSizes from './ButtonStories/ButtonSizeStory'; -import ButtonStartAndEnd from './ButtonStories/ButtonStartAndEndStory'; - -storiesOf('Button', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()) - .add('Color', () => renderStory()) - .add('Disabled', () => renderStory()) - .add('Sizes', () => renderStory()) - .add('Loading', () => renderStory()) - .add('Custom', () => renderStory()) - .add('StartEnd', () => renderStory()) - .add('Event', () => renderStory()); diff --git a/stories/uis/ButtonGroup.stories.tsx b/stories/uis/ButtonGroup.stories.tsx deleted file mode 100644 index a422b0ec..00000000 --- a/stories/uis/ButtonGroup.stories.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../Common'; - -import ButtonGroupBasicStory from './ButtonGroupStories/ButtonGroupBasicStory'; - -storiesOf('ButtonGroup', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()); diff --git a/stories/uis/ButtonGroupStories/ButtonGroup.stories.tsx b/stories/uis/ButtonGroupStories/ButtonGroup.stories.tsx new file mode 100644 index 00000000..9ea7cd30 --- /dev/null +++ b/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) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + color: 'primary', // 기본값으로 'primary' 설정 + initialValue: 'Option1', + options: ['Option1', 'Option2', 'Option3'], + }, +}; diff --git a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx index 9819e243..42204c4a 100644 --- a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx +++ b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx @@ -1,28 +1,17 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; +import type {ComponentProps} from 'react'; import {ScrollView} from 'react-native'; -import {select} from '@storybook/addon-knobs'; -import type {DoobooTheme} from '../../../main'; import {ButtonGroup} from '../../../main/uis/ButtonGroup'; import {StoryContainer, StoryTitle} from '../../GlobalStyles'; -function ButtonGroupBasic(): JSX.Element { - const color = select( - 'color', - ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'info'], - 'primary', - ); - +function ButtonGroupBasic( + props: ComponentProps, +): JSX.Element { return ( Basic - + ); diff --git a/stories/uis/ButtonGroupStories/index.tsx b/stories/uis/ButtonGroupStories/index.tsx deleted file mode 100644 index 8f6acb8a..00000000 --- a/stories/uis/ButtonGroupStories/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {withActions} from '@storybook/addon-actions'; -import {withKnobs} from '@storybook/addon-knobs'; -import {storiesOf} from '@storybook/react-native'; - -import {renderStory} from '../../Common'; - -import ButtonGroupBasicStory from './ButtonGroupBasicStory'; - -storiesOf('ButtonGroup', module) - .addDecorator(withKnobs) - .addDecorator(withActions) - .add('Basic', () => renderStory()); diff --git a/stories/uis/ButtonStories/Button.stories.tsx b/stories/uis/ButtonStories/Button.stories.tsx new file mode 100644 index 00000000..83d0b5ea --- /dev/null +++ b/stories/uis/ButtonStories/Button.stories.tsx @@ -0,0 +1,66 @@ +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'; + +const buttonTypes: ButtonType[] = ['outlined', 'solid', 'text']; +const buttonSizes: ButtonSizeType[] = ['large', 'medium', 'small']; + +const buttonColors: ButtonColorType[] = [ + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'light', + 'secondary', +]; + +const meta = { + title: 'Button', + component: Component, + argTypes: { + type: { + control: 'select', + options: buttonTypes, + }, + color: { + control: 'select', + options: buttonColors, + }, + size: { + control: 'select', + options: buttonSizes, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} satisfies Meta>; + +export default meta; + +type Story = StoryObj; + +export const Basic: Story = { + args: { + type: 'solid', + color: 'primary', + text: 'Button', + size: 'medium', + onPress: action('onPressItem'), + }, +}; diff --git a/stories/uis/ButtonStories/ButtonBasicStory.tsx b/stories/uis/ButtonStories/ButtonBasicStory.tsx index b313b40b..39615ebc 100644 --- a/stories/uis/ButtonStories/ButtonBasicStory.tsx +++ b/stories/uis/ButtonStories/ButtonBasicStory.tsx @@ -1,39 +1,13 @@ -// Caveat: Expo web needs React to be imported -import React from 'react'; -import {boolean, number, select} from '@storybook/addon-knobs'; +import type {ComponentProps} from 'react'; -import type {ButtonColorType, ButtonSizeType} from '../../../main'; import {Button} from '../../../main'; -import {StoryContainer, StorySection, StoryTitle} from '../../GlobalStyles'; -import {buttonColors, buttonSizes, buttonTypes} from '../const'; - -function ButtonBasicStory(): JSX.Element { - const color = select('color', buttonColors, 'primary'); - const size = select('size', buttonSizes, 'medium'); - const disabled = boolean('disabled', false); - const activeOpacity = number('activeOpacity', 0.8); - const loading = boolean('loading', false); +import {StoryContainer, StoryTitle} from '../../GlobalStyles'; +function ButtonBasicStory(props: ComponentProps): JSX.Element { return ( Basic - - {buttonTypes.map((type) => ( -