daleui 0.0.0 → 0.0.3

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "daleui",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "type": "module",
+  "repository": "github:DaleStudy/daleui",
+  "license": "MIT",
+  "homepage": "https://www.daleui.com",
+  "keywords": [
+    "design-system",
+    "ui-components",
+    "components-library",
+    "react",
+    "storybook"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
@@ -15,42 +25,43 @@
     "prepare": "panda codegen"
   },
   "dependencies": {
+    "@radix-ui/react-checkbox": "^1.1.4",
     "axe-playwright": "^2.0.3",
     "chromatic": "^11.25.1",
-    "lucide-react": "^0.474.0",
+    "lucide-react": "^0.486.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
-    "@eslint/js": "^9.19.0",
+    "@chromatic-com/storybook": "^3.2.6",
+    "@eslint/js": "^9.23.0",
     "@faker-js/faker": "^9.4.0",
-    "@pandacss/dev": "^0.51.1",
-    "@storybook/addon-a11y": "^8.5.2",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-links": "^8.5.2",
-    "@storybook/addon-themes": "^8.5.2",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
-    "@storybook/test-runner": "^0.21.0",
+    "@pandacss/dev": "^0.53.3",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/test-runner": "^0.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.19.0",
+    "eslint": "^9.23.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.18",
     "eslint-plugin-storybook": "^0.11.2",
-    "globals": "^15.14.0",
-    "happy-dom": "^16.7.3",
-    "storybook": "^8.5.2",
+    "globals": "^16.0.0",
+    "happy-dom": "^17.4.4",
+    "storybook": "^8.6.11",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.22.0",
+    "typescript-eslint": "^8.28.0",
     "vite": "^6.0.11",
     "vite-plugin-svgr": "^4.3.0",
     "vitest": "^3.0.4"

package/panda.config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "@pandacss/dev";
 import { globalCss } from "./src/styles/globalCss";
 import { colors, semanticColors } from "./src/tokens/colors";
+import { spacing, semanticSpacing } from "./src/tokens/spacing";
 import {
   textStyles,
   fonts,
@@ -49,9 +50,11 @@ export default defineConfig({
         fontSizes,
         letterSpacings,
         lineHeights,
+        spacing,
       },
       semanticTokens: {
         colors: semanticColors,
+        spacing: semanticSpacing,
       },
     },
   },

package/src/components/Button/Button.stories.tsx

@@ -18,7 +18,7 @@ export const Basic: StoryObj<typeof Button> = {};
 export const Variants: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} variant="solid">
           솔리드 버튼
         </Button>
@@ -41,7 +41,7 @@ export const Variants: StoryObj<typeof Button> = {
 export const Tones: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} tone="neutral">
           중립 색조
         </Button>
@@ -70,7 +70,7 @@ export const Tones: StoryObj<typeof Button> = {
 export const Sizes: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} size="sm">
           작은 버튼
         </Button>
@@ -96,7 +96,7 @@ export const Sizes: StoryObj<typeof Button> = {
 export const Disabled: StoryObj<typeof Button> = {
   render: (args) => {
     return (
-      <div className={vstack({ gap: "4" })}>
+      <div className={vstack({ gap: "gap.sm" })}>
         <Button {...args} disabled>
           비활성화 버튼
         </Button>

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import React, { type HTMLAttributes } from "react";
-import { css, cva } from "../../../styled-system/css";
+import { cva } from "../../../styled-system/css";
 import type { Tone } from "../../tokens/colors";
 
 type ButtonVariant = "solid" | "outline";
@@ -42,7 +42,7 @@ export const Button = ({
 }: ButtonProps) => {
   return (
     <button
-      className={css(styles.raw({ tone, variant, size }), baseStyles)}
+      className={styles({ tone, variant, size })}
       type={type}
       onClick={onClick}
       disabled={disabled}
@@ -53,43 +53,42 @@ export const Button = ({
   );
 };
 
-const baseStyles = {
-  appearance: "none",
-  margin: "0",
-  fontWeight: 500,
-  textAlign: "center",
-  textDecoration: "none",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  width: ["auto", "100%"],
-  borderRadius: "10px",
-  cursor: "pointer",
-  transition: "0.2s",
-  lineHeight: "1",
-  outline: "0",
-  "&:disabled": {
-    opacity: 0.5,
-    cursor: "not-allowed",
-  },
-};
-
 const styles = cva({
   base: {
-    padding: "0.7rem 3rem",
+    appearance: "none",
+    margin: "0",
+    fontWeight: 500,
+    textAlign: "center",
+    textDecoration: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: ["auto", "100%"],
+    borderRadius: "10px",
+    cursor: "pointer",
+    transition: "0.2s",
+    lineHeight: "1",
+    outline: "0",
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
   },
   variants: {
     size: {
       sm: {
-        padding: "0.5rem 1.5rem",
+        px: "px.sm",
+        py: "py.sm",
         fontSize: "sm",
       },
       md: {
-        padding: "0.7rem 2rem",
+        px: "px.md",
+        py: "py.md",
         fontSize: "md",
       },
       lg: {
-        padding: "1rem 2.5rem",
+        px: "px.lg",
+        py: "py.lg",
         fontSize: "lg",
       },
     },

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+import { vstack } from "../../../styled-system/patterns";
+
+export default {
+  component: Checkbox,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    id: "checkbox",
+    label: "기본 체크박스",
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export const Basic: StoryObj<typeof Checkbox> = {};
+
+export const Tones: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "gap.sm" })}>
+        <Checkbox {...args} id="neutral" label="중립 색조" tone="neutral" />
+        <Checkbox {...args} id="accent" label="강조 색조" tone="accent" />
+        <Checkbox {...args} id="danger" label="위험 색조" tone="danger" />
+        <Checkbox {...args} id="warning" label="경고 색조" tone="warning" />
+      </div>
+    );
+  },
+  argTypes: {
+    label: {
+      control: false,
+    },
+    tone: {
+      control: false,
+    },
+  },
+};
+
+export const States: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "gap.sm" })}>
+        <Checkbox {...args} id="checked" label="체크된 상태" checked={true} />
+        <Checkbox
+          {...args}
+          id="unchecked"
+          label="체크되지 않은 상태"
+          checked={false}
+        />
+      </div>
+    );
+  },
+  argTypes: {
+    label: {
+      control: false,
+    },
+    checked: {
+      control: false,
+    },
+  },
+};
+
+export const Disabled: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "gap.sm" })}>
+        <Checkbox
+          {...args}
+          id="disabled-checked"
+          label="비활성화 & 체크된 상태"
+          disabled
+          checked
+        />
+        <Checkbox
+          {...args}
+          id="disabled-unchecked"
+          label="비활성화 & 체크되지 않은 상태"
+          disabled
+        />
+        <Checkbox {...args} id="enabled" label="활성화 상태" />
+      </div>
+    );
+  },
+  argTypes: {
+    label: {
+      control: false,
+    },
+    disabled: {
+      control: false,
+    },
+  },
+};
+
+export const Required: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "gap.sm" })}>
+        <Checkbox {...args} id="required" label="필수 체크박스" required />
+        <Checkbox {...args} id="optional" label="선택 체크박스" />
+      </div>
+    );
+  },
+  argTypes: {
+    label: {
+      control: false,
+    },
+    required: {
+      control: false,
+    },
+  },
+};
+
+export const WithValue: StoryObj<typeof Checkbox> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "gap.sm" })}>
+        <Checkbox
+          {...args}
+          id="value-example"
+          label="값이 있는 체크박스"
+          value="checkbox-value"
+          onChange={(checked, value) =>
+            console.log(`체크박스 상태: ${checked}, 값: ${value}`)
+          }
+        />
+      </div>
+    );
+  },
+};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,169 @@
+import { composeStories } from "@storybook/react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import * as stories from "./Checkbox.stories";
+import { Checkbox } from "./Checkbox";
+
+const { Basic, Tones, States, Disabled, Required } = composeStories(stories);
+
+test("renders the checkbox with the correct label", () => {
+  render(<Basic />);
+  expect(screen.getByText("기본 체크박스")).toBeInTheDocument();
+});
+
+test("applies the correct tone styles when checked", () => {
+  render(<Tones />);
+
+  const neutralCheckbox = screen.getByLabelText("중립 색조");
+  const accentCheckbox = screen.getByLabelText("강조 색조");
+  const dangerCheckbox = screen.getByLabelText("위험 색조");
+  const warningCheckbox = screen.getByLabelText("경고 색조");
+
+  // Simulate checking each checkbox
+  fireEvent.click(neutralCheckbox);
+  fireEvent.click(accentCheckbox);
+  fireEvent.click(dangerCheckbox);
+  fireEvent.click(warningCheckbox);
+
+  // Check for data-state attribute which indicates checked state
+  expect(neutralCheckbox).toHaveAttribute("data-state", "checked");
+  expect(accentCheckbox).toHaveAttribute("data-state", "checked");
+  expect(dangerCheckbox).toHaveAttribute("data-state", "checked");
+  expect(warningCheckbox).toHaveAttribute("data-state", "checked");
+
+  // Check for correct background colors based on tone
+  expect(neutralCheckbox).toHaveClass("[&[data-state='checked']]:bg-c_bg");
+  expect(accentCheckbox).toHaveClass(
+    "[&[data-state='checked']]:bg-c_bg.accent"
+  );
+  expect(dangerCheckbox).toHaveClass(
+    "[&[data-state='checked']]:bg-c_bg.danger"
+  );
+  expect(warningCheckbox).toHaveClass(
+    "[&[data-state='checked']]:bg-c_bg.warning"
+  );
+});
+
+test("renders checked and unchecked states correctly", () => {
+  render(<States />);
+
+  const checkedCheckbox = screen.getByLabelText("체크된 상태");
+  const uncheckedCheckbox = screen.getByLabelText("체크되지 않은 상태");
+
+  expect(checkedCheckbox).toHaveAttribute("data-state", "checked");
+  expect(uncheckedCheckbox).toHaveAttribute("data-state", "unchecked");
+});
+
+test("applies the correct disabled styles", () => {
+  render(<Disabled />);
+
+  const disabledCheckedCheckbox =
+    screen.getByLabelText("비활성화 & 체크된 상태");
+  const disabledUncheckedCheckbox =
+    screen.getByLabelText("비활성화 & 체크되지 않은 상태");
+  const enabledCheckbox = screen.getByLabelText("활성화 상태");
+
+  expect(disabledCheckedCheckbox).toBeDisabled();
+  expect(disabledUncheckedCheckbox).toBeDisabled();
+  expect(enabledCheckbox).not.toBeDisabled();
+
+  // Check for opacity class that indicates disabled state
+  expect(disabledCheckedCheckbox).toHaveClass("[&:disabled]:op_0.5");
+  expect(disabledUncheckedCheckbox).toHaveClass("[&:disabled]:op_0.5");
+});
+
+test("displays required indicator correctly", () => {
+  render(<Required />);
+
+  const requiredLabel = screen.getByText("필수 체크박스").parentElement;
+  const optionalLabel = screen.getByText("선택 체크박스");
+
+  // Check for required indicator (asterisk)
+  expect(requiredLabel).toContainHTML("*");
+  expect(optionalLabel).not.toContainHTML("*");
+});
+
+test("calls onChange handler when checkbox is clicked", () => {
+  const handleChange = vi.fn();
+
+  render(
+    <Checkbox
+      id="test-checkbox"
+      label="테스트 체크박스"
+      onChange={handleChange}
+    />
+  );
+
+  const checkbox = screen.getByLabelText("테스트 체크박스");
+
+  // Initially unchecked
+  expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+  // Click to check
+  fireEvent.click(checkbox);
+  expect(handleChange).toHaveBeenCalledTimes(1);
+  expect(handleChange).toHaveBeenCalledWith(true, undefined);
+
+  // Click again to uncheck
+  fireEvent.click(checkbox);
+  expect(handleChange).toHaveBeenCalledTimes(2);
+  expect(handleChange).toHaveBeenCalledWith(false, undefined);
+});
+
+test("passes value to onChange handler when provided", () => {
+  const handleChange = vi.fn();
+
+  render(
+    <Checkbox
+      id="value-checkbox"
+      label="값이 있는 체크박스"
+      value="test-value"
+      onChange={handleChange}
+    />
+  );
+
+  const checkbox = screen.getByLabelText("값이 있는 체크박스");
+
+  // Click to check
+  fireEvent.click(checkbox);
+  expect(handleChange).toHaveBeenCalledWith(true, "test-value");
+});
+
+test("correctly handles required attribute", () => {
+  render(
+    <Checkbox id="required-checkbox" label="필수 체크박스" required={true} />
+  );
+
+  // 정규 표현식을 사용하여 라벨 찾기 (별표가 있어도 일치)
+  const checkbox = screen.getByRole("checkbox", { name: /필수 체크박스/ });
+
+  // aria-required 속성 확인
+  expect(checkbox).toHaveAttribute("aria-required", "true");
+});
+
+test("toggles checked state when clicked", () => {
+  render(<Basic />);
+
+  const checkbox = screen.getByLabelText("기본 체크박스");
+
+  // Initially unchecked
+  expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+  // Click to check
+  fireEvent.click(checkbox);
+  expect(checkbox).toHaveAttribute("data-state", "checked");
+
+  // Click again to uncheck
+  fireEvent.click(checkbox);
+  expect(checkbox).toHaveAttribute("data-state", "unchecked");
+});
+
+test("adds asterisk to label when required is true", () => {
+  render(
+    <Checkbox id="required-checkbox" label="필수 체크박스" required={true} />
+  );
+
+  const requiredIndicator = screen.getByText("*");
+  expect(requiredIndicator).toBeInTheDocument();
+  expect(requiredIndicator).toHaveClass("c_text.danger");
+});