@superblocksteam/cli 0.0.11 → 0.0.12

package/README.md

@@ -12,7 +12,7 @@ $ npm install -g @superblocksteam/cli
 $ superblocks COMMAND
 running command...
 $ superblocks (--version)
-@superblocksteam/cli/0.0.11 linux-x64 node-v18.16.1
+@superblocksteam/cli/0.0.12 linux-x64 node-v18.16.1
 $ superblocks --help [COMMAND]
 USAGE
   $ superblocks COMMAND
@@ -110,14 +110,14 @@ Interactively configure the current directory as a Superblocks project or initia
 
 ```
 USAGE
-  $ superblocks init [RESOURCEURL] [-m live|latest|deployed]
+  $ superblocks init [RESOURCEURL] [-m latest-edits|most-recent-commit|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>
+                       <options: latest-edits|most-recent-commit|deployed>
 
 DESCRIPTION
   Interactively configure the current directory as a Superblocks project or initialize new services in an already
@@ -151,14 +151,14 @@ Download objects from Superblocks and save them locally
 
 ```
 USAGE
-  $ superblocks pull [ONLY] [-m live|latest|deployed]
+  $ superblocks pull [ONLY] [-m latest-edits|most-recent-commit|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>
+                       <options: latest-edits|most-recent-commit|deployed>
 
 DESCRIPTION
   Download objects from Superblocks and save them locally

package/assets/custom-components/package.json

@@ -12,7 +12,7 @@
     "react-dom": "^17"
   },
   "devDependencies": {
-    "@superblocksteam/cli": "0.0.11",
+    "@superblocksteam/cli": "0.0.12",
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@typescript-eslint/eslint-plugin": "^5.62.0",

package/assets/custom-components/tsconfig.json

@@ -7,7 +7,7 @@
     "target": "es2019",
     "lib": ["dom", "es2015", "es2019"],
     "esModuleInterop": true,
-    "jsx": "react-jsxdev",
+    "jsx": "react-jsx",
   },
   "include": ["components/**/*"],
 }

package/dist/commands/components/create.js

@@ -9,12 +9,12 @@ 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 enquirer_1 = require("enquirer");
 const fs = tslib_1.__importStar(require("fs-extra"));
-const listr2_1 = require("listr2");
+const lodash_1 = require("lodash");
 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, "../../../");
@@ -28,65 +28,125 @@ const tsStringify = (obj) => {
 };
 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");
+        const displayName = (await (0, enquirer_1.prompt)({
+            type: "input",
+            name: "displayName",
+            message: "What is the display name of the component you want to create? (e.g. Date Picker)",
+            validate: (response) => !(0, lodash_1.isEmpty)(response.trim()),
+        })).displayName;
+        const name = (await (0, enquirer_1.prompt)({
+            type: "input",
+            name: "name",
+            message: "What is the machine readable name of the component you want to create?",
+            validate: (response) => (0, identifiers_1.isValidIdentifier)(response) || "Invalid identifier",
+            initial: (0, identifiers_1.suggestIdentifier)(displayName, true) || "DatePicker",
+        })).name;
         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]");
+        this.log(`${(0, colorette_1.cyanBright)("ℹ")}  A ${(0, colorette_1.bold)("stateful property")} determines what shows up in the properties panel of a custom component`);
+        this.log();
+        const hasStatefulProps = (await (0, enquirer_1.prompt)({
+            type: "confirm",
+            name: "hasStatefulProps",
+            message: `Does this component have ${(0, colorette_1.bold)("stateful properties")}?`,
+            initial: false,
+        })).hasStatefulProps;
         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 statefulPropName = (await (0, enquirer_1.prompt)({
+                    type: "input",
+                    name: "statefulPropName",
+                    message: "What is the label of the stateful prop? (e.g. Selected Date)",
+                    validate: (response) => !(0, lodash_1.isEmpty)(response.trim()),
+                })).statefulPropName.trim();
+                const statefulPropPath = (await (0, enquirer_1.prompt)({
+                    type: "input",
+                    name: "path",
+                    initial: (0, identifiers_1.suggestIdentifier)(statefulPropName) || "selectedDate",
+                    message: "What is the machine readable name of the stateful prop?",
+                    validate: (response) => {
+                        if (!(0, identifiers_1.isValidIdentifier)(response))
+                            return "Invalid identifier";
+                        if (statefulProps.some((v) => v.path === response))
+                            return "Duplicate property name";
+                        return true;
                     },
-                });
-                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 });
+                })).path;
+                const statefulPropType = (await (0, enquirer_1.prompt)({
+                    type: "select",
+                    name: "type",
+                    message: `What input type should ${statefulPropName} be?`,
+                    choices: Object.entries(types_1.inputTypeDefinions).map(([k, v]) => ({
+                        name: k,
+                        message: v.prompt,
+                        value: k,
+                    })),
+                    initial: 0,
+                })).type;
+                const placeholderText = (await (0, enquirer_1.prompt)({
+                    type: "input",
+                    name: "value",
+                    message: `What placeholder text should ${statefulPropName} have, if any?`,
+                    required: false,
+                })).value;
                 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]");
+                const addAnotherStatefulProp = (await (0, enquirer_1.prompt)({
+                    type: "confirm",
+                    name: "value",
+                    message: "Do you want to add another stateful prop?",
+                    initial: false,
+                })).value;
                 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]");
+        this.log(`${(0, colorette_1.cyanBright)("ℹ")} ${(0, colorette_1.bold)("Event handlers")} represent the events your custom component can fire`);
+        this.log();
+        const hasEventHandlers = (await (0, enquirer_1.prompt)({
+            type: "confirm",
+            name: "value",
+            message: `Does this component have ${(0, colorette_1.bold)("event handlers")}? (e.g. a date picker component that has a On Change event handler)`,
+            initial: false,
+        })).value;
         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;
-                });
+                const eventHandlerName = (await (0, enquirer_1.prompt)({
+                    name: "value",
+                    type: "input",
+                    message: "What is the label of the event handler? (e.g. On Change)",
+                    validate: (response) => !(0, lodash_1.isEmpty)(response.trim()),
+                })).value.trim();
+                const eventHandlerPath = (await (0, enquirer_1.prompt)({
+                    name: "value",
+                    message: "What is the machine readable name of the event handler?",
+                    type: "input",
+                    initial: (0, identifiers_1.suggestIdentifier)(eventHandlerName) || "onChange",
+                    validate: (response) => {
+                        if (!(0, identifiers_1.isValidIdentifier)(response))
+                            return "Invalid identifier";
+                        if (eventHandlers.some((v) => v.path === response))
+                            return "Duplicate property name";
+                        return true;
+                    },
+                })).value;
                 eventHandlers.push({
                     label: eventHandlerName,
                     path: eventHandlerPath,
                 });
-                const addAnotherEventHandler = await core_1.ux.confirm("Do you want to add another event handler? [y/n]");
+                const addAnotherEventHandler = (await (0, enquirer_1.prompt)({
+                    name: "value",
+                    type: "confirm",
+                    message: "Do you want to add another event handler?",
+                    initial: false,
+                })).value;
                 if (!addAnotherEventHandler) {
                     break;
                 }

package/dist/common/defaults/create-component-defaults.js

@@ -54,7 +54,20 @@ export default function Component({
     ? ",\n" + eventHandlers.map((v) => indent(v, 2)).join(",\n")
     : ""}
 }: Props) {
-  return <div>Hello World!</div>;
+  return (
+    <div
+      style={{
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#a7aebe",
+      }}
+    >
+      <h1 style={{ color: "white" }}>{"<Insert Component Here>"}</h1>
+    </div>
+  );
 }
 `;
 exports.getDefaultComponentTsx = getDefaultComponentTsx;

package/dist/common/version-control.d.ts

@@ -6,10 +6,12 @@ export type SuperblocksMetadata = {
     lastUpdated: number;
     created: number;
 };
-export declare const LIVE_MODE = "live";
-export declare const modeFlagValues: string[];
+export declare const LATEST_EDITS_MODE = "latest-edits";
+export declare const MOST_RECENT_COMMIT_MODE = "most-recent-commit";
+export declare const DEPLOYED_MODE = "deployed";
+export declare const modeFlagValuesMap: Record<string, string>;
 export declare function modeFlagToViewMode(modeFlag: ModeFlag): ViewMode;
-export type ModeFlag = (typeof modeFlagValues)[number];
+export type ModeFlag = (keyof typeof modeFlagValuesMap)[number];
 export declare const commonFlags: {
     mode: import("@oclif/core/lib/interfaces").OptionFlag<string | undefined, import("@oclif/core/lib/interfaces/parser").CustomOptions>;
 };

package/dist/common/version-control.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sortByKey = exports.getMode = exports.writeResourceToDisk = exports.atLeastOneSelection = exports.MULTI_SELECT_PROMPT_HELP = exports.SELECT_PROMPT_HELP = exports.commonFlags = exports.modeFlagToViewMode = exports.modeFlagValues = exports.LIVE_MODE = void 0;
+exports.sortByKey = exports.getMode = exports.writeResourceToDisk = exports.atLeastOneSelection = exports.MULTI_SELECT_PROMPT_HELP = exports.SELECT_PROMPT_HELP = exports.commonFlags = exports.modeFlagToViewMode = exports.modeFlagValuesMap = exports.DEPLOYED_MODE = exports.MOST_RECENT_COMMIT_MODE = exports.LATEST_EDITS_MODE = void 0;
 const tslib_1 = require("tslib");
 const node_path_1 = tslib_1.__importDefault(require("node:path"));
 const core_1 = require("@oclif/core");
@@ -11,15 +11,21 @@ const lodash_1 = require("lodash");
 const lodash_2 = tslib_1.__importDefault(require("lodash"));
 const slugify_1 = tslib_1.__importDefault(require("slugify"));
 const yaml_1 = require("yaml");
-exports.LIVE_MODE = "live";
-exports.modeFlagValues = [exports.LIVE_MODE, "latest", "deployed"];
+exports.LATEST_EDITS_MODE = "latest-edits";
+exports.MOST_RECENT_COMMIT_MODE = "most-recent-commit";
+exports.DEPLOYED_MODE = "deployed";
+exports.modeFlagValuesMap = {
+    [exports.LATEST_EDITS_MODE]: "Latest edits",
+    [exports.MOST_RECENT_COMMIT_MODE]: "Most recent commit",
+    [exports.DEPLOYED_MODE]: "Deployed",
+};
 function modeFlagToViewMode(modeFlag) {
     switch (modeFlag) {
-        case exports.LIVE_MODE:
+        case exports.LATEST_EDITS_MODE:
             return "export-live";
-        case "latest":
+        case exports.MOST_RECENT_COMMIT_MODE:
             return "export-latest";
-        case "deployed":
+        case exports.DEPLOYED_MODE:
             return "export-deployed";
         default:
             throw new Error(`Unsupported mode flag: ${modeFlag}`);
@@ -30,7 +36,7 @@ exports.commonFlags = {
     mode: core_1.Flags.string({
         char: "m",
         description: "Pull mode",
-        options: exports.modeFlagValues,
+        options: Object.keys(exports.modeFlagValuesMap),
     }),
 };
 exports.SELECT_PROMPT_HELP = "Use ↑/↓ arrow keys, Enter to confirm";
@@ -137,10 +143,10 @@ async function getMode(task, mode) {
         {
             type: "Select",
             name: "mode",
-            message: `Select fetch mode (${exports.SELECT_PROMPT_HELP})`,
-            choices: exports.modeFlagValues.map((mode) => ({
+            message: `Select which version of a resource you would like to fetch (${exports.SELECT_PROMPT_HELP})`,
+            choices: Object.keys(exports.modeFlagValuesMap).map((mode) => ({
                 name: mode,
-                message: mode,
+                message: exports.modeFlagValuesMap[mode],
             })),
             initial: 0,
             multiple: false,

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.11",
+  "version": "0.0.12",
   "commands": {
     "init": {
       "id": "init",
@@ -21,8 +21,8 @@
           "description": "Pull mode",
           "multiple": false,
           "options": [
-            "live",
-            "latest",
+            "latest-edits",
+            "most-recent-commit",
             "deployed"
           ]
         }
@@ -83,8 +83,8 @@
           "description": "Pull mode",
           "multiple": false,
           "options": [
-            "live",
-            "latest",
+            "latest-edits",
+            "most-recent-commit",
             "deployed"
           ]
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/cli",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Official Superblocks CLI",
   "bin": {
     "superblocks": "bin/run"

package/dist/util/prompt.d.ts

@@ -1,7 +0,0 @@
-import { IPromptOptions } from "@oclif/core/lib/cli-ux";
-type ValidatorFn = (input: string) => string | boolean;
-/**
- * A wrapper around `oclif`'s `ux.prompt` function that allows for validation of user responses.
- */
-export declare function validatedPrompt(name: string, options: IPromptOptions | undefined, validator: ValidatorFn | RegExp): Promise<string>;
-export {};

package/dist/util/prompt.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.validatedPrompt = void 0;
-const core_1 = require("@oclif/core");
-/**
- * A wrapper around `oclif`'s `ux.prompt` function that allows for validation of user responses.
- */
-async function validatedPrompt(name, options, validator) {
-    let validatorFn;
-    if (validator === undefined) {
-        validatorFn = () => true;
-    }
-    else if (validator instanceof RegExp) {
-        validatorFn = (response) => validator.test(response);
-    }
-    else {
-        validatorFn = validator;
-    }
-    for (;;) {
-        const response = await core_1.ux.prompt(name, options);
-        const validationResult = validatorFn(response);
-        if (typeof validationResult === "string") {
-            core_1.ux.log(`Error: ${validationResult}`);
-        }
-        else if (validationResult === false) {
-            core_1.ux.log("Error: Invalid response");
-        }
-        else {
-            return response;
-        }
-    }
-}
-exports.validatedPrompt = validatedPrompt;