@skalfa/skalfa-cli 1.0.11 → 1.0.12

package/dist/bin/skalfa.js

@@ -89,10 +89,21 @@ program
 });
 program
     .command("pick")
-    .description("Eject/copy a core utility from @skalfa/skalfa-api-core into your local utils folder for customization.")
-    .argument("<utility>", `utility name: ${pick_1.UTILITIES.join(", ")}`)
-    .action(async (utility) => {
-    await runCommand(() => (0, pick_1.pickUtility)(utility));
+    .description("Eject/copy a core utility or component into your local project for customization.")
+    .argument("<name>", "utility or component name")
+    .argument("[newName]", "new name for the component (optional, component only)")
+    .action(async (name, newName) => {
+    await runCommand(() => {
+        if (pick_1.UTILITIES.includes(name)) {
+            if (newName) {
+                throw new Error("Renaming is only supported for components, not utilities.");
+            }
+            (0, pick_1.pickUtility)(name);
+        }
+        else {
+            (0, pick_1.pickComponent)(name, newName);
+        }
+    });
 });
 program
     .command("update")

package/dist/commands/add-extension.js

@@ -43,6 +43,75 @@ async function addExtension(extensionName) {
             (0, installer_1.installPackage)(projectRoot, isDev ? "file:../skalfa-idb" : "@skalfa/skalfa-idb");
             addTsconfigPath(node_path_1.default.join(projectRoot, "tsconfig.json"), "@skalfa/skalfa-idb");
             addUtilExport(node_path_1.default.join(projectRoot, "utils", "index.ts"), "@skalfa/skalfa-idb");
+            // Scaffold IDBProvider
+            console.log("Scaffolding IDBProvider...");
+            const providerDir = node_path_1.default.join(projectRoot, "components", "base.components", "wrap");
+            if (!node_fs_1.default.existsSync(providerDir)) {
+                node_fs_1.default.mkdirSync(providerDir, { recursive: true });
+            }
+            const providerPath = node_path_1.default.join(providerDir, "IDBProvider.tsx");
+            const providerContent = `"use client"
+
+import { useEffect } from "react"
+import { idb } from "@skalfa/skalfa-idb"
+import { AppSchema } from "@schema"
+import { registry } from "@utils"
+
+export function IDBProvider({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    idb.setDefaultSchema(AppSchema);
+    registry.register("idb", idb);
+  }, []);
+
+  return <>{children}</>
+}
+`;
+            node_fs_1.default.writeFileSync(providerPath, providerContent, "utf8");
+            console.log(`Created: ${providerPath}`);
+            // Scaffold app.schema.ts
+            console.log("Scaffolding AppSchema...");
+            const schemaDir = node_path_1.default.join(projectRoot, "schema", "idb");
+            if (!node_fs_1.default.existsSync(schemaDir)) {
+                node_fs_1.default.mkdirSync(schemaDir, { recursive: true });
+            }
+            const schemaPath = node_path_1.default.join(schemaDir, "app.schema.ts");
+            const schemaContent = `import { DBSchema } from "@skalfa/skalfa-idb"
+
+const name  =  String(process.env.NEXT_PUBLIC_APP_NAME || "").toLowerCase().trim().replace(/[^\\w\\s-]/g, "").replace(/[\\s_-]+/g, "-").replace(/^-+|-+$/g, "") + ".idb-app";
+
+export const AppSchema: DBSchema = {
+  name: name,
+  version: 1,
+  stores: {}
+}
+`;
+            node_fs_1.default.writeFileSync(schemaPath, schemaContent, "utf8");
+            console.log(`Created: ${schemaPath}`);
+            // Ensure schema/index.ts exists so the @schema alias works
+            const schemaIndexPath = node_path_1.default.join(projectRoot, "schema", "index.ts");
+            if (!node_fs_1.default.existsSync(schemaIndexPath)) {
+                node_fs_1.default.writeFileSync(schemaIndexPath, `export * from "./idb/app.schema";\n`, "utf8");
+                console.log(`Created: ${schemaIndexPath}`);
+            }
+            // Update app/layout.tsx
+            console.log("Updating app/layout.tsx...");
+            const layoutPath = node_path_1.default.join(projectRoot, "app", "layout.tsx");
+            if (node_fs_1.default.existsSync(layoutPath)) {
+                let layoutContent = node_fs_1.default.readFileSync(layoutPath, "utf8");
+                // 1. Add IDBProvider to import
+                if (layoutContent.includes('import { ShortcutProvider } from "@components";')) {
+                    layoutContent = layoutContent.replace('import { ShortcutProvider } from "@components";', 'import { IDBProvider, ShortcutProvider } from "@components";');
+                }
+                else if (layoutContent.includes('import { ShortcutProvider } from "@components"')) {
+                    layoutContent = layoutContent.replace('import { ShortcutProvider } from "@components"', 'import { IDBProvider, ShortcutProvider } from "@components"');
+                }
+                // 2. Wrap {children} with <IDBProvider>
+                if (layoutContent.includes("{children}") && !layoutContent.includes("<IDBProvider>")) {
+                    layoutContent = layoutContent.replace(/\{\s*children\s*\}/, `<IDBProvider>\n            {children}\n          </IDBProvider>`);
+                }
+                node_fs_1.default.writeFileSync(layoutPath, layoutContent, "utf8");
+                console.log(`Updated: ${layoutPath}`);
+            }
         }
         else if (extensionName === "socket") {
             console.log("Installing Skalfa Socket.io client extension...");

package/dist/commands/pick.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.UTILITIES = exports.UTILITY_EXPORTS = void 0;
 exports.pickUtility = pickUtility;
+exports.pickComponent = pickComponent;
 const node_fs_1 = __importDefault(require("node:fs"));
 const node_path_1 = __importDefault(require("node:path"));
 const fs_1 = require("../utils/fs");
@@ -38,7 +39,6 @@ function pickUtility(utilityName) {
     if (!(0, fs_1.exists)(utilsDir) || !(0, fs_1.exists)(indexPath)) {
         throw new Error("Folder utils or utils/index.ts not found. Make sure you are at the project root.");
     }
-    // 1. Tentukan path source dari node_modules dan target di lokal proyek
     const corePackagePath = node_path_1.default.join(projectRoot, "node_modules", "@skalfa", "skalfa-api-core");
     const sourceDir = node_path_1.default.join(corePackagePath, "src", utilityName);
     const targetDir = node_path_1.default.join(utilsDir, utilityName);
@@ -48,7 +48,6 @@ function pickUtility(utilityName) {
     if ((0, fs_1.exists)(targetDir)) {
         throw new Error(`Utility folder "${utilityName}" is already present in your local utils folder.`);
     }
-    // 2. Salin folder dari node_modules ke lokal proyek secara rekursif
     console.log(`Copying ${utilityName} folder from @skalfa/skalfa-api-core to utils/ ...`);
     node_fs_1.default.cpSync(sourceDir, targetDir, { recursive: true });
     const filesToDelete = ["CONTRIBUTING.md", "LICENSE"];
@@ -59,7 +58,6 @@ function pickUtility(utilityName) {
         }
     }
     console.log(`✓ Copied ${utilityName} folder`);
-    // 3. Perbarui utils/index.ts untuk mereferensikan folder lokal
     console.log("Updating utils/index.ts with explicit local export override ...");
     let indexContent = node_fs_1.default.readFileSync(indexPath, "utf8").trim();
     const localExportLine = `export { ${utilitySymbols.join(", ")} } from "./${utilityName}";`;
@@ -73,3 +71,133 @@ function pickUtility(utilityName) {
     }
     console.log(`\nSuccess! You can now customize files under: utils/${utilityName}/`);
 }
+function findComponentFolder(srcDir, componentName) {
+    if (!node_fs_1.default.existsSync(srcDir))
+        return null;
+    const folders = node_fs_1.default.readdirSync(srcDir);
+    for (const folder of folders) {
+        const folderPath = node_path_1.default.join(srcDir, folder);
+        if (!node_fs_1.default.statSync(folderPath).isDirectory())
+            continue;
+        const files = node_fs_1.default.readdirSync(folderPath);
+        for (const file of files) {
+            if (!file.endsWith(".tsx") && !file.endsWith(".ts"))
+                continue;
+            const filePath = node_path_1.default.join(folderPath, file);
+            const content = node_fs_1.default.readFileSync(filePath, "utf8");
+            // Match the component name or the component name with "Component" suffix (e.g. Button or ButtonComponent)
+            const regex = new RegExp(`export\\s+(async\\s+)?(function|const|class|type|interface)\\s+\\b(${componentName}|${componentName}Component)\\b`);
+            if (regex.test(content)) {
+                return { folderName: folder, fileName: file };
+            }
+        }
+    }
+    return null;
+}
+function pickComponent(componentName, newName) {
+    const projectRoot = (0, fs_1.findProjectRoot)(process.cwd());
+    if (!projectRoot) {
+        throw new Error("No package.json found. Run this command inside a Skalfa project.");
+    }
+    // 1. Locate the component source in @skalfa/skalfa-component
+    let componentSrcDir = node_path_1.default.join(projectRoot, "node_modules", "@skalfa", "skalfa-component", "src");
+    if (!node_fs_1.default.existsSync(componentSrcDir)) {
+        componentSrcDir = node_path_1.default.resolve(projectRoot, "..", "skalfa-component", "src");
+    }
+    // Clean the componentName if it has "Component" suffix for searching
+    const cleanComponentName = componentName.endsWith("Component") ? componentName.replace(/Component$/, "") : componentName;
+    const match = findComponentFolder(componentSrcDir, cleanComponentName);
+    if (!match) {
+        throw new Error(`Component "${componentName}" not found in @skalfa/skalfa-component.`);
+    }
+    const { folderName, fileName } = match;
+    const sourceFolder = node_path_1.default.join(componentSrcDir, folderName);
+    const sourceFilePath = node_path_1.default.join(sourceFolder, fileName);
+    // Extract base name of the component file (e.g. "Button" from "Button.component.tsx")
+    const fileBaseName = fileName.replace(/\.(component)?\.(tsx|ts)$/, "");
+    // Find all exported symbols in the file that start with or match the file base name
+    const sourceContent = node_fs_1.default.readFileSync(sourceFilePath, "utf8");
+    const exportRegex = new RegExp(`export\\s+(async\\s+)?(function|const|class|type|interface)\\s+\\b(${fileBaseName}\\w*)\\b`, "g");
+    const exportedTypes = [];
+    const exportedValues = [];
+    let exportMatch;
+    while ((exportMatch = exportRegex.exec(sourceContent)) !== null) {
+        const keyword = exportMatch[2];
+        const symbol = exportMatch[3];
+        if (keyword === "type" || keyword === "interface") {
+            exportedTypes.push(symbol);
+        }
+        else {
+            exportedValues.push(symbol);
+        }
+    }
+    const componentsDir = node_path_1.default.join(projectRoot, "components");
+    const indexPath = node_path_1.default.join(componentsDir, "index.ts");
+    if (!node_fs_1.default.existsSync(componentsDir)) {
+        node_fs_1.default.mkdirSync(componentsDir, { recursive: true });
+    }
+    // Ensure index.ts exists
+    if (!node_fs_1.default.existsSync(indexPath)) {
+        node_fs_1.default.writeFileSync(indexPath, `export * from "@skalfa/skalfa-component";\n`, "utf8");
+    }
+    // Determine target names
+    const targetFolderName = newName ? newName.charAt(0).toLowerCase() + newName.slice(1) : folderName;
+    const targetFolder = node_path_1.default.join(componentsDir, targetFolderName);
+    if (node_fs_1.default.existsSync(targetFolder)) {
+        throw new Error(`Component folder "${targetFolderName}" already exists in components/.`);
+    }
+    console.log(`Copying component "${cleanComponentName}" from ${sourceFolder} to components/${targetFolderName} ...`);
+    node_fs_1.default.cpSync(sourceFolder, targetFolder, { recursive: true });
+    let finalFileBaseName = fileBaseName;
+    let finalExportedTypes = [...exportedTypes];
+    let finalExportedValues = [...exportedValues];
+    // If renaming is requested, perform renaming of files and contents
+    if (newName) {
+        const cleanNewName = newName.endsWith("Component") ? newName.replace(/Component$/, "") : newName;
+        finalFileBaseName = cleanNewName;
+        finalExportedTypes = exportedTypes.map(sym => sym.replace(new RegExp(fileBaseName, "g"), cleanNewName));
+        finalExportedValues = exportedValues.map(sym => sym.replace(new RegExp(fileBaseName, "g"), cleanNewName));
+        const files = node_fs_1.default.readdirSync(targetFolder);
+        for (const file of files) {
+            const filePath = node_path_1.default.join(targetFolder, file);
+            if (node_fs_1.default.statSync(filePath).isDirectory())
+                continue;
+            // Read file content and replace component names
+            let content = node_fs_1.default.readFileSync(filePath, "utf8");
+            // Replace fileBaseName (e.g. Button) with cleanNewName (e.g. MyButton)
+            const nameRegex = new RegExp(fileBaseName, "g");
+            content = content.replace(nameRegex, cleanNewName);
+            node_fs_1.default.writeFileSync(filePath, content, "utf8");
+            // Rename the file if it contains the original file base name
+            if (file.includes(fileBaseName)) {
+                const newFile = file.replace(fileBaseName, cleanNewName);
+                node_fs_1.default.renameSync(filePath, node_path_1.default.join(targetFolder, newFile));
+            }
+        }
+    }
+    // Update components/index.ts to export the local component explicitly
+    let indexContent = node_fs_1.default.readFileSync(indexPath, "utf8");
+    // Find the exact filename of the main component file inside the target folder
+    const targetFiles = node_fs_1.default.readdirSync(targetFolder);
+    const componentFile = targetFiles.find(f => f.includes(finalFileBaseName) && (f.endsWith(".tsx") || f.endsWith(".ts")));
+    if (componentFile) {
+        const componentBaseFile = componentFile.replace(/\.(tsx|ts)$/, "");
+        const valueExport = finalExportedValues.length > 0
+            ? `export { ${finalExportedValues.join(", ")} } from "./${targetFolderName}/${componentBaseFile}";`
+            : "";
+        const typeExport = finalExportedTypes.length > 0
+            ? `export type { ${finalExportedTypes.join(", ")} } from "./${targetFolderName}/${componentBaseFile}";`
+            : "";
+        const localExportLine = [valueExport, typeExport].filter(Boolean).join("\n");
+        if (!indexContent.includes(`./${targetFolderName}/`)) {
+            indexContent = indexContent.trim() + `\n${localExportLine}\n`;
+            node_fs_1.default.writeFileSync(indexPath, indexContent, "utf8");
+            console.log(`✓ Updated components/index.ts with local export for: ${[...finalExportedValues, ...finalExportedTypes].join(", ")}`);
+        }
+        else {
+            console.log(`⚠️ Info: Local export for "${targetFolderName}" already exists in components/index.ts`);
+        }
+    }
+    const finalSymbols = [...finalExportedValues, ...finalExportedTypes];
+    console.log(`\nSuccess! Component "${finalSymbols.find((s) => !s.endsWith("Props")) || finalSymbols[0]}" is now available locally at components/${targetFolderName}/`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-cli",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Command Line Interface tool for scaffolding Skalfa projects, managing extensions, and ejecting core utilities.",
   "main": "dist/bin/skalfa.js",
   "bin": {