daleui 0.0.0

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,116 @@
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
+import { type IconName, icons } from "../../tokens/iconography";
+export interface IconProps {
+  /** 이름 */
+  name: IconName;
+  /** 색조 */
+  tone?: Tone;
+  /** 크기 */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** 명암비 낮출지 */
+  muted?: boolean;
+}
+
+/**
+ * - `name` 속성으로 어떤 모양의 아이콘을 사용할지 지정할 수 있습니다.
+ * - 아이콘의 기본 크기는 부모 요소에서 설정한 글자 크기의 1.5배이며, `size` 속성을 통해서 크기를 변경할 수 있습니다.
+ * - 아이콘의 기본 색상은 부모 요소에서 설정한 글자 색상과 동일하며, `tone` 속성과 `muted` 속성을 통해서 색상을 변경할 수 있습니다.
+ */
+export const Icon = ({
+  name,
+  size,
+  tone,
+  muted = false,
+  ...rest
+}: IconProps) => {
+  const Tag = icons[name];
+
+  return (
+    <Tag
+      className={css(
+        sizeStyles.raw({ size }),
+        colorStyles.raw({ tone, muted }),
+        css.raw({
+          display: "inline-block",
+        })
+      )}
+      {...rest}
+    />
+  );
+};
+
+const sizeStyles = cva({
+  variants: {
+    size: {
+      xs: {
+        width: "1em",
+        height: "1em",
+      },
+      sm: {
+        width: "1.25em",
+        height: "1.25em",
+      },
+      md: {
+        width: "1.5em",
+        height: "1.5em",
+      },
+      lg: {
+        width: "1.875em",
+        height: "1.875em",
+      },
+      xl: {
+        width: "2.25em",
+        height: "2.25em",
+      },
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+const colorStyles = cva({
+  compoundVariants: [
+    {
+      muted: false,
+      tone: "neutral",
+      css: { color: "text" },
+    },
+    {
+      muted: false,
+      tone: "accent",
+      css: { color: "text.accent" },
+    },
+    {
+      muted: false,
+      tone: "danger",
+      css: { color: "text.danger" },
+    },
+    {
+      muted: false,
+      tone: "warning",
+      css: { color: "text.warning" },
+    },
+    {
+      muted: true,
+      tone: "neutral",
+      css: { color: "text.muted" },
+    },
+    {
+      muted: true,
+      tone: "accent",
+      css: { color: "text.muted.accent" },
+    },
+    {
+      muted: true,
+      tone: "danger",
+      css: { color: "text.muted.danger" },
+    },
+    {
+      muted: true,
+      tone: "warning",
+      css: { color: "text.muted.warning" },
+    },
+  ],
+});

package/src/components/Icon/index.tsx

@@ -0,0 +1 @@
+export { Icon as Text } from "./Icon";

package/src/components/Text/Text.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { vstack } from "../../../styled-system/patterns";
+import { Text } from "./Text";
+
+export default {
+  component: Text,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    children: "본문",
+  },
+} satisfies Meta<typeof Text>;
+
+export const Basic: StoryObj<typeof Text> = {};
+
+export const Tones: StoryObj<typeof Text> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Text {...args} tone="neutral">
+          중립 색조
+        </Text>
+        <Text {...args} tone="accent">
+          강조 색조
+        </Text>
+        <Text {...args} tone="danger">
+          위험 색조
+        </Text>
+        <Text {...args} tone="warning">
+          경고 색조
+        </Text>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    tone: {
+      control: false,
+    },
+  },
+};
+
+export const Contrasts: StoryObj<typeof Text> = {
+  render: (args) => {
+    return (
+      <div className={vstack({ gap: "6" })}>
+        <Text {...args} muted>
+          낮은 명암비
+        </Text>
+        <Text {...args}>높은 명암비</Text>
+      </div>
+    );
+  },
+  argTypes: {
+    children: {
+      control: false,
+    },
+    muted: {
+      control: false,
+    },
+  },
+};

package/src/components/Text/Text.test.tsx

@@ -0,0 +1,54 @@
+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 "./Text.stories";
+
+const { Basic, Tones, Contrasts } = composeStories(stories);
+
+test("renders the heading with the correct text content", () => {
+  render(<Basic>테스트</Basic>);
+
+  expect(screen.getByText("테스트"));
+});
+
+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.getByText("본문")).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.getByText("본문")).toHaveClass(`fs_${size}`);
+});
+
+test("applies the correct color based on the tone", () => {
+  render(<Tones />);
+
+  expect(screen.getByText("중립 색조")).toHaveClass("c_text");
+
+  expect(screen.getByText("강조 색조")).toHaveClass("c_text.accent");
+
+  expect(screen.getByText("위험 색조")).toHaveClass("c_text.danger");
+
+  expect(screen.getByText("경고 색조")).toHaveClass("c_text.warning");
+});
+
+test("applies the correct color for low and high contrast", () => {
+  render(<Contrasts />);
+
+  expect(screen.getByText("낮은 명암비")).toHaveClass("c_text.muted");
+
+  expect(screen.getByText("높은 명암비")).toHaveClass("c_text");
+});

package/src/components/Text/Text.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode, HTMLAttributes } from "react";
+import { css, cva } from "../../../styled-system/css";
+import type { Tone } from "../../tokens/colors";
+import type { FontSize, FontWeight } from "../../tokens/typography";
+
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+  /** 텍스트 */
+  children: ReactNode;
+  /** HTML 태그 */
+  as?: "span" | "div" | "p" | "strong" | "em" | "small";
+  /** 색조 */
+  tone?: Tone;
+  /** 크기 */
+  size?: FontSize;
+  /** 굵기 */
+  weight?: FontWeight;
+  /** 명암비 낮출지 */
+  muted?: boolean;
+}
+
+/**
+ * - `as` 속성으로 어떤 HTML 태그를 사용할지 지정할 수 있습니다.
+ * - `muted` 속성을 주시면 글자색이 옅어집니다. 명암비가 낮아지므로 접근성 측면에서 주의해서 사용하세요.
+ */
+export const Text = ({
+  children,
+  as: Tag = "span",
+  tone = "neutral",
+  size,
+  weight,
+  muted = false,
+  ...rest
+}: TextProps) => {
+  return (
+    <Tag
+      className={css(
+        styles.raw({ tone, muted }),
+        css.raw({
+          fontSize: size,
+          fontWeight: weight,
+        })
+      )}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+const styles = cva({
+  compoundVariants: [
+    {
+      muted: false,
+      tone: "neutral",
+      css: { color: "text" },
+    },
+    {
+      muted: false,
+      tone: "accent",
+      css: { color: "text.accent" },
+    },
+    {
+      muted: false,
+      tone: "danger",
+      css: { color: "text.danger" },
+    },
+    {
+      muted: false,
+      tone: "warning",
+      css: { color: "text.warning" },
+    },
+    {
+      muted: true,
+      tone: "neutral",
+      css: { color: "text.muted" },
+    },
+    {
+      muted: true,
+      tone: "accent",
+      css: { color: "text.muted.accent" },
+    },
+    {
+      muted: true,
+      tone: "danger",
+      css: { color: "text.muted.danger" },
+    },
+    {
+      muted: true,
+      tone: "warning",
+      css: { color: "text.muted.warning" },
+    },
+  ],
+});

package/src/components/Text/index.tsx

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

package/src/index.css

@@ -0,0 +1,2 @@
+@layer reset, base, tokens, recipes, utilities;
+@import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css);

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/src/setupTests.tsx

@@ -0,0 +1,5 @@
+import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/react";
+import { afterEach } from "vitest";
+
+afterEach(cleanup);

package/src/styles/globalCss.ts

@@ -0,0 +1,43 @@
+import { defineGlobalStyles } from "@pandacss/dev";
+
+export const globalCss = defineGlobalStyles({
+  ":root": {
+    "--global-font-body": "var(--fonts-sans)",
+    backgroundColor: "var(--colors-base)",
+  },
+  h1: {
+    fontSize: "var(--font-sizes-4xl)", // 2.25rem
+    lineHeight: "var(--line-heights-loose)", // 2
+    fontWeight: "var(--font-weights-bold)", // 700
+  },
+  h2: {
+    fontSize: "var(--font-sizes-3xl)", // 1.875rem
+    lineHeight: "var(--line-heights-loose)", // 2
+    fontWeight: "var(--font-weights-bold)", // 500
+  },
+  h3: {
+    fontSize: "var(--font-sizes-2xl)", // 1.5rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h4: {
+    fontSize: "var(--font-sizes-xl)", // 1.25rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h5: {
+    fontSize: "var(--font-sizes-lg)", // 1.125rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  h6: {
+    fontSize: "var(--font-sizes-md)", // 1rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-medium)", // 500
+  },
+  p: {
+    fontSize: "var(--font-sizes-md)", // 1rem
+    lineHeight: "var(--line-heights-relaxed)", // 1.625
+    fontWeight: "var(--font-weights-normal)", // 400
+  },
+});

package/src/tokens/colors.mdx

@@ -0,0 +1,100 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import { colors, semanticColors } from "./colors.ts";
+
+# Colors
+
+달레 UI의 근간이 되는 색상 팔레트입니다.
+
+<ColorPalette>
+  <ColorItem
+    title="초록"
+    subtitle="colors.teal"
+    colors={Object.fromEntries(
+      Object.entries(colors.teal).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="초록 (dark)"
+    subtitle="colors.tealDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.tealDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="보라"
+    subtitle="colors.violet"
+    colors={Object.fromEntries(
+      Object.entries(colors.violet).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="보라 (dark)"
+    subtitle="colors.violetDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.violetDark).map(([name, { value }]) => [
+        name,
+        value,
+      ])
+    )}
+  />
+  <ColorItem
+    title="빨강"
+    subtitle="colors.red"
+    colors={Object.fromEntries(
+      Object.entries(colors.red).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="빨강 (dark)"
+    subtitle="colors.redDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.redDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="노랑"
+    subtitle="colors.yellow"
+    colors={Object.fromEntries(
+      Object.entries(colors.yellow).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="노랑 (dark)"
+    subtitle="colors.yellowDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.yellowDark).map(([name, { value }]) => [
+        name,
+        value,
+      ])
+    )}
+  />
+  <ColorItem
+    title="회색"
+    subtitle="colors.gray"
+    colors={Object.fromEntries(
+      Object.entries(colors.gray).map(([name, { value }]) => [name, value])
+    )}
+  />
+  <ColorItem
+    title="회색 (dark)"
+    subtitle="colors.grayDark"
+    colors={Object.fromEntries(
+      Object.entries(colors.grayDark).map(([name, { value }]) => [name, value])
+    )}
+  />
+</ColorPalette>
+
+용도에 따라서 각 색상은 12가지 스케일로 분리됩니다.
+
+- Scale 1: 페이지 배경
+- Scale 2: 예비
+- Scale 3: 컴포넌트 배경
+- Scale 4: 컴포넌트 배경 (hover)
+- Scale 5: 컴포넌트 배경 (active)
+- Scale 6: 예비
+- Scale 7: 경계
+- Scale 8: 경계 (hover)
+- Scale 9: 솔리드 배경
+- Scale 10: 솔리드 배경 (hover)
+- Scale 11: 글자 (low contrast)
+- Scale 12: 글자 (high contrast)