bank20baht-cli 0.5.0 → 0.6.0

package/README.md

@@ -72,7 +72,7 @@ Add a matching entry to `knip.ts` so dead-code checks cover it.
 Same flags as `new`, but scaffolds a complete stack:
 
 ```
-apps/web                 React 19 + Vite
+apps/web                 React 19 + Vite on bank20baht-ui (tokens, <baht-*> elements, dark toggle)
 apps/api                 Elysia — exports `type App`, the Eden type anchor
 libs/shared/eden         treaty<App> — the one typed HTTP client
 bahtui.json              generator config (see below)
@@ -126,7 +126,7 @@ Field DSL — comma-separated `key:type[:modifier…]`:
 | Part       | Values                                                                                                         |
 | ---------- | -------------------------------------------------------------------------------------------------------------- |
 | `key`      | `[a-z][a-z0-9_]*`; the label is derived (`due_date` → "Due Date")                                              |
-| `type`     | `text` `textarea` `markdown` `number` `email` `password` `dropdown` `multiselect` `checkbox` `radio` `toggle` `date` `file` `rating` `range` `reference` |
+| `type`     | `text` `textarea` `markdown` `number` `currency` `email` `password` `dropdown` `multiselect` `checkbox` `radio` `toggle` `date` `file` `rating` `range` `reference` `tags` |
 | modifiers  | `required` · `options=a\|b\|c` · `min=N` · `max=N` · `step=N` · `ref=LOOKUP` · `flag=NAME`                                               |
 
 Invalid DSL (unknown type, empty options, non-numeric `min`) fails before anything is

package/dist/domain/form-dsl.js

@@ -15,6 +15,7 @@ const FIELD_TYPES = new Set([
     'textarea',
     'markdown',
     'number',
+    'currency',
     'email',
     'password',
     'dropdown',
@@ -27,6 +28,7 @@ const FIELD_TYPES = new Set([
     'rating',
     'range',
     'reference',
+    'tags',
 ]);
 const KEY_PATTERN = /^[a-z][a-z0-9_]*$/;
 const titleCase = (key) => key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bank20baht-cli",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "description": "Scaffold bun workspaces (bahtui new) and DDD monorepos (React + Elysia + Eden, bahtui create) plus bahtui generators.",
   "license": "MIT",

package/templates/create/README.md.hbs

@@ -13,7 +13,7 @@ bun run dev        # web on :5173, api on :3001
 ## Layout (DDD taxonomy)
 
 ```
-apps/web                 React 19 + Vite
+apps/web                 React 19 + Vite on bank20baht-ui (import each <baht-*> you use in src/main.tsx)
 apps/api                 Elysia — exports `type App`, the Eden type anchor
 libs/shared/eden         treaty<App> — the ONE typed http client
 libs/domain/<d>/model    (later) entities + form JSON, framework-free

package/templates/create/apps/web/index.html.hbs

@@ -4,6 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{name}}</title>
+    <script>
+      // apply the saved <baht-theme-toggle> choice before paint (no flash)
+      try {
+        var t = localStorage.getItem('baht-theme');
+        if (t === 'light' || t === 'dark')
+          document.documentElement.setAttribute('data-baht-theme', t);
+      } catch (e) {}
+    </script>
   </head>
   <body>
     <div id="root"></div>

package/templates/create/apps/web/package.json.hbs

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@{{name}}/eden": "workspace:*",
+    "bank20baht-ui": "^0.18.8",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

package/templates/create/apps/web/src/App.tsx.hbs

@@ -1,20 +1,31 @@
 import { useEffect, useState } from 'react';
 import { api } from '@{{name}}/eden';
-import { describeHealth } from './health';
+import { describeHealth, healthTone, type HealthTone } from './health';
+
+type Status = { label: string; tone: HealthTone | 'neutral' };
 
 export default function App() {
-  const [status, setStatus] = useState('checking api…');
+  const [status, setStatus] = useState<Status>({ label: 'checking api…', tone: 'neutral' });
 
   useEffect(() => {
-    api.health.get().then(({ data, error }) => {
-      setStatus(error ? `api unreachable (start it: bun run dev)` : describeHealth(data));
+    void api.health.get().then(({ data, error }) => {
+      setStatus(
+        error
+          ? { label: 'api unreachable (start it: bun run dev)', tone: 'danger' }
+          : { label: describeHealth(data), tone: healthTone(data) },
+      );
     });
   }, []);
 
   return (
-    <main style={{ fontFamily: 'system-ui', padding: '2rem' }}>
-      <h1>{{name}}</h1>
-      <p>{status}</p>
+    <main className="app">
+      <header className="app-bar">
+        <h1>{{name}}</h1>
+        <baht-theme-toggle />
+      </header>
+      <baht-card heading="API" subtitle="apps/api via libs/shared/eden">
+        <baht-badge tone={status.tone} label={status.label} />
+      </baht-card>
     </main>
   );
 }

package/templates/create/apps/web/src/app.css

@@ -0,0 +1,27 @@
+/* Page chrome only. Components style themselves from the --baht-* tokens. */
+body {
+  margin: 0;
+  background: var(--baht-color-bg);
+  color: var(--baht-color-text);
+  font-family: var(--baht-font-family);
+}
+
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: var(--baht-space-8) var(--baht-space-4);
+  display: grid;
+  gap: var(--baht-space-4);
+}
+
+.app-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.app-bar h1 {
+  margin: 0;
+  font-family: var(--baht-font-display);
+  font-size: 1.5rem;
+}

package/templates/create/apps/web/src/health.test.ts.hbs

@@ -1,14 +1,28 @@
 import { describe, expect, it } from 'bun:test';
-import { describeHealth } from './health';
+import { describeHealth, healthTone } from './health';
+
+const service = '{{name}}-api';
 
 describe('describeHealth', () => {
   it('formats a healthy response', () => {
-    expect(describeHealth({ status: 'ok', service: '{{name}}-api' })).toBe(
-      '{{name}}-api is ok',
-    );
+    expect(describeHealth({ status: 'ok', service })).toBe(`${service} is ok`);
   });
 
   it('handles a missing response', () => {
     expect(describeHealth(null)).toBe('no response from api');
   });
 });
+
+describe('healthTone', () => {
+  it('is success when the api says ok', () => {
+    expect(healthTone({ status: 'ok', service })).toBe('success');
+  });
+
+  it('is warning for any other status', () => {
+    expect(healthTone({ status: 'degraded', service })).toBe('warning');
+  });
+
+  it('is danger with no response', () => {
+    expect(healthTone(null)).toBe('danger');
+  });
+});

package/templates/create/apps/web/src/health.ts.hbs

@@ -1,6 +1,14 @@
 export type Health = { status: string; service: string } | null;
 
+/** `<baht-badge>` status tones the health line uses. */
+export type HealthTone = 'success' | 'danger' | 'warning';
+
 export function describeHealth(health: Health): string {
   if (!health) return 'no response from api';
   return `${health.service} is ${health.status}`;
 }
+
+export function healthTone(health: Health): HealthTone {
+  if (!health) return 'danger';
+  return health.status === 'ok' ? 'success' : 'warning';
+}

package/templates/create/apps/web/src/main.tsx.hbs

@@ -1,8 +1,19 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+// Register only the <baht-*> elements this app renders (one subpath per tag).
+// `import 'bank20baht-ui'` registers all of them, at ~4x the bundle.
+import 'bank20baht-ui/components/badge';
+import 'bank20baht-ui/components/card';
+import 'bank20baht-ui/components/theme-toggle';
+import 'bank20baht-ui/react'; // JSX typings for every <baht-*>
+import 'bank20baht-ui/tokens.css';
+import './app.css';
 import App from './App';
 
-createRoot(document.getElementById('root')!).render(
+const root = document.getElementById('root');
+if (!root) throw new Error('#root missing from index.html');
+
+createRoot(root).render(
   <StrictMode>
     <App />
   </StrictMode>,

package/templates/create/package.json.hbs

@@ -2,7 +2,10 @@
   "name": "{{name}}-monorepo",
   "private": true,
   "type": "module",
-  "workspaces": ["apps/*", "libs/**"],
+  "workspaces": [
+    "apps/*",
+    "libs/**"
+  ],
   "scripts": {
     "dev": "bun run --filter './apps/*' dev",
     "build": "bun run --filter './apps/*' build",
@@ -16,10 +19,17 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
-    "*.{css,json,js,mjs}": ["prettier --write"]
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{css,json,js,mjs}": [
+      "prettier --write"
+    ]
   },
-  "trustedDependencies": ["esbuild"],
+  "trustedDependencies": [
+    "esbuild"
+  ],
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "eslint": "^10.6.0",

package/templates/new/package.json.hbs

@@ -33,7 +33,7 @@
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
     "@types/bun": "^1.3.0",
-    "bank20baht-strict": "0.0.3",
+    "bank20baht-strict": "0.0.5",
     "dependency-cruiser": "^18.3.1",
     "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",