@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/lib/components/link.js

@@ -1,11 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const Link = forwardRef(
-  ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ jsx("a", { ...props, href, ref });
-  }
-);
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+const defaultTag = "a";
+const Link = forwardRef((props, ref) => {
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      href: typeof href === "string" ? href : href?.path,
+      ref
+    }
+  );
+});
 Link.displayName = "Link";
 export {
-  Link
+  Link,
+  defaultTag
 };

package/lib/components/link.ws.js

@@ -1,26 +1,37 @@
-import { Link2Icon } from "@webstudio-is/icons";
+import { LinkIcon } from "@webstudio-is/icons";
+import { a } from "../css/normalize";
 import { props } from "./__generated__/link.props";
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...a,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1
+    },
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: Link2Icon,
+  Icon: LinkIcon,
   presetStyle,
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
+    }
+  },
   initialProps: ["href", "target", "prefetch"]
 };
 export {

package/lib/components/list-item.js

@@ -10,5 +10,6 @@ const ListItem = forwardRef(
 );
 ListItem.displayName = "ListItem";
 export {
-  ListItem
+  ListItem,
+  defaultTag
 };

package/lib/components/list-item.ws.js

@@ -1,11 +1,16 @@
 import { ListItemIcon } from "@webstudio-is/icons";
+import { li } from "../css/normalize";
 import { props } from "./__generated__/list-item.props";
+const presetStyle = {
+  li
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,
-  children: ["List Item you can edit"]
+  children: ["List Item you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/list.ws.js

@@ -1,17 +1,36 @@
 import { ListIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list.props";
+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"
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "40px"
+  ul: {
+    ...ul,
+    marginTop: {
+      type: "keyword",
+      value: "0"
+    },
+    marginBottom: {
+      type: "keyword",
+      value: "10px"
+    },
+    paddingLeft: {
+      type: "keyword",
+      value: "40px"
+    }
   }
 };
 const meta = {

package/lib/components/paragraph.js

@@ -4,5 +4,6 @@ const defaultTag = "p";
 const Paragraph = forwardRef((props, ref) => /* @__PURE__ */ jsx("p", { ...props, ref }));
 Paragraph.displayName = "Paragraph";
 export {
-  Paragraph
+  Paragraph,
+  defaultTag
 };

package/lib/components/paragraph.ws.js

@@ -1,11 +1,16 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
+import { p } from "../css/normalize";
 import { props } from "./__generated__/paragraph.props";
+const presetStyle = {
+  p
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,
-  children: ["Pragraph you can edit"]
+  children: ["Pragraph you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/rich-text-link.ws.js

@@ -1,5 +1,5 @@
 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;
 const meta = {
   ...linkMetaRest,
@@ -7,8 +7,11 @@ const meta = {
   children: []
 };
 const propsMeta = {
-  ...propsLinkMeta,
-  props
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  }
 };
 export {
   meta,

package/lib/components/separator.js

@@ -10,5 +10,6 @@ const Separator = forwardRef(
 );
 Separator.displayName = "Separator";
 export {
-  Separator
+  Separator,
+  defaultTag
 };

package/lib/components/separator.ws.js

@@ -1,17 +1,33 @@
 import { DashIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/separator.props";
+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"
+    }
   }
 };
 const meta = {

package/lib/components/span.js

@@ -4,5 +4,6 @@ const defaultTag = "span";
 const Span = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", { ...props, ref }));
 Span.displayName = "Span";
 export {
-  Span
+  Span,
+  defaultTag
 };

package/lib/components/span.ws.js

@@ -1,9 +1,14 @@
-import { BrushIcon } from "@webstudio-is/icons";
+import { PaintBrushIcon } from "@webstudio-is/icons";
+import { span } from "../css/normalize";
 import { props } from "./__generated__/span.props";
+const presetStyle = {
+  span
+};
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: BrushIcon
+  Icon: PaintBrushIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/subscript.js

@@ -4,5 +4,6 @@ const defaultTag = "sub";
 const Subscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";
 export {
-  Subscript
+  Subscript,
+  defaultTag
 };

package/lib/components/subscript.ws.js

@@ -1,9 +1,14 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
+import { sub } from "../css/normalize";
 import { props } from "./__generated__/subscript.props";
+const presetStyle = {
+  sub
+};
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: SubscriptIcon
+  Icon: SubscriptIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/superscript.js

@@ -4,5 +4,6 @@ const defaultTag = "sup";
 const Superscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sup", { ...props, ref }));
 Superscript.displayName = "Bold";
 export {
-  Superscript
+  Superscript,
+  defaultTag
 };

package/lib/components/superscript.ws.js

@@ -1,9 +1,14 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
+import { sup } from "../css/normalize";
 import { props } from "./__generated__/superscript.props";
+const presetStyle = {
+  sup
+};
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: SuperscriptIcon
+  Icon: SuperscriptIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/text-block.js

@@ -4,5 +4,6 @@ const defaultTag = "div";
 const TextBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
 TextBlock.displayName = "TextBlock";
 export {
-  TextBlock
+  TextBlock,
+  defaultTag
 };

package/lib/components/text-block.ws.js

@@ -1,17 +1,21 @@
-import { TextIcon } from "@webstudio-is/icons";
+import { TextBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/text-block.props";
+import { div } from "../css/normalize";
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
+  div: {
+    ...div,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1
+    }
   }
 };
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: TextIcon,
+  Icon: TextBlockIcon,
   presetStyle,
   children: ["Block of text you can edit"]
 };

package/lib/context.js

@@ -2,7 +2,8 @@ import { atom } from "nanostores";
 import { createContext } from "react";
 const ReactSdkContext = createContext({
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
-  assetsStore: atom(/* @__PURE__ */ new Map())
+  assetsStore: atom(/* @__PURE__ */ new Map()),
+  pagesStore: atom(/* @__PURE__ */ new Map())
 });
 export {
   ReactSdkContext

package/lib/css/css.js

@@ -0,0 +1,44 @@
+import { createCssEngine } from "@webstudio-is/css-engine";
+import { getComponentNames } from "../components/components-utils";
+import { getComponentMeta } from "../components";
+import { componentAttribute, idAttribute } from "../tree";
+import { addGlobalRules } from "./global-rules";
+import { getStyleRules } from "./style-rules";
+const generateCssText = (data) => {
+  const assets = new Map(
+    data.assets.map((asset) => [asset.id, asset])
+  );
+  const breakpoints = new Map(data.breakpoints);
+  const styles = new Map(data.styles);
+  const styleSourceSelections = new Map(data.styleSourceSelections);
+  const engine = createCssEngine({ name: "ssr" });
+  addGlobalRules(engine, { assets });
+  for (const breakpoint of breakpoints.values()) {
+    engine.addMediaRule(breakpoint.id, breakpoint);
+  }
+  for (const component of getComponentNames()) {
+    const meta = getComponentMeta(component);
+    const presetStyle = meta?.presetStyle;
+    if (presetStyle !== void 0) {
+      for (const [tag, style] of Object.entries(presetStyle)) {
+        engine.addStyleRule(
+          `${tag}:where([${componentAttribute}=${component}])`,
+          {
+            style
+          }
+        );
+      }
+    }
+  }
+  const styleRules = getStyleRules(styles, styleSourceSelections);
+  for (const { breakpointId, instanceId, style } of styleRules) {
+    engine.addStyleRule(`[${idAttribute}="${instanceId}"]`, {
+      breakpoint: breakpointId,
+      style
+    });
+  }
+  return engine.cssText;
+};
+export {
+  generateCssText
+};

package/lib/css/get-browser-style.js

@@ -1,5 +1,7 @@
 import { detectFont } from "detect-font";
-import { keywordValues } from "@webstudio-is/css-data";
+import {
+  keywordValues
+} from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 const unitsList = Object.values(units).flat();
 const unitRegex = new RegExp(`${unitsList.join("|")}`);

package/lib/css/global-rules.js

@@ -0,0 +1,20 @@
+import {
+  FONT_FORMATS,
+  getFontFaces
+} from "@webstudio-is/fonts";
+const addGlobalRules = (engine, { assets }) => {
+  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  const fontAssets = [];
+  for (const asset of assets.values()) {
+    if (asset && FONT_FORMATS.has(asset.format)) {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = getFontFaces(fontAssets);
+  for (const fontFace of fontFaces) {
+    engine.addFontFaceRule(fontFace);
+  }
+};
+export {
+  addGlobalRules
+};

package/lib/css/index.js

@@ -1,2 +1,4 @@
 export * from "./get-browser-style";
-export * from "./categories";
+export * from "./global-rules";
+export * from "./style-rules";
+export * from "./css";

package/lib/css/normalize-type-check.js

@@ -0,0 +1,3 @@
+import * as normalize from "./normalize";
+const normalizeWithKeyof = { ...normalize };
+normalizeWithKeyof;