@webstudio-is/react-sdk 0.50.0 → 0.52.0

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

@@ -1,24 +1,21 @@
 import {
   forwardRef,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithoutRef,
   type ElementRef,
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/webstudio-component";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
 
 const defaultTag = "img";
 
-type Props = ComponentProps<typeof WebstudioImage> & { [idAttribute]: string };
+type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
 
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
-    const componentId = props[idAttribute] as string;
-
-    const asset = usePropAsset(componentId, "src");
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const params = getParams();
 
     const loader = useMemo(() => {

package/src/app/custom-components/shared/remix-link.tsx

@@ -1,59 +1,23 @@
-import { Link } from "@remix-run/react";
-import type {
-  ElementRef,
-  ComponentProps,
-  RefAttributes,
-  ForwardRefExoticComponent,
-} from "react";
+import { Link as RemixLink } from "@remix-run/react";
+import type { ComponentPropsWithoutRef } from "react";
 import { forwardRef } from "react";
-import type { Link as BaseLink } from "../../../components/link";
+import type { Link } from "../../../components/link";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 
-const isAbsoluteUrl = (href: string) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Remix's check for absolute URL copied from here:
-// https://github.com/remix-run/react-router/blob/react-router-dom%406.8.0/packages/react-router-dom/index.tsx#L423-L424
-const isAbsoluteUrlRemix = (href: string) =>
-  /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
-
-type Props = ComponentProps<typeof BaseLink>;
-
-type Ref = ElementRef<"a">;
-
-export const wrapLinkComponent = (
-  BaseLink: ForwardRefExoticComponent<Props & RefAttributes<Ref>>
-) => {
-  // We're not actually wrapping BaseLink (no way to wrap with Remix's Link),
-  // but this is still useful because we're making sure that props/ref types are compatible
-  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
+type LinkComponent = typeof Link;
+type LinkProps = ComponentPropsWithoutRef<LinkComponent>;
 
-    // This is a workaround for a bug in Remix: https://github.com/remix-run/remix/issues/5440
-    // It has a buggy absolute URL detection, which gives false positives on value like "//" or "http://"
-    // and causes entire app to crash
-    const willRemixTryToTreatAsAbsoluteAndCrash =
-      isAbsolute === false && isAbsoluteUrlRemix(href);
+export const wrapLinkComponent = (BaseLink: LinkComponent) => {
+  const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return (
-        <BaseLink
-          {...props}
-          href={willRemixTryToTreatAsAbsoluteAndCrash ? "" : href}
-          ref={ref}
-        />
-      );
+    if (typeof href === "string" || href === undefined) {
+      return <BaseLink {...props} ref={ref} />;
     }
 
-    return <Link {...props} to={href} ref={ref} />;
+    return <RemixLink {...props} to={href.path} ref={ref} />;
   });
 
-  // This is the only part that we use from BaseLink at runtime
   Component.displayName = BaseLink.displayName;
 
   return Component;

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/blockquote.tsx

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

package/src/components/blockquote.ws.tsx

@@ -1,45 +1,72 @@
+import type { Style } from "@webstudio-is/css-data";
 import { BlockquoteIcon } from "@webstudio-is/icons";
+import type { defaultTag } from "./blockquote";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/blockquote.props";
 
 const presetStyle = {
-  margin: {
-    type: "keyword",
-    value: "0",
-  },
-  marginBottom: {
-    type: "keyword",
-    value: "10px",
-  },
-  paddingTop: {
-    type: "keyword",
-    value: "10px",
-  },
-  paddingBottom: {
-    type: "keyword",
-    value: "10px",
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "20px",
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "20px",
-  },
-  borderLeftWidth: {
-    type: "keyword",
-    value: "5px",
-  },
-  borderLeftStyle: {
-    type: "keyword",
-    value: "solid",
-  },
-  borderLeftColor: {
-    type: "keyword",
-    value: "#e2e2e2",
+  blockquote: {
+    marginTop: {
+      type: "unit",
+      value: 0,
+      unit: "number",
+    },
+    marginRight: {
+      type: "unit",
+      value: 0,
+      unit: "number",
+    },
+    marginBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px",
+    },
+    marginLeft: {
+      type: "unit",
+      value: 0,
+      unit: "number",
+    },
+
+    paddingTop: {
+      type: "unit",
+      value: 10,
+      unit: "px",
+    },
+    paddingBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px",
+    },
+    paddingLeft: {
+      type: "unit",
+      value: 20,
+      unit: "px",
+    },
+    paddingRight: {
+      type: "unit",
+      value: 20,
+      unit: "px",
+    },
+
+    borderLeftWidth: {
+      type: "unit",
+      value: 5,
+      unit: "px",
+    },
+    borderLeftStyle: {
+      type: "keyword",
+      value: "solid",
+    },
+
+    borderLeftColor: {
+      type: "rgb",
+      r: 226,
+      g: 226,
+      b: 226,
+      alpha: 1,
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "typography",

package/src/components/body.tsx

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

package/src/components/body.ws.tsx

@@ -1,56 +1,48 @@
 import { BodyIcon } from "@webstudio-is/icons";
+import { body } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/body.props";
+import type { defaultTag } from "./body";
+import type { Style } from "@webstudio-is/css-data";
 
 const presetStyle = {
-  marginTop: {
-    type: "unit",
-    unit: "px",
-    value: 0,
-  },
-  marginRight: {
-    type: "unit",
-    unit: "px",
-    value: 0,
-  },
-  marginBottom: {
-    type: "unit",
-    unit: "px",
-    value: 0,
-  },
-  marginLeft: {
-    type: "unit",
-    unit: "px",
-    value: 0,
-  },
-  minHeight: {
-    type: "unit",
-    unit: "%",
-    value: 100,
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "white",
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "Arial",
-  },
-  fontSize: {
-    type: "unit",
-    unit: "px",
-    value: 14,
-  },
-  lineHeight: {
-    type: "unit",
-    unit: "number",
-    value: 1.5,
-  },
-  color: {
-    type: "keyword",
-    value: "#232323",
+  body: {
+    ...body,
+
+    minHeight: {
+      type: "unit",
+      unit: "%",
+      value: 100,
+    },
+
+    backgroundColor: {
+      type: "keyword",
+      value: "white",
+    },
+
+    fontFamily: {
+      type: "keyword",
+      value: "Arial",
+    },
+
+    fontSize: {
+      type: "unit",
+      unit: "px",
+      value: 14,
+    },
+
+    lineHeight: {
+      type: "unit",
+      unit: "number",
+      value: 1.5,
+    },
+
+    color: {
+      type: "keyword",
+      value: "#232323",
+    },
   },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   type: "container",

package/src/components/bold.tsx

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

package/src/components/bold.ws.tsx

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

package/src/components/box.ws.ts

@@ -1,13 +1,36 @@
 import { BoxIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/box.props";
+import type { Box } from "./box";
+import type { ComponentProps } from "react";
+import type { Style } from "@webstudio-is/css-data";
+import {
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section,
+} from "../css/normalize";
+
+type BoxTags = NonNullable<ComponentProps<typeof Box>["tag"]>;
 
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box",
-  },
-} as const;
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section,
+} as const satisfies Record<BoxTags, Style>;
 
 export const meta: WsComponentMeta = {
   category: "general",

package/src/components/button.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, type ElementRef, type ComponentProps } from "react";
 
-const defaultTag = "button";
+export const defaultTag = "button";
 
 type ButtonProps = ComponentProps<typeof defaultTag> & { innerText?: string };
 

package/src/components/button.ws.tsx

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

package/src/components/code.tsx

@@ -6,7 +6,7 @@ import {
 } from "react";
 import { cssVars } from "@webstudio-is/css-vars";
 
-const defaultTag = "code";
+export const defaultTag = "code";
 
 export const displayVarNamespace = cssVars.unique("code-display");
 

package/src/components/code.ws.tsx

@@ -1,37 +1,45 @@
 import { CodeIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
-import { displayVarNamespace } from "./code";
+import { type defaultTag, displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
+import type { Style, StyleValue } from "@webstudio-is/css-data";
+import { code } from "../css/normalize";
 
-const presetStyle: WsComponentMeta["presetStyle"] = {
-  display: {
-    type: "var",
-    value: displayVarNamespace,
-    fallbacks: [
-      {
-        type: "keyword",
-        value: "inline-block",
-      },
-    ],
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "0.2em",
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "0.2em",
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "#eee",
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "monospace",
-  },
+const display: StyleValue = {
+  type: "var",
+  value: displayVarNamespace,
+  fallbacks: [
+    {
+      type: "keyword",
+      value: "inline-block",
+    },
+  ],
 };
 
+const presetStyle = {
+  code: {
+    ...code,
+    display,
+    paddingLeft: {
+      type: "unit",
+      value: 0.2,
+      unit: "em",
+    },
+    paddingRight: {
+      type: "unit",
+      value: 0.2,
+      unit: "em",
+    },
+    backgroundColor: {
+      type: "rgb",
+      r: 238,
+      g: 238,
+      b: 238,
+      alpha: 1,
+    },
+  },
+} as const satisfies Record<typeof defaultTag, Style>;
+
 export const meta: WsComponentMeta = {
   category: "general",
   type: "rich-text",

package/src/components/component-meta.ts

@@ -3,6 +3,9 @@ import type { FunctionComponent } from "react";
 import type { IconProps } from "@webstudio-is/icons";
 import type { Style } from "@webstudio-is/css-data";
 import { PropMeta } from "@webstudio-is/generate-arg-types";
+import type { htmlTags as HtmlTags } from "html-tags";
+
+type PresetStyle = Partial<Record<HtmlTags, Style>>;
 
 // props are separated from the rest of the meta
 // so they can be exported separately and potentially tree-shaken
@@ -44,6 +47,6 @@ export type WsComponentMeta = Omit<
   z.infer<typeof WsComponentMeta>,
   "presetStyle" | "Icon"
 > & {
-  presetStyle?: Style;
+  presetStyle?: PresetStyle;
   Icon: FunctionComponent<IconProps>;
 };

package/src/components/form.tsx

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

package/src/components/form.ws.tsx

@@ -1,18 +1,20 @@
+import type { Style } from "@webstudio-is/css-data";
 import { FormIcon } from "@webstudio-is/icons";
+import { form } from "../css/normalize";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
+import type { defaultTag } from "./form";
 import { props } from "./__generated__/form.props";
 
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "px",
-    value: 20,
+  form: {
+    ...form,
+    minHeight: {
+      type: "unit",
+      unit: "px",
+      value: 20,
+    },
   },
-  boxSizing: {
-    type: "keyword",
-    value: "border-box",
-  },
-} as const;
+} as const satisfies Record<typeof defaultTag, Style>;
 
 export const meta: WsComponentMeta = {
   category: "forms",