@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/src/components/heading.ws.tsx

@@ -1,13 +1,29 @@
+import type { Style } from "@webstudio-is/css-data";
 import { HeadingIcon } from "@webstudio-is/icons";
+import type { ComponentProps } from "react";
+import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { Heading } from "./heading";
 import { props } from "./__generated__/heading.props";
 
+type HeadingTags = NonNullable<ComponentProps<typeof Heading>["tag"]>;
+
+const presetStyle = {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+} as const satisfies Record<HeadingTags, Style>;
+
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
   children: ["Heading you can edit"],
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/image.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "img";
+export const defaultTag = "img";
 
 // quality and optimize can be overwritten and used by asset transform
 // Or we need and additional way to pass them upper level

package/src/components/image.ws.tsx

@@ -1,21 +1,28 @@
+import type { Style } from "@webstudio-is/css-data";
 import { ImageIcon } from "@webstudio-is/icons";
+import { img } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./image";
 import { props } from "./__generated__/image.props";
 
 const presetStyle = {
-  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-  maxWidth: {
-    type: "unit",
-    unit: "%",
-    value: 100,
-  },
-  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
-  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-  display: {
-    type: "keyword",
-    value: "block",
+  img: {
+    ...img,
+
+    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
+    maxWidth: {
+      type: "unit",
+      unit: "%",
+      value: 100,
+    },
+    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
+    display: {
+      type: "keyword",
+      value: "block",
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "media",

package/src/components/input.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "input";
+export const defaultTag = "input";
 
 export const Input = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/input.ws.tsx

@@ -1,12 +1,20 @@
-import { InputIcon } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { input } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./input";
 import { props } from "./__generated__/input.props";
 
+const presetStyle = {
+  input,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "control",
   label: "Input",
-  Icon: InputIcon,
+  Icon: FormTextFieldIcon,
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/italic.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "i";
+export const defaultTag = "i";
 
 export const Italic = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/italic.ws.tsx

@@ -1,18 +1,24 @@
-import { FontItalicIcon } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+import { TextItalicIcon } from "@webstudio-is/icons";
+import type { defaultTag } from "./italic";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/italic.props";
+import { i } from "../css/normalize";
 
 const presetStyle = {
-  fontStyle: {
-    type: "keyword",
-    value: "italic",
+  i: {
+    ...i,
+    fontStyle: {
+      type: "keyword",
+      value: "italic",
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: FontItalicIcon,
+  Icon: TextItalicIcon,
   presetStyle,
 };
 

package/src/components/link-block.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { Link } from "./link";
+export { defaultTag } from "./link";
 
 export const LinkBlock: typeof Link = forwardRef((props, ref) => (
   <Link {...props} ref={ref} />

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

@@ -1,17 +1,20 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link-block.props";
+import { propsMeta as linkPropsMeta } from "./link.ws";
+import type { defaultTag } from "./link-block";
+import type { Style } from "@webstudio-is/css-data";
+import { a } from "../css/normalize";
 
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box",
+  a: {
+    ...a,
+    display: {
+      type: "keyword",
+      value: "inline-block",
+    },
   },
-  display: {
-    type: "keyword",
-    value: "inline-block",
-  },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "general",
@@ -22,6 +25,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,7 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+
+export const defaultTag = "a";
 
 // @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 +13,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,29 +1,42 @@
-import { Link2Icon } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+import { LinkIcon } from "@webstudio-is/icons";
+import { a } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./link";
 import { props } from "./__generated__/link.props";
 
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1,
+  a: {
+    ...a,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1,
+    },
+    display: {
+      type: "keyword",
+      value: "inline-block",
+    },
   },
-  display: {
-    type: "keyword",
-    value: "inline-block",
-  },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: Link2Icon,
+  Icon: LinkIcon,
   presetStyle,
   children: ["Link text you can edit"],
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false,
+    },
+  },
   initialProps: ["href", "target", "prefetch"],
 };

package/src/components/list-item.tsx

@@ -5,7 +5,7 @@ import {
   type ComponentProps,
 } from "react";
 
-const defaultTag = "li";
+export const defaultTag = "li";
 
 type Props = ComponentProps<typeof defaultTag>;
 

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

@@ -1,13 +1,21 @@
+import type { Style } from "@webstudio-is/css-data";
 import { ListItemIcon } from "@webstudio-is/icons";
+import { li } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./list-item";
 import { props } from "./__generated__/list-item.props";
 
+const presetStyle = {
+  li,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
   children: ["List Item you can edit"],
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/list.tsx

@@ -8,6 +8,8 @@ import {
 const unorderedTag = "ul";
 const orderedTag = "ol";
 
+export type ListTag = typeof unorderedTag | typeof orderedTag;
+
 type Props = ComponentProps<typeof unorderedTag> &
   ComponentProps<typeof orderedTag> & {
     ordered?: boolean;

package/src/components/list.ws.tsx

@@ -1,21 +1,42 @@
 import { ListIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/list.props";
+import type { ListTag } from "./list";
+import type { Style } from "@webstudio-is/css-data";
+import { ol, ul } from "../css/normalize";
 
 const presetStyle = {
-  marginTop: {
-    type: "keyword",
-    value: "0",
+  ol: {
+    ...ol,
+    marginTop: {
+      type: "keyword",
+      value: "0",
+    },
+    marginBottom: {
+      type: "keyword",
+      value: "10px",
+    },
+    paddingLeft: {
+      type: "keyword",
+      value: "40px",
+    },
   },
-  marginBottom: {
-    type: "keyword",
-    value: "10px",
+  ul: {
+    ...ul,
+    marginTop: {
+      type: "keyword",
+      value: "0",
+    },
+    marginBottom: {
+      type: "keyword",
+      value: "10px",
+    },
+    paddingLeft: {
+      type: "keyword",
+      value: "40px",
+    },
   },
-  paddingLeft: {
-    type: "keyword",
-    value: "40px",
-  },
-} as const;
+} as const satisfies Record<ListTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "typography",

package/src/components/paragraph.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "p";
+export const defaultTag = "p";
 
 export const Paragraph = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/paragraph.ws.tsx

@@ -1,13 +1,21 @@
+import type { Style } from "@webstudio-is/css-data";
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { p } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./paragraph";
 import { props } from "./__generated__/paragraph.props";
 
+const presetStyle = {
+  p,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
   children: ["Pragraph you can edit"],
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

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

@@ -1,6 +1,6 @@
 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;
 
@@ -11,6 +11,9 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  ...propsLinkMeta,
-  props,
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
 };

package/src/components/separator.tsx

@@ -5,7 +5,7 @@ import {
   type ComponentProps,
 } from "react";
 
-const defaultTag = "hr";
+export const defaultTag = "hr";
 
 type Props = ComponentProps<typeof defaultTag>;
 

package/src/components/separator.ws.tsx

@@ -1,21 +1,42 @@
 import { DashIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/separator.props";
+import type { defaultTag } from "./separator";
+import type { Style } from "@webstudio-is/css-data";
+import { hr } from "../css/normalize";
 
 const presetStyle = {
-  height: {
-    type: "keyword",
-    value: "1px",
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "gray",
-  },
-  border: {
-    type: "keyword",
-    value: "none",
+  hr: {
+    ...hr,
+
+    height: {
+      type: "keyword",
+      value: "1px",
+    },
+
+    backgroundColor: {
+      type: "keyword",
+      value: "gray",
+    },
+
+    borderTopStyle: {
+      type: "keyword",
+      value: "none",
+    },
+    borderRightStyle: {
+      type: "keyword",
+      value: "none",
+    },
+    borderLeftStyle: {
+      type: "keyword",
+      value: "none",
+    },
+    borderBottomStyle: {
+      type: "keyword",
+      value: "none",
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "general",

package/src/components/span.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "span";
+export const defaultTag = "span";
 
 export const Span = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/span.ws.tsx

@@ -1,11 +1,19 @@
-import { BrushIcon } from "@webstudio-is/icons";
+import type { Style } from "@webstudio-is/css-data";
+import { PaintBrushIcon } from "@webstudio-is/icons";
+import { span } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./span";
 import { props } from "./__generated__/span.props";
 
+const presetStyle = {
+  span,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: BrushIcon,
+  Icon: PaintBrushIcon,
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/subscript.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "sub";
+export const defaultTag = "sub";
 
 export const Subscript = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/subscript.ws.tsx

@@ -1,11 +1,19 @@
+import type { Style } from "@webstudio-is/css-data";
 import { SubscriptIcon } from "@webstudio-is/icons";
+import { sub } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./subscript";
 import { props } from "./__generated__/subscript.props";
 
+const presetStyle = {
+  sub,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: SubscriptIcon,
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/superscript.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "sup";
+export const defaultTag = "sup";
 
 export const Superscript = forwardRef<
   ElementRef<typeof defaultTag>,

package/src/components/superscript.ws.tsx

@@ -1,11 +1,19 @@
+import type { Style } from "@webstudio-is/css-data";
 import { SuperscriptIcon } from "@webstudio-is/icons";
+import { sup } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./superscript";
 import { props } from "./__generated__/superscript.props";
 
+const presetStyle = {
+  sup,
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: SuperscriptIcon,
+  presetStyle,
 };
 
 export const propsMeta: WsComponentPropsMeta = {

package/src/components/text-block.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "div";
+export const defaultTag = "div";
 
 export const TextBlock = forwardRef<
   ElementRef<typeof defaultTag>,

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

@@ -1,20 +1,27 @@
-import { TextIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/text-block.props";
+import type { defaultTag } from "./text-block";
+import type { Style } from "@webstudio-is/css-data";
+import { div } from "../css/normalize";
 
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1,
+  div: {
+    ...div,
+
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1,
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextIcon,
+  Icon: TextBlockIcon,
   presetStyle,
   children: ["Block of text you can edit"],
 };

package/src/context.tsx

@@ -1,11 +1,14 @@
 import { type ReadableAtom, atom } from "nanostores";
 import { createContext } from "react";
-import type { Assets, PropsByInstanceId } from "./props";
+import type { Assets } from "@webstudio-is/asset-uploader";
+import type { Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
 }>({
   propsByInstanceIdStore: atom(new Map()),
   assetsStore: atom(new Map()),
+  pagesStore: atom(new Map()),
 });