migration: upgrade storybook to ver. 7 (#534)

## Description
Upgrade project to Storybook 7, https://storybook.js.org/releases/7.0.

During this migration, I've removed a large number of hard-coded
stories. It would be better to reconstruct with simpler stories.

## Tests

Not breaking previous tests.

## Checklist

Before you create this PR confirms that it meets all requirements listed
below by checking the relevant checkboxes (`[x]`). This will ensure a
smooth and quick review process.

- [x] I read the [Contributor
Guide](https://github.com/dooboolab-community/dooboo-ui/blob/main/CONTRIBUTING.md)
and followed the process outlined there for submitting PRs.
- [x] Run `yarn test:all` and make sure nothing fails.
- [x] I am willing to follow-up on review comments in a timely manner.

.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,
+  },
+};

.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$/,
+      },
+    },
+  },
+};

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<typeof start>[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,
+  },
 });

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 (
-    <View style={{flex: 1, alignSelf: 'stretch'}}>
+    <View
+      style={css`
+        flex: 1;
+      `}
+    >
       <Provider
         value={{
           ...themeContext,
@@ -75,10 +80,14 @@ function AppProvider({children}: {children: JSX.Element}): JSX.Element {
           alertDialog: alertDialogContext,
         }}
       >
-        {children}
+        {!assetLoaded ? null : (
+          <>
+            {children}
+            <Snackbar ref={snackbar} />
+            <AlertDialog ref={alertDialog} />
+          </>
+        )}
       </Provider>
-      <Snackbar ref={snackbar} />
-      <AlertDialog ref={alertDialog} />
     </View>
   );
 }

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>
     );
   };

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<any> => {
   const {
     resolver: {sourceExts, assetExts},
-  } = await getDefaultConfig(__dirname);
+  } = await defaultConfig;
 
   return {
     blacklist: exclusionList([/docs\/.*/]),
@@ -16,6 +26,6 @@ const config = async (): Promise<any> => {
   };
 };
 
-const defaultConfig = config();
+const newConfig = config();
 
-module.exports = defaultConfig;
+module.exports = newConfig;