@mzc-fe/design-system 0.0.1 → 0.0.2

package/src/components/tooltip.stories.tsx

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

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

@@ -1,141 +0,0 @@
-# ~~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

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

@@ -1,232 +0,0 @@
-@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
-   */
-}