@webstudio-is/react-sdk 0.51.0 → 0.53.0

package/src/components/link.tsx

@@ -1,6 +1,8 @@
 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
 // - props meta should be generated from Remix link

package/src/components/link.ws.tsx

@@ -1,24 +1,30 @@
-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,
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block",
+  a: {
+    ...a,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1,
+    },
+    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"],
 };

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/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,6 +1,7 @@
 import { type ReadableAtom, atom } from "nanostores";
 import { createContext } from "react";
-import type { Assets, Pages, PropsByInstanceId } from "./props";
+import type { Assets } from "@webstudio-is/asset-uploader";
+import type { Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;

package/src/css/css.ts

@@ -0,0 +1,57 @@
+import { createCssEngine } from "@webstudio-is/css-engine";
+import type { Asset } from "@webstudio-is/asset-uploader";
+import type { Build } from "@webstudio-is/project-build";
+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";
+
+type Data = {
+  assets: Asset[];
+  breakpoints?: Build["breakpoints"];
+  styles?: Build["styles"];
+  styleSourceSelections?: Build["styleSourceSelections"];
+};
+
+export const generateCssText = (data: Data) => {
+  const assets = new Map<Asset["id"], Asset>(
+    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 !== undefined) {
+      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;
+};

package/src/css/get-browser-style.ts

@@ -1,5 +1,10 @@
 import { detectFont } from "detect-font";
-import { keywordValues, Style, StyleValue, Unit } from "@webstudio-is/css-data";
+import {
+  type Style,
+  type StyleValue,
+  type Unit,
+  keywordValues,
+} from "@webstudio-is/css-data";
 import { properties, units } from "@webstudio-is/css-data";
 
 const unitsList = Object.values(units).flat();

package/src/css/global-rules.ts

@@ -0,0 +1,29 @@
+import type { CssEngine } from "@webstudio-is/css-engine";
+import type { Assets, FontAsset } from "@webstudio-is/asset-uploader";
+import {
+  type FontFormat,
+  FONT_FORMATS,
+  getFontFaces,
+} from "@webstudio-is/fonts";
+
+export const addGlobalRules = (
+  engine: CssEngine,
+  { assets }: { assets: Assets }
+) => {
+  // @todo we need to figure out all global resets while keeping
+  // the engine aware of all of them.
+  // Ideally, the user is somehow aware and in control of the reset
+  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+
+  const fontAssets: Array<FontAsset> = [];
+  for (const asset of assets.values()) {
+    if (asset && FONT_FORMATS.has(asset.format as FontFormat)) {
+      fontAssets.push(asset as FontAsset);
+    }
+  }
+
+  const fontFaces = getFontFaces(fontAssets);
+  for (const fontFace of fontFaces) {
+    engine.addFontFaceRule(fontFace);
+  }
+};

package/src/css/index.ts

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

package/src/css/normalize-type-check.ts

@@ -0,0 +1,13 @@
+import * as normalize from "./normalize";
+import type { htmlTags as HtmlTags } from "html-tags";
+import type { Style } from "@webstudio-is/css-data";
+
+// no way I found to check exports https://github.com/microsoft/TypeScript/issues/38511
+// we can check here that all exports represents a valid html tag
+const normalizeWithKeyof = { ...normalize };
+
+type ExportedTags = keyof typeof normalizeWithKeyof;
+
+type ValidTags = ExportedTags extends HtmlTags ? ExportedTags : false;
+
+normalizeWithKeyof satisfies Record<ValidTags, Style>;