Feature/#38 React Native storybook 세팅 (#40)

* chore(apps/app): storybook 기반 react native 앱 재설치 * rename(apps/app): greeenai 앱 상위 폴더 변경 * feat(apps/app): react-native-navigation 관련 라이브러리 설치 * feat(apps/app): @react-native/gradle-plugin 설치 * fix(apps/app): pnpm이 react-native 프로젝트에서 node_modules 찾지 못하는 문제 해결 * fix(apps/app): react-native-gesture-handler, react-native-reanimated 호환 버전으로 재설치 * fix(apps/app): pnpm이 react-native 프로젝트에서 node_modules 찾지 못하는 문제 해결 * refactor(apps/app): commonjs 방식 구문 es6로 변경 * remove(apps/app): 잘못 설치된 lock 파일 삭제 * feat(apps/app): @types/react-native 라이브러리 설치
greeenai · Dec 18, 2024 · 72e4e6f · 72e4e6f
1 parent 00d10b5
commit 72e4e6f
Show file tree

Hide file tree

Showing 29 changed files with 2,449 additions and 12,891 deletions.
diff --git a/apps/app/.eslintrc.js b/apps/app/.eslintrc.js
@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: '@react-native',
+  extends: "@react-native",
 };
diff --git a/apps/app/.ondevice/index.tsx b/apps/app/.ondevice/index.tsx
@@ -0,0 +1,11 @@
+import { view } from "./storybook.requires";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const StorybookUIRoot = view.getStorybookUI({
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+});
+
+export default StorybookUIRoot;
diff --git a/apps/app/.ondevice/main.ts b/apps/app/.ondevice/main.ts
@@ -0,0 +1,13 @@
+import {StorybookConfig} from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
+   addons: [
+    '@storybook/addon-ondevice-notes',
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-backgrounds',
+    '@storybook/addon-ondevice-actions',
+  ],
+};
+
+export default main;
diff --git a/apps/app/.ondevice/preview.tsx b/apps/app/.ondevice/preview.tsx
@@ -0,0 +1,25 @@
+import { withBackgrounds } from "@storybook/addon-ondevice-backgrounds";
+import { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  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$/,
+      },
+    },
+  },
+  decorators: [withBackgrounds],
+};
+
+export default preview;
diff --git a/apps/app/.ondevice/storybook.requires.ts b/apps/app/.ondevice/storybook.requires.ts
@@ -0,0 +1,50 @@
+/* do not change this file, it is auto generated by storybook. */
+import { start, updateView } from "@storybook/react-native";
+
+import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
+
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./components",
+    files: "**/*.stories.?(ts|tsx|js|jsx)",
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    // @ts-ignore
+    req: require.context(
+      "../components",
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?!\.)(?=.)[^/]*?\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require("./preview"),
+  require("@storybook/react-native/dist/preview"),
+  require("@storybook/addon-actions/preview"),
+];
+
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories);
+}
+
+export const view = global.view;
diff --git a/apps/app/.storybook/main.ts b/apps/app/.storybook/main.ts
@@ -0,0 +1,26 @@
+/** @type{import("@storybook/react-webpack5").StorybookConfig} */
+module.exports = {
+  stories: [
+    "../components/**/*.stories.mdx",
+    "../components/**/*.stories.@(js|jsx|ts|tsx)",
+  ],
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-webpack5-compiler-babel",
+    "@chromatic-com/storybook",
+    "@storybook/addon-react-native-web",
+  ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};
diff --git a/apps/app/.storybook/preview.tsx b/apps/app/.storybook/preview.tsx
@@ -0,0 +1,15 @@
+import { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/apps/app/App.tsx b/apps/app/App.tsx
@@ -1,118 +1,27 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- *
- * @format
- */
+import React from "react";
+import { StyleSheet, Text, View } from "react-native";
 
-import React from 'react';
-import type {PropsWithChildren} from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
-
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
-
-type SectionProps = PropsWithChildren<{
-  title: string;
-}>;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
 
-function Section({children, title}: SectionProps): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
+function App() {
   return (
-    <View style={styles.sectionContainer}>
-      <Text
-        style={[
-          styles.sectionTitle,
-          {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
-        {title}
-      </Text>
-      <Text
-        style={[
-          styles.sectionDescription,
-          {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
-        {children}
-      </Text>
+    <View style={styles.container}>
+      <Text>Open up App.tsx to start working on your app!</Text>
     </View>
   );
 }
 
-function App(): React.JSX.Element {
-  const isDarkMode = useColorScheme() === 'dark';
-
-  const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+let AppEntryPoint = App;
 
-  return (
-    <SafeAreaView style={backgroundStyle}>
-      <StatusBar
-        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
-        backgroundColor={backgroundStyle.backgroundColor}
-      />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
-        <Header />
-        <View
-          style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this
-            screen and then come back to see your edits.
-          </Section>
-          <Section title="See Your Changes">
-            <ReloadInstructions />
-          </Section>
-          <Section title="Debug">
-            <DebugInstructions />
-          </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
-    </SafeAreaView>
-  );
+if (process.env.STORYBOOK_ENABLED) {
+  AppEntryPoint = require("./.ondevice").default;
 }
 
-const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  sectionTitle: {
-    fontSize: 24,
-    fontWeight: '600',
-  },
-  sectionDescription: {
-    marginTop: 8,
-    fontSize: 18,
-    fontWeight: '400',
-  },
-  highlight: {
-    fontWeight: '700',
-  },
-});
-
-export default App;
+export default AppEntryPoint;
diff --git a/apps/app/Gemfile b/apps/app/Gemfile
@@ -6,4 +6,3 @@ ruby ">= 2.6.10"
 # Exclude problematic versions of cocoapods and activesupport that causes build failures.
 gem 'cocoapods', '>= 1.13', '!= 1.15.0', '!= 1.15.1'
 gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
-gem 'xcodeproj', '< 1.26.0'
diff --git a/apps/app/Gemfile.lock b/apps/app/Gemfile.lock
@@ -19,10 +19,10 @@ GEM
     atomos (0.1.3)
     base64 (0.2.0)
     claide (1.1.0)
-    cocoapods (1.15.2)
+    cocoapods (1.16.2)
       addressable (~> 2.8)
       claide (>= 1.0.2, < 2.0)
-      cocoapods-core (= 1.15.2)
+      cocoapods-core (= 1.16.2)
       cocoapods-deintegrate (>= 1.0.3, < 2.0)
       cocoapods-downloader (>= 2.1, < 3.0)
       cocoapods-plugins (>= 1.0.0, < 2.0)
@@ -36,8 +36,8 @@ GEM
       molinillo (~> 0.8.0)
       nap (~> 1.0)
       ruby-macho (>= 2.3.0, < 3.0)
-      xcodeproj (>= 1.23.0, < 2.0)
-    cocoapods-core (1.15.2)
+      xcodeproj (>= 1.27.0, < 2.0)
+    cocoapods-core (1.16.2)
       activesupport (>= 5.0, < 8)
       addressable (~> 2.8)
       algoliasearch (~> 1.0)
@@ -71,7 +71,7 @@ GEM
     json (2.7.6)
     minitest (5.25.4)
     molinillo (0.8.0)
-    nanaimo (0.3.0)
+    nanaimo (0.4.0)
     nap (1.1.0)
     netrc (0.11.0)
     nkf (0.2.0)
@@ -82,12 +82,12 @@ GEM
       ethon (>= 0.9.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    xcodeproj (1.25.1)
+    xcodeproj (1.27.0)
       CFPropertyList (>= 2.3.3, < 4.0)
       atomos (~> 0.1.3)
       claide (>= 1.0.2, < 2.0)
       colored2 (~> 3.1)
-      nanaimo (~> 0.3.0)
+      nanaimo (~> 0.4.0)
       rexml (>= 3.3.6, < 4.0)
     zeitwerk (2.6.18)
 
@@ -97,7 +97,6 @@ PLATFORMS
 DEPENDENCIES
   activesupport (>= 6.1.7.5, != 7.1.0)
   cocoapods (>= 1.13, != 1.15.1, != 1.15.0)
-  xcodeproj (< 1.26.0)
 
 RUBY VERSION
    ruby 2.6.10p210