sh-ui-cli 0.22.2 → 0.23.0

package/templates/nextjs-app/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "@workspace/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@workspace/ui-app-name/*": ["../../packages/ui/ui-apps/ui-app-name/src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "next.config.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}

package/templates/nextjs-app/vitest.config.ts

@@ -0,0 +1,15 @@
+import path from 'node:path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, '.'),
+    },
+  },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/templates/nextjs-app/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/templates/nextjs-standalone/.env.example

@@ -0,0 +1,2 @@
+# API
+API_URL=http://localhost:8080

package/templates/nextjs-standalone/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "bracketSameLine": true,
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/nextjs-standalone/README.md

@@ -0,0 +1,77 @@
+# Next.js Standalone Template
+
+단독 실행 가능한 Next.js 프로젝트 템플릿 (sh-ui 기반).
+
+## 기술 스택
+
+- **Next.js 16** (App Router, React Compiler)
+- **React 19**
+- **TypeScript 5.9**
+- **Tailwind CSS 4** + **sh-ui** (neutral, radius=md, light-dark)
+- **@base-ui-components/react** (sh-ui가 의존하는 언스타일드 primitive)
+- **TanStack React Query** + **Axios** (데이터 페칭)
+- **Zustand** (상태 관리)
+- **next-themes** (다크 모드)
+- **Sonner** (토스트)
+- **Zod** (유효성 검증)
+- **ESLint 9** (flat config, FSD 규칙 포함)
+- **Prettier** (tailwind 플러그인)
+- **Vitest** + **Testing Library**
+
+## 프로젝트 구조
+
+```
+├── app/                      # Next.js App Router
+│   ├── layout.tsx            # 루트 레이아웃
+│   ├── page.tsx              # 홈 페이지
+│   └── globals.css           # Tailwind + sh-ui tokens import
+├── src/
+│   ├── app/
+│   │   └── providers/        # QueryClient, Theme, Toaster
+│   ├── shared/               # FSD: 공유 유틸/설정/UI
+│   │   ├── ui/               # ← sh-ui 컴포넌트가 여기로 복사됨
+│   │   ├── lib/
+│   │   │   └── utils.ts      # cn() 유틸
+│   │   ├── styles/
+│   │   │   └── tokens.css    # sh-ui 디자인 토큰
+│   │   ├── hooks/
+│   │   ├── api/
+│   │   ├── config/
+│   │   └── model/
+│   ├── views/                # FSD: 페이지 단위 뷰
+│   ├── widgets/              # FSD: 조합형 UI 블록
+│   ├── features/             # FSD: 기능 단위
+│   └── entities/             # FSD: 비즈니스 엔티티
+├── sh-ui.config.json         # sh-ui 설정 (platform, theme, paths)
+├── eslint.config.js          # ESLint flat config (FSD boundaries 포함)
+├── next.config.ts
+├── tsconfig.json
+├── vitest.config.ts
+├── .prettierrc
+└── .env.example
+```
+
+## FSD (Feature-Sliced Design) 레이어 규칙
+
+```
+app → view → widget → feature → entity → shared
+```
+
+상위 레이어는 하위 레이어만 import 가능. ESLint `boundaries` 플러그인으로 강제됨.
+
+## 시작하기
+
+```bash
+pnpm install
+pnpm dev
+```
+
+## sh-ui 컴포넌트 추가
+
+```bash
+npx sh-ui add button
+npx sh-ui add dialog
+```
+
+`sh-ui.config.json` 의 `paths.components` 설정에 따라 `src/shared/ui/` 에 복사됩니다.
+토큰을 커스텀하려면 `sh-ui.config.json` 의 `theme` 값을 바꾸고 `npx sh-ui add tokens` 로 재생성.

package/templates/nextjs-standalone/app/globals.css

@@ -0,0 +1,33 @@
+@import 'tailwindcss';
+@import '../src/shared/styles/tokens.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-background-subtle: var(--background-subtle);
+  --color-background-muted: var(--background-muted);
+  --color-background-inverse: var(--background-inverse);
+  --color-foreground: var(--foreground);
+  --color-foreground-muted: var(--foreground-muted);
+  --color-foreground-subtle: var(--foreground-subtle);
+  --color-foreground-inverse: var(--foreground-inverse);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-danger: var(--danger);
+  --color-danger-foreground: var(--danger-foreground);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+@layer base {
+  body {
+    background: var(--background);
+    color: var(--foreground);
+  }
+}

package/templates/nextjs-standalone/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { GlobalProvider } from '@/src/app/providers';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'My App',
+  description: 'My App Description',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang='ko' suppressHydrationWarning>
+      <body>
+        <GlobalProvider>{children}</GlobalProvider>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs-standalone/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <main className='flex min-h-screen flex-col items-center justify-center'>
+      <h1 className='text-4xl font-bold'>Hello World</h1>
+    </main>
+  );
+}

package/templates/nextjs-standalone/eslint.config.js

@@ -0,0 +1,162 @@
+import js from "@eslint/js"
+import pluginNext from "@next/eslint-plugin-next"
+import eslintConfigPrettier from "eslint-config-prettier"
+import boundaries from "eslint-plugin-boundaries"
+import checkFile from "eslint-plugin-check-file"
+import importX from "eslint-plugin-import-x"
+import onlyWarn from "eslint-plugin-only-warn"
+import pluginReact from "eslint-plugin-react"
+import pluginReactHooks from "eslint-plugin-react-hooks"
+import globals from "globals"
+import tseslint from "typescript-eslint"
+import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript"
+
+export default [
+  {
+    ignores: [".next/**", "dist/**", "node_modules/**"],
+  },
+
+  // ── Base ──
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: { onlyWarn },
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
+  },
+
+  // ── React + Next.js ──
+  {
+    ...pluginReact.configs.flat.recommended,
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.serviceworker,
+      },
+    },
+  },
+  {
+    plugins: {
+      "@next/next": pluginNext,
+    },
+    rules: {
+      ...pluginNext.configs.recommended.rules,
+      ...pluginNext.configs["core-web-vitals"].rules,
+    },
+  },
+  {
+    plugins: {
+      "react-hooks": pluginReactHooks,
+    },
+    settings: { react: { version: "detect" } },
+    rules: {
+      ...pluginReactHooks.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/function-component-definition": [
+        "warn",
+        {
+          namedComponents: "function-declaration",
+          unnamedComponents: "arrow-function",
+        },
+      ],
+    },
+  },
+
+  // ── FSD boundaries ──
+  {
+    plugins: { boundaries },
+    settings: {
+      "boundaries/elements": [
+        { type: "app", pattern: ["src/app"], mode: "folder" },
+        { type: "shared", pattern: ["src/shared/*"], mode: "folder" },
+        { type: "entity", pattern: ["src/entities/*"], mode: "folder" },
+        { type: "feature", pattern: ["src/features/*"], mode: "folder" },
+        { type: "widget", pattern: ["src/widgets/*"], mode: "folder" },
+        { type: "view", pattern: ["src/views/*"], mode: "folder" },
+      ],
+      "boundaries/ignore": ["**/*.test.*", "**/*.spec.*"],
+    },
+    rules: {
+      "boundaries/element-types": [
+        "warn",
+        {
+          default: "disallow",
+          rules: [
+            { from: "app", allow: ["view", "widget", "feature", "entity", "shared"] },
+            { from: "view", allow: ["widget", "feature", "entity", "shared"] },
+            { from: "widget", allow: ["feature", "entity", "shared"] },
+            { from: "feature", allow: ["entity", "shared"] },
+            { from: "entity", allow: ["shared"] },
+            { from: "shared", allow: ["shared"] },
+          ],
+        },
+      ],
+      "boundaries/entry-point": [
+        "warn",
+        {
+          default: "disallow",
+          rules: [
+            { target: "shared", allow: "**" },
+            { target: "app", allow: "**" },
+            {
+              target: ["entity", "widget", "view"],
+              allow: "index.{ts,tsx}",
+            },
+            {
+              target: ["feature"],
+              allow: ["index.{ts,tsx}", "*/index.{ts,tsx}"],
+            },
+          ],
+        },
+      ],
+    },
+  },
+
+  // ── File naming ──
+  {
+    plugins: { "check-file": checkFile },
+    rules: {
+      "check-file/filename-naming-convention": [
+        "error",
+        {
+          "**/src/**/*.tsx": "PASCAL_CASE",
+          "**/src/**/*.ts": "CAMEL_CASE",
+        },
+        { ignoreMiddleExtensions: true },
+      ],
+    },
+  },
+  {
+    files: [
+      "**/index.tsx", "**/index.ts",
+      "**/layout.tsx", "**/page.tsx",
+      "**/error.tsx", "**/not-found.tsx",
+      "**/routing.ts", "**/navigation.ts", "**/request.ts",
+    ],
+    rules: {
+      "check-file/filename-naming-convention": "off",
+    },
+  },
+
+  // ── import-x ──
+  {
+    plugins: { "import-x": importX },
+    settings: {
+      "import-x/resolver-next": [
+        createTypeScriptImportResolver({ alwaysTryTypes: true }),
+      ],
+    },
+    rules: {
+      "import-x/order": "off",
+      "import-x/no-unresolved": "off",
+    },
+  },
+]

package/templates/nextjs-standalone/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactCompiler: true,
+  images: {
+    unoptimized: process.env.NODE_ENV === 'development',
+  },
+};
+
+export default nextConfig;

package/templates/nextjs-standalone/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "my-app",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "latest",
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.6",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@next/eslint-plugin-next": "^16.1.6",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-boundaries": "^5.4.0",
+    "eslint-plugin-check-file": "^3.3.1",
+    "eslint-plugin-import-x": "^4.16.1",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "jsdom": "^29.0.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.1.0"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "engines": {
+    "node": ">=20"
+  }
+}

package/templates/nextjs-standalone/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: { "@tailwindcss/postcss": {} },
+};
+
+export default config;

package/templates/nextjs-standalone/sh-ui.config.json

@@ -0,0 +1,19 @@
+{
+  "platform": "react",
+  "style": "default",
+  "theme": {
+    "base": "neutral",
+    "radius": "md",
+    "mode": "light-dark"
+  },
+  "paths": {
+    "tokens": "src/shared/styles/tokens.css",
+    "components": "src/shared/ui",
+    "utils": "src/shared/lib/utils.ts"
+  },
+  "aliases": {
+    "components": "@/src/shared/ui",
+    "utils": "@/src/shared/lib/utils",
+    "ui": "@/src/shared/ui"
+  }
+}

package/templates/nextjs-standalone/src/app/providers/GlobalProvider/index.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+import { Toaster } from 'sonner';
+
+import { QueryClientProvider } from '../tanstack/QueryClientProvider';
+import { TanstackDevtoolsProvider } from '../tanstack/TanstackDevtoolsProvider';
+import { ThemeProviders } from '../theme/ThemeProviders';
+
+interface GlobalProviderProps {
+  children: ReactNode;
+}
+
+export function GlobalProvider({ children }: GlobalProviderProps) {
+  return (
+    <ThemeProviders>
+      <QueryClientProvider>
+        <TanstackDevtoolsProvider>
+          <Toaster />
+          {children}
+        </TanstackDevtoolsProvider>
+      </QueryClientProvider>
+    </ThemeProviders>
+  );
+}

package/templates/nextjs-standalone/src/app/providers/index.tsx

@@ -0,0 +1 @@
+export { GlobalProvider } from './GlobalProvider';

package/templates/nextjs-standalone/src/app/providers/tanstack/QueryClientProvider.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import {
+  QueryClient,
+  QueryClientProvider as TanstackQueryClientProvider,
+} from '@tanstack/react-query';
+import { useState, type ReactNode } from 'react';
+
+export function QueryClientProvider({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            retry: 1,
+          },
+        },
+      }),
+  );
+
+  return (
+    <TanstackQueryClientProvider client={queryClient}>
+      {children}
+    </TanstackQueryClientProvider>
+  );
+}

package/templates/nextjs-standalone/src/app/providers/tanstack/TanstackDevtoolsProvider.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import type { ReactNode } from 'react';
+
+export function TanstackDevtoolsProvider({ children }: { children: ReactNode }) {
+  return (
+    <>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </>
+  );
+}

package/templates/nextjs-standalone/src/app/providers/theme/ThemeProviders.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+import type { ReactNode } from 'react';
+
+export function ThemeProviders({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider attribute='class' defaultTheme='system' enableSystem>
+      {children}
+    </ThemeProvider>
+  );
+}

package/templates/nextjs-standalone/src/shared/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}