@40q/40q-cli 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@40q/40q-cli",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "40q CLI tool",
     "main": "index.js",
     "bin": {

package/src/commands/Codegen/Codegen.command.ts

@@ -1,6 +1,6 @@
 import { ArgumentsCamelCase, Argv } from 'yargs';
 import { Command } from '../Command';
-import inquirer, { QuestionCollection } from 'inquirer';
+import inquirer from 'inquirer';
 import { GenerateBlock } from './Generators/GenerateBlock';
 import { Templates, Types, templateChoices, typeChoices } from './Codegen.types';
 
@@ -26,27 +26,21 @@ export class CodegenCommand implements Command {
         const template = (argv.template ?? 'default') as Templates;
 
         if (type === 'block') {
-            const answers = await CodegenCommand.prompt(
+            const answers = await inquirer.prompt(
                 [
                     {
                         type: 'input',
                         name: 'name',
                         message: 'Please enter a name for the block:',
-                        default: 'section-header',
+                        default: template || 'section-header',
                     },
                 ],
-                template === 'default'
             );
 
             const name = (answers?.name as string) || null;
 
-            return GenerateBlock.run(template, name);
+            const blockGenerator = new GenerateBlock(template, name);
+            return blockGenerator.run();
         }
     }
-
-    static async prompt(prompts: QuestionCollection, condition: boolean) {
-        if (!condition) return null;
-
-        return await inquirer.prompt(prompts);
-    }
 }

package/src/commands/Codegen/Codegen.types.ts

@@ -1,5 +1,7 @@
-export const typeChoices = ['block'] as const;
+import { config } from '../../config';
+
+export const typeChoices = config.typeChoices;
 export type Types = (typeof typeChoices)[number];
 
-export const templateChoices = ['section-header'] as const;
+export const templateChoices = config.templateChoices.block;
 export type Templates = (typeof templateChoices)[number] | 'default';

package/src/commands/Codegen/Generators/GenerateBlock.ts

@@ -1,36 +1,85 @@
-import { execSync } from 'child_process';
 import * as fs from 'fs';
 import path from 'path';
+import { execSync } from 'child_process';
 import { Templates } from '../Codegen.types';
 import { findCliRoot } from '../../../lib/cliRoot';
 
 export class GenerateBlock {
-    static run(template: Templates, name: string | null) {
-        const title =
-            name
-                ?.split('-')
-                .map((word) => {
-                    return word.charAt(0).toUpperCase() + word.slice(1);
-                })
-                .join(' ') ?? '';
-        const dirAndFileName = name || template;
-
-        execSync(`mkdir -p resources/scripts/editor/blocks/${dirAndFileName}`);
-
-        const cliRoot = findCliRoot(__dirname);
-        const templateContent = fs.readFileSync(
-            path.join(cliRoot, 'templates/blocks/', `${template}.txt`),
-            'utf8'
+    private template: Templates = 'default';
+    private name: string = '';
+    private title: string = '';
+    private camelCaseName: string = '';
+
+    constructor(template: Templates, name: string | null) {
+        this.template = template;
+        this.name = name ?? '';
+        this.camelCaseName = this.toCamelCase(this.name);
+        this.title = this.parseName(this.name);
+    }
+
+    public run() {
+        this.createBlockFolder();
+        this.createBlockFiles();
+    }
+
+    private createBlockFolder() {
+        execSync(`mkdir -p resources/scripts/editor/blocks/${this.name}`);
+    }
+
+    private createBlockFiles() {
+        fs.writeFileSync(
+            path.join(
+                process.cwd(),
+                `resources/scripts/editor/blocks/${this.name}/${this.name}.tsx`
+            ),
+            this.getTemplate('tsx')
+                .replace(/{{name}}/g, this.name ?? '')
+                .replace(/{{title}}/g, this.title)
         );
 
         fs.writeFileSync(
             path.join(
                 process.cwd(),
-                `resources/scripts/editor/blocks/${dirAndFileName}/${dirAndFileName}.tsx`
+                `resources/views/blocks/${this.name}.blade.php`
             ),
-            templateContent
-                .replace(/{{name}}/g, name ?? '')
-                .replace(/{{title}}/g, title)
+            this.getTemplate('blade')
+        );
+
+        fs.writeFileSync(
+            path.join(process.cwd(), `app/Blocks/${this.camelCaseName}.php`),
+            this.getTemplate('php')
+                .replace(/{{name}}/g, this.name ?? '')
+                .replace(/{{camelCaseName}}/g, this.camelCaseName)
         );
     }
+
+    private parseName(name: string) {
+        return name
+            .split('-')
+            .map((word) => {
+                return word.charAt(0).toUpperCase() + word.slice(1);
+            })
+            .join(' ');
+    }
+
+    private toCamelCase(name: string) {
+        return (
+            name.split('-').reduce((acc, word) => {
+                return acc + word.charAt(0).toUpperCase() + word.slice(1);
+            }, '') ?? ''
+        );
+    }
+
+    private getTemplate(name: string) {
+        try {
+            const cliRoot = findCliRoot(__dirname);
+            const templateFolder = `templates/blocks/${this.template}`;
+            return fs.readFileSync(
+                path.join(cliRoot, `${templateFolder}/${name}.txt`),
+                'utf8'
+            );
+        } catch (e) {
+            return '';
+        }
+    }
 }

package/src/config.ts

@@ -0,0 +1,6 @@
+export const config = {
+  typeChoices: ['block'] as const,
+  templateChoices: {
+    block: ['section-header'] as const
+  },
+}

package/templates/blocks/default/php.txt

@@ -0,0 +1,13 @@
+<?php
+
+namespace App\Blocks;
+
+class {{camelCaseName}} extends BlockHandler
+{
+    public function __invoke($block_content, $block)
+    {
+        return view('blocks.{{name}}', [
+            'title' => $block['attrs']['title'] ?? null,
+        ]);
+    }
+}

package/templates/blocks/section-header/php.txt

@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Blocks;
+
+class {{camelCaseName}} extends BlockHandler
+{
+    public function __invoke($block_content, $block)
+    {
+        return view('blocks.{{name}}', [
+            'eyebrow' => $block['attrs']['eyebrow'] ?? null,
+            'title' => $block['attrs']['title'] ?? null,
+            'description' => $block['attrs']['description'] ?? null,
+        ]);
+    }
+}

package/templates/blocks/section-header/tsx.txt

@@ -0,0 +1,120 @@
+import { __ } from "@wordpress/i18n";
+import { PanelBody, ToggleControl } from "@wordpress/components";
+import {
+  InspectorControls,
+  RichText,
+  useBlockProps,
+  useInnerBlocksProps,
+} from "@wordpress/block-editor";
+
+/* Block name */
+export const name = "by40q/{{name}}";
+
+/* Block title */
+export const title = __("{{title}}", "40q");
+
+/* Block category */
+export const category = "text";
+
+/* Block attributes */
+export const attributes = {
+  showEyebrow: {
+    type: "boolean",
+    default: true,
+  },
+  eyebrow: {
+    type: "string",
+    default: "Introducing",
+  },
+  title: {
+    type: "string",
+    default: "40Q",
+  },
+  showDescription: {
+    type: "boolean",
+    default: true,
+  },
+  description: {
+    type: "string",
+    default:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, diam id tincidunt ultrices, nunc nisl ultrices nunc, vitae aliquam nisl nunc eu nisl. Sed euismod, diam id tincidunt ultrices, nunc nisl ultrices nunc, vitae aliquam nisl nunc eu nisl.",
+  },
+  showCta: {
+    type: "boolean",
+    default: false,
+  },
+};
+
+/* Block edit */
+export const edit = ({ attributes, setAttributes }) => {
+  const { showEyeBrow, eyebrow, title, showDescription, description, showCta } =
+    attributes;
+
+  const blockProps = useBlockProps();
+
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    template: [["core/button"]],
+    allowedBlocks: [],
+    templateLock: "all",
+  });
+
+  return (
+    <>
+      <InspectorControls>
+        <PanelBody title={__("Section Header Settings")} initialOpen>
+          <ToggleControl
+            label="Eyebrow"
+            checked={!!showEyeBrow}
+            onChange={(showEyeBrow) => setAttributes({ showEyeBrow })}
+          />
+          <ToggleControl
+            label="Description"
+            checked={!!showDescription}
+            onChange={(showDescription) => setAttributes({ showDescription })}
+          />
+
+          <ToggleControl
+            label="Cta"
+            checked={!!showCta}
+            onChange={(showCta) => setAttributes({ showCta })}
+          />
+        </PanelBody>
+      </InspectorControls>
+
+      <div {...blockProps}>
+        {!!showEyeBrow && (
+          <RichText
+            className=""
+            tagName="p"
+            placeholder={__("Eyebrow")}
+            value={eyebrow}
+            onChange={(eyebrow) => setAttributes({ eyebrow })}
+          />
+        )}
+        <RichText
+          className=""
+          tagName="h2"
+          placeholder={__("40Q")}
+          value={title}
+          onChange={(title) => setAttributes({ title })}
+        />
+        {!!showDescription && (
+          <RichText
+            className=""
+            tagName="p"
+            placeholder={__("Lorem ipsum dolor sit amet.")}
+            value={description}
+            onChange={(description) => setAttributes({ description })}
+          />
+        )}
+        {!!showCta && <div {...innerBlocksProps} />}
+      </div>
+    </>
+  );
+};
+
+/* Block save */
+export const save = <></>;
+
+/* Block styles */
+export const styles = [];

package/dist/index.js

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _40qCli_1 = require("./src/40qCli");
-_40qCli_1.q40Cli.init();

package/dist/resources/scripts/editor/blocks/section-header.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.styles = exports.save = exports.edit = exports.attributes = exports.category = exports.title = exports.name = void 0;
-const i18n_1 = require("@wordpress/i18n");
-const components_1 = require("@wordpress/components");
-const block_editor_1 = require("@wordpress/block-editor");
-/* Block name */
-exports.name = "by40q/section-header";
-/* Block title */
-exports.title = (0, i18n_1.__)("Section Header", "40q");
-/* Block category */
-exports.category = "text";
-/* Block attributes */
-exports.attributes = {
-    title: {
-        type: "string",
-        default: "40Q",
-    },
-};
-/* Block edit */
-const edit = ({ attributes, setAttributes }) => {
-    const { title } = attributes;
-    const blockProps = (0, block_editor_1.useBlockProps)();
-    return (<>
-      <block_editor_1.InspectorControls>
-        <components_1.PanelBody title={(0, i18n_1.__)("Section Header Settings")} initialOpen></components_1.PanelBody>
-      </block_editor_1.InspectorControls>
-
-      <div {...blockProps}>
-        <block_editor_1.RichText tagName="h2" placeholder={(0, i18n_1.__)("40Q")} value={title} onChange={(title) => setAttributes({ title })}/>
-      </div>
-    </>);
-};
-exports.edit = edit;
-/* Block save */
-const save = ({ attributes }) => <></>;
-exports.save = save;
-/* Block styles */
-exports.styles = [];

package/dist/src/40qCli.js

@@ -1,19 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.q40Cli = void 0;
-const yargs_1 = __importDefault(require("yargs"));
-const helpers_1 = require("yargs/helpers");
-const Setup_command_1 = require("./commands/Setup/Setup.command");
-const Codegen_command_1 = require("./commands/Codegen/Codegen.command");
-class q40Cli {
-    static init() {
-        (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
-            .command('setup [tool]', 'Setup a tool', Setup_command_1.SetupCommand.builder, Setup_command_1.SetupCommand.handler)
-            .command('codegen [type] [template]', 'Generate code from a template', Codegen_command_1.CodegenCommand.builder, Codegen_command_1.CodegenCommand.handler)
-            .help().argv;
-    }
-}
-exports.q40Cli = q40Cli;

package/dist/src/commands/Codegen/Codegen.command.js

@@ -1,61 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CodegenCommand = void 0;
-const inquirer_1 = __importDefault(require("inquirer"));
-const GenerateBlock_1 = require("./Generators/GenerateBlock");
-const Codegen_types_1 = require("./Codegen.types");
-class CodegenCommand {
-    static builder(yargs) {
-        yargs.positional('type', {
-            describe: 'Type of code piece to generate',
-            choices: Codegen_types_1.typeChoices,
-            demandOption: true,
-            type: 'string',
-        });
-        yargs.positional('template', {
-            describe: 'Template to use for code generation',
-            choices: Codegen_types_1.templateChoices,
-            demandOption: false,
-            type: 'string',
-        });
-    }
-    static handler(argv) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const type = argv.type;
-            const template = ((_a = argv.template) !== null && _a !== void 0 ? _a : 'default');
-            if (type === 'block') {
-                const answers = yield CodegenCommand.prompt([
-                    {
-                        type: 'input',
-                        name: 'name',
-                        message: 'Please enter a name for the block:',
-                        default: 'section-header',
-                    },
-                ], template === 'default');
-                const name = (answers === null || answers === void 0 ? void 0 : answers.name) || null;
-                return GenerateBlock_1.GenerateBlock.run(template, name);
-            }
-        });
-    }
-    static prompt(prompts, condition) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!condition)
-                return null;
-            return yield inquirer_1.default.prompt(prompts);
-        });
-    }
-}
-exports.CodegenCommand = CodegenCommand;

package/dist/src/commands/Codegen/Codegen.types.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.templateChoices = exports.typeChoices = void 0;
-exports.typeChoices = ['block'];
-exports.templateChoices = ['section-header'];

package/dist/src/commands/Codegen/Generators/GenerateBlock.js

@@ -1,49 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GenerateBlock = void 0;
-const child_process_1 = require("child_process");
-const fs = __importStar(require("fs"));
-const path_1 = __importDefault(require("path"));
-const cliRoot_1 = require("../../../lib/cliRoot");
-class GenerateBlock {
-    static run(template, name) {
-        var _a;
-        const title = (_a = name === null || name === void 0 ? void 0 : name.split('-').map((word) => {
-            return word.charAt(0).toUpperCase() + word.slice(1);
-        }).join(' ')) !== null && _a !== void 0 ? _a : '';
-        const dirAndFileName = name || template;
-        (0, child_process_1.execSync)(`mkdir -p resources/scripts/editor/blocks/${dirAndFileName}`);
-        const cliRoot = (0, cliRoot_1.findCliRoot)(__dirname);
-        const templateContent = fs.readFileSync(path_1.default.join(cliRoot, 'templates/blocks/', `${template}.txt`), 'utf8');
-        fs.writeFileSync(path_1.default.join(process.cwd(), `resources/scripts/editor/blocks/${dirAndFileName}/${dirAndFileName}.tsx`), templateContent
-            .replace(/{{name}}/g, name !== null && name !== void 0 ? name : '')
-            .replace(/{{title}}/g, title));
-    }
-}
-exports.GenerateBlock = GenerateBlock;

package/dist/src/commands/Command.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Command = void 0;
-class Command {
-    static builder(yargs) { }
-    static handler(argv) { }
-}
-exports.Command = Command;

package/dist/src/commands/Setup/Setup.command.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetupCommand = void 0;
-const child_process_1 = require("child_process");
-const eslintrc = `
-{
-    "extends": ["@40q/eslint-config"]
-}
-`;
-const huskyrc = `
-{
-    "hooks": {
-        "pre-commit": "lint-staged"
-    }
-} 
-`;
-const lintstagedrc = `
-{
-    "*.{js,jsx,ts,tsx}": ["eslint --fix"] 
-}
-`;
-class SetupCommand {
-    static builder(yargs) {
-        yargs.positional('tool', {
-            describe: 'Name of the tool to setup',
-            type: 'string',
-        });
-    }
-    static handler(argv) {
-        SetupCommand.setupTool(argv.tool);
-    }
-    static setupTool(tool) {
-        switch (tool) {
-            case 'eslint':
-                this.setupEslint();
-                break;
-            default:
-                console.error(`Unknown tool: ${tool}. Please specify a supported tool.`);
-        }
-    }
-    static setupEslint() {
-        console.log('Installing dependencies...');
-        (0, child_process_1.execSync)('yarn add --dev eslint @40q/eslint-config husky lint-staged');
-        console.log('Creating .eslintrc.json...');
-        (0, child_process_1.execSync)(`echo '${eslintrc}' > .eslintrc.json`);
-        console.log('Creating .huskyrc.json...');
-        (0, child_process_1.execSync)(`echo '${huskyrc}' > .huskyrc.json`);
-        console.log('Creating .lintstagedrc.json...');
-        (0, child_process_1.execSync)(`echo '${lintstagedrc}' > .lintstagedrc.json`);
-        console.log('Done!');
-    }
-}
-exports.SetupCommand = SetupCommand;

package/dist/src/commands/Setup.command.js

@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SetupCommand = void 0;
-const child_process_1 = require("child_process");
-const eslintrc = `
-{
-    "extends": ["@40q/eslint-config"]
-}
-`;
-const huskyrc = `
-{
-    "hooks": {
-        "pre-commit": "lint-staged"
-    }
-} 
-`;
-const lintstagedrc = `
-{
-    "*.{js,jsx,ts,tsx}": ["eslint --fix"] 
-}
-`;
-class SetupCommand {
-    static builder(yargs) {
-        yargs.positional('tool', {
-            describe: 'Name of the tool to setup',
-            type: 'string',
-        });
-    }
-    static handler(argv) {
-        SetupCommand.setupTool(argv.tool);
-    }
-    static setupTool(tool) {
-        switch (tool) {
-            case 'eslint':
-                this.setupEslint();
-                break;
-            default:
-                console.error(`Unknown tool: ${tool}. Please specify a supported tool.`);
-        }
-    }
-    static setupEslint() {
-        console.log('Installing dependencies...');
-        (0, child_process_1.execSync)('yarn add --dev eslint @40q/eslint-config husky lint-staged');
-        console.log('Creating .eslintrc.json...');
-        (0, child_process_1.execSync)(`echo '${eslintrc}' > .eslintrc.json`);
-        console.log('Creating .huskyrc.json...');
-        (0, child_process_1.execSync)(`echo '${huskyrc}' > .huskyrc.json`);
-        console.log('Creating .lintstagedrc.json...');
-        (0, child_process_1.execSync)(`echo '${lintstagedrc}' > .lintstagedrc.json`);
-        console.log('Done!');
-    }
-}
-exports.SetupCommand = SetupCommand;

package/dist/src/lib/cliRoot.js

@@ -1,39 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCliRoot = void 0;
-const fs = __importStar(require("fs"));
-const path = __importStar(require("path"));
-function findCliRoot(startDir) {
-    let currentDir = startDir;
-    while (currentDir !== path.parse(currentDir).root) {
-        if (fs.existsSync(path.join(currentDir, '.cliroot'))) {
-            return currentDir;
-        }
-        currentDir = path.dirname(currentDir);
-    }
-    throw new Error('CLI root directory with .cliroot marker not found.');
-}
-exports.findCliRoot = findCliRoot;