create-quadrokit 0.2.11 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quadrokit",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Scaffold a QuadroKit Vite + React app from a template",
   "type": "module",
   "bin": "./dist/index.mjs",

package/templates/README.md

@@ -4,10 +4,10 @@ Vite + React 19 + React Router 7 + **Tailwind 3.4** + **i18next** + **react-hook
 
 | Template | Use case |
 |----------|----------|
-| `dashboard` | Default shell, agencies sample page, form demo |
-| `website` | Marketing-style hero + same stack |
-| `ecommerce` | Product-card style placeholder |
-| `admin-shell` | Sidebar + main content layout |
+| `dashboard` | Default shell, **Recharts** overview (static KPIs + graphs), sample-data route, form demo |
+| `website` | Marketing-style hero + same stack (static `/sample-data`) |
+| `ecommerce` | Product-card style placeholder + static `/sample-data` |
+| `admin-shell` | Sidebar + main layout + static `/sample-data` |
 
 ## Monorepo
 

package/templates/admin-shell/src/components/layout/AppShell.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@quadrokit/ui'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Outlet } from 'react-router-dom'
+import { PageHeading } from './PageHeading'
+import { Sidebar } from './Sidebar'
+import { TopHeader } from './TopHeader'
+
+export function AppShell() {
+  const { t } = useTranslation()
+  const [mobileNavOpen, setMobileNavOpen] = useState(false)
+
+  return (
+    <div className="flex min-h-dvh bg-background text-foreground">
+      <div className="hidden w-56 shrink-0 border-r border-border md:block">
+        <Sidebar className="sticky top-0 h-dvh" />
+      </div>
+
+      <div
+        className={cn(
+          'fixed inset-0 z-50 md:hidden',
+          mobileNavOpen ? 'pointer-events-auto' : 'pointer-events-none'
+        )}
+        aria-hidden={!mobileNavOpen}
+      >
+        <button
+          type="button"
+          className={cn(
+            'absolute inset-0 bg-background/80 backdrop-blur-sm transition-opacity',
+            mobileNavOpen ? 'opacity-100' : 'opacity-0'
+          )}
+          aria-label={t('layout.close_menu')}
+          tabIndex={mobileNavOpen ? 0 : -1}
+          onClick={() => setMobileNavOpen(false)}
+        />
+        <div
+          className={cn(
+            'absolute left-0 top-0 h-full w-56 max-w-[85vw] border-r border-border bg-card shadow-lg transition-transform',
+            mobileNavOpen ? 'translate-x-0' : '-translate-x-full'
+          )}
+        >
+          <Sidebar onNavigate={() => setMobileNavOpen(false)} />
+        </div>
+      </div>
+
+      <div className="flex min-w-0 flex-1 flex-col">
+        <TopHeader onMenuClick={() => setMobileNavOpen(true)} />
+        <main className="flex-1 overflow-auto px-4 py-6 md:px-6 lg:px-8">
+          <PageHeading />
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  )
+}

package/templates/admin-shell/src/components/layout/LanguageSwitcher.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+
+const LOCALES = [
+  { code: 'en', labelKey: 'layout.lang_en' as const },
+  { code: 'fr', labelKey: 'layout.lang_fr' as const },
+] as const
+
+export function LanguageSwitcher() {
+  const { i18n, t } = useTranslation()
+  const lng = i18n.resolvedLanguage ?? i18n.language
+
+  return (
+    <fieldset className="m-0 flex min-w-0 items-center gap-1 rounded-md border border-border bg-card p-0.5">
+      <legend className="sr-only">{t('layout.language')}</legend>
+      {LOCALES.map(({ code, labelKey }) => (
+        <Button
+          key={code}
+          type="button"
+          size="sm"
+          variant={lng.startsWith(code) ? 'default' : 'ghost'}
+          className="h-8 px-2 text-xs"
+          onClick={() => {
+            void i18n.changeLanguage(code)
+            try {
+              localStorage.setItem('quadrokit:lng', code)
+            } catch {
+              /* ignore */
+            }
+          }}
+        >
+          {t(labelKey)}
+        </Button>
+      ))}
+    </fieldset>
+  )
+}

package/templates/admin-shell/src/components/layout/NotificationsMenu.tsx

@@ -0,0 +1,79 @@
+import { Button, useDismissOnInteractOutside } from '@quadrokit/ui'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/** Static notification list — replace with real data / subscriptions later. */
+const PLACEHOLDER_ITEMS = [
+  { id: '1', titleKey: 'layout.notif_1' as const, timeKey: 'layout.notif_time_1' as const },
+  { id: '2', titleKey: 'layout.notif_2' as const, timeKey: 'layout.notif_time_2' as const },
+] as const
+
+export function NotificationsMenu() {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useDismissOnInteractOutside({
+    enabled: open,
+    containerRef: rootRef,
+    onDismiss: () => setOpen(false),
+  })
+
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="relative h-9 w-9 shrink-0"
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        aria-label={t('layout.notifications')}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <BellIcon className="h-4 w-4" />
+        <span className="absolute right-1 top-1 h-2 w-2 rounded-full bg-destructive" aria-hidden />
+      </Button>
+      {open ? (
+        <div
+          className="absolute right-0 z-50 mt-1 w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-border bg-popover p-2 text-sm text-popover-foreground shadow-lg"
+          role="dialog"
+          aria-label={t('layout.notifications')}
+        >
+          <p className="border-b border-border px-2 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+            {t('layout.notifications')}
+          </p>
+          <ul className="max-h-64 overflow-auto py-1">
+            {PLACEHOLDER_ITEMS.map((item) => (
+              <li key={item.id} className="rounded-md px-2 py-2 hover:bg-muted/60">
+                <p className="font-medium leading-snug">{t(item.titleKey)}</p>
+                <p className="text-xs text-muted-foreground">{t(item.timeKey)}</p>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function BellIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <title>Notifications</title>
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+    </svg>
+  )
+}

package/templates/admin-shell/src/components/layout/PageHeading.tsx

@@ -0,0 +1,40 @@
+import { useTranslation } from 'react-i18next'
+import { Link, useLocation, useMatches } from 'react-router-dom'
+import type { AppRouteHandle } from '@/types/router'
+
+export function PageHeading() {
+  const { t } = useTranslation()
+  const { pathname } = useLocation()
+  const matches = useMatches()
+  const leaf = matches[matches.length - 1]
+  const handle = leaf?.handle as AppRouteHandle | undefined
+
+  const segmentKey =
+    pathname === '/'
+      ? ('breadcrumb.segment_home' as const)
+      : pathname === '/sample-data'
+        ? ('breadcrumb.segment_sample_data' as const)
+        : ('breadcrumb.segment_unknown' as const)
+
+  return (
+    <header className="mb-6">
+      <nav
+        aria-label={t('layout.breadcrumb_label')}
+        className="mb-3 flex flex-wrap items-center gap-2 text-sm text-muted-foreground"
+      >
+        <Link to="/" className="hover:text-foreground">
+          {t('breadcrumb.app')}
+        </Link>
+        <span aria-hidden className="text-border">
+          /
+        </span>
+        <span className="font-medium text-foreground">{t(segmentKey)}</span>
+      </nav>
+      {handle?.pageTitleKey ? (
+        <h1 className="text-2xl font-semibold tracking-tight md:text-3xl">
+          {t(handle.pageTitleKey)}
+        </h1>
+      ) : null}
+    </header>
+  )
+}

package/templates/admin-shell/src/components/layout/Sidebar.tsx

@@ -0,0 +1,65 @@
+import { cn } from '@quadrokit/ui'
+import { useTranslation } from 'react-i18next'
+import { Link, NavLink } from 'react-router-dom'
+
+export type SidebarProps = {
+  className?: string
+  onNavigate?: () => void
+}
+
+export function Sidebar({ className, onNavigate }: SidebarProps) {
+  const { t } = useTranslation()
+
+  const linkClass = ({ isActive }: { isActive: boolean }) =>
+    cn(
+      'rounded-md px-3 py-2 text-sm transition-colors',
+      isActive
+        ? 'bg-primary/15 font-medium text-foreground'
+        : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
+    )
+
+  return (
+    <aside className={cn('flex h-full flex-col border-border bg-card/50', className)}>
+      <div className="flex h-14 items-center border-b border-border px-4">
+        <Link to="/" className="text-lg font-semibold tracking-tight" onClick={onNavigate}>
+          {t('app.title')}
+        </Link>
+      </div>
+      <nav className="flex-1 space-y-6 overflow-y-auto p-3" aria-label={t('layout.sidebar_nav')}>
+        <div>
+          <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {t('layout.nav_section_overview')}
+          </p>
+          <div className="flex flex-col gap-0.5">
+            <NavLink to="/" end className={linkClass} onClick={onNavigate}>
+              {t('app.nav_home')}
+            </NavLink>
+            <NavLink to="/sample-data" className={linkClass} onClick={onNavigate}>
+              {t('app.nav_sample_data')}
+            </NavLink>
+          </div>
+        </div>
+        <div>
+          <p className="mb-2 px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {t('layout.nav_section_apps')}
+          </p>
+          <p className="px-3 text-sm text-muted-foreground">{t('layout.nav_apps_placeholder')}</p>
+        </div>
+      </nav>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-3 rounded-lg border border-border bg-background/80 p-2">
+          <div
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/20 text-xs font-semibold text-primary"
+            aria-hidden
+          >
+            {t('layout.user_initials')}
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium leading-tight">{t('layout.user_name')}</p>
+            <p className="truncate text-xs text-muted-foreground">{t('layout.user_role')}</p>
+          </div>
+        </div>
+      </div>
+    </aside>
+  )
+}

package/templates/admin-shell/src/components/layout/ThemeMenu.tsx

@@ -0,0 +1,90 @@
+import {
+  Button,
+  type QuadroThemePreset,
+  quadroThemes,
+  themeLabels,
+  useDismissOnInteractOutside,
+  useTheme,
+} from '@quadrokit/ui'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+/** Compact theme + color mode controls for the header (same behavior as `ThemeToolbar`). */
+export function ThemeMenu() {
+  const { t } = useTranslation()
+  const { preset, setPreset, colorMode, setColorMode, resolvedMode } = useTheme()
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement>(null)
+
+  useDismissOnInteractOutside({
+    enabled: open,
+    containerRef: rootRef,
+    onDismiss: () => setOpen(false),
+  })
+
+  return (
+    <div ref={rootRef} className="relative">
+      <Button
+        type="button"
+        variant="outline"
+        className="h-9 px-3"
+        aria-expanded={open}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((o) => !o)}
+      >
+        {t('layout.theme')}
+      </Button>
+      {open ? (
+        <div
+          className="absolute right-0 z-50 mt-1 w-72 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg"
+          role="dialog"
+          aria-label={t('layout.theme')}
+        >
+          <p className="mb-2 text-xs font-medium text-muted-foreground">
+            {t('layout.theme_presets')}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            {quadroThemes.map((p: QuadroThemePreset) => (
+              <Button
+                key={p}
+                type="button"
+                size="sm"
+                variant={preset === p ? 'default' : 'outline'}
+                onClick={() => setPreset(p)}
+              >
+                {themeLabels[p]}
+              </Button>
+            ))}
+          </div>
+          <p className="mb-2 mt-3 text-xs font-medium text-muted-foreground">
+            {t('layout.theme_mode')}
+          </p>
+          <div className="flex flex-wrap gap-1">
+            {(
+              [
+                ['light', 'layout.mode_light'],
+                ['dark', 'layout.mode_dark'],
+                ['system', 'layout.mode_system'],
+              ] as const
+            ).map(([m, labelKey]) => (
+              <Button
+                key={m}
+                type="button"
+                size="sm"
+                variant={colorMode === m ? 'default' : 'ghost'}
+                onClick={() => setColorMode(m)}
+              >
+                {t(labelKey)}
+              </Button>
+            ))}
+          </div>
+          <p className="mt-2 text-xs text-muted-foreground">
+            {t('layout.theme_resolved', {
+              mode: resolvedMode === 'dark' ? t('layout.mode_dark') : t('layout.mode_light'),
+            })}
+          </p>
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/templates/admin-shell/src/components/layout/TopHeader.tsx

@@ -0,0 +1,78 @@
+import { Button, Input } from '@quadrokit/ui'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LanguageSwitcher } from './LanguageSwitcher'
+import { NotificationsMenu } from './NotificationsMenu'
+import { ThemeMenu } from './ThemeMenu'
+
+export type TopHeaderProps = {
+  onMenuClick: () => void
+}
+
+export function TopHeader({ onMenuClick }: TopHeaderProps) {
+  const { t } = useTranslation()
+  const [searchQuery, setSearchQuery] = useState('')
+
+  return (
+    <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center gap-3 border-b border-border bg-background/95 px-3 backdrop-blur supports-[backdrop-filter]:bg-background/80 md:px-4">
+      <Button
+        type="button"
+        variant="outline"
+        size="icon"
+        className="h-9 w-9 md:hidden"
+        aria-label={t('layout.open_menu')}
+        onClick={onMenuClick}
+      >
+        <MenuIcon className="h-4 w-4" />
+      </Button>
+      <div className="min-w-0 flex-1 max-w-md">
+        <Input
+          type="search"
+          placeholder={t('layout.search_placeholder')}
+          className="h-9 bg-card"
+          aria-label={t('layout.search_placeholder')}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          autoComplete="off"
+        />
+      </div>
+      <div className="ml-auto flex shrink-0 items-center gap-2">
+        <LanguageSwitcher />
+        <ThemeMenu />
+        <NotificationsMenu />
+        <div className="hidden items-center gap-2 border-l border-border pl-3 sm:flex">
+          <div
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/15 text-xs font-semibold text-primary"
+            aria-hidden
+          >
+            {t('layout.user_initials')}
+          </div>
+          <div className="hidden leading-tight lg:block">
+            <p className="text-sm font-medium">{t('layout.user_name')}</p>
+            <p className="text-xs text-muted-foreground">{t('layout.user_role')}</p>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+function MenuIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      className={className}
+      aria-hidden="true"
+      focusable="false"
+    >
+      <title>Menu</title>
+      <line x1="4" x2="20" y1="6" y2="6" />
+      <line x1="4" x2="20" y1="12" y2="12" />
+      <line x1="4" x2="20" y1="18" y2="18" />
+    </svg>
+  )
+}

package/templates/admin-shell/src/i18n.ts

@@ -1,10 +1,24 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import en from './locales/en.json'
+import fr from './locales/fr.json'
+
+function storedLng(): string | undefined {
+  try {
+    const v = localStorage.getItem('quadrokit:lng')
+    if (v === 'en' || v === 'fr') return v
+  } catch {
+    /* ignore */
+  }
+  return undefined
+}
 
 void i18n.use(initReactI18next).init({
-  resources: { en: { translation: en } },
-  lng: 'en',
+  resources: {
+    en: { translation: en },
+    fr: { translation: fr },
+  },
+  lng: storedLng() ?? 'en',
   fallbackLng: 'en',
   interpolation: { escapeValue: false },
 })

package/templates/admin-shell/src/locales/en.json

@@ -3,9 +3,56 @@
     "title": "QuadroKit",
     "tagline": "Admin shell with sidebar — same stack, denser layout.",
     "nav_home": "Home",
-    "nav_agencies": "Agencies",
+    "nav_sample_data": "Sample data",
     "session_cookie": "Expected 4D session cookie: {{name}}"
   },
+  "pages": {
+    "home": {
+      "title": "Business overview"
+    }
+  },
+  "breadcrumb": {
+    "app": "QuadroKit",
+    "segment_home": "Home",
+    "segment_sample_data": "Sample data",
+    "segment_unknown": "Page"
+  },
+  "layout": {
+    "sidebar_nav": "Main navigation",
+    "nav_section_overview": "Overview",
+    "nav_section_apps": "Apps",
+    "nav_apps_placeholder": "More apps can be linked here.",
+    "breadcrumb_label": "Breadcrumb",
+    "search_placeholder": "Search…",
+    "open_menu": "Open menu",
+    "close_menu": "Close menu",
+    "close": "Close",
+    "language": "Language",
+    "lang_en": "EN",
+    "lang_fr": "FR",
+    "theme": "Theme",
+    "theme_presets": "Presets",
+    "theme_mode": "Mode",
+    "mode_light": "Light",
+    "mode_dark": "Dark",
+    "mode_system": "System",
+    "theme_resolved": "Active: {{mode}}",
+    "notifications": "Notifications",
+    "notif_1": "New deployment finished successfully.",
+    "notif_2": "A comment was added to your report.",
+    "notif_time_1": "2 min ago",
+    "notif_time_2": "1 hour ago",
+    "user_name": "Denish N",
+    "user_role": "Team",
+    "user_initials": "DN"
+  },
+  "sample_data": {
+    "title": "Sample data",
+    "intro": "This page uses static placeholder rows. It does not assume any particular 4D table.",
+    "hint": "After `quadrokit-client generate`, ask your coding agent to load the right entities from your catalog (e.g. `quadro.<Entity>.all({ ... })`).",
+    "card_title": "Example rows",
+    "count": "{{count}} placeholder rows"
+  },
   "form": {
     "demo_title": "react-hook-form + zod",
     "label": "Label",

package/templates/admin-shell/src/locales/fr.json

@@ -0,0 +1,62 @@
+{
+  "app": {
+    "title": "QuadroKit",
+    "tagline": "Coque admin avec barre latérale — même stack, mise en page plus dense.",
+    "nav_home": "Accueil",
+    "nav_sample_data": "Données d'exemple",
+    "session_cookie": "Cookie de session 4D attendu : {{name}}"
+  },
+  "pages": {
+    "home": {
+      "title": "Vue d'ensemble"
+    }
+  },
+  "breadcrumb": {
+    "app": "QuadroKit",
+    "segment_home": "Accueil",
+    "segment_sample_data": "Données d'exemple",
+    "segment_unknown": "Page"
+  },
+  "layout": {
+    "sidebar_nav": "Navigation principale",
+    "nav_section_overview": "Vue d'ensemble",
+    "nav_section_apps": "Applications",
+    "nav_apps_placeholder": "D'autres applications peuvent être ajoutées ici.",
+    "breadcrumb_label": "Fil d'Ariane",
+    "search_placeholder": "Rechercher…",
+    "open_menu": "Ouvrir le menu",
+    "close_menu": "Fermer le menu",
+    "close": "Fermer",
+    "language": "Langue",
+    "lang_en": "EN",
+    "lang_fr": "FR",
+    "theme": "Thème",
+    "theme_presets": "Préréglages",
+    "theme_mode": "Mode",
+    "mode_light": "Clair",
+    "mode_dark": "Sombre",
+    "mode_system": "Système",
+    "theme_resolved": "Actif : {{mode}}",
+    "notifications": "Notifications",
+    "notif_1": "Nouveau déploiement terminé avec succès.",
+    "notif_2": "Un commentaire a été ajouté à votre rapport.",
+    "notif_time_1": "Il y a 2 min",
+    "notif_time_2": "Il y a 1 h",
+    "user_name": "Denish N",
+    "user_role": "Équipe",
+    "user_initials": "DN"
+  },
+  "sample_data": {
+    "title": "Données d'exemple",
+    "intro": "Cette page utilise des lignes statiques. Elle ne suppose aucune table 4D particulière.",
+    "hint": "Après `quadrokit-client generate`, demandez à votre agent de charger les bonnes entités depuis votre catalogue (par ex. `quadro.<Entité>.all({ ... })`).",
+    "card_title": "Lignes d'exemple",
+    "count": "{{count}} lignes d'exemple"
+  },
+  "form": {
+    "demo_title": "react-hook-form + zod",
+    "label": "Libellé",
+    "placeholder": "Saisissez quelque chose…",
+    "submit": "Envoyer"
+  }
+}

package/templates/admin-shell/src/main.tsx

@@ -1,4 +1,4 @@
-import { StrictMode } from 'react'
+import { StrictMode, Suspense } from 'react'
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
 import '@quadrokit/ui/styles.css'
@@ -9,7 +9,13 @@ import { router } from './router'
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProvider>
-      <RouterProvider router={router} />
+      <Suspense
+        fallback={
+          <div className="flex min-h-dvh items-center justify-center text-muted-foreground">…</div>
+        }
+      >
+        <RouterProvider router={router} />
+      </Suspense>
     </ThemeProvider>
   </StrictMode>
 )

package/templates/admin-shell/src/pages/HomePage.tsx

@@ -34,8 +34,7 @@ export function HomePage() {
   return (
     <div className="space-y-8">
       <div>
-        <h1 className="text-3xl font-semibold tracking-tight">{t('app.title')}</h1>
-        <p className="mt-2 max-w-2xl text-muted-foreground">{t('app.tagline')}</p>
+        <p className="max-w-2xl text-muted-foreground">{t('app.tagline')}</p>
         <p className="mt-2 text-sm text-muted-foreground">
           {t('app.session_cookie', { name: quadro.sessionCookieName })}
         </p>