@webstudio-is/react-sdk 0.68.0 → 0.69.0

package/lib/types/index.d.ts

@@ -5,6 +5,6 @@ export * from "./pubsub";
 export * from "./app";
 export * from "./components/components";
 export * from "./components/components-utils";
-export { customComponents, customComponentMetas, customComponentPropsMetas, } from "./app/custom-components";
-export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, componentCategories, stateCategories, } from "./components/component-meta";
+export { type WsComponentPropsMeta, type WsComponentMeta, type ComponentState, type PresetStyle, componentCategories, stateCategories, } from "./components/component-meta";
 export * from "./embed-template";
+export { usePropUrl, getInstanceIdFromComponentProps } from "./props";

package/lib/types/props.d.ts

@@ -3,55 +3,61 @@ import type { Asset, Assets } from "@webstudio-is/asset-uploader";
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 export type Pages = Map<Page["id"], Page>;
 export declare const getPropsByInstanceId: (props: Map<string, {
-    required?: boolean | undefined;
     name: string;
     type: "number";
     value: number;
     id: string;
     instanceId: string;
-} | {
     required?: boolean | undefined;
+} | {
     name: string;
     type: "string";
     value: string;
     id: string;
     instanceId: string;
-} | {
     required?: boolean | undefined;
+} | {
     name: string;
     type: "boolean";
     value: boolean;
     id: string;
     instanceId: string;
-} | {
     required?: boolean | undefined;
+} | {
     name: string;
     type: "asset";
     value: string;
     id: string;
     instanceId: string;
-} | {
     required?: boolean | undefined;
+} | {
     name: string;
     type: "page";
-    value: string | {
+    value: (string | {
         instanceId: string;
         pageId: string;
-    };
+    }) & (string | {
+        instanceId: string;
+        pageId: string;
+    } | undefined);
     id: string;
     instanceId: string;
-} | {
     required?: boolean | undefined;
+} | {
     name: string;
     type: "string[]";
     value: string[];
     id: string;
     instanceId: string;
+    required?: boolean | undefined;
 }>) => PropsByInstanceId;
-export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, string | number | boolean | string[] | {
+export declare const useInstanceProps: (instanceId: Instance["id"]) => Record<string, number | boolean | string[] | ((string | {
+    instanceId: string;
+    pageId: string;
+}) & (string | {
     instanceId: string;
     pageId: string;
-}>;
+} | undefined))>;
 export declare const usePropAsset: (instanceId: Instance["id"], name: string) => {
     name: string;
     type: "font";
@@ -60,9 +66,8 @@ export declare const usePropAsset: (instanceId: Instance["id"], name: string) =>
     projectId: string;
     size: number;
     description: string | null;
-    location: "FS" | "REMOTE";
     createdAt: string;
-    meta: {
+    meta: ({
         style: "normal" | "italic" | "oblique";
         weight: number;
         family: string;
@@ -74,7 +79,19 @@ export declare const usePropAsset: (instanceId: Instance["id"], name: string) =>
             max: number;
         }>>;
         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", {
+            name: string;
+            min: number;
+            default: number;
+            max: number;
+        }>>;
+        family: string;
+    } | undefined);
 } | {
     name: string;
     type: "image";
@@ -83,7 +100,6 @@ export declare const usePropAsset: (instanceId: Instance["id"], name: string) =>
     projectId: string;
     size: number;
     description: string | null;
-    location: "FS" | "REMOTE";
     createdAt: string;
     meta: {
         width: number;
@@ -101,9 +117,8 @@ export declare const resolveUrlProp: (instanceId: Instance["id"], name: string,
         projectId: string;
         size: number;
         description: string | null;
-        location: "FS" | "REMOTE";
         createdAt: string;
-        meta: {
+        meta: ({
             style: "normal" | "italic" | "oblique";
             weight: number;
             family: string;
@@ -115,7 +130,19 @@ export declare const resolveUrlProp: (instanceId: Instance["id"], name: string,
                 max: number;
             }>>;
             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", {
+                name: string;
+                min: number;
+                default: number;
+                max: number;
+            }>>;
+            family: string;
+        } | undefined);
     } | {
         name: string;
         type: "image";
@@ -124,7 +151,6 @@ export declare const resolveUrlProp: (instanceId: Instance["id"], name: string,
         projectId: string;
         size: number;
         description: string | null;
-        location: "FS" | "REMOTE";
         createdAt: string;
         meta: {
             width: number;

package/lib/types/tree/create-elements-tree.d.ts

@@ -2,13 +2,12 @@ import { type ComponentProps } from "react";
 import type { ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Instance, Instances } from "@webstudio-is/project-build";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-export declare const createElementsTree: ({ renderer, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+export declare const createElementsTree: ({ renderer, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, components, }: {
     renderer?: "canvas" | undefined;
     instances: Map<string, {
-        label?: string | undefined;
         type: "instance";
         id: string;
         component: string;
@@ -19,11 +18,12 @@ export declare const createElementsTree: ({ renderer, instances, rootInstanceId,
             type: "id";
             value: string;
         })[];
+        label?: string | undefined;
     }>;
     rootInstanceId: Instance["id"];
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;
     Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
-    getComponent: GetComponent;
+    components: Components;
 }) => JSX.Element | null;

package/lib/types/tree/root.d.ts

@@ -2,9 +2,8 @@ import type { ComponentProps } from "react";
 import type { Build, Page } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { WebstudioComponent } from "./webstudio-component";
-import { registerComponents } from "../components";
 import { type Params } from "../app/params";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 export type Data = {
     page: Page;
     pages: Array<Page>;
@@ -18,8 +17,7 @@ export type RootPropsData = Omit<Data, "build"> & {
 type RootProps = {
     data: RootPropsData;
     Component?: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
-    customComponents?: Parameters<typeof registerComponents>[0];
-    getComponent: GetComponent;
+    components: Components;
 };
-export declare const InstanceRoot: ({ data, Component, customComponents, getComponent, }: RootProps) => JSX.Element | null;
+export declare const InstanceRoot: ({ data, Component, components, }: RootProps) => JSX.Element | null;
 export {};

package/lib/types/tree/webstudio-component.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
 import type { Instance } from "@webstudio-is/project-build";
-import type { GetComponent } from "../components/components-utils";
+import type { Components } from "../components/components-utils";
 export declare const renderWebstudioComponentChildren: (children: Array<JSX.Element | string> | undefined) => Array<JSX.Element | string | Array<JSX.Element | string>> | undefined;
 type WebstudioComponentProps = {
     instance: Instance;
     instanceSelector: Instance["id"][];
     children: Array<JSX.Element | string>;
-    getComponent: GetComponent;
+    components: Components;
 };
-export declare const WebstudioComponent: ({ instance, instanceSelector, children, getComponent, ...rest }: WebstudioComponentProps) => JSX.Element;
+export declare const WebstudioComponent: ({ instance, instanceSelector, children, components, ...rest }: WebstudioComponentProps) => JSX.Element;
 export declare const idAttribute = "data-ws-id";
 export declare const componentAttribute = "data-ws-component";
 export declare const collapsedAttribute = "data-ws-collapsed";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.68.0",
+  "version": "0.69.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,7 +16,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.0.3",
-    "zod": "^3.19.1",
+    "type-fest": "^3.7.1",
+    "zod": "^3.21.4",
     "@webstudio-is/jest-config": "^1.0.6",
     "@webstudio-is/scripts": "^0.0.0",
     "@webstudio-is/storybook-config": "^0.0.0",
@@ -36,23 +37,33 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.68.0",
-    "@webstudio-is/css-data": "^0.68.0",
-    "@webstudio-is/css-engine": "^0.68.0",
-    "@webstudio-is/css-vars": "^0.68.0",
-    "@webstudio-is/fonts": "^0.68.0",
-    "@webstudio-is/form-handlers": "^0.68.0",
-    "@webstudio-is/generate-arg-types": "^0.68.0",
-    "@webstudio-is/icons": "^0.68.0",
-    "@webstudio-is/image": "^0.68.0",
-    "@webstudio-is/prisma-client": "^0.68.0",
-    "@webstudio-is/project-build": "^0.68.0"
+    "@webstudio-is/asset-uploader": "^0.69.0",
+    "@webstudio-is/css-data": "^0.69.0",
+    "@webstudio-is/css-engine": "^0.69.0",
+    "@webstudio-is/css-vars": "^0.69.0",
+    "@webstudio-is/fonts": "^0.69.0",
+    "@webstudio-is/form-handlers": "^0.69.0",
+    "@webstudio-is/generate-arg-types": "^0.69.0",
+    "@webstudio-is/icons": "^0.69.0",
+    "@webstudio-is/image": "^0.69.0",
+    "@webstudio-is/prisma-client": "^0.69.0",
+    "@webstudio-is/project-build": "^0.69.0"
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "import": "./lib/index.js",
       "require": "./lib/cjs/index.js"
+    },
+    "./components": {
+      "source": "./src/components/components.ts",
+      "import": "./lib/components/components.js",
+      "require": "./lib/cjs/components/components.js"
+    },
+    "./css-normalize": {
+      "source": "./src/css/normalize.ts",
+      "import": "./lib/css/normalize.js",
+      "require": "./lib/cjs/css/normalize.js"
     }
   },
   "types": "lib/types/index.d.ts",

package/src/components/__generated__/image.props.ts

@@ -4,7 +4,7 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  alt: { required: false, control: "text", type: "string", defaultValue: "" },
+  alt: { required: false, control: "text", type: "string" },
   crossOrigin: {
     required: false,
     control: "radio",
@@ -41,7 +41,7 @@ export const props: Record<string, PropMeta> = {
     ],
   },
   sizes: { required: false, control: "text", type: "string" },
-  src: { required: false, control: "text", type: "string", defaultValue: "" },
+  src: { required: false, control: "text", type: "string" },
   srcSet: { required: false, control: "text", type: "string" },
   useMap: { required: false, control: "text", type: "string" },
   width: { required: false, control: "number", type: "number" },
@@ -481,4 +481,7 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  quality: { required: false, control: "number", type: "number" },
+  loader: { required: true, control: "text", type: "string" },
+  optimize: { required: false, control: "boolean", type: "boolean" },
 };

package/src/components/__generated__/text-block.props.ts

@@ -440,4 +440,11 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
+  tag: {
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "div",
+    options: ["div", "figcaption", "span"],
+  },
 };

package/src/components/blockquote.ws.tsx

@@ -60,13 +60,20 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Blockquote",
   icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Blockquote you can edit" }],
+  template: [
+    {
+      type: "instance",
+      component: "Blockquote",
+      children: [{ type: "text", value: "Blockquote you can edit" }],
+    },
+  ],
+  order: 3,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/box.tsx

@@ -24,7 +24,7 @@ type Props = ComponentProps<typeof defaultTag> & {
 
 export const Box = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag as string, { ...props, ref });
+    return createElement(tag, { ...props, ref });
   }
 );
 

package/src/components/box.ws.ts

@@ -43,6 +43,7 @@ export const meta: WsComponentMeta = {
   icon: BoxIcon,
   states: defaultStates,
   presetStyle,
+  order: 0,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/button.ws.tsx

@@ -16,6 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Button"],
   label: "Button",
   icon: ButtonElementIcon,
   presetStyle,
@@ -24,6 +25,7 @@ export const meta: WsComponentMeta = {
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" },
   ],
+  order: 1,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/checkbox-field.ws.tsx

@@ -23,14 +23,20 @@ export const meta: WsComponentMeta = {
   icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
-  children: [
-    { type: "instance", component: "Checkbox", props: [], children: [] },
+  template: [
     {
       type: "instance",
-      component: "TextBlock",
-      label: "Checkbox Label",
-      props: [],
-      children: [{ type: "text", value: "Checkbox" }],
+      component: "CheckboxField",
+      children: [
+        { type: "instance", component: "Checkbox", children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Checkbox Label",
+          props: [],
+          children: [{ type: "text", value: "Checkbox" }],
+        },
+      ],
     },
   ],
 };

package/src/components/checkbox.ws.tsx

@@ -24,6 +24,7 @@ export const meta: WsComponentMeta = {
   label: "Checkbox Input",
   icon: CheckboxCheckedIcon,
   presetStyle,
+  order: 6,
   states: [
     ...defaultStates,
     { selector: ":checked", label: "Checked" },

package/src/components/code-text.ws.tsx

@@ -42,7 +42,14 @@ export const meta: WsComponentMeta = {
   icon: CodeTextIcon,
   states: defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Code you can edit" }],
+  template: [
+    {
+      type: "instance",
+      component: "CodeText",
+      children: [{ type: "text", value: "Code you can edit" }],
+    },
+  ],
+  order: 8,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/component-meta.ts

@@ -18,7 +18,7 @@ export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
 
 export const componentCategories = [
   "general",
-  "typography",
+  "text",
   "media",
   "forms",
 ] as const;
@@ -55,12 +55,15 @@ const WsComponentMeta = z.object({
     "rich-text",
     "rich-text-child",
   ]),
-  acceptedParents: z.optional(z.array(z.string())),
+  requiredAncestors: z.optional(z.array(z.string())),
+  invalidAncestors: z.optional(z.array(z.string())),
+  stylable: z.optional(z.boolean()),
   label: z.string(),
   icon: z.string(),
   presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),
-  children: z.optional(WsEmbedTemplate),
+  template: z.optional(WsEmbedTemplate),
+  order: z.number().optional(),
 });
 
 export type WsComponentMeta = Omit<

package/src/components/components-utils.ts

@@ -1,11 +1,6 @@
-import * as components from "./components";
-import { registeredComponents } from "./index";
 import { componentAttribute, idAttribute } from "../tree";
 
-export type ComponentName = keyof typeof components;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyComponent = React.ForwardRefExoticComponent<
+export type AnyComponent = React.ForwardRefExoticComponent<
   Omit<
     React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
     "ref"
@@ -15,28 +10,4 @@ type AnyComponent = React.ForwardRefExoticComponent<
   } & React.RefAttributes<HTMLElement>
 >;
 
-/**
- * Now used only in builder app
- * @todo Consider using the same approach in the builder app as in the published apps . A dynamic import is needed
- */
-export const getComponent = (name: string): undefined | AnyComponent => {
-  return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[name as ComponentName] as never)
-    : (components[name as ComponentName] as never);
-};
-
-/**
- * The application imports only the components it uses, then pass them to createGetComponent i.e.
- * getComponent = createGetComponent({ Box, BlaBla })
- * <RootInstance data={data} getComponent={getComponent} />
- * see example /packages/sdk-size-test/app/routes/$.tsx
- **/
-export const createGetComponent = (comps: Partial<typeof components>) => {
-  return (name: string): undefined | AnyComponent => {
-    return registeredComponents != null && name in registeredComponents
-      ? (registeredComponents[name as ComponentName] as never)
-      : (comps[name as ComponentName] as never);
-  };
-};
-
-export type GetComponent = typeof getComponent;
+export type Components = Map<string, AnyComponent>;

package/src/components/form.ws.tsx

@@ -23,33 +23,40 @@ export const meta: WsComponentMeta = {
   icon: FormIcon,
   states: defaultStates,
   presetStyle,
-  children: [
+  order: 0,
+  template: [
     {
       type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Name" }],
-    },
-    {
-      type: "instance",
-      component: "Input",
-      props: [{ type: "string", name: "name", value: "name" }],
-      children: [],
-    },
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Email" }],
-    },
-    {
-      type: "instance",
-      component: "Input",
-      props: [{ type: "string", name: "name", value: "email" }],
-      children: [],
-    },
-    {
-      type: "instance",
-      component: "Button",
-      children: [{ type: "text", value: "Submit" }],
+      component: "Form",
+      children: [
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Name" }],
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "name" }],
+          children: [],
+        },
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Email" }],
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "email" }],
+          children: [],
+        },
+        {
+          type: "instance",
+          component: "Button",
+          children: [{ type: "text", value: "Submit" }],
+        },
+      ],
     },
   ],
 };

package/src/components/fragment.ws.ts

@@ -4,6 +4,7 @@ export const meta: WsComponentMeta = {
   type: "container",
   label: "Fragment",
   icon: "",
+  stylable: false,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/heading.tsx

@@ -13,7 +13,7 @@ type Props = ComponentProps<typeof defaultTag> & {
 
 export const Heading = forwardRef<ElementRef<typeof defaultTag>, Props>(
   ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag as string, { ...props, ref });
+    return createElement(tag, { ...props, ref });
   }
 );
 

package/src/components/heading.ws.tsx

@@ -22,13 +22,20 @@ const presetStyle = {
 } satisfies PresetStyle<HeadingTags>;
 
 export const meta: WsComponentMeta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Heading",
   icon: HeadingIcon,
-  children: [{ type: "text", value: "Heading you can edit" }],
   states: defaultStates,
   presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Heading",
+      children: [{ type: "text", value: "Heading you can edit" }],
+    },
+  ],
+  order: 1,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/html-embed.ws.ts

@@ -7,6 +7,8 @@ export const meta: WsComponentMeta = {
   type: "embed",
   label: "HTML Embed",
   icon: EmbedIcon,
+  stylable: false,
+  order: 7,
 };
 
 export const propsMeta: WsComponentPropsMeta = {