@superblocksteam/cli 0.0.11

package/README.md

@@ -0,0 +1,175 @@
+@superblocksteam/cli
+=================
+
+<!-- toc -->
+* [Usage](#usage)
+* [Commands](#commands)
+<!-- tocstop -->
+# Usage
+<!-- usage -->
+```sh-session
+$ npm install -g @superblocksteam/cli
+$ superblocks COMMAND
+running command...
+$ superblocks (--version)
+@superblocksteam/cli/0.0.11 linux-x64 node-v18.16.1
+$ superblocks --help [COMMAND]
+USAGE
+  $ superblocks COMMAND
+...
+```
+<!-- usagestop -->
+# Commands
+<!-- commands -->
+* [`superblocks components create`](#superblocks-components-create)
+* [`superblocks components register`](#superblocks-components-register)
+* [`superblocks components upload`](#superblocks-components-upload)
+* [`superblocks components watch`](#superblocks-components-watch)
+* [`superblocks help [COMMANDS]`](#superblocks-help-commands)
+* [`superblocks init [RESOURCEURL]`](#superblocks-init-resourceurl)
+* [`superblocks login`](#superblocks-login)
+* [`superblocks pull [ONLY]`](#superblocks-pull-only)
+
+## `superblocks components create`
+
+Creates a new Superblocks component in the current application folder
+
+```
+USAGE
+  $ superblocks components create
+
+DESCRIPTION
+  Creates a new Superblocks component in the current application folder
+```
+
+## `superblocks components register`
+
+Registers all local component config files
+
+```
+USAGE
+  $ superblocks components register
+
+DESCRIPTION
+  Registers all local component config files
+
+EXAMPLES
+  $ superblocks components register
+```
+
+## `superblocks components upload`
+
+Upload creates a production-ready bundle and saves the files for use outside of Local Development mode.
+
+```
+USAGE
+  $ superblocks components upload
+
+DESCRIPTION
+  Upload creates a production-ready bundle and saves the files for use outside of Local Development mode.
+
+EXAMPLES
+  $ superblocks components upload
+```
+
+## `superblocks components watch`
+
+watch for changes to your custom components
+
+```
+USAGE
+  $ superblocks components watch
+
+DESCRIPTION
+  watch for changes to your custom components
+```
+
+## `superblocks help [COMMANDS]`
+
+Display help for superblocks.
+
+```
+USAGE
+  $ superblocks help [COMMANDS] [-n]
+
+ARGUMENTS
+  COMMANDS  Command to show help for.
+
+FLAGS
+  -n, --nested-commands  Include all nested commands in the output.
+
+DESCRIPTION
+  Display help for superblocks.
+```
+
+_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v5.2.10/src/commands/help.ts)_
+
+## `superblocks init [RESOURCEURL]`
+
+Interactively configure the current directory as a Superblocks project or initialize new services in an already configured Superblocks project directory
+
+```
+USAGE
+  $ superblocks init [RESOURCEURL] [-m live|latest|deployed]
+
+ARGUMENTS
+  RESOURCEURL  Superblocks resource URL (i.e. https://app.superblocks.com/applications/<application_id>/pages/<page_id>)
+
+FLAGS
+  -m, --mode=<option>  Pull mode
+                       <options: live|latest|deployed>
+
+DESCRIPTION
+  Interactively configure the current directory as a Superblocks project or initialize new services in an already
+  configured Superblocks project directory
+
+EXAMPLES
+  $ superblocks init
+
+  $ superblocks init https://app.superblocks.com/applications/11111111-1111-1111-1111-111111111111/pages/22222222-2222-2222-2222-222222222222
+```
+
+## `superblocks login`
+
+Authenticates with Superblocks cloud
+
+```
+USAGE
+  $ superblocks login [-t <value>] [-b <value>]
+
+FLAGS
+  -b, --superblocksBaseUrl=<value>  Superblocks base URL
+  -t, --token=<value>               Superblocks user access token
+
+DESCRIPTION
+  Authenticates with Superblocks cloud
+```
+
+## `superblocks pull [ONLY]`
+
+Download objects from Superblocks and save them locally
+
+```
+USAGE
+  $ superblocks pull [ONLY] [-m live|latest|deployed]
+
+ARGUMENTS
+  ONLY  Superblocks resource location to pull (i.e. apps/my-app or backends/my-workflow)
+
+FLAGS
+  -m, --mode=<option>  Pull mode
+                       <options: live|latest|deployed>
+
+DESCRIPTION
+  Download objects from Superblocks and save them locally
+
+EXAMPLES
+  $ superblocks pull
+
+  $ superblocks pull  apps/my-app
+
+  $ superblocks pull  backends/my-workflow
+
+  $ superblocks pull  backends/my-scheduled-job
+```
+<!-- commandsstop -->

package/assets/custom-components/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "prettier",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    project: true,
+  },
+  plugins: ["react"],
+  rules: {},
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  ignorePatterns: [".eslintrc.js", "dist/", "node_modules/"],
+};

package/assets/custom-components/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "superblocks-custom-components",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "lint": "npx eslint .",
+    "lint:fix": "npx eslint . --fix"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^17",
+    "react-dom": "^17"
+  },
+  "devDependencies": {
+    "@superblocksteam/cli": "0.0.11",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "3.0.0",
+    "typescript": "^5.1.6"
+  }
+}

package/assets/custom-components/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "noEmit": true,
+    "importHelpers": true,
+    "module": "CommonJS",
+    "strict": true,
+    "target": "es2019",
+    "lib": ["dom", "es2015", "es2019"],
+    "esModuleInterop": true,
+    "jsx": "react-jsxdev",
+  },
+  "include": ["components/**/*"],
+}

package/bin/dev

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+// eslint-disable-next-line node/shebang
+(async () => {
+  const oclif = await import("@oclif/core");
+  // eslint-disable-next-line unicorn/prefer-module
+  await oclif.execute({ type: "cjs", development: true, dir: __dirname });
+})();

package/bin/dev.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node "%~dp0\dev" %*

package/bin/run

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+// eslint-disable-next-line node/shebang
+(async () => {
+  const oclif = await import("@oclif/core");
+  // eslint-disable-next-line unicorn/prefer-module
+  await oclif.execute({ type: "cjs", dir: __dirname });
+})();

package/bin/run.cmd

@@ -0,0 +1,3 @@
+@echo off
+
+node "%~dp0\run" %*

package/dist/commands/components/create.d.ts

@@ -0,0 +1,5 @@
+import { AuthenticatedApplicationCommand } from "../../common/authenticated-command";
+export default class CreateComponent extends AuthenticatedApplicationCommand {
+    static description: string;
+    run(): Promise<void>;
+}

package/dist/commands/components/create.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable no-await-in-loop */
+const node_child_process_1 = require("node:child_process");
+const node_crypto_1 = require("node:crypto");
+const node_path_1 = tslib_1.__importDefault(require("node:path"));
+const node_util_1 = tslib_1.__importDefault(require("node:util"));
+const core_1 = require("@oclif/core");
+const util_1 = require("@superblocksteam/util");
+const colorette_1 = require("colorette");
+const fs = tslib_1.__importStar(require("fs-extra"));
+const listr2_1 = require("listr2");
+const authenticated_command_1 = require("../../common/authenticated-command");
+const create_component_defaults_1 = require("../../common/defaults/create-component-defaults");
+const identifiers_1 = require("../../util/identifiers");
+const prompt_1 = require("../../util/prompt");
+const types_1 = require("../../util/types");
+// eslint-disable-next-line unicorn/prefer-module
+const rootDirectory = node_path_1.default.resolve(__dirname, "../../../");
+const DEFAULT_PACKAGE_JSON_TEMPLATE_PATH = node_path_1.default.resolve(rootDirectory, "assets/custom-components");
+const tsStringify = (obj) => {
+    const entries = Object.entries(obj);
+    const stringifiedEntries = entries.map(([key, value]) => {
+        return `${key}: ${value === undefined ? "undefined" : JSON.stringify(value)}`;
+    });
+    return `{\n${stringifiedEntries.join(",\n")}\n},\n`;
+};
+class CreateComponent extends authenticated_command_1.AuthenticatedApplicationCommand {
+    async run() {
+        var _a;
+        const displayName = await core_1.ux.prompt("What is the display name of the component you want to create? (e.g. Date Picker)");
+        const name = await (0, prompt_1.validatedPrompt)("What is the machine readable name of the component you want to create?", { default: (0, identifiers_1.suggestIdentifier)(displayName, true) || "DatePicker" }, (response) => (0, identifiers_1.isValidIdentifier)(response) || "Invalid identifier");
+        this.log();
+        const hasStatefulProps = await core_1.ux.confirm("Does this component have stateful props? (e.g. a date picker component that has a selected date prop) [y/n]");
+        const statefulProps = [];
+        if (hasStatefulProps) {
+            for (;;) {
+                const statefulPropName = await core_1.ux.prompt("What is the label of the stateful prop? (e.g. Selected Date)");
+                const statefulPropPath = await (0, prompt_1.validatedPrompt)("What is the machine readable name of the stateful prop?", { default: (0, identifiers_1.suggestIdentifier)(statefulPropName) || "selectedDate" }, (response) => {
+                    if (!(0, identifiers_1.isValidIdentifier)(response))
+                        return "Invalid identifier";
+                    if (statefulProps.some((v) => v.path === response))
+                        return "Duplicate property name";
+                    return true;
+                });
+                const task = new listr2_1.Listr({
+                    task: async (ctx, task) => {
+                        ctx.inputType = await task.prompt({
+                            type: "Select",
+                            message: `What input type should ${statefulPropName} be?`,
+                            choices: Object.values(types_1.inputTypeDefinions).map((v) => v.prompt),
+                            initial: 0,
+                        });
+                    },
+                });
+                const runContext = await task.run();
+                const statefulPropType = (_a = Object.entries(types_1.inputTypeDefinions).find(([, v]) => v.prompt === runContext.inputType)) === null || _a === void 0 ? void 0 : _a[0];
+                const placeholderText = await core_1.ux.prompt(`What placeholder text should ${statefulPropName} have, if any?`, { required: false });
+                statefulProps.push({
+                    label: statefulPropName,
+                    path: statefulPropPath,
+                    inputType: statefulPropType,
+                    placeholder: placeholderText || undefined,
+                });
+                const addAnotherStatefulProp = await core_1.ux.confirm("Do you want to add another stateful prop? [y/n]");
+                if (!addAnotherStatefulProp) {
+                    break;
+                }
+            }
+        }
+        this.log();
+        const hasEventHandlers = await core_1.ux.confirm("Does this component have event handlers? (e.g. a date picker component that has a On Change event handler) [y/n]");
+        const eventHandlers = [];
+        if (hasEventHandlers) {
+            for (;;) {
+                const eventHandlerName = await core_1.ux.prompt("What is the label of the event handler? (e.g. On Change)");
+                const eventHandlerPath = await (0, prompt_1.validatedPrompt)("What is the machine readable name of the event handler?", { default: (0, identifiers_1.suggestIdentifier)(eventHandlerName) || "onChange" }, (response) => {
+                    if (!(0, identifiers_1.isValidIdentifier)(response))
+                        return "Invalid identifier";
+                    if (eventHandlers.some((v) => v.path === response))
+                        return "Duplicate property name";
+                    return true;
+                });
+                eventHandlers.push({
+                    label: eventHandlerName,
+                    path: eventHandlerPath,
+                });
+                const addAnotherEventHandler = await core_1.ux.confirm("Do you want to add another event handler? [y/n]");
+                if (!addAnotherEventHandler) {
+                    break;
+                }
+            }
+        }
+        const configTs = (0, create_component_defaults_1.getDefaultConfigTs)({
+            id: (0, node_crypto_1.randomUUID)(),
+            name,
+            displayName,
+            statefulPropsRendered: statefulProps
+                .map((statefulProp) => tsStringify(statefulProp))
+                .join(""),
+            eventHandlersRendered: eventHandlers
+                .map((eventHandler) => tsStringify(eventHandler))
+                .join(""),
+        });
+        const componentTsx = (0, create_component_defaults_1.getDefaultComponentTsx)(statefulProps, eventHandlers.map((prop) => prop.path));
+        const packageJsonExists = await fs.exists("package.json");
+        if (!packageJsonExists) {
+            await fs.copy(DEFAULT_PACKAGE_JSON_TEMPLATE_PATH, ".");
+        }
+        await fs.ensureDir("components/" + name);
+        await fs.writeFile(`components/${name}/config.ts`, configTs);
+        await fs.writeFile(`components/${name}/component.tsx`, componentTsx);
+        this.log((0, colorette_1.green)("Successfully created component! Added the following files:"));
+        this.log();
+        const tree = core_1.ux.tree();
+        tree.insert("components");
+        tree.nodes.components.insert(name);
+        tree.nodes.components.nodes[name].insert("config.ts # update this file to configure your component's properties panel");
+        tree.nodes.components.nodes[name].insert("component.tsx # your component's react code");
+        tree.display();
+        this.log();
+        this.log(`${(0, colorette_1.green)("Remember to run $ ")}${(0, colorette_1.cyan)("superblocks components watch")}${(0, colorette_1.green)(" to watch for changes to your component files")}`);
+        this.log();
+        this.log(`Edit your component's react code here:
+      ${(0, colorette_1.green)(`components/${name}/component.tsx`)}`);
+        this.log();
+        if (!packageJsonExists) {
+            core_1.ux.action.start("Installing dependencies...");
+            try {
+                await node_util_1.default.promisify(node_child_process_1.exec)("npm i");
+            }
+            catch {
+                core_1.ux.action.stop();
+                this.error((0, colorette_1.red)("Failed to install dependencies. Please run 'npm install' manually."));
+            }
+            core_1.ux.action.stop();
+        }
+        core_1.ux.action.start("Registering components...");
+        const components = await (0, util_1.getComponentConfigs)();
+        await this.getSdk().registerComponents(this.applicationConfig.id, components);
+        core_1.ux.action.stop();
+    }
+}
+CreateComponent.description = "Creates a new Superblocks component in the current application folder";
+exports.default = CreateComponent;

package/dist/commands/components/register.d.ts

@@ -0,0 +1,6 @@
+import { AuthenticatedApplicationCommand } from "../../common/authenticated-command";
+export default class Register extends AuthenticatedApplicationCommand {
+    static description: string;
+    static examples: string[];
+    run(): Promise<void>;
+}

package/dist/commands/components/register.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const core_1 = require("@oclif/core");
+const util_1 = require("@superblocksteam/util");
+const fs = tslib_1.__importStar(require("fs-extra"));
+const authenticated_command_1 = require("../../common/authenticated-command");
+class Register extends authenticated_command_1.AuthenticatedApplicationCommand {
+    async run() {
+        core_1.ux.action.start("Scanning for Superblocks components...");
+        const exists = await fs.pathExists(util_1.CUSTOM_COMPONENTS_PATH);
+        if (!exists) {
+            core_1.ux.action.stop();
+            this.error("No components folder found in current directory, please run 'superblocks components create' first", {
+                exit: 1,
+            });
+        }
+        const configs = await (0, util_1.getComponentConfigs)();
+        if (configs.length === 0) {
+            core_1.ux.action.stop();
+            this.log("No components found in current components directory, please run 'superblocks components create' first");
+        }
+        core_1.ux.action.stop();
+        this.log(JSON.stringify(configs, null, 2));
+        try {
+            core_1.ux.action.start("Registering components...");
+            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
+            core_1.ux.action.stop();
+        }
+        catch {
+            core_1.ux.action.stop();
+            this.error("Failed to register components", { exit: 1 });
+        }
+    }
+}
+Register.description = "Registers all local component config files";
+Register.examples = ["superblocks components register"];
+exports.default = Register;

package/dist/commands/components/upload.d.ts

@@ -0,0 +1,6 @@
+import { AuthenticatedApplicationCommand } from "../../common/authenticated-command";
+export default class Upload extends AuthenticatedApplicationCommand {
+    static description: string;
+    static examples: string[];
+    run(): Promise<void>;
+}

package/dist/commands/components/upload.js

@@ -0,0 +1,151 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const node_http_1 = tslib_1.__importDefault(require("node:http"));
+const path_1 = tslib_1.__importDefault(require("path"));
+const core_1 = require("@oclif/core");
+const util_1 = require("@superblocksteam/util");
+const plugin_react_1 = tslib_1.__importDefault(require("@vitejs/plugin-react"));
+const fs = tslib_1.__importStar(require("fs-extra"));
+const serve_handler_1 = tslib_1.__importDefault(require("serve-handler"));
+const vite_1 = require("vite");
+const vite_plugin_externals_1 = require("vite-plugin-externals");
+const authenticated_command_1 = require("../../common/authenticated-command");
+class Upload extends authenticated_command_1.AuthenticatedApplicationCommand {
+    async run() {
+        core_1.ux.action.start("Scanning for Superblocks components...");
+        const exists = await fs.pathExists(util_1.CUSTOM_COMPONENTS_PATH);
+        if (!exists) {
+            core_1.ux.action.stop();
+            this.error("No components folder found in current directory, please run 'superblocks components create' first", {
+                exit: 1,
+            });
+        }
+        const configs = await (0, util_1.getComponentConfigs)();
+        if (configs.length === 0) {
+            core_1.ux.action.stop();
+            this.log("No components found in current components directory, please run 'superblocks components create' first");
+        }
+        core_1.ux.action.stop();
+        try {
+            core_1.ux.action.start("Registering components...");
+            await this.getSdk().registerComponents(this.applicationConfig.id, configs);
+            core_1.ux.action.stop();
+        }
+        catch (e) {
+            core_1.ux.action.stop();
+            this.log(e.message);
+            this.error("Failed to register components", { exit: 1 });
+        }
+        // Map component name to component path- each name is a separate entry point
+        const entryFiles = Object.fromEntries(Object.values(configs).map((config) => [
+            config.name,
+            config.componentPath,
+        ]));
+        const viteLogger = (0, vite_1.createLogger)();
+        viteLogger.info = (message) => {
+            this.log(message);
+        };
+        core_1.ux.action.start("Building components...");
+        await (async () => {
+            await (0, vite_1.build)({
+                configFile: false,
+                build: {
+                    rollupOptions: {
+                        input: entryFiles,
+                        preserveEntrySignatures: "strict",
+                        output: {
+                            entryFileNames: "[name].js",
+                            sourcemap: true,
+                        },
+                    },
+                    copyPublicDir: true,
+                    write: true,
+                },
+                customLogger: viteLogger,
+                plugins: [
+                    (0, plugin_react_1.default)(),
+                    (0, vite_plugin_externals_1.viteExternalsPlugin)({
+                        react: "React",
+                        "react-dom": "ReactDOM",
+                    }),
+                ],
+            });
+        })();
+        core_1.ux.action.stop();
+        /*
+        1. Build
+        2. Get S3 prefix
+        3. Upload to S3
+        4. Update DSL with new prefix
+        5. Auto-commit DSL
+        */
+        try {
+            core_1.ux.action.start("Uploading components...");
+            const fileRelativePaths = [];
+            const excluded = [
+                ".superblocks",
+                "node_modules",
+                "apis",
+                "page.yaml",
+                "application.yaml",
+            ];
+            await walkThroughDirectory(".", fileRelativePaths, excluded);
+            this.log(fileRelativePaths.join("\n"));
+            await this.getSdk().uploadComponents(this.applicationConfig.id, configs, fileRelativePaths);
+            core_1.ux.action.stop();
+        }
+        catch (e) {
+            core_1.ux.action.stop();
+            this.log(e.message);
+            this.error("Failed to upload components", { exit: 1 });
+        }
+        this.log("For testing purposes, the production assets will be served from this machine.");
+        const server = node_http_1.default.createServer((request, response) => {
+            // You pass two more arguments for config and middleware
+            // More details here: https://github.com/vercel/serve-handler#options
+            return (0, serve_handler_1.default)(request, response, {
+                public: "./",
+                headers: [
+                    {
+                        source: "**/*",
+                        headers: [
+                            {
+                                key: "Access-Control-Allow-Origin",
+                                value: "*",
+                            },
+                            {
+                                key: "Access-Control-Allow-Credentials",
+                                value: "true",
+                            },
+                            {
+                                key: "Access-Control-Allow-Private-Network",
+                                value: "true",
+                            },
+                        ],
+                    },
+                ],
+            });
+        });
+        server.listen(3030, () => {
+            console.log("Running asset server at http://localhost:3030");
+        });
+    }
+}
+Upload.description = "Upload creates a production-ready bundle and saves the files for use outside of Local Development mode.";
+Upload.examples = ["<%= config.bin %> components upload"];
+exports.default = Upload;
+async function walkThroughDirectory(directory, mutableFiles, excluded) {
+    const files = await fs.readdir(directory);
+    for (const file of files) {
+        if (excluded.includes(file))
+            return;
+        const absolute = path_1.default.join(directory, file);
+        if ((await fs.stat(absolute)).isDirectory()) {
+            await walkThroughDirectory(absolute, mutableFiles, excluded);
+        }
+        else {
+            mutableFiles.push(absolute);
+        }
+    }
+}

package/dist/commands/components/watch.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from "vite";
+import { AuthenticatedApplicationCommand } from "../../common/authenticated-command";
+export declare function healthEndpointMiddleware(): Plugin;
+export default class Watch extends AuthenticatedApplicationCommand {
+    static description: string;
+    run(): Promise<void>;
+}