@elsapiens/cli 0.1.0 → 0.1.2

package/dist/templates/app/main.ejs

@@ -1,15 +1,92 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { HelpProvider, ThemeProvider, LocaleProvider, AuthProvider, useAuth } from '@elsapiens/providers';
+import { AuthGuard } from '@elsapiens/shell';
 import App from './App';
-import '@elsapiens/styles/variables.css';
-import '@elsapiens/styles/components.css';
+import { helpTopics } from './help-topics';
+import { loadCommon } from './translations/common/index';
+import { initializeServices } from './services';
 import './index.css';
 
+// Configuration from environment
+const AUTH_URL = import.meta.env.VITE_AUTH_URL || 'https://auth.example.com';
+const ROOT_DOMAIN = import.meta.env.VITE_ROOT_DOMAIN ? `.${import.meta.env.VITE_ROOT_DOMAIN}` : '.example.com';
+
+// Initialize services
+initializeServices();
+
+/**
+ * Loading screen component
+ */
+function LoadingScreen() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center el-space-y-md">
+        <div className="w-12 h-12 mx-auto rounded-lg bg-primary-500 flex items-center justify-center text-white font-bold text-xl animate-pulse">
+          E
+        </div>
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Inner app wrapper that uses the auth context for AuthGuard
+ *
+ * In development mode, auth is bypassed for easier testing.
+ * In production, set VITE_REQUIRE_AUTH=true to enable auth checks.
+ */
+function AuthenticatedApp() {
+  const { isAuthenticated, isLoading, hasAllPermissions, hasAnyRole } = useAuth();
+
+  // Wait for auth to be determined before rendering AuthGuard
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  // In development, bypass auth by default unless VITE_REQUIRE_AUTH is set
+  const requireAuth = import.meta.env.VITE_REQUIRE_AUTH === 'true';
+  const isAuthed = requireAuth ? isAuthenticated : true;
+
+  return (
+    <AuthGuard
+      authUrl={AUTH_URL}
+      returnUrlParam="return_url"
+      checkAuth={() => isAuthed}
+      checkPermissions={(perms) => hasAllPermissions(perms)}
+      checkRoles={(roles) => hasAnyRole(roles)}
+      loadingComponent={<LoadingScreen />}
+    >
+      <App />
+    </AuthGuard>
+  );
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <BrowserRouter>
-      <App />
+    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
+      <ThemeProvider defaultTheme="system" rootDomain={ROOT_DOMAIN}>
+        <AuthProvider
+          authUrl={AUTH_URL}
+          returnUrlParam="return_url"
+        >
+          <LocaleProvider initialLoader={loadCommon} rootDomain={ROOT_DOMAIN}>
+            <HelpProvider
+              initialTopics={helpTopics}
+              config={{
+                enabled: true,
+                showHelpIcons: true,
+                helpPanelPosition: 'modal',
+                searchEnabled: true,
+              }}
+            >
+              <AuthenticatedApp />
+            </HelpProvider>
+          </LocaleProvider>
+        </AuthProvider>
+      </ThemeProvider>
     </BrowserRouter>
   </React.StrictMode>
 );

package/dist/templates/app/package.ejs

@@ -7,25 +7,50 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "precommit": "pnpm test:coverage && pnpm lint",
+    "prepare": "husky"
   },
   "dependencies": {
     "@elsapiens/ui": "latest",
     "@elsapiens/utils": "latest",
     "@elsapiens/styles": "latest",
-    "lucide-react": "^0.300.0",
+    "@elsapiens/providers": "latest",
+    "@elsapiens/layout": "latest",
+    "@elsapiens/shell": "latest",
+    "@elsapiens/help": "latest",
+    "@elsapiens/hooks": "latest",
+    "@elsapiens/services": "latest",
+    "@elsapiens/sdk": "latest",
+    "lucide-react": "^0.303.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^4.2.0",
+    "@vitest/coverage-v8": "^1.0.0",
     "autoprefixer": "^10.4.16",
+    "eslint": "^9.0.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "globals": "^15.0.0",
+    "husky": "^9.0.0",
+    "jsdom": "^24.0.0",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.0",
-    "vite": "^5.0.0"
+    "typescript-eslint": "^8.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
   }
 }

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

@@ -1,11 +1,18 @@
+import { useState } from 'react';
 import {
   Button,
   Card,
   CardHeader,
   CardTitle,
   CardContent,
+  Modal,
+  Input,
+  FormField,
 } from '@elsapiens/ui';
+import { PageHeaderWithBreadcrumbs } from '@elsapiens/layout';
 import { Plus, TrendingUp, TrendingDown, Users, FileText, DollarSign } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { useLocale, usePageHeader } from '@elsapiens/providers';
 
 interface StatCardProps {
   title: string;
@@ -19,13 +26,13 @@ function StatCard({ title, value, change, changeType, icon: Icon }: StatCardProp
   const isPositive = changeType === 'positive';
   return (
     <Card padding="none">
-      <CardContent className="p-6">
+      <CardContent className="el-p-lg">
         <div className="flex items-start justify-between">
           <div className="flex-1">
             <p className="text-sm text-muted-foreground">{title}</p>
-            <p className="text-2xl font-bold text-foreground mt-1">{value}</p>
+            <p className="text-2xl font-bold text-foreground el-mt-xs">{value}</p>
             {change && (
-              <p className={`text-sm mt-1 flex items-center gap-1 ${isPositive ? 'text-success' : 'text-error'}`}>
+              <p className={`text-sm el-mt-xs flex items-center el-gap-xs ${isPositive ? 'text-success' : 'text-error'}`}>
                 {isPositive ? <TrendingUp className="w-4 h-4" /> : <TrendingDown className="w-4 h-4" />}
                 {change}
               </p>
@@ -41,68 +48,100 @@ function StatCard({ title, value, change, changeType, icon: Icon }: StatCardProp
 }
 
 export default function Dashboard() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { t } = useLocale();
+
+  // Set page header info
+  usePageHeader({
+    title: 'Dashboard',
+    description: "Welcome back! Here's what's happening.",
+    breadcrumbs: [
+      { label: t('nav.home'), href: '/', as: Link },
+      { label: 'Dashboard' },
+    ],
+  });
+
   return (
-    <div className="p-6">
-      {/* Page Header - pl-6 to align with content */}
-      <div className="flex items-center justify-between mb-8 pl-6">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
-          <p className="text-muted-foreground">Welcome back! Here's what's happening.</p>
-        </div>
-        <div className="flex items-center gap-4">
-          <Button>
-            <Plus className="w-4 h-4 mr-2" />
-            New Item
-          </Button>
+    <div className="flex flex-col">
+      <PageHeaderWithBreadcrumbs variant="card" linkComponent={Link}>
+        <Button onClick={() => setIsModalOpen(true)} className="w-full sm:w-auto">
+          <Plus className="w-4 h-4 el-mr-sm" />
+          New Item
+        </Button>
+      </PageHeaderWithBreadcrumbs>
+
+      <div className="el-p-lg" style={{ overflowX: 'clip' }}>
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 el-gap-lg el-mb-xl">
+          <StatCard
+            title="Total Revenue"
+            value="$45,231"
+            change="+20.1% from last month"
+            changeType="positive"
+            icon={DollarSign}
+          />
+          <StatCard
+            title="Documents"
+            value="2,345"
+            change="+15% from last month"
+            changeType="positive"
+            icon={FileText}
+          />
+          <StatCard
+            title="Active Users"
+            value="1,234"
+            change="+5.2% from last month"
+            changeType="positive"
+            icon={Users}
+          />
+          <StatCard
+            title="Bounce Rate"
+            value="24.5%"
+            change="-3.2% from last month"
+            changeType="negative"
+            icon={TrendingDown}
+          />
         </div>
-      </div>
 
-      {/* Stats Grid */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <StatCard
-          title="Total Revenue"
-          value="$45,231"
-          change="+20.1% from last month"
-          changeType="positive"
-          icon={DollarSign}
-        />
-        <StatCard
-          title="Documents"
-          value="2,345"
-          change="+15% from last month"
-          changeType="positive"
-          icon={FileText}
-        />
-        <StatCard
-          title="Active Users"
-          value="1,234"
-          change="+5.2% from last month"
-          changeType="positive"
-          icon={Users}
-        />
-        <StatCard
-          title="Bounce Rate"
-          value="24.5%"
-          change="-3.2% from last month"
-          changeType="negative"
-          icon={TrendingDown}
-        />
+        {/* Content Area */}
+        <div>
+          <Card padding="none">
+            <CardHeader className="el-p-lg">
+              <CardTitle>Getting Started</CardTitle>
+            </CardHeader>
+            <CardContent className="el-px-lg el-pb-lg">
+              <p className="text-muted-foreground">
+                Welcome to your new elSapiens project! Edit this page at{' '}
+                <code className="text-sm bg-muted el-px-xs el-py-xs rounded">src/pages/Dashboard.tsx</code>
+              </p>
+            </CardContent>
+          </Card>
+        </div>
       </div>
 
-      {/* Content Area */}
-      <div>
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle>Getting Started</CardTitle>
-          </CardHeader>
-          <CardContent className="p-6 pt-0">
-            <p className="text-muted-foreground">
-              Welcome to your new elSapiens project! Edit this page at{' '}
-              <code className="text-sm bg-muted px-1 py-0.5 rounded">src/pages/Dashboard.tsx</code>
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      {/* Modal Example */}
+      <Modal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        title="Create New Item"
+      >
+        <div className="flex flex-col el-gap-field">
+          <FormField label="Item Name">
+            <Input placeholder="Enter item name..." />
+          </FormField>
+          <FormField label="Description">
+            <Input placeholder="Enter description..." />
+          </FormField>
+          <div className="flex justify-end el-gap-field el-pt-sm">
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={() => setIsModalOpen(false)}>
+              Create
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }