From ef24bf7c73c155f6114623686f452a2de6b9dc46 Mon Sep 17 00:00:00 2001 From: hyochan Date: Mon, 5 Feb 2024 01:57:00 +0900 Subject: [PATCH] refactor: unify story wrapper --- stories/Common.tsx | 36 +- .../CalendarCarouselBasicStory.tsx | 14 +- .../AccordionStories/AccordionBasicStory.tsx | 22 +- .../AccordionStories/AccordionCustomStory.tsx | 143 ++++--- .../ButtonGroupBasicStory.tsx | 16 +- .../uis/ButtonStories/ButtonBasicStory.tsx | 13 +- .../CheckboxStories/CheckboxBasicStory.tsx | 20 +- .../EditTextStories/EditTextBasicStory.tsx | 381 +++++++++--------- stories/uis/FabStories/FabBasicStory.tsx | 11 +- .../IconButtonBasicStory.tsx | 12 +- stories/uis/IconStories/IconBasicStory.tsx | 25 +- .../LoadingIndicatorBasicStory.tsx | 12 +- .../NetworkImageBasicStory.tsx | 4 +- .../ProgressBarBasicStory.tsx | 19 +- .../ProgressCircleBasicStory.tsx | 14 +- .../RadioGroupBasicStory.tsx | 32 +- .../uis/RatingStories/RatingBasicStory.tsx | 33 +- .../SwitchToggleBasicStory.tsx | 81 ++-- .../TypographyBasicStory.tsx | 50 +-- styled.d.ts | 32 +- 20 files changed, 454 insertions(+), 516 deletions(-) diff --git a/stories/Common.tsx b/stories/Common.tsx index 36f0ebc5..d5121d23 100644 --- a/stories/Common.tsx +++ b/stories/Common.tsx @@ -1,6 +1,8 @@ // Caveat: Expo web needs React to be imported +import type {ReactNode} from 'react'; import React, {useState} from 'react'; import {StatusBar, View} from 'react-native'; +import {css} from '@emotion/native'; import { DoobooProvider, @@ -10,13 +12,13 @@ import { useDooboo, } from '../main'; -import {StoryContainer} from './GlobalStyles'; +import {ScrollContainer, StoryContainer} from './GlobalStyles'; type ContainerProps = { - children: JSX.Element; + children: ReactNode; }; -export function StoryWrapper({children}: ContainerProps): JSX.Element { +function Wrapper({children}: ContainerProps): JSX.Element { const {themeType, changeThemeType, assetLoaded} = useDooboo(); const [on, off] = useState(themeType === 'dark'); @@ -28,11 +30,13 @@ export function StoryWrapper({children}: ContainerProps): JSX.Element { {themeType} - {children} + + {children} + ); } -export function renderStory(el: JSX.Element): JSX.Element { +export function StoryWrapper({children}: {children: ReactNode}): JSX.Element { return ( - {el} + {children} ); } diff --git a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx index 3ef26825..bc2cb650 100644 --- a/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx +++ b/stories/packages/CalendarCarouselStories/CalendarCarouselBasicStory.tsx @@ -1,18 +1,12 @@ // Caveat: Expo web needs React to be imported import React from 'react'; import {useTheme} from '@dooboo-ui/theme'; -import styled, {css} from '@emotion/native'; +import {css} from '@emotion/native'; import {ko} from 'date-fns/locale'; import {Icon} from '../../../main/uis/Icon'; import CalendarCarousel from '../../../packages/CalendarCarousel'; - -const Container = styled.SafeAreaView` - flex: 1; - align-self: stretch; - - align-items: center; -`; +import {StoryWrapper} from '../../Common'; function CalendarCarouselBasicStory(): JSX.Element { const {theme} = useTheme(); @@ -37,7 +31,7 @@ function CalendarCarouselBasicStory(): JSX.Element { // ]; return ( - + @@ -54,7 +48,7 @@ function CalendarCarouselBasicStory(): JSX.Element { `} width={350} /> - + ); } diff --git a/stories/uis/AccordionStories/AccordionBasicStory.tsx b/stories/uis/AccordionStories/AccordionBasicStory.tsx index f4836728..4f02855e 100644 --- a/stories/uis/AccordionStories/AccordionBasicStory.tsx +++ b/stories/uis/AccordionStories/AccordionBasicStory.tsx @@ -1,22 +1,14 @@ import type {ComponentProps} from 'react'; -import styled from '@emotion/native'; import {Accordion} from '../../../main/uis/Accordion'; -import {StoryContainer, StoryTitle} from '../../GlobalStyles'; +import {StoryWrapper} from '../../Common'; -const ScrollContainer = styled.ScrollView` - width: 100%; -`; - -function AccordionBasic(props: ComponentProps): JSX.Element { +export default function AccordionBasic( + props: ComponentProps, +): JSX.Element { return ( - - Basic - - - - + + + ); } - -export default AccordionBasic; diff --git a/stories/uis/AccordionStories/AccordionCustomStory.tsx b/stories/uis/AccordionStories/AccordionCustomStory.tsx index 43ffc3d1..4fe7cd77 100644 --- a/stories/uis/AccordionStories/AccordionCustomStory.tsx +++ b/stories/uis/AccordionStories/AccordionCustomStory.tsx @@ -8,7 +8,7 @@ import {useDooboo} from '../../../main'; import {Accordion} from '../../../main/uis/Accordion'; import {Icon} from '../../../main/uis/Icon'; import {Typography} from '../../../main/uis/Typography'; -import {ScrollContainer, StoryContainer, StoryTitle} from '../../GlobalStyles'; +import {StoryWrapper} from '../../Common'; const CustomStyledItem = styled.Text` color: ${({theme}) => theme.text.basic}; @@ -19,101 +19,94 @@ const CustomStyledItem = styled.Text` type AccordionTitle = {key: string; text: string}; type AccordionItem = {text: string}; -function AccordionCustom(props): JSX.Element { +export default function AccordionCustom(props): JSX.Element { const {theme} = useDooboo(); return ( - - - Custom Style - - - - onPressItem={action('onPressItem')} - renderItem={({text}) => { - if (text === 'User' || text === 'Image' || text === 'Puzz') { - return ( - - - {text} - - ); - } - + + + onPressItem={action('onPressItem')} + renderItem={({text}) => { + if (text === 'User' || text === 'Image' || text === 'Puzz') { return ( + {text} ); - }} - renderTitle={({text, key}) => ( + } + + return ( - {text} - + {text} - )} - styles={{ - titleContainer: css` - padding-right: 0; - `, - }} - toggleElement={ - - } - toggleElementPosition="left" - {...props} - /> - - + ); + }} + renderTitle={({text, key}) => ( + + {text} + + + )} + styles={{ + titleContainer: css` + padding-right: 0; + `, + }} + toggleElement={ + + } + toggleElementPosition="left" + {...props} + /> + ); } - -export default AccordionCustom; diff --git a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx index de472619..abb4d1f2 100644 --- a/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx +++ b/stories/uis/ButtonGroupStories/ButtonGroupBasicStory.tsx @@ -1,20 +1,14 @@ import type {ComponentProps} from 'react'; -import {ScrollView} from 'react-native'; import {ButtonGroup} from '../../../main/uis/ButtonGroup'; -import {StoryContainer, StoryTitle} from '../../GlobalStyles'; +import {StoryWrapper} from '../../Common'; -function ButtonGroupBasic( +export default function ButtonGroupBasic( props: ComponentProps, ): JSX.Element { return ( - - Basic - - - - + + + ); } - -export default ButtonGroupBasic; diff --git a/stories/uis/ButtonStories/ButtonBasicStory.tsx b/stories/uis/ButtonStories/ButtonBasicStory.tsx index 39615ebc..d2ce2cb6 100644 --- a/stories/uis/ButtonStories/ButtonBasicStory.tsx +++ b/stories/uis/ButtonStories/ButtonBasicStory.tsx @@ -1,15 +1,14 @@ import type {ComponentProps} from 'react'; import {Button} from '../../../main'; -import {StoryContainer, StoryTitle} from '../../GlobalStyles'; +import {StoryWrapper} from '../../Common'; -function ButtonBasicStory(props: ComponentProps): JSX.Element { +export default function ButtonBasicStory( + props: ComponentProps, +): JSX.Element { return ( - - Basic +