@webstudio-is/react-sdk 0.51.0 → 0.53.0

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",

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

@@ -2,17 +2,19 @@ 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",