daleui 0.0.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,245 @@
+import React, { type HTMLAttributes } from "react";
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
+
+type ButtonVariant = "solid" | "outline";
+type ButtonSize = "sm" | "md" | "lg";
+
+export interface ButtonProps
+  extends Omit<HTMLAttributes<HTMLElement>, "style"> {
+  /** 텍스트 */
+  children: React.ReactNode;
+  /** 타입 */
+  type?: "button" | "submit";
+  /** 클릭 시 실행함수 */
+  onClick?: () => void;
+  /** 종류 */
+  variant: ButtonVariant;
+  /** 색조 */
+  tone?: Tone;
+  /** 버튼의 크기 */
+  size?: ButtonSize;
+  /** 버튼 비활성화 여부 */
+  disabled?: boolean;
+}
+
+/**
+ * - `variant` 속성으로 버튼의 스타일 종류를 지정할 수 있습니다.
+ * - `tone` 속성으로 버튼의 색상 강조를 지정할 수 있습니다.
+ * - `size` 속성으로 버튼의 크기를 지정할 수 있습니다.
+ * - `type` 속성으로 버튼의 타입을 지정할 수 있습니다.
+ * - `disabled` 속성을 사용하여 버튼을 비활성화할 수 있습니다.
+ */
+export const Button = ({
+  children,
+  type = "button",
+  onClick,
+  variant = "solid",
+  tone = "neutral",
+  size = "md",
+  disabled,
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      className={css(styles.raw({ tone, variant, size }), baseStyles)}
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      {...rest}
+    >
+      {children}
+    </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",
+  },
+  variants: {
+    size: {
+      sm: {
+        padding: "0.5rem 1.5rem",
+        fontSize: "sm",
+      },
+      md: {
+        padding: "0.7rem 2rem",
+        fontSize: "md",
+      },
+      lg: {
+        padding: "1rem 2.5rem",
+        fontSize: "lg",
+      },
+    },
+    variant: {
+      solid: {},
+      outline: {},
+    },
+    tone: {
+      neutral: {},
+      accent: {},
+      danger: {},
+      warning: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variant: "solid",
+      tone: "neutral",
+      css: {
+        background: "bg",
+        color: "text",
+        "&:active, &:hover": {
+          background: "bg.hover",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "accent",
+      css: {
+        background: "bg.accent",
+        color: "text.accent",
+        "&:active, &:hover": {
+          background: "bg.hover.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "danger",
+      css: {
+        background: "bg.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "solid",
+      tone: "warning",
+      css: {
+        background: "bg.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "neutral",
+      css: {
+        border: "3px solid",
+        borderColor: "border",
+        color: "text",
+        "&:active, &:hover": {
+          background: "bg.hover",
+          color: "text.muted",
+        },
+        "&:focus": {
+          outlineColor: "border.neutral",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "accent",
+      css: {
+        border: "3px solid",
+        borderColor: "border.accent",
+        color: "text.accent",
+        "&:active, &:hover": {
+          background: "bg.hover.accent",
+          color: "text.muted.accent",
+        },
+        "&:focus": {
+          outlineColor: "border.accent",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "danger",
+      css: {
+        border: "3px solid",
+        borderColor: "border.danger",
+        color: "text.danger",
+        "&:active, &:hover": {
+          background: "bg.hover.danger",
+          color: "text.muted.danger",
+        },
+        "&:focus": {
+          outlineColor: "border.danger",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+    {
+      variant: "outline",
+      tone: "warning",
+      css: {
+        border: "3px solid",
+        borderColor: "border.warning",
+        color: "text.warning",
+        "&:active, &:hover": {
+          background: "bg.hover.warning",
+          color: "text.muted.warning",
+        },
+        "&:focus": {
+          outlineColor: "border.warning",
+          outline: "3px solid",
+          outlineOffset: "2px",
+        },
+      },
+    },
+  ],
+});

package/src/components/Button/index.tsx

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

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

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

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

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

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

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { vstack } from "../../../styled-system/patterns";
+import { Heading } from "../Heading/Heading";
+import { Text } from "../Text/Text";
+import { Icon } from "./Icon";
+
+export default {
+  component: Icon,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    name: "user",
+  },
+} satisfies Meta<typeof Icon>;
+
+export const Basic: StoryObj<typeof Icon> = {
+  args: {
+    tone: "accent",
+    muted: true,
+    size: "xl",
+  },
+};
+
+export const Sizes: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Icon {...args} size="xs" />
+        <Icon {...args} size="sm" />
+        <Icon {...args} size="md" />
+        <Icon {...args} size="lg" />
+        <Icon {...args} size="xl" />
+      </div>
+    );
+  },
+  argTypes: {
+    size: {
+      control: false,
+    },
+  },
+  args: {
+    tone: "accent",
+    muted: true,
+  },
+};
+
+export const Tones: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Icon {...args} tone="neutral" />
+        <Icon {...args} tone="accent" />
+        <Icon {...args} tone="danger" />
+        <Icon {...args} tone="warning" />
+      </div>
+    );
+  },
+  argTypes: {
+    tone: {
+      control: false,
+    },
+  },
+  args: {
+    muted: true,
+  },
+};
+
+export const Contrasts: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Text {...args} muted>
+          낮은 <Icon name="moon" /> 명암비
+        </Text>
+        <Text {...args}>
+          높은 <Icon name="sun" /> 명암비
+        </Text>
+      </div>
+    );
+  },
+  argTypes: {
+    name: {
+      control: false,
+    },
+    muted: {
+      control: false,
+    },
+  },
+};
+
+export const WithHeading: StoryObj<typeof Icon> = {
+  render: (args) => {
+    return (
+      <Heading level={2}>
+        <Icon {...args} name="user" />
+        프로필
+      </Heading>
+    );
+  },
+  argTypes: {
+    name: {
+      control: false,
+    },
+  },
+};

package/src/components/Icon/Icon.test.tsx

@@ -0,0 +1,44 @@
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+import { expect, test } from "vitest";
+import * as stories from "./Icon.stories";
+
+const { Basic } = composeStories(stories);
+
+test("renders an svg element", () => {
+  const { container } = render(<Basic />);
+
+  expect(container.querySelector("svg")).toBeInTheDocument();
+});
+
+test.each([
+  ["xs", "w_1em h_1em"],
+  ["sm", "w_1.25em h_1.25em"],
+  ["md", "w_1.5em h_1.5em"],
+  ["lg", "w_1.875em h_1.875em"],
+  ["xl", "w_2.25em h_2.25em"],
+] as const)('applies the correct class for size="%s"', (size, className) => {
+  const { container } = render(<Basic size={size} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});
+
+test.each([
+  ["neutral", "c_text"],
+  ["accent", "c_text.accent"],
+  ["danger", "c_text.danger"],
+  ["warning", "c_text.warning"],
+] as const)('applies the correct class for tone="%s"', (tone, className) => {
+  const { container } = render(<Basic tone={tone} muted={false} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});
+
+test.each([
+  [false, "c_text"],
+  [true, "c_text.muted"],
+] as const)("applies the correct class for muted={%s}", (muted, className) => {
+  const { container } = render(<Basic tone="neutral" muted={muted} />);
+
+  expect(container.querySelector("svg")).toHaveClass(className);
+});