daleui 0.0.2 → 0.0.5

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

@@ -1,129 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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",
-        },
-      },
-    },
-  ],
-});

package/src/components/Heading/Heading.stories.tsx

@@ -1,72 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { vstack } from "../../../styled-system/patterns";
-import { Heading } from "./Heading";
-
-export default {
-  component: Heading,
-  parameters: {
-    layout: "centered",
-  },
-  args: {
-    children: "제목",
-    level: 1,
-  },
-} satisfies Meta<typeof Heading>;
-
-export const Basic: StoryObj<typeof Heading> = {};
-
-export const Levels: StoryObj<typeof Heading> = {
-  render: (args) => {
-    return (
-      <div className={vstack({ gap: "6" })}>
-        <Heading {...args} level={1}>
-          1 단계
-        </Heading>
-        <Heading {...args} level={2}>
-          2 단계
-        </Heading>
-        <Heading {...args} level={3}>
-          3 단계
-        </Heading>
-        <Heading {...args} level={4}>
-          4 단계
-        </Heading>
-        <Heading {...args} level={5}>
-          5 단계
-        </Heading>
-        <Heading {...args} level={6}>
-          6 단계
-        </Heading>
-      </div>
-    );
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-    level: {
-      control: false,
-    },
-  },
-};
-
-export const Contrasts: StoryObj<typeof Heading> = {
-  render: (args) => {
-    return (
-      <div className={vstack({ gap: "6" })}>
-        <Heading {...args} muted>
-          낮은 명암비
-        </Heading>
-        <Heading {...args}>높은 명암비</Heading>
-      </div>
-    );
-  },
-  argTypes: {
-    children: {
-      control: false,
-    },
-    muted: {
-      control: false,
-    },
-  },
-};

package/src/components/Heading/Heading.test.tsx

@@ -1,55 +0,0 @@
-import { faker } from "@faker-js/faker";
-import { composeStories } from "@storybook/react";
-import { render, screen } from "@testing-library/react";
-import { expect, test } from "vitest";
-import { fontSizes, fontWeights } from "../../tokens/typography";
-import * as stories from "./Heading.stories";
-
-const { Basic, Contrasts } = composeStories(stories);
-
-test("renders the heading with the correct text content", () => {
-  render(<Basic>제목</Basic>);
-
-  expect(screen.getByRole("heading")).toHaveTextContent("제목");
-});
-
-test.each([1, 2, 3, 4, 5, 6] as const)(
-  "renders the correct HTML heading element for level %i",
-  (level) => {
-    render(<Basic level={level} />);
-
-    expect(screen.getByRole("heading", { level })).toBeInTheDocument();
-  }
-);
-
-test("applies the correct font weight class based on the weight prop", () => {
-  const weight = faker.helpers.arrayElement(
-    Object.keys(fontWeights)
-  ) as keyof typeof fontWeights;
-
-  render(<Basic weight={weight} />);
-
-  expect(screen.getByRole("heading")).toHaveClass(`fw_${weight}`);
-});
-
-test("applies the correct font size class based on the size prop", () => {
-  const size = faker.helpers.arrayElement(
-    Object.keys(fontSizes)
-  ) as keyof typeof fontSizes;
-
-  render(<Basic size={size} />);
-
-  expect(screen.getByRole("heading")).toHaveClass(`fs_${size}`);
-});
-
-test("applies the correct color for low and high contrast", () => {
-  render(<Contrasts />);
-
-  expect(screen.getByRole("heading", { name: "낮은 명암비" })).toHaveClass(
-    "c_text.muted"
-  );
-
-  expect(screen.getByRole("heading", { name: "높은 명암비" })).toHaveClass(
-    "c_text"
-  );
-});

package/src/components/Heading/Heading.tsx

@@ -1,73 +0,0 @@
-import type { ReactNode, HTMLAttributes } from "react";
-import { css, cva } from "../../../styled-system/css";
-import type { FontSize, FontWeight } from "../../tokens/typography";
-
-type Level = 1 | 2 | 3 | 4 | 5 | 6;
-
-export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
-  /** 텍스트 */
-  children: ReactNode;
-  /** 단계 */
-  level: Level;
-  /** 크기 */
-  size?: FontSize;
-  /** 굵기 */
-  weight?: FontWeight;
-  /** 명암비 낮출지 */
-  muted?: boolean;
-}
-
-/**
- * - `level` 속성을 통해서 `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` 요소 중 하나를 선택할 수 있습니다.
- * - `level` 속성은 단계 별 기본 텍스트 스타일을 제공합니다.
- * - `size` 속성과 `weight` 속성을 통해서 기본 스타일을 변경할 수 있습니다.
- * - `muted` 속성을 주시면 글자색이 옅어집니다. 명암비가 낮아지므로 접근성 측면에서 주의해서 사용하세요.
- */
-export const Heading = ({
-  children,
-  level,
-  size,
-  weight,
-  muted = false,
-  ...rest
-}: HeadingProps) => {
-  if (!level) {
-    throw new Error(
-      "The level prop is required and you can cause accessibility issues."
-    );
-  }
-
-  const Tag = `h${level}` as const;
-
-  return (
-    <Tag
-      className={css(
-        styles.raw({ level, muted }),
-        css.raw({
-          fontSize: size,
-          fontWeight: weight,
-        })
-      )}
-      {...rest}
-    >
-      {children}
-    </Tag>
-  );
-};
-
-const styles = cva({
-  variants: {
-    level: {
-      1: { textStyle: "4xl" },
-      2: { textStyle: "3xl" },
-      3: { textStyle: "2xl" },
-      4: { textStyle: "xl" },
-      5: { textStyle: "lg" },
-      6: { textStyle: "md" },
-    },
-    muted: {
-      true: { color: "text.muted" },
-      false: { color: "text" },
-    },
-  },
-});

package/src/components/Heading/index.tsx

@@ -1 +0,0 @@
-export { Heading } from "./Heading";