[Feature] �Switch 컴포넌트 구현 (#22)

* feat: 토글 컴포넌트 구현 * docs: gitignore 업데이트 * design: 배경색 변경 * docs: 토글 컴포넌트 스토리 작성 * docs: 토글 컴포넌트 스토리 코드 문서화 추가 * chore: 토글 컴포넌트 text 관련 props 추가 * chore: 변경된 styled-system 반영 * chore: jest config 수정 * feat: testing-library/user-event 설치 * chore: 토글 컴포넌트 data-disabled 속성 변경 * test: 토글 컴포넌트 테스트 작성 * chore: jest setup 관련 tsconfig 설정 변경 * chore: 토글 컴포넌트에 use client 추가 * chore: package.json, rollup config 토글 컴포넌트 반영 * design: 토글 가로, 세로 너비 고정 * chore: 토글 컴포넌트 text props 타입 변경 * chore: 토글 컴포넌트에 onClick, onKeyDown 이벤트 핸들러 props 추가 * chore: 외부 상태 제어 관련 props 추가 * fix: 토글 컴포넌트 forwardRef, generic 관련 타입 추론 안 되는 문제 해결 * chore: 빌드 시 exports type 필드 경로 변경 * fix: 토글 컴포넌트 테스트 props 변경에 따른 수정 * feat: 크로마틱 배포 워크플로우에 스토리북 링크 코멘트 기능 추가 * test: 토글 컴포넌트 테스트 코드 수정 * chore: 토글 컴포넌트 외부 상태 허용하도록 변경 * chore: 토글 컴포넌트 props 타입 변경 * chore: Toggle 컴포넌트 Switch 컴포넌트로 네이밍 변경 * chore: 스위치 컴포넌트 코드 및 스토리 수정 * test: 토글 컴포넌트 변경 사항 테스트에 적용 * test: 토글 컴포넌트 변경된 props에 따른 테스트 변경 * chore: 빌드 관련 설정 변경 * chore: props 및 상태 네이밍 변경 * fix: rollup 빌드 시 use client 없애는 문제 해결 * fix: rollup use client 주석 없애는 이슈 해결
GDSC-Hongik · May 28, 2024 · acb62fd · acb62fd
1 parent b293d5f
commit acb62fd
Show file tree

Hide file tree

Showing 135 changed files with 39,943 additions and 64 deletions.
diff --git a/.github/workflows/deploy-chromatic.yml b/.github/workflows/deploy-chromatic.yml
@@ -48,3 +48,10 @@ jobs:
           workingDir: packages/wow-ui/src
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.TOKEN }}
+
+      - name: Create comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.TOKEN }}
+        with:
+          message: "🚀 storybook: ${{ steps.chromatic.outputs.storybookUrl }}"
diff --git a/.gitignore b/.gitignore
@@ -39,6 +39,7 @@ yarn-error.log*
 
 ## Panda
 styled-system-studio
+
 *storybook.log
 
 .eslintcache
diff --git a/apps/wow-docs/app/page.tsx b/apps/wow-docs/app/page.tsx
@@ -1,6 +1,6 @@
 import { css } from "@styled-system/css/css";
 import { UpArrow } from "wowds-icons";
-import Button from "wowds-ui/Button";
+import Switch from "wowds-ui/Switch";
 
 const Home = () => {
   return (
@@ -15,7 +15,7 @@ const Home = () => {
         <p>docs</p>
         <UpArrow />
       </main>
-      <Button>버튼</Button>
+      <Switch />
     </>
   );
 };

diff --git a/package.json b/package.json
@@ -35,6 +35,7 @@
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
@@ -66,6 +67,7 @@
     "rollup": "^4.17.2",
     "rollup-jest": "^3.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-preserve-directives": "^0.4.0",
     "shared-config": "workspace:^",
     "theme": "workspace:*",
     "ts-jest": "^29.1.2",

diff --git a/packages/shared-config/jest.config.ts b/packages/shared-config/jest.config.ts
@@ -12,7 +12,7 @@ const config: Config = {
     ],
   },
 
-  setupFilesAfterEnv: ["./jest.config.ts"],
+  setupFilesAfterEnv: ["../shared-config/jest.setup.ts"],
   verbose: true,
   collectCoverage: true,
   restoreMocks: true,
@@ -29,7 +29,8 @@ const config: Config = {
     "<rootDir>/node-modules/",
   ],
   moduleNameMapper: {
-    "^@styled-system(.*)$": "<rootDir>/styled-system$1",
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@styled-system(.*)$": "<rootDir>/styled-system/$1",
   },
 };
 

diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json
@@ -29,6 +29,16 @@
       "types": "./dist/Button/index.d.ts",
       "require": "./dist/Button.cjs",
       "import": "./dist/Button.js"
+    },
+    "./Toggle": {
+      "types": "./dist/components/Toggle/index.d.ts",
+      "require": "./dist/Toggle.cjs",
+      "import": "./dist/Toggle.js"
+    },
+    "./Switch": {
+      "types": "./dist/Switch/index.d.ts",
+      "require": "./dist/Switch.cjs",
+      "import": "./dist/Switch.js"
     }
   },
   "keywords": [],

diff --git a/packages/wow-ui/panda.config.ts b/packages/wow-ui/panda.config.ts
@@ -8,6 +8,7 @@ export default defineConfig({
   watch: true,
   outExtension: "js",
   polyfill: true,
+  jsxFramework: "react",
   include: ["./src/**/*.{js,jsx,ts,tsx}"],
   exclude: [],
   hooks: {

diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js
@@ -10,6 +10,7 @@ import url from "@rollup/plugin-url";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import typescript from "@rollup/plugin-typescript";
 import { fileURLToPath } from "url";
+import preserveDirectives from "rollup-plugin-preserve-directives";
 
 const extensions = [".tsx", ".ts", ".js", ".jsx"];
 
@@ -18,12 +19,17 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 process.env.BABEL_ENV = "production";
 
 export default {
-  input: { Box: "./src/components/Box", Button: "./src/components/Button" },
+  input: {
+    Box: "./src/components/Box",
+    Button: "./src/components/Button",
+    Switch: "./src/components/Switch",
+  },
   output: [
     {
       format: "esm",
       dir: "dist",
       entryFileNames: "[name].js",
+      preserveModules: true,
     },
     {
       format: "cjs",
@@ -65,5 +71,11 @@ export default {
     svgr(),
     terser(),
     json(),
+    preserveDirectives.default(),
   ],
+  onwarn: (warning) => {
+    if (warning.code !== "MODULE_LEVEL_DIRECTIVE") {
+      return;
+    }
+  },
 };
diff --git a/packages/wow-ui/src/components/Switch/Switch.stories.tsx b/packages/wow-ui/src/components/Switch/Switch.stories.tsx
@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+
+import Switch from "@/components/Switch";
+
+const meta = {
+  title: "UI/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "스위치 컴포넌트",
+  },
+  argTypes: {
+    defaultChecked: {
+      description:
+        "defaultChecked는 스위치가 처음에 활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    isDisabled: {
+      description:
+        "isDisabled는 스위치가 비활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    isChecked: {
+      description: "isChecked는 외부에서 제어할 활성 상태를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    text: {
+      description: "스위치 오른쪽에 들어갈 텍스트입니다.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: null },
+      },
+      control: {
+        type: "text",
+      },
+    },
+    onChange: {
+      description: "외부 활성 상태가 변경될 때 호출될 콜백 함수를 나타냅니다.",
+      table: {
+        type: { summary: "() => void" },
+        defaultValue: { summary: null },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    onClick: {
+      description: "스위치 클릭 시 동작할 이벤트입니다.",
+      table: {
+        type: { summary: "() => void" },
+        defaultValue: { summary: null },
+        control: {
+          type: "function",
+        },
+      },
+    },
+    onKeyDown: {
+      description:
+        "스위치가 포커스됐을 때 엔터 키 또는 스페이스 바를 눌렀을 때 동작할 이벤트입니다.",
+      table: {
+        type: { summary: "() => void" },
+        defaultValue: { summary: null },
+        control: {
+          type: "function",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const DefaultChecked: Story = {
+  args: {
+    defaultChecked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
+};
+
+export const WithText: Story = {
+  args: {
+    text: "Text",
+  },
+};
+
+const ControlledSwitch = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleChange = () => {
+    setIsChecked((prev) => !prev);
+  };
+
+  return <Switch isChecked={isChecked} onChange={handleChange} />;
+};
+
+export const ControlledState: Story = {
+  render: () => <ControlledSwitch />,
+};