feat: mds 2.0 스토리북 설정

configs/tsconfig/base.json

@@ -0,0 +1,18 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

configs/tsconfig/library.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "jsx": "react-jsx"
+  }
+}

configs/tsconfig/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@makers/tsconfig",
   "version": "0.0.0",
-  "private": true
+  "private": true,
+  "files": ["base.json", "library.json"]
 }

packages/design-tokens/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@makers/design-tokens",
   "version": "0.0.0",
+  "type": "module",
+  "sideEffects": ["*.css"],
+  "exports": {
+    ".": "./src/index.ts",
+    "./base": "./src/base/index.ts",
+    "./semantic": "./src/semantic/index.ts",
+    "./tokens.css": "./src/tokens.css"
+  },
+  "files": ["src"],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@makers/tsconfig": "workspace:*",
+    "@storybook/react": "^8.4.7",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.1",
+    "typescript": "^5.6.0"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/design-tokens/src/base/color.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { baseColor } from "./color";
+
+interface SwatchProps {
+  name: string;
+  value: string;
+}
+
+function Swatch({ name, value }: SwatchProps) {
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 12, padding: 8 }}>
+      <div
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: 8,
+          background: value,
+          border: "1px solid #e5e8eb",
+        }}
+      />
+      <div>
+        <div style={{ fontWeight: 600 }}>{name}</div>
+        <div style={{ fontFamily: "monospace", color: "#6b7684" }}>{value}</div>
+      </div>
+    </div>
+  );
+}
+
+function ColorGrid() {
+  return (
+    <div
+      style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8 }}
+    >
+      {Object.entries(baseColor).map(([name, value]) => (
+        <Swatch key={name} name={name} value={value} />
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof ColorGrid> = {
+  title: "Base/Color",
+  component: ColorGrid,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Palette: StoryObj<typeof ColorGrid> = {};

packages/design-tokens/src/base/color.ts

@@ -0,0 +1,21 @@
+export const baseColor = {
+  white: "#ffffff",
+  black: "#000000",
+  gray50: "#f9fafb",
+  gray100: "#f2f4f6",
+  gray200: "#e5e8eb",
+  gray300: "#d1d6db",
+  gray400: "#b0b8c1",
+  gray500: "#8b95a1",
+  gray600: "#6b7684",
+  gray700: "#4e5968",
+  gray800: "#333d4b",
+  gray900: "#191f28",
+  blue500: "#3182f6",
+  blue600: "#2272eb",
+  red500: "#f04452",
+  green500: "#00c896",
+  yellow500: "#f5a623",
+} as const;
+
+export type BaseColor = keyof typeof baseColor;

packages/design-tokens/src/base/index.ts

@@ -0,0 +1,3 @@
+export * from "./color";
+export * from "./space";
+export * from "./typography";

packages/design-tokens/src/base/space.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { space } from "./space";
+
+function SpaceScale() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      {Object.entries(space).map(([token, value]) => (
+        <div
+          key={token}
+          style={{ display: "flex", alignItems: "center", gap: 12 }}
+        >
+          <div style={{ width: 48, fontFamily: "monospace" }}>{token}</div>
+          <div style={{ background: "#3182f6", height: 16, width: value }} />
+          <div style={{ color: "#6b7684" }}>{value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof SpaceScale> = {
+  title: "Base/Space",
+  component: SpaceScale,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Scale: StoryObj<typeof SpaceScale> = {};

packages/design-tokens/src/base/space.ts

@@ -0,0 +1,15 @@
+export const space = {
+  "0": "0px",
+  "1": "2px",
+  "2": "4px",
+  "3": "8px",
+  "4": "12px",
+  "5": "16px",
+  "6": "20px",
+  "7": "24px",
+  "8": "32px",
+  "9": "40px",
+  "10": "48px",
+} as const;
+
+export type Space = keyof typeof space;

packages/design-tokens/src/base/typography.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { typography } from "./typography";
+
+function TypographyScale() {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {Object.entries(typography).map(([name, style]) => (
+        <div key={name}>
+          <div style={{ color: "#6b7684", fontSize: 12, marginBottom: 4 }}>
+            {name} — {style.fontSize} / {style.lineHeight} / {style.fontWeight}
+          </div>
+          <div style={style}>다람쥐 헌 쳇바퀴에 타고파</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof TypographyScale> = {
+  title: "Base/Typography",
+  component: TypographyScale,
+  parameters: { layout: "padded" },
+};
+
+export default meta;
+
+export const Scale: StoryObj<typeof TypographyScale> = {};

packages/design-tokens/src/base/typography.ts

@@ -0,0 +1,9 @@
+export const typography = {
+  h1: { fontSize: "32px", lineHeight: "40px", fontWeight: 700 },
+  h2: { fontSize: "24px", lineHeight: "32px", fontWeight: 700 },
+  h3: { fontSize: "20px", lineHeight: "28px", fontWeight: 600 },
+  body: { fontSize: "16px", lineHeight: "24px", fontWeight: 400 },
+  caption: { fontSize: "13px", lineHeight: "18px", fontWeight: 400 },
+} as const;
+
+export type TypographyToken = keyof typeof typography;

packages/design-tokens/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./base/index";
+export * from "./semantic/index";

packages/design-tokens/src/semantic/index.ts

@@ -0,0 +1,16 @@
+import { baseColor } from "../base/color";
+
+export const semanticColor = {
+  background: baseColor.white,
+  backgroundSubtle: baseColor.gray50,
+  foreground: baseColor.gray900,
+  foregroundMuted: baseColor.gray600,
+  border: baseColor.gray200,
+  primary: baseColor.blue500,
+  primaryHover: baseColor.blue600,
+  danger: baseColor.red500,
+  success: baseColor.green500,
+  warning: baseColor.yellow500,
+} as const;
+
+export type SemanticColor = keyof typeof semanticColor;

packages/design-tokens/src/tokens.css

@@ -0,0 +1,24 @@
+:root {
+  --color-background: #ffffff;
+  --color-foreground: #191f28;
+  --color-foreground-muted: #6b7684;
+  --color-border: #e5e8eb;
+  --color-primary: #3182f6;
+  --color-primary-hover: #2272eb;
+  --color-danger: #f04452;
+
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 8px;
+  --space-4: 12px;
+  --space-5: 16px;
+  --space-6: 20px;
+  --space-7: 24px;
+  --space-8: 32px;
+
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+
+  --font-body: 16px;
+}

packages/design-tokens/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@makers/tsconfig/library.json",
+  "compilerOptions": {
+    "types": ["react"]
+  },
+  "include": ["src"]
+}

packages/ui/package.json

@@ -1,6 +1,34 @@
 {
   "name": "@makers/ui",
   "version": "0.0.0",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@makers/design-tokens": "workspace:*",
+    "@vanilla-extract/css": "^1.15.5"
+  },
+  "devDependencies": {
+    "@makers/tsconfig": "workspace:*",
+    "@storybook/react": "^8.4.7",
+    "@types/react": "^18.3.0",
+    "react": "^18.3.1",
+    "typescript": "^5.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
   "publishConfig": {
     "access": "public"
   }

packages/ui/src/Button/Button.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Button",
+  component: Button,
+  tags: ["autodocs"],
+  args: {
+    children: "버튼",
+    variant: "primary",
+    size: "md",
+  },
+  argTypes: {
+    variant: {
+      control: "inline-radio",
+      options: ["primary", "secondary", "danger"],
+    },
+    size: {
+      control: "inline-radio",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = {
+  args: { variant: "secondary" },
+};
+
+export const Danger: Story = {
+  args: { variant: "danger" },
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
+      <Button {...args} size="sm">
+        Small
+      </Button>
+      <Button {...args} size="md">
+        Medium
+      </Button>
+      <Button {...args} size="lg">
+        Large
+      </Button>
+    </div>
+  ),
+};