create-fullstack-scaffold 0.1.1 → 0.2.0

package/template/src/cli/modules/notification/index.ts

@@ -1,86 +1,102 @@
-import { Command } from 'commander'
+import type { SiteInstance } from '@dyyz1993/xcli-core'
+import { ok, fail } from '@dyyz1993/xcli-core'
+import { z } from 'zod'
 import { getClient } from '@cli/utils/api'
-import { getLogger } from '@cli/utils/logger'
 
-export function registerNotificationCommands(program: Command) {
-  const notification = program
-    .command('notification')
-    .description('Notification management commands')
+export function registerNotificationCommands(site: SiteInstance) {
+  site.command('list', {
+    description: 'List all notifications',
+    parameters: z.object({
+      'unread-only': z.boolean().default(false).describe('Show only unread'),
+      limit: z.coerce.number().default(20).describe('Limit results'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { 'unread-only': boolean; limit: number }
+      try {
+        const client = getClient()
+        const res = await client.api.notifications.$get({
+          query: { unreadOnly: String(p['unread-only']), limit: String(p.limit) },
+        })
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to list notifications')
+      }
+    },
+  })
 
-  notification
-    .command('list')
-    .description('List all notifications')
-    .option('--unread-only', 'Show only unread notifications')
-    .option('--limit <number>', 'Limit number of results', '20')
-    .action(async (options: { unreadOnly?: boolean; limit?: string }) => {
-      const logger = getLogger()
-      const client = getClient()
-      const unreadOnly = Boolean(options.unreadOnly)
-      const limit = parseInt(options.limit || '20')
+  site.command('create', {
+    description: 'Create a new notification',
+    parameters: z.object({
+      title: z.string().min(1).describe('Notification title'),
+      message: z.string().min(1).describe('Notification message'),
+      type: z.enum(['info', 'warning', 'success', 'error']).default('info').describe('Type'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as {
+        title: string
+        message: string
+        type: 'info' | 'warning' | 'success' | 'error'
+      }
+      try {
+        const client = getClient()
+        const res = await client.api.notifications.$post({ json: p })
+        const data = await res.json()
+        return ok(data, ['Notification created'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to create notification')
+      }
+    },
+  })
 
-      const res = await client.api.notifications.$get({
-        query: { unreadOnly: String(unreadOnly), limit: String(limit) },
-      })
-      const data = await res.json()
-      logger.info(JSON.stringify(data, null, 2))
-    })
+  site.command('unread-count', {
+    description: 'Get unread notification count',
+    parameters: z.object({}),
+    handler: async () => {
+      try {
+        const client = getClient()
+        const res = await client.api.notifications['unread-count'].$get()
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to get unread count')
+      }
+    },
+  })
 
-  notification
-    .command('create')
-    .description('Create a new notification')
-    .requiredOption('-t, --title <title>', 'Notification title')
-    .requiredOption('-m, --message <message>', 'Notification message')
-    .option('--type <type>', 'Notification type (info|warning|success|error)', 'info')
-    .action(async (options: { title: string; message: string; type: string }) => {
-      const logger = getLogger()
-      const client = getClient()
+  site.command('mark-read', {
+    description: 'Mark a notification as read',
+    parameters: z.object({
+      id: z.string().describe('Notification ID'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { id: string }
+      try {
+        const client = getClient()
+        const res = await client.api.notifications[':id'].read.$patch({ param: { id: p.id } })
+        const data = await res.json()
+        return ok(data, ['Marked as read'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to mark as read')
+      }
+    },
+  })
 
-      const res = await client.api.notifications.$post({
-        json: {
-          type: options.type as 'info' | 'warning' | 'success' | 'error',
-          title: options.title,
-          message: options.message,
-        },
-      })
-      const data = await res.json()
-      logger.success('Notification created')
-      logger.info(JSON.stringify(data, null, 2))
-    })
-
-  notification
-    .command('unread-count')
-    .description('Get unread notification count')
-    .action(async () => {
-      const logger = getLogger()
-      const client = getClient()
-      const res = await client.api.notifications['unread-count'].$get()
-      const data = await res.json()
-      logger.info(JSON.stringify(data, null, 2))
-    })
-
-  notification
-    .command('mark-read')
-    .description('Mark a notification as read')
-    .argument('<id>', 'Notification ID')
-    .action(async (id: string) => {
-      const logger = getLogger()
-      const client = getClient()
-      const res = await client.api.notifications[':id'].read.$patch({ param: { id } })
-      const data = await res.json()
-      logger.success('Notification marked as read')
-      logger.info(JSON.stringify(data, null, 2))
-    })
-
-  notification
-    .command('delete')
-    .description('Delete a notification')
-    .argument('<id>', 'Notification ID')
-    .action(async (id: string) => {
-      const logger = getLogger()
-      const client = getClient()
-      const res = await client.api.notifications[':id'].$delete({ param: { id } })
-      const data = await res.json()
-      logger.success('Notification deleted')
-      logger.info(JSON.stringify(data, null, 2))
-    })
+  site.command('delete', {
+    description: 'Delete a notification',
+    parameters: z.object({
+      id: z.string().describe('Notification ID'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { id: string }
+      try {
+        const client = getClient()
+        const res = await client.api.notifications[':id'].$delete({ param: { id: p.id } })
+        const data = await res.json()
+        return ok(data, ['Notification deleted'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to delete notification')
+      }
+    },
+  })
 }

package/template/src/cli/modules/plugin/index.ts

@@ -0,0 +1,111 @@
+import type { SiteInstance } from '@dyyz1993/xcli-core'
+import { ok, fail } from '@dyyz1993/xcli-core'
+import { z } from 'zod'
+import { getClient } from '@cli/utils/api'
+
+export function registerPluginCommands(site: SiteInstance) {
+  site.command('list', {
+    description: 'List all plugins',
+    parameters: z.object({
+      limit: z.coerce.number().default(20).describe('Limit results'),
+      page: z.coerce.number().default(1).describe('Page number'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { limit: number; page: number }
+      try {
+        const client = getClient()
+        const res = await client.api.plugins.$get({
+          query: { limit: String(p.limit), page: String(p.page) },
+        })
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to list plugins')
+      }
+    },
+  })
+
+  site.command('search', {
+    description: 'Search plugins',
+    parameters: z.object({
+      query: z.string().min(1).describe('Search query'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { query: string }
+      try {
+        const client = getClient()
+        const res = await client.api.plugins.search.$get({ query: { q: p.query } })
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to search plugins')
+      }
+    },
+  })
+
+  site.command('get', {
+    description: 'Get plugin details',
+    parameters: z.object({
+      slug: z.string().describe('Plugin slug'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { slug: string }
+      try {
+        const client = getClient()
+        const res = await client.api.plugins[':slug'].$get({ param: { slug: p.slug } })
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to get plugin')
+      }
+    },
+  })
+
+  site.command('install', {
+    description: 'Track plugin install',
+    parameters: z.object({
+      slug: z.string().describe('Plugin slug'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { slug: string }
+      try {
+        const client = getClient()
+        const res = await client.api.plugins[':slug'].install.$post({ param: { slug: p.slug } })
+        const data = await res.json()
+        return ok(data, ['Install tracked'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to track install')
+      }
+    },
+  })
+
+  site.command('categories', {
+    description: 'List plugin categories',
+    parameters: z.object({}),
+    handler: async () => {
+      try {
+        const client = getClient()
+        const res = await client.api.categories.$get()
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to list categories')
+      }
+    },
+  })
+
+  site.command('stats', {
+    description: 'Show marketplace statistics',
+    parameters: z.object({}),
+    handler: async () => {
+      try {
+        const client = getClient()
+        const res = await client.api.stats.$get()
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to get stats')
+      }
+    },
+  })
+}

package/template/src/cli/modules/todo/index.ts

@@ -1,60 +1,108 @@
-import { Command } from 'commander'
-import { registerAutoCommand, type RouteConfig } from '@cli/utils/auto-command'
-import { z } from '@hono/zod-openapi'
+import type { SiteInstance } from '@dyyz1993/xcli-core'
+import { ok, fail } from '@dyyz1993/xcli-core'
+import { z } from 'zod'
+import { getClient } from '@cli/utils/api'
 
-const TodoStatusSchema = z.enum(['pending', 'in_progress', 'completed'])
-
-const todoRoutes: RouteConfig[] = [
-  {
-    method: 'get',
-    path: '/todos',
-    command: 'list',
+export function registerTodoCommands(site: SiteInstance) {
+  site.command('list', {
     description: 'List all todos',
-  },
-  {
-    method: 'get',
-    path: '/todos/{id}',
-    command: 'get',
+    parameters: z.object({
+      limit: z.coerce.number().default(20).describe('Limit results'),
+    }),
+    handler: async () => {
+      try {
+        const client = getClient()
+        const res = await client.api.todos.$get()
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to list todos')
+      }
+    },
+  })
+
+  site.command('get', {
     description: 'Get a todo by ID',
-    params: z.object({ id: z.string() }),
-  },
-  {
-    method: 'post',
-    path: '/todos',
-    command: 'create',
+    parameters: z.object({
+      id: z.string().describe('Todo ID'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { id: string }
+      try {
+        const client = getClient()
+        const res = await client.api.todos[':id'].$get({ param: { id: p.id } })
+        const data = await res.json()
+        return ok(data)
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to get todo')
+      }
+    },
+  })
+
+  site.command('create', {
     description: 'Create a new todo',
-    body: z.object({
-      title: z.string().min(1),
-      description: z.string().optional(),
+    parameters: z.object({
+      title: z.string().min(1).describe('Todo title'),
+      description: z.string().optional().describe('Todo description'),
     }),
-  },
-  {
-    method: 'put',
-    path: '/todos/{id}',
-    command: 'update',
+    handler: async (params: unknown) => {
+      const p = params as { title: string; description?: string }
+      try {
+        const client = getClient()
+        const res = await client.api.todos.$post({ json: p })
+        const data = await res.json()
+        return ok(data, ['Todo created'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to create todo')
+      }
+    },
+  })
+
+  site.command('update', {
     description: 'Update a todo',
-    params: z.object({ id: z.string() }),
-    body: z.object({
-      title: z.string().optional(),
-      description: z.string().optional(),
-      status: TodoStatusSchema.optional(),
+    parameters: z.object({
+      id: z.string().describe('Todo ID'),
+      title: z.string().optional().describe('New title'),
+      description: z.string().optional().describe('New description'),
+      status: z.enum(['pending', 'in_progress', 'completed']).optional().describe('New status'),
     }),
-  },
-  {
-    method: 'delete',
-    path: '/todos/{id}',
-    command: 'delete',
-    description: 'Delete a todo',
-    params: z.object({ id: z.string() }),
-  },
-]
-
-export function registerTodoCommands(program: Command) {
-  const todo = program.command('todo').description('Todo management commands')
+    handler: async (params: unknown) => {
+      const p = params as {
+        id: string
+        title?: string
+        description?: string
+        status?: 'pending' | 'in_progress' | 'completed'
+      }
+      try {
+        const { id, ...body } = p
+        const client = getClient()
+        const res = await client.api.todos[':id'].$put({
+          param: { id },
+          json: body,
+        })
+        const data = await res.json()
+        return ok(data, ['Todo updated'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to update todo')
+      }
+    },
+  })
 
-  for (const route of todoRoutes) {
-    registerAutoCommand(todo, route)
-  }
+  site.command('delete', {
+    description: 'Delete a todo',
+    parameters: z.object({
+      id: z.string().describe('Todo ID'),
+    }),
+    handler: async (params: unknown) => {
+      const p = params as { id: string }
+      try {
+        const client = getClient()
+        const res = await client.api.todos[':id'].$delete({ param: { id: p.id } })
+        const data = await res.json()
+        return ok(data, ['Todo deleted'])
+      } catch (err) {
+        return fail(err instanceof Error ? err.message : 'Failed to delete todo')
+      }
+    },
+  })
 }
-
-export { todoRoutes }

package/template/src/cli/utils/auto-command.ts

@@ -1,4 +1,7 @@
-import { Command } from 'commander'
+// NOTE: This file is preserved for Phase 2 RPC auto-mapping migration.
+// The registerAutoCommand function will be rewritten to use xcli-core's site.command().
+// The utility functions (extractZodInfo, createCommandFromRoute, etc.) remain usable.
+
 import type { ZodType, ZodObject, ZodOptional } from 'zod'
 import { getClient } from './api'
 import { getLogger } from './logger'
@@ -201,29 +204,8 @@ export function createCommandFromRoute(config: RouteConfig): CliCommandConfig {
   }
 }
 
-export function registerAutoCommand(program: Command, config: RouteConfig) {
-  const cmd = createCommandFromRoute(config)
-
-  const command = program
-    .command(cmd.name)
-    .description(cmd.description)
-    .action(async (firstArg, opts) => {
-      const args = typeof firstArg === 'string' ? [firstArg] : []
-      const options = (typeof firstArg === 'object' ? firstArg : opts) || {}
-      await cmd.action(options, args)
-    })
-
-  cmd.options?.forEach(opt => {
-    if (opt.required) {
-      command.requiredOption(opt.flags, opt.description, opt.defaultValue)
-    } else {
-      command.option(opt.flags, opt.description, opt.defaultValue)
-    }
-  })
-
-  cmd.arguments?.forEach(arg => {
-    command.argument(arg.required ? `<${arg.name}>` : `[${arg.name}]`, arg.description)
-  })
-}
+// NOTE: registerAutoCommand was removed during xcli-core migration (Phase 1).
+// It will be replaced with a xcli-core version in Phase 2 (RPC auto-mapping).
 
 export { type RouteConfig, type CliCommandConfig }
+export { extractZodInfo, schemaToOptions, pathToApiCall }

package/template/src/cli/utils/index.ts

@@ -1,8 +1,10 @@
 export { createLogger, getLogger, Logger, type LogLevel, type LoggerOptions } from './logger'
 export { setBaseUrl, getBaseUrl, getClient } from './api'
 export {
-  registerAutoCommand,
   createCommandFromRoute,
+  extractZodInfo,
+  schemaToOptions,
+  pathToApiCall,
   type RouteConfig,
   type CliCommandConfig,
 } from './auto-command'

package/template/src/client/App.tsx

@@ -1,24 +1,44 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { Layout } from './Layout'
-import { TodoPage } from './pages/TodoPage'
-import { NotificationPage } from './pages/NotificationPage'
-import { WebSocketPage } from './pages/WebSocketPage'
-import { ContentListPage } from './pages/ContentListPage'
-import { ContentDetailPage } from './pages/ContentDetailPage'
+import { PresetProvider } from './contexts/PresetContext'
+import { getPresetUIConfig, type RouteDef } from './preset-ui-config'
+
+export const App: React.FC<{ presetId?: string }> = ({ presetId = 'todo' }) => {
+  const config = getPresetUIConfig(presetId)
+  const { theme, desktopNav, mobileTabs, defaultRoute, routes, layout, navigation } = config
 
-export const App: React.FC = () => {
   return (
     <BrowserRouter>
-      <Layout>
-        <Routes>
-          <Route path="/" element={<Navigate to="/todos" replace />} />
-          <Route path="/todos" element={<TodoPage />} />
-          <Route path="/notifications" element={<NotificationPage />} />
-          <Route path="/websocket" element={<WebSocketPage />} />
-          <Route path="/content" element={<ContentListPage />} />
-          <Route path="/content/:id" element={<ContentDetailPage />} />
-        </Routes>
-      </Layout>
+      <PresetProvider value={presetId}>
+        <Layout
+          preset={presetId}
+          layout={layout}
+          theme={theme}
+          navigation={navigation}
+          desktopNav={desktopNav}
+          mobileTabs={mobileTabs}
+        >
+          <Routes>
+            <Route path="/" element={<Navigate to={defaultRoute} replace />} />
+            {routes
+              .filter(
+                (r): r is RouteDef & { component: NonNullable<RouteDef['component']> } =>
+                  r.component !== null
+              )
+              .map(route => (
+                <Route key={route.path} path={route.path} element={<route.component />} />
+              ))}
+            <Route
+              path="*"
+              element={
+                <div className="flex items-center justify-center min-h-[50vh] text-gray-400">
+                  404 - Page not found
+                </div>
+              }
+            />
+          </Routes>
+        </Layout>
+      </PresetProvider>
     </BrowserRouter>
   )
 }

package/template/src/client/Layout.tsx

@@ -1,27 +1,84 @@
 import { ReactNode } from 'react'
 import { Navigation } from './components/Navigation'
 import { Footer } from './components/Footer'
+import { BottomTabBar } from './components/BottomTabBar'
+import type {
+  PresetTheme,
+  ClientNavItem,
+  TabItem,
+  LayoutType,
+  NavigationConfig,
+} from './preset-ui-config'
+
+export type PresetType = string
 
 interface LayoutProps {
   children: ReactNode
   className?: string
-  showNavigation?: boolean
-  showFooter?: boolean
+  preset?: PresetType
+  layout?: LayoutType
+  theme?: PresetTheme
+  navigation?: NavigationConfig
+  desktopNav?: ClientNavItem[]
+  mobileTabs?: TabItem[]
 }
 
 export const Layout: React.FC<LayoutProps> = ({
   children,
-  className = '',
-  showNavigation = true,
-  showFooter = true,
+  className: classNameProp = '',
+  preset = 'todo',
+  layout = 'top-nav',
+  theme,
+  navigation,
+  desktopNav,
+  mobileTabs,
 }) => {
+  const cssVars = theme
+    ? ({
+        '--preset-primary': theme.primaryColor,
+        '--preset-primary-hover': theme.primaryHover,
+        '--preset-bg': theme.bgColor,
+        '--preset-text': theme.textColor,
+        '--preset-secondary-bg': theme.secondaryBg,
+        '--preset-border': theme.borderColor,
+        '--preset-radius': theme.borderRadius,
+      } as React.CSSProperties)
+    : undefined
+
+  const navVisible = navigation?.visible !== false
+  const showFooter = layout === 'top-nav'
+
   return (
-    <div className={`min-h-screen bg-gray-50 ${className}`} data-testid="app-container">
-      {showNavigation && <Navigation />}
-      <main className="py-8" data-testid="app-main">
-        {children}
-      </main>
+    <div
+      className={`min-h-screen bg-white text-gray-900 ${classNameProp}`}
+      style={{
+        fontFamily:
+          theme?.fontFamily ?? "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        ...cssVars,
+        overflowX: 'hidden',
+      }}
+      data-testid="app-container"
+    >
+      {navVisible && layout === 'top-nav' && (
+        <Navigation preset={preset} items={desktopNav} theme={theme} navigation={navigation} />
+      )}
+
+      {layout === 'minimal' ? (
+        <main data-testid="app-main">{children}</main>
+      ) : (
+        <main
+          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 pb-24 md:pb-8"
+          data-testid="app-main"
+        >
+          {children}
+        </main>
+      )}
+
       {showFooter && <Footer />}
+
+      {mobileTabs && mobileTabs.length > 0 && layout !== 'minimal' && (
+        <BottomTabBar tabs={mobileTabs} theme={theme} />
+      )}
     </div>
   )
 }