@fireberry/cli 0.2.5-beta.0 → 0.2.5-beta.1

package/dist/bin/fireberry.js

@@ -13,7 +13,13 @@ const program = new Command();
 program
     .name("fireberry")
     .description("Fireberry developer CLI")
-    .version(packageJson.version);
+    .version(packageJson.version)
+    .configureOutput({
+    outputError: (str, write) => {
+        const formatted = str.replace(/^error:/i, 'Error:');
+        write(chalk.red(formatted));
+    }
+});
 program
     .command("init")
     .argument("[tokenid]", "Fireberry token id")
@@ -23,10 +29,9 @@ program
 });
 program
     .command("create")
-    .argument("[name...]", "App name")
-    .description("Create a new Fireberry app")
-    .action(async (nameArgs) => {
-    const name = nameArgs ? nameArgs.join("-") : undefined;
+    .argument("[name]", "App name")
+    .description("Create a new Fireberry app with a component")
+    .action(async (name) => {
     await runCreate({ name });
 });
 program

package/dist/commands/create-component.js

@@ -13,6 +13,12 @@ import { HEIGHT_OPTIONS } from "../constants/height-options.js";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const VALID_COMPONENT_TYPES = Object.values(COMPONENT_TYPE);
+function sanitizeComponentName(name) {
+    return name
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
 function validateComponentType(type) {
     if (!VALID_COMPONENT_TYPES.includes(type)) {
         throw new Error(`Invalid component type: "${type}". Valid types are: ${VALID_COMPONENT_TYPES.join(", ")}`);
@@ -118,17 +124,17 @@ export async function runCreateComponent({ type, name, }) {
         throw new Error(`Component with name "${componentName}" already exists in manifest.yml`);
     }
     const validatedType = validateComponentType(componentType);
+    const sanitizedName = sanitizeComponentName(componentName);
     const spinner = ora();
     try {
         const componentSettings = await promptForSettings(validatedType);
         spinner.text = chalk.cyan(`Creating Vite React app for "${chalk.cyan(componentName)}"...`);
         spinner.start();
-        const componentDir = path.join(process.cwd(), "static", componentName);
+        const componentDir = path.join(process.cwd(), componentName);
         await fs.ensureDir(componentDir);
-        // Create Vite app with React template
         spinner.text = `Running npm create vite@latest...`;
-        const viteResult = spawnSync(`npm create vite@latest ${componentName} -- --template react --no-interactive`, {
-            cwd: path.join(process.cwd(), "static"),
+        const viteResult = spawnSync(`npm create vite@latest ${sanitizedName} -- --template react --no-interactive`, {
+            cwd: process.cwd(),
             stdio: "inherit",
             shell: true,
         });
@@ -177,7 +183,7 @@ export async function runCreateComponent({ type, name, }) {
             type: validatedType,
             title: componentName,
             id: componentId,
-            path: `static/${componentName}/dist`,
+            path: `${componentName}/dist`,
             settings: componentSettings,
         };
         if (!manifest.components) {
@@ -193,9 +199,9 @@ export async function runCreateComponent({ type, name, }) {
         spinner.succeed(`Successfully created component "${chalk.cyan(componentName)}"!`);
         console.log(chalk.gray(`Component ID: ${componentId}`));
         console.log(chalk.gray(`Type: ${validatedType}`));
-        console.log(chalk.gray(`Path: static/${componentName}/dist`));
-        console.log(chalk.green("\n🎉 Your component is ready!"));
-        console.log(chalk.white(`   cd static/${componentName}`));
+        console.log(chalk.gray(`Path: ${sanitizedName}/dist`));
+        console.log(chalk.green(`\nYour component "${chalk.cyan(componentName)}" is ready!`));
+        console.log(chalk.white(`   cd ${sanitizedName}`));
         console.log(chalk.white(`   npm run dev    # Start development server`));
         console.log(chalk.white(`   npm run build  # Build for production`));
     }

package/dist/commands/create.js

@@ -2,13 +2,12 @@ import inquirer from "inquirer";
 import path from "node:path";
 import fs from "fs-extra";
 import { v4 as uuidv4 } from "uuid";
-import { fileURLToPath } from "node:url";
+import yaml from "js-yaml";
 import ora from "ora";
 import chalk from "chalk";
 import { createApp } from "../api/requests.js";
 import { getManifest } from "../utils/components.utils.js";
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { runCreateComponent } from "./create-component.js";
 function slugifyName(name) {
     const validPattern = /^[a-zA-Z0-9_-]+$/;
     if (!validPattern.test(name)) {
@@ -20,44 +19,55 @@ export async function runCreate({ name }) {
     let appName = name;
     if (!appName) {
         const answers = await inquirer.prompt([
-            { type: "input", name: "name", message: "App name" },
+            {
+                type: "input",
+                name: "name",
+                message: "App name:",
+            },
         ]);
         appName = (answers.name || "").trim();
     }
     if (!appName) {
-        throw new Error("Missing name.");
+        throw new Error("Missing app name.");
     }
     const slug = slugifyName(appName);
     const appId = uuidv4();
-    const componentId = uuidv4();
     const appDir = path.resolve(process.cwd(), slug);
+    const componentName = `${slug}-component`;
     if (await fs.pathExists(appDir)) {
         throw new Error(`Already exists. ${chalk.yellow(slug)}`);
     }
     const spinner = ora(`Creating app "${chalk.cyan(appName)}"...`).start();
+    const originalCwd = process.cwd();
     try {
         await fs.ensureDir(appDir);
-        const templatesDir = path.join(__dirname, "..", "..", "src", "templates");
-        const manifestTemplate = await fs.readFile(path.join(templatesDir, "manifest.yml"), "utf-8");
-        const htmlTemplate = await fs.readFile(path.join(templatesDir, "index.html"), "utf-8");
-        const manifestContent = manifestTemplate
-            .replace(/{{appName}}/g, appName)
-            .replace(/{{appId}}/g, appId)
-            .replace(/{{componentId}}/g, componentId);
-        const htmlContent = htmlTemplate.replace(/{{appName}}/g, appName);
-        await fs.writeFile(path.join(appDir, "manifest.yml"), manifestContent);
-        await fs.writeFile(path.join(appDir, "index.html"), htmlContent);
-        const manifest = await getManifest(appDir);
-        await createApp(manifest);
-        spinner.succeed(`Successfully created "${chalk.cyan(appName)}" app!`);
+        const initialManifest = {
+            app: {
+                id: appId,
+                name: appName,
+                description: "",
+            },
+            components: [],
+        };
+        await fs.writeFile(path.join(appDir, "manifest.yml"), yaml.dump(initialManifest, { indent: 2, lineWidth: -1, noRefs: true }), "utf-8");
+        spinner.succeed(`App directory "${chalk.cyan(appName)}" created!`);
         console.log(chalk.gray(`📁 Location: ${appDir}`));
         console.log(chalk.gray(`App ID: ${appId}`));
-        console.log(chalk.green("\n🎉 Your app is ready! Next steps:"));
+        process.chdir(appDir);
+        console.log(chalk.cyan(`\nAdding component "${componentName}"...`));
+        await runCreateComponent({ name: componentName });
+        spinner.start();
+        spinner.text = `Registering app with Fireberry...`;
+        await createApp(await getManifest());
+        spinner.succeed(`App registered with Fireberry!`);
+        console.log(chalk.green(`\n🎉 Your app is ready!`));
+        console.log(chalk.white(`\nNext steps:`));
         console.log(chalk.white(`   cd ${slug}`));
-        console.log(chalk.white("   # Start developing your Fireberry app"));
+        console.log(chalk.white(`   fireberry push    # Push to Fireberry`));
     }
     catch (error) {
         spinner.fail(`Failed to create app "${chalk.cyan(appName)}"`);
+        process.chdir(originalCwd);
         throw error;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fireberry/cli",
-  "version": "0.2.5-beta.0",
+  "version": "0.2.5-beta.1",
   "description": "Fireberry CLI tool",
   "type": "module",
   "author": "",
@@ -41,6 +41,8 @@
     "access": "public"
   },
   "dependencies": {
+    "@fireberry/ds": "^0.0.151",
+    "@fireberry/sdk": "^0.0.5",
     "axios": "^1.12.2",
     "chalk": "^5.3.0",
     "commander": "^12.1.0",

package/src/bin/fireberry.ts

@@ -15,7 +15,13 @@ const program = new Command();
 program
   .name("fireberry")
   .description("Fireberry developer CLI")
-  .version(packageJson.version);
+  .version(packageJson.version)
+  .configureOutput({
+    outputError: (str, write) => {
+      const formatted = str.replace(/^error:/i, 'Error:');
+      write(chalk.red(formatted));
+    }
+  });
 
 program
   .command("init")
@@ -27,11 +33,10 @@ program
 
 program
   .command("create")
-  .argument("[name...]", "App name")
-  .description("Create a new Fireberry app")
-  .action(async (nameArgs?: string[]) => {
-    const name = nameArgs ? nameArgs.join("-") : undefined;
-        await runCreate({ name });
+  .argument("[name]", "App name")
+  .description("Create a new Fireberry app with a component")
+  .action(async (name?: string) => {
+    await runCreate({ name });
   });
 
 program

package/src/commands/create-component.ts

@@ -22,6 +22,13 @@ interface CreateComponentOptions {
 
 const VALID_COMPONENT_TYPES = Object.values(COMPONENT_TYPE);
 
+function sanitizeComponentName(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
 function validateComponentType(type: string): ComponentType {
   if (!VALID_COMPONENT_TYPES.includes(type as ComponentType)) {
     throw new Error(
@@ -156,6 +163,8 @@ export async function runCreateComponent({
 
   const validatedType = validateComponentType(componentType);
 
+  const sanitizedName = sanitizeComponentName(componentName);
+
   const spinner = ora();
 
   try {
@@ -166,15 +175,14 @@ export async function runCreateComponent({
     );
     spinner.start();
 
-    const componentDir = path.join(process.cwd(), "static", componentName);
+    const componentDir = path.join(process.cwd(), componentName);
     await fs.ensureDir(componentDir);
 
-    // Create Vite app with React template
     spinner.text = `Running npm create vite@latest...`;
     const viteResult = spawnSync(
-      `npm create vite@latest ${componentName} -- --template react --no-interactive`,
+      `npm create vite@latest ${sanitizedName} -- --template react --no-interactive`,
       {
-        cwd: path.join(process.cwd(), "static"),
+        cwd: process.cwd(),
         stdio: "inherit",
         shell: true,
       }
@@ -247,7 +255,7 @@ export async function runCreateComponent({
       type: validatedType,
       title: componentName,
       id: componentId,
-      path: `static/${componentName}/dist`,
+      path: `${componentName}/dist`,
       settings: componentSettings,
     };
 
@@ -270,11 +278,15 @@ export async function runCreateComponent({
     spinner.succeed(
       `Successfully created component "${chalk.cyan(componentName)}"!`
     );
+
     console.log(chalk.gray(`Component ID: ${componentId}`));
     console.log(chalk.gray(`Type: ${validatedType}`));
-    console.log(chalk.gray(`Path: static/${componentName}/dist`));
-    console.log(chalk.green("\n🎉 Your component is ready!"));
-    console.log(chalk.white(`   cd static/${componentName}`));
+    console.log(chalk.gray(`Path: ${sanitizedName}/dist`));
+
+    console.log(
+      chalk.green(`\nYour component "${chalk.cyan(componentName)}" is ready!`)
+    );
+    console.log(chalk.white(`   cd ${sanitizedName}`));
     console.log(chalk.white(`   npm run dev    # Start development server`));
     console.log(chalk.white(`   npm run build  # Build for production`));
   } catch (error) {

package/src/commands/create.ts

@@ -2,14 +2,12 @@ import inquirer from "inquirer";
 import path from "node:path";
 import fs from "fs-extra";
 import { v4 as uuidv4 } from "uuid";
-import { fileURLToPath } from "node:url";
+import yaml from "js-yaml";
 import ora from "ora";
 import chalk from "chalk";
 import { createApp } from "../api/requests.js";
 import { getManifest } from "../utils/components.utils.js";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+import { runCreateComponent } from "./create-component.js";
 
 interface CreateOptions {
   name?: string;
@@ -31,59 +29,70 @@ export async function runCreate({ name }: CreateOptions): Promise<void> {
 
   if (!appName) {
     const answers = await inquirer.prompt([
-      { type: "input", name: "name", message: "App name" },
+      {
+        type: "input",
+        name: "name",
+        message: "App name:",
+      },
     ]);
     appName = (answers.name || "").trim();
   }
+
   if (!appName) {
-    throw new Error("Missing name.");
+    throw new Error("Missing app name.");
   }
 
   const slug = slugifyName(appName);
   const appId = uuidv4();
-  const componentId = uuidv4();
   const appDir = path.resolve(process.cwd(), slug);
+  const componentName = `${slug}-component`;
 
   if (await fs.pathExists(appDir)) {
     throw new Error(`Already exists. ${chalk.yellow(slug)}`);
   }
 
   const spinner = ora(`Creating app "${chalk.cyan(appName)}"...`).start();
+  const originalCwd = process.cwd();
 
   try {
     await fs.ensureDir(appDir);
 
-    const templatesDir = path.join(__dirname, "..", "..", "src", "templates");
-    const manifestTemplate = await fs.readFile(
-      path.join(templatesDir, "manifest.yml"),
-      "utf-8"
-    );
-    const htmlTemplate = await fs.readFile(
-      path.join(templatesDir, "index.html"),
+    const initialManifest = {
+      app: {
+        id: appId,
+        name: appName,
+        description: "",
+      },
+      components: [],
+    };
+
+    await fs.writeFile(
+      path.join(appDir, "manifest.yml"),
+      yaml.dump(initialManifest, { indent: 2, lineWidth: -1, noRefs: true }),
       "utf-8"
     );
 
-    const manifestContent = manifestTemplate
-      .replace(/{{appName}}/g, appName)
-      .replace(/{{appId}}/g, appId)
-      .replace(/{{componentId}}/g, componentId);
+    spinner.succeed(`App directory "${chalk.cyan(appName)}" created!`);
+    console.log(chalk.gray(`📁 Location: ${appDir}`));
+    console.log(chalk.gray(`App ID: ${appId}`));
 
-    const htmlContent = htmlTemplate.replace(/{{appName}}/g, appName);
+    process.chdir(appDir);
 
-    await fs.writeFile(path.join(appDir, "manifest.yml"), manifestContent);
-    await fs.writeFile(path.join(appDir, "index.html"), htmlContent);
-    const manifest = await getManifest(appDir);
+    console.log(chalk.cyan(`\nAdding component "${componentName}"...`));
 
-    await createApp(manifest);
+    await runCreateComponent({ name: componentName });
+    spinner.start();
+    spinner.text = `Registering app with Fireberry...`;
+    await createApp(await getManifest());
+    spinner.succeed(`App registered with Fireberry!`);
 
-    spinner.succeed(`Successfully created "${chalk.cyan(appName)}" app!`);
-    console.log(chalk.gray(`📁 Location: ${appDir}`));
-    console.log(chalk.gray(`App ID: ${appId}`));
-    console.log(chalk.green("\n🎉 Your app is ready! Next steps:"));
+    console.log(chalk.green(`\n🎉 Your app is ready!`));
+    console.log(chalk.white(`\nNext steps:`));
     console.log(chalk.white(`   cd ${slug}`));
-    console.log(chalk.white("   # Start developing your Fireberry app"));
+    console.log(chalk.white(`   fireberry push    # Push to Fireberry`));
   } catch (error) {
     spinner.fail(`Failed to create app "${chalk.cyan(appName)}"`);
+    process.chdir(originalCwd);
     throw error;
   }
 }

package/src/templates/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{appName}}</title>
-</head>
-
-<body>
-    <h1>Hello World</h1>
-    <p>Welcome to {{appName}}!</p>
-</body>
-
-</html>

package/src/templates/manifest.yml

@@ -1,14 +0,0 @@
-app:
-  id: "{{appId}}"
-  name: "{{appName}}"
-  description: ""
-components:
-  - type: record
-    title: my-first-component
-    id: "{{componentId}}"
-    path: static/comp/build
-    settings:
-      iconName: "related-single"
-      iconColor: "#7aae7f"
-      objectType: 0
-      height: "M"