@webstudio-is/react-sdk 0.49.0 → 0.50.0

package/src/app/custom-components/index.ts

@@ -3,7 +3,7 @@ import { Link } from "./link";
 import { LinkBlock } from "./link-block";
 import { RichTextLink } from "./rich-text-link";
 import { imageProps } from "@webstudio-is/image";
-import type { WsComponentPropsMeta } from "../../components/component-type";
+import type { WsComponentPropsMeta } from "../../components/component-meta";
 
 export const customComponents = {
   Image,

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

@@ -0,0 +1,3 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+
+export const props: Record<string, PropMeta> = {};

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

@@ -0,0 +1,3 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+
+export const props: Record<string, PropMeta> = {};

package/src/components/blockquote.ws.tsx

@@ -1,5 +1,5 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/blockquote.props";
 
 const presetStyle = {
@@ -42,6 +42,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "rich-text",
   label: "Blockquote",
   Icon: BlockquoteIcon,

package/src/components/body.ws.tsx

@@ -1,5 +1,5 @@
 import { BodyIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/body.props";
 
 const presetStyle = {
@@ -53,7 +53,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
-  type: "body",
+  type: "container",
   label: "Body",
   Icon: BodyIcon,
   presetStyle,

package/src/components/bold.ws.tsx

@@ -1,5 +1,5 @@
 import { FontBoldIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/bold.props";
 
 export const meta: WsComponentMeta = {

package/src/components/box.ws.ts

@@ -1,5 +1,5 @@
 import { BoxIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/box.props";
 
 const presetStyle = {
@@ -10,6 +10,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "container",
   label: "Box",
   Icon: BoxIcon,

package/src/components/button.ws.tsx

@@ -1,8 +1,9 @@
 import { ButtonIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/button.props";
 
 export const meta: WsComponentMeta = {
+  category: "forms",
   type: "container",
   label: "Button",
   Icon: ButtonIcon,

package/src/components/code.ws.tsx

@@ -1,5 +1,5 @@
 import { CodeIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
 
@@ -33,6 +33,7 @@ const presetStyle: WsComponentMeta["presetStyle"] = {
 };
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "rich-text",
   label: "Code",
   Icon: CodeIcon,

package/src/components/{component-type.ts → component-meta.ts}

@@ -13,31 +13,21 @@ const WsComponentPropsMeta = z.object({
 
 export type WsComponentPropsMeta = z.infer<typeof WsComponentPropsMeta>;
 
-export type WsComponentMeta = {
-  /**
-   * body - can accept other components with dnd but not listed
-   * container - can accept other components with dnd
-   * control - usually form controls like inputs, without children
-   * embed - images, videos or other embeddable components, without children
-   * rich-text - editable text component
-   * rich-text-child - formatted text fragment, not listed in components list
-   */
-  type:
-    | "body"
-    | "container"
-    | "control"
-    | "embed"
-    | "rich-text"
-    | "rich-text-child";
-  label: string;
-  Icon: FunctionComponent<IconProps>;
-  presetStyle?: Style;
-  children?: Array<string>;
-};
+export const componentCategories = [
+  "general",
+  "typography",
+  "media",
+  "forms",
+] as const;
 
 const WsComponentMeta = z.object({
+  category: z.enum(componentCategories).optional(),
+  // container - can accept other components with dnd
+  // control - usually form controls like inputs, without children
+  // embed - images, videos or other embeddable components, without children
+  // rich-text - editable text component
+  // rich-text-child - formatted text fragment, not listed in components list
   type: z.enum([
-    "body",
     "container",
     "control",
     "embed",
@@ -45,7 +35,15 @@ const WsComponentMeta = z.object({
     "rich-text-child",
   ]),
   label: z.string(),
-  Icon: z.any(),
+  Icon: z.function(),
   presetStyle: z.optional(z.any()),
   children: z.optional(z.array(z.string())),
 });
+
+export type WsComponentMeta = Omit<
+  z.infer<typeof WsComponentMeta>,
+  "presetStyle" | "Icon"
+> & {
+  presetStyle?: Style;
+  Icon: FunctionComponent<IconProps>;
+};

package/src/components/components-utils.ts

@@ -6,8 +6,12 @@ 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,

package/src/components/components.ts

@@ -5,6 +5,8 @@
  * getComponent = createGetComponent({ Box, BlaBla })to pass them to RootInstance
  * see example /packages/sdk-size-test/app/routes/$.tsx
  */
+export { Slot } from "./slot";
+export { Fragment } from "./fragment";
 export { Body } from "./body";
 export { Box } from "./box";
 export { TextBlock } from "./text-block";

package/src/components/form.ws.tsx

@@ -1,5 +1,5 @@
 import { FormIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/form.props";
 
 const presetStyle = {
@@ -15,6 +15,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "forms",
   type: "container",
   label: "Form",
   Icon: FormIcon,

package/src/components/fragment.tsx

@@ -0,0 +1,11 @@
+import { forwardRef, type ElementRef, type ReactNode } from "react";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const Fragment = forwardRef<ElementRef<"div">, Props>((props, ref) => {
+  return <div {...props} ref={ref} style={{ display: "contents" }} />;
+});
+
+Fragment.displayName = "Fragment";

package/src/components/fragment.ws.ts

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

package/src/components/heading.ws.tsx

@@ -1,8 +1,9 @@
 import { HeadingIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/heading.props";
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,

package/src/components/image.ws.tsx

@@ -1,5 +1,5 @@
 import { ImageIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/image.props";
 
 const presetStyle = {
@@ -18,6 +18,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "media",
   type: "embed",
   label: "Image",
   Icon: ImageIcon,

package/src/components/index.ts

@@ -1,6 +1,8 @@
 import { PropMeta } from "@webstudio-is/generate-arg-types";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import type { ComponentName } from "./components-utils";
+import { meta as SlotMeta } from "./slot.ws";
+import { meta as FragmentMeta } from "./fragment.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -25,6 +27,8 @@ import { meta as SeparatorMeta } from "./separator.ws";
 import { meta as CodeMeta } from "./code.ws";
 
 // these are huge JSON objects that we want to be tree-shaken when not used!
+import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
+import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -48,7 +52,10 @@ import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
 import { propsMeta as CodePropsMeta } from "./code.ws";
 
+// @todo this list should not be hardcoded!
 const defaultMetas: Record<string, WsComponentMeta> = {
+  Slot: SlotMeta,
+  Fragment: FragmentMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -89,7 +96,10 @@ export const registerComponentMetas = (
   currentMetas = result;
 };
 
+// @todo this list should not be hardcoded!
 const defaultPropsMetasRaw = {
+  Slot: SlotMetaPropsMeta,
+  Fragment: FragmentMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,

package/src/components/input.ws.tsx

@@ -1,8 +1,9 @@
 import { InputIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/input.props";
 
 export const meta: WsComponentMeta = {
+  category: "forms",
   type: "control",
   label: "Input",
   Icon: InputIcon,

package/src/components/italic.ws.tsx

@@ -1,5 +1,5 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/italic.props";
 
 const presetStyle = {

package/src/components/link-block.ws.tsx

@@ -1,5 +1,5 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link-block.props";
 
 const presetStyle = {
@@ -14,6 +14,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,

package/src/components/link.ws.tsx

@@ -1,5 +1,5 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link.props";
 
 const presetStyle = {
@@ -15,6 +15,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "rich-text",
   label: "Link Text",
   Icon: Link2Icon,

package/src/components/list-item.ws.tsx

@@ -1,8 +1,9 @@
 import { ListItemIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/list-item.props";
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,

package/src/components/list.ws.tsx

@@ -1,5 +1,5 @@
 import { ListIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/list.props";
 
 const presetStyle = {
@@ -18,6 +18,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "container",
   label: "List",
   Icon: ListIcon,

package/src/components/paragraph.ws.tsx

@@ -1,8 +1,9 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/paragraph.props";
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,

package/src/components/rich-text-link.ws.tsx

@@ -1,9 +1,11 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/rich-text-link.props";
 import { meta as linkMeta, propsMeta as propsLinkMeta } from "./link.ws";
 
+const { category, ...linkMetaRest } = linkMeta;
+
 export const meta: WsComponentMeta = {
-  ...linkMeta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: [],
 };

package/src/components/separator.ws.tsx

@@ -1,5 +1,5 @@
 import { DashIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/separator.props";
 
 const presetStyle = {
@@ -18,6 +18,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "embed",
   label: "Separator",
   Icon: DashIcon,

package/src/components/slot.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Slot as SlotPrimitive } from "./slot";
+
+export default {
+  title: "Components/Slot",
+  component: SlotPrimitive,
+} as ComponentMeta<typeof SlotPrimitive>;
+
+const Template: ComponentStory<typeof SlotPrimitive> = (args) => (
+  <SlotPrimitive {...args} />
+);
+
+export const Slot = Template.bind({});
+Slot.args = {
+  children: "Slot",
+};

package/src/components/slot.tsx

@@ -0,0 +1,17 @@
+import { forwardRef, type ElementRef, type ReactNode } from "react";
+
+type Props = {
+  children?: ReactNode;
+};
+
+export const Slot = forwardRef<ElementRef<"div">, Props>((props, ref) => {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      style={{ display: props.children ? "contents" : "block" }}
+    />
+  );
+});
+
+Slot.displayName = "Slot";

package/src/components/slot.ws.ts

@@ -0,0 +1,13 @@
+import { SlotComponentIcon } from "@webstudio-is/icons";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+
+export const meta: WsComponentMeta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  Icon: SlotComponentIcon,
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props: {},
+};

package/src/components/span.ws.tsx

@@ -1,5 +1,5 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/span.props";
 
 export const meta: WsComponentMeta = {

package/src/components/subscript.ws.tsx

@@ -1,5 +1,5 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/subscript.props";
 
 export const meta: WsComponentMeta = {

package/src/components/superscript.ws.tsx

@@ -1,5 +1,5 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/superscript.props";
 
 export const meta: WsComponentMeta = {

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

@@ -1,5 +1,5 @@
 import { TextIcon } from "@webstudio-is/icons";
-import type { WsComponentMeta, WsComponentPropsMeta } from "./component-type";
+import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/text-block.props";
 
 const presetStyle = {
@@ -11,6 +11,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "typography",
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,

package/src/index.ts

@@ -10,7 +10,8 @@ export {
   customComponentMetas,
   customComponentPropsMetas,
 } from "./app/custom-components";
-export type {
-  WsComponentPropsMeta,
-  WsComponentMeta,
-} from "./components/component-type";
+export {
+  type WsComponentPropsMeta,
+  type WsComponentMeta,
+  componentCategories,
+} from "./components/component-meta";

package/src/tree/create-elements-tree.tsx

@@ -8,6 +8,8 @@ import type { Assets, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
+type InstanceSelector = Instance["id"][];
+
 export const createElementsTree = ({
   sandbox,
   instance,
@@ -23,14 +25,17 @@ export const createElementsTree = ({
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
+  const rootInstanceSelector = [instance.id];
   const children = createInstanceChildrenElements({
+    instanceSelector: rootInstanceSelector,
     Component,
     children: instance.children,
     getComponent,
   });
-  const body = createInstanceElement({
+  const root = createInstanceElement({
     Component,
     instance,
+    instanceSelector: rootInstanceSelector,
     children: [
       <Fragment key="children">
         {children}
@@ -43,16 +48,18 @@ export const createElementsTree = ({
   });
   return (
     <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
-      {body}
+      {root}
     </ReactSdkContext.Provider>
   );
 };
 
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent,
 }: {
+  instanceSelector: InstanceSelector;
   children: Instance["children"];
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
@@ -63,13 +70,16 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
+    const childInstanceSelector = [child.id, ...instanceSelector];
     const children = createInstanceChildrenElements({
+      instanceSelector: childInstanceSelector,
       children: child.children,
       Component,
       getComponent,
     });
     const element = createInstanceElement({
       instance: child,
+      instanceSelector: childInstanceSelector,
       Component,
       children,
       getComponent,
@@ -82,20 +92,24 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent,
 }: {
   instance: Instance;
+  instanceSelector: InstanceSelector;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   children?: Array<JSX.Element | string>;
   getComponent: GetComponent;
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent,
-  };
-
-  return <Component {...props} />;
+  return (
+    <Component
+      key={instance.id}
+      instance={instance}
+      instanceSelector={instanceSelector}
+      getComponent={getComponent}
+    >
+      {children}
+    </Component>
+  );
 };

package/src/tree/webstudio-component.tsx

@@ -28,6 +28,7 @@ export const renderWebstudioComponentChildren = (
 
 type WebstudioComponentProps = {
   instance: Instance;
+  instanceSelector: Instance["id"][];
   children: Array<JSX.Element | string>;
   getComponent: GetComponent;
 };

package/lib/components/component-type.js

@@ -1,20 +0,0 @@
-import { z } from "zod";
-import { PropMeta } from "@webstudio-is/generate-arg-types";
-const WsComponentPropsMeta = z.object({
-  props: z.record(PropMeta),
-  initialProps: z.array(z.string()).optional()
-});
-const WsComponentMeta = z.object({
-  type: z.enum([
-    "body",
-    "container",
-    "control",
-    "embed",
-    "rich-text",
-    "rich-text-child"
-  ]),
-  label: z.string(),
-  Icon: z.any(),
-  presetStyle: z.optional(z.any()),
-  children: z.optional(z.array(z.string()))
-});