@webstudio-is/react-sdk 0.91.0 → 0.93.0

package/lib/instance-utils.js

@@ -1,4 +1,5 @@
-const getIndexesWithinAncestors = (metas, instances, rootIds) => {
+"use strict";
+export const getIndexesWithinAncestors = (metas, instances, rootIds) => {
   const ancestors = /* @__PURE__ */ new Set();
   for (const meta of metas.values()) {
     if (meta.indexWithinAncestor !== void 0) {
@@ -40,6 +41,3 @@ const getIndexesWithinAncestors = (metas, instances, rootIds) => {
   }
   return indexes;
 };
-export {
-  getIndexesWithinAncestors
-};

package/{src/instance-utils.test.ts → lib/instance-utils.test.js}

@@ -1,81 +1,57 @@
+"use strict";
 import { test, expect } from "@jest/globals";
-import type { Instance, Instances } from "@webstudio-is/project-build";
 import { getIndexesWithinAncestors } from "./instance-utils";
-import type { WsComponentMeta } from ".";
-
-const getIdValuePair = <T extends { id: string }>(item: T) =>
-  [item.id, item] as const;
-
-const toMap = <T extends { id: string }>(list: T[]) =>
-  new Map(list.map(getIdValuePair));
-
-const createInstance = (
-  id: Instance["id"],
-  component: string,
-  children: Instance["children"]
-): Instance => {
+const getIdValuePair = (item) => [item.id, item];
+const toMap = (list) => new Map(list.map(getIdValuePair));
+const createInstance = (id, component, children) => {
   return { type: "instance", id, component, children };
 };
-
-const createMeta = (meta?: Partial<WsComponentMeta>) => {
-  return { type: "container", label: "", icon: "", ...meta } as const;
+const createMeta = (meta) => {
+  return { type: "container", label: "", icon: "", ...meta };
 };
-
 test("get indexes within ancestors", () => {
-  // body0
-  //   tabs1
-  //     tabs1list
-  //       tabs1box
-  //         tabs1trigger1
-  //         tabs1trigger2
-  //     tabs1content1
-  //       tabs2
-  //         tabs2list
-  //           tabs2trigger1
-  //         tabs2content1
-  //     tabs1content2
-  const instances: Instances = toMap([
+  const instances = toMap([
     createInstance("body0", "Body", [{ type: "id", value: "tabs1" }]),
     // tabs1
     createInstance("tabs1", "Tabs", [
       { type: "id", value: "tabs1list" },
       { type: "id", value: "tabs1content1" },
-      { type: "id", value: "tabs1content2" },
+      { type: "id", value: "tabs1content2" }
     ]),
     createInstance("tabs1list", "TabsList", [
-      { type: "id", value: "tabs1box" },
+      { type: "id", value: "tabs1box" }
     ]),
     createInstance("tabs1box", "Box", [
       { type: "id", value: "tabs1trigger1" },
-      { type: "id", value: "tabs1trigger2" },
+      { type: "id", value: "tabs1trigger2" }
     ]),
     createInstance("tabs1trigger1", "TabsTrigger", []),
     createInstance("tabs1trigger2", "TabsTrigger", []),
     createInstance("tabs1content1", "TabsContent", [
-      { type: "id", value: "tabs2" },
+      { type: "id", value: "tabs2" }
     ]),
     createInstance("tabs1content2", "TabsContent", []),
     // tabs2
     createInstance("tabs2", "Tabs", [
       { type: "id", value: "tabs2list" },
-      { type: "id", value: "tabs2content1" },
+      { type: "id", value: "tabs2content1" }
     ]),
     createInstance("tabs2list", "TabsList", [
-      { type: "id", value: "tabs2trigger1" },
+      { type: "id", value: "tabs2trigger1" }
     ]),
     createInstance("tabs2trigger1", "TabsTrigger", []),
-    createInstance("tabs2content1", "TabsContent", []),
-  ] satisfies Instance[]);
-  const metas = new Map<Instance["component"], WsComponentMeta>([
+    createInstance("tabs2content1", "TabsContent", [])
+  ]);
+  const metas = /* @__PURE__ */ new Map([
     ["Body", createMeta()],
     ["Box", createMeta()],
     ["Tabs", createMeta()],
     ["TabsList", createMeta({ indexWithinAncestor: "Tabs" })],
     ["TabsTrigger", createMeta({ indexWithinAncestor: "TabsList" })],
-    ["TabsContent", createMeta({ indexWithinAncestor: "Tabs" })],
+    ["TabsContent", createMeta({ indexWithinAncestor: "Tabs" })]
   ]);
   expect(getIndexesWithinAncestors(metas, instances, ["body0"])).toEqual(
-    new Map([
+    /* @__PURE__ */ new Map([
       ["tabs1list", 0],
       ["tabs1trigger1", 0],
       ["tabs1trigger2", 1],
@@ -83,7 +59,7 @@ test("get indexes within ancestors", () => {
       ["tabs1content2", 1],
       ["tabs2list", 0],
       ["tabs2trigger1", 0],
-      ["tabs2content1", 0],
+      ["tabs2content1", 0]
     ])
   );
 });

package/lib/prop-meta.js

@@ -0,0 +1,150 @@
+"use strict";
+import { z } from "zod";
+const common = {
+  label: z.string().optional(),
+  description: z.string().optional(),
+  required: z.boolean()
+};
+const Number = z.object({
+  ...common,
+  control: z.literal("number"),
+  type: z.literal("number"),
+  defaultValue: z.number().optional()
+});
+const Range = z.object({
+  ...common,
+  control: z.literal("range"),
+  type: z.literal("number"),
+  defaultValue: z.number().optional()
+});
+const Text = z.object({
+  ...common,
+  control: z.literal("text"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /**
+   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
+   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
+   */
+  rows: z.number().optional()
+});
+const Code = z.object({
+  ...common,
+  control: z.literal("code"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /**
+   * The number of rows in <textarea>. If set to 0 an <input> will be used instead.
+   * In line with Storybook team's plan: https://github.com/storybookjs/storybook/issues/21100
+   */
+  rows: z.number().optional()
+});
+const Color = z.object({
+  ...common,
+  control: z.literal("color"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+const Boolean = z.object({
+  ...common,
+  control: z.literal("boolean"),
+  type: z.literal("boolean"),
+  defaultValue: z.boolean().optional()
+});
+const Radio = z.object({
+  ...common,
+  control: z.literal("radio"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+const InlineRadio = z.object({
+  ...common,
+  control: z.literal("inline-radio"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+const Select = z.object({
+  ...common,
+  control: z.literal("select"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  options: z.array(z.string())
+});
+const Check = z.object({
+  ...common,
+  control: z.literal("check"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+const InlineCheck = z.object({
+  ...common,
+  control: z.literal("inline-check"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+const MultiSelect = z.object({
+  ...common,
+  control: z.literal("multi-select"),
+  type: z.literal("string[]"),
+  defaultValue: z.array(z.string()).optional(),
+  options: z.array(z.string())
+});
+const File = z.object({
+  ...common,
+  control: z.literal("file"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional(),
+  /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
+  accept: z.string().optional()
+});
+const Url = z.object({
+  ...common,
+  control: z.literal("url"),
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+const ObjectType = z.object({
+  ...common,
+  control: z.literal("object"),
+  // @todo not sure what type should be here
+  // (we don't support Object yet, added for completeness)
+  type: z.literal("Record<string, string>"),
+  defaultValue: z.record(z.string()).optional()
+});
+const Date = z.object({
+  ...common,
+  control: z.literal("date"),
+  // @todo not sure what type should be here
+  // (we don't support Date yet, added for completeness)
+  type: z.literal("string"),
+  defaultValue: z.string().optional()
+});
+const Action = z.object({
+  ...common,
+  control: z.literal("action"),
+  type: z.literal("action"),
+  defaultValue: z.undefined().optional()
+});
+export const PropMeta = z.union([
+  Number,
+  Range,
+  Text,
+  Code,
+  Color,
+  Boolean,
+  Radio,
+  InlineRadio,
+  Select,
+  MultiSelect,
+  Check,
+  InlineCheck,
+  File,
+  Url,
+  ObjectType,
+  Date,
+  Action
+]);

package/lib/props.js

@@ -1,9 +1,10 @@
+"use strict";
 import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { ReactSdkContext } from "./context";
 import { idAttribute, indexAttribute } from "./tree/webstudio-component";
-const getPropsByInstanceId = (props) => {
+export const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
     let instanceProps = propsByInstanceId.get(prop.instanceId);
@@ -15,7 +16,7 @@ const getPropsByInstanceId = (props) => {
   }
   return propsByInstanceId;
 };
-const useInstanceProps = (instanceId) => {
+export const useInstanceProps = (instanceId) => {
   const {
     propsByInstanceIdStore,
     dataSourceValuesStore,
@@ -83,7 +84,7 @@ const useInstanceProps = (instanceId) => {
   const instancePropsObject = useStore(instancePropsObjectStore);
   return instancePropsObject;
 };
-const usePropAsset = (instanceId, name) => {
+export const usePropAsset = (instanceId, name) => {
   const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
   const assetStore = useMemo(() => {
     return computed(
@@ -105,7 +106,7 @@ const usePropAsset = (instanceId, name) => {
   const asset = useStore(assetStore);
   return asset;
 };
-const resolveUrlProp = (instanceId, name, {
+export const resolveUrlProp = (instanceId, name, {
   props,
   pages,
   assets
@@ -156,7 +157,7 @@ const resolveUrlProp = (instanceId, name, {
   }
   return;
 };
-const usePropUrl = (instanceId, name) => {
+export const usePropUrl = (instanceId, name) => {
   const { propsByInstanceIdStore, pagesStore, assetsStore } = useContext(ReactSdkContext);
   const store = useMemo(
     () => computed(
@@ -167,18 +168,9 @@ const usePropUrl = (instanceId, name) => {
   );
   return useStore(store);
 };
-const getInstanceIdFromComponentProps = (props) => {
+export const getInstanceIdFromComponentProps = (props) => {
   return props[idAttribute];
 };
-const getIndexWithinAncestorFromComponentProps = (props) => {
+export const getIndexWithinAncestorFromComponentProps = (props) => {
   return props[indexAttribute];
 };
-export {
-  getIndexWithinAncestorFromComponentProps,
-  getInstanceIdFromComponentProps,
-  getPropsByInstanceId,
-  resolveUrlProp,
-  useInstanceProps,
-  usePropAsset,
-  usePropUrl
-};

package/{src/props.test.ts → lib/props.test.js}

@@ -1,111 +1,95 @@
+"use strict";
 import { describe, test, expect } from "@jest/globals";
-import { resolveUrlProp, type Pages, type PropsByInstanceId } from "./props";
-import type { Page, Prop } from "@webstudio-is/project-build";
-import type { Asset, Assets } from "@webstudio-is/asset-uploader";
-
+import { resolveUrlProp } from "./props";
 const unique = () => Math.random().toString();
-
 describe("resolveUrlProp", () => {
   const instanceId = unique();
   const projectId = unique();
-
-  const page1: Page = {
+  const page1 = {
     id: unique(),
     path: `/${unique()}`,
     name: "",
     title: "",
     meta: {},
-    rootInstanceId: "0",
+    rootInstanceId: "0"
   };
-
-  const page2: Page = {
+  const page2 = {
     id: unique(),
     path: `/${unique()}`,
     name: "",
     title: "",
     meta: {},
-    rootInstanceId: "0",
+    rootInstanceId: "0"
   };
-
-  const asset1: Asset = {
+  const asset1 = {
     id: unique(),
     name: unique(),
     type: "image",
     projectId,
     format: "png",
-    size: 100000,
-    createdAt: new Date().toISOString(),
+    size: 1e5,
+    createdAt: (/* @__PURE__ */ new Date()).toISOString(),
     description: null,
-    meta: { width: 128, height: 180 },
+    meta: { width: 128, height: 180 }
   };
-
-  const assetProp: Prop = {
+  const assetProp = {
     type: "asset",
     id: unique(),
     instanceId,
     name: unique(),
-    value: asset1.id,
+    value: asset1.id
   };
-
-  const pageByIdProp: Prop = {
+  const pageByIdProp = {
     type: "page",
     id: unique(),
     instanceId,
     name: unique(),
-    value: page1.id,
+    value: page1.id
   };
-
-  const instnaceIdProp: Prop = {
+  const instnaceIdProp = {
     type: "string",
     id: unique(),
     instanceId: unique(),
     name: "id",
-    value: unique(),
+    value: unique()
   };
-
-  const pageSectionProp: Prop = {
+  const pageSectionProp = {
     type: "page",
     id: unique(),
     instanceId,
     name: unique(),
-    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId },
+    value: { pageId: page1.id, instanceId: instnaceIdProp.instanceId }
   };
-
-  const pageByPathProp: Prop = {
+  const pageByPathProp = {
     type: "string",
     id: unique(),
     instanceId,
     name: unique(),
-    value: page2.path,
+    value: page2.path
   };
-
-  const arbitraryUrlProp: Prop = {
+  const arbitraryUrlProp = {
     type: "string",
     id: unique(),
     instanceId,
     name: unique(),
-    value: unique(),
+    value: unique()
   };
-
   const duplicatePropName = unique();
-
-  const duplicateUrlPropFirst: Prop = {
+  const duplicateUrlPropFirst = {
     type: "string",
     id: unique(),
     instanceId,
     name: duplicatePropName,
-    value: unique(),
+    value: unique()
   };
-
-  const duplicateUrlPropSecond: Prop = {
+  const duplicateUrlPropSecond = {
     type: "string",
     id: unique(),
     instanceId,
     name: duplicatePropName,
-    value: unique(),
+    value: unique()
   };
-
-  const props: PropsByInstanceId = new Map([
+  const props = /* @__PURE__ */ new Map([
     [
       instanceId,
       [
@@ -115,74 +99,61 @@ describe("resolveUrlProp", () => {
         assetProp,
         pageSectionProp,
         duplicateUrlPropFirst,
-        duplicateUrlPropSecond,
-      ],
+        duplicateUrlPropSecond
+      ]
     ],
-    [instnaceIdProp.instanceId, [instnaceIdProp]],
+    [instnaceIdProp.instanceId, [instnaceIdProp]]
   ]);
-
-  const pages: Pages = new Map([
+  const pages = /* @__PURE__ */ new Map([
     [page1.id, page1],
-    [page2.id, page2],
+    [page2.id, page2]
   ]);
-
-  const assets: Assets = new Map([[asset1.id, asset1]]);
-
+  const assets = /* @__PURE__ */ new Map([[asset1.id, asset1]]);
   const stores = { props, pages, assets };
-
   test("if instanceId is unknown returns undefined", () => {
     expect(
       resolveUrlProp("unknown", pageByIdProp.name, stores)
     ).toBeUndefined();
   });
-
   test("if prop name is unknown returns undefined", () => {
     expect(resolveUrlProp(instanceId, "unknown", stores)).toBeUndefined();
   });
-
   test("asset by id", () => {
     expect(resolveUrlProp(instanceId, assetProp.name, stores)).toEqual({
       type: "asset",
-      asset: asset1,
+      asset: asset1
     });
   });
-
   test("page by id", () => {
     expect(resolveUrlProp(instanceId, pageByIdProp.name, stores)).toEqual({
       type: "page",
-      page: page1,
+      page: page1
     });
   });
-
   test("page by path", () => {
     expect(resolveUrlProp(instanceId, pageByPathProp.name, stores)).toEqual({
       type: "page",
-      page: page2,
+      page: page2
     });
   });
-
   test("section on a page", () => {
     expect(resolveUrlProp(instanceId, pageSectionProp.name, stores)).toEqual({
       type: "page",
       page: page1,
       instanceId: instnaceIdProp.instanceId,
-      hash: instnaceIdProp.value,
+      hash: instnaceIdProp.value
     });
   });
-
   test("arbitrary url", () => {
     expect(resolveUrlProp(instanceId, arbitraryUrlProp.name, stores)).toEqual({
       type: "string",
-      url: arbitraryUrlProp.value,
+      url: arbitraryUrlProp.value
     });
   });
-
-  // We had a bug that some props were duplicated https://github.com/webstudio-is/webstudio-builder/pull/2170
-  // Use the latest prop to ensure consistency with the builder settings panel.
   test("duplicate prop name", () => {
     expect(resolveUrlProp(instanceId, duplicatePropName, stores)).toEqual({
       type: "string",
-      url: duplicateUrlPropSecond.value,
+      url: duplicateUrlPropSecond.value
     });
   });
 });

package/lib/pubsub/create.js

@@ -1,7 +1,8 @@
+"use strict";
 import { createNanoEvents } from "nanoevents";
 import { useCallback, useEffect, useRef } from "react";
 import { batchUpdate } from "./raf-queue";
-const createPubsub = () => {
+export const createPubsub = () => {
   const emitter = createNanoEvents();
   if (typeof window === "object") {
     window.addEventListener(
@@ -53,6 +54,3 @@ const createPubsub = () => {
     }
   };
 };
-export {
-  createPubsub
-};

package/lib/pubsub/index.js

@@ -1 +1,2 @@
+"use strict";
 export * from "./create";

package/lib/pubsub/raf-queue.js

@@ -1,3 +1,4 @@
+"use strict";
 let handle;
 let updateQueue = [];
 const processUpdates = (updates) => {
@@ -5,7 +6,7 @@ const processUpdates = (updates) => {
     update();
   }
 };
-const batchUpdate = (update) => {
+export const batchUpdate = (update) => {
   updateQueue.push(update);
   if (handle !== void 0) {
     return;
@@ -17,6 +18,3 @@ const batchUpdate = (update) => {
     processUpdates(updates);
   });
 };
-export {
-  batchUpdate
-};

package/lib/tree/create-elements-tree.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   Fragment
@@ -5,7 +6,7 @@ import {
 import {
   ReactSdkContext
 } from "../context";
-const createElementsTree = ({
+export const createElementsTree = ({
   renderer,
   imageBaseUrl,
   assetBaseUrl,
@@ -131,6 +132,3 @@ const createInstanceElement = ({
     instance.id
   );
 };
-export {
-  createElementsTree
-};

package/lib/tree/index.js

@@ -1,3 +1,4 @@
+"use strict";
 export * from "./create-elements-tree";
 export * from "./root";
 export * from "./webstudio-component";

package/lib/tree/root.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   useRef,
   useCallback
@@ -6,13 +7,12 @@ import {
   atom,
   computed
 } from "nanostores";
-import {} from "@webstudio-is/project-build";
 import { createElementsTree } from "./create-elements-tree";
 import {
   WebstudioComponent
 } from "./webstudio-component";
 import { getPropsByInstanceId } from "../props";
-const InstanceRoot = ({
+export const InstanceRoot = ({
   data,
   utils,
   Component,
@@ -83,6 +83,3 @@ const InstanceRoot = ({
     scripts
   });
 };
-export {
-  InstanceRoot
-};