@futurebrand/dev-tools 2.1.2 → 2.4.0

package/dist/bin.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const package_json_1 = require("../package.json");
+const commands_1 = require("./commands");
+(0, commands_1.addCommands)(commander_1.program, {
+    version: package_json_1.version,
+    description: package_json_1.description,
+});
+commander_1.program.parse(process.argv);

package/dist/commands/ai/add.d.ts

@@ -0,0 +1,3 @@
+import { Command } from 'commander';
+declare const addCommand: Command;
+export default addCommand;

package/dist/commands/ai/add.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const inquirer_1 = require("inquirer");
+const project_adder_1 = require("./modules/project-adder");
+const state_1 = require("./modules/state");
+const addCommand = new commander_1.Command('add')
+    .alias('a')
+    .alias('copy')
+    .alias('move')
+    .alias('import')
+    .option('-a, --all', 'Show all hidden blocks')
+    .description('Ai Add Command')
+    .action(async (options) => {
+    const state = await state_1.default.init();
+    if (!state.isReady) {
+        console.error('AI State not initialized');
+        console.error('Run "fub ai --init" first');
+        return;
+    }
+    const isAll = options.all === true;
+    const choices = state.getAvailableBlocksNames({
+        hidden: isAll ? undefined : false,
+        generated: true,
+    });
+    if (!choices.length) {
+        console.error('No blocks available to add');
+        return;
+    }
+    const blockQuery = await inquirer_1.default.prompt([
+        {
+            type: 'select',
+            name: 'block',
+            message: 'Select the block to add',
+            choices,
+        },
+    ]);
+    const blocksToAdd = blockQuery.block;
+    if (!blocksToAdd) {
+        console.error('No blocks selected');
+        return;
+    }
+    const projectAdder = new project_adder_1.default(state);
+    await projectAdder.addBlock(blocksToAdd);
+});
+exports.default = addCommand;

package/dist/commands/ai/generate.d.ts

@@ -0,0 +1,3 @@
+import { Command } from 'commander';
+declare const generateCommand: Command;
+export default generateCommand;

package/dist/commands/ai/generate.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const inquirer_1 = require("inquirer");
+const generator_1 = require("./modules/generator");
+const state_1 = require("./modules/state");
+const generateCommand = new commander_1.Command('generate')
+    .alias('g')
+    .alias('create')
+    .option('-a, --all', 'Show all generated and hidden blocks')
+    .description('Ai Generate Command')
+    .action(async (options) => {
+    const state = await state_1.default.init();
+    if (!state.isReady) {
+        console.error('AI State not initialized');
+        console.error('Run "fub ai --init" first');
+        return;
+    }
+    const isAll = options.all === true;
+    const choices = state.getAvailableBlocksNames(isAll
+        ? {}
+        : {
+            hidden: false,
+            generated: false,
+        });
+    if (!choices.length) {
+        console.error('No blocks available to generate');
+        return;
+    }
+    const blockQuery = await inquirer_1.default.prompt([
+        {
+            type: 'checkbox',
+            name: 'blocks',
+            message: 'Select the blocks to generate',
+            choices,
+        },
+    ]);
+    const blocksToGenerate = blockQuery.blocks;
+    if (!blocksToGenerate.length) {
+        console.error('No blocks selected');
+        return;
+    }
+    const generator = new generator_1.Generator(state);
+    await generator.generateBlocks(blocksToGenerate);
+});
+const generateStyleCommand = new commander_1.Command('styles')
+    .alias('style')
+    .alias('css')
+    .description('Ai Generate Style Command')
+    .action(async () => {
+    const state = await state_1.default.init();
+    if (!state.isReady) {
+        console.error('AI State not initialized');
+        console.error('Run "fub ai --init" first');
+        return;
+    }
+    const generator = new generator_1.Generator(state);
+    await generator.generateStyles();
+});
+const generateChecklistCommand = new commander_1.Command('checklist')
+    .alias('ckl')
+    .description('Ai Generate Checklist File Command')
+    .action(async () => {
+    const state = await state_1.default.init();
+    if (!state.isReady) {
+        console.error('AI State not initialized');
+        console.error('Run "fub ai --init" first');
+        return;
+    }
+    const generator = new generator_1.Generator(state);
+    await generator.generateChecklist();
+});
+generateCommand.addCommand(generateStyleCommand);
+generateCommand.addCommand(generateChecklistCommand);
+exports.default = generateCommand;

package/dist/commands/ai/index.d.ts

@@ -0,0 +1,3 @@
+import { Command } from 'commander';
+declare const fubAICommand: Command;
+export default fubAICommand;

package/dist/commands/ai/index.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const commander_1 = require("commander");
+const add_1 = require("./add");
+const generate_1 = require("./generate");
+const figma_1 = require("./modules/figma");
+const state_1 = require("./modules/state");
+const remove_1 = require("./remove");
+const fubAICommand = new commander_1.Command('ai')
+    .description('Ai Commands')
+    // Init flag
+    .option('-i, --init', 'Init AI State')
+    .option('-r, --reset', 'Reset AI State')
+    .option('-l, --load', 'Load AI Data')
+    .action(async (options) => {
+    const isInit = options.init === true;
+    const isReset = options.reset === true;
+    const isLoad = options.load === true;
+    if (!isInit && !isReset && !isLoad) {
+        console.error('No action specified');
+        return;
+    }
+    try {
+        const state = await state_1.default.init();
+        if (isInit && state.isReady) {
+            console.error('AI State already initialized, use --reset to recreate it or --load to load blocks again');
+            return;
+        }
+        if (isReset || isInit || (isLoad && !state.isReady)) {
+            await state.create();
+        }
+        const figma = new figma_1.default(state);
+        await figma.loadBlocks();
+        await state.save();
+    }
+    catch (error) {
+        console.error(error);
+    }
+});
+fubAICommand.addCommand(generate_1.default);
+fubAICommand.addCommand(add_1.default);
+fubAICommand.addCommand(remove_1.default);
+exports.default = fubAICommand;

package/dist/commands/ai/modules/figma/api.d.ts

@@ -0,0 +1,8 @@
+import type AIState from '../state';
+export declare class FigmaAPI {
+    private state;
+    constructor(state: AIState);
+    getBlockCanvas(pageId: string): Promise<string>;
+    getVariables(pageId: string): Promise<Record<string, any>>;
+    getBlocks(pageId: string, canvasId: string): Promise<Record<string, import("./types").IFigmaNode[]>>;
+}

package/dist/commands/ai/modules/figma/api.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FigmaAPI = void 0;
+class FigmaAPI {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    async getBlockCanvas(pageId) {
+        const { id } = await this.state.fetchApi(`/figma/${pageId}/blocks`);
+        return id;
+    }
+    async getVariables(pageId) {
+        const { variables } = await this.state.fetchApi(`/figma/${pageId}/blocks`);
+        return variables;
+    }
+    async getBlocks(pageId, canvasId) {
+        const { blocks } = await this.state.fetchApi(`/figma/${pageId}/blocks/${canvasId}`);
+        return blocks;
+    }
+}
+exports.FigmaAPI = FigmaAPI;

package/dist/commands/ai/modules/figma/index.d.ts

@@ -0,0 +1,10 @@
+import type AIState from '../state';
+declare class FigmaModule {
+    private state;
+    private api;
+    constructor(state: AIState);
+    private addVariantsToBlock;
+    private getDefaultCheckedBlocks;
+    loadBlocks(): Promise<void>;
+}
+export default FigmaModule;

package/dist/commands/ai/modules/figma/index.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const inquirer_1 = require("inquirer");
+const api_1 = require("./api");
+// Limit of same variant of the same block
+class FigmaModule {
+    state;
+    api;
+    constructor(state) {
+        this.state = state;
+        this.api = new api_1.FigmaAPI(state);
+    }
+    addVariantsToBlock(data, variants) {
+        // Add only unique instances
+        for (const variant of variants) {
+            const existIndex = data.variants.findIndex((v) => v.id === variant.id);
+            if (existIndex !== -1) {
+                continue;
+            }
+            data.variants.push(variant);
+        }
+    }
+    getDefaultCheckedBlocks(blocks, added) {
+        // const data = this.state.getData()
+        const defaultBlocks = [];
+        // const strapiProject = data.projects.find(
+        //   (project) => project.type === 'strapi'
+        // )
+        // const nextProject = data.projects.find(
+        //   (project) => project.type === 'next.js'
+        // )
+        for (const block of blocks) {
+            if (added.includes(block.name)) {
+                //
+                continue;
+            }
+            if (!block.hidden && !block.generated) {
+                defaultBlocks.push(block.name);
+            }
+        }
+        return defaultBlocks;
+    }
+    async loadBlocks() {
+        console.log('- Finding figma blocks canvas... Please wait');
+        const data = this.state.getData();
+        const figmaPageID = data.configs.figma;
+        const canvas = await this.api.getBlockCanvas(figmaPageID);
+        console.log('- Loading pages blocks');
+        const blocksData = data.blocks;
+        const newBlocks = [];
+        const [blocks, variables] = await Promise.all([
+            this.api.getBlocks(figmaPageID, canvas),
+            this.api.getVariables(figmaPageID),
+        ]);
+        Object.keys(blocks).forEach((blockName) => {
+            let block = blocksData.find((block) => block.name === blockName);
+            if (!block) {
+                block = {
+                    name: blockName,
+                    variants: [],
+                    hidden: false,
+                    generated: false,
+                };
+                newBlocks.push(blockName);
+                blocksData.push(block);
+            }
+            this.addVariantsToBlock(block, blocks[blockName]);
+        });
+        console.log(`- Loaded ${blocksData.length} blocks from Figma (${newBlocks.length} new)`);
+        const blockNames = blocksData.map((block) => block.name);
+        const defaultCheckedBlocks = this.getDefaultCheckedBlocks(blocksData, newBlocks);
+        if (newBlocks.length) {
+            const query = await inquirer_1.default.prompt([
+                {
+                    type: 'checkbox',
+                    name: 'blocks',
+                    message: 'What blocks do you want to use?',
+                    choices: blockNames,
+                    default: defaultCheckedBlocks,
+                },
+            ]);
+            for (const blockName of blockNames) {
+                const block = blocksData.find((b) => b.name === blockName);
+                if (block) {
+                    const isNotHidden = query.blocks.includes(blockName);
+                    block.hidden = !isNotHidden;
+                }
+            }
+        }
+        this.state.setBlocks(blocksData);
+        this.state.setVariables(variables);
+        console.log('- Figma blocks loaded successfully');
+    }
+}
+exports.default = FigmaModule;

package/dist/commands/ai/modules/figma/types.d.ts

@@ -0,0 +1,40 @@
+export interface IDocumentResponse {
+    id: string;
+}
+export interface IVariablesResponse {
+    variables: Record<string, any>;
+}
+interface IFigmaProperties {
+    value: string;
+    type: string;
+}
+export interface IFigmaNode {
+    id: string;
+    type: string;
+    name: string;
+    visible: boolean;
+    children: IFigmaNode[];
+    scrollBehavior: string;
+    componentId: string;
+    componentProperties: Record<string, IFigmaProperties>;
+    overrides: {
+        id: string;
+        overriddenFields: string[];
+    }[];
+    absoluteBoundingBox: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    absoluteRenderBounds: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+export interface IListBlocksResponse {
+    blocks: Record<string, IFigmaNode[]>;
+}
+export {};

package/dist/commands/ai/modules/generator/index.d.ts

@@ -0,0 +1,17 @@
+import type { IProject } from '../../../../types/project';
+import type AIState from '../state';
+export declare const GENERATOR_FOLDER_NAME = "generated-blocks";
+export declare const GENERATOR_STRAPI_FILE_NAME = "strapi.json";
+export declare const GENERATOR_NEXTJS_FILE_NAME = "nextjs.tsx";
+export declare class Generator {
+    private state;
+    constructor(state: AIState);
+    private get data();
+    private generateNextBlock;
+    private generateStrapiBlock;
+    loadProjectCSS(nextProject?: IProject): Promise<string | null>;
+    generateBlock(blockName: string, strapiProject: IProject | null | undefined, nextProject: IProject | null | undefined, styles: string | null | undefined, onGenerateCallback: () => void): Promise<void>;
+    generateBlocks(blockNames: string[]): Promise<void>;
+    generateStyles(): Promise<void>;
+    generateChecklist(): Promise<void>;
+}

package/dist/commands/ai/modules/generator/index.js

@@ -0,0 +1,184 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Generator = exports.GENERATOR_NEXTJS_FILE_NAME = exports.GENERATOR_STRAPI_FILE_NAME = exports.GENERATOR_FOLDER_NAME = void 0;
+const fs = require("node:fs/promises");
+const path = require("node:path");
+const files_1 = require("../../../../utils/files");
+const cliProgress = require("cli-progress");
+exports.GENERATOR_FOLDER_NAME = 'generated-blocks';
+exports.GENERATOR_STRAPI_FILE_NAME = 'strapi.json';
+exports.GENERATOR_NEXTJS_FILE_NAME = 'nextjs.tsx';
+class Generator {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    get data() {
+        return this.state.getData();
+    }
+    async generateNextBlock(blockName, blockVariants, variables, styles, strapiComponent) {
+        const requestBody = {
+            name: blockName.replace('block-', ''),
+            variants: blockVariants,
+            variables,
+            styles,
+            strapiComponent,
+        };
+        try {
+            const data = await this.state.fetchApi('/generate/nextjs/block', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestBody),
+            });
+            if (data.result?.block) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+                return data.result.block;
+            }
+            return null;
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    async generateStrapiBlock(blockName, blockVariants) {
+        const requestBody = {
+            name: blockName.replace('block-', ''),
+            variants: blockVariants,
+        };
+        try {
+            const data = await this.state.fetchApi('/generate/strapi/block', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestBody),
+            });
+            if (data.result) {
+                // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+                return data.result;
+            }
+            return null;
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    async loadProjectCSS(nextProject) {
+        if (!nextProject) {
+            return null;
+        }
+        const cssFile = path.join(nextProject.path, 'styles', 'index.css');
+        try {
+            const css = await fs.readFile(cssFile, 'utf-8');
+            if (!css) {
+                return null;
+            }
+            return css;
+        }
+        catch (error) {
+            console.error(error);
+            return null;
+        }
+    }
+    async generateBlock(blockName, strapiProject, nextProject, styles, onGenerateCallback) {
+        try {
+            const blockVariants = this.state.getBlockVariants(blockName);
+            const tempFolder = await (0, files_1.getTempFilePath)(exports.GENERATOR_FOLDER_NAME, blockName);
+            await (0, files_1.verifyAndCreateFolder)(tempFolder);
+            let strapiResponse = null;
+            if (strapiProject) {
+                strapiResponse = await this.generateStrapiBlock(blockName, blockVariants);
+                onGenerateCallback();
+                if (strapiResponse) {
+                    const cachePath = path.join(tempFolder, exports.GENERATOR_STRAPI_FILE_NAME);
+                    await fs.writeFile(cachePath, JSON.stringify(strapiResponse, null, 2));
+                }
+            }
+            if (nextProject) {
+                const nextResponse = await this.generateNextBlock(blockName, blockVariants, this.data.variables, styles, strapiResponse);
+                onGenerateCallback();
+                if (nextResponse) {
+                    const cachePath = path.join(tempFolder, exports.GENERATOR_NEXTJS_FILE_NAME);
+                    await fs.writeFile(cachePath, nextResponse);
+                }
+            }
+            this.state.setBlockGenerated(blockName);
+        }
+        catch (error) {
+            console.error(error);
+        }
+    }
+    async generateBlocks(blockNames) {
+        if (!blockNames.length) {
+            console.error('No blocks selected');
+            return;
+        }
+        console.log('- Generating Blocks... Please wait');
+        const strapiProject = this.data.projects.find((project) => project.type === 'strapi');
+        const nextProject = this.data.projects.find((project) => project.type === 'next.js');
+        const styles = await this.loadProjectCSS(nextProject);
+        const progressBar = new cliProgress.SingleBar({}, cliProgress.Presets.legacy);
+        let length = 0;
+        if (strapiProject) {
+            length += blockNames.length;
+        }
+        if (nextProject) {
+            length += blockNames.length;
+        }
+        progressBar.start(length, 0);
+        for (const block of blockNames) {
+            await this.generateBlock(block, strapiProject, nextProject, styles, () => {
+                progressBar.increment();
+            });
+        }
+        progressBar.stop();
+        await this.state.save();
+        console.log('- All Blocks generated');
+    }
+    async generateStyles() {
+        console.log('- Generating Styles... Please wait');
+        const variables = this.data.variables;
+        const data = await this.state.fetchApi('/generate/styles', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ variables }),
+        });
+        const colors = (data.result?.colors || []);
+        this.state.setColors(colors);
+        const lines = ['@theme {'];
+        for (const color of colors) {
+            lines.push(`  /* ${color.description} */`);
+            lines.push(`  --color-${color.name}: ${color.value};`);
+        }
+        lines.push('}');
+        await this.state.save();
+        const cssText = lines.join('\n');
+        const tempPath = await (0, files_1.getTempFilePath)('styles.css');
+        await fs.writeFile(tempPath, cssText);
+        console.log(`- Styles generated and saved to ${tempPath}`);
+    }
+    async generateChecklist() {
+        console.log('- Generating Checklist... Please wait');
+        const lines = ['# Checklist', ''];
+        const blocks = this.state.getData().blocks;
+        for (const block of blocks) {
+            const name = block.name
+                .replace('block-', '')
+                .split('-')
+                .map((word) => word.length > 1 ? word.charAt(0).toUpperCase() + word.slice(1) : word)
+                .join(' ');
+            lines.push(`- [${block.generated || block.hidden ? 'x' : ' '}] Block | ${name} (\`${block.name}\`)`);
+        }
+        const listText = lines.join('\n');
+        const tempPath = await (0, files_1.getTempFilePath)('checklist.md');
+        await fs.writeFile(tempPath, listText);
+        console.log(`- Checklist generated and saved to ${tempPath}`);
+    }
+}
+exports.Generator = Generator;

package/dist/commands/ai/modules/project-adder/index.d.ts

@@ -0,0 +1,10 @@
+import type AIState from '../state';
+declare class ProjectAdder {
+    private state;
+    constructor(state: AIState);
+    private get data();
+    private createStrapiFiles;
+    private createNextjsFiles;
+    addBlock(blockName: string): Promise<void>;
+}
+export default ProjectAdder;

package/dist/commands/ai/modules/project-adder/index.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs = require("node:fs/promises");
+const path = require("node:path");
+const files_1 = require("../../../../utils/files");
+const generator_1 = require("../generator");
+class ProjectAdder {
+    state;
+    constructor(state) {
+        this.state = state;
+    }
+    get data() {
+        return this.state.getData();
+    }
+    async createStrapiFiles(filePath, block) {
+        const strapiProject = this.data.projects.find((project) => project.type === 'strapi');
+        if (!strapiProject) {
+            throw new Error('Strapi project not found');
+            // return
+        }
+        const componentsFolder = path.join(strapiProject.path, 'src', 'components');
+        const blocksFolder = path.join(componentsFolder, 'blocks');
+        const blocksAssetsFolder = path.join(componentsFolder, 'blocks-assets');
+        const strapiResult = await (0, files_1.loadJSONFile)(filePath);
+        const blockData = strapiResult.block;
+        const assets = strapiResult.assets;
+        await (0, files_1.verifyAndCreateFolder)(blocksFolder);
+        await (0, files_1.verifyAndCreateFolder)(blocksAssetsFolder);
+        for (const asset of assets) {
+            const name = asset.info?.name;
+            if (!name) {
+                console.warn('Asset name is missing, skipping asset creation');
+                continue;
+            }
+            await fs.writeFile(path.join(blocksAssetsFolder, `${name}.json`), JSON.stringify(asset, null, 2));
+        }
+        const blockName = block.name.replace('block-', '');
+        await fs.writeFile(path.join(blocksFolder, `${blockName}.json`), JSON.stringify(blockData, null, 2));
+    }
+    async createNextjsFiles(filePath, block) {
+        const project = this.data.projects.find((project) => project.type === 'next.js');
+        if (!project) {
+            throw new Error('Strapi project not found');
+            // return
+        }
+        const blockFolder = path.join(project.path, 'layouts', 'blocks', block.name);
+        await (0, files_1.verifyAndCreateFolder)(blockFolder);
+        const nextjsResult = await (0, files_1.loadFile)(filePath);
+        await fs.writeFile(path.join(blockFolder, `${block.name}.tsx`), nextjsResult);
+        const indexContent = `export { default } from './${block.name}'`;
+        await fs.writeFile(path.join(blockFolder, 'index.ts'), indexContent);
+    }
+    async addBlock(blockName) {
+        const block = this.data.blocks.find((block) => block.name === blockName);
+        if (!block || !block.generated) {
+            console.error(`Block ${blockName} not found`);
+            return;
+        }
+        const strapiTempFilePath = await (0, files_1.getTempFilePath)(generator_1.GENERATOR_FOLDER_NAME, blockName, generator_1.GENERATOR_STRAPI_FILE_NAME);
+        const nextTempFilePath = await (0, files_1.getTempFilePath)(generator_1.GENERATOR_FOLDER_NAME, blockName, generator_1.GENERATOR_NEXTJS_FILE_NAME);
+        if (await (0, files_1.verifyPath)(strapiTempFilePath)) {
+            await this.createStrapiFiles(strapiTempFilePath, block);
+        }
+        else {
+            console.warn(`Strapi file for block ${blockName} not found in ${strapiTempFilePath}`);
+        }
+        if (await (0, files_1.verifyPath)(nextTempFilePath)) {
+            await this.createNextjsFiles(nextTempFilePath, block);
+        }
+        else {
+            console.warn(`Next.js file for block ${blockName} not found in ${nextTempFilePath}`);
+        }
+        this.state.setBlockHidden(blockName, true);
+        await this.state.save();
+        console.log(`Block ${blockName} added successfully`);
+    }
+}
+exports.default = ProjectAdder;