@webstudio-is/react-sdk 0.91.0 → 0.93.0

package/lib/types/generator.d.ts

@@ -1,4 +1,4 @@
-import type { DataSources, Instance, Instances, Page, Props } from "@webstudio-is/project-build";
+import type { DataSources, Instance, Instances, Page, Props } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "./components/component-meta";
 import { type IndexesWithinAncestors } from "./instance-utils";
 import type { DataSourceValues } from "./context";

package/lib/types/hook.d.ts

@@ -1,4 +1,4 @@
-import type { Instance, Prop } from "@webstudio-is/project-build";
+import type { Instance, Prop } from "@webstudio-is/sdk";
 import type { IndexesWithinAncestors } from "./instance-utils";
 /**
  * Hooks are subscriptions to builder events
@@ -30,11 +30,11 @@ export declare const getClosestInstance: (instancePath: InstancePath, currentIns
     id: string;
     component: string;
     children: ({
-        type: "text";
         value: string;
+        type: "text";
     } | {
-        type: "id";
         value: string;
+        type: "id";
     })[];
     label?: string | undefined;
 } | undefined;

package/lib/types/index.d.ts

@@ -3,6 +3,7 @@ export * from "./tree";
 export * from "./pubsub";
 export * from "./app";
 export * from "./components/components-utils";
+export { PropMeta } from "./prop-meta";
 export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
 export * from "./embed-template";
 export { useInstanceProps, usePropUrl, usePropAsset, getInstanceIdFromComponentProps, getIndexWithinAncestorFromComponentProps, } from "./props";

package/lib/types/instance-utils.d.ts

@@ -1,4 +1,4 @@
-import type { Instance } from "@webstudio-is/project-build";
+import type { Instance } from "@webstudio-is/sdk";
 import type { WsComponentMeta } from "./components/component-meta";
 export type IndexesWithinAncestors = Map<Instance["id"], number>;
 export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"], WsComponentMeta>, instances: Map<string, {
@@ -6,11 +6,11 @@ export declare const getIndexesWithinAncestors: (metas: Map<Instance["component"
     id: string;
     component: string;
     children: ({
-        type: "text";
         value: string;
+        type: "text";
     } | {
-        type: "id";
         value: string;
+        type: "id";
     })[];
     label?: string | undefined;
 }>, rootIds: Instance["id"][]) => IndexesWithinAncestors;

package/lib/types/prop-meta.d.ts

@@ -0,0 +1,396 @@
+import { z } from "zod";
+export declare const PropMeta: z.ZodUnion<[z.ZodObject<{
+    control: z.ZodLiteral<"number">;
+    type: z.ZodLiteral<"number">;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "number";
+    required: boolean;
+    control: "number";
+    defaultValue?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "number";
+    required: boolean;
+    control: "number";
+    defaultValue?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"range">;
+    type: z.ZodLiteral<"number">;
+    defaultValue: z.ZodOptional<z.ZodNumber>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "number";
+    required: boolean;
+    control: "range";
+    defaultValue?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "number";
+    required: boolean;
+    control: "range";
+    defaultValue?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"text">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    /**
+     * 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.ZodOptional<z.ZodNumber>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "text";
+    defaultValue?: string | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "text";
+    defaultValue?: string | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"code">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    /**
+     * 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.ZodOptional<z.ZodNumber>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "code";
+    defaultValue?: string | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "code";
+    defaultValue?: string | undefined;
+    rows?: number | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"color">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "color";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "color";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"boolean">;
+    type: z.ZodLiteral<"boolean">;
+    defaultValue: z.ZodOptional<z.ZodBoolean>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "boolean";
+    required: boolean;
+    control: "boolean";
+    defaultValue?: boolean | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "boolean";
+    required: boolean;
+    control: "boolean";
+    defaultValue?: boolean | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"radio">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "radio";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "radio";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"inline-radio">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "inline-radio";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "inline-radio";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"select">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "select";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string";
+    required: boolean;
+    control: "select";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"multi-select">;
+    type: z.ZodLiteral<"string[]">;
+    defaultValue: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "multi-select";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "multi-select";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"check">;
+    type: z.ZodLiteral<"string[]">;
+    defaultValue: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "check";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "check";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"inline-check">;
+    type: z.ZodLiteral<"string[]">;
+    defaultValue: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
+    options: z.ZodArray<z.ZodString, "many">;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "inline-check";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    options: string[];
+    type: "string[]";
+    required: boolean;
+    control: "inline-check";
+    defaultValue?: string[] | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"file">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    /** https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */
+    accept: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "file";
+    defaultValue?: string | undefined;
+    accept?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "file";
+    defaultValue?: string | undefined;
+    accept?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"url">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "url";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "url";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"object">;
+    type: z.ZodLiteral<"Record<string, string>">;
+    defaultValue: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "Record<string, string>";
+    required: boolean;
+    control: "object";
+    defaultValue?: Record<string, string> | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "Record<string, string>";
+    required: boolean;
+    control: "object";
+    defaultValue?: Record<string, string> | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"date">;
+    type: z.ZodLiteral<"string">;
+    defaultValue: z.ZodOptional<z.ZodString>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "string";
+    required: boolean;
+    control: "date";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "date";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"action">;
+    type: z.ZodLiteral<"action">;
+    defaultValue: z.ZodOptional<z.ZodUndefined>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "action";
+    required: boolean;
+    control: "action";
+    defaultValue?: undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "action";
+    required: boolean;
+    control: "action";
+    defaultValue?: undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>]>;
+export type PropMeta = z.infer<typeof PropMeta>;

package/lib/types/props.d.ts

@@ -1,37 +1,35 @@
-import type { Instance, Page, Prop } from "@webstudio-is/project-build";
-import type { Asset, Assets } from "@webstudio-is/asset-uploader";
+import type { Instance, Page, Prop, Asset, Assets } from "@webstudio-is/sdk";
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 export type Pages = Map<Page["id"], Page>;
 export declare const getPropsByInstanceId: (props: Map<string, {
-    type: "number";
     value: number;
-    id: string;
+    type: "number";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "string";
     value: string;
-    id: string;
+    type: "string";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "boolean";
     value: boolean;
-    id: string;
+    type: "boolean";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "asset";
     value: string;
-    id: string;
+    type: "asset";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "page";
     value: (string | {
         instanceId: string;
         pageId: string;
@@ -39,83 +37,84 @@ export declare const getPropsByInstanceId: (props: Map<string, {
         instanceId: string;
         pageId: string;
     } | undefined);
-    id: string;
+    type: "page";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "string[]";
     value: string[];
-    id: string;
+    type: "string[]";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "dataSource";
     value: string;
-    id: string;
+    type: "dataSource";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 } | {
-    type: "action";
     value: {
         code: string;
         type: "execute";
         args: string[];
     }[];
-    id: string;
+    type: "action";
     name: string;
+    id: string;
     instanceId: string;
     required?: boolean | undefined;
 }>) => PropsByInstanceId;
 export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, unknown>;
 export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
     type: "font";
-    id: string;
     name: string;
+    format: "ttf" | "woff" | "woff2" | "otf";
     meta: ({
-        weight: number;
-        style: "normal" | "italic" | "oblique";
         family: string;
+        style: "normal" | "italic" | "oblique";
+        weight: number;
     } | {
+        family: string;
         variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            min: number;
-            max: number;
             name: string;
+            min: number;
             default: number;
+            max: number;
         }>>;
-        family: string;
     }) & ({
-        weight: number;
-        style: "normal" | "italic" | "oblique";
         family: string;
+        style: "normal" | "italic" | "oblique";
+        weight: number;
     } | {
+        family: string;
         variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-            min: number;
-            max: number;
             name: string;
+            min: number;
             default: number;
+            max: number;
         }>>;
-        family: string;
     } | undefined);
+    id: string;
+    projectId: string;
     size: number;
     description: string | null;
-    format: "ttf" | "woff" | "woff2" | "otf";
-    projectId: string;
     createdAt: string;
 } | {
     type: "image";
-    id: string;
     name: string;
+    format: string;
     meta: {
-        height: number;
         width: number;
+        height: number;
     };
+    id: string;
+    projectId: string;
     size: number;
     description: string | null;
-    format: string;
-    projectId: string;
     createdAt: string;
 } | undefined;
 export declare const resolveUrlProp: (instanceId: Instance["id"], name: string, { props, pages, assets, }: {
@@ -123,52 +122,52 @@ export declare const resolveUrlProp: (instanceId: Instance["id"], name: string,
     pages: Pages;
     assets: Map<string, {
         type: "font";
-        id: string;
         name: string;
+        format: "ttf" | "woff" | "woff2" | "otf";
         meta: ({
-            weight: number;
-            style: "normal" | "italic" | "oblique";
             family: string;
+            style: "normal" | "italic" | "oblique";
+            weight: number;
         } | {
+            family: string;
             variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                min: number;
-                max: number;
                 name: string;
+                min: number;
                 default: number;
+                max: number;
             }>>;
-            family: string;
         }) & ({
-            weight: number;
-            style: "normal" | "italic" | "oblique";
             family: string;
+            style: "normal" | "italic" | "oblique";
+            weight: number;
         } | {
+            family: string;
             variationAxes: Partial<Record<"wght" | "wdth" | "slnt" | "opsz" | "ital" | "GRAD" | "XTRA" | "XOPQ" | "YOPQ" | "YTLC" | "YTUC" | "YTAS" | "YTDE" | "YTFI", {
-                min: number;
-                max: number;
                 name: string;
+                min: number;
                 default: number;
+                max: number;
             }>>;
-            family: string;
         } | undefined);
+        id: string;
+        projectId: string;
         size: number;
         description: string | null;
-        format: "ttf" | "woff" | "woff2" | "otf";
-        projectId: string;
         createdAt: string;
     } | {
         type: "image";
-        id: string;
         name: string;
+        format: string;
         meta: {
-            height: number;
             width: number;
+            height: number;
         };
+        id: string;
+        projectId: string;
         size: number;
         description: string | null;
-        format: string;
-        projectId: string;
         createdAt: string;
-    } | undefined>;
+    }>;
 }) => {
     type: "page";
     page: Page;