@webstudio-is/react-sdk 0.64.0 → 0.66.0

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

@@ -1,8 +1,11 @@
-import type { forwardRef } from "react";
+/// <reference types="react" />
 import * as components from "./components";
+import { componentAttribute, idAttribute } from "../tree";
 export type ComponentName = keyof typeof components;
-export declare const getComponentNames: () => ComponentName[];
-type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
+type AnyComponent = React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    [componentAttribute]: string;
+    [idAttribute]: string;
+} & 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

package/lib/types/components/components.d.ts

@@ -7,6 +7,7 @@
  */
 export { Slot } from "./slot";
 export { Fragment } from "./fragment";
+export { Html } from "./html";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";

package/lib/types/components/html.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    code: string;
+    executeScriptInCanvas: boolean;
+};
+export declare const Html: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/types/components/html.stories.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<{
+    code: string;
+    executeScriptInCanvas: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>>;
+export default _default;
+export declare const Html: ComponentStory<import("react").ForwardRefExoticComponent<{
+    code: string;
+    executeScriptInCanvas: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>>;

package/lib/types/components/html.ws.d.ts

@@ -0,0 +1,3 @@
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+export declare const meta: WsComponentMeta;
+export declare const propsMeta: WsComponentPropsMeta;

package/lib/types/components/index.d.ts

@@ -1,9 +1,9 @@
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import type { ComponentName } from "./components-utils";
+export declare const defaultMetas: Record<string, WsComponentMeta>;
 export declare const getComponentMeta: (name: string) => WsComponentMeta | undefined;
 export declare const registerComponentMetas: (overrides: Record<string, Partial<WsComponentMeta>>) => void;
-export declare const getComponentPropsMeta: (name: string) => WsComponentPropsMeta | undefined;
-export declare const registerComponentPropsMetas: (metas: Record<string, WsComponentPropsMeta>) => void;
+export declare const defaultPropsMetas: Record<string, WsComponentPropsMeta>;
 type RegisteredComponents = Partial<{
     [name in ComponentName]: {};
 }>;

package/lib/types/context.d.ts

@@ -3,6 +3,7 @@ import { type ReadableAtom } from "nanostores";
 import type { Assets } from "@webstudio-is/asset-uploader";
 import type { Pages, PropsByInstanceId } from "./props";
 export declare const ReactSdkContext: import("react").Context<{
+    renderer?: "canvas" | undefined;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;

package/lib/types/css/css.d.ts

@@ -1,11 +1,13 @@
 import { type TransformValue } from "@webstudio-is/css-engine";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import type { Build } from "@webstudio-is/project-build";
+import type { WsComponentMeta } from "../components/component-meta";
 type Data = {
     assets: Asset[];
     breakpoints?: Build["breakpoints"];
     styles?: Build["styles"];
     styleSourceSelections?: Build["styleSourceSelections"];
+    componentMetas: Map<string, WsComponentMeta>;
 };
 type CssOptions = {
     assetBaseUrl: string;

package/lib/types/css/presets.d.ts

@@ -1,2 +1,3 @@
 import type { Styles } from "./normalize";
 export declare const borders: Styles;
+export declare const outline: Styles;

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

@@ -1436,6 +1436,7 @@ export type EmbedTemplateStyleDecl = z.infer<typeof EmbedTemplateStyleDecl>;
 export type EmbedTemplateInstance = {
     type: "instance";
     component: string;
+    label?: string;
     props?: EmbedTemplateProp[];
     styles?: EmbedTemplateStyleDecl[];
     children: Array<EmbedTemplateInstance | EmbedTemplateText>;

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

@@ -5,7 +5,8 @@ import type { Instance, Instances } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import type { Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
-export declare const createElementsTree: ({ instances, rootInstanceId, sandbox, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+export declare const createElementsTree: ({ renderer, instances, rootInstanceId, propsByInstanceIdStore, assetsStore, pagesStore, Component, getComponent, }: {
+    renderer?: "canvas" | undefined;
     instances: Map<string, {
         label?: string | undefined;
         type: "instance";
@@ -20,7 +21,6 @@ export declare const createElementsTree: ({ instances, rootInstanceId, sandbox,
         })[];
     }>;
     rootInstanceId: Instance["id"];
-    sandbox?: boolean | undefined;
     propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
     assetsStore: ReadableAtom<Assets>;
     pagesStore: ReadableAtom<Pages>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.64.0",
+  "version": "0.66.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -30,22 +30,23 @@
   },
   "dependencies": {
     "@nanostores/react": "^0.4.1",
+    "@react-aria/utils": "^3.13.3",
     "detect-font": "^0.1.5",
     "html-tags": "^3.2.0",
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.64.0",
-    "@webstudio-is/css-data": "^0.64.0",
-    "@webstudio-is/css-engine": "^0.64.0",
-    "@webstudio-is/css-vars": "^0.64.0",
-    "@webstudio-is/fonts": "^0.64.0",
-    "@webstudio-is/generate-arg-types": "^0.64.0",
-    "@webstudio-is/icons": "^0.64.0",
-    "@webstudio-is/image": "^0.64.0",
-    "@webstudio-is/prisma-client": "^0.64.0",
-    "@webstudio-is/project-build": "^0.64.0",
-    "@webstudio-is/form-handlers": "^0.64.0"
+    "@webstudio-is/asset-uploader": "^0.66.0",
+    "@webstudio-is/css-data": "^0.66.0",
+    "@webstudio-is/css-engine": "^0.66.0",
+    "@webstudio-is/css-vars": "^0.66.0",
+    "@webstudio-is/fonts": "^0.66.0",
+    "@webstudio-is/form-handlers": "^0.66.0",
+    "@webstudio-is/generate-arg-types": "^0.66.0",
+    "@webstudio-is/icons": "^0.66.0",
+    "@webstudio-is/image": "^0.66.0",
+    "@webstudio-is/prisma-client": "^0.66.0",
+    "@webstudio-is/project-build": "^0.66.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/form.ws.tsx

@@ -1,4 +1,4 @@
-import { FormIcon } from "@webstudio-is/icons";
+import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "../../css/normalize";
 import type {
   PresetStyle,
@@ -19,7 +19,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   presetStyle,
   states: [
     { selector: "[data-state=error]", label: "Error" },
@@ -45,7 +45,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

package/src/app/custom-components/image.tsx

@@ -4,7 +4,10 @@ import {
   type ComponentPropsWithoutRef,
   type ElementRef,
 } from "react";
-import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
+import {
+  Image as WebstudioImage,
+  createImageLoader,
+} from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
 import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
@@ -16,20 +19,11 @@ type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-    const params = getParams();
 
     const loader = useMemo(() => {
-      if (asset === undefined) {
-        return null;
-      }
-      if (asset.location === "REMOTE") {
-        return loaders.cloudflareImageLoader({
-          resizeOrigin: params.resizeOrigin,
-          cdnUrl: params.assetBaseUrl,
-        });
-      }
-      return loaders.localImageLoader({ publicPath: params.assetBaseUrl });
-    }, [asset, params]);
+      const params = getParams();
+      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
 
     const src = asset?.name ?? props.src;
 

package/src/app/params.ts

@@ -1,11 +1,33 @@
 export type Params = {
-  resizeOrigin?: string;
+  /**
+   * Base url ir base path for images with ending slash.
+   * Used for configuring image with different sizes.
+   * Concatinated with "name?width=&quality=&format=".
+   *
+   * For example
+   * /asset/image/ used by default in builder
+   * https://image-transform.wstd.io/cdn-cgi/image/
+   * https://webstudio.is/cdn-cgi/image/
+   */
+  imageBaseUrl: string;
+  /**
+   * Base url or base path for any asset with ending slash.
+   * Used to load assets like fonts or images in styles
+   * Concatinated with "name".
+   *
+   * For example
+   * /s/uploads/
+   * /asset/file/
+   * https://assets-dev.webstudio.is/
+   * https://assets.webstudio.is/
+   */
   assetBaseUrl: string;
 };
 
 let params: undefined | Params;
 
 const emptyParams: Params = {
+  imageBaseUrl: "/",
   assetBaseUrl: "/",
 };
 

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

@@ -0,0 +1,10 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+
+export const props: Record<string, PropMeta> = {
+  code: { required: true, control: "text", type: "string" },
+  executeScriptInCanvas: {
+    required: true,
+    control: "boolean",
+    type: "boolean",
+  },
+};

package/src/components/blockquote.ws.tsx

@@ -1,4 +1,4 @@
-import { BlockquoteIcon } from "@webstudio-is/icons";
+import { BlockquoteIcon } from "@webstudio-is/icons/svg";
 import type { defaultTag } from "./blockquote";
 import {
   defaultStates,
@@ -63,7 +63,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Blockquote",
-  Icon: BlockquoteIcon,
+  icon: BlockquoteIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Blockquote you can edit" }],

package/src/components/body.ws.tsx

@@ -1,4 +1,4 @@
-import { BodyIcon } from "@webstudio-is/icons";
+import { BodyIcon } from "@webstudio-is/icons/svg";
 import { body } from "../css/normalize";
 import {
   defaultStates,
@@ -41,7 +41,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Body",
-  Icon: BodyIcon,
+  icon: BodyIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/bold.ws.tsx

@@ -1,4 +1,4 @@
-import { BoldIcon } from "@webstudio-is/icons";
+import { BoldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -16,7 +16,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: BoldIcon,
+  icon: BoldIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/box.ws.ts

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -40,7 +40,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "container",
   label: "Box",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   states: defaultStates,
   presetStyle,
 };

package/src/components/button.ws.tsx

@@ -1,4 +1,4 @@
-import { ButtonElementIcon } from "@webstudio-is/icons";
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import { button } from "../css/normalize";
 import {
   defaultStates,
@@ -14,10 +14,10 @@ const presetStyle = {
 } satisfies PresetStyle<typeof defaultTag>;
 
 export const meta: WsComponentMeta = {
-  category: "general",
+  category: "forms",
   type: "container",
   label: "Button",
-  Icon: ButtonElementIcon,
+  icon: ButtonElementIcon,
   presetStyle,
   states: [
     ...defaultStates,

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

@@ -1,4 +1,4 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -19,8 +19,8 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
-  label: "Checkbox Field",
-  Icon: CheckboxCheckedIcon,
+  label: "Checkbox",
+  icon: CheckboxCheckedIcon,
   states: defaultStates,
   presetStyle,
   children: [
@@ -28,6 +28,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "TextBlock",
+      label: "Checkbox Label",
       props: [],
       children: [{ type: "text", value: "Checkbox" }],
     },

package/src/components/checkbox.ws.tsx

@@ -1,4 +1,4 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons";
+import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
@@ -21,8 +21,8 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   type: "control",
-  label: "Checkbox",
-  Icon: CheckboxCheckedIcon,
+  label: "Checkbox Input",
+  icon: CheckboxCheckedIcon,
   presetStyle,
   states: [
     ...defaultStates,

package/src/components/code.ws.tsx

@@ -1,4 +1,4 @@
-import { CodeIcon } from "@webstudio-is/icons";
+import { CodeIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
   type PresetStyle,
@@ -39,7 +39,7 @@ export const meta: WsComponentMeta = {
   category: "general",
   type: "rich-text",
   label: "Code",
-  Icon: CodeIcon,
+  icon: CodeIcon,
   states: defaultStates,
   presetStyle,
   children: [{ type: "text", value: "Code you can edit" }],

package/src/components/component-meta.ts

@@ -1,6 +1,4 @@
 import { z } from "zod";
-import type { FunctionComponent } from "react";
-import type { IconProps } from "@webstudio-is/icons";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
 import type { htmlTags as HtmlTags } from "html-tags";
 import { EmbedTemplateStyleDecl, WsEmbedTemplate } from "../embed-template";
@@ -59,16 +57,15 @@ const WsComponentMeta = z.object({
   ]),
   acceptedParents: z.optional(z.array(z.string())),
   label: z.string(),
-  Icon: z.function(),
-  presetStyle: z.optional(z.any()),
+  icon: z.string(),
+  presetStyle: z.optional(z.record(z.string(), EmbedTemplateStyleDecl)),
   states: z.optional(z.array(ComponentState)),
   children: z.optional(WsEmbedTemplate),
 });
 
 export type WsComponentMeta = Omit<
   z.infer<typeof WsComponentMeta>,
-  "presetStyle" | "Icon"
+  "presetStyle"
 > & {
   presetStyle?: PresetStyle;
-  Icon: FunctionComponent<IconProps>;
 };

package/src/components/components-utils.ts

@@ -1,63 +1,19 @@
-import type { forwardRef } from "react";
 import * as components from "./components";
 import { registeredComponents } from "./index";
+import { componentAttribute, idAttribute } from "../tree";
 
 export type ComponentName = keyof typeof components;
 
-/**
- * We need to define component names manually here, instead of using Object.keys(components)
- * Otherwise every component would be included in the bundle, even if it is not used
- *
- * @todo this list should not be hardcoded!
- */
-const componentNames = Object.keys({
-  Slot: 1,
-  Fragment: 1,
-  Box: 1,
-  Body: 1,
-  TextBlock: 1,
-  Heading: 1,
-  Paragraph: 1,
-  Link: 1,
-  LinkBlock: 1,
-  RichTextLink: 1,
-  Span: 1,
-  Bold: 1,
-  Italic: 1,
-  Superscript: 1,
-  Subscript: 1,
-  Button: 1,
-  Input: 1,
-  Form: 1,
-  Image: 1,
-  Blockquote: 1,
-  List: 1,
-  ListItem: 1,
-  Separator: 1,
-  Code: 1,
-  Label: 1,
-  SuccessMessage: 1,
-  ErrorMessage: 1,
-  Textarea: 1,
-  RadioButtonField: 1,
-  RadioButton: 1,
-  CheckboxField: 1,
-  Checkbox: 1,
-} satisfies { [K in keyof typeof components]: 1 }) as Array<
-  keyof typeof components
->;
-
-export const getComponentNames = (): ComponentName[] => {
-  const uniqueNames = new Set([
-    ...componentNames,
-    ...Object.keys(registeredComponents || {}),
-  ]);
-
-  return Array.from(uniqueNames) as ComponentName[];
-};
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
+type AnyComponent = React.ForwardRefExoticComponent<
+  Omit<
+    React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>,
+    "ref"
+  > & {
+    [componentAttribute]: string;
+    [idAttribute]: string;
+  } & React.RefAttributes<HTMLElement>
+>;
 
 /**
  * Now used only in builder app
@@ -65,8 +21,8 @@ type AnyComponent = ReturnType<typeof forwardRef<any, any>>;
  */
 export const getComponent = (name: string): undefined | AnyComponent => {
   return registeredComponents != null && name in registeredComponents
-    ? (registeredComponents[name as ComponentName] as AnyComponent)
-    : components[name as ComponentName];
+    ? (registeredComponents[name as ComponentName] as never)
+    : (components[name as ComponentName] as never);
 };
 
 /**
@@ -78,8 +34,8 @@ export const getComponent = (name: string): undefined | AnyComponent => {
 export const createGetComponent = (comps: Partial<typeof components>) => {
   return (name: string): undefined | AnyComponent => {
     return registeredComponents != null && name in registeredComponents
-      ? (registeredComponents[name as ComponentName] as AnyComponent)
-      : comps[name as ComponentName];
+      ? (registeredComponents[name as ComponentName] as never)
+      : (comps[name as ComponentName] as never);
   };
 };
 

package/src/components/components.ts

@@ -7,6 +7,7 @@
  */
 export { Slot } from "./slot";
 export { Fragment } from "./fragment";
+export { Html } from "./html";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";

package/src/components/error-message.ws.tsx

@@ -1,4 +1,4 @@
-import { BoxIcon } from "@webstudio-is/icons";
+import { BoxIcon } from "@webstudio-is/icons/svg";
 import type {
   WsComponentMeta,
   WsComponentPropsMeta,
@@ -14,7 +14,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Error Message",
-  Icon: BoxIcon,
+  icon: BoxIcon,
   presetStyle,
 };
 

package/src/components/form.ws.tsx

@@ -1,4 +1,4 @@
-import { FormIcon } from "@webstudio-is/icons";
+import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "../css/normalize";
 import {
   defaultStates,
@@ -20,7 +20,7 @@ export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
   label: "Form",
-  Icon: FormIcon,
+  icon: FormIcon,
   states: defaultStates,
   presetStyle,
   children: [
@@ -43,7 +43,7 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Input",
-      props: [{ type: "string", name: "email", value: "email" }],
+      props: [{ type: "string", name: "name", value: "email" }],
       children: [],
     },
     {

package/src/components/fragment.ws.ts

@@ -3,7 +3,7 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 export const meta: WsComponentMeta = {
   type: "container",
   label: "Fragment",
-  Icon: () => null,
+  icon: "",
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/heading.ws.tsx

@@ -1,4 +1,4 @@
-import { HeadingIcon } from "@webstudio-is/icons";
+import { HeadingIcon } from "@webstudio-is/icons/svg";
 import type { ComponentProps } from "react";
 import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import {
@@ -25,7 +25,7 @@ export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
-  Icon: HeadingIcon,
+  icon: HeadingIcon,
   children: [{ type: "text", value: "Heading you can edit" }],
   states: defaultStates,
   presetStyle,

package/src/components/html.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Html as HtmlPrimitive } from "./html";
+
+export default {
+  title: "Components/Html",
+  component: HtmlPrimitive,
+} as ComponentMeta<typeof HtmlPrimitive>;
+
+const Template: ComponentStory<typeof HtmlPrimitive> = (args) => (
+  <HtmlPrimitive {...args} />
+);
+
+export const Html = Template.bind({});
+Html.args = {
+  code: "<strong>custom code</strong>",
+};