@webstudio-is/react-sdk 0.191.4 → 0.191.5

package/lib/types/embed-template.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/hook.d.ts

@@ -0,0 +1,34 @@
+import type { Instance, Prop } from "@webstudio-is/sdk";
+import type { IndexesWithinAncestors } from "./instance-utils";
+export type InstanceData = {
+    id: Instance["id"];
+    instanceKey: string;
+    component: Instance["component"];
+};
+/**
+ * Hooks are subscriptions to builder events
+ * with limited way to interact with it.
+ * Called independently from components.
+ */
+export type HookContext = {
+    indexesWithinAncestors: IndexesWithinAncestors;
+    getPropValue: (instanceData: InstanceData, propName: Prop["name"]) => unknown;
+    setMemoryProp: (instanceData: InstanceData, propName: Prop["name"], value: unknown) => void;
+};
+export type InstancePath = InstanceData[];
+type NavigatorEvent = {
+    /**
+     * List of instances from selected to the root
+     */
+    instancePath: InstancePath;
+};
+export type Hook = {
+    onNavigatorSelect?: (context: HookContext, event: NavigatorEvent) => void;
+    onNavigatorUnselect?: (context: HookContext, event: NavigatorEvent) => void;
+};
+/**
+ * Find closest matching instance by component name
+ * by lookup in instance path
+ */
+export declare const getClosestInstance: (instancePath: InstancePath, currentInstance: InstanceData, closestComponent: InstanceData["component"]) => InstanceData | undefined;
+export {};

package/lib/types/hook.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./remix";
+export * from "./css/index";
+export * from "./core-components";
+export * from "./components/components-utils";
+export { PropMeta } from "./prop-meta";
+export { type WsComponentPropsMeta, type ComponentState, type PresetStyle, WsComponentMeta, componentCategories, stateCategories, defaultStates, } from "./components/component-meta";
+export * from "./embed-template";
+export * from "./props";
+export type * from "./context";
+export { getIndexesWithinAncestors } from "./instance-utils";
+export type * from "./hook";
+export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";

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

@@ -0,0 +1,4 @@
+import type { Instance, Instances } 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: Instances, rootIds: Instance["id"][]) => IndexesWithinAncestors;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,434 @@
+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">;
+    language: z.ZodUnion<[z.ZodLiteral<"html">, z.ZodLiteral<"markdown">]>;
+    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;
+    language: "html" | "markdown";
+    control: "code";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    language: "html" | "markdown";
+    control: "code";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"codetext">;
+    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: "codetext";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "codetext";
+    defaultValue?: string | 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<"json">;
+    type: z.ZodLiteral<"json">;
+    defaultValue: z.ZodOptional<z.ZodUnknown>;
+    label: z.ZodOptional<z.ZodString>;
+    description: z.ZodOptional<z.ZodString>;
+    required: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    type: "json";
+    required: boolean;
+    control: "json";
+    defaultValue?: unknown;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "json";
+    required: boolean;
+    control: "json";
+    defaultValue?: unknown;
+    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;
+}>, z.ZodObject<{
+    control: z.ZodLiteral<"textContent">;
+    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: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}, {
+    type: "string";
+    required: boolean;
+    control: "textContent";
+    defaultValue?: string | undefined;
+    label?: string | undefined;
+    description?: string | undefined;
+}>]>;
+export type PropMeta = z.infer<typeof PropMeta>;

package/lib/types/props.d.ts

@@ -0,0 +1,104 @@
+import { type Prop, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
+export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingImageAssets, pages, source, }: {
+    props: Prop[];
+    assetBaseUrl: string;
+    assets: Assets;
+    uploadingImageAssets: ImageAsset[];
+    pages: Pages;
+    source: "canvas" | "prebuild";
+}) => ({
+    value: number;
+    type: "number";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "string";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: boolean;
+    type: "boolean";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    type: "json";
+    name: string;
+    id: string;
+    instanceId: string;
+    value?: unknown;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "asset";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: (string | {
+        instanceId: string;
+        pageId: string;
+    }) & (string | {
+        instanceId: string;
+        pageId: string;
+    } | undefined);
+    type: "page";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string[];
+    type: "string[]";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "parameter";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "resource";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: string;
+    type: "expression";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+} | {
+    value: {
+        code: string;
+        type: "execute";
+        args: string[];
+    }[];
+    type: "action";
+    name: string;
+    id: string;
+    instanceId: string;
+    required?: boolean | undefined;
+})[];
+export declare const idAttribute: "data-ws-id";
+export declare const selectorIdAttribute: "data-ws-selector";
+export declare const componentAttribute: "data-ws-component";
+export declare const showAttribute: "data-ws-show";
+export declare const indexAttribute: "data-ws-index";
+export declare const collapsedAttribute: "data-ws-collapsed";
+export declare const textContentAttribute: "data-ws-text-content";
+export declare const isAttributeNameSafe: (attributeName: string) => boolean;

package/lib/types/props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/remix.d.ts

@@ -0,0 +1,20 @@
+/**
+ * transforms url pattern subset to remix route format
+ *
+ * /:name/ -> .$name. - named dynamic segment
+ * /:name?/ -> .($name). - optional dynamic segment
+ * /* -> .$ - splat in the end of pattern
+ * /:name* -> .$ - named splat which gets specified name at runtime
+ *
+ */
+export declare const generateRemixRoute: (pathname: string) => string;
+/**
+ * generates a function to convert remix params to compatible with url pattern groups
+ *
+ * for /:name* pattern
+ * params["*"] is replaced with params["name"]
+ *
+ * for /* pattern
+ * params["*"] is replaced with params[0]
+ */
+export declare const generateRemixParams: (pathname: string) => string;

package/lib/types/remix.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/types/runtime.d.ts

@@ -0,0 +1,4 @@
+export * from "./context";
+export * from "./hook";
+export * from "./variable-state";
+export declare const getIndexWithinAncestorFromComponentProps: (props: Record<string, unknown>) => string | undefined;

package/lib/types/variable-state.d.ts

@@ -0,0 +1,2 @@
+import { type Dispatch, type SetStateAction } from "react";
+export declare const useVariableState: <S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.191.4",
+  "version": "0.191.5",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -26,11 +26,11 @@
     "html-tags": "^4.0.0",
     "nanoid": "^5.0.8",
     "title-case": "^4.3.2",
-    "@webstudio-is/css-engine": "0.191.4",
-    "@webstudio-is/fonts": "0.191.4",
-    "@webstudio-is/image": "0.191.4",
-    "@webstudio-is/sdk": "0.191.4",
-    "@webstudio-is/icons": "^0.191.4"
+    "@webstudio-is/fonts": "0.191.5",
+    "@webstudio-is/icons": "^0.191.5",
+    "@webstudio-is/image": "0.191.5",
+    "@webstudio-is/sdk": "0.191.5",
+    "@webstudio-is/css-engine": "0.191.5"
   },
   "exports": {
     ".": {