@superblocksteam/util 0.0.19 → 0.0.21

package/dist/data-types.d.ts

@@ -0,0 +1,9 @@
+export declare const supportedDataTypes: readonly ["string", "number", "boolean", "any"];
+export type DataType = (typeof supportedDataTypes)[number];
+interface TypeInfo {
+    tsType: string;
+    prompt: string;
+}
+export declare const dataTypeDefinions: Record<DataType, TypeInfo>;
+export declare function isValidDataType(input: string): input is DataType;
+export {};

package/dist/data-types.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isValidDataType = exports.dataTypeDefinions = exports.supportedDataTypes = void 0;
+exports.supportedDataTypes = [
+    "string",
+    "number",
+    "boolean",
+    "any",
+];
+exports.dataTypeDefinions = {
+    string: {
+        tsType: "string",
+        prompt: "string",
+    },
+    number: {
+        tsType: "number",
+        prompt: "number",
+    },
+    boolean: {
+        tsType: "boolean",
+        prompt: "boolean",
+    },
+    any: {
+        tsType: "any",
+        prompt: "any (raw js expression)",
+    },
+};
+function isValidDataType(input) {
+    return Object.prototype.hasOwnProperty.call(exports.dataTypeDefinions, input);
+}
+exports.isValidDataType = isValidDataType;

package/dist/generate-component-types.d.ts

@@ -1 +1,2 @@
-export declare function generateComponentTypesFile(config: any): string;
+import { ComponentConfig } from "./types";
+export declare function generateComponentTypesFile(config: ComponentConfig): string;

package/dist/generate-component-types.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.generateComponentTypesFile = void 0;
-const input_types_1 = require("./input-types");
+const data_types_1 = require("./data-types");
 const indent = (str, spaces) => {
     const spacesString = " ".repeat(spaces);
     return str
@@ -10,31 +10,24 @@ const indent = (str, spaces) => {
         .join("\n");
 };
 function renderInputTypeAsTS(name, type, trailingChars, indentSpaces) {
-    return indent(`${name}: ${input_types_1.inputTypeDefinions[type].tsType}${trailingChars}`, indentSpaces);
+    return indent(`${name}: ${data_types_1.dataTypeDefinions[type].tsType}${trailingChars}`, indentSpaces);
 }
 function generateComponentTypesFile(config) {
     var _a, _b;
-    const statefulProperties = (_a = config.statefulProperties) !== null && _a !== void 0 ? _a : [];
-    const eventHandlers = (_b = config.eventHandlers) !== null && _b !== void 0 ? _b : [];
+    const properties = (_a = config.properties) !== null && _a !== void 0 ? _a : [];
+    const eventHandlers = (_b = config.events) !== null && _b !== void 0 ? _b : [];
     return `// WARNING: This file is automatically generated and managed by Superblocks CLI and should not be edited manually.
 // Use the \`superblocks components watch\` command to regenerate this file from its source in config.ts
 
-// All stateful properties of your component are defined here.
+// All properties of your component are defined here.
 // These are the properties which are surfaced in the Superblocks properties panel
 // and can be referenced throughout your Superblocks Application
-export interface StatefulProperties {
-${statefulProperties
-        .map((v) => renderInputTypeAsTS(v.path, v.inputType, ";", 2) + "\n")
+export interface Props {
+${properties
+        .map((v) => renderInputTypeAsTS(v.path, v.dataType, ";", 2) + "\n")
         .join("")}}
 
-export interface Props extends StatefulProperties {
-  /**
-   * Update one (or more) of your component's stateful properties. This will cause the component to rerender,
-   * and will also notify any other components in your Application which depend on the updated properties, so they also rerender
-   * @param props An object with the properties to update along with their new values
-   */
-  updateStatefulProperties: (props: Partial<StatefulProperties>) => void;
-
+export interface EventTriggers {
   // Call the subsequent function(s) to trigger event(s) in Superblocks from your component.
   // These events can be wired up to event handlers in your Superblocks App
 ${eventHandlers.length === 0

package/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from "./component-configs";
 export * from "./file-uploader";
 export * from "./login";
 export * from "./resource-configs";
-export * from "./input-types";
+export * from "./data-types";
+export * from "./types";

package/dist/index.js

@@ -6,4 +6,5 @@ tslib_1.__exportStar(require("./component-configs"), exports);
 tslib_1.__exportStar(require("./file-uploader"), exports);
 tslib_1.__exportStar(require("./login"), exports);
 tslib_1.__exportStar(require("./resource-configs"), exports);
-tslib_1.__exportStar(require("./input-types"), exports);
+tslib_1.__exportStar(require("./data-types"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/dist/resource-configs.d.ts

@@ -1,12 +1,9 @@
 export type SuperblocksMetadata = {
     cliVersion: string;
-    lastUpdated: string;
-    created: string;
 };
 export type SuperblocksResourceType = "APPLICATION" | "BACKEND";
 export type VersionedResourceConfig = {
     location: string;
-    lastUpdated: string;
     resourceType: SuperblocksResourceType;
 };
 export type SuperblocksResourceConfig = {

package/dist/types.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="node" />
+import { type UUID } from "node:crypto";
+import { type DataType } from "./data-types";
+interface PropertiesPanelDisplay {
+    controlType: "text" | "js-expr" | "switch";
+    label: string;
+    placeholder?: string;
+    exampleData?: string;
+}
+export interface Property {
+    path: string;
+    dataType: DataType;
+    propertiesPanelDisplay?: PropertiesPanelDisplay;
+    description?: string;
+}
+export interface ComponentConfig {
+    id: UUID;
+    name: string;
+    displayName: string;
+    componentPath: string;
+    properties: Property[];
+    /**
+     * Example: [{
+     *  label: "On Click",
+     *  path: "onClick",
+     * }]
+     */
+    events: Array<{
+        label: string;
+        path: string;
+    }>;
+}
+export {};

package/dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/validation.js

@@ -12,13 +12,13 @@ const componentSchema = {
         name: { type: "string" },
         displayName: { type: "string" },
         componentPath: { type: "string" },
-        statefulProperties: {
+        properties: {
             type: "array",
             items: {
-                $ref: "#/definitions/StatefulProperty",
+                $ref: "#/definitions/Property",
             },
         },
-        eventHandlers: {
+        events: {
             type: "array",
             items: {
                 $ref: "#/definitions/EventHandler",
@@ -30,21 +30,32 @@ const componentSchema = {
         "name",
         "displayName",
         "componentPath",
-        "statefulProperties",
-        "eventHandlers",
+        "properties",
+        "events",
     ],
     additionalProperties: false,
     definitions: {
-        StatefulProperty: {
+        Property: {
             properties: {
-                label: { type: "string" },
                 path: { type: "string" },
-                inputType: { enum: ["text", "number", "boolean", "js"] },
-                placeholder: { type: "string" },
+                dataType: { enum: ["number", "boolean", "string", "any"] },
+                propertiesPanelDisplay: {
+                    type: "object",
+                    properties: {
+                        label: { type: "string" },
+                        controlType: { enum: ["text", "js-expr", "switch"] },
+                        defaultValue: { type: "string" },
+                        placeholder: { type: "string" },
+                        exampleData: { type: "string" },
+                    },
+                    required: ["controlType", "label"],
+                    additionalProperties: false,
+                },
+                description: { type: "string" },
             },
             type: "object",
             additionalProperties: false,
-            required: ["label", "path", "inputType"],
+            required: ["path", "dataType"],
         },
         EventHandler: {
             properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@superblocksteam/util",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "main": "dist/index.js",
   "homepage": "https://www.superblocks.com",
   "scripts": {

package/src/data-types.ts

@@ -0,0 +1,39 @@
+export const supportedDataTypes = [
+  "string",
+  "number",
+  "boolean",
+  "any",
+] as const;
+
+export type DataType = (typeof supportedDataTypes)[number];
+
+interface TypeInfo {
+  tsType: string;
+  prompt: string;
+}
+
+export const dataTypeDefinions: Record<DataType, TypeInfo> = {
+  string: {
+    tsType: "string",
+    prompt: "string",
+  },
+  number: {
+    tsType: "number",
+    prompt: "number",
+  },
+  boolean: {
+    tsType: "boolean",
+    prompt: "boolean",
+  },
+  any: {
+    tsType: "any",
+    prompt: "any (raw js expression)",
+  },
+};
+
+export function isValidDataType(input: string): input is DataType {
+  return Object.prototype.hasOwnProperty.call(
+    dataTypeDefinions,
+    input as DataType
+  );
+}

package/src/generate-component-types.ts

@@ -1,4 +1,5 @@
-import { inputTypeDefinions, type InputType } from "./input-types";
+import { dataTypeDefinions, type DataType } from "./data-types";
+import { ComponentConfig } from "./types";
 
 const indent = (str: string, spaces: number) => {
   const spacesString = " ".repeat(spaces);
@@ -11,38 +12,31 @@ const indent = (str: string, spaces: number) => {
 
 function renderInputTypeAsTS(
   name: string,
-  type: InputType,
+  type: DataType,
   trailingChars: string,
   indentSpaces: number
 ) {
   return indent(
-    `${name}: ${inputTypeDefinions[type].tsType}${trailingChars}`,
+    `${name}: ${dataTypeDefinions[type].tsType}${trailingChars}`,
     indentSpaces
   );
 }
 
-export function generateComponentTypesFile(config: any) {
-  const statefulProperties = config.statefulProperties ?? [];
-  const eventHandlers = config.eventHandlers ?? [];
+export function generateComponentTypesFile(config: ComponentConfig) {
+  const properties = config.properties ?? [];
+  const eventHandlers = config.events ?? [];
   return `// WARNING: This file is automatically generated and managed by Superblocks CLI and should not be edited manually.
 // Use the \`superblocks components watch\` command to regenerate this file from its source in config.ts
 
-// All stateful properties of your component are defined here.
+// All properties of your component are defined here.
 // These are the properties which are surfaced in the Superblocks properties panel
 // and can be referenced throughout your Superblocks Application
-export interface StatefulProperties {
-${statefulProperties
-  .map((v: any) => renderInputTypeAsTS(v.path, v.inputType, ";", 2) + "\n")
+export interface Props {
+${properties
+  .map((v) => renderInputTypeAsTS(v.path, v.dataType, ";", 2) + "\n")
   .join("")}}
 
-export interface Props extends StatefulProperties {
-  /**
-   * Update one (or more) of your component's stateful properties. This will cause the component to rerender,
-   * and will also notify any other components in your Application which depend on the updated properties, so they also rerender
-   * @param props An object with the properties to update along with their new values
-   */
-  updateStatefulProperties: (props: Partial<StatefulProperties>) => void;
-
+export interface EventTriggers {
   // Call the subsequent function(s) to trigger event(s) in Superblocks from your component.
   // These events can be wired up to event handlers in your Superblocks App
 ${

package/src/index.ts

@@ -3,4 +3,5 @@ export * from "./component-configs";
 export * from "./file-uploader";
 export * from "./login";
 export * from "./resource-configs";
-export * from "./input-types";
+export * from "./data-types";
+export * from "./types";

package/src/resource-configs.ts

@@ -3,15 +3,12 @@ import { RESOURCE_CONFIG_PATH } from "./constants";
 
 export type SuperblocksMetadata = {
   cliVersion: string;
-  lastUpdated: string;
-  created: string;
 };
 
 export type SuperblocksResourceType = "APPLICATION" | "BACKEND";
 
 export type VersionedResourceConfig = {
   location: string;
-  lastUpdated: string;
   resourceType: SuperblocksResourceType;
 };
 

package/src/types.ts

@@ -0,0 +1,58 @@
+import { type UUID } from "node:crypto";
+import { type DataType } from "./data-types";
+
+interface PropertiesPanelDisplay {
+  // Determines what form item type is shown in the Superblocks properties panel.
+  controlType: "text" | "js-expr" | "switch";
+
+  // Determines form item label in the Superblocks properties panel.
+  label: string;
+
+  // Placeholder text appears as gray text in the properties panel. This only applies
+  // to text-like inputs.
+  placeholder?: string;
+
+  // This shows up in the popover as a user types into the properties panel.
+  // This is a documentation field that helps users understand what type of data is accepted
+  // by this property.
+  exampleData?: string;
+}
+
+export interface Property {
+  path: string;
+  dataType: DataType;
+
+  // The presence of this object determines whether or not this property
+  // shows up in the Superblocks properties panel.
+  propertiesPanelDisplay?: PropertiesPanelDisplay;
+
+  // A description of this property. This is used in the Superblocks properties panel
+  // as well as in the custom component's autocomplete.
+  description?: string;
+}
+
+export interface ComponentConfig {
+  id: UUID;
+
+  // Example: "myComponent"
+  name: string;
+
+  // Example: "My Component"
+  displayName: string;
+
+  // Example: "components/myComponent/component.tsx"
+  componentPath: string;
+
+  properties: Property[];
+
+  /**
+   * Example: [{
+   *  label: "On Click",
+   *  path: "onClick",
+   * }]
+   */
+  events: Array<{
+    label: string;
+    path: string;
+  }>;
+}

package/src/validation.ts

@@ -10,13 +10,13 @@ const componentSchema: Schema = {
     name: { type: "string" },
     displayName: { type: "string" },
     componentPath: { type: "string" },
-    statefulProperties: {
+    properties: {
       type: "array",
       items: {
-        $ref: "#/definitions/StatefulProperty",
+        $ref: "#/definitions/Property",
       },
     },
-    eventHandlers: {
+    events: {
       type: "array",
       items: {
         $ref: "#/definitions/EventHandler",
@@ -28,21 +28,32 @@ const componentSchema: Schema = {
     "name",
     "displayName",
     "componentPath",
-    "statefulProperties",
-    "eventHandlers",
+    "properties",
+    "events",
   ],
   additionalProperties: false,
   definitions: {
-    StatefulProperty: {
+    Property: {
       properties: {
-        label: { type: "string" },
         path: { type: "string" },
-        inputType: { enum: ["text", "number", "boolean", "js"] },
-        placeholder: { type: "string" },
+        dataType: { enum: ["number", "boolean", "string", "any"] },
+        propertiesPanelDisplay: {
+          type: "object",
+          properties: {
+            label: { type: "string" },
+            controlType: { enum: ["text", "js-expr", "switch"] },
+            defaultValue: { type: "string" },
+            placeholder: { type: "string" },
+            exampleData: { type: "string" },
+          },
+          required: ["controlType", "label"],
+          additionalProperties: false,
+        },
+        description: { type: "string" },
       },
       type: "object",
       additionalProperties: false,
-      required: ["label", "path", "inputType"],
+      required: ["path", "dataType"],
     },
     EventHandler: {
       properties: {

package/dist/input-types.d.ts

@@ -1,9 +0,0 @@
-export declare const supportedInputTypes: readonly ["text", "number", "boolean", "js"];
-export type InputType = (typeof supportedInputTypes)[number];
-interface TypeInfo {
-    tsType: string;
-    prompt: string;
-}
-export declare const inputTypeDefinions: Record<InputType, TypeInfo>;
-export declare function isValidInputType(input: string): input is InputType;
-export {};

package/dist/input-types.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isValidInputType = exports.inputTypeDefinions = exports.supportedInputTypes = void 0;
-exports.supportedInputTypes = ["text", "number", "boolean", "js"];
-exports.inputTypeDefinions = {
-    text: {
-        tsType: "string",
-        prompt: "text",
-    },
-    number: {
-        tsType: "number",
-        prompt: "number",
-    },
-    boolean: {
-        tsType: "boolean",
-        prompt: "boolean",
-    },
-    js: {
-        tsType: "any",
-        prompt: "any (raw js expression)",
-    },
-};
-function isValidInputType(input) {
-    return Object.prototype.hasOwnProperty.call(exports.inputTypeDefinions, input);
-}
-exports.isValidInputType = isValidInputType;

package/src/input-types.ts

@@ -1,34 +0,0 @@
-export const supportedInputTypes = ["text", "number", "boolean", "js"] as const;
-
-export type InputType = (typeof supportedInputTypes)[number];
-
-interface TypeInfo {
-  tsType: string;
-  prompt: string;
-}
-
-export const inputTypeDefinions: Record<InputType, TypeInfo> = {
-  text: {
-    tsType: "string",
-    prompt: "text",
-  },
-  number: {
-    tsType: "number",
-    prompt: "number",
-  },
-  boolean: {
-    tsType: "boolean",
-    prompt: "boolean",
-  },
-  js: {
-    tsType: "any",
-    prompt: "any (raw js expression)",
-  },
-};
-
-export function isValidInputType(input: string): input is InputType {
-  return Object.prototype.hasOwnProperty.call(
-    inputTypeDefinions,
-    input as InputType
-  );
-}