daleui 0.0.2 → 0.0.5

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

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

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

package/src/components/Icon/Icon.tsx

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

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

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

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

@@ -1,54 +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 "./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

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

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

package/src/index.css

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

package/src/main.tsx

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

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

package/src/styles/globalCss.ts

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

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