@fireberry/cli 0.2.3-beta.0 → 0.2.4-beta.0

package/CLAUDE.md

@@ -58,6 +58,7 @@ Each CLI command is in [src/commands/](src/commands/):
 
 - **init**: Stores Fireberry API token in local config using `env-paths`
 - **create**: Creates new Fireberry app from templates with generated UUIDs
+- **create-component**: Scaffolds new Vite React component, installs Fireberry packages, builds it, and adds to manifest
 - **push**: Validates manifest, zips components, uploads to Fireberry API
 - **install**: Installs app on user's Fireberry account
 - **delete**: Deletes app from Fireberry platform (requires confirmation)
@@ -117,6 +118,42 @@ Templates use mustache-style placeholders (`{{appName}}`, `{{appId}}`, `{{compon
 
 - **manifest.yml**: Default manifest with single component
 - **index.html**: Basic HTML template
+- **App-record.jsx**: React component template for record-type components
+- **App-other.jsx**: React component template for global-menu and side-menu components
+
+### Create Component Command
+
+The `create-component` command ([src/commands/create-component.ts](src/commands/create-component.ts)) scaffolds a new React component within an existing Fireberry app:
+
+**Usage**: `fireberry create-component [name] [--type <type>]`
+
+**Process**:
+
+1. Validates component name doesn't already exist in manifest.yml
+2. Prompts for component type if not provided (record, global-menu, side-menu)
+3. Prompts for type-specific settings:
+   - **record**: objectType (number), height (S/M/L), sets default iconName and iconColor
+   - **global-menu**: displayName, sets default iconName
+   - **side-menu**: width (S/M/L), sets default iconName
+4. Creates Vite React app in `static/<componentName>` using `npm create vite@latest`
+5. Installs standard dependencies with `npm install`
+6. Installs Fireberry packages: `@fireberry/ds` and `@fireberry/sdk`
+7. Copies appropriate App.jsx template based on component type
+8. Builds the component with `npm run build`
+9. Generates UUID for component
+10. Adds component entry to manifest.yml with path `static/<componentName>/dist`
+11. Displays success message with component details and next steps
+
+**Requirements**:
+
+- Must be run from directory containing `manifest.yml`
+- Component name must be unique within the app
+
+**Output**:
+
+- Creates component directory at `static/<componentName>/`
+- Updates manifest.yml with new component entry
+- Built component ready at `static/<componentName>/dist/`
 
 ## Key Patterns
 
@@ -144,13 +181,14 @@ Component paths in manifest.yml are relative to the current working directory, n
 
 ## Important Notes
 
-- **Manifest Required**: `push`, `install`, and `delete` commands must be run from a directory containing `manifest.yml`
-- **Token Required**: Most commands require prior `init` to store API token
+- **Manifest Required**: `push`, `install`, `delete`, and `create-component` commands must be run from a directory containing `manifest.yml`
+- **Token Required**: Most commands (`push`, `install`, `delete`) require prior `init` to store API token
 - **Component IDs**: Must be unique UUIDs within a manifest
 - **Component Settings Validation**: Each component type has required settings that are validated during `push`:
   - `record`: Must have `iconName`, `iconColor`, and `objectType`
   - `global-menu`: Must have `displayName`
   - `side-menu`: Must have `iconName` and `width` (S/M/L)
+- **Component Creation**: `create-component` automatically scaffolds a Vite React app, installs `@fireberry/ds` and `@fireberry/sdk`, builds it, and adds it to the manifest
 - **Build Zipping**: Single files are wrapped in a directory before tar.gz creation
 - **Template Location**: Templates are resolved from `src/templates/` at compile time, copied to `dist/templates/`
 - **Delete Safety**: Delete command requires user confirmation before executing (cannot be undone)

package/dist/bin/fireberry.js

@@ -8,6 +8,7 @@ import { runPush } from "../commands/push.js";
 import { runInstall } from "../commands/install.js";
 import { runDelete } from "../commands/delete.js";
 import { runDebug } from "../commands/debug.js";
+import { runCreateComponent } from "../commands/create-component.js";
 const program = new Command();
 program
     .name("fireberry")
@@ -28,6 +29,14 @@ program
     const name = nameArgs ? nameArgs.join("-") : undefined;
     await runCreate({ name });
 });
+program
+    .command("create-component")
+    .argument("[name]", "Component name")
+    .argument("[type]", "Component type (record, global-menu, side-menu)")
+    .description("Add a new component to the existing app manifest")
+    .action(async (name, type) => {
+    await runCreateComponent({ name, type });
+});
 program
     .command("push")
     .description("Push app to Fireberry")

package/dist/commands/create-component.d.ts

@@ -0,0 +1,6 @@
+interface CreateComponentOptions {
+    name?: string;
+    type?: string;
+}
+export declare function runCreateComponent({ type, name, }: CreateComponentOptions): Promise<void>;
+export {};

package/dist/commands/create-component.js

@@ -0,0 +1,211 @@
+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 { spawnSync } from "node:child_process";
+import ora from "ora";
+import chalk from "chalk";
+import yaml from "js-yaml";
+import { getManifest } from "../utils/components.utils.js";
+import { COMPONENT_TYPE } from "../constants/component-types.js";
+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 validateComponentType(type) {
+    if (!VALID_COMPONENT_TYPES.includes(type)) {
+        throw new Error(`Invalid component type: "${type}". Valid types are: ${VALID_COMPONENT_TYPES.join(", ")}`);
+    }
+    return type;
+}
+async function promptForSettings(type) {
+    switch (type) {
+        case COMPONENT_TYPE.RECORD: {
+            const answers = await inquirer.prompt([
+                {
+                    type: "number",
+                    name: "objectType",
+                    message: "Object type:",
+                    default: 0,
+                },
+                {
+                    type: "list",
+                    name: "height",
+                    message: "Component height:",
+                    choices: HEIGHT_OPTIONS,
+                    default: "M",
+                },
+            ]);
+            return {
+                ...answers,
+                iconName: "related-single",
+                iconColor: "#7aae7f",
+            };
+        }
+        case COMPONENT_TYPE.GLOBAL_MENU: {
+            const answers = await inquirer.prompt([
+                {
+                    type: "input",
+                    name: "displayName",
+                    message: "Display name:",
+                    default: "Global Menu",
+                },
+            ]);
+            return {
+                ...answers,
+                iconName: "related-single",
+            };
+        }
+        case COMPONENT_TYPE.SIDE_MENU: {
+            const answers = await inquirer.prompt([
+                {
+                    type: "list",
+                    name: "width",
+                    message: "Component width:",
+                    choices: ["S", "M", "L"],
+                    default: "M",
+                },
+            ]);
+            return {
+                ...answers,
+                iconName: "related-single",
+            };
+        }
+        default:
+            return {};
+    }
+}
+export async function runCreateComponent({ type, name, }) {
+    let componentName = name;
+    let componentType = type;
+    const manifestPath = path.join(process.cwd(), "manifest.yml");
+    const manifest = await getManifest();
+    const components = manifest.components;
+    const existingComponent = components?.find((comp) => comp.title === componentName);
+    if (existingComponent) {
+        throw new Error(`Component with name "${componentName}" already exists in manifest.yml`);
+    }
+    if (!componentName || !componentType) {
+        const questions = [];
+        if (!componentName) {
+            questions.push({
+                type: "input",
+                name: "name",
+                message: "Component name:",
+            });
+        }
+        if (!componentType) {
+            questions.push({
+                type: "list",
+                name: "type",
+                message: "Component type:",
+                choices: VALID_COMPONENT_TYPES,
+            });
+        }
+        const answers = await inquirer.prompt(questions);
+        if (!componentName) {
+            componentName = (answers.name || "").trim();
+        }
+        if (!componentType) {
+            componentType = answers.type;
+        }
+    }
+    if (!componentName) {
+        throw new Error("Missing component name.");
+    }
+    if (!componentType) {
+        throw new Error("Missing component type.");
+    }
+    const validatedType = validateComponentType(componentType);
+    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);
+        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"),
+            stdio: "inherit",
+            shell: true,
+        });
+        if (viteResult.error || viteResult.status !== 0) {
+            throw new Error(`Failed to create Vite app: ${viteResult.error?.message || `Exit code ${viteResult.status}`}`);
+        }
+        spinner.text = `Installing dependencies...`;
+        const installResult = spawnSync("npm install", {
+            cwd: componentDir,
+            stdio: "inherit",
+            shell: true,
+        });
+        if (installResult.error || installResult.status !== 0) {
+            throw new Error("Failed to install dependencies");
+        }
+        spinner.text = `Installing Fireberry packages...`;
+        const fireberryResult = spawnSync("npm install @fireberry/ds @fireberry/sdk", {
+            cwd: componentDir,
+            stdio: "inherit",
+            shell: true,
+        });
+        if (fireberryResult.error || fireberryResult.status !== 0) {
+            throw new Error("Failed to install Fireberry packages");
+        }
+        spinner.text = `Configuring component...`;
+        const templatesDir = path.join(__dirname, "..", "..", "src", "templates");
+        // Choose the right App.jsx template based on component type
+        const appTemplateFile = validatedType === COMPONENT_TYPE.RECORD
+            ? "App-record.jsx"
+            : "App-other.jsx";
+        const appTemplate = await fs.readFile(path.join(templatesDir, appTemplateFile), "utf-8");
+        await fs.writeFile(path.join(componentDir, "src", "App.jsx"), appTemplate);
+        // Build the component
+        spinner.text = `Building component...`;
+        const buildResult = spawnSync("npm run build", {
+            cwd: componentDir,
+            stdio: "inherit",
+            shell: true,
+        });
+        if (buildResult.error || buildResult.status !== 0) {
+            throw new Error("Failed to build component");
+        }
+        spinner.text = `Adding component to manifest...`;
+        const componentId = uuidv4();
+        const newComponent = {
+            type: validatedType,
+            title: componentName,
+            id: componentId,
+            path: `static/${componentName}/dist`,
+            settings: componentSettings,
+        };
+        if (!manifest.components) {
+            manifest.components = [];
+        }
+        manifest.components.push(newComponent);
+        const updatedYaml = yaml.dump(manifest, {
+            indent: 2,
+            lineWidth: -1,
+            noRefs: true,
+        });
+        await fs.writeFile(manifestPath, updatedYaml, "utf-8");
+        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.white(`   npm run dev    # Start development server`));
+        console.log(chalk.white(`   npm run build  # Build for production`));
+    }
+    catch (error) {
+        if (error instanceof Error) {
+            spinner.fail(chalk.red(`Failed to add component: ${error.message}`));
+        }
+        else {
+            spinner.fail(chalk.red(`Failed to add component "${chalk.cyan(componentName || "unknown")}"`));
+        }
+        throw error;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fireberry/cli",
-  "version": "0.2.3-beta.0",
+  "version": "0.2.4-beta.0",
   "description": "Fireberry CLI tool",
   "type": "module",
   "author": "",

package/src/bin/fireberry.ts

@@ -8,6 +8,7 @@ import { runPush } from "../commands/push.js";
 import { runInstall } from "../commands/install.js";
 import { runDelete } from "../commands/delete.js";
 import { runDebug } from "../commands/debug.js";
+import { runCreateComponent } from "../commands/create-component.js";
 
 const program = new Command();
 
@@ -33,6 +34,15 @@ program
         await runCreate({ name });
   });
 
+program
+  .command("create-component")
+  .argument("[name]", "Component name")
+  .argument("[type]", "Component type (record, global-menu, side-menu)")
+  .description("Add a new component to the existing app manifest")
+  .action(async (name, type) => {
+   await runCreateComponent({ name, type });
+});
+
 program
   .command("push")
   .description("Push app to Fireberry")

package/src/commands/create-component.ts

@@ -0,0 +1,292 @@
+import inquirer, { QuestionCollection } from "inquirer";
+import path from "node:path";
+import fs from "fs-extra";
+import { v4 as uuidv4 } from "uuid";
+import { fileURLToPath } from "node:url";
+import { spawnSync } from "node:child_process";
+import ora from "ora";
+import chalk from "chalk";
+import yaml from "js-yaml";
+import { getManifest } from "../utils/components.utils.js";
+import { COMPONENT_TYPE, ComponentType } from "../constants/component-types.js";
+
+import { HEIGHT_OPTIONS } from "../constants/height-options.js";
+import { UntypedManifestComponent } from "../api/types.js";
+const __filename = fileURLToPath(import.meta.url);
+
+const __dirname = path.dirname(__filename);
+interface CreateComponentOptions {
+  name?: string;
+  type?: string;
+}
+
+const VALID_COMPONENT_TYPES = Object.values(COMPONENT_TYPE);
+
+function validateComponentType(type: string): ComponentType {
+  if (!VALID_COMPONENT_TYPES.includes(type as ComponentType)) {
+    throw new Error(
+      `Invalid component type: "${type}". Valid types are: ${VALID_COMPONENT_TYPES.join(
+        ", "
+      )}`
+    );
+  }
+  return type as ComponentType;
+}
+
+async function promptForSettings(
+  type: ComponentType
+): Promise<Record<string, unknown>> {
+  switch (type) {
+    case COMPONENT_TYPE.RECORD: {
+      const answers = await inquirer.prompt([
+        {
+          type: "number",
+          name: "objectType",
+          message: "Object type:",
+          default: 0,
+        },
+        {
+          type: "list",
+          name: "height",
+          message: "Component height:",
+          choices: HEIGHT_OPTIONS,
+          default: "M",
+        },
+      ]);
+      return {
+        ...answers,
+        iconName: "related-single",
+        iconColor: "#7aae7f",
+      };
+    }
+    case COMPONENT_TYPE.GLOBAL_MENU: {
+      const answers = await inquirer.prompt([
+        {
+          type: "input",
+          name: "displayName",
+          message: "Display name:",
+          default: "Global Menu",
+        },
+      ]);
+      return {
+        ...answers,
+        iconName: "related-single",
+      };
+    }
+    case COMPONENT_TYPE.SIDE_MENU: {
+      const answers = await inquirer.prompt([
+        {
+          type: "list",
+          name: "width",
+          message: "Component width:",
+          choices: ["S", "M", "L"],
+          default: "M",
+        },
+      ]);
+      return {
+        ...answers,
+        iconName: "related-single",
+      };
+    }
+    default:
+      return {};
+  }
+}
+
+export async function runCreateComponent({
+  type,
+  name,
+}: CreateComponentOptions): Promise<void> {
+  let componentName = name;
+  let componentType = type;
+
+  const manifestPath = path.join(process.cwd(), "manifest.yml");
+  const manifest = await getManifest();
+
+  const components = manifest.components as unknown as
+    | UntypedManifestComponent[]
+    | undefined;
+
+  const existingComponent = components?.find(
+    (comp) => comp.title === componentName
+  );
+  if (existingComponent) {
+    throw new Error(
+      `Component with name "${componentName}" already exists in manifest.yml`
+    );
+  }
+
+  if (!componentName || !componentType) {
+    const questions: QuestionCollection<{ name: string; type: string }>[] = [];
+
+    if (!componentName) {
+      questions.push({
+        type: "input",
+        name: "name",
+        message: "Component name:",
+      });
+    }
+
+    if (!componentType) {
+      questions.push({
+        type: "list",
+        name: "type",
+        message: "Component type:",
+        choices: VALID_COMPONENT_TYPES,
+      });
+    }
+
+    const answers = await inquirer.prompt(questions);
+
+    if (!componentName) {
+      componentName = (answers.name || "").trim();
+    }
+    if (!componentType) {
+      componentType = answers.type;
+    }
+  }
+
+  if (!componentName) {
+    throw new Error("Missing component name.");
+  }
+
+  if (!componentType) {
+    throw new Error("Missing component type.");
+  }
+
+  const validatedType = validateComponentType(componentType);
+
+  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);
+    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"),
+        stdio: "inherit",
+        shell: true,
+      }
+    );
+
+    if (viteResult.error || viteResult.status !== 0) {
+      throw new Error(
+        `Failed to create Vite app: ${
+          viteResult.error?.message || `Exit code ${viteResult.status}`
+        }`
+      );
+    }
+
+    spinner.text = `Installing dependencies...`;
+    const installResult = spawnSync("npm install", {
+      cwd: componentDir,
+      stdio: "inherit",
+      shell: true,
+    });
+
+    if (installResult.error || installResult.status !== 0) {
+      throw new Error("Failed to install dependencies");
+    }
+
+    spinner.text = `Installing Fireberry packages...`;
+    const fireberryResult = spawnSync(
+      "npm install @fireberry/ds @fireberry/sdk",
+      {
+        cwd: componentDir,
+        stdio: "inherit",
+        shell: true,
+      }
+    );
+
+    if (fireberryResult.error || fireberryResult.status !== 0) {
+      throw new Error("Failed to install Fireberry packages");
+    }
+    spinner.text = `Configuring component...`;
+
+    const templatesDir = path.join(__dirname, "..", "..", "src", "templates");
+
+    // Choose the right App.jsx template based on component type
+    const appTemplateFile =
+      validatedType === COMPONENT_TYPE.RECORD
+        ? "App-record.jsx"
+        : "App-other.jsx";
+    const appTemplate = await fs.readFile(
+      path.join(templatesDir, appTemplateFile),
+      "utf-8"
+    );
+    await fs.writeFile(path.join(componentDir, "src", "App.jsx"), appTemplate);
+
+    // Build the component
+    spinner.text = `Building component...`;
+    const buildResult = spawnSync("npm run build", {
+      cwd: componentDir,
+      stdio: "inherit",
+      shell: true,
+    });
+
+    if (buildResult.error || buildResult.status !== 0) {
+      throw new Error("Failed to build component");
+    }
+
+    spinner.text = `Adding component to manifest...`;
+
+    const componentId = uuidv4();
+
+    const newComponent: UntypedManifestComponent = {
+      type: validatedType,
+      title: componentName,
+      id: componentId,
+      path: `static/${componentName}/dist`,
+      settings: componentSettings,
+    };
+
+    if (!manifest.components) {
+      manifest.components = [];
+    }
+
+    (manifest.components as unknown as UntypedManifestComponent[]).push(
+      newComponent
+    );
+
+    const updatedYaml = yaml.dump(manifest, {
+      indent: 2,
+      lineWidth: -1,
+      noRefs: true,
+    });
+
+    await fs.writeFile(manifestPath, updatedYaml, "utf-8");
+
+    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.white(`   npm run dev    # Start development server`));
+    console.log(chalk.white(`   npm run build  # Build for production`));
+  } catch (error) {
+    if (error instanceof Error) {
+      spinner.fail(chalk.red(`Failed to add component: ${error.message}`));
+    } else {
+      spinner.fail(
+        chalk.red(
+          `Failed to add component "${chalk.cyan(componentName || "unknown")}"`
+        )
+      );
+    }
+    throw error;
+  }
+}

package/src/templates/App-other.jsx

@@ -0,0 +1,28 @@
+import { useState } from "react";
+import { Button, Typography, DSThemeContextProvider } from "@fireberry/ds";
+
+function App() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleButtonClick = async () => {
+    setIsLoading(true);
+    // Add your logic here
+    setTimeout(() => {
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <DSThemeContextProvider isRtl={false}>
+      <div>
+        <Typography type="h3" color="information">Hello from Fireberry!</Typography>
+        <Typography>This is a Fireberry component built with React + Vite</Typography>
+        <p style={{ marginBottom: "10px" }}>
+          <Button onClick={handleButtonClick} label="Click Me" isLoading={isLoading}></Button>
+        </p>
+      </div>
+    </DSThemeContextProvider>
+  );
+}
+
+export default App;

package/src/templates/App-record.jsx

@@ -0,0 +1,64 @@
+import { useState, useEffect, useMemo } from "react";
+import FireberryClientSDK from "@fireberry/sdk/client";
+import { Button, Typography, DSThemeContextProvider } from "@fireberry/ds";
+
+function App() {
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [initError, setInitError] = useState(null);
+  const [context, setContext] = useState(null);
+  const [api, setApi] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Create a new instance (memoized to avoid recreating on every render)
+  const client = useMemo(() => new FireberryClientSDK(), []);
+
+  // Initialize context on component mount
+  useEffect(() => {
+    const initializeContext = async () => {
+      try {
+        await client.initializeContext();
+        setIsInitialized(true);
+        setContext(client.context);
+        setApi(client.api);
+      } catch (error) {
+        setInitError(error);
+        console.error("Failed to initialize context:", error);
+      }
+    };
+
+    initializeContext();
+  }, [client]);
+
+  const handleButtonClick = async () => {
+    setIsLoading(true)
+    if (context.record && context?.user.id) {
+      await api.update(context.record.type, context.record.id, {
+        ownerid: context?.user.id,
+      });
+    }
+    setIsLoading(false)
+  };
+
+  return (
+    <DSThemeContextProvider isRtl={false}>
+      {initError ? (
+        <div>
+          <h1>Error Initializing Context</h1>
+          <p>Error: {initError.message || String(initError)}</p>
+        </div>
+      ) : isInitialized ? (
+        <div>
+          <Typography type="h3" color="information">Hello {context?.user.fullName}!</Typography>
+          <Typography >Click <Typography color="success" >Assign</Typography> button to assign record to current user ({context?.user.fullName})</Typography>
+          <p style={{ marginBottom: "10px" }}><Button onClick={handleButtonClick} label="Assign" isLoading={isLoading}></Button></p>
+        </div>
+      ) : (
+        <div>
+          <h1>Initializing Context...</h1>
+        </div>
+      )}
+    </DSThemeContextProvider>
+  );
+}
+
+export default App;