@elsapiens/cli 0.1.0 → 0.1.2

package/dist/templates/app/page-settings.ejs

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   Button,
   Input,
@@ -6,110 +7,286 @@ import {
   Card,
   CardHeader,
   CardTitle,
+  CardDescription,
   CardContent,
+  Form,
+  FormField,
+  Separator,
 } from '@elsapiens/ui';
-import { User, Bell, Palette } from 'lucide-react';
-import { useState } from 'react';
+import { PageHeaderWithBreadcrumbs } from '@elsapiens/layout';
+import { User, Bell, Shield, Palette, Mail, Globe, Moon, Save, Maximize2, Sparkles } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useTheme, useLocale, usePageHeader, SUPPORTED_LOCALES, BACKGROUND_STYLES, type Theme, type Locale, type SpacingMode, type BackgroundStyle } from '@elsapiens/providers';
+import { loadSettings } from '../translations/settings/index';
+
+const languageOptions = Object.values(SUPPORTED_LOCALES).map((config) => ({
+  value: config.code,
+  label: `${config.nativeName} (${config.name})`,
+}));
 
 export default function Settings() {
+  const { theme, setTheme, spacing, setSpacing, backgroundStyle, setBackgroundStyle } = useTheme();
+  const { locale, setLocale, t, loadTranslations } = useLocale();
   const [notifications, setNotifications] = useState(true);
   const [emailUpdates, setEmailUpdates] = useState(false);
 
+  // Load settings translations
+  useEffect(() => {
+    loadTranslations(loadSettings);
+  }, [locale, loadTranslations]);
+
+  // Set page header info
+  usePageHeader({
+    title: t('settings.title'),
+    description: t('settings.description'),
+    breadcrumbs: [
+      { label: t('nav.home'), href: '/', as: Link },
+      { label: t('settings.title') },
+    ],
+  });
+
+  // Theme options with translations
+  const themeOptions = [
+    { value: 'light', label: t('settings.theme.light') },
+    { value: 'dark', label: t('settings.theme.dark') },
+    { value: 'system', label: t('settings.theme.system') },
+  ];
+
+  // Spacing options with translations
+  const spacingOptions = [
+    { value: 'compact', label: t('settings.spacing.compact') },
+    { value: 'normal', label: t('settings.spacing.normal') },
+    { value: 'spacious', label: t('settings.spacing.spacious') },
+  ];
+
+  // Background style options
+  const backgroundOptions = BACKGROUND_STYLES.map((bg) => ({
+    value: bg.value,
+    label: bg.label,
+  }));
+
   return (
-    <div className="p-6 max-w-4xl">
-      {/* Page Header - pl-6 to align with card content */}
-      <div className="mb-8 pl-6">
-        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
-        <p className="text-muted-foreground">Manage your account and preferences</p>
-      </div>
+    <div className="flex flex-col">
+      <PageHeaderWithBreadcrumbs variant="card" linkComponent={Link} />
 
-      <div className="space-y-6">
-        {/* Profile Section */}
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle className="flex items-center gap-3">
-              <User className="w-5 h-5 text-muted-foreground" />
-              Profile
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-6 pt-0 space-y-4">
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-1">
-                  First Name
-                </label>
-                <Input defaultValue="John" hideMessage />
+      <div className="el-p-lg" style={{ overflowX: 'clip' }}>
+        <div className="el-space-y-section max-w-3xl">
+          {/* Profile Section */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center el-gap-sm">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <User className="w-5 h-5 text-primary" />
+                </div>
+                <div>
+                  <CardTitle>{t('settings.profile')}</CardTitle>
+                  <CardDescription>{t('settings.profileDescription')}</CardDescription>
+                </div>
               </div>
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-1">
-                  Last Name
-                </label>
-                <Input defaultValue="Doe" hideMessage />
+            </CardHeader>
+            <CardContent className="el-space-y-content">
+              <div className="grid grid-cols-1 sm:grid-cols-2 el-gap-field">
+                <FormField label={t('settings.firstName')}>
+                  <Input defaultValue="John" />
+                </FormField>
+                <FormField label={t('settings.lastName')}>
+                  <Input defaultValue="Doe" />
+                </FormField>
               </div>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                Email
-              </label>
-              <Input type="email" defaultValue="john.doe@example.com" hideMessage />
-            </div>
-            <div className="pt-2">
-              <Button>Save Changes</Button>
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Notifications Section */}
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle className="flex items-center gap-3">
-              <Bell className="w-5 h-5 text-muted-foreground" />
-              Notifications
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-6 pt-0 space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-foreground">Push Notifications</p>
-                <p className="text-sm text-muted-foreground">Receive push notifications</p>
+              <div className="el-gap-field">
+                <FormField label={t('settings.email')}>
+                  <Input type="email" defaultValue="john.doe@example.com" />
+                </FormField>
+              </div>
+              <div className="el-gap-field flex justify-end">
+                <Button>
+                  <Save className="w-4 h-4 el-mr-xs" />
+                  {t('settings.saveChanges')}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Appearance Section */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center el-gap-sm">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Palette className="w-5 h-5 text-primary" />
+                </div>
+                <div>
+                  <CardTitle>{t('settings.appearance')}</CardTitle>
+                  <CardDescription>{t('settings.appearanceDescription')}</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="el-space-y-content">
+              {/* Spacing Mode Setting */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Maximize2 className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.spacing')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.spacingDescription')}</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={spacingOptions}
+                    value={spacing}
+                    onChange={(e) => setSpacing(e.target.value as SpacingMode)}
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Theme Setting */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Moon className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.theme')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.themeDescription')}</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={themeOptions}
+                    value={theme}
+                    onChange={(e) => setTheme(e.target.value as Theme)}
+                  />
+                </div>
               </div>
-              <Toggle checked={notifications} onChange={setNotifications} />
-            </div>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="font-medium text-foreground">Email Updates</p>
-                <p className="text-sm text-muted-foreground">Receive email summaries</p>
+
+              <Separator />
+
+              {/* Background Effect Setting */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Sparkles className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.background')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.backgroundDescription')}</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={backgroundOptions}
+                    value={backgroundStyle}
+                    onChange={(e) => setBackgroundStyle(e.target.value as BackgroundStyle)}
+                  />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Language Setting */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Globe className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.language')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.languageDescription')}</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={languageOptions}
+                    value={locale}
+                    onChange={(e) => setLocale(e.target.value as Locale)}
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Notifications Section */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center el-gap-sm">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Bell className="w-5 h-5 text-primary" />
+                </div>
+                <div>
+                  <CardTitle>{t('settings.notifications')}</CardTitle>
+                  <CardDescription>{t('settings.notificationsDescription')}</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="el-space-y-content">
+              {/* Push Notifications */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Bell className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.pushNotifications')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.pushNotificationsDesc')}</p>
+                  </div>
+                </div>
+                <div className="flex-shrink-0">
+                  <Toggle checked={notifications} onChange={setNotifications} />
+                </div>
+              </div>
+
+              <Separator />
+
+              {/* Email Updates */}
+              <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between el-gap-md el-py-sm">
+                <div className="flex items-start el-gap-sm">
+                  <Mail className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">{t('settings.emailUpdates')}</p>
+                    <p className="text-sm text-muted-foreground">{t('settings.emailUpdatesDesc')}</p>
+                  </div>
+                </div>
+                <div className="flex-shrink-0">
+                  <Toggle checked={emailUpdates} onChange={setEmailUpdates} />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Security Section */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center el-gap-sm">
+                <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                  <Shield className="w-5 h-5 text-primary" />
+                </div>
+                <div>
+                  <CardTitle>{t('settings.security')}</CardTitle>
+                  <CardDescription>{t('settings.securityDescription')}</CardDescription>
+                </div>
               </div>
-              <Toggle checked={emailUpdates} onChange={setEmailUpdates} />
-            </div>
-          </CardContent>
-        </Card>
-
-        {/* Appearance Section */}
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle className="flex items-center gap-3">
-              <Palette className="w-5 h-5 text-muted-foreground" />
-              Appearance
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-6 pt-0 space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                Theme
-              </label>
-              <Select
-                options={[
-                  { value: 'light', label: 'Light' },
-                  { value: 'dark', label: 'Dark' },
-                  { value: 'system', label: 'System' },
-                ]}
-                value="light"
-                hideMessage
-              />
-            </div>
-          </CardContent>
-        </Card>
+            </CardHeader>
+            <CardContent>
+              <Form onSubmit={(e) => e.preventDefault()} className="el-space-y-content">
+                {/* Hidden username field for accessibility - helps password managers */}
+                <input type="text" name="username" autoComplete="username" className="sr-only" aria-hidden="true" tabIndex={-1} />
+                <div className="el-gap-field">
+                  <FormField label={t('settings.currentPassword')}>
+                    <Input type="password" placeholder={t('settings.currentPasswordPlaceholder')} autoComplete="current-password" />
+                  </FormField>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 el-gap-field">
+                  <FormField label={t('settings.newPassword')}>
+                    <Input type="password" placeholder={t('settings.newPasswordPlaceholder')} autoComplete="new-password" />
+                  </FormField>
+                  <FormField label={t('settings.confirmPassword')}>
+                    <Input type="password" placeholder={t('settings.confirmPasswordPlaceholder')} autoComplete="new-password" />
+                  </FormField>
+                </div>
+                <div className="el-gap-field flex justify-end">
+                  <Button type="submit">
+                    <Shield className="w-4 h-4 el-mr-xs" />
+                    {t('settings.updatePassword')}
+                  </Button>
+                </div>
+              </Form>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );

package/dist/templates/app/postcss-config.ejs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/dist/templates/app/services-setup.ejs

@@ -0,0 +1,158 @@
+import {
+  createShortcutManager,
+  createLogger,
+  createApiClient,
+  type ShortcutManager,
+  type Logger,
+  type ApiClient,
+} from '@elsapiens/services';
+
+/**
+ * Application Services
+ *
+ * This file initializes and exports the core services used throughout the application.
+ * Import these services where needed in your components.
+ */
+
+// Configuration from environment
+const API_BASE_URL = import.meta.env.VITE_API_URL || '/api';
+
+/**
+ * Logger instance
+ * Use for consistent logging throughout the application
+ *
+ * @example
+ * logger.info('User logged in', { userId: '123' });
+ * logger.error('Failed to fetch data', error);
+ */
+export const logger: Logger = createLogger({
+  level: import.meta.env.DEV ? 'debug' : 'info',
+  context: '<%= pascalName %>',
+});
+
+/**
+ * API Client instance
+ * Use for making HTTP requests to your backend
+ *
+ * @example
+ * const response = await apiClient.get('/users');
+ * const data = await apiClient.post('/users', { name: 'John' });
+ */
+export const apiClient: ApiClient = createApiClient({
+  baseUrl: API_BASE_URL,
+  timeout: 30000,
+  onError: (error) => {
+    logger.error('API Error', error);
+  },
+});
+
+/**
+ * Shortcut Manager instance
+ *
+ * Uses a stack-based context system for handling shortcuts in modals/popups.
+ * Only the topmost context receives keyboard events for context-scoped shortcuts.
+ * Global shortcuts (scope: 'global') always receive events regardless of context.
+ *
+ * ## Shortcut Scopes
+ *
+ * - `scope: 'global'` - Always active, receives events regardless of context stack
+ * - `scope: 'context'` - Only active when its context is at the top of the stack
+ *
+ * ## Context Stack Usage
+ *
+ * When opening a modal/popup:
+ * ```ts
+ * shortcutManager.pushContext('my-modal');
+ * ```
+ *
+ * When closing a modal/popup:
+ * ```ts
+ * shortcutManager.popContext('my-modal');
+ * ```
+ *
+ * ## Example: Modal with context-specific shortcuts
+ *
+ * ```tsx
+ * function MyModal({ onClose }: { onClose: () => void }) {
+ *   useEffect(() => {
+ *     // Push context when modal opens
+ *     shortcutManager.pushContext('my-modal');
+ *
+ *     // Register modal-specific shortcuts
+ *     const unregister = shortcutManager.register({
+ *       id: 'close-modal',
+ *       keys: 'escape',
+ *       label: 'Close',
+ *       category: 'modal',
+ *       scope: 'context',
+ *       context: 'my-modal',
+ *       action: () => onClose(),
+ *     });
+ *
+ *     return () => {
+ *       unregister();
+ *       shortcutManager.popContext('my-modal');
+ *     };
+ *   }, [onClose]);
+ *
+ *   return <div>Modal content</div>;
+ * }
+ * ```
+ */
+export const shortcutManager: ShortcutManager = createShortcutManager();
+
+// Register global shortcuts (always active regardless of context)
+shortcutManager.register({
+  id: 'help',
+  keys: '?',
+  label: 'Open Help',
+  category: 'General',
+  scope: 'global',
+  action: () => {
+    // Toggle help panel - implement based on your HelpProvider
+    logger.debug('Help shortcut triggered');
+  },
+});
+
+shortcutManager.register({
+  id: 'search',
+  keys: 'ctrl+k',
+  label: 'Open Search',
+  category: 'General',
+  scope: 'global',
+  action: () => {
+    // Open search/command palette - implement based on your needs
+    logger.debug('Search shortcut triggered');
+  },
+});
+
+// Shortcut manager detach function (set when attached)
+let detachShortcuts: (() => void) | null = null;
+
+/**
+ * Attach shortcut manager to document
+ * Call this after the app mounts
+ */
+export function attachShortcuts(): void {
+  detachShortcuts = shortcutManager.attach();
+}
+
+/**
+ * Initialize all services
+ * Call this in your main.tsx before rendering the app
+ */
+export function initializeServices(): void {
+  logger.info('Services initialized');
+}
+
+/**
+ * Cleanup all services
+ * Call this when unmounting the app (e.g., in useEffect cleanup)
+ */
+export function cleanupServices(): void {
+  if (detachShortcuts) {
+    detachShortcuts();
+    detachShortcuts = null;
+  }
+  logger.info('Services cleaned up');
+}

package/dist/templates/app/tailwind-config.ejs

@@ -0,0 +1,105 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@elsapiens/*/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  safelist: [
+    'hide-native-scrollbar',
+    'scrollbar-visible',
+    'scrollbar-hide',
+    'scrollbar-custom',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        // Wisteria palette (for accent colors - changes with color scheme)
+        wisteria: {
+          50: 'hsl(var(--wisteria-50))',
+          100: 'hsl(var(--wisteria-100))',
+          200: 'hsl(var(--wisteria-200))',
+          300: 'hsl(var(--wisteria-300))',
+          400: 'hsl(var(--wisteria-400))',
+          500: 'hsl(var(--wisteria-500))',
+          600: 'hsl(var(--wisteria-600))',
+          700: 'hsl(var(--wisteria-700))',
+          800: 'hsl(var(--wisteria-800))',
+          850: 'hsl(var(--wisteria-850))',
+          900: 'hsl(var(--wisteria-900))',
+          950: 'hsl(var(--wisteria-950))',
+        },
+        // Neutral gray scale (never changes)
+        neutral: {
+          50: 'hsl(var(--neutral-50))',
+          100: 'hsl(var(--neutral-100))',
+          200: 'hsl(var(--neutral-200))',
+          300: 'hsl(var(--neutral-300))',
+          400: 'hsl(var(--neutral-400))',
+          500: 'hsl(var(--neutral-500))',
+          600: 'hsl(var(--neutral-600))',
+          700: 'hsl(var(--neutral-700))',
+          800: 'hsl(var(--neutral-800))',
+          900: 'hsl(var(--neutral-900))',
+          950: 'hsl(var(--neutral-950))',
+        },
+        // Semantic colors
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          50: 'hsl(var(--wisteria-50))',
+          100: 'hsl(var(--wisteria-100))',
+          200: 'hsl(var(--wisteria-200))',
+          300: 'hsl(var(--wisteria-300))',
+          400: 'hsl(var(--wisteria-400))',
+          500: 'hsl(var(--wisteria-500))',
+          600: 'hsl(var(--wisteria-600))',
+          700: 'hsl(var(--wisteria-700))',
+          800: 'hsl(var(--wisteria-800))',
+          900: 'hsl(var(--wisteria-900))',
+          950: 'hsl(var(--wisteria-950))',
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
+        mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+};

package/dist/templates/app/test-setup.ejs

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';