feat(react-native): react native storybook + publish

.gitignore

@@ -17,3 +17,6 @@ dist
 
 # test
 coverage
+
+*storybook.log
+storybook-static

.script/publish-local.sh

@@ -0,0 +1,10 @@
+#!/bin/bash
+# 로컬에서 배포시 tag, release를 생성하지 않음
+# 직접 version을 수정하고 publish를 실행
+# tag와 release를 직접 생성
+
+sh .script/pre-install.sh
+
+yarn npm publish --access=public
+
+sh .script/post-install.sh

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type {StorybookConfig} from '@storybook/react-vite';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-onboarding', '@storybook/addon-docs', '@storybook/addon-react-native-web'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal: async config => {
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        '@': path.resolve(__dirname, '../src'),
+      },
+    };
+    return config;
+  },
+};
+export default config;

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<!-- React Native Web 관련 스타일 설정 -->
+<style>
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+  }
+  #storybook-root {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: auto;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,27 @@
+import type {Preview} from '@storybook/react-vite';
+
+import {EmotionProvider} from '@/react/provider';
+import {theme} from '@/emotion/theme';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    reactNative: {
+      // React Native 옵션 설정
+    },
+  },
+  decorators: [
+    Story => (
+      <EmotionProvider theme={theme}>
+        <Story />
+      </EmotionProvider>
+    ),
+  ],
+};
+
+export default preview;

eslint.config.ts

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from 'eslint-plugin-storybook';
+
 import tseslint from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import prettier from 'eslint-config-prettier';
@@ -48,4 +51,5 @@ export default [
       },
     },
   },
+  ...storybook.configs['flat/recommended'],
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ummgoban/shared",
-  "version": "0.0.3",
+  "version": "0.0.4-canary.12",
   "description": "ummgoban 공통 패키지",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -19,6 +19,12 @@
     },
     "./react": {
       "types": "./dist/react/index.d.ts"
+    },
+    "./react-native": {
+      "types": "./dist/react-native/index.d.ts"
+    },
+    "./emotion": {
+      "types": "./dist/emotion/index.d.ts"
     }
   },
   "files": [
@@ -37,7 +43,10 @@
     "format": "prettier --write src",
     "format:check": "prettier --check src",
     "test:all": "yarn lint:check && yarn format:check && yarn type-check && yarn test",
-    "release": "standard-version"
+    "release": "standard-version",
+    "publish:local": "yarn run build && ./.script/publish-local.sh",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -50,15 +59,31 @@
     "registry": "https://npm.pkg.github.com/"
   },
   "peerDependencies": {
+    "@emotion/native": ">=11.11.0",
+    "@emotion/react": ">=11.14.0",
     "axios": ">=1.7.4",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "react-native": ">=0.79.0"
   },
   "devDependencies": {
+    "@emotion/native": "^11.11.0",
+    "@emotion/react": "^11.14.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.0",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.0.0",
+    "@storybook/addon-docs": "^9.0.5",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^9.0.5",
+    "@storybook/addon-onboarding": "^9.0.5",
+    "@storybook/addon-react-native-web": "^0.0.29",
+    "@storybook/blocks": "^8.6.14",
+    "@storybook/react": "^9.0.5",
+    "@storybook/react-native": "^9.0.6",
+    "@storybook/react-vite": "^9.0.5",
+    "@storybook/react-webpack5": "^9.0.5",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -77,13 +102,17 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-no-relative-import-paths": "^1.5.5",
     "eslint-plugin-prettier": "^5.4.1",
+    "eslint-plugin-storybook": "^9.0.5",
     "jiti": "^2.4.2",
     "jsdom": "^26.1.0",
     "prettier": "^3.5.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-native": "^0.79.3",
+    "react-native-web": "^0.20.0",
     "rollup": "^4.41.1",
     "standard-version": "^9.5.0",
+    "storybook": "^9.0.5",
     "tslib": "^2.8.1",
     "typescript": "^5.0.0",
     "vite": "^6.3.5",

rollup.config.mjs

@@ -10,7 +10,44 @@ import pkg from './package.json' assert {type: 'json'};
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-export default {
+// 공통 플러그인 설정 (TypeScript 제외)
+const createCommonPlugins = () => [
+  alias({
+    entries: [{find: '@', replacement: path.resolve(__dirname, 'src')}],
+  }),
+  nodeResolve({
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    browser: true,
+    preferBuiltins: false,
+  }),
+  commonjs(),
+  json(),
+];
+
+// 메인 패키지용 TypeScript 플러그인
+const createMainTypescriptPlugin = () =>
+  typescript({
+    tsconfig: './tsconfig.build.json',
+    declaration: true,
+    declarationDir: 'dist',
+    outDir: 'dist',
+    sourceMap: true,
+    rootDir: 'src',
+    jsx: 'react-jsx',
+    exclude: ['**/*.{spec,test}.{ts,tsx}'],
+  });
+
+// 외부 의존성 설정
+const external = [
+  ...Object.keys(pkg.peerDependencies || {}),
+  ...Object.keys(pkg.dependencies || {}),
+  'axios',
+  'react',
+  'react-native',
+];
+
+// 메인 패키지 설정
+const mainConfig = {
   input: 'src/index.ts',
   output: [
     {
@@ -24,27 +61,8 @@ export default {
       sourcemap: true,
     },
   ],
-  external: [...Object.keys(pkg.peerDependencies || {}), ...Object.keys(pkg.dependencies || {}), 'axios', 'react'],
-  plugins: [
-    alias({
-      entries: [{find: '@', replacement: path.resolve(__dirname, 'src')}],
-    }),
-    nodeResolve({
-      extensions: ['.js', '.jsx', '.ts', '.tsx'],
-      browser: true,
-      preferBuiltins: false,
-    }),
-    commonjs(),
-    json(),
-    typescript({
-      tsconfig: './tsconfig.build.json',
-      declaration: true,
-      declarationDir: 'dist',
-      outDir: 'dist',
-      sourceMap: true,
-      rootDir: 'src',
-      jsx: 'react-jsx',
-      exclude: ['**/*.{spec,test}.{ts,tsx}'],
-    }),
-  ],
+  external,
+  plugins: [...createCommonPlugins(), createMainTypescriptPlugin()],
 };
+
+export default [mainConfig];

src/emotion/index.ts

@@ -0,0 +1 @@
+export * from './theme';

src/emotion/theme/emotion.d.ts

@@ -0,0 +1,8 @@
+import '@emotion/react';
+import theme from './theme';
+
+type ThemeTpye = typeof theme;
+
+declare module '@emotion/react' {
+  export type Theme = ThemeTpye;
+}

src/emotion/theme/index.ts

@@ -0,0 +1,3 @@
+import theme from './theme';
+
+export {theme};