daleui 0.0.0 → 0.0.2

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "daleui",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "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,6 +25,7 @@
     "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",

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: "4" })}>
+        <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: "4" })}>
+        <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: "4" })}>
+        <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: "4" })}>
+        <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: "4" })}>
+        <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");
+});

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,190 @@
+import React, { type ButtonHTMLAttributes } from "react";
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+export interface CheckboxProps
+  extends Omit<
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | "onChange" | "checked" | "value" | "required"
+  > {
+  /** 라벨 */
+  label: React.ReactNode;
+  /** 체크박스의 값 */
+  value?: string;
+  /** 색조 */
+  tone?: Tone;
+  /** 체크박스 비활성화 여부 */
+  disabled?: boolean;
+  /** 체크박스 선택 여부 */
+  checked?: boolean;
+  /** 필수 입력 여부 */
+  required?: boolean;
+  /** 변경 이벤트 핸들러 */
+  onChange?: (checked: boolean, value?: string) => void;
+}
+
+/**
+ * - `tone` 속성으로 체크박스의 색상 강조를 지정할 수 있습니다.
+ * - `disabled` 속성을 사용하여 체크박스를 비활성화할 수 있습니다.
+ * - `value` 속성을 통해 체크박스에 값을 지정할 수 있습니다.
+ * - `required` 속성을 사용하여 필수 입력 항목으로 지정할 수 있습니다.
+ */
+export const Checkbox = ({
+  label,
+  value,
+  tone = "neutral",
+  disabled,
+  checked,
+  required,
+  onChange,
+  ...rest
+}: CheckboxProps) => {
+  return (
+    <label
+      className={css({
+        display: "flex",
+        alignItems: "center",
+        gap: "0.5rem",
+        cursor: "pointer",
+        color: "text",
+      })}
+    >
+      <CheckboxPrimitive.Root
+        checked={checked}
+        required={required}
+        onCheckedChange={(checked) => {
+          onChange?.(checked === true, value);
+        }}
+        disabled={disabled}
+        className={styles({ tone })}
+        {...rest}
+      >
+        <CheckboxPrimitive.Indicator
+          className={css({
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          })}
+        >
+          <Check size={16} />
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+      {label}
+      {required && <span className={css({ color: "text.danger" })}>*</span>}
+    </label>
+  );
+};
+
+const styles = cva({
+  base: {
+    appearance: "none",
+    margin: "0",
+    backgroundColor: "transparent",
+    border: "3px solid",
+    borderColor: "border",
+    borderRadius: "4px",
+    width: "1.5rem",
+    height: "1.5rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    transition: "0.2s",
+    outline: "none",
+    "&:hover": {
+      backgroundColor: "bg.hover",
+    },
+    "&:focus": {
+      outline: "3px solid",
+      outlineOffset: "2px",
+    },
+    "&:disabled": {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      "&:hover": {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+  variants: {
+    tone: {
+      neutral: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg",
+          borderColor: "border",
+          color: "text",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg",
+          borderColor: "border",
+        },
+        "&:focus": {
+          outlineColor: "border",
+        },
+      },
+      accent: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.accent",
+          borderColor: "border.accent",
+          color: "text.accent",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.accent",
+          borderColor: "border.accent",
+        },
+      },
+      danger: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.danger",
+          borderColor: "border.danger",
+          color: "text.danger",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.danger",
+          borderColor: "border.danger",
+        },
+      },
+      warning: {
+        "&[data-state='checked']": {
+          backgroundColor: "bg.warning",
+          borderColor: "border.warning",
+          color: "text.warning",
+        },
+        "&:disabled[data-state='checked']": {
+          backgroundColor: "bg.warning",
+          borderColor: "border.warning",
+        },
+      },
+    },
+  },
+  compoundVariants: [
+    {
+      tone: "accent",
+      css: {
+        "&:focus": {
+          outlineColor: "border.accent",
+        },
+      },
+    },
+    {
+      tone: "danger",
+      css: {
+        "&:focus": {
+          outlineColor: "border.danger",
+        },
+      },
+    },
+    {
+      tone: "warning",
+      css: {
+        "&:focus": {
+          outlineColor: "border.warning",
+        },
+      },
+    },
+  ],
+});