@mohammad-irfan/create-dashboard-kit 1.0.0

package/dist/configBuilder.js

@@ -0,0 +1,573 @@
+import { resolvePresetTokens } from './presets.js';
+export function buildDashboardConfigFile(options) {
+    const tokens = resolvePresetTokens(options.preset, options.primaryColor, options.accentColor);
+    const cardRadiusMap = {
+        small: 'rounded-lg',
+        medium: 'rounded-xl',
+        large: 'rounded-2xl',
+    };
+    const canvasRadiusMap = {
+        small: 'sm',
+        medium: 'md',
+        large: 'lg',
+    };
+    const cardRadiusClass = cardRadiusMap[options.cardRadius] || 'rounded-2xl';
+    const canvasRadiusClass = canvasRadiusMap[options.cardRadius] || 'lg';
+    const demoNav = options.preset === 'cafe'
+        ? `[
+    { id: 'orders', label: 'Active Orders', to: '/orders', icon: 'coffee', badge: 8 },
+    { id: 'kitchen', label: 'Kitchen KDS', to: '/kitchen', icon: 'clipboard', badge: 'Live' },
+    { id: 'menu', label: 'Menu & Recipes', to: '/menu', icon: 'clock' },
+    { id: 'inventory', label: 'Bean & Milk Stock', to: '/inventory', icon: 'check' },
+    { id: 'staff', label: 'Staff Roster', to: '/staff', icon: 'users' },
+    { id: 'sales', label: 'Daily Takings', to: '/sales', icon: 'dollar' },
+    { id: 'settings', label: 'Store Config', to: '/settings', icon: 'settings' },
+  ]`
+        : `[
+    { id: 'overview', label: 'Overview', to: '/dashboard', icon: 'dashboard' },
+    { id: 'projects', label: 'Projects', to: '/projects', icon: 'folder', badge: 12 },
+    { id: 'tasks', label: 'Tasks', to: '/tasks', icon: 'check', badge: 4 },
+    { id: 'team', label: 'Team', to: '/team', icon: 'users' },
+    { id: 'billing', label: 'Billing', to: '/billing', icon: 'dollar' },
+    { id: 'settings', label: 'Settings', to: '/settings', icon: 'settings' },
+  ]`;
+    const demoShortcuts = options.preset === 'cafe'
+        ? `[
+    { id: 'new-ticket', label: 'Quick Order', to: '/orders/new', icon: 'plus' },
+    { id: 'brew-log', label: 'Calibrate Grinder', to: '/equipment', icon: 'coffee' },
+    { id: 'close-shift', label: 'Z-Report', to: '/reports', icon: 'dollar' },
+  ]`
+        : `[
+    { id: 'new-project', label: 'New Project', to: '/projects/new', icon: 'plus' },
+    { id: 'ai-summary', label: 'AI Summary', to: '/insights', icon: 'sparkles' },
+    { id: 'team-invite', label: 'Invite Member', to: '/team/invite', icon: 'users' },
+  ]`;
+    const demoUser = options.preset === 'cafe'
+        ? `{
+    name: 'Matteo Rossi',
+    email: 'headbarista@roastery.cafe',
+    initials: 'MR',
+    profileRoute: '/settings',
+  }`
+        : `{
+    name: 'Alex Morgan',
+    email: 'alex.morgan@workspace.local',
+    initials: 'AM',
+    profileRoute: '/settings',
+  }`;
+    return `// ============================================================================
+// ${options.brandName} — Dashboard Configuration
+// ============================================================================
+// Edit this file to customize navigation, branding, colors, and layout shapes.
+// No core components need to be modified.
+
+import type { ComponentType, SVGProps } from 'react'
+
+export type CanvasRadius = 'none' | 'sm' | 'md' | 'lg' | 'full'
+export type ButtonShape = 'square' | 'rounded' | 'pill'
+
+export interface NavItemConfig {
+  id: string
+  label: string
+  to: string
+  icon?: string | ComponentType<SVGProps<SVGSVGElement>>
+  badge?: string | number
+  end?: boolean
+}
+
+export interface ShortcutConfig {
+  id: string
+  label: string
+  to: string
+  icon?: string | ComponentType<SVGProps<SVGSVGElement>>
+}
+
+export interface UserMenuConfig {
+  name: string
+  email?: string
+  avatarUrl?: string
+  initials?: string
+  profileRoute: string
+  onLogout?: () => void
+}
+
+export interface DashboardConfig {
+  branding: {
+    name: string
+    logoUrl?: string
+    logoIcon?: ComponentType<SVGProps<SVGSVGElement>>
+    tagline?: string
+    homeRoute: string
+  }
+  colors: {
+    primary: { light: string; dark: string }
+    primaryForeground: { light: string; dark: string }
+    background: { light: string; dark: string }
+    canvas: { light: string; dark: string }
+    surface: { light: string; dark: string }
+    surfaceElevated: { light: string; dark: string }
+    border: { light: string; dark: string }
+    accent: { light: string; dark: string }
+  }
+  shapes: {
+    canvasRadius: CanvasRadius
+    cardRadius: string
+    buttonShape: ButtonShape
+  }
+  navigation: NavItemConfig[]
+  shortcuts?: ShortcutConfig[]
+  userMenu: UserMenuConfig
+}
+
+export const dashboardConfig: DashboardConfig = {
+  branding: {
+    name: '${options.brandName.replace(/'/g, "\\'")}',
+    tagline: '${(options.tagline || tokens.taglineDefault).replace(/'/g, "\\'")}',
+    homeRoute: '/dashboard',
+    logoUrl: '/assets/logo.svg',
+  },
+  colors: {
+    primary: {
+      light: '${tokens.primaryLight}',
+      dark: '${tokens.primaryDark}',
+    },
+    primaryForeground: {
+      light: '#ffffff',
+      dark: '#ffffff',
+    },
+    background: {
+      light: '${tokens.backgroundLight}',
+      dark: '${tokens.backgroundDark}',
+    },
+    canvas: {
+      light: '${tokens.canvasLight}',
+      dark: '${tokens.canvasDark}',
+    },
+    surface: {
+      light: '${tokens.surfaceLight}',
+      dark: '${tokens.surfaceDark}',
+    },
+    surfaceElevated: {
+      light: '${tokens.surfaceElevatedLight}',
+      dark: '${tokens.surfaceElevatedDark}',
+    },
+    border: {
+      light: '${tokens.borderLight}',
+      dark: '${tokens.borderDark}',
+    },
+    accent: {
+      light: '${tokens.accentLight}',
+      dark: '${tokens.accentDark}',
+    },
+  },
+  shapes: {
+    canvasRadius: '${canvasRadiusClass}',
+    cardRadius: '${cardRadiusClass}',
+    buttonShape: '${options.buttonShape}',
+  },
+  navigation: ${demoNav},
+  shortcuts: ${demoShortcuts},
+  userMenu: ${demoUser},
+}
+
+export function getCanvasRadiusClass(radius: CanvasRadius): string {
+  switch (radius) {
+    case 'none':
+      return 'rounded-none'
+    case 'sm':
+      return 'sm:rounded-tl-[16px] lg:rounded-tl-[20px]'
+    case 'md':
+      return 'sm:rounded-tl-[24px] lg:rounded-tl-[32px]'
+    case 'lg':
+      return 'sm:rounded-tl-[36px] lg:rounded-tl-[48px]'
+    case 'full':
+      return 'sm:rounded-tl-[60px] lg:rounded-tl-[72px]'
+    default:
+      return 'sm:rounded-tl-[36px] lg:rounded-tl-[48px]'
+  }
+}
+
+export function getButtonShapeClass(shape: ButtonShape): string {
+  switch (shape) {
+    case 'pill':
+      return 'rounded-full'
+    case 'rounded':
+      return 'rounded-xl'
+    case 'square':
+      return 'rounded-md'
+    default:
+      return 'rounded-full'
+  }
+}
+`;
+}
+export function buildTokensCssFile(options) {
+    const tokens = resolvePresetTokens(options.preset, options.primaryColor, options.accentColor);
+    return `/* ============================================================================
+ * ${options.brandName} — Design Tokens
+ * ============================================================================
+ * Generated semantic design tokens for Light & Dark mode.
+ */
+
+:root,
+[data-theme="light"] {
+  --background: ${tokens.backgroundLight};
+  --foreground: #0f172a;
+  --muted-foreground: #64748b;
+  --surface: ${tokens.surfaceLight};
+  --surface-elevated: ${tokens.surfaceElevatedLight};
+  --muted: #eef1f4;
+  --border: ${tokens.borderLight};
+  --input: #ffffff;
+  --canvas-background: ${tokens.canvasLight};
+
+  /* Brand Primary */
+  --primary: ${tokens.primaryLight};
+  --primary-foreground: #ffffff;
+  --ring: ${tokens.primaryLight};
+
+  /* Semantic Feedback */
+  --success: ${tokens.accentLight};
+  --success-fg: ${tokens.accentLight};
+  --success-bg: #ecfdf5;
+  --warning: #d97706;
+  --warning-fg: #b45309;
+  --warning-bg: #fffbeb;
+  --danger: #dc2626;
+  --danger-fg: #b91c1c;
+  --danger-bg: #fef2f2;
+  --info: #0284c7;
+  --info-fg: #0369a1;
+  --info-bg: #f0f9ff;
+
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  --background: ${tokens.backgroundDark};
+  --foreground: #f3f5f7;
+  --muted-foreground: #9aa4b2;
+  --surface: ${tokens.surfaceDark};
+  --surface-elevated: ${tokens.surfaceElevatedDark};
+  --muted: #22262b;
+  --border: ${tokens.borderDark};
+  --input: #1a1a1a;
+  --canvas-background: ${tokens.canvasDark};
+
+  /* Brand Primary */
+  --primary: ${tokens.primaryDark};
+  --primary-foreground: #ffffff;
+  --ring: ${tokens.primaryDark};
+
+  /* Semantic Feedback */
+  --success: ${tokens.accentDark};
+  --success-fg: ${tokens.accentDark};
+  --success-bg: rgba(16, 185, 129, 0.15);
+  --warning: #f59e0b;
+  --warning-fg: #f59e0b;
+  --warning-bg: rgba(245, 158, 11, 0.15);
+  --danger: #ef4444;
+  --danger-fg: #ef4444;
+  --danger-bg: rgba(239, 68, 68, 0.15);
+  --info: #38bdf8;
+  --info-fg: #38bdf8;
+  --info-bg: rgba(56, 189, 248, 0.15);
+
+  color-scheme: dark;
+}
+`;
+}
+export function buildIndexHtml(options) {
+    const storageKey = `${options.projectName.replace(/[^a-zA-Z0-9]/g, '_')}_theme`;
+    return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${options.brandName}</title>
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem('${storageKey}')
+          var theme =
+            stored === 'light' || stored === 'dark'
+              ? stored
+              : window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : '${options.defaultMode === 'system' ? 'light' : options.defaultMode}'
+          document.documentElement.setAttribute('data-theme', theme)
+        } catch (e) {
+          document.documentElement.setAttribute('data-theme', 'light')
+        }
+      })()
+    </script>
+  </head>
+  <body class="dashboard-font-base bg-background text-foreground antialiased selection:bg-primary/20">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`;
+}
+export function buildLogoSvg(options) {
+    const initial = options.brandName.charAt(0).toUpperCase() || 'D';
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48">
+  <defs>
+    <linearGradient id="brandGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="${options.primaryColor || '#2563eb'}" />
+      <stop offset="100%" stop-color="${options.accentColor || '#059669'}" />
+    </linearGradient>
+  </defs>
+  <rect width="48" height="48" rx="14" fill="url(#brandGrad)" />
+  <text x="50%" y="54%" dominant-baseline="middle" text-anchor="middle" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" font-weight="bold" font-size="24" fill="#ffffff">${initial}</text>
+</svg>
+`;
+}
+export function buildAppTsx(options) {
+    const storageKey = `${options.projectName.replace(/[^a-zA-Z0-9]/g, '_')}_theme`;
+    const defaultTheme = options.defaultMode === 'system' ? 'light' : options.defaultMode;
+    if (!options.includeDemo) {
+        return `import { useState } from 'react'
+import { ThemeProvider } from './theme/ThemeContext.tsx'
+import { AppShell } from './components/layout/AppShell.tsx'
+import { PageHeader } from './components/layout/PageHeader.tsx'
+import { Panel } from './components/surfaces/Panel.tsx'
+import { EmptyState } from './components/surfaces/EmptyState.tsx'
+import { Button } from './components/controls/Button.tsx'
+import { dashboardConfig } from './config/dashboard.config.ts'
+
+export function App() {
+  const [currentPath, setCurrentPath] = useState('/dashboard')
+
+  return (
+    <ThemeProvider defaultTheme="${defaultTheme}" storageKey="${storageKey}">
+      <AppShell
+        config={dashboardConfig}
+        currentPath={currentPath}
+        onNavigate={(to) => setCurrentPath(to)}
+        headerActions={
+          <Button variant="primary" size="sm" shape="${options.buttonShape}">
+            Create New
+          </Button>
+        }
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
+          <PageHeader
+            title="Overview"
+            description="${options.brandName} is ready for your product components."
+            actions={
+              <Button variant="outline" size="sm" shape="${options.buttonShape}">
+                Settings
+              </Button>
+            }
+          />
+
+          <Panel title="Welcome to your new Dashboard" subtitle="Extracted from JobTrack's signature visual system.">
+            <EmptyState
+              title="No records yet"
+              description="Start building out your domain surfaces, forms, and metric views using the prebuilt components."
+              actionLabel="Add First Item"
+              onAction={() => alert('Add your business logic here!')}
+            />
+          </Panel>
+        </div>
+      </AppShell>
+    </ThemeProvider>
+  )
+}
+
+export default App
+`;
+    }
+    // With Demo Mode
+    return `import { useState } from 'react'
+import { ThemeProvider } from './theme/ThemeContext.tsx'
+import { AppShell } from './components/layout/AppShell.tsx'
+import { HeroSurface } from './components/surfaces/HeroSurface.tsx'
+import { PriorityCard } from './components/surfaces/PriorityCard.tsx'
+import { Panel } from './components/surfaces/Panel.tsx'
+import { QuietListCard } from './components/surfaces/QuietListCard.tsx'
+import { MetricRow, type MetricItem } from './components/metrics/MetricRow.tsx'
+import { StatusBadge } from './components/feedback/StatusBadge.tsx'
+import { NotificationCenter } from './components/feedback/NotificationCenter.tsx'
+import { Button } from './components/controls/Button.tsx'
+import { dashboardConfig } from './config/dashboard.config.ts'
+
+const DEMO_METRICS: MetricItem[] = ${options.preset === 'cafe'
+        ? `[
+  { id: '1', label: 'Active Orders', value: '24' },
+  { id: '2', label: 'Daily Takings', value: '$3,420' },
+  { id: '3', label: 'Bean Stock', value: '142kg' },
+  { id: '4', label: 'Open Kitchen Tickets', value: '6' },
+]`
+        : `[
+  { id: '1', label: 'Active Projects', value: '18' },
+  { id: '2', label: 'Sprint Velocity', value: '94%' },
+  { id: '3', label: 'Open Tasks', value: '42' },
+  { id: '4', label: 'Team Members', value: '28' },
+]`}
+
+export function App() {
+  const [currentPath, setCurrentPath] = useState('/dashboard')
+
+  return (
+    <ThemeProvider defaultTheme="${defaultTheme}" storageKey="${storageKey}">
+      <AppShell
+        config={dashboardConfig}
+        currentPath={currentPath}
+        onNavigate={(to) => setCurrentPath(to)}
+        headerActions={
+          <div className="flex items-center gap-2">
+            <NotificationCenter
+              notifications={[
+                { id: '1', title: 'System initialized', message: 'Ready for operations', timestamp: 'Just now', read: false },
+                { id: '2', title: 'Weekly summary', message: 'Report compiled', timestamp: '1h ago', read: true },
+              ]}
+            />
+            <Button variant="primary" size="sm" shape="${options.buttonShape}">
+              + Action
+            </Button>
+          </div>
+        }
+      >
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-6">
+          <HeroSurface
+            greeting="${options.preset === 'cafe' ? 'Good Morning' : 'Welcome back'}"
+            title="${options.preset === 'cafe' ? 'Matteo Rossi' : 'Alex Morgan'}"
+            description="${options.preset === 'cafe' ? 'Artisan roast service is live. 6 tickets currently open in kitchen.' : 'Your team is tracking 18 active deliverables across 4 workstreams.'}"
+            statusContext={
+              <div className="flex gap-2">
+                <StatusBadge variant="info">${options.preset === 'cafe' ? 'Morning Rush' : 'Sprint 42'}</StatusBadge>
+                <StatusBadge variant="success">${options.preset === 'cafe' ? 'Optimal Flow' : '94% On Track'}</StatusBadge>
+              </div>
+            }
+            actions={
+              <div className="flex items-center gap-2">
+                <Button variant="secondary" size="sm" shape="${options.buttonShape}">
+                  View Reports
+                </Button>
+                <Button variant="primary" size="sm" shape="${options.buttonShape}">
+                  New Entry
+                </Button>
+              </div>
+            }
+          />
+
+          <MetricRow metrics={DEMO_METRICS} />
+
+          <PriorityCard
+            heading="Next Best Action"
+            badgeText="Priority"
+            title="${options.preset === 'cafe' ? 'Calibrate Espresso Grinders' : 'Quarterly Executive Review'}"
+            description="${options.preset === 'cafe' ? 'Morning ambient humidity changed by 8%. Check extraction time for single origin batch.' : 'Review sprint burn-down chart and update customer satisfaction metrics.'}"
+            action={
+              <Button variant="primary" size="sm" shape="${options.buttonShape}">
+                ${options.preset === 'cafe' ? 'Open Calibration Log' : 'Review Deck'}
+              </Button>
+            }
+          />
+
+          <Panel
+            title="${options.preset === 'cafe' ? 'Live Kitchen Tickets' : 'Recent Project Deliverables'}"
+            action={<Button variant="ghost" size="sm">View All</Button>}
+          >
+            <QuietListCard
+              title="${options.preset === 'cafe' ? 'Kitchen Queue' : 'Deliverables'}"
+              items={[
+                {
+                  id: '1',
+                  title: '${options.preset === 'cafe' ? 'Table 4 • 2x Oat Flat White, 1x Croissant' : 'Core Architecture Redesign'}',
+                  subtitle: '${options.preset === 'cafe' ? 'Barista Station • 3 mins ago' : 'Updated by Sarah • 12 mins ago'}',
+                  avatarText: '${options.preset === 'cafe' ? 'T4' : 'CA'}',
+                  statusBadge: <StatusBadge variant="info" dot>${options.preset === 'cafe' ? 'Brewing' : 'In Progress'}</StatusBadge>,
+                  action: <Button variant="outline" size="sm" shape="${options.buttonShape}">Details</Button>,
+                },
+                {
+                  id: '2',
+                  title: '${options.preset === 'cafe' ? 'Takeaway • 1x Cold Brew, 1x Bag Colombia' : 'Auth Migration to Passkeys'}',
+                  subtitle: '${options.preset === 'cafe' ? 'Front Counter • 8 mins ago' : 'Reviewed by David • 1h ago'}',
+                  avatarText: '${options.preset === 'cafe' ? 'TA' : 'AM'}',
+                  statusBadge: <StatusBadge variant="success" dot>${options.preset === 'cafe' ? 'Ready' : 'Completed'}</StatusBadge>,
+                  action: <Button variant="outline" size="sm" shape="${options.buttonShape}">Details</Button>,
+                },
+              ]}
+            />
+          </Panel>
+        </div>
+      </AppShell>
+    </ThemeProvider>
+  )
+}
+
+export default App
+`;
+}
+export function buildPackageJson(options) {
+    const pkgName = options.projectName.split(/[\\/]/).filter(Boolean).pop() || options.projectName;
+    return JSON.stringify({
+        name: pkgName,
+        private: true,
+        version: '0.1.0',
+        type: 'module',
+        scripts: {
+            dev: 'vite',
+            build: 'tsc -b && vite build',
+            preview: 'vite preview',
+            test: 'node --test',
+        },
+        dependencies: {
+            '@tailwindcss/vite': '^4.3.3',
+            react: '^19.2.8',
+            'react-dom': '^19.2.8',
+            tailwindcss: '^4.3.3',
+        },
+        devDependencies: {
+            '@types/node': '^24.13.3',
+            '@types/react': '^19.2.18',
+            '@types/react-dom': '^19.2.4',
+            '@vitejs/plugin-react': '^6.1.0',
+            typescript: '~6.0.2',
+            vite: '^8.2.2',
+        },
+    }, null, 2);
+}
+export function buildProjectReadme(options) {
+    return `# ${options.brandName}
+
+Modern dashboard application built with React, TypeScript, and Tailwind CSS, based on the JobTrack design system.
+
+---
+
+## Getting Started
+
+### 1. Install Dependencies
+\`\`\`bash
+npm install
+\`\`\`
+
+### 2. Run Development Server
+\`\`\`bash
+npm run dev
+\`\`\`
+
+### 3. Build for Production
+\`\`\`bash
+npm run build
+\`\`\`
+
+---
+
+## Customizing Your Dashboard
+
+All configuration is centralized in:
+\`\`\`
+src/config/dashboard.config.ts
+\`\`\`
+
+- **Navigation**: Update the \`navigation\` array with your product routes and icons.
+- **Branding**: Change \`branding.name\` and \`branding.logoUrl\`.
+- **Colors**: Customize \`colors.primary\` and \`colors.accent\`.
+- **Shapes**: Toggle \`shapes.canvasRadius\` (\`'sm'\` | \`'md'\` | \`'lg'\`) and \`shapes.buttonShape\` (\`'pill'\` | \`'rounded'\` | \`'square'\`).
+`;
+}

package/dist/generator.d.ts

@@ -0,0 +1,9 @@
+import type { GeneratorOptions } from './types.js';
+/**
+ * Finds the source directory containing the generic dashboard starter kit components.
+ */
+export declare function resolveStarterKitSrc(): string;
+export declare function generateProject(options: GeneratorOptions): {
+    success: boolean;
+    targetDir: string;
+};