@webstudio-is/react-sdk 0.8.0 → 0.10.0

package/lib/components/paragraph.ws.js

@@ -1,13 +1,13 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
-import { Paragraph } from "./paragraph";
+import props from "./__generated__/paragraph.props.json";
 const meta = {
-    Icon: TextAlignLeftIcon,
-    Component: Paragraph,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Paragraph",
-    children: ["Pragraph you can edit"],
+  type: "rich-text",
+  label: "Paragraph",
+  Icon: TextAlignLeftIcon,
+  children: ["Pragraph you can edit"],
+  props
+};
+var paragraph_ws_default = meta;
+export {
+  paragraph_ws_default as default
 };
-export default meta;

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

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const RichTextLink = forwardRef(
+  ({ href = "", ...props }, ref) => /* @__PURE__ */ jsx("a", {
+    ...props,
+    href,
+    ref
+  })
+);
+RichTextLink.displayName = "RichTextLink";
+export {
+  RichTextLink
+};

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

@@ -0,0 +1,12 @@
+import { Link2Icon } from "@webstudio-is/icons";
+import props from "./__generated__/rich-text-link.props.json";
+const meta = {
+  type: "rich-text-child",
+  label: "Link",
+  Icon: Link2Icon,
+  props
+};
+var rich_text_link_ws_default = meta;
+export {
+  rich_text_link_ws_default as default
+};

package/lib/components/span.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "span";
-export const Span = forwardRef((props, ref) => _jsx("span", { ...props, ref: ref }));
+const Span = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref
+}));
 Span.displayName = "Span";
+export {
+  Span
+};

package/lib/components/span.ws.js

@@ -1,12 +1,12 @@
 import { BrushIcon } from "@webstudio-is/icons";
-import { Span } from "./span";
+import props from "./__generated__/span.props.json";
 const meta = {
-    Icon: BrushIcon,
-    Component: Span,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    label: "Styled Text",
-    isInlineOnly: true,
-    isListed: false,
+  type: "rich-text-child",
+  label: "Styled Text",
+  Icon: BrushIcon,
+  props
+};
+var span_ws_default = meta;
+export {
+  span_ws_default as default
 };
-export default meta;

package/lib/components/subscript.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "sub";
-export const Subscript = forwardRef((props, ref) => _jsx("sub", { ...props, ref: ref }));
+const Subscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sub", {
+  ...props,
+  ref
+}));
 Subscript.displayName = "Subscript";
+export {
+  Subscript
+};

package/lib/components/subscript.ws.js

@@ -1,12 +1,12 @@
 import { SubscriptIcon } from "@webstudio-is/icons";
-import { Subscript } from "./subscript";
+import props from "./__generated__/subscript.props.json";
 const meta = {
-    Icon: SubscriptIcon,
-    Component: Subscript,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    label: "Subscript Text",
-    isInlineOnly: true,
-    isListed: false,
+  type: "rich-text-child",
+  label: "Subscript Text",
+  Icon: SubscriptIcon,
+  props
+};
+var subscript_ws_default = meta;
+export {
+  subscript_ws_default as default
 };
-export default meta;

package/lib/components/superscript.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "sup";
-export const Superscript = forwardRef((props, ref) => _jsx("sup", { ...props, ref: ref }));
+const Superscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sup", {
+  ...props,
+  ref
+}));
 Superscript.displayName = "Bold";
+export {
+  Superscript
+};

package/lib/components/superscript.ws.js

@@ -1,12 +1,12 @@
 import { SuperscriptIcon } from "@webstudio-is/icons";
-import { Superscript } from "./superscript";
+import props from "./__generated__/superscript.props.json";
 const meta = {
-    Icon: SuperscriptIcon,
-    Component: Superscript,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    label: "Superscript Text",
-    isInlineOnly: true,
-    isListed: false,
+  type: "rich-text-child",
+  label: "Superscript Text",
+  Icon: SuperscriptIcon,
+  props
+};
+var superscript_ws_default = meta;
+export {
+  superscript_ws_default as default
 };
-export default meta;

package/lib/components/text-block.js

@@ -1,5 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "div";
-export const TextBlock = forwardRef((props, ref) => _jsx("div", { ...props, ref: ref }));
+const TextBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref
+}));
 TextBlock.displayName = "TextBlock";
+export {
+  TextBlock
+};

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

@@ -1,21 +1,21 @@
 import { TextIcon } from "@webstudio-is/icons";
-import { TextBlock } from "./text-block";
+import props from "./__generated__/text-block.props.json";
 const defaultStyle = {
-    minHeight: {
-        type: "unit",
-        unit: "em",
-        value: 1,
-    },
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1
+  }
 };
 const meta = {
-    Icon: TextIcon,
-    Component: TextBlock,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Text Block",
-    children: ["Block of text you can edit"],
+  type: "rich-text",
+  label: "Text Block",
+  Icon: TextIcon,
+  defaultStyle,
+  children: ["Block of text you can edit"],
+  props
+};
+var text_block_ws_default = meta;
+export {
+  text_block_ws_default as default
 };
-export default meta;

package/lib/css/breakpoints.js

@@ -1,6 +1,9 @@
-export const initialBreakpoints = [
-    { label: "Mobile", minWidth: 360 },
-    { label: "Tablet", minWidth: 768 },
-    { label: "Laptop", minWidth: 1024 },
-    { label: "Desktop", minWidth: 1280 },
+const initialBreakpoints = [
+  { label: "Mobile", minWidth: 360 },
+  { label: "Tablet", minWidth: 768 },
+  { label: "Laptop", minWidth: 1024 },
+  { label: "Desktop", minWidth: 1280 }
 ];
+export {
+  initialBreakpoints
+};

package/lib/css/categories.js

@@ -1,226 +1,224 @@
 const layout = [
-    "display",
-    // Flex
-    "flexDirection",
-    "flexWrap",
-    // Flex or grid
-    "alignItems",
-    "justifyContent",
-    "alignContent",
-    // Grid
-    "placeContent",
-    "justifyItems",
-    "rowGap",
-    "columnGap",
-    "gridAutoFlow",
-    "gridAutoRows",
-    "gridAutoColumns",
-    "gridTemplateColumns",
-    "gridTemplateRows",
-    "gridTemplateAreas",
+  "display",
+  "flexDirection",
+  "flexWrap",
+  "alignItems",
+  "justifyContent",
+  "alignContent",
+  "placeContent",
+  "justifyItems",
+  "rowGap",
+  "columnGap",
+  "gridAutoFlow",
+  "gridAutoRows",
+  "gridAutoColumns",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas"
 ];
 const flexChild = [
-    "flexShrink",
-    "flexGrow",
-    "flexBasis",
-    "alignSelf",
-    "order",
+  "flexShrink",
+  "flexGrow",
+  "flexBasis",
+  "alignSelf",
+  "order"
 ];
 const gridChild = [
-    "gridRowEnd",
-    "gridRowStart",
-    "gridColumnStart",
-    "gridColumnEnd",
-    "alignSelf",
-    "justifySelf",
-    "order",
+  "gridRowEnd",
+  "gridRowStart",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "alignSelf",
+  "justifySelf",
+  "order"
 ];
 const spacing = [
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft"
 ];
 const size = [
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "overflow",
-    "objectFit",
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "overflow",
+  "objectFit",
+  "aspectRatio"
 ];
 const position = [
-    "position",
-    "top",
-    "right",
-    "bottom",
-    "left",
-    "zIndex",
-    "float",
-    "clear",
+  "position",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "zIndex",
+  "float",
+  "clear"
 ];
 const typography = [
-    "fontFamily",
-    "fontWeight",
-    "fontSize",
-    "lineHeight",
-    "color",
-    "textAlign",
-    "fontStyle",
-    "textDecorationColor",
-    "textDecorationLine",
-    "textDecorationStyle",
-    "letterSpacing",
-    "textIndent",
-    "columnCount",
-    "columnGap",
-    "columnRuleStyle",
-    "columnRuleWidth",
-    "columnRuleColor",
-    "textTransform",
-    "direction",
-    "whiteSpace",
-    "textShadow",
-    // More
-    "fontSizeAdjust",
-    "fontStretch",
-    "fontVariant",
-    "textAlignLast",
-    "textJustify",
-    "textOverflow",
-    "textSizeAdjust",
-    "verticalAlign",
-    "wordSpacing",
-    "wordBreak",
-    "wordWrap",
+  "fontFamily",
+  "fontWeight",
+  "fontSize",
+  "lineHeight",
+  "color",
+  "textAlign",
+  "fontStyle",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "letterSpacing",
+  "textIndent",
+  "columnCount",
+  "columnGap",
+  "columnRuleStyle",
+  "columnRuleWidth",
+  "columnRuleColor",
+  "textTransform",
+  "direction",
+  "whiteSpace",
+  "textShadow",
+  "fontSizeAdjust",
+  "fontStretch",
+  "fontVariant",
+  "textAlignLast",
+  "textJustify",
+  "textOverflow",
+  "textSizeAdjust",
+  "verticalAlign",
+  "wordSpacing",
+  "wordBreak",
+  "wordWrap"
 ];
 const backgrounds = [
-    "backgroundAttachment",
-    "backgroundClip",
-    "backgroundColor",
-    "backgroundImage",
-    "backgroundOrigin",
-    "backgroundPositionX",
-    "backgroundPositionY",
-    "backgroundRepeat",
-    "backgroundSize",
+  "backgroundAttachment",
+  "backgroundClip",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundOrigin",
+  "backgroundPositionX",
+  "backgroundPositionY",
+  "backgroundRepeat",
+  "backgroundSize"
 ];
 const borders = [
-    "borderTopLeftRadius",
-    "borderTopRightRadius",
-    "borderBottomLeftRadius",
-    "borderBottomRightRadius",
-    "borderTopStyle",
-    "borderRightStyle",
-    "borderBottomStyle",
-    "borderLeftStyle",
-    "borderTopColor",
-    "borderRightColor",
-    "borderBottomColor",
-    "borderLeftColor",
-    "borderTopWidth",
-    "borderRightWidth",
-    "borderBottomWidth",
-    "borderLeftWidth",
-    // More
-    "borderImageSlice",
-    "borderImageWidth",
-    "borderImageOutset",
-    "borderImageRepeat",
-    "borderImageSource",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius",
+  "borderTopStyle",
+  "borderRightStyle",
+  "borderBottomStyle",
+  "borderLeftStyle",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderImageSlice",
+  "borderImageWidth",
+  "borderImageOutset",
+  "borderImageRepeat",
+  "borderImageSource"
 ];
 const effects = [
-    "mixBlendMode",
-    "opacity",
-    "outlineColor",
-    "outlineOffset",
-    "outlineStyle",
-    "outlineWidth",
-    "boxShadow",
-    "transform",
-    "filter",
-    "backdropFilter",
-    "cursor",
-    // More
-    "animationDelay",
-    "animationDirection",
-    "animationDuration",
-    "animationFillMode",
-    "animationIterationCount",
-    "animationName",
-    "animationPlayState",
-    "animationTimingFunction",
-    "transitionDelay",
-    "transitionDuration",
-    "transitionProperty",
-    "transitionTimingFunction",
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "boxShadow",
+  "transform",
+  "filter",
+  "backdropFilter",
+  "cursor",
+  "animationDelay",
+  "animationDirection",
+  "animationDuration",
+  "animationFillMode",
+  "animationIterationCount",
+  "animationName",
+  "animationPlayState",
+  "animationTimingFunction",
+  "transitionDelay",
+  "transitionDuration",
+  "transitionProperty",
+  "transitionTimingFunction"
 ];
 const other = [
-    "resize",
-    "clip",
-    "visibility",
-    "boxSizing",
-    "content",
-    "quotes",
-    "counterReset",
-    "counterIncrement",
-    "inlineSize",
-    "blockSize",
-    "minInlineSize",
-    "minBlockSize",
-    "maxInlineSize",
-    "maxBlockSize",
-    "userSelect",
-    "pointerEvents",
+  "resize",
+  "clip",
+  "visibility",
+  "boxSizing",
+  "content",
+  "quotes",
+  "counterReset",
+  "counterIncrement",
+  "inlineSize",
+  "blockSize",
+  "minInlineSize",
+  "minBlockSize",
+  "maxInlineSize",
+  "maxBlockSize",
+  "userSelect",
+  "pointerEvents"
 ];
-export const categories = {
-    layout: {
-        label: "Layout",
-        properties: layout,
-        moreFrom: "",
-    },
-    flexChild: {
-        label: "Flex Child",
-        properties: flexChild,
-        moreFrom: "",
-    },
-    gridChild: {
-        label: "Grid Child",
-        properties: gridChild,
-        moreFrom: "",
-    },
-    spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
-    size: { label: "Size", properties: size, moreFrom: "" },
-    position: { label: "Position", properties: position, moreFrom: "" },
-    typography: {
-        label: "Typography",
-        properties: typography,
-        moreFrom: "fontSizeAdjust",
-    },
-    backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
-    borders: {
-        label: "Borders",
-        properties: borders,
-        moreFrom: "borderImageSlice",
-    },
-    effects: {
-        label: "Effects",
-        properties: effects,
-        moreFrom: "animationDelay",
-    },
-    other: { label: "Other", properties: other, moreFrom: "" },
+const categories = {
+  layout: {
+    label: "Layout",
+    properties: layout,
+    moreFrom: ""
+  },
+  flexChild: {
+    label: "Flex Child",
+    properties: flexChild,
+    moreFrom: ""
+  },
+  gridChild: {
+    label: "Grid Child",
+    properties: gridChild,
+    moreFrom: ""
+  },
+  spacing: { label: "Spacing", properties: spacing, moreFrom: "" },
+  size: { label: "Size", properties: size, moreFrom: "" },
+  position: { label: "Position", properties: position, moreFrom: "" },
+  typography: {
+    label: "Typography",
+    properties: typography,
+    moreFrom: "fontSizeAdjust"
+  },
+  backgrounds: { label: "Backgrounds", properties: backgrounds, moreFrom: "" },
+  borders: {
+    label: "Borders",
+    properties: borders,
+    moreFrom: "borderImageSlice"
+  },
+  effects: {
+    label: "Effects",
+    properties: effects,
+    moreFrom: "animationDelay"
+  },
+  other: { label: "Other", properties: other, moreFrom: "" }
 };
-export const propertyCategoryMap = {};
+const propertyCategoryMap = {};
 let category;
 for (category in categories) {
-    for (const property of categories[category].properties) {
-        // We are widening the type here
-        propertyCategoryMap[property] = category;
-    }
+  for (const property of categories[category].properties) {
+    propertyCategoryMap[property] = category;
+  }
 }
+export {
+  categories,
+  propertyCategoryMap
+};