@elsapiens/cli 0.1.0 → 0.1.3

package/README.md

@@ -14,7 +14,10 @@ npm install -g @elsapiens/cli
 
 ## Features
 
-- Create new projects with elSapiens SDK
+- Create new projects with complete elSapiens SDK setup
+- Full AppLayout with sidebar and topbar
+- All providers pre-configured (Theme, Auth, Locale, Help)
+- Services ready to use (Logger, ApiClient, ShortcutManager)
 - Add pages with correct structure and patterns
 - Add components with TypeScript templates
 - Interactive prompts for configuration
@@ -28,10 +31,6 @@ npm install -g @elsapiens/cli
 # Interactive mode
 el init my-app
 
-# With template selection
-el init my-app --template minimal
-el init my-app --template full
-
 # Skip prompts
 el init my-app --yes
 
@@ -39,30 +38,45 @@ el init my-app --yes
 el init my-app --no-git
 ```
 
-**Templates:**
-
-| Template | Description |
-|----------|-------------|
-| `minimal` | Basic setup with single Dashboard page |
-| `full` | Complete setup with Dashboard, Settings, and examples |
-
-**Generated Structure (minimal):**
+**Generated Structure:**
 
 ```
 my-app/
 ├── package.json
 ├── vite.config.ts
 ├── tsconfig.json
+├── tsconfig.node.json
+├── tailwind.config.js
+├── postcss.config.js
 ├── index.html
+├── .env.example
 ├── .gitignore
 └── src/
-    ├── main.tsx
-    ├── App.tsx
-    ├── index.css
+    ├── main.tsx              # All providers configured
+    ├── App.tsx               # Full AppLayout with sidebar/topbar
+    ├── index.css             # Design system styles
+    ├── help-topics.ts        # Help system topics
+    ├── services/
+    │   └── index.ts          # Logger, ApiClient, ShortcutManager
+    ├── translations/
+    │   └── common.ts         # i18n translations
     └── pages/
-        └── Dashboard.tsx
+        ├── Dashboard.tsx
+        └── Settings.tsx
 ```
 
+**Included Features:**
+
+| Feature | Description |
+|---------|-------------|
+| ThemeProvider | Dark/light mode with system detection |
+| AuthProvider | Authentication context |
+| LocaleProvider | Internationalization support |
+| HelpProvider | Help system with keyboard shortcuts |
+| AppLayout | Sidebar navigation + topbar |
+| AuthGuard | Route protection |
+| Services | Logger, ApiClient, ShortcutManager |
+
 ### Add Page
 
 ```bash
@@ -89,33 +103,6 @@ el add page Users --path src/features/users/pages
 | `list` | Data listing with search, filters, and table |
 | `settings` | Configuration page with form sections and toggles |
 
-**Page Structure:**
-
-All pages follow the established alignment pattern:
-
-```tsx
-<div className="p-6">
-  {/* Page Header - pl-6 to align with table spacer */}
-  <div className="flex items-center justify-between mb-8 pl-6">
-    <div>
-      <h1 className="text-2xl font-bold text-foreground">Title</h1>
-      <p className="text-muted-foreground">Description</p>
-    </div>
-    {/* Actions */}
-  </div>
-
-  {/* Content with Cards */}
-  <Card padding="none">
-    <CardHeader className="p-6">
-      <CardTitle>Section</CardTitle>
-    </CardHeader>
-    <CardContent className="p-6 pt-0">
-      {/* Content */}
-    </CardContent>
-  </Card>
-</div>
-```
-
 ### Add Component
 
 ```bash
@@ -150,7 +137,6 @@ $ el init my-dashboard
   elSapiens CLI v0.1.0
 
 ? Project name: my-dashboard
-? Select template: Minimal
 ? Initialize git repository? Yes
 
 Creating project...
@@ -160,6 +146,10 @@ Creating project...
   ✓ src/main.tsx
   ✓ src/App.tsx
   ✓ src/pages/Dashboard.tsx
+  ✓ src/pages/Settings.tsx
+  ✓ src/services/index.ts
+  ✓ src/translations/common.ts
+  ✓ src/help-topics.ts
 
 Done! Run:
   cd my-dashboard
@@ -206,7 +196,6 @@ Create a new elSapiens project.
 
 | Option | Description |
 |--------|-------------|
-| `-t, --template <type>` | Project template (minimal, full) |
 | `--no-git` | Skip git initialization |
 | `-y, --yes` | Skip prompts, use defaults |
 
@@ -240,7 +229,6 @@ elsapiens init my-app
 # Add command aliases
 el add page Users
 el generate page Users
-el g page Users
 ```
 
 ## Requirements
@@ -250,26 +238,99 @@ el g page Users
 
 ## Development
 
+### Building from Source
+
 ```bash
 # Clone the repository
 git clone https://github.com/elsapiens/sdk.git
-cd sdk/packages/cli
+cd sdk
 
-# Install dependencies
+# Install all dependencies
 pnpm install
 
-# Build
+# Build all packages (required for CLI to work)
 pnpm build
 
-# Test locally
-node dist/index.js --help
-node dist/index.js init test-app
+# Or build just the CLI
+cd packages/cli && pnpm build
+```
+
+### Using CLI from Git Checkout (Without npm)
+
+You can use the CLI directly from a git checkout without publishing to npm:
+
+```bash
+# Create a project using the local CLI build
+node /path/to/sdk/packages/cli/dist/index.js init my-project
+
+# Or set up an alias for convenience
+alias el-dev="node /path/to/sdk/packages/cli/dist/index.js"
+el-dev init my-project
+```
+
+### Testing Template Changes
+
+```bash
+# 1. Make changes to templates
+code packages/cli/src/templates/app/page-dashboard.ejs
+
+# 2. Rebuild the CLI
+cd packages/cli && pnpm build
+
+# 3. Create a fresh test project
+rm -rf /tmp/test-project
+node dist/index.js init /tmp/test-project
+
+# 4. Test the changes
+cd /tmp/test-project && pnpm install && pnpm dev
+```
+
+### Install Globally (One-Time Setup)
 
-# Link globally for testing
+The easiest way to install the CLI globally from your local SDK:
+
+```bash
+cd packages/cli
+
+# Run the setup script (builds and links globally)
+pnpm setup:global
+```
+
+After setup, use the `el` command from anywhere:
+
+```bash
+el init my-project
+el add page Users
+el add component UserCard
+```
+
+### Manual Linking
+
+```bash
+cd packages/cli
+pnpm build
 pnpm link --global
+
+# Verify
 el --version
 ```
 
+### Unlink
+
+```bash
+cd packages/cli
+pnpm unlink:global
+```
+
+### Shell Alias (Alternative)
+
+Add to `~/.zshrc` or `~/.bashrc`:
+
+```bash
+export ELSDK_PATH="/path/to/elSDK"
+alias el="node $ELSDK_PATH/packages/cli/dist/index.js"
+```
+
 ## Publishing
 
 ```bash

package/dist/index.js

@@ -220,6 +220,44 @@ async function initCommand(projectName, options) {
   if (!name) {
     name = "my-elsapiens-app";
   }
+  let httpsPort = "443";
+  let grpcPort = "9090";
+  let restPort = "8080";
+  if (!options.yes) {
+    httpsPort = await text2({
+      message: "HTTPS port:",
+      placeholder: "443",
+      initialValue: "443",
+      validate: (value) => {
+        const port = parseInt(value, 10);
+        if (isNaN(port) || port < 1 || port > 65535) {
+          return "Please enter a valid port number (1-65535)";
+        }
+      }
+    }) || "443";
+    grpcPort = await text2({
+      message: "gRPC port:",
+      placeholder: "9090",
+      initialValue: "9090",
+      validate: (value) => {
+        const port = parseInt(value, 10);
+        if (isNaN(port) || port < 1 || port > 65535) {
+          return "Please enter a valid port number (1-65535)";
+        }
+      }
+    }) || "9090";
+    restPort = await text2({
+      message: "REST API port:",
+      placeholder: "8080",
+      initialValue: "8080",
+      validate: (value) => {
+        const port = parseInt(value, 10);
+        if (isNaN(port) || port < 1 || port > 65535) {
+          return "Please enter a valid port number (1-65535)";
+        }
+      }
+    }) || "8080";
+  }
   const projectDir = resolvePath(name);
   if (await directoryExists(projectDir)) {
     const shouldOverwrite = options.yes ? false : await confirm2({
@@ -230,25 +268,6 @@ async function initCommand(projectName, options) {
       cancel2("Project creation cancelled.");
     }
   }
-  let template = options.template;
-  if (!options.yes) {
-    template = await select2({
-      message: "Select a template:",
-      options: [
-        {
-          value: "minimal",
-          label: "Minimal",
-          hint: "Basic setup with a single Dashboard page"
-        },
-        {
-          value: "full",
-          label: "Full",
-          hint: "Complete setup with Dashboard, Settings, and example components"
-        }
-      ],
-      initialValue: template
-    });
-  }
   const s = spinner2();
   s.start("Creating project...");
   try {
@@ -256,8 +275,7 @@ async function initCommand(projectName, options) {
     const pascalName = toPascalCase(name);
     const packageJson = await renderApp("package", {
       projectName: name,
-      pascalName,
-      template
+      pascalName
     });
     await writeFile(path3.join(projectDir, "package.json"), packageJson);
     const viteConfig = await renderApp("vite-config", {
@@ -265,10 +283,24 @@ async function initCommand(projectName, options) {
       pascalName
     });
     await writeFile(path3.join(projectDir, "vite.config.ts"), viteConfig);
+    const tailwindConfig = await renderApp("tailwind-config", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, "tailwind.config.js"), tailwindConfig);
+    const postcssConfig = await renderApp("postcss-config", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, "postcss.config.js"), postcssConfig);
     const tsconfig = await renderApp("tsconfig", {
       projectName: name
     });
     await writeFile(path3.join(projectDir, "tsconfig.json"), tsconfig);
+    const tsconfigNode = await renderApp("tsconfig-node", {
+      projectName: name
+    });
+    await writeFile(path3.join(projectDir, "tsconfig.node.json"), tsconfigNode);
     const indexHtml = await renderApp("index-html", {
       projectName: name,
       pascalName
@@ -281,14 +313,17 @@ async function initCommand(projectName, options) {
     await writeFile(path3.join(projectDir, "src", "main.tsx"), mainTsx);
     const appTsx = await renderApp("app", {
       projectName: name,
-      pascalName,
-      template
+      pascalName
     });
     await writeFile(path3.join(projectDir, "src", "App.tsx"), appTsx);
     const indexCss = await renderApp("index-css", {
       projectName: name
     });
     await writeFile(path3.join(projectDir, "src", "index.css"), indexCss);
+    const viteEnv = await renderApp("vite-env", {
+      projectName: name
+    });
+    await writeFile(path3.join(projectDir, "src", "vite-env.d.ts"), viteEnv);
     const dashboardPage = await renderApp("page-dashboard", {
       projectName: name,
       pascalName
@@ -297,16 +332,91 @@ async function initCommand(projectName, options) {
       path3.join(projectDir, "src", "pages", "Dashboard.tsx"),
       dashboardPage
     );
-    if (template === "full") {
-      const settingsPage = await renderApp("page-settings", {
-        projectName: name,
-        pascalName
-      });
-      await writeFile(
-        path3.join(projectDir, "src", "pages", "Settings.tsx"),
-        settingsPage
-      );
-    }
+    const settingsPage = await renderApp("page-settings", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "pages", "Settings.tsx"),
+      settingsPage
+    );
+    const translationsCommonEn = await renderApp("translations-common-en", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "translations", "common", "en.ts"),
+      translationsCommonEn
+    );
+    const translationsCommonIndex = await renderApp("translations-common-index", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "translations", "common", "index.ts"),
+      translationsCommonIndex
+    );
+    const translationsSettingsEn = await renderApp("translations-settings-en", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "translations", "settings", "en.ts"),
+      translationsSettingsEn
+    );
+    const translationsSettingsIndex = await renderApp("translations-settings-index", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "translations", "settings", "index.ts"),
+      translationsSettingsIndex
+    );
+    const helpTopics = await renderApp("help-topics", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "help-topics.ts"),
+      helpTopics
+    );
+    const servicesSetup = await renderApp("services-setup", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(
+      path3.join(projectDir, "src", "services", "index.ts"),
+      servicesSetup
+    );
+    const envExample = await renderApp("env-example", {
+      projectName: name,
+      pascalName,
+      httpsPort,
+      grpcPort,
+      restPort
+    });
+    await writeFile(path3.join(projectDir, ".env.example"), envExample);
+    await writeFile(path3.join(projectDir, ".env"), envExample);
+    const eslintConfig = await renderApp("eslint-config", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, "eslint.config.js"), eslintConfig);
+    const vitestConfig = await renderApp("vitest-config", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, "vitest.config.ts"), vitestConfig);
+    const testSetup = await renderApp("test-setup", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, "src", "test", "setup.ts"), testSetup);
+    const huskyPreCommit = await renderApp("husky-pre-commit", {
+      projectName: name,
+      pascalName
+    });
+    await writeFile(path3.join(projectDir, ".husky", "pre-commit"), huskyPreCommit);
     const gitignore = `# Dependencies
 node_modules/
 
@@ -331,6 +441,9 @@ Thumbs.db
 # Logs
 *.log
 npm-debug.log*
+
+# Coverage
+coverage/
 `;
     await writeFile(path3.join(projectDir, ".gitignore"), gitignore);
     s.stop("Project created!");
@@ -341,8 +454,10 @@ npm-debug.log*
       });
       if (initGit) {
         try {
-          execSync("git init", { cwd: projectDir, stdio: "ignore" });
-          logger.success("Git repository initialized");
+          execSync("git init -b main", { cwd: projectDir, stdio: "ignore" });
+          execSync("git add .", { cwd: projectDir, stdio: "ignore" });
+          execSync('git commit -m "Initial commit"', { cwd: projectDir, stdio: "ignore" });
+          logger.success("Git repository initialized with initial commit");
         } catch {
           logger.warn("Failed to initialize git repository");
         }
@@ -550,7 +665,7 @@ var VERSION = "0.1.0";
 function createCli() {
   const program = new Command();
   program.name("elsapiens").description("CLI scaffolding tool for elSapiens SDK projects").version(VERSION, "-v, --version", "Display version number");
-  program.command("init [project-name]").alias("create").description("Create a new elSapiens project").option("-t, --template <type>", "Project template (minimal or full)", "minimal").option("--no-git", "Skip git initialization").option("-y, --yes", "Skip prompts and use defaults").action(initCommand);
+  program.command("init [project-name]").alias("create").description("Create a new elSapiens project with full setup").option("--no-git", "Skip git initialization").option("-y, --yes", "Skip prompts and use defaults").action(initCommand);
   program.command("add").alias("generate").alias("g").description("Add a page or component to the project").addCommand(
     new Command("page").argument("[name]", "Page name").description("Add a new page").option("-t, --template <type>", "Page template (dashboard, list, settings)", "dashboard").option("-p, --path <dir>", "Custom pages directory").action(addCommand.page)
   ).addCommand(