@webstudio-is/react-sdk 0.51.0 → 0.52.0

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/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/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;

package/lib/css/normalize.js

@@ -0,0 +1,338 @@
+import { borders } from "./presets";
+const boxSizing = {
+  type: "keyword",
+  value: "border-box"
+};
+const baseStyle = {
+  boxSizing,
+  ...borders
+};
+const div = baseStyle;
+const address = baseStyle;
+const article = baseStyle;
+const aside = baseStyle;
+const figure = baseStyle;
+const footer = baseStyle;
+const header = baseStyle;
+const main = baseStyle;
+const nav = baseStyle;
+const section = baseStyle;
+const form = baseStyle;
+const h1 = baseStyle;
+const h2 = baseStyle;
+const h3 = baseStyle;
+const h4 = baseStyle;
+const h5 = baseStyle;
+const h6 = baseStyle;
+const i = baseStyle;
+const img = baseStyle;
+const a = baseStyle;
+const li = baseStyle;
+const ul = baseStyle;
+const ol = baseStyle;
+const p = baseStyle;
+const span = baseStyle;
+const html = {
+  /* 1 */
+  lineHeight: {
+    type: "unit",
+    value: 1.15,
+    unit: "number"
+  },
+  /* 2 */
+  textSizeAdjust: {
+    type: "unit",
+    value: 100,
+    unit: "%"
+  },
+  /* 3 */
+  tabSize: {
+    type: "unit",
+    value: 4,
+    unit: "number"
+  },
+  boxSizing,
+  ...borders
+};
+const body = {
+  /* 1 */
+  marginTop: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginRight: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginBottom: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginLeft: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  /* 2 */
+  fontFamily: {
+    type: "keyword",
+    value: `system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'`
+  },
+  boxSizing,
+  ...borders
+};
+const hr = {
+  /* 1 */
+  height: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  /* 2 */
+  color: { type: "keyword", value: "inherit" },
+  boxSizing,
+  ...borders
+};
+const b = {
+  fontWeight: {
+    type: "keyword",
+    value: "bolder"
+  },
+  boxSizing,
+  ...borders
+};
+const strong = b;
+const code = {
+  /* 1 */
+  fontFamily: {
+    type: "keyword",
+    value: `ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace`
+  },
+  /* 2 */
+  fontSize: {
+    type: "unit",
+    value: 1,
+    unit: "em"
+  },
+  boxSizing,
+  ...borders
+};
+const kbd = code;
+const samp = code;
+const pre = code;
+const small = {
+  fontSize: {
+    type: "unit",
+    value: 80,
+    unit: "%"
+  },
+  boxSizing,
+  ...borders
+};
+const subSupBase = {
+  fontSize: {
+    type: "unit",
+    value: 75,
+    unit: "%"
+  },
+  lineHeight: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  position: {
+    type: "keyword",
+    value: "relative"
+  },
+  verticalAlign: {
+    type: "keyword",
+    value: "baseline"
+  },
+  boxSizing,
+  ...borders
+};
+const sub = {
+  ...subSupBase,
+  bottom: {
+    type: "unit",
+    value: -0.25,
+    unit: "em"
+  }
+};
+const sup = {
+  ...subSupBase,
+  top: {
+    type: "unit",
+    value: -0.5,
+    unit: "em"
+  }
+};
+const table = {
+  /* 1 */
+  textIndent: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  ...borders,
+  /* 2 */
+  borderTopColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderRightColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderBottomColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  borderLeftColor: {
+    type: "keyword",
+    value: "inherit"
+  },
+  boxSizing
+};
+const buttonBase = {
+  /* 1 */
+  fontFamily: {
+    type: "keyword",
+    value: "inherit"
+  },
+  fontSize: {
+    type: "unit",
+    value: 100,
+    unit: "%"
+  },
+  lineHeight: {
+    type: "unit",
+    value: 1.15,
+    unit: "number"
+  },
+  /* 2 */
+  marginTop: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginRight: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginBottom: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  marginLeft: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  boxSizing,
+  ...borders
+};
+const input = buttonBase;
+const optgroup = buttonBase;
+const textarea = buttonBase;
+const button = {
+  ...buttonBase,
+  textTransform: {
+    type: "keyword",
+    value: "none"
+  }
+};
+const select = button;
+const legend = {
+  paddingTop: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  paddingRight: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  paddingBottom: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  paddingLeft: {
+    type: "unit",
+    value: 0,
+    unit: "number"
+  },
+  boxSizing,
+  ...borders
+};
+const progress = {
+  verticalAlign: {
+    type: "keyword",
+    value: "baseline"
+  },
+  boxSizing,
+  ...borders
+};
+const summary = {
+  display: {
+    type: "keyword",
+    value: "list-item"
+  },
+  boxSizing,
+  ...borders
+};
+export {
+  a,
+  address,
+  article,
+  aside,
+  b,
+  body,
+  button,
+  code,
+  div,
+  figure,
+  footer,
+  form,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hr,
+  html,
+  i,
+  img,
+  input,
+  kbd,
+  legend,
+  li,
+  main,
+  nav,
+  ol,
+  optgroup,
+  p,
+  pre,
+  progress,
+  samp,
+  section,
+  select,
+  small,
+  span,
+  strong,
+  sub,
+  summary,
+  sup,
+  table,
+  textarea,
+  ul
+};