refactor(common): storybook ui 문서와 ui package 분리 (#358)

* fix(admin): 어드민 삭제

* refactor(common): storybook ui 문서와 ui package 분리

apps/client/package.json → apps/web/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "client",
+  "name": "web",
   "version": "0.1.0",
   "private": true,
   "scripts": {

docs/storybook/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['@sickgyun/eslint-config/react-ts', 'plugin:storybook/recommended'],
+  ignorePatterns: ['*.js*', 'dist'],
+};

packages/ui/.storybook/main.ts → docs/storybook/.storybook/main.ts

@@ -10,7 +10,7 @@ function getAbsolutePath(value: string): any {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),

docs/storybook/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@sickgyun/storybook",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint \"**/*.ts*\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@sickgyun/eslint-config": "workspace:*",
+    "@sickgyun/tsconfig": "workspace:*",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/react-vite": "^7.6.6",
+    "@storybook/test": "^7.6.6",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "storybook": "^7.6.6",
+    "typescript": "^5"
+  },
+  "dependencies": {
+    "@sickgyun/ui": "workspace:*",
+    "@sickgyun/design-token": "workspace:*",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "next": "14.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/ui/src/Alert/Alert.stories.tsx → docs/storybook/stories/Alert.stories.tsx

@@ -1,6 +1,6 @@
+import { Alert as AlertComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Alert as AlertComponent } from '.';
 
 type Alert = typeof AlertComponent;
 

packages/ui/src/Button/Button.stories.tsx → docs/storybook/stories/Button.stories.tsx

@@ -1,5 +1,5 @@
+import { BUTTON_STYLE_KEYS, Button as ButtonComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { BUTTON_STYLE_KEYS, Button as ButtonComponent } from '.';
 
 type Button = typeof ButtonComponent;
 
@@ -31,7 +31,6 @@ export default meta;
 export const Default: StoryObj<Button> = {
   args: {
     children: 'label',
-    width: '358px',
   },
   render: (args) => <ButtonComponent {...args} />,
 };

packages/ui/src/Center/Center.stories.tsx → docs/storybook/stories/Center.stories.tsx

@@ -1,5 +1,5 @@
+import { Center as CenterComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Center as CenterComponent } from '.';
 
 type Center = typeof CenterComponent;
 

packages/ui/src/Confirm/Confirm.stories.tsx → docs/storybook/stories/Confirm.stories.tsx

@@ -1,6 +1,6 @@
+import { Confirm as ConfirmComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Confirm as ConfirmComponent } from '.';
 
 type Confirm = typeof ConfirmComponent;
 

packages/ui/src/Flex/Flex.stories.tsx → docs/storybook/stories/Flex.stories.tsx

@@ -1,5 +1,5 @@
+import { Flex as FlexComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Flex as FlexComponent } from '.';
 
 type Flex = typeof FlexComponent;
 

packages/ui/src/InfoBox/InfoBox.stories.tsx → docs/storybook/stories/InfoBox.stories.tsx

@@ -1,5 +1,5 @@
+import { InfoBox as InfoBoxComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { InfoBox as InfoBoxComponent } from '.';
 
 type InfoBox = typeof InfoBoxComponent;
 

packages/ui/src/Input/Input.stories.tsx → docs/storybook/stories/Input.stories.tsx

@@ -1,5 +1,5 @@
+import { Input as InputComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Input as InputComponent } from '.';
 
 type Input = typeof InputComponent;
 

packages/ui/src/Modal/Modal.stories.tsx → docs/storybook/stories/Modal.stories.tsx

@@ -1,6 +1,6 @@
+import { Modal as ModalComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Modal as ModalComponent } from './Modal';
 
 type Modal = typeof ModalComponent;
 

packages/ui/src/Select/Select.stories.tsx → docs/storybook/stories/Select.stories.tsx

@@ -1,5 +1,5 @@
+import { Select as SelectComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Select as SelectComponent } from '.';
 
 type Select = typeof SelectComponent;
 
@@ -14,7 +14,6 @@ export const Default: StoryObj<Select> = {
   args: {
     label: '라벨',
     placeholder: '플레이스 홀더',
-    width: '384px',
   },
   render: (args) => (
     <SelectComponent {...args}>

packages/ui/src/Spinner/Spinner.stories.tsx → docs/storybook/stories/Spinner.stories.tsx

@@ -1,6 +1,6 @@
 import { colors } from '@sickgyun/design-token';
+import { Spinner as SpinnerComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Spinner as SpinnerComponent } from '.';
 
 type Spinner = typeof SpinnerComponent;
 

packages/ui/src/Stack/Stack.stories.tsx → docs/storybook/stories/Stack.stories.tsx

@@ -1,5 +1,5 @@
+import { Stack as StackComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Stack as StackComponent } from '.';
 
 type Stack = typeof StackComponent;
 

packages/ui/src/Switch/Switch.stories.tsx → docs/storybook/stories/Switch.stories.tsx

@@ -1,6 +1,6 @@
+import { Switch as SwitchComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Switch as SwitchComponent } from '.';
 
 type Switch = typeof SwitchComponent;
 

packages/ui/src/Text/Text.stories.tsx → docs/storybook/stories/Text.stories.tsx

@@ -1,6 +1,6 @@
 import { colors, fonts } from '@sickgyun/design-token';
+import { Text as TextComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Text as TextComponent } from '.';
 
 type Text = typeof TextComponent;
 

packages/ui/src/Textarea/Textarea.stories.tsx → docs/storybook/stories/Textarea.stories.tsx

@@ -1,5 +1,5 @@
+import { Textarea as TextareaComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Textarea as TextareaComponent } from '.';
 
 type Textarea = typeof TextareaComponent;
 
@@ -22,7 +22,6 @@ export const Default: StoryObj<Textarea> = {
   args: {
     label: '라벨임',
     placeholder: '플레이스 홀더임',
-    width: '358px',
     isAutoHeight: false,
   },
   render: (args) => <TextareaComponent {...args} />,

packages/ui/src/Tooltip/Tooltip.stories.tsx → docs/storybook/stories/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
+import { Tooltip, Tooltip as TooltipComponent } from '@sickgyun/ui';
 import type { Meta, StoryObj } from '@storybook/react';
-import { Tooltip, Tooltip as TooltipComponent } from '.';
 
 type Tooltip = typeof TooltipComponent;