@webstudio-is/react-sdk 0.49.0 → 0.51.0

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__/link-block.props.ts

@@ -4,18 +4,18 @@ 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" },
-  download: { required: false, control: "text", type: "string" },
   href: { required: false, control: "text", type: "string" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -4,18 +4,18 @@ 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" },
-  download: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string", defaultValue: "" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/src/components/__generated__/rich-text-link.props.ts

@@ -4,18 +4,18 @@ 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" },
-  download: { required: false, control: "text", type: "string" },
   href: { required: false, control: "text", type: "string" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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,6 +1,7 @@
 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";
+import { propsMeta as linkPropsMeta } from "./link.ws";
 
 const presetStyle = {
   boxSizing: {
@@ -14,6 +15,7 @@ const presetStyle = {
 } as const;
 
 export const meta: WsComponentMeta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,
@@ -21,6 +23,9 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["href", "target", "prefetch"],
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
+  initialProps: linkPropsMeta.initialProps,
 };

package/src/components/link.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
 
 // @todo props that come from remix link, shouldn't be here at all
 // - prefetch should be only on remix component and it already is
@@ -10,10 +11,15 @@ type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
   prefetch?: "none" | "intent" | "render";
 };
 
-export const Link = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => {
-    return <a {...props} href={href} ref={ref} />;
-  }
-);
+export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  return (
+    <a
+      {...props}
+      href={typeof href === "string" ? href : href?.path}
+      ref={ref}
+    />
+  );
+});
 
 Link.displayName = "Link";

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,
@@ -23,6 +24,13 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false,
+    },
+  },
   initialProps: ["href", "target", "prefetch"],
 };

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,14 +1,19 @@
-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";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
+
+const { category, ...linkMetaRest } = linkMeta;
 
 export const meta: WsComponentMeta = {
-  ...linkMeta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: [],
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  ...propsLinkMeta,
-  props,
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
 };

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,