@superblocksteam/custom-components 0.0.20

package/README.md

@@ -0,0 +1,32 @@
+@superblocksteam/custom-components
+=================
+
+Provides utility functions to help develop custom components that can be used in Superblocks Applications.
+
+## Usage
+<!-- usage -->
+```typescript
+import React from "react";
+import { useSuperblocksContext } from "@superblocksteam/custom-components";
+import { type Props, type EventTriggers } from "./types";
+
+export default function Component({
+  count,
+}: Props) {
+  const {
+    updateStatefulProperties,
+    events: {
+      onChange,
+    },
+  } = useSuperblocksContext<Props, EventTriggers>();
+
+  return (
+    <button
+      onClick={() => {
+        updateStatefulProperties({ count: count + 1 });
+        onChange();
+      }}
+    >Increment</button>
+  );
+}
+```

package/dist/exportedTypes.d.ts

@@ -0,0 +1 @@
+export { type ComponentConfig } from "@superblocksteam/util";

package/dist/exportedTypes.js

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

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./exportedTypes";
+export * from "./useSuperblocksContext";

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./exportedTypes"), exports);
+tslib_1.__exportStar(require("./useSuperblocksContext"), exports);

package/dist/useSuperblocksContext.d.ts

@@ -0,0 +1,21 @@
+/**
+ * An object that contains some methods that enable custom components to interact with the Superblocks Application.
+ */
+export interface SuperblocksContext<Props, EventTriggers> {
+    /**
+     * 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<Props>) => void;
+    /**
+     * An object that contains methods that can be used to trigger events in Superblocks from your component.
+     */
+    events: EventTriggers;
+}
+/**
+ * A React hook that can be used to get the Superblocks context object that contains methods that enable custom components
+ * to interact with the Superblocks Application.
+ * @returns The Superblocks context object
+ */
+export declare function useSuperblocksContext<Props, EventTriggers>(): SuperblocksContext<Props, EventTriggers>;

package/dist/useSuperblocksContext.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSuperblocksContext = void 0;
+// The place where we store the `CCReactInfo` object
+const ccReactInfoRegister = globalThis.__cc_react_info;
+// === End of internal types ===
+/**
+ * A React hook that can be used to get the Superblocks context object that contains methods that enable custom components
+ * to interact with the Superblocks Application.
+ * @returns The Superblocks context object
+ */
+function useSuperblocksContext() {
+    if (ccReactInfoRegister === undefined) {
+        throw new Error("Cannot find the context object provided by the Superblocks Application Builder UI");
+    }
+    if (ccReactInfoRegister.current === undefined) {
+        throw new Error("No custom components have been registered, are you using the hook in the right place?");
+    }
+    const { React, SuperblocksCCReactContext } = ccReactInfoRegister.current;
+    const ccRenderingContext = React.useContext(SuperblocksCCReactContext);
+    if (ccRenderingContext === undefined) {
+        throw new Error("No React context found, are you using the hook in the right place?");
+    }
+    return ccRenderingContext === null || ccRenderingContext === void 0 ? void 0 : ccRenderingContext.superblocksContext;
+}
+exports.useSuperblocksContext = useSuperblocksContext;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@superblocksteam/custom-components",
+  "version": "0.0.20",
+  "description": "Official Superblocks SDK for developing custom components",
+  "homepage": "https://www.superblocks.com/",
+  "keywords": [
+    "superblocks"
+  ],
+  "license": "Superblocks Community Software License",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "/dist"
+  ],
+  "scripts": {
+    "dev": "tsc --watch",
+    "build": "tsc --build",
+    "clean": "npm run clean:build && rm -rf node_modules",
+    "clean:build": "tsc --build --clean && rm -rf dist tsconfig.tsbuildinfo",
+    "lint": "eslint . --ext .ts --config .eslintrc.json",
+    "lint:fix": "eslint . --ext .ts --config .eslintrc.json --fix"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "eslint": "^8.45.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-unicorn": "^47.0.0",
+    "prettier": "^2.8.8",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@superblocksteam/util": "*",
+    "tslib": "^2.6.1"
+  }
+}