refactor: stories folder structures (#237)

Refactor directory structures in stories.

Change a few prop types and mainly refactor [Accordion]. [Accordion] now
gets flexible data type with required `renderTitle` and `renderItem`
props.

Remove fixed `aspectRatio` from [NetworkImage]. The image is now
resizable from the outside.

- Change [ProgressLine] to [ProgressBar]
- Change [Checkbox] `type` prop to `color`
- Organize icon types in one place

.storybook/index.ts

@@ -1,3 +1,3 @@
-import '../stories/components';
+import '../stories/uis';
 import '../stories/modals';
 import '../stories/packages';

docs/.storybook/webpack.config.js

@@ -13,7 +13,7 @@ const ttfLoaderConfig = {
   ],
   include: [
     resolve(__dirname, '../', "node_modules/react-native-vector-icons"),
-    resolve(__dirname, '../', "node_modules/dooboo-ui/components/Icon"),
+    resolve(__dirname, '../', "node_modules/dooboo-ui/ui/Icon"),
   ],
 };
 

docs/src/components/Icon/Default.tsx

@@ -1,5 +1,6 @@
-import {DoobooProvider, Icon} from 'dooboo-ui';
+import {DoobooProvider, Icon, doobooIconList} from 'dooboo-ui';
 
+import type {IconNames} from 'dooboo-ui';
 import type {ReactElement} from 'react';
 import {View} from 'react-native';
 import styled from '@emotion/native';
@@ -54,104 +55,9 @@ function IconStory(): ReactElement {
 
   return (
     <StoryContainer>
-      <IconWithLabel name="puzz-light" />
-      <IconWithLabel name="dooboolab-solid" />
-      <IconWithLabel name="android-solid" />
-      <IconWithLabel name="apple-solid" />
-      <IconWithLabel name="tick-circle-light" />
-      <IconWithLabel name="ban-light" />
-      <IconWithLabel name="bookmark-light" />
-      <IconWithLabel name="brightness-minus-light" />
-      <IconWithLabel name="brightness-plus-light" />
-      <IconWithLabel name="tick-circle-solid" />
-      <IconWithLabel name="coin-light" />
-      <IconWithLabel name="collect-light" />
-      <IconWithLabel name="download-light" />
-      <IconWithLabel name="facebook-solid" />
-      <IconWithLabel name="fastforward-light" />
-      <IconWithLabel name="google-solid" />
-      <IconWithLabel name="happy-light" />
-      <IconWithLabel name="instagram-reel-solid" />
-      <IconWithLabel name="instagram-solid" />
-      <IconWithLabel name="ios-solid" />
-      <IconWithLabel name="location-light" />
-      <IconWithLabel name="lock-light" />
-      <IconWithLabel name="mail-light" />
-      <IconWithLabel name="mobile-light" />
-      <IconWithLabel name="paper-plane-light" />
-      <IconWithLabel name="pause-light" />
-      <IconWithLabel name="play-light" />
-      <IconWithLabel name="puzz-solid" />
-      <IconWithLabel name="rewind-light" />
-      <IconWithLabel name="sad-light" />
-      <IconWithLabel name="save-light" />
-      <IconWithLabel name="speaker-light" />
-      <IconWithLabel name="stop-light" />
-      <IconWithLabel name="thumb-down-light" />
-      <IconWithLabel name="thumb-up-light" />
-      <IconWithLabel name="tiktok-solid" />
-      <IconWithLabel name="unlock-light" />
-      <IconWithLabel name="upload-light" />
-      <IconWithLabel name="vimeo-solid" />
-      <IconWithLabel name="volume-down-light" />
-      <IconWithLabel name="volume-up-light" />
-      <IconWithLabel name="youtube-solid" />
-      <IconWithLabel name="info-light" />
-      <IconWithLabel name="dooboo-shape" />
-      <IconWithLabel name="burger-shape" />
-      <IconWithLabel name="pen-light" />
-      <IconWithLabel name="trash-light" />
-      <IconWithLabel name="chevron-up-shape" />
-      <IconWithLabel name="chevron-down-shape" />
-      <IconWithLabel name="chevron-left-shape" />
-      <IconWithLabel name="chevron-right-shape" />
-      <IconWithLabel name="follow-light" />
-      <IconWithLabel name="mic-shape" />
-      <IconWithLabel name="mic-light" />
-      <IconWithLabel name="phone-shape" />
-      <IconWithLabel name="phone-light" />
-      <IconWithLabel name="clip-shape" />
-      <IconWithLabel name="clip-light" />
-      <IconWithLabel name="cog-light" />
-      <IconWithLabel name="picture-light" />
-      <IconWithLabel name="moment-solid" />
-      <IconWithLabel name="moment-light" />
-      <IconWithLabel name="cross-light" />
-      <IconWithLabel name="tile-light" />
-      <IconWithLabel name="list-light" />
-      <IconWithLabel name="setting-light" />
-      <IconWithLabel name="tick-light" />
-      <IconWithLabel name="chevron-right" />
-      <IconWithLabel name="chevron-left-light" />
-      <IconWithLabel name="chevron-up-light" />
-      <IconWithLabel name="comment-light" />
-      <IconWithLabel name="share-solid" />
-      <IconWithLabel name="add-solid" />
-      <IconWithLabel name="like-solid" />
-      <IconWithLabel name="discover-solid" />
-      <IconWithLabel name="account-solid" />
-      <IconWithLabel name="collection-solid" />
-      <IconWithLabel name="search-solid" />
-      <IconWithLabel name="bell-solid" />
-      <IconWithLabel name="home-solid" />
-      <IconWithLabel name="camera-solid" />
-      <IconWithLabel name="share-light" />
-      <IconWithLabel name="add-light" />
-      <IconWithLabel name="like-light" />
-      <IconWithLabel name="discover-light" />
-      <IconWithLabel name="account-light" />
-      <IconWithLabel name="collection-light" />
-      <IconWithLabel name="chevron-down-light" />
-      <IconWithLabel name="search-light" />
-      <IconWithLabel name="bell-light" />
-      <IconWithLabel name="home-light" />
-      <IconWithLabel name="camera-light" />
-      <IconWithLabel name="dots-light" />
-      <IconWithLabel name="follow-shape" />
-      <IconWithLabel name="wifi-unable-light" />
-      <IconWithLabel name="wifi-light" />
-      <IconWithLabel name="playlist-light" />
-      <IconWithLabel name="playlist-solid" />
+      {(doobooIconList as IconNames).map((icon): ReactElement => {
+        return <IconWithLabel name={icon} />;
+      })}
     </StoryContainer>
   );
 }

docs/src/components/ProgressLine/ProgressLine.stories.mdx → docs/src/components/ProgressBar/ProgressBar.stories.mdx

@@ -2,21 +2,21 @@ import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks';
 import Default from './index';
 import {DoobooProvider, ThemeType} from 'dooboo-ui';
 
-<Meta title="Components/ProgressLine" />
+<Meta title="Components/ProgressBar" />
 
-# ProgressLine
+# ProgressBar
 
-> `ProgressLine` is be used to display the bar graph.
+> `ProgressBar` is be used to display the bar graph.
 
 <br />
 
 ## Usage
 
 ```tsx
-import {ProgressLine} from 'dooboo-ui';
+import {ProgressBar} from 'dooboo-ui';
 
 ...
-<ProgressLine value={25} />;
+<ProgressBar value={25} />;
 ```
 
 | Props  | Types             | Description                                                                                                         | Required | Default   |

docs/src/components/ProgressLine/index.tsx → docs/src/components/ProgressBar/index.tsx

@@ -1,15 +1,15 @@
-import type {ProgressLineStyles, ProgressLineType} from 'dooboo-ui';
+import type {ProgressBarStyles, ProgressBarType} from 'dooboo-ui';
 import React, {useEffect, useState} from 'react';
 
-import {ProgressLine} from 'dooboo-ui';
+import {ProgressBar} from 'dooboo-ui';
 import type {ReactElement} from 'react';
 
 type Props = {
-  type: ProgressLineType;
-  styles?: ProgressLineStyles;
+  type: ProgressBarType;
+  styles?: ProgressBarStyles;
 };
 
-function ProgressLineDefault({type, styles}: Props): ReactElement {
+function ProgressBarDefault({type, styles}: Props): ReactElement {
   const [value, setValue] = useState(0);
 
   useEffect(() => {
@@ -34,7 +34,7 @@ function ProgressLineDefault({type, styles}: Props): ReactElement {
     return () => clearTimeout(timeout);
   }, []);
 
-  return <ProgressLine value={value} type={type} styles={styles} />;
+  return <ProgressBar value={value} type={type} styles={styles} />;
 }
 
-export default ProgressLineDefault;
+export default ProgressBarDefault;

docs/src/overview/readme.stories.mdx

@@ -103,7 +103,7 @@ module.exports = {
     ios: {},
     android: {},
   },
-+  assets: ['dooboo-ui/components/Icon/doobooui.ttf'],
++  assets: ['dooboo-ui/uis/Icon/doobooui.ttf'],
 };
 ```
 
@@ -119,7 +119,7 @@ module.exports = {
 import {useFonts} from 'expo-font';
 
 const [fontsLoaded] = useFonts({
-  IcoMoon: require('dooboo-ui/components/Icon/doobooui.ttf'),
+  IcoMoon: require('dooboo-ui/uis/Icon/doobooui.ttf'),
 });
 ```
 

main/index.ts

@@ -1,19 +1,19 @@
-export * from './components/Typography';
-export * from './components/RadioGroup';
+export * from './uis/Typography';
+export * from './uis/RadioGroup';
 export * from './modals/Snackbar';
-export * from './components/Icon';
-export * from './components/Hr';
-export * from './components/Button';
-export * from './components/ButtonGroup';
-export * from './components/IconButton';
-export * from './components/Checkbox';
-export * from './components/EditText';
-export * from './components/NetworkImage';
-export * from './components/ProgressLine';
-export * from './components/ProgressCircle';
-export * from './components/LoadingIndicator';
-export * from './components/Accordion';
-export * from './components/StatusbarBrightness';
-export * from './components/SwitchToggle';
-export * from './components/FAB';
+export * from './uis/Icon';
+export * from './uis/Hr';
+export * from './uis/Button';
+export * from './uis/ButtonGroup';
+export * from './uis/IconButton';
+export * from './uis/Checkbox';
+export * from './uis/EditText';
+export * from './uis/NetworkImage';
+export * from './uis/ProgressBar';
+export * from './uis/ProgressCircle';
+export * from './uis/LoadingIndicator';
+export * from './uis/Accordion';
+export * from './uis/StatusbarBrightness';
+export * from './uis/SwitchToggle';
+export * from './uis/FAB';
 export * from './providers';

main/modals/AlertDialog/index.tsx

@@ -7,11 +7,11 @@ import React, {
 } from 'react';
 import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 
-import {Button} from '../../components/Button';
-import {Icon} from '../../components/Icon';
+import {Button} from '../../uis/Button';
+import {Icon} from '../../uis/Icon';
 import type {ReactElement} from 'react';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
-import {Typography} from '../../components/Typography';
+import {Typography} from '../../uis/Typography';
 import styled from '@emotion/native';
 import {useTheme} from '@dooboo-ui/theme';