sh-ui-cli 0.22.1 → 0.23.0

package/templates/flutter-standalone/lib/sh_ui/foundation/sh_ui_tokens.dart

@@ -0,0 +1,389 @@
+// Generated by @sh-ui/tokens — do not edit directly
+// base=neutral radius=md mode=light-dark
+
+import 'package:flutter/material.dart';
+
+@immutable
+class ShUiColorTokens {
+  final Color background;
+  final Color backgroundSubtle;
+  final Color backgroundMuted;
+  final Color backgroundInverse;
+  final Color foreground;
+  final Color foregroundMuted;
+  final Color foregroundSubtle;
+  final Color foregroundInverse;
+  final Color border;
+  final Color borderStrong;
+  final Color primary;
+  final Color primaryForeground;
+  final Color primaryHover;
+  final Color danger;
+  final Color dangerForeground;
+
+  const ShUiColorTokens({
+    required this.background,
+    required this.backgroundSubtle,
+    required this.backgroundMuted,
+    required this.backgroundInverse,
+    required this.foreground,
+    required this.foregroundMuted,
+    required this.foregroundSubtle,
+    required this.foregroundInverse,
+    required this.border,
+    required this.borderStrong,
+    required this.primary,
+    required this.primaryForeground,
+    required this.primaryHover,
+    required this.danger,
+    required this.dangerForeground,
+  });
+
+  // sh-ui:theme-colors-start
+  static const light = ShUiColorTokens(
+    background: Color(0xFFFFFFFF),
+    backgroundSubtle: Color(0xFFFAFAFA),
+    backgroundMuted: Color(0xFFF5F5F5),
+    backgroundInverse: Color(0xFF0A0A0A),
+    foreground: Color(0xFF0A0A0A),
+    foregroundMuted: Color(0xFF525252),
+    foregroundSubtle: Color(0xFFA3A3A3),
+    foregroundInverse: Color(0xFFFFFFFF),
+    border: Color(0xFFE5E5E5),
+    borderStrong: Color(0xFFD4D4D4),
+    primary: Color(0xFF171717),
+    primaryForeground: Color(0xFFFAFAFA),
+    primaryHover: Color(0xFF262626),
+    danger: Color(0xFFDC2626),
+    dangerForeground: Color(0xFFFFFFFF),
+  );
+
+  static const dark = ShUiColorTokens(
+    background: Color(0xFF0A0A0A),
+    backgroundSubtle: Color(0xFF171717),
+    backgroundMuted: Color(0xFF262626),
+    backgroundInverse: Color(0xFFFFFFFF),
+    foreground: Color(0xFFFAFAFA),
+    foregroundMuted: Color(0xFFA3A3A3),
+    foregroundSubtle: Color(0xFF737373),
+    foregroundInverse: Color(0xFF0A0A0A),
+    border: Color(0xFF262626),
+    borderStrong: Color(0xFF404040),
+    primary: Color(0xFFFAFAFA),
+    primaryForeground: Color(0xFF171717),
+    primaryHover: Color(0xFFE5E5E5),
+    danger: Color(0xFFDC2626),
+    dangerForeground: Color(0xFFFFFFFF),
+  );
+  // sh-ui:theme-colors-end
+}
+
+@immutable
+class ShUiRadiusTokens {
+  final double defaultRadius;
+
+  const ShUiRadiusTokens({
+    required this.defaultRadius,
+  });
+
+  static const tokens = ShUiRadiusTokens(
+    // sh-ui:theme-radius-start
+    defaultRadius: 8.0,
+    // sh-ui:theme-radius-end
+  );
+}
+
+@immutable
+class ShUiSpacingTokens {
+  final double s0;
+  final double s1;
+  final double s2;
+  final double s3;
+  final double s4;
+  final double s5;
+  final double s6;
+  final double s8;
+  final double s10;
+  final double s12;
+  final double s16;
+
+  const ShUiSpacingTokens({
+    required this.s0,
+    required this.s1,
+    required this.s2,
+    required this.s3,
+    required this.s4,
+    required this.s5,
+    required this.s6,
+    required this.s8,
+    required this.s10,
+    required this.s12,
+    required this.s16,
+  });
+
+  static const tokens = ShUiSpacingTokens(
+    s0: 0.0,
+    s1: 4.0,
+    s2: 8.0,
+    s3: 12.0,
+    s4: 16.0,
+    s5: 20.0,
+    s6: 24.0,
+    s8: 32.0,
+    s10: 40.0,
+    s12: 48.0,
+    s16: 64.0,
+  );
+}
+
+@immutable
+class ShUiTextTokens {
+  final double xs;
+  final double sm;
+  final double base;
+  final double lg;
+  final double xl;
+  final double xl2;
+  final double xl3;
+  final double xl4;
+
+  const ShUiTextTokens({
+    required this.xs,
+    required this.sm,
+    required this.base,
+    required this.lg,
+    required this.xl,
+    required this.xl2,
+    required this.xl3,
+    required this.xl4,
+  });
+
+  static const tokens = ShUiTextTokens(
+    xs: 12.0,
+    sm: 14.0,
+    base: 16.0,
+    lg: 18.0,
+    xl: 20.0,
+    xl2: 24.0,
+    xl3: 30.0,
+    xl4: 36.0,
+  );
+}
+
+@immutable
+class ShUiWeightTokens {
+  final FontWeight regular;
+  final FontWeight medium;
+  final FontWeight semibold;
+  final FontWeight bold;
+
+  const ShUiWeightTokens({
+    required this.regular,
+    required this.medium,
+    required this.semibold,
+    required this.bold,
+  });
+
+  static const tokens = ShUiWeightTokens(
+    regular: FontWeight.w400,
+    medium: FontWeight.w500,
+    semibold: FontWeight.w600,
+    bold: FontWeight.w700,
+  );
+}
+
+@immutable
+class ShUiShadowTokens {
+  final List<BoxShadow> sm;
+  final List<BoxShadow> md;
+  final List<BoxShadow> lg;
+  final List<BoxShadow> xl;
+
+  const ShUiShadowTokens({
+    required this.sm,
+    required this.md,
+    required this.lg,
+    required this.xl,
+  });
+
+  static const tokens = ShUiShadowTokens(
+    sm: <BoxShadow>[BoxShadow(offset: Offset(0.0, 1.0), blurRadius: 2.0, spreadRadius: 0.0, color: Color(0x14000000))],
+    md: <BoxShadow>[BoxShadow(offset: Offset(0.0, 4.0), blurRadius: 12.0, spreadRadius: 0.0, color: Color(0x1F000000))],
+    lg: <BoxShadow>[BoxShadow(offset: Offset(0.0, 8.0), blurRadius: 24.0, spreadRadius: 0.0, color: Color(0x26000000))],
+    xl: <BoxShadow>[BoxShadow(offset: Offset(0.0, 16.0), blurRadius: 48.0, spreadRadius: 0.0, color: Color(0x2E000000))],
+  );
+}
+
+@immutable
+class ShUiDurationTokens {
+  final Duration fast;
+  final Duration base;
+  final Duration slow;
+
+  const ShUiDurationTokens({
+    required this.fast,
+    required this.base,
+    required this.slow,
+  });
+
+  static const tokens = ShUiDurationTokens(
+    fast: Duration(milliseconds: 120),
+    base: Duration(milliseconds: 160),
+    slow: Duration(milliseconds: 200),
+  );
+}
+
+@immutable
+class ShUiEaseTokens {
+  final Curve standard;
+  final Curve emphasized;
+
+  const ShUiEaseTokens({
+    required this.standard,
+    required this.emphasized,
+  });
+
+  static const tokens = ShUiEaseTokens(
+    standard: Cubic(0.4, 0, 0.2, 1),
+    emphasized: Cubic(0.2, 0, 0, 1),
+  );
+}
+
+@immutable
+class ShUiControlTokens {
+  final double sm;
+  final double md;
+  final double lg;
+
+  const ShUiControlTokens({
+    required this.sm,
+    required this.md,
+    required this.lg,
+  });
+
+  static const tokens = ShUiControlTokens(
+    sm: 32.0,
+    md: 40.0,
+    lg: 48.0,
+  );
+}
+
+@immutable
+class ShUiBorderWidthTokens {
+  final double normal;
+  final double strong;
+
+  const ShUiBorderWidthTokens({
+    required this.normal,
+    required this.strong,
+  });
+
+  static const tokens = ShUiBorderWidthTokens(
+    normal: 1.0,
+    strong: 2.0,
+  );
+}
+
+@immutable
+class ShUiOpacityTokens {
+  final double disabled;
+
+  const ShUiOpacityTokens({
+    required this.disabled,
+  });
+
+  static const tokens = ShUiOpacityTokens(
+    disabled: 0.5,
+  );
+}
+
+@immutable
+class ShUiBreakpointTokens {
+  final double sm;
+  final double md;
+  final double lg;
+  final double xl;
+
+  const ShUiBreakpointTokens({
+    required this.sm,
+    required this.md,
+    required this.lg,
+    required this.xl,
+  });
+
+  static const tokens = ShUiBreakpointTokens(
+    sm: 640.0,
+    md: 768.0,
+    lg: 1024.0,
+    xl: 1280.0,
+  );
+}
+
+class ShUiTheme extends ThemeExtension<ShUiTheme> {
+  final ShUiColorTokens colors;
+  final ShUiRadiusTokens radius;
+  final ShUiSpacingTokens spacing;
+  final ShUiTextTokens text;
+  final ShUiWeightTokens weight;
+  final ShUiShadowTokens shadow;
+  final ShUiDurationTokens duration;
+  final ShUiEaseTokens ease;
+  final ShUiControlTokens control;
+  final ShUiBorderWidthTokens borderWidth;
+  final ShUiOpacityTokens opacity;
+  final ShUiBreakpointTokens breakpoint;
+
+  const ShUiTheme({
+    required this.colors,
+    required this.radius,
+    required this.spacing,
+    required this.text,
+    required this.weight,
+    required this.shadow,
+    required this.duration,
+    required this.ease,
+    required this.control,
+    required this.borderWidth,
+    required this.opacity,
+    required this.breakpoint,
+  });
+
+  static const light = ShUiTheme(
+    colors: ShUiColorTokens.light,
+    radius: ShUiRadiusTokens.tokens,
+    spacing: ShUiSpacingTokens.tokens,
+    text: ShUiTextTokens.tokens,
+    weight: ShUiWeightTokens.tokens,
+    shadow: ShUiShadowTokens.tokens,
+    duration: ShUiDurationTokens.tokens,
+    ease: ShUiEaseTokens.tokens,
+    control: ShUiControlTokens.tokens,
+    borderWidth: ShUiBorderWidthTokens.tokens,
+    opacity: ShUiOpacityTokens.tokens,
+    breakpoint: ShUiBreakpointTokens.tokens,
+  );
+  static const dark = ShUiTheme(
+    colors: ShUiColorTokens.dark,
+    radius: ShUiRadiusTokens.tokens,
+    spacing: ShUiSpacingTokens.tokens,
+    text: ShUiTextTokens.tokens,
+    weight: ShUiWeightTokens.tokens,
+    shadow: ShUiShadowTokens.tokens,
+    duration: ShUiDurationTokens.tokens,
+    ease: ShUiEaseTokens.tokens,
+    control: ShUiControlTokens.tokens,
+    borderWidth: ShUiBorderWidthTokens.tokens,
+    opacity: ShUiOpacityTokens.tokens,
+    breakpoint: ShUiBreakpointTokens.tokens,
+  );
+
+  @override
+  ShUiTheme copyWith({ShUiColorTokens? colors, ShUiRadiusTokens? radius, ShUiSpacingTokens? spacing, ShUiTextTokens? text, ShUiWeightTokens? weight, ShUiShadowTokens? shadow, ShUiDurationTokens? duration, ShUiEaseTokens? ease, ShUiControlTokens? control, ShUiBorderWidthTokens? borderWidth, ShUiOpacityTokens? opacity, ShUiBreakpointTokens? breakpoint}) =>
+      ShUiTheme(colors: colors ?? this.colors, radius: radius ?? this.radius, spacing: spacing ?? this.spacing, text: text ?? this.text, weight: weight ?? this.weight, shadow: shadow ?? this.shadow, duration: duration ?? this.duration, ease: ease ?? this.ease, control: control ?? this.control, borderWidth: borderWidth ?? this.borderWidth, opacity: opacity ?? this.opacity, breakpoint: breakpoint ?? this.breakpoint);
+
+  @override
+  ShUiTheme lerp(ThemeExtension<ShUiTheme>? other, double t) {
+    if (other is! ShUiTheme) return this;
+    return t < 0.5 ? this : other;
+  }
+}

package/templates/flutter-standalone/pubspec.yaml

@@ -0,0 +1,20 @@
+name: {{project_name}}
+description: sh-ui 기반 Flutter 앱
+publish_to: 'none'
+version: 0.0.1
+
+environment:
+  sdk: ^3.7.0
+  flutter: ^3.29.0
+
+dependencies:
+  flutter:
+    sdk: flutter
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^5.0.0
+
+flutter:
+  uses-material-design: true

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

@@ -0,0 +1,15 @@
+{
+  "platform": "flutter",
+  "style": "default",
+  "theme": {
+    "base": "neutral",
+    "radius": "md",
+    "mode": "light-dark"
+  },
+  "paths": {
+    "tokens": "lib/sh_ui/foundation/sh_ui_tokens.dart",
+    "components": "lib/sh_ui/widgets",
+    "foundation": "lib/sh_ui/foundation",
+    "widgets": "lib/sh_ui/widgets"
+  }
+}

package/templates/monorepo/.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.next
+.git
+.gitignore
+*.md
+.env*
+.turbo

package/templates/monorepo/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  ignorePatterns: ["apps/**", "packages/**"],
+  extends: ["@workspace/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+}

package/templates/monorepo/.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/monorepo/README.md

@@ -0,0 +1,103 @@
+# Monorepo Template
+
+Turborepo + pnpm workspace 기반 모노레포 템플릿 (sh-ui 기반).
+
+## 기술 스택
+
+- **Turborepo** (빌드 오케스트레이션)
+- **pnpm 10** (워크스페이스 패키지 매니저)
+- **TypeScript 5.9**
+- **sh-ui** (앱별 독립 테마 — 각 `ui-{app}/` 패키지가 자체 `sh-ui.config.json` 보유)
+- **ESLint 9** (flat config)
+- **Prettier** (tailwind 플러그인)
+
+## 프로젝트 구조
+
+```
+├── apps/                             # 애플리케이션
+│   └── (nextjs-app 템플릿으로 추가)
+│
+├── packages/
+│   ├── ui/
+│   │   ├── ui-core/                  # 기능/로직 공유 (스타일 없음)
+│   │   │   └── src/lib/utils.ts      # cn() 유틸
+│   │   │
+│   │   └── ui-apps/
+│   │       └── ui-{app}/             # 앱별 sh-ui 패키지 (독립 테마)
+│   │           ├── sh-ui.config.json # 앱별 theme/paths
+│   │           ├── src/
+│   │           │   ├── components/   # sh-ui 컴포넌트
+│   │           │   ├── hooks/
+│   │           │   └── styles/
+│   │           │       ├── globals.css
+│   │           │       └── tokens.css
+│   │           └── postcss.config.mjs
+│   │
+│   ├── eslint-config/                # 공유 ESLint 설정
+│   │   ├── base.js                   # 기본 (TS + Turbo + Prettier)
+│   │   ├── next.js                   # Next.js 앱용
+│   │   ├── react-internal.js         # React 라이브러리용
+│   │   └── fsd.js                    # FSD 레이어 규칙 (boundaries, 파일 네이밍)
+│   │
+│   └── typescript-config/            # 공유 TypeScript 설정
+│       ├── base.json                 # 기본 (strict, ES2022)
+│       ├── nextjs.json               # Next.js 앱용 (Bundler, JSX preserve)
+│       └── react-library.json        # React 라이브러리용 (react-jsx)
+│
+├── turbo.json                        # Turbo 태스크 파이프라인
+├── pnpm-workspace.yaml               # apps/* + packages/*
+├── .prettierrc
+├── .eslintrc.js
+├── .gitignore
+└── .dockerignore
+```
+
+## 앱 간 의존 관계
+
+```
+apps/{name}
+  ├── @workspace/ui-{name}            (앱 전용 UI: sh-ui 컴포넌트, 스타일)
+  ├── @workspace/ui-core              (공통 유틸: cn 등)
+  ├── @workspace/eslint-config        (ESLint 규칙)
+  └── @workspace/typescript-config    (tsconfig)
+
+packages/ui/ui-apps/ui-{name}
+  ├── @workspace/ui-core
+  ├── @workspace/eslint-config
+  └── @workspace/typescript-config
+```
+
+## 시작하기
+
+```bash
+pnpm install
+pnpm dev          # 모든 앱 동시 실행
+```
+
+## 앱 추가
+
+```bash
+npx sh-ui-create add-app
+```
+
+`apps/{name}/` 과 `packages/ui/ui-apps/ui-{name}/` 을 함께 생성합니다.
+
+## 개별 앱 실행
+
+```bash
+pnpm --filter web dev
+pnpm --filter admin build
+```
+
+## sh-ui 컴포넌트 추가
+
+```bash
+# 모든 ui 패키지에 추가 (대화형)
+npx sh-ui-create add-component button
+
+# 특정 앱에만 추가
+npx sh-ui-create add-component button --app web
+```
+
+내부적으로 `packages/ui/ui-apps/ui-{app}/` 디렉토리에서 `npx sh-ui add button` 이 실행되며,
+각 패키지의 `sh-ui.config.json` 에 선언된 경로로 컴포넌트가 복사됩니다.

package/templates/monorepo/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "my-project",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "typecheck": "turbo typecheck",
+    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+  },
+  "devDependencies": {
+    "@workspace/eslint-config": "workspace:*",
+    "@workspace/typescript-config": "workspace:*",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.6.13",
+    "turbo": "^2.8.1",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@10.4.1",
+  "engines": {
+    "node": ">=20"
+  }
+}

package/templates/monorepo/packages/eslint-config/base.js

@@ -0,0 +1,31 @@
+import js from "@eslint/js"
+import eslintConfigPrettier from "eslint-config-prettier"
+import onlyWarn from "eslint-plugin-only-warn"
+import turboPlugin from "eslint-plugin-turbo"
+import tseslint from "typescript-eslint"
+
+export const config = [
+  js.configs.recommended,
+  eslintConfigPrettier,
+  ...tseslint.configs.recommended,
+  {
+    plugins: {
+      turbo: turboPlugin,
+    },
+    rules: {
+      "turbo/no-undeclared-env-vars": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "warn",
+        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
+      ],
+    },
+  },
+  {
+    plugins: {
+      onlyWarn,
+    },
+  },
+  {
+    ignores: ["dist/**"],
+  },
+]