[Feature] Switch 컴포넌트 구현

.gitignore

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

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

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/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/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Toggle from "@/components/Toggle";
+
+const meta = {
+  title: "UI/Toggle",
+  component: Toggle,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "토글 컴포넌트",
+  },
+  argTypes: {
+    as: {
+      description:
+        "as는 렌더링할 요소 또는 컴포넌트를 나타냅니다. 기본값은 button입니다.",
+      table: {
+        type: { summary: "React.ElementType" },
+        defaultValue: { summary: "button" },
+      },
+    },
+    initialIsActive: {
+      description:
+        "initialIsActive는 토글 버튼이 처음에 눌려 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    isDisabled: {
+      description:
+        "isDisabled는 토글 버튼이 비활성화되어 있는지 여부를 나타냅니다.",
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: "false" },
+      },
+      control: {
+        type: "boolean",
+      },
+    },
+    text: {
+      description: "토글 버튼 오른쪽에 들어갈 텍스트입니다.",
+      table: {
+        type: { summary: "string" },
+      },
+      control: {
+        type: "text",
+      },
+    },
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};
+
+export const InitialActive: Story = {
+  args: {
+    initialIsActive: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
+};
+
+export const WithText: Story = {
+  args: {
+    text: "Text",
+  },
+};

packages/wow-ui/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,133 @@
+import { render, type RenderResult, waitFor } from "@testing-library/react";
+import fireEvent from "@testing-library/user-event";
+
+import Toggle from "@/components/Toggle";
+
+describe("toggle", () => {
+  let rendered: RenderResult;
+
+  beforeEach(() => {
+    rendered = render(<Toggle text="Text" />);
+  });
+
+  it("should render with attributes aria-pressed to be false, data-disabled to be false, aria-label to be toggle-inactivated by default", () => {
+    const toggle = rendered.getByRole("button");
+
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    expect(toggle).toHaveAttribute("data-disabled", "false");
+    expect(toggle).toHaveAttribute("aria-label", "toggle-inactivated");
+  });
+
+  it("should render text", () => {
+    expect(rendered.getByText("Text")).toBeInTheDocument();
+  });
+
+  it("should toggle state when onClick event is fired", async () => {
+    const toggle = rendered.getByRole("button");
+    const onClickHandler = jest.fn();
+    toggle.onclick = onClickHandler;
+
+    fireEvent.click(toggle);
+
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute("aria-pressed", "true");
+      expect(toggle).toHaveAttribute("data-disabled", "false");
+      expect(toggle).toHaveAttribute("aria-label", "toggle-activated");
+    });
+  });
+
+  it("should toggle state when Enter key is pressed", async () => {
+    const toggle = rendered.getByRole("button");
+
+    fireEvent.type(toggle, "{enter}");
+
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute("aria-pressed", "true");
+      expect(toggle).toHaveAttribute("data-disabled", "false");
+      expect(toggle).toHaveAttribute("aria-label", "toggle-activated");
+    });
+  });
+
+  it("should toggle state when Space key is pressed", async () => {
+    const toggle = rendered.getByRole("button");
+
+    fireEvent.type(toggle, "{space}");
+
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute("aria-pressed", "true");
+      expect(toggle).toHaveAttribute("data-disabled", "false");
+      expect(toggle).toHaveAttribute("aria-label", "toggle-activated");
+    });
+  });
+});
+
+describe("when initialIsActive is true", () => {
+  let rendered: RenderResult;
+
+  beforeEach(() => {
+    rendered = render(<Toggle initialIsActive />);
+  });
+
+  it("should render with attributes aria-pressed to be true, data-disabled to be false, aria-label to be toggle-activated", () => {
+    const toggle = rendered.getByRole("button");
+
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    expect(toggle).toHaveAttribute("data-disabled", "false");
+    expect(toggle).toHaveAttribute("aria-label", "toggle-activated");
+  });
+});
+
+describe("disabled", () => {
+  let rendered: RenderResult;
+
+  beforeEach(() => {
+    rendered = render(<Toggle isDisabled />);
+  });
+
+  it("should render with attributes data-disabled to be true", () => {
+    const toggle = rendered.getByRole("button");
+
+    expect(toggle).toHaveAttribute("data-disabled", "true");
+  });
+
+  it("should not fire onClick", () => {
+    const toggle = rendered.getByRole("button");
+    const onClickHandler = jest.fn();
+    toggle.onclick = onClickHandler;
+
+    fireEvent.click(toggle);
+
+    expect(onClickHandler).not.toHaveBeenCalled();
+  });
+
+  it("should not allow focusing", () => {
+    const toggle = rendered.getByRole("button");
+    fireEvent.click(toggle);
+
+    expect(toggle).not.toHaveFocus();
+  });
+
+  it("should not toggle state when fire keyboard event on Enter key", async () => {
+    const toggle = rendered.getByRole("button");
+
+    fireEvent.type(toggle, "{enter}");
+
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute("aria-pressed", "false");
+      expect(toggle).toHaveAttribute("data-disabled", "true");
+      expect(toggle).toHaveAttribute("aria-label", "toggle-inactivated");
+    });
+  });
+
+  it("should not fire keyboard event on Space key", async () => {
+    const toggle = rendered.getByRole("button");
+
+    fireEvent.type(toggle, "{space}");
+
+    await waitFor(() => {
+      expect(toggle).toHaveAttribute("aria-pressed", "false");
+      expect(toggle).toHaveAttribute("data-disabled", "true");
+      expect(toggle).toHaveAttribute("aria-label", "toggle-inactivated");
+    });
+  });
+});