@atlashub/smartstack-cli 4.81.0 → 5.0.0

package/templates/skills/ui-components/patterns/data-table.md

@@ -1,175 +0,0 @@
-# DataTable Pattern
-
-## COMPONENT: DataTable
-
-```tsx
-import { DataTable } from '@/components/ui/DataTable';
-
-<DataTable
-  data={users}
-  columns={[
-    { key: 'name', label: 'Name', sortable: true },
-    { key: 'role', label: 'Role', render: (user) => <Badge>{user.role}</Badge> }
-  ]}
-  pagination={{ pageSize: 10 }}
-  searchable
-  onRowClick={(user) => navigate(`/users/${user.id}`)}
-/>
-```
-
-## Full List Page with DataTable
-
-> **Complete page showing DataTable integration with loading, error, empty states, CSS variables, and i18n.**
-
-```tsx
-import { useState, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Loader2, AlertCircle } from 'lucide-react';
-import { DocToggleButton } from '@/components/docs/DocToggleButton';
-import { DataTable } from '@/components/ui/DataTable';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  isActive: boolean;
-}
-
-export function UsersPage() {
-  const { t } = useTranslation(['users']);
-  const navigate = useNavigate();
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [users, setUsers] = useState<User[]>([]);
-
-  const loadData = useCallback(async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const result = await usersApi.getAll();
-      setUsers(result?.items ?? []);
-    } catch (err: any) {
-      setError(err.message || t('users:errors.loadFailed', 'Failed to load users'));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  useEffect(() => { loadData(); }, [loadData]);
-
-  // Loading state
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <Loader2 className="w-8 h-8 animate-spin text-[var(--color-accent-500)]" />
-      </div>
-    );
-  }
-
-  // Error state with retry
-  if (error) {
-    return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <div className="text-center">
-          <AlertCircle className="h-8 w-8 text-[var(--error-text)] mx-auto mb-2" />
-          <p className="text-[var(--text-secondary)]">{error}</p>
-          <button
-            onClick={loadData}
-            className="mt-4 px-4 py-2 bg-[var(--color-accent-500)] text-white rounded-[var(--radius-button)]"
-          >
-            {t('common:actions.retry', 'Retry')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <h1 className="text-2xl font-bold text-[var(--text-primary)]">
-          {t('users:title', 'Users')}
-        </h1>
-        <div className="flex items-center gap-2">
-          <DocToggleButton />
-          <button
-            onClick={() => navigate('create')}
-            className="px-4 py-2 bg-[var(--color-accent-500)] text-white rounded-[var(--radius-button)]"
-          >
-            {t('users:actions.create', 'Create User')}
-          </button>
-        </div>
-      </div>
-
-      {/* Empty state */}
-      {users.length === 0 ? (
-        <div className="text-center py-12 text-[var(--text-secondary)]">
-          {t('users:empty', 'No users found.')}
-        </div>
-      ) : (
-        /* DataTable with sorting, search, pagination, row click */
-        <DataTable
-          data={users}
-          columns={[
-            { key: 'name', label: t('users:columns.name', 'Name'), sortable: true },
-            { key: 'email', label: t('users:columns.email', 'Email'), sortable: true },
-            { key: 'role', label: t('users:columns.role', 'Role'), sortable: true },
-            {
-              key: 'isActive',
-              label: t('users:columns.status', 'Status'),
-              render: (user) => (
-                <span className={`px-2 py-0.5 rounded text-xs ${
-                  user.isActive
-                    ? 'bg-[var(--success-bg)] text-[var(--success-text)]'
-                    : 'bg-[var(--error-bg)] text-[var(--error-text)]'
-                }`}>
-                  {user.isActive
-                    ? t('common:status.active', 'Active')
-                    : t('common:status.inactive', 'Inactive')}
-                </span>
-              ),
-            },
-          ]}
-          searchable
-          pagination={{ pageSize: 10 }}
-          onRowClick={(user) => navigate(`${user.id}`)}
-        />
-      )}
-    </div>
-  );
-}
-```
-
-**Key points:**
-- **NEVER** use raw `<table>` — always use `DataTable`
-- **ALL** text uses `t('namespace:key', 'Fallback')` for i18n
-- **ALL** colors use CSS variables (`var(--...)`) — zero hardcoded Tailwind colors
-- **Loading/Error/Empty** states are always handled
-- **Row click** navigates to detail page via relative path
-- **Status badges** use semantic CSS variables (`--success-bg`, `--error-text`)
-
----
-
-## COMPONENT: Tooltip
-
-```tsx
-import { Tooltip } from '@/components/ui/Tooltip';
-
-// Variants: default, error, warning, success, info
-// Positions: top, bottom, left, right
-
-<Tooltip content="Permission required" variant="error">
-  <button disabled>Protected action</button>
-</Tooltip>
-```
-
-### Disabled Button with Explanation Pattern
-```tsx
-const canExecute = hasPermission('module.action.execute');
-<Tooltip content={!canExecute ? t('errors.noPermission') : undefined} variant="error" disabled={canExecute}>
-  <button disabled={!canExecute}>Action</button>
-</Tooltip>
-```

package/templates/skills/ui-components/patterns/entity-card.md

@@ -1,77 +0,0 @@
-# EntityCard Pattern (MANDATORY)
-
-**ALWAYS use `EntityCard` for entity cards. NEVER use custom cards with divs.**
-
-```typescript
-import { EntityCard, ProviderCard, TemplateCard } from '@/components/ui/EntityCard';
-```
-
-## EntityCard Usage
-```tsx
-<EntityCard
-  avatar={{ letter: 'O', color: '#10a37f' }}
-  title="OpenAI" subtitle="openai"
-  description="OpenAI GPT models"
-  stats="15 model(s)"
-  badge={{ icon: Shield, tooltip: 'Admin API supported' }}
-  links={[{ icon: ExternalLink, label: 'Website', href: 'https://...' }]}
-  actions={[{ label: 'Config', onClick: () => {}, variant: 'primary' }]}
-/>
-```
-
-## ProviderCard Usage (AI Providers)
-```tsx
-<ProviderCard name="OpenAI" code="openai" description="..." modelCount={15} color="#10a37f"
-  websiteUrl="..." docsUrl="..." apiKeyUrl="..." hasAdminKey />
-```
-
-## TemplateCard Usage (Templates)
-```tsx
-<TemplateCard name="Welcome" code="welcome" category="Transactional" isActive isSystem
-  icon={Mail} translationsCount={3} onClick={() => {}} onEdit={() => {}} onDelete={() => {}} />
-```
-
-## EntityCard Props
-| Prop | Type |
-|------|------|
-| `avatar` | `{ letter, color, imageUrl? }` |
-| `title`, `subtitle`, `description` | `string` |
-| `stats` | `string` |
-| `badge` | `{ icon?, tooltip?, color? }` |
-| `links` | `Array<{ icon, label, href?, onClick? }>` |
-| `actions` | `Array<{ label, href?, onClick?, variant, icon?, disabled? }>` |
-
-## Action Variants (EntityCard)
-| Variant | Style |
-|---------|-------|
-| `primary` | `bg-[var(--color-accent-600)] text-white` |
-| `secondary` | `bg-[var(--bg-secondary)] text-[var(--text-secondary)]` |
-| `ghost` | `text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]` (NO border!) |
-
-## Custom Cards (Status, Dashboard)
-
-Button alignment pattern at bottom (mandatory for custom cards):
-
-```tsx
-// WARNING: h-full flex flex-col + flex-1 + mt-auto
-<div className="h-full flex flex-col rounded-[var(--radius-card)] border ...">
-  {/* Header */}
-  <div className="px-4 py-3 bg-gradient-to-r from-[var(--color-accent-500)]/10 ...">
-    {/* ... */}
-  </div>
-  {/* Content with flex-1 */}
-  <div className="flex-1 flex flex-col p-4">
-    {/* Variable content */}
-    {/* WARNING: mt-auto for button at bottom */}
-    <button className="mt-auto w-full ...">Action</button>
-  </div>
-</div>
-```
-
-## When to Use EntityCard vs Custom
-
-| EntityCard for | Custom for |
-|----------------|------------|
-| Homogeneous entity lists | Dashboard stats cards |
-| Catalogs | Cards with complex interactive states |
-| Clickable grids | Cards with integrated forms |

package/templates/skills/ui-components/patterns/grid-layout.md

@@ -1,91 +0,0 @@
-# Grid Layout Patterns
-
-## Responsive Grid
-
-```tsx
-// Standard
-<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
-  {items.map(item => <EntityCard key={item.id} {...mapToCardProps(item)} />)}
-</div>
-
-// With empty state
-{items.length === 0 ? (
-  <div className="text-center py-12"><p>No items</p></div>
-) : (
-  <div className="grid ...">...</div>
-)}
-```
-
-## Detail Page Template
-
-### Structure
-```tsx
-<div className="container mx-auto px-4 py-6 max-w-7xl space-y-6">
-  {/* Header */}
-  <div className="flex items-center gap-4">
-    <button onClick={() => navigate(-1)} className="p-2 rounded-[var(--radius-button)] hover:bg-[var(--bg-hover)]">
-      <ArrowLeft className="w-5 h-5 text-[var(--text-secondary)]" />
-    </button>
-    <div className="flex-1">
-      <h1 className="text-xl sm:text-2xl font-bold text-[var(--text-primary)]">{title}</h1>
-      <p className="text-sm text-[var(--text-secondary)]">{subtitle}</p>
-    </div>
-    <div className="flex items-center gap-2">
-      {/* Status badges */}
-    </div>
-  </div>
-
-  {/* Pill Tabs */}
-  <div className="flex gap-1 p-1 bg-[var(--bg-secondary)] rounded-[var(--radius-card)] border border-[var(--border-color)]">
-    {tabs.map(tab => (
-      <button
-        key={tab.id}
-        className={`px-4 py-2 rounded-[var(--radius-button)] font-medium ${
-          activeTab === tab.id
-            ? 'bg-[var(--color-accent-600)] text-white'
-            : 'text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]'
-        }`}
-      >
-        {tab.label}
-      </button>
-    ))}
-  </div>
-
-  {/* Tab Content */}
-  <div className="min-h-[400px]">{/* ... */}</div>
-</div>
-```
-
-### Info Card Pattern
-```tsx
-<div className="p-4 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)]">
-  <div className="flex items-center justify-between mb-4">
-    <h3 className="text-lg font-semibold text-[var(--text-primary)] flex items-center gap-2">
-      <Icon className="w-5 h-5" />
-      {title}
-    </h3>
-    <button className="flex items-center gap-1 px-3 py-1.5 rounded-[var(--radius-button)] bg-[var(--bg-secondary)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]">
-      <Edit3 className="w-4 h-4" />
-      {t('common:edit')}
-    </button>
-  </div>
-  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-    <div className="p-3 rounded-lg bg-[var(--bg-secondary)]">
-      <p className="text-xs text-[var(--text-tertiary)] uppercase tracking-wider mb-1">{label}</p>
-      <p className="text-sm text-[var(--text-primary)] font-medium">{value}</p>
-    </div>
-  </div>
-</div>
-```
-
-### Error Display Pattern
-```tsx
-{error && (
-  <div className="p-4 rounded-[var(--radius-card)] bg-[var(--error-bg)] border border-[var(--error-border)]">
-    <div className="flex items-center gap-2 text-[var(--error-text)]">
-      <AlertTriangle className="w-5 h-5" />
-      <span>{error}</span>
-    </div>
-  </div>
-)}
-```

package/templates/skills/ui-components/patterns/kanban.md

@@ -1,43 +0,0 @@
-# Kanban Board Pattern
-
-## Structure
-
-```tsx
-<div className="flex gap-4 overflow-x-auto pb-4">
-  {columns.map(column => (
-    <div key={column.id} className="flex-shrink-0 w-72">
-      {/* Column Header */}
-      <div className="flex items-center justify-between mb-3 px-2">
-        <h3 className="font-medium text-[var(--text-primary)]">{column.title}</h3>
-        <span className="text-xs text-[var(--text-tertiary)] bg-[var(--bg-secondary)] px-2 py-0.5 rounded-full">
-          {column.items.length}
-        </span>
-      </div>
-
-      {/* Column Cards */}
-      <div className="space-y-2">
-        {column.items.map(item => (
-          <div
-            key={item.id}
-            className="p-3 rounded-[var(--radius-card)] bg-[var(--bg-primary)] border border-[var(--border-color)] hover:border-[var(--color-accent-500)] cursor-pointer"
-          >
-            <p className="text-sm font-medium text-[var(--text-primary)]">{item.title}</p>
-            <p className="text-xs text-[var(--text-secondary)] mt-1">{item.description}</p>
-          </div>
-        ))}
-      </div>
-    </div>
-  ))}
-</div>
-```
-
-## Column Status Mapping
-
-Use CSS variables for column header colors:
-
-| Column Status | Header Accent |
-|--------------|---------------|
-| To Do / Pending | `var(--info-dot)` |
-| In Progress | `var(--color-accent-500)` |
-| Review | `var(--warning-dot)` |
-| Done | `var(--success-dot)` |

package/templates/skills/ui-components/references/component-catalog.md

@@ -1,82 +0,0 @@
-# Complete Component Catalog (v3.46+)
-
-> Extracted from `SKILL.md` for clarity. Loaded only when generating a page or component that needs to discover what's available.
-
-> Source : `D:/01 - projets/SmartStack.app/features/IA-Workflow/web/smartstack-web/src/components/ui/`
-
-32 shared components are exported by `@atlashub/smartstack`. Always import from `@/components/ui/{Component}` (or `@/components/docs/...` for doc panel pieces). **Never re-implement when one exists.**
-
-## Layout & Page chrome (always import)
-
-| Component | Import | Use case |
-|---|---|---|
-| `PageTemplate` | `@/components/ui/PageTemplate` | Wraps every authenticated page — provides `space-y-6` rhythm and width container |
-| `PageHeader` | `@/components/ui/PageHeader` | Title + subtitle + actions slot — used at top of every list/detail/form page |
-| `Breadcrumb` | `@/components/ui/Breadcrumb` | Hierarchical nav (auto-derived from menu) |
-| `PageLoader` | `@/components/ui/PageLoader` | Suspense fallback ; centered spinner |
-| `UnderDevelopment` | `@/components/ui/UnderDevelopment` | Placeholder for routes that exist in seed but have no real page yet |
-
-## Data display
-
-| Component | Import | Use case |
-|---|---|---|
-| `DataTable` | `@/components/ui/DataTable` | Sortable, searchable, paginated table — see [../patterns/data-table.md](../patterns/data-table.md) |
-| `DataView` | `@/components/ui/DataView` | Envelope multi-mode (`table` / `cards` / `kanban`). Re-exports `ViewToggle`, `Pagination`, `StatusBadge`, `Avatar`, `KanbanColumn`, `KanbanCard` |
-| `EntityCard` | `@/components/ui/EntityCard` | Entity card with avatar / badges / actions — see [../patterns/entity-card.md](../patterns/entity-card.md) |
-| `KanbanBoard` | `@/components/ui/KanbanBoard` | Kanban board — see [../patterns/kanban.md](../patterns/kanban.md) |
-| `ViewModeToggle` | `@/components/ui/ViewModeToggle` | Standalone view-mode toggle (`table`/`cards`/`kanban`) |
-| `SortableList` | `@/components/ui/SortableList` | dnd-kit reorderable list (drag & drop) |
-
-## Forms & dialogs
-
-| Component | Import | Use case |
-|---|---|---|
-| `EntityLookup` | `@/components/ui/EntityLookup` | **Mandatory** for FK Guid fields (debounced search, paginated results, display name resolution). See `apex/references/smartstack-frontend.md` §6 |
-| `SelectWithOther` | `@/components/ui/SelectWithOther` | Select with "Autre…" free-text fallback |
-| `ConfirmModal` | `@/components/ui/ConfirmModal` | Destructive action confirmation (Delete, Archive, …). 3 variants : `danger`, `warning`, `info` |
-| `Drawer` | `@/components/ui/Drawer` | Side drawer (read-only details, filter panels). **Forbidden for create/edit forms** (use full-route pages instead, cf. C4) |
-| `UnlockAccountModal` | `@/components/ui/UnlockAccountModal` | Account unlock flow (admin) |
-
-## Permissions & tenant
-
-| Component | Import | Use case |
-|---|---|---|
-| `ProtectedButton` | `@/components/ui/ProtectedButton` | Button hidden / disabled when user lacks `permission` prop |
-| `PermissionMatrix` | `@/components/ui/PermissionMatrix` | Roles × permissions grid (used on roles pages) |
-| `ScopeBanner` | `@/components/ui/ScopeBanner` | Top banner showing the current tenant / global scope |
-| `RestrictedModuleBanner` | `@/components/ui/RestrictedModuleBanner` | Shown when a module requires a license feature the user doesn't have |
-| `TenantSelector` | `@/components/ui/TenantSelector` | Dropdown for switching tenant (header) |
-| `TenantScopeSelector` | `@/components/ui/TenantScopeSelector` | Choose `tenant`/`shared`/`platform` scope when creating cross-tenant entities |
-| `TenantScopeFilter` | `@/components/ui/TenantScopeFilter` | Filter list by scope (admin lists with cross-tenant data) |
-
-## Theme & branding
-
-| Component | Import | Use case |
-|---|---|---|
-| `ThemeSwitcher` | `@/components/ui/ThemeSwitcher` | Light/Dark toggle (header) |
-| `ThemeCustomizer` | `@/components/ui/ThemeCustomizer` | Per-user theme customization (preferences page) |
-| `ThemeScopeSelector` | `@/components/ui/ThemeScopeSelector` | Choose theme apply scope (Global/Tenant/User) |
-| `LanguageSwitcher` | `@/components/ui/LanguageSwitcher` | i18n language picker (header) |
-| `Tooltip` | `@/components/ui/Tooltip` | Tooltip with variants (`error`, `warning`, `success`, `info`) |
-
-## App shell
-
-| Component | Import | Use case |
-|---|---|---|
-| `AvatarMenu` | `@/components/ui/AvatarMenu` | User avatar + dropdown (logout, profile) — header right |
-| `AppSwitcher` | `@/components/ui/AppSwitcher` | Module/app switcher in the sidebar (auto-built from menu) |
-
-## Documentation panel (auto-installed)
-
-| Component | Import | Use case |
-|---|---|---|
-| `DocPanel` | `@/components/ui/DocPanel` | Side panel showing contextual `doc-data.ts` content (consumed via `DocPanelContext`) |
-| `DocToggleButton` | `@/components/docs/DocToggleButton` | **Mandatory** in every list/detail page header — opens DocPanel |
-| `DocEdgeButton` | `@/components/ui/DocEdgeButton` | Edge-attached button variant (rare — use `DocToggleButton` first) |
-
-## Component-availability rules
-
-- If a component above exists, **always import it** — never re-implement (`<div role="button">`, `<input>` for FK, etc.).
-- For new project-specific UI (e.g., `OrderTimeline`), generate locally under `src/components/{module}/`.
-- For dashboard-only widgets (`StatCard`, `ChartCard`, `PeriodFilter`), generate inline — see [../patterns/dashboard-chart.md](../patterns/dashboard-chart.md).
-- The 32 catalog components above are part of the SmartStack package contract — clients consume them via `@atlashub/smartstack`.