refactor: unify story wrapper

dooboolab-community · Feb 4, 2024 · ef24bf7 · ef24bf7
1 parent 1b7ca91
commit ef24bf7
Show file tree

Hide file tree

Showing 20 changed files with 454 additions and 516 deletions.
diff --git 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 {
     <StoryContainer>
       <StatusBar barStyle="dark-content" />
       <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-        }}
+        style={css`
+          margin-bottom: 12px;
+
+          flex-direction: row;
+          align-items: center;
+          justify-content: flex-end;
+        `}
       >
         <Typography.Heading3>{themeType}</Typography.Heading3>
         <SwitchToggle
@@ -42,18 +46,26 @@ export function StoryWrapper({children}: ContainerProps): JSX.Element {
             changeThemeType();
           }}
           size="small"
-          style={{padding: 8}}
+          style={css`
+            padding: 8px;
+          `}
         />
       </View>
-      {children}
+      <View
+        style={css`
+          flex: 1;
+        `}
+      >
+        <ScrollContainer>{children}</ScrollContainer>
+      </View>
     </StoryContainer>
   );
 }
 
-export function renderStory(el: JSX.Element): JSX.Element {
+export function StoryWrapper({children}: {children: ReactNode}): JSX.Element {
   return (
     <DoobooProvider>
-      <StoryWrapper>{el}</StoryWrapper>
+      <Wrapper>{children}</Wrapper>
     </DoobooProvider>
   );
 }
diff --git 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 (
-    <Container>
+    <StoryWrapper>
       <CalendarCarousel
         headerIconLeft={
           <Icon color={theme.text.basic} name="ArrowCircleLeft" size={18} />
@@ -54,7 +48,7 @@ function CalendarCarouselBasicStory(): JSX.Element {
         `}
         width={350}
       />
-    </Container>
+    </StoryWrapper>
   );
 }
 

diff --git 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<typeof Accordion>): JSX.Element {
+export default function AccordionBasic(
+  props: ComponentProps<typeof Accordion>,
+): JSX.Element {
   return (
-    <StoryContainer>
-      <StoryTitle>Basic</StoryTitle>
-      <ScrollContainer>
-        <Accordion {...props} />
-      </ScrollContainer>
-    </StoryContainer>
+    <StoryWrapper>
+      <Accordion {...props} />
+    </StoryWrapper>
   );
 }
-
-export default AccordionBasic;
diff --git 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 (
-    <StoryContainer>
-      <StoryTitle style={{fontSize: 18, marginBottom: 8}}>
-        Custom Style
-      </StoryTitle>
-      <ScrollContainer>
-        <Accordion<AccordionTitle, AccordionItem>
-          onPressItem={action('onPressItem')}
-          renderItem={({text}) => {
-            if (text === 'User' || text === 'Image' || text === 'Puzz') {
-              return (
-                <View
-                  style={css`
-                    padding-left: 2px;
-                    flex: 1;
-                    flex-direction: row;
-                    align-items: center;
-                  `}
-                >
-                  <Icon
-                    color={theme.text.basic}
-                    name={
-                      text === 'User'
-                        ? 'AutoAwesome'
-                        : text === 'Puzz'
-                          ? 'QuestBoxFill'
-                          : 'House'
-                    }
-                    size={14}
-                    style={css`
-                      margin-right: 4px;
-                    `}
-                  />
-                  <CustomStyledItem>{text}</CustomStyledItem>
-                </View>
-              );
-            }
-
+    <StoryWrapper>
+      <Accordion<AccordionTitle, AccordionItem>
+        onPressItem={action('onPressItem')}
+        renderItem={({text}) => {
+          if (text === 'User' || text === 'Image' || text === 'Puzz') {
             return (
               <View
                 style={css`
-                  padding-left: 20px;
+                  padding-left: 2px;
                   flex: 1;
                   flex-direction: row;
                   align-items: center;
                 `}
               >
+                <Icon
+                  color={theme.text.basic}
+                  name={
+                    text === 'User'
+                      ? 'AutoAwesome'
+                      : text === 'Puzz'
+                        ? 'QuestBoxFill'
+                        : 'House'
+                  }
+                  size={14}
+                  style={css`
+                    margin-right: 4px;
+                  `}
+                />
                 <CustomStyledItem>{text}</CustomStyledItem>
               </View>
             );
-          }}
-          renderTitle={({text, key}) => (
+          }
+
+          return (
             <View
               style={css`
+                padding-left: 20px;
                 flex: 1;
-
                 flex-direction: row;
                 align-items: center;
-                justify-content: space-between;
               `}
             >
-              <Typography.Heading4>{text}</Typography.Heading4>
-              <Icon
-                color={theme.text.basic}
-                name={
-                  key === 'HEADING_1'
-                    ? 'HouseFill'
-                    : key === 'HEADING_2'
-                      ? 'Star'
-                      : 'Bookmark'
-                }
-                size={14}
-                style={css`
-                  margin-right: 12px;
-                `}
-              />
+              <CustomStyledItem>{text}</CustomStyledItem>
             </View>
-          )}
-          styles={{
-            titleContainer: css`
-              padding-right: 0;
-            `,
-          }}
-          toggleElement={
-            <Icon color={theme.text.basic} name="ArrowCircleDown" size={16} />
-          }
-          toggleElementPosition="left"
-          {...props}
-        />
-      </ScrollContainer>
-    </StoryContainer>
+          );
+        }}
+        renderTitle={({text, key}) => (
+          <View
+            style={css`
+              flex: 1;
+
+              flex-direction: row;
+              align-items: center;
+              justify-content: space-between;
+            `}
+          >
+            <Typography.Heading4>{text}</Typography.Heading4>
+            <Icon
+              color={theme.text.basic}
+              name={
+                key === 'HEADING_1'
+                  ? 'HouseFill'
+                  : key === 'HEADING_2'
+                    ? 'Star'
+                    : 'Bookmark'
+              }
+              size={14}
+              style={css`
+                margin-right: 12px;
+              `}
+            />
+          </View>
+        )}
+        styles={{
+          titleContainer: css`
+            padding-right: 0;
+          `,
+        }}
+        toggleElement={
+          <Icon color={theme.text.basic} name="ArrowCircleDown" size={16} />
+        }
+        toggleElementPosition="left"
+        {...props}
+      />
+    </StoryWrapper>
   );
 }
-
-export default AccordionCustom;
diff --git 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<typeof ButtonGroup>,
 ): JSX.Element {
   return (
-    <StoryContainer>
-      <StoryTitle>Basic</StoryTitle>
-      <ScrollView contentContainerStyle={{flexDirection: 'column'}}>
-        <ButtonGroup {...props} />
-      </ScrollView>
-    </StoryContainer>
+    <StoryWrapper>
+      <ButtonGroup {...props} />
+    </StoryWrapper>
   );
 }
-
-export default ButtonGroupBasic;
diff --git 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<typeof Button>): JSX.Element {
+export default function ButtonBasicStory(
+  props: ComponentProps<typeof Button>,
+): JSX.Element {
   return (
-    <StoryContainer>
-      <StoryTitle>Basic</StoryTitle>
+    <StoryWrapper>
       <Button {...props} />
-    </StoryContainer>
+    </StoryWrapper>
   );
 }
-
-export default ButtonBasicStory;