@elsapiens/cli 0.1.0 → 0.1.2

package/dist/templates/pages/settings.ejs

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
 import {
   Button,
   Input,
@@ -6,158 +8,228 @@ import {
   Card,
   CardHeader,
   CardTitle,
+  CardDescription,
   CardContent,
+  FormField,
+  Separator,
 } from '@elsapiens/ui';
-import { User, Bell, Shield, Palette } from 'lucide-react';
-import { useState } from 'react';
+import { PageHeaderWithBreadcrumbs } from '@elsapiens/layout';
+import { usePageHeader } from '@elsapiens/providers';
+import { User, Bell, Shield, Palette, Mail, Moon, Save } from 'lucide-react';
+
+interface <%= pascalName %>PageProps {
+  className?: string;
+}
 
-export default function <%= pascalName %>() {
+export function <%= pascalName %>Page({ className }: <%= pascalName %>PageProps) {
   const [notifications, setNotifications] = useState(true);
   const [emailUpdates, setEmailUpdates] = useState(false);
 
+  // Set page header info
+  usePageHeader({
+    title: '<%= title %>',
+    description: '<%= description %>',
+    breadcrumbs: [
+      { label: 'Home', href: '/', as: Link },
+      { label: '<%= title %>' },
+    ],
+  });
+
+  // Theme options
+  const themeOptions = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'System' },
+  ];
+
+  // Language options
+  const languageOptions = [
+    { value: 'en', label: 'English' },
+    { value: 'es', label: 'Spanish' },
+    { value: 'fr', label: 'French' },
+  ];
+
   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"><%= title %></h1>
-        <p className="text-muted-foreground"><%= description %></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>Profile</CardTitle>
+                  <CardDescription>Manage your personal information</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="el-space-y-content">
+              <div className="grid grid-cols-1 sm:grid-cols-2 el-gap-field">
+                <FormField label="First Name">
+                  <Input defaultValue="John" />
+                </FormField>
+                <FormField label="Last Name">
+                  <Input defaultValue="Doe" />
+                </FormField>
               </div>
-              <div>
-                <label className="block text-sm font-medium text-foreground mb-1">
-                  Last Name
-                </label>
-                <Input defaultValue="Doe" hideMessage />
+              <div className="el-gap-field">
+                <FormField label="Email">
+                  <Input type="email" defaultValue="john.doe@example.com" />
+                </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>
+              <div className="el-gap-field flex justify-end">
+                <Button>
+                  <Save className="w-4 h-4 el-mr-xs" />
+                  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 for updates</p>
+          {/* 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>Appearance</CardTitle>
+                  <CardDescription>Customize your visual preferences</CardDescription>
+                </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 weekly email summaries</p>
+            </CardHeader>
+            <CardContent className="el-space-y-content">
+              {/* 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">Theme</p>
+                    <p className="text-sm text-muted-foreground">Choose your preferred color scheme</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={themeOptions}
+                    defaultValue="system"
+                  />
+                </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>
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                Language
-              </label>
-              <Select
-                options={[
-                  { value: 'en', label: 'English' },
-                  { value: 'es', label: 'Spanish' },
-                  { value: 'fr', label: 'French' },
-                ]}
-                value="en"
-                hideMessage
-              />
-            </div>
-          </CardContent>
-        </Card>
+              <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">
+                  <Mail className="w-5 h-5 text-muted-foreground el-mt-xs flex-shrink-0" />
+                  <div>
+                    <p className="font-medium text-foreground">Language</p>
+                    <p className="text-sm text-muted-foreground">Select your preferred language</p>
+                  </div>
+                </div>
+                <div className="sm:w-48 flex-shrink-0">
+                  <Select
+                    options={languageOptions}
+                    defaultValue="en"
+                  />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
 
-        {/* Security Section */}
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle className="flex items-center gap-3">
-              <Shield className="w-5 h-5 text-muted-foreground" />
-              Security
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="p-6 pt-0 space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                Current Password
-              </label>
-              <Input type="password" placeholder="Enter current password" hideMessage />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                New Password
-              </label>
-              <Input type="password" placeholder="Enter new password" hideMessage />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-foreground mb-1">
-                Confirm New Password
-              </label>
-              <Input type="password" placeholder="Confirm new password" hideMessage />
-            </div>
-            <div className="pt-2">
-              <Button>Update Password</Button>
-            </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>Notifications</CardTitle>
+                  <CardDescription>Configure your notification preferences</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">Push Notifications</p>
+                    <p className="text-sm text-muted-foreground">Receive push notifications for updates</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">Email Updates</p>
+                    <p className="text-sm text-muted-foreground">Receive weekly email summaries</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>Security</CardTitle>
+                  <CardDescription>Manage your password and security settings</CardDescription>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent 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="Current Password">
+                  <Input type="password" placeholder="Enter current password" autoComplete="current-password" />
+                </FormField>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 el-gap-field">
+                <FormField label="New Password">
+                  <Input type="password" placeholder="Enter new password" autoComplete="new-password" />
+                </FormField>
+                <FormField label="Confirm Password">
+                  <Input type="password" placeholder="Confirm new password" autoComplete="new-password" />
+                </FormField>
+              </div>
+              <div className="el-gap-field flex justify-end">
+                <Button>
+                  <Shield className="w-4 h-4 el-mr-xs" />
+                  Update Password
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
       </div>
     </div>
   );
 }
+
+export default <%= pascalName %>Page;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsapiens/cli",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "CLI scaffolding tool for elSapiens SDK projects",
   "type": "module",
   "bin": {
@@ -57,6 +57,8 @@
     "build": "tsup",
     "dev": "tsup --watch",
     "clean": "rm -rf dist",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "setup:global": "./scripts/setup-global.sh",
+    "unlink:global": "pnpm unlink --global"
   }
 }