[Feature] Switch 컴포넌트 구현

.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 }}"

.gitignore

@@ -39,4 +39,7 @@ yarn-error.log*
 
 ## Panda
 styled-system-studio
-*storybook.log
+
+*storybook.log
+
+.eslintcache

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

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",

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",
   },
 };
 

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": [],

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: {

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

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