@atlashub/smartstack-cli 1.13.2 → 1.14.0

package/templates/commands/application/templates-frontend.md

@@ -1,517 +0,0 @@
-# Templates Frontend - Application Skill
-
-> Ces templates génèrent le code React/TypeScript pour les nouvelles applications/modules.
-> **RAPPEL:** Toutes les pages client sont sous `/business/...`
-
----
-
-## ARCHITECTURE FRONTEND
-
-```
-web/smartstack-web/src/
-├── pages/business/$APP/$MODULE/
-│   ├── $MODULE_PASCALPage.tsx          # Page principale (liste)
-│   ├── $MODULE_PASCALDetailPage.tsx    # Page détail
-│   └── Create$MODULE_PASCALPage.tsx    # Page création
-├── components/$MODULE/
-│   ├── $MODULE_PASCALListView.tsx      # Composant liste réutilisable
-│   ├── $MODULE_PASCALForm.tsx          # Formulaire CRUD
-│   └── $MODULE_PASCALFilters.tsx       # Filtres
-├── components/common/
-│   └── (composants partagés)
-├── hooks/
-│   ├── use$MODULE_PASCALPreferences.ts # Hook préférences
-│   └── use$MODULE_PASCAL.ts            # Hook API
-├── services/api/
-│   └── $moduleApi.ts                   # Service API
-└── i18n/locales/
-    ├── fr/$module.json
-    ├── en/$module.json
-    ├── it/$module.json
-    └── de/$module.json
-```
-
----
-
-## TEMPLATE: PAGE PRINCIPALE
-
-```tsx
-// pages/business/$APP/$MODULE/$MODULE_PASCALPage.tsx
-
-import { useTranslation } from 'react-i18next';
-import { $MODULE_PASCALListView } from '@/components/$MODULE/$MODULE_PASCALListView';
-
-export function $MODULE_PASCALPage() {
-  const { t } = useTranslation(['$module', 'common']);
-
-  return (
-    <$MODULE_PASCALListView
-      title={t('$module:title')}
-      subtitle={t('$module:subtitle')}
-      basePath="/business/$APP/$MODULE"
-      createPath="/business/$APP/$MODULE/new"
-    />
-  );
-}
-```
-
----
-
-## TEMPLATE: LISTE VIEW (Composant réutilisable)
-
-```tsx
-// components/$MODULE/$MODULE_PASCALListView.tsx
-
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Plus, Search, MoreVertical, Pencil, Trash2 } from 'lucide-react';
-import { api } from '@/services/api/apiClient';
-import { use$MODULE_PASCALPreferences } from '@/hooks/use$MODULE_PASCALPreferences';
-import { Pagination } from '@/components/common/Pagination';
-import { ColumnSelector } from '@/components/common/ColumnSelector';
-import { ViewModeToggle } from '@/components/common/ViewModeToggle';
-
-interface $ENTITY_PASCALDto {
-  id: string;
-  name: string;
-  description: string | null;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string | null;
-}
-
-interface PagedResult {
-  items: $ENTITY_PASCALDto[];
-  totalCount: number;
-  page: number;
-  pageSize: number;
-}
-
-interface $MODULE_PASCALListViewProps {
-  title: string;
-  subtitle?: string;
-  basePath: string;
-  createPath?: string;
-}
-
-const DEFAULT_COLUMNS = ['name', 'description', 'isActive', 'createdAt'];
-
-export function $MODULE_PASCALListView({
-  title,
-  subtitle,
-  basePath,
-  createPath,
-}: $MODULE_PASCALListViewProps) {
-  const { t } = useTranslation(['$module', 'common']);
-  const navigate = useNavigate();
-  const {
-    pageSize,
-    sortColumn,
-    sortDirection,
-    visibleColumns,
-    viewMode,
-    setPageSize,
-    setSortColumn,
-    setSortDirection,
-    setVisibleColumns,
-    setViewMode,
-  } = use$MODULE_PASCALPreferences();
-
-  const [data, setData] = useState<PagedResult | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [page, setPage] = useState(1);
-  const [searchTerm, setSearchTerm] = useState('');
-
-  useEffect(() => {
-    loadData();
-  }, [page, pageSize, sortColumn, sortDirection, searchTerm]);
-
-  const loadData = async () => {
-    try {
-      setLoading(true);
-      setError(null);
-      const params = new URLSearchParams({
-        page: page.toString(),
-        pageSize: pageSize.toString(),
-        sortColumn,
-        sortDirection,
-        ...(searchTerm && { searchTerm }),
-      });
-      const result = await api.get<PagedResult>(`/api/business/$MODULE?${params}`);
-      setData(result);
-    } catch (err) {
-      setError(t('common:errors.loadFailed'));
-      console.error('Failed to load $module:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSort = (column: string) => {
-    if (sortColumn === column) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortColumn(column);
-      setSortDirection('asc');
-    }
-  };
-
-  const handleDelete = async (id: string) => {
-    if (!confirm(t('common:confirmDelete'))) return;
-
-    try {
-      await api.delete(`/api/business/$MODULE/${id}`);
-      loadData();
-    } catch (err) {
-      console.error('Failed to delete:', err);
-    }
-  };
-
-  const columns = [
-    { key: 'name', label: t('$module:columns.name'), sortable: true },
-    { key: 'description', label: t('$module:columns.description'), sortable: false },
-    { key: 'isActive', label: t('$module:columns.status'), sortable: true },
-    { key: 'createdAt', label: t('$module:columns.createdAt'), sortable: true },
-  ];
-
-  return (
-    <div className="space-y-6">
-      {/* Header */}
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-2xl font-bold text-[var(--text-primary)]">{title}</h1>
-          {subtitle && (
-            <p className="text-[var(--text-secondary)] mt-1">{subtitle}</p>
-          )}
-        </div>
-        {createPath && (
-          <button
-            onClick={() => navigate(createPath)}
-            className="flex items-center gap-2 px-4 py-2 bg-[var(--color-accent-500)] hover:bg-[var(--color-accent-600)] text-white font-medium transition-colors"
-            style={{ borderRadius: 'var(--radius-button)' }}
-          >
-            <Plus className="w-4 h-4" />
-            {t('common:actions.create')}
-          </button>
-        )}
-      </div>
-
-      {/* Toolbar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="relative flex-1 max-w-md">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--text-muted)]" />
-          <input
-            type="text"
-            placeholder={t('common:search.placeholder')}
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 bg-[var(--bg-primary)] border border-[var(--border-color)] text-sm focus:outline-none focus:border-[var(--color-accent-500)]"
-            style={{ borderRadius: 'var(--radius-input)' }}
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <ColumnSelector
-            columns={columns}
-            visibleColumns={visibleColumns}
-            onChange={setVisibleColumns}
-          />
-          <ViewModeToggle value={viewMode} onChange={setViewMode} />
-        </div>
-      </div>
-
-      {/* Content */}
-      {loading ? (
-        <div className="flex items-center justify-center py-12">
-          <div className="animate-spin h-8 w-8 border-4 border-[var(--color-accent-500)] border-t-transparent rounded-full" />
-        </div>
-      ) : error ? (
-        <div className="p-4 bg-[var(--error-bg)] border border-[var(--error-border)] text-[var(--error-text)]" style={{ borderRadius: 'var(--radius-card)' }}>
-          {error}
-        </div>
-      ) : viewMode === 'list' ? (
-        <div className="bg-[var(--bg-card)] border border-[var(--item-color-border)] overflow-hidden" style={{ borderRadius: 'var(--radius-card)' }}>
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-[var(--item-color-border)]">
-                {columns.filter(col => visibleColumns.includes(col.key)).map((col) => (
-                  <th
-                    key={col.key}
-                    className={`px-4 py-3 text-left text-sm font-medium text-[var(--text-secondary)] ${
-                      col.sortable ? 'cursor-pointer hover:text-[var(--text-primary)]' : ''
-                    }`}
-                    onClick={() => col.sortable && handleSort(col.key)}
-                  >
-                    {col.label}
-                    {sortColumn === col.key && (
-                      <span className="ml-1">{sortDirection === 'asc' ? '↑' : '↓'}</span>
-                    )}
-                  </th>
-                ))}
-                <th className="px-4 py-3 text-right text-sm font-medium text-[var(--text-secondary)]">
-                  {t('common:actions.title')}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {data?.items.map((item) => (
-                <tr
-                  key={item.id}
-                  className="border-b border-[var(--item-color-border)] hover:bg-[var(--bg-hover)] cursor-pointer"
-                  onClick={() => navigate(`${basePath}/${item.id}`)}
-                >
-                  {visibleColumns.includes('name') && (
-                    <td className="px-4 py-3 text-sm text-[var(--text-primary)] font-medium">
-                      {item.name}
-                    </td>
-                  )}
-                  {visibleColumns.includes('description') && (
-                    <td className="px-4 py-3 text-sm text-[var(--text-secondary)]">
-                      {item.description || '-'}
-                    </td>
-                  )}
-                  {visibleColumns.includes('isActive') && (
-                    <td className="px-4 py-3">
-                      <span
-                        className={`inline-flex items-center px-2 py-1 text-xs font-medium ${
-                          item.isActive
-                            ? 'bg-green-100 text-green-800'
-                            : 'bg-gray-100 text-gray-800'
-                        }`}
-                        style={{ borderRadius: 'var(--radius-badge)' }}
-                      >
-                        {item.isActive ? t('common:status.active') : t('common:status.inactive')}
-                      </span>
-                    </td>
-                  )}
-                  {visibleColumns.includes('createdAt') && (
-                    <td className="px-4 py-3 text-sm text-[var(--text-secondary)]">
-                      {new Date(item.createdAt).toLocaleDateString()}
-                    </td>
-                  )}
-                  <td className="px-4 py-3 text-right">
-                    <div className="flex items-center justify-end gap-2">
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          navigate(`${basePath}/${item.id}/edit`);
-                        }}
-                        className="p-1 hover:bg-[var(--bg-tertiary)]"
-                        style={{ borderRadius: 'var(--radius-button)' }}
-                      >
-                        <Pencil className="w-4 h-4 text-[var(--text-secondary)]" />
-                      </button>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleDelete(item.id);
-                        }}
-                        className="p-1 hover:bg-[var(--error-bg)]"
-                        style={{ borderRadius: 'var(--radius-button)' }}
-                      >
-                        <Trash2 className="w-4 h-4 text-[var(--error-text)]" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      ) : (
-        /* Grid view */
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {data?.items.map((item) => (
-            <div
-              key={item.id}
-              className="bg-[var(--bg-card)] border border-[var(--item-color-border)] p-4 hover:border-[var(--color-accent-500)] cursor-pointer transition-colors"
-              style={{ borderRadius: 'var(--radius-card)' }}
-              onClick={() => navigate(`${basePath}/${item.id}`)}
-            >
-              <h3 className="font-medium text-[var(--text-primary)]">{item.name}</h3>
-              <p className="text-sm text-[var(--text-secondary)] mt-1 line-clamp-2">
-                {item.description || '-'}
-              </p>
-              <div className="flex items-center justify-between mt-3">
-                <span
-                  className={`inline-flex items-center px-2 py-1 text-xs font-medium ${
-                    item.isActive
-                      ? 'bg-green-100 text-green-800'
-                      : 'bg-gray-100 text-gray-800'
-                  }`}
-                  style={{ borderRadius: 'var(--radius-badge)' }}
-                >
-                  {item.isActive ? t('common:status.active') : t('common:status.inactive')}
-                </span>
-                <span className="text-xs text-[var(--text-muted)]">
-                  {new Date(item.createdAt).toLocaleDateString()}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {/* Pagination */}
-      {data && (
-        <Pagination
-          page={data.page}
-          pageSize={data.pageSize}
-          totalCount={data.totalCount}
-          onPageChange={setPage}
-          onPageSizeChange={setPageSize}
-        />
-      )}
-    </div>
-  );
-}
-```
-
----
-
-## TEMPLATE: HOOK PRÉFÉRENCES
-
-```tsx
-// hooks/use$MODULE_PASCALPreferences.ts
-
-import { useUserPreferences } from '@/contexts/UserPreferencesContext';
-
-const DEFAULT_COLUMNS = ['name', 'description', 'isActive', 'createdAt'];
-
-export function use$MODULE_PASCALPreferences() {
-  const { preferences, updatePreference } = useUserPreferences();
-  const modulePrefs = preferences.$module || {};
-
-  return {
-    // Getters with defaults
-    pageSize: modulePrefs.pageSize ?? 10,
-    sortColumn: modulePrefs.sortColumn ?? 'createdAt',
-    sortDirection: modulePrefs.sortDirection ?? 'desc',
-    filters: modulePrefs.filters ?? {},
-    visibleColumns: modulePrefs.visibleColumns ?? DEFAULT_COLUMNS,
-    viewMode: modulePrefs.viewMode ?? 'list',
-
-    // Setters
-    setPageSize: (size: number) =>
-      updatePreference('$module.pageSize', size),
-    setSortColumn: (col: string) =>
-      updatePreference('$module.sortColumn', col),
-    setSortDirection: (dir: 'asc' | 'desc') =>
-      updatePreference('$module.sortDirection', dir),
-    setFilters: (filters: Record<string, unknown>) =>
-      updatePreference('$module.filters', filters),
-    setVisibleColumns: (cols: string[]) =>
-      updatePreference('$module.visibleColumns', cols),
-    setViewMode: (mode: 'list' | 'grid') =>
-      updatePreference('$module.viewMode', mode),
-  };
-}
-```
-
----
-
-## TEMPLATE: SERVICE API
-
-```tsx
-// services/api/$moduleApi.ts
-
-import { api } from './apiClient';
-
-export interface $ENTITY_PASCALDto {
-  id: string;
-  name: string;
-  description: string | null;
-  isActive: boolean;
-  createdAt: string;
-  updatedAt: string | null;
-}
-
-export interface Create$ENTITY_PASCALRequest {
-  name: string;
-  description?: string;
-}
-
-export interface Update$ENTITY_PASCALRequest {
-  name: string;
-  description?: string;
-}
-
-export interface PagedResult<T> {
-  items: T[];
-  totalCount: number;
-  page: number;
-  pageSize: number;
-}
-
-export interface QueryParameters {
-  page?: number;
-  pageSize?: number;
-  searchTerm?: string;
-  sortColumn?: string;
-  sortDirection?: 'asc' | 'desc';
-}
-
-export const $moduleApi = {
-  getAll: async (params: QueryParameters = {}): Promise<PagedResult<$ENTITY_PASCALDto>> => {
-    const queryParams = new URLSearchParams();
-    if (params.page) queryParams.set('page', params.page.toString());
-    if (params.pageSize) queryParams.set('pageSize', params.pageSize.toString());
-    if (params.searchTerm) queryParams.set('searchTerm', params.searchTerm);
-    if (params.sortColumn) queryParams.set('sortColumn', params.sortColumn);
-    if (params.sortDirection) queryParams.set('sortDirection', params.sortDirection);
-
-    return api.get(`/api/business/$MODULE?${queryParams}`);
-  },
-
-  getById: async (id: string): Promise<$ENTITY_PASCALDto> => {
-    return api.get(`/api/business/$MODULE/${id}`);
-  },
-
-  create: async (data: Create$ENTITY_PASCALRequest): Promise<$ENTITY_PASCALDto> => {
-    return api.post('/api/business/$MODULE', data);
-  },
-
-  update: async (id: string, data: Update$ENTITY_PASCALRequest): Promise<$ENTITY_PASCALDto> => {
-    return api.put(`/api/business/$MODULE/${id}`, data);
-  },
-
-  delete: async (id: string): Promise<void> => {
-    return api.delete(`/api/business/$MODULE/${id}`);
-  },
-};
-```
-
----
-
-## TEMPLATE: ROUTES (App.tsx)
-
-```tsx
-// Ajouter dans App.tsx
-
-import { $MODULE_PASCALPage } from '@/pages/business/$APP/$MODULE/$MODULE_PASCALPage';
-import { $MODULE_PASCALDetailPage } from '@/pages/business/$APP/$MODULE/$MODULE_PASCALDetailPage';
-import { Create$MODULE_PASCALPage } from '@/pages/business/$APP/$MODULE/Create$MODULE_PASCALPage';
-
-// Dans les routes - TOUJOURS sous /business/
-<Route path="/business/$APP/$MODULE" element={<$MODULE_PASCALPage />} />
-<Route path="/business/$APP/$MODULE/new" element={<Create$MODULE_PASCALPage />} />
-<Route path="/business/$APP/$MODULE/:id" element={<$MODULE_PASCALDetailPage />} />
-<Route path="/business/$APP/$MODULE/:id/edit" element={<Create$MODULE_PASCALPage />} />
-```
-
----
-
-## CHECKLIST FRONTEND
-
-| Vérification | Status |
-|--------------|--------|
-| ☐ Page principale créée (sous /business/) | |
-| ☐ Composant ListView créé | |
-| ☐ Hook préférences créé | |
-| ☐ Service API créé (endpoint /api/business/) | |
-| ☐ Routes ajoutées dans App.tsx (sous /business/) | |
-| ☐ Utilise apiClient (pas d'appel direct) | |
-| ☐ Pas d'import Infrastructure | |
-| ☐ npm run build réussi | |
-| ☐ npm run lint réussi | |