@mzc-fe/design-system 0.0.1-rc.0

package/src/components/tooltip.stories.tsx

@@ -0,0 +1,111 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover me</Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>This is a tooltip</p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          <p>Tooltip on top</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </TooltipTrigger>
+        <TooltipContent side="right">
+          <p>Tooltip on right</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>Tooltip on bottom</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </TooltipTrigger>
+        <TooltipContent side="left">
+          <p>Tooltip on left</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};
+
+export const LongContent: Story = {
+  render: () => (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="outline">Hover for details</Button>
+      </TooltipTrigger>
+      <TooltipContent className="max-w-xs">
+        <p>
+          This is a longer tooltip that contains more information and
+          demonstrates how the tooltip handles extended text content.
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="rounded-full border p-2">
+            <span className="sr-only">Info</span>
+            ℹ️
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Click for more information</p>
+        </TooltipContent>
+      </Tooltip>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button className="rounded-full border p-2">
+            <span className="sr-only">Help</span>❓
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Get help</p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  ),
+};

package/src/components/tooltip.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/foundations/README.md

@@ -0,0 +1,141 @@
+# ~~Foundations~~ (deprecated)
+
+~~이 폴더는 MZC 디자인 시스템의 기본 토큰들을 정의하는 CSS 파일들을 포함합니다. `@theme inline`과 `@utility` 지시어를 활용하여 Tailwind CSS와 완전히 통합된 디자인 시스템을 제공합니다.~~
+
+토큰을 직접 정의하는 것에서 shadcn의 토큰(tailwind 토큰)을 재사용하는 것으로 바뀌었고, 아래 내용들은 참고용으로 남겨둡니다.
+
+## 파일 구조
+
+### 🎨 color.css
+
+컬러 토큰과 테마 변수를 정의합니다.
+
+- **토큰 매핑**: `@theme inline`을 통해 CSS 변수를 Tailwind 클래스에 매핑
+- **자동 클래스 생성**: `--background-color-*`, `--text-color-*` 패턴으로 `bg-*`, `text-*` 클래스 자동 생성
+- **테마 지원**: `:root`(라이트 모드)와 `.dark`(다크 모드)에서 각각 색상 정의
+
+```css
+/* 사용 예시 */
+<p className="bg-main text-main ...">Lorem ipsum</p>
+```
+
+### ✍️ typography.css
+
+타이포그래피 관련 유틸리티 클래스를 정의합니다.
+
+- **유틸리티 클래스**: `@utility`를 사용하여 재사용 가능한 타이포그래피 스타일 정의
+- **폰트 패밀리**: Pretendard 폰트 사용
+- **일관된 명명**: `font-{type}-{weight}` 패턴으로 체계적인 명명 규칙
+
+```css
+/* 사용 예시 */
+<h1 className="font-h1-700">제목</h1>
+<p className="font-subtitle1-700">부제목</p>
+```
+
+### 📏 spacing.css
+
+간격(spacing) 토큰을 정의합니다.
+
+- **기본 단위**: 4px 기준의 일관된 간격 시스템
+- **Tailwind 통합**: `p-2` → `padding: 8px` 자동 변환
+- **토큰 매핑**: `@theme inline`을 통해 spacing 변수를 토큰에 매핑
+
+```css
+/* 사용 예시 */
+.spaced-element {
+  padding: var(--spacing); /* 4px */
+}
+
+/* Tailwind 클래스로 사용 */
+<div className="p-2">내용</div> /* padding: 8px */
+```
+
+## 사용 방법
+
+### 1. CSS 파일 import
+
+```css
+/* 메인 스타일시트에서 import */
+@import "./foundations/color.css";
+@import "./foundations/spacing.css";
+@import "./foundations/typography.css";
+```
+
+### 2. 컴포넌트에서 활용
+
+```tsx
+// Tailwind 클래스로 사용
+<div className="bg-main text-main p-2">
+  <h1 className="font-h1-700">제목</h1>
+  <p className="font-subtitle1-700">부제목</p>
+</div>
+
+// CSS 변수로 직접 사용
+<div style={{
+  backgroundColor: 'var(--background-color-main)',
+  color: 'var(--text-color-main)',
+  padding: 'var(--spacing)'
+}}>
+  커스텀 스타일
+</div>
+```
+
+### 3. 테마 전환
+
+```tsx
+import { ThemeProvider } from "../ThemeProvider";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="light">{/* 앱 컴포넌트들 */}</ThemeProvider>
+  );
+}
+```
+
+## 현재 정의된 토큰
+
+## 확장 방법
+
+새로운 토큰을 추가할 때는 다음 단계를 따르세요:
+
+### 1. 색상 토큰 추가
+
+```css
+/* color.css */
+:root {
+  --new-color: #your-color;
+}
+
+.dark {
+  --new-color: #your-dark-color;
+}
+
+@theme inline {
+  --color-new: var(--new-color);
+  --background-color-new: var(--new-color);
+  --text-color-new: var(--new-color);
+}
+```
+
+### 2. 간격 토큰 추가
+
+```css
+/* spacing.css */
+@theme inline {
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+}
+```
+
+### 3. 타이포그래피 유틸리티 추가
+
+```css
+/* typography.css */
+@utility font-body-regular {
+  font-family: Pretendard;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+}
+```

package/src/foundations/ThemeProvider.tsx

@@ -0,0 +1,77 @@
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+
+export type Theme = string; //"dark" | "light" | "system" | "test";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+  const prevTheme = useRef<Theme>(theme);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove(prevTheme.current);
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme((prev) => {
+        prevTheme.current = prev;
+        return theme;
+      });
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};

package/src/foundations/color.css

@@ -0,0 +1,232 @@
+@import './palette.css';
+
+/* Color */
+/**
+ * Token에 매칭된 Color 값을 설정합니다.
+ */
+@theme inline {
+  --color-static-white: var(--static-white);
+  --color-static-black: var(--static-black);
+
+  --color-primary-main: var(--primary-main);
+  --color-primary-alternative: var(--primary-alternative);
+  --color-primary-subtle: var(--primary-subtle);
+
+  --color-secondary-main: var(--secondary-main);
+  --color-secondary-alternative: var(--secondary-alternative);
+  --color-secondary-subtle: var(--secondary-subtle);
+
+  --color-tertiary-main: var(--tertiary-main);
+  --color-tertiary-alternative: var(--tertiary-alternative);
+  --color-tertiary-subtle: var(--tertiary-subtle);
+
+  --color-background-main: var(--background-main);
+  --color-background-alternative: var(--background-alternative);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-elevated-main: var(--background-elevated-main);
+  --color-background-elevated-alternative: var(--background-elevated-alternative);
+  --color-background-emphize: var(--background-emphize);
+  --color-background-quiet: var(--background-quiet);
+  --color-background-error: var(--background-error);
+  --color-background-success: var(--background-success);
+  --color-background-info-subtle: var(--background-info-subtle);
+  --color-background-success-subtle: var(--background-success-subtle);
+  --color-background-warning-subtle: var(--background-warning-subtle);
+  --color-background-error-subtle: var(--background-error-subtle);
+
+  --color-text-main: var(--text-main);
+  --color-text-alternative: var(--text-alternative);
+  --color-text-subtle: var(--text-subtle);
+  --color-text-ghost: var(--text-ghost);
+  --color-text-quiet: var(--text-quiet);
+  --color-text-emphize: var(--text-emphize);
+  --color-text-interactive: var(--text-interactive);
+  --color-text-info: var(--text-info);
+  --color-text-success: var(--text-success);
+  --color-text-warning: var(--text-warning);
+  --color-text-error: var(--text-error);
+
+  --color-border-main: var(--border-main);
+  --color-border-alternative: var(--border-alternative);
+  --color-border-subtle: var(--border-subtle);
+  --color-border-emphize: var(--border-emphize);
+  --color-border-quiet: var(--border-quiet);
+  --color-border-main-focusRing: var(--border-main-focusRing);
+  --color-border-emphize-focusRing: var(--border-emphize--focusRing);
+  --color-border-control-default-focusRing: var(--border-control-default-focusRing);
+  --color-border-info: var(--border-info);
+  --color-border-success: var(--border-success);
+  --color-border-warning: var(--border-warning);
+  --color-border-error: var(--border-error);
+  --color-border-success-focusRing: var(--border-success-focusRing);
+  --color-border-warning-focusRing: var(--border-warning-focusRing);
+  --color-border-error-focusRing: var(--border-error-focusRing);
+
+  --coon-main: var(--icon-main);
+  --color-icon-alternative: var(--icon-alternative);
+  --color-icon-quiet: var(--icon-quiet);
+  --color-icon-emphize: var(--icon-emphize);
+  --color-icon-disable: var(--icon-disable);
+  --color-icon-info: var(--icon-info);
+  --color-icon-success: var(--icon-success);
+  --color-icon-warning: var(--icon-warning);
+  --color-icon-error: var(--icon-error);
+
+  --color-state-default: var(--state-default);
+  --color-state-hovered: var(--state-hovered);
+  --color-state-focused: var(--state-focused);
+  --color-state-pressed: var(--state-pressed);
+  --color-state-disabled: var(--state-disabled);
+
+  --color-status-info-main: var(--status-info-main);
+  --color-status-info-alternative: var(--status-info-alternative);
+  --color-status-info-ghost: var(--status-info-ghost);
+  --color-status-success-main: var(--status-success-main);
+  --color-status-success-alternative: var(--status-success-alternative);
+  --color-status-success-ghost: var(--status-success-ghost);
+  --color-status-warning-main: var(--status-warning-main);
+  --color-status-warning-alternative: var(--status-warning-alternative);
+  --color-status-warning-ghost: var(--status-warning-ghost);
+  --color-status-error-main: var(--status-error-main);
+  --color-status-error-alternative: var(--status-error-alternative);
+  --color-status-error-ghost: var(--status-error-ghost);
+
+  --color-overlay-main: var(--overlay-main);
+  --color-overlay-alternative: var(--overlay-alternative);
+}
+
+/**
+ * 기본 테마의 Color 값을 설정합니다.
+ */
+:root {
+  /**
+   * 1. Static
+   */
+  --static-white: var(--white-100);
+  --static-black: var(--black-100);
+
+  /**
+   * 2. Primary
+   */
+  --primary-main: var(--violet-60);
+  --primary-alternative: var(--violet-80);
+  --primary-subtle: var(--violet-40);
+
+  /**
+   * 3. Secondary
+   */
+  --secondary-main: var(--indigo-60);
+  --secondary-alternative: var(--indigo-80);
+  --secondary-subtle: var(--indigo-40);
+
+  /**
+   * 4. Tertiary
+   */
+  --tertiary-main: var(--navy-60);
+  --tertiary-alternative: var(--navy-80);
+  --tertiary-subtle: var(--navy-40);
+
+  /**
+   * 5. Background
+   */
+  --background-main: var(--white-100);
+  --background-alternative: var(--cool-neutral-5);
+  --background-subtle: var(--cool-neutral-0);
+  --background-elevated-main: var(--cool-neutral-10);
+  --background-elevated-alternative: var(--cool-neutral-20);
+  --background-emphize: var(--cool-neutral-90);
+  --background-quiet: --alpha(var(--cool-neutral-90) / 5%);
+  --background-success: var(--green-50);
+  --background-error: var(--red-50);
+  --background-info-subtle: --alpha(var(--blue-50) / 5%);
+  --background-success-subtle: --alpha(var(--green-50) / 5%);
+  --background-warning-subtle: --alpha(var(--yellow-50) / 5%);
+  --background-error-subtle: --alpha(var(--red-50) / 5%);
+
+  /**
+   * 6. Text
+   */
+  --text-main: var(--cool-neutral-90);
+  --text-alternative: var(--cool-neutral-80);
+  --text-subtle: var(--cool-neutral-60);
+  --text-ghost: var(--cool-neutral-30);
+  --text-quiet: var(--cool-neutral-25);
+  --text-emphize: var(--cool-neutral-10);
+  --text-interactive: var(--violet-60);
+  --text-info: var(--blue-70);
+  --text-success: var(--green-70);
+  --text-warning: var(--yellow-70);
+  --text-error: var(--red-70);
+
+  /**
+   * 7. Border
+   */
+  --border-main: var(--cool-neutral-10);
+  --border-alternative: var(--cool-neutral-30);
+  --border-subtle: var(--cool-neutral-0);
+  --border-emphize: var(--cool-neutral-90);
+  --border-quiet: var(--cool-neutral-5);
+  --border-main-focusRing: --alpha(var(--cool-neutral-10) / 50%);
+  --border-emphize--focusRing: --alpha(var(--cool-neutral-90) / 50%);
+  --border-control-default-focusRing: --alpha(var(--cool-neutral-20) / 50%);
+  --border-info: var(--blue-50);
+  --border-success: var(--green-50);
+  --border-warning: var(--orange-50);
+  --border-error: var(--red-50);
+  --border-success-focusRing: --alpha(var(--green-50) / 50%);
+  --border-warning-focusRing: --alpha(var(--orange-50) / 50%);
+  --border-error-focusRing: --alpha(var(--red-50) / 50%);
+
+  /**
+   * 8. Icon
+   */
+  --icon-main: var(--cool-neutral-90);
+  --icon-alternative: var(--cool-neutral-70);
+  --icon-quiet: var(--cool-neutral-20);
+  --icon-emphize: var(--cool-neutral-0);
+  --icon-disable: var(--cool-neutral-30);
+  --icon-info: var(--blue-50);
+  --icon-success: var(--green-50);
+  --icon-warning: var(--orange-50);
+  --icon-error: var(--red-50);
+
+  /**
+ * 9. State
+ */
+  --state-default: alpha(var(--cool-neutral-0) / 100%);
+  --state-hovered: alpha(var(--cool-neutral-5) / 100%);
+  --state-focused: alpha(var(--cool-neutral-10) / 100%);
+  --state-pressed: alpha(var(--cool-neutral-15) / 100%);
+  --state-disabled: alpha(var(--static-white) / 50%);
+
+  /**
+   * 10. Status
+   */
+  --status-info-main: var(--blue-50);
+  --status-info-alternative: var(--blue-70);
+  --status-info-ghost: var(--blue-10);
+  --status-success-main: var(--green-50);
+  --status-success-alternative: var(--green-70);
+  --status-success-ghost: var(--green-10);
+  --status-warning-main: var(--orange-50);
+  --status-warning-alternative: var(--orange-70);
+  --status-warning-ghost: var(--orange-10);
+  --status-error-main: var(--red-50);
+  --status-error-alternative: var(--red-70);
+  --status-error-ghost: var(--red-10);
+
+  /**
+   * 11. Overlay
+   */
+  --overlay-main: alpha(var(--cool-neutral-90) / 40%);
+  --overlay-alternative: alpha(var(--cool-neutral-90) / 20%);
+}
+
+/** 
+ * Dark 테마에서의 Color 값을 설정합니다.
+ */
+.dark {
+  /**
+   * TBD
+   */
+}