@webstudio-is/react-sdk 0.7.1 → 0.7.3

package/lib/cjs/tree/wrapper-component.cjs

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.idAttribute = exports.WrapperComponent = exports.renderWrapperComponentChildren = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const components = __importStar(require("../components"));
+const use_user_props_1 = require("../user-props/use-user-props");
+const renderText = (text) => {
+    const lines = text.split("\n");
+    return lines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [line, index < lines.length - 1 ? (0, jsx_runtime_1.jsx)("br", {}) : null] }, index)));
+};
+const renderWrapperComponentChildren = (children) => {
+    // Some elements like input can't have children
+    // @todo needs to be made impossible to drag element into input
+    if (children === undefined || children.length === 0)
+        return;
+    return children.map((child) => {
+        return typeof child === "string" ? renderText(child) : child;
+    });
+};
+exports.renderWrapperComponentChildren = renderWrapperComponentChildren;
+const WrapperComponent = ({ instance, onChangeChildren, // prevent it from passing to sdk component
+children, ...rest }) => {
+    const { Component } = components[instance.component];
+    const userProps = (0, use_user_props_1.useUserProps)(instance.id);
+    const props = { ...userProps, ...rest, [exports.idAttribute]: instance.id };
+    return ((0, jsx_runtime_1.jsx)(Component, { ...props, children: (0, exports.renderWrapperComponentChildren)(children) }));
+};
+exports.WrapperComponent = WrapperComponent;
+exports.idAttribute = "data-ws-id";

package/lib/cjs/tree/wrapper-component.d.ts

@@ -0,0 +1,12 @@
+import type { Instance } from "../db";
+import type { OnChangeChildren } from "./create-elements-tree";
+export declare const renderWrapperComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
+declare type WrapperComponentProps = {
+    instance: Instance;
+    children: Array<JSX.Element | string>;
+    onChangeChildren?: OnChangeChildren;
+};
+export declare const WrapperComponent: ({ instance, onChangeChildren, children, ...rest }: WrapperComponentProps) => JSX.Element;
+export declare const idAttribute = "data-ws-id";
+export {};
+//# sourceMappingURL=wrapper-component.d.ts.map

package/lib/cjs/tree/wrapper-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapper-component.d.ts","sourceRoot":"","sources":["../../../src/tree/wrapper-component.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY/D,eAAO,MAAM,8BAA8B,aAC/B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,SAAS,KAChD,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,GAAG,SAO9D,CAAC;AAEF,aAAK,qBAAqB,GAAG;IAC3B,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,sDAK1B,qBAAqB,gBAOvB,CAAC;AAEF,eAAO,MAAM,WAAW,eAAe,CAAC"}

package/lib/cjs/user-props/all-user-props.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAllUserProps = exports.allUserPropsContainer = void 0;
+const react_1 = require("react");
+const react_nano_state_1 = require("react-nano-state");
+exports.allUserPropsContainer = (0, react_nano_state_1.createValueContainer)({});
+const useAllUserProps = (initialUserProps) => {
+    // @todo ssr workaround for https://github.com/webstudio-is/webstudio-designer/issues/213
+    const ref = (0, react_1.useRef)(false);
+    if (ref.current === false && initialUserProps !== undefined) {
+        const propsMap = {};
+        for (const props of initialUserProps) {
+            propsMap[props.instanceId] = props;
+        }
+        //We don't need to trigger rerender when setting the initial value
+        exports.allUserPropsContainer.value = propsMap;
+        ref.current = true;
+    }
+    return (0, react_nano_state_1.useValue)(exports.allUserPropsContainer);
+};
+exports.useAllUserProps = useAllUserProps;

package/lib/cjs/user-props/all-user-props.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react-nano-state" />
+import type { InstanceProps, Instance } from "../db";
+export declare type AllUserProps = {
+    [id: Instance["id"]]: InstanceProps;
+};
+export declare const allUserPropsContainer: import("react-nano-state").ValueContainer<AllUserProps>;
+export declare const useAllUserProps: (initialUserProps?: Array<InstanceProps>) => [AllUserProps, import("react-nano-state").Dispatch<AllUserProps>];
+//# sourceMappingURL=all-user-props.d.ts.map

package/lib/cjs/user-props/all-user-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"all-user-props.d.ts","sourceRoot":"","sources":["../../../src/user-props/all-user-props.ts"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,oBAAY,YAAY,GAAG;IAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,GAAG,aAAa,CAAA;CAAE,CAAC;AAEnE,eAAO,MAAM,qBAAqB,yDAAyC,CAAC;AAE5E,eAAO,MAAM,eAAe,sBAAuB,MAAM,aAAa,CAAC,sEAatE,CAAC"}

package/lib/cjs/user-props/index.cjs

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./all-user-props"), exports);
+__exportStar(require("./use-user-props"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./schema"), exports);

package/lib/cjs/user-props/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./all-user-props";
+export * from "./use-user-props";
+export * from "./types";
+export * from "./schema";
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/user-props/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/user-props/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/lib/cjs/user-props/schema.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserUserProps = exports.UserDbProps = void 0;
+const zod_1 = require("zod");
+const UserPropDb = zod_1.z.object({
+    id: zod_1.z.string(),
+    prop: zod_1.z.string(),
+    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
+    assetId: zod_1.z.optional(zod_1.z.string()),
+    required: zod_1.z.optional(zod_1.z.boolean()),
+});
+exports.UserDbProps = zod_1.z.array(UserPropDb);
+const UserUserProp = zod_1.z
+    .object({
+    id: zod_1.z.string(),
+    prop: zod_1.z.string(),
+    value: zod_1.z.union([zod_1.z.string(), zod_1.z.boolean()]),
+    // We are not interested in Props data does any other props on asset exists
+    asset: zod_1.z.optional(zod_1.z.object({ id: zod_1.z.string() })),
+    required: zod_1.z.optional(zod_1.z.boolean()),
+})
+    .transform(({ id, prop, value, asset, required }) => {
+    // Check with infer that we are transforming to UserPropDb
+    const res = {
+        id,
+        prop,
+        value,
+        assetId: asset?.id,
+        required,
+    };
+    return res;
+});
+exports.UserUserProps = zod_1.z.array(UserUserProp);

package/lib/cjs/user-props/schema.d.ts

@@ -0,0 +1,72 @@
+import { z } from "zod";
+import type { Asset } from "@webstudio-is/asset-uploader";
+export declare const UserDbProps: z.ZodArray<z.ZodObject<{
+    id: z.ZodString;
+    prop: z.ZodString;
+    value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    assetId: z.ZodOptional<z.ZodString>;
+    required: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    assetId?: string | undefined;
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    assetId?: string | undefined;
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>, "many">;
+export declare const UserUserProps: z.ZodArray<z.ZodEffects<z.ZodObject<{
+    id: z.ZodString;
+    prop: z.ZodString;
+    value: z.ZodUnion<[z.ZodString, z.ZodBoolean]>;
+    asset: z.ZodOptional<z.ZodObject<{
+        id: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        id: string;
+    }, {
+        id: string;
+    }>>;
+    required: z.ZodOptional<z.ZodBoolean>;
+}, "strip", z.ZodTypeAny, {
+    required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>, {
+    assetId?: string | undefined;
+    required?: boolean | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}, {
+    required?: boolean | undefined;
+    asset?: {
+        id: string;
+    } | undefined;
+    value: string | boolean;
+    id: string;
+    prop: string;
+}>, "many">;
+export declare type UserProp = {
+    id: string;
+    prop: string;
+    value: string | boolean;
+    asset?: Asset;
+    required?: boolean | undefined;
+};
+//# sourceMappingURL=schema.d.ts.map

package/lib/cjs/user-props/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/user-props/schema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAU1D,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;WAAsB,CAAC;AAuB/C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAAwB,CAAC;AAEnD,oBAAY,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,CAAC"}

package/lib/cjs/user-props/types.cjs

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

package/lib/cjs/user-props/types.d.ts

@@ -0,0 +1,13 @@
+import type { InstanceProps, Instance } from "../db";
+import { UserProp } from "./schema";
+export declare type UserPropsUpdates = {
+    treeId: InstanceProps["treeId"];
+    propsId: InstanceProps["id"];
+    instanceId: Instance["id"];
+    updates: Array<UserProp>;
+};
+export declare type DeleteProp = {
+    instanceId: Instance["id"];
+    propId: UserProp["id"];
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/cjs/user-props/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/user-props/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,oBAAY,gBAAgB,GAAG;IAC7B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;CAC1B,CAAC;AAEF,oBAAY,UAAU,GAAG;IACvB,UAAU,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;CACxB,CAAC"}

package/lib/cjs/user-props/use-user-props.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserProps = void 0;
+const react_1 = require("react");
+const all_user_props_1 = require("./all-user-props");
+/**
+ * User props mapped in prop:value format,
+ * up to date with props panel.
+ */
+const useUserProps = (instanceId) => {
+    const [allUserProps] = (0, all_user_props_1.useAllUserProps)();
+    const propsData = allUserProps[instanceId];
+    const initialUserProps = (0, react_1.useMemo)(() => {
+        if (propsData === undefined)
+            return {};
+        return propsData.props.reduce((props, { prop, value }) => {
+            props[prop] = value;
+            return props;
+        }, {});
+    }, [propsData]);
+    const [props, setProps] = (0, react_1.useState)(initialUserProps);
+    (0, react_1.useEffect)(() => {
+        if (propsData == undefined)
+            return;
+        const nextProps = {};
+        for (const prop of propsData.props) {
+            nextProps[prop.prop] = prop.value;
+        }
+        setProps(nextProps);
+    }, [propsData]);
+    return props;
+};
+exports.useUserProps = useUserProps;

package/lib/cjs/user-props/use-user-props.d.ts

@@ -0,0 +1,12 @@
+import { type Instance } from "../db";
+import { type UserProp } from "./schema";
+declare type UserProps = {
+    [prop: UserProp["prop"]]: UserProp["value"];
+};
+/**
+ * User props mapped in prop:value format,
+ * up to date with props panel.
+ */
+export declare const useUserProps: (instanceId: Instance["id"]) => UserProps;
+export {};
+//# sourceMappingURL=use-user-props.d.ts.map

package/lib/cjs/user-props/use-user-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-user-props.d.ts","sourceRoot":"","sources":["../../../src/user-props/use-user-props.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGzC,aAAK,SAAS,GAAG;IAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;CAAE,CAAC;AAEjE;;;GAGG;AACH,eAAO,MAAM,YAAY,eAAgB,QAAQ,CAAC,IAAI,CAAC,cAwBtD,CAAC"}

package/lib/components/body.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Body = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 const defaultTag = "body";
-exports.Body = (0, react_1.forwardRef)((props, ref) => (0, jsx_runtime_1.jsx)("body", { ...props, ref: ref }));
-exports.Body.displayName = "Body";
+export const Body = forwardRef((props, ref) => _jsx("body", { ...props, ref: ref }));
+Body.displayName = "Body";