@nurihaus/web-design-system 2.0.9 → 3.0.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@nurihaus/web-design-system",
-  "version": "2.0.9",
-  "description": "nurilounge-admin-design-system",
+  "version": "3.0.0",
+  "description": "Nurihaus 디자인 시스템 — 컴포넌트와 디자인 토큰",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md",
-    "styles"
+    "README.md"
   ],
   "author": "nuri",
   "license": "MIT",
@@ -16,16 +15,17 @@
     "url": "https://github.com/NURIHAUS-Dev/nuri-web-design-system"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "update-tokens": "bash scripts/update-tokens.sh",
+    "tokens": "node tokens/build.mjs",
     "clean": "rm -rf dist",
-    "build": "npm run clean && webpack",
+    "build": "npm run clean && npm run tokens && webpack && node scripts/finalize.mjs && node scripts/build-css.mjs",
+    "build:css": "node scripts/build-css.mjs",
     "start": "webpack serve",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "format": "prettier --write",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test": "echo \"no test\" && exit 0"
   },
   "bugs": {
     "url": "https://github.com/nave-nurihuas/design-system-lab/issues"
@@ -40,6 +40,7 @@
     "@storybook/addon-docs": "^9.1.12",
     "@storybook/addon-webpack5-compiler-swc": "^4.0.1",
     "@storybook/react-webpack5": "^9.1.12",
+    "@svgr/webpack": "^8.1.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -48,12 +49,15 @@
     "autoprefixer": "^10.4.21",
     "babel-loader": "^9.2.1",
     "baseline-browser-mapping": "^2.9.14",
+    "css-loader": "^7.1.2",
     "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-prettier": "^5.2.6",
     "eslint-plugin-storybook": "^9.1.12",
+    "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.6.0",
+    "postcss": "^8.5.6",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-discard-empty": "^7.0.1",
     "postcss-import": "^16.1.1",
@@ -61,6 +65,7 @@
     "postcss-nesting": "^13.0.2",
     "prettier": "^3.5.3",
     "storybook": "^9.1.12",
+    "style-loader": "^4.0.0",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.2",
     "webpack": "^5.95.0",
@@ -68,14 +73,7 @@
     "webpack-dev-server": "^5.1.0"
   },
   "dependencies": {
-    "@nurihaus/design-tokens": "latest",
-    "@svgr/webpack": "^8.1.0",
-    "css-loader": "^7.1.2",
-    "file-loader": "^6.2.0",
-    "postcss": "^8.5.6",
-    "radix-ui": "^1.4.3",
-    "react-router-dom": "^6.26.2",
-    "style-loader": "^4.0.0"
+    "radix-ui": "^1.4.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
@@ -85,5 +83,22 @@
     "extends": [
       "plugin:storybook/recommended"
     ]
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens": {
+      "types": "./dist/tokens/generated/index.d.ts",
+      "default": "./dist/tokens.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
   }
 }

package/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Development</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="index.js"></script></head><body></body></html>

package/styles/AGENTS.md

@@ -1,41 +0,0 @@
-<!-- Parent: ../AGENTS.md -->
-<!-- Generated: 2026-03-11 | Updated: 2026-03-11 -->
-
-# styles
-
-## Purpose
-전역 CSS 및 디자인 토큰 정의. `index.css`가 모든 스타일의 진입점이며, 토큰과 유틸리티 클래스, 컴포넌트 스타일을 순서대로 import한다.
-
-## Key Files
-
-| File | Description |
-|------|-------------|
-| `index.css` | 전체 스타일 진입점 — 토큰 → 리셋 → 유틸리티 → 컴포넌트 순서로 import |
-| `reset.css` | 브라우저 기본 스타일 초기화 |
-| `display.css` | display 유틸리티 클래스 |
-| `position.css` | position 유틸리티 클래스 |
-| `flex-direction.css` | flex-direction 유틸리티 클래스 |
-| `align-items.css` | align-items 유틸리티 클래스 |
-| `justify-content.css` | justify-content 유틸리티 클래스 |
-| `overflow.css` | overflow 유틸리티 클래스 |
-
-## Subdirectories
-
-| Directory | Purpose |
-|-----------|---------|
-| `token/` | 디자인 토큰 — 색상, 폰트, 반경, 커서, 스페이싱 (see `token/AGENTS.md`) |
-
-## For AI Agents
-
-### Working In This Directory
-- 새 컴포넌트 스타일 추가 시 `index.css`의 `/* Component styles */` 섹션에 `@import` 추가
-- import 순서: 토큰 → 리셋 → 유틸 → 컴포넌트 (현재 순서 유지)
-- 색상 값 직접 삽입 금지 — 반드시 `var(--color-xxx)` 사용
-
-### Common Patterns
-```css
-/* index.css에 컴포넌트 스타일 추가 */
-@import '../components/{name}/{name}-style.css';
-```
-
-<!-- MANUAL: -->

package/styles/align-items.css

@@ -1,19 +0,0 @@
-.nuri-ai-start {
-  align-items: flex-start;
-}
-
-.nuri-ai-center {
-  align-items: center;
-}
-
-.nuri-ai-end {
-  align-items: flex-end;
-}
-
-.nuri-ai-stretch {
-  align-items: stretch;
-}
-
-.nuri-ai-baseline {
-  align-items: baseline;
-}

package/styles/display.css

@@ -1,31 +0,0 @@
-.nuri-display-flex {
-  display: flex;
-}
-
-.nuri-display-inline-flex {
-  display: inline-flex;
-}
-
-.nuri-display-block {
-  display: block;
-}
-
-.nuri-display-inline-block {
-  display: inline-block;
-}
-
-.nuri-display-grid {
-  display: grid;
-}
-
-.nuri-display-inline-grid {
-  display: inline-grid;
-}
-
-.nuri-display-contents {
-  display: contents;
-}
-
-.nuri-display-none {
-  display: none;
-}

package/styles/flex-direction.css

@@ -1,15 +0,0 @@
-.nuri-flex-row {
-  flex-direction: row;
-}
-
-.nuri-flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.nuri-flex-column {
-  flex-direction: column;
-}
-
-.nuri-flex-column-reverse {
-  flex-direction: column-reverse;
-}

package/styles/index.css

@@ -1,33 +0,0 @@
-/* Token styles */
-@import './token/color.css';
-@import './token/font.css';
-@import './token/radius.css';
-@import './token/cursor.css';
-
-/* Reset styles */
-@import './reset.css';
-
-/* Utility styles */
-@import './display.css';
-@import './position.css';
-@import './flex-direction.css';
-@import './align-items.css';
-@import './justify-content.css';
-@import './overflow.css';
-
-/* Component styles */
-@import '../components/avatar/avatar-style.css';
-@import '../components/badge/badge-style.css';
-@import '../components/button/button-style.css';
-@import '../components/check-box/check-box-style.css';
-@import '../components/elements/text/text-style.css';
-@import '../components/loading/spinner/spinner-style.css';
-@import '../components/loading/inline-loading/inline-loading-style.css';
-@import '../components/loading/overlay-loading/overlay-loading-style.css';
-@import '../components/modal/modal-style.css';
-@import '../components/radio/radio-style.css';
-@import '../components/table/table-style.css';
-@import '../components/text-field/text-field-style.css';
-@import '../components/tooltip/tooltip-style.css';
-@import '../components/drop-down/drop-down-style.css';
-@import '../components/collapsible-menu/collapsible-menu-style.css';

package/styles/justify-content.css

@@ -1,23 +0,0 @@
-.nuri-justify-content-start {
-  justify-content: flex-start;
-}
-
-.nuri-justify-content-center {
-  justify-content: center;
-}
-
-.nuri-justify-content-end {
-  justify-content: flex-end;
-}
-
-.nuri-justify-content-between {
-  justify-content: space-between;
-}
-
-.nuri-justify-content-around {
-  justify-content: space-around;
-}
-
-.nuri-justify-content-evenly {
-  justify-content: space-evenly;
-}

package/styles/overflow.css

@@ -1,47 +0,0 @@
-.nuri-overflow-visible {
-  overflow: visible;
-}
-
-.nuri-overflow-hidden {
-  overflow: hidden;
-}
-
-.nuri-overflow-scroll {
-  overflow: scroll;
-}
-
-.nuri-overflow-auto {
-  overflow: auto;
-}
-
-.nuri-overflow-x-visible {
-  overflow-x: visible;
-}
-
-.nuri-overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.nuri-overflow-x-scroll {
-  overflow-x: scroll;
-}
-
-.nuri-overflow-x-auto {
-  overflow-x: auto;
-}
-
-.nuri-overflow-y-visible {
-  overflow-y: visible;
-}
-
-.nuri-overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.nuri-overflow-y-scroll {
-  overflow-y: scroll;
-}
-
-.nuri-overflow-y-auto {
-  overflow-y: auto;
-}

package/styles/position.css

@@ -1,19 +0,0 @@
-.nuri-position-static {
-  position: static;
-}
-
-.nuri-position-relative {
-  position: relative;
-}
-
-.nuri-position-absolute {
-  position: absolute;
-}
-
-.nuri-position-fixed {
-  position: fixed;
-}
-
-.nuri-position-sticky {
-  position: sticky;
-}

package/styles/reset.css

@@ -1,52 +0,0 @@
-/* 모든 요소의 마진과 패딩 제거 */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* 기본 폰트 설정 및 텍스트 렌더링 최적화 */
-html {
-  -webkit-text-size-adjust: 100%;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* 리스트 스타일 제거 */
-ul,
-ol {
-  list-style: none;
-}
-
-/* 링크 스타일 초기화 */
-a {
-  text-decoration: none;
-  color: inherit;
-}
-
-/* 버튼 스타일 초기화 */
-button {
-  border: none;
-  background: none;
-  cursor: pointer;
-}
-
-/* 이미지 관련 설정 */
-img {
-  max-width: 100%;
-  height: auto;
-  display: block;
-}
-
-/* 폼 요소 스타일 초기화 */
-input,
-textarea,
-select {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 0;
-}

package/styles/token/AGENTS.md

@@ -1,27 +0,0 @@
-<!-- Parent: ../AGENTS.md -->
-<!-- Generated: 2026-03-11 | Updated: 2026-03-11 -->
-
-# token
-
-## Purpose
-디자인 토큰 정의. CSS 변수와 TypeScript 상수로 색상, 폰트, 반경, 스페이싱, 커서를 관리. `scripts/update-tokens.sh`로 `@nurihaus/design-tokens`에서 자동 업데이트됨.
-
-## Key Files
-
-| File | Description |
-|------|-------------|
-| `color.css` | 색상 CSS 변수 (`--color-xxx`) 정의 |
-| `colors.ts` | 색상 TypeScript 상수 — `getMergedProps`의 css type prop에서 사용 |
-| `font.css` | 폰트 관련 CSS 변수 |
-| `radius.css` | border-radius CSS 변수 |
-| `space.css` | 간격(spacing) CSS 변수 |
-| `cursor.css` | cursor CSS 변수 |
-
-## For AI Agents
-
-### Working In This Directory
-- **직접 수정 금지** — `yarn update-tokens` (`scripts/update-tokens.sh`) 으로만 업데이트
-- 수동으로 수정해도 다음 토큰 업데이트 시 덮어씌워짐
-- 새 색상 변수가 필요하면 `@nurihaus/design-tokens` 패키지에 먼저 추가
-
-<!-- MANUAL: -->

package/styles/token/color.css

@@ -1,119 +0,0 @@
-.nuri-theme {
-  --color-black: #000000;
-  --color-white: #ffffff;
-  --color-grey-scale-50: #fafafa;
-  --color-grey-scale-100: #f4f4f5;
-  --color-grey-scale-200: #e4e4e7;
-  --color-grey-scale-300: #d4d4d8;
-  --color-grey-scale-400: #a1a1aa;
-  --color-grey-scale-500: #71717a;
-  --color-grey-scale-600: #52525b;
-  --color-grey-scale-700: #3f3f46;
-  --color-grey-scale-800: #27272a;
-  --color-grey-scale-900: #18181b;
-
-  --color-purple-50: #f4effa;
-  --color-purple-100: #e9e0f5;
-  --color-purple-200: #ddd1f0;
-  --color-purple-300: #c3b4dd;
-  --color-purple-400: #a894c7;
-  --color-purple-500: #957eb4;
-  --color-purple-600: #6f56a3;
-  --color-purple-700: #4c277c;
-  --color-purple-800: #4c1d88;
-  --color-purple-900: #391d5d;
-
-  --color-accent-red-50: #fff5f6;
-  --color-accent-red-100: #ffe8e9;
-  --color-accent-red-200: #fbcfd2;
-  --color-accent-red-300: #f39aa0;
-  --color-accent-red-400: #e86f77;
-  --color-accent-red-500: #df535c;
-  --color-accent-red-600: #c94751;
-  --color-accent-red-700: #b02e4c;
-  --color-accent-red-800: #8f243a;
-  --color-accent-red-900: #6e1a2c;
-
-  --color-accent-pink-50: #fff1f6;
-  --color-accent-pink-100: #ffe4ee;
-  --color-accent-pink-200: #fecfe3;
-  --color-accent-pink-300: #fda4cc;
-  --color-accent-pink-400: #f472b6;
-  --color-accent-pink-500: #ec6fae;
-  --color-accent-pink-600: #d95d9a;
-  --color-accent-pink-700: #b94a7e;
-  --color-accent-pink-800: #93385f;
-  --color-accent-pink-900: #6e2644;
-
-  --color-accent-magenta-50: #fef0ff;
-  --color-accent-magenta-100: #fce4ff;
-  --color-accent-magenta-200: #f8c6ff;
-  --color-accent-magenta-300: #f29bff;
-  --color-accent-magenta-400: #ec5cef;
-  --color-accent-magenta-500: #e13be7;
-  --color-accent-magenta-600: #c82fcc;
-  --color-accent-magenta-700: #a923a8;
-  --color-accent-magenta-800: #831c83;
-  --color-accent-magenta-900: #5e145e;
-
-  --color-accent-blue-50: #f1f4ff;
-  --color-accent-blue-100: #e3e8ff;
-  --color-accent-blue-200: #c7d2fe;
-  --color-accent-blue-300: #a5b4fc;
-  --color-accent-blue-400: #818cf8;
-  --color-accent-blue-500: #2563eb;
-  --color-accent-blue-600: #1f52c9;
-  --color-accent-blue-700: #1e40af;
-  --color-accent-blue-800: #1c348a;
-  --color-accent-blue-900: #162763;
-
-  --color-accent-mint-50: #ecfefd;
-  --color-accent-mint-100: #d1faf7;
-  --color-accent-mint-200: #a7f3ee;
-  --color-accent-mint-300: #6ee7e0;
-  --color-accent-mint-400: #2dd4cb;
-  --color-accent-mint-500: #01ece1;
-  --color-accent-mint-600: #0bc5bc;
-  --color-accent-mint-700: #0f9f99;
-  --color-accent-mint-800: #117d78;
-  --color-accent-mint-900: #135c58;
-
-  --color-accent-green-50: #ecfdf3;
-  --color-accent-green-100: #d1fae1;
-  --color-accent-green-200: #a7f3c8;
-  --color-accent-green-300: #6ee7a3;
-  --color-accent-green-400: #41e176;
-  --color-accent-green-500: #22c55e;
-  --color-accent-green-600: #16a34a;
-  --color-accent-green-700: #289a3a;
-  --color-accent-green-800: #166534;
-  --color-accent-green-900: #14532d;
-
-  --color-accent-yellow-50: #fffbeb;
-  --color-accent-yellow-100: #fef3c7;
-  --color-accent-yellow-200: #fde68a;
-  --color-accent-yellow-300: #fcd34d;
-  --color-accent-yellow-400: #fbbf24;
-  --color-accent-yellow-500: #ffb800;
-  --color-accent-yellow-600: #e0a106;
-  --color-accent-yellow-700: #b58105;
-  --color-accent-yellow-800: #8a6404;
-  --color-accent-yellow-900: #5f4703;
-
-  --color-accent-orange-50: #fff7ed;
-  --color-accent-orange-100: #ffedd5;
-  --color-accent-orange-200: #fed7aa;
-  --color-accent-orange-300: #fdba74;
-  --color-accent-orange-400: #fb923c;
-  --color-accent-orange-500: #f97316;
-  --color-accent-orange-600: #ea580c;
-  --color-accent-orange-700: #c2410c;
-  --color-accent-orange-800: #9a3412;
-  --color-accent-orange-900: #7c2d12;
-
-  --color-etc-skeleton-e4: #0f0f17;
-  --color-etc-skeleton-f7: #f7f7f8;
-  --color-etc-skeleton-ff: #ffffff;
-
-  --color-etc-hover-ee: #eeeeee;
-}

package/styles/token/colors.ts

@@ -1,105 +0,0 @@
-export const colors = {
-  transparent: 'transparent',
-  black: '#000000',
-  white: '#FFFFFF',
-  'grey-scale-50': '#FAFAFA',
-  'grey-scale-100': '#F4F4F5',
-  'grey-scale-200': '#E4E4E7',
-  'grey-scale-300': '#D4D4D8',
-  'grey-scale-400': '#A1A1AA',
-  'grey-scale-500': '#71717A',
-  'grey-scale-600': '#52525B',
-  'grey-scale-700': '#3F3F46',
-  'grey-scale-800': '#27272A',
-  'grey-scale-900': '#18181B',
-  'purple-50': '#F4EFFA',
-  'purple-100': '#E9E0F5',
-  'purple-200': '#DDD1F0',
-  'purple-300': '#C3B4DD',
-  'purple-400': '#A894C7',
-  'purple-500': '#957EB4',
-  'purple-600': '#6F56A3',
-  'purple-700': '#4C277C',
-  'purple-800': '#4C1D88',
-  'purple-900': '#391D5D',
-  'accent-red-50': '#FFF5F6',
-  'accent-red-100': '#FFE8E9',
-  'accent-red-200': '#FBCFD2',
-  'accent-red-300': '#F39AA0',
-  'accent-red-400': '#E86F77',
-  'accent-red-500': '#DF535C',
-  'accent-red-600': '#C94751',
-  'accent-red-700': '#B02E4C',
-  'accent-red-800': '#8F243A',
-  'accent-red-900': '#6E1A2C',
-  'accent-pink-50': '#FFF1F6',
-  'accent-pink-100': '#FFE4EE',
-  'accent-pink-200': '#FECFE3',
-  'accent-pink-300': '#FDA4CC',
-  'accent-pink-400': '#F472B6',
-  'accent-pink-500': '#EC6FAE',
-  'accent-pink-600': '#D95D9A',
-  'accent-pink-700': '#B94A7E',
-  'accent-pink-800': '#93385F',
-  'accent-pink-900': '#6E2644',
-  'accent-magenta-50': '#FEF0FF',
-  'accent-magenta-100': '#FEF0FF',
-  'accent-magenta-200': '#F8C6FF',
-  'accent-magenta-300': '#F29BFF',
-  'accent-magenta-400': '#EC5CEF',
-  'accent-magenta-500': '#E13BE7',
-  'accent-magenta-600': '#C82FCC',
-  'accent-magenta-700': '#A923A8',
-  'accent-magenta-800': '#831C83',
-  'accent-magenta-900': '#5E145E',
-  'accent-blue-50': '#F1F4FF',
-  'accent-blue-100': '#E3E8FF',
-  'accent-blue-200': '#C7D2FE',
-  'accent-blue-300': '#A5B4FC',
-  'accent-blue-400': '#818CF8',
-  'accent-blue-500': '#2563EB',
-  'accent-blue-600': '#1F52C9',
-  'accent-blue-700': '#1E40AF',
-  'accent-blue-800': '#1C348A',
-  'accent-blue-900': '#162763',
-  'accent-mint-50': '#ECFEFD',
-  'accent-mint-100': '#D1FAF7',
-  'accent-mint-200': '#A7F3EE',
-  'accent-mint-300': '#6EE7E0',
-  'accent-mint-400': '#2DD4CB',
-  'accent-mint-500': '#01ECE1',
-  'accent-mint-600': '#0BC5BC',
-  'accent-mint-700': '#0F9F99',
-  'accent-mint-800': '#117D78',
-  'accent-mint-900': '#135C58',
-  'accent-green-50': '#ECFDF3',
-  'accent-green-100': '#D1FAE1',
-  'accent-green-200': '#A7F3C8',
-  'accent-green-300': '#6EE7A3',
-  'accent-green-400': '#41E176',
-  'accent-green-500': '#22C55E',
-  'accent-green-600': '#16A34A',
-  'accent-green-700': '#289A3A',
-  'accent-green-800': '#166534',
-  'accent-green-900': '#14532D',
-  'accent-yellow-50': '#FFFBEB',
-  'accent-yellow-100': '#FEF3C7',
-  'accent-yellow-200': '#FDE68A',
-  'accent-yellow-300': '#FCD34D',
-  'accent-yellow-400': '#FBBF24',
-  'accent-yellow-500': '#FFB800',
-  'accent-yellow-600': '#E0A106',
-  'accent-yellow-700': '#B58105',
-  'accent-yellow-800': '#8A6404',
-  'accent-yellow-900': '#5F4703',
-  'accent-orange-50': '#FFF7ED',
-  'accent-orange-100': '#FFEDD5',
-  'accent-orange-200': '#FED7AA',
-  'accent-orange-300': '#FDBA74',
-  'accent-orange-400': '#FB923C',
-  'accent-orange-500': '#F97316',
-  'accent-orange-600': '#EA580C',
-  'accent-orange-700': '#C2410C',
-  'accent-orange-800': '#9A3412',
-  'accent-orange-900': '#7C2D12',
-} as const;

package/styles/token/cursor.css

@@ -1,5 +0,0 @@
-.nuri-theme {
-  --cursor-button: pointer;
-  --cursor-disabled: not-allowed;
-  --cursor-link: pointer;
-}