@webstudio-is/react-sdk 0.9.0 → 0.10.1

package/lib/components/index.js

@@ -1,70 +1,120 @@
-import Body from "./body.ws";
-import Box from "./box.ws";
-import TextBlock from "./text-block.ws";
-import Heading from "./heading.ws";
-import Paragraph from "./paragraph.ws";
-import Link from "./link.ws";
-import Span from "./span.ws";
-import Bold from "./bold.ws";
-import Italic from "./italic.ws";
-import Superscript from "./superscript.ws";
-import Subscript from "./subscript.ws";
-import Button from "./button.ws";
-import Input from "./input.ws";
-import Form from "./form.ws";
-import Image from "./image.ws";
+import BodyMeta from "./body.ws";
+import BoxMeta from "./box.ws";
+import TextBlockMeta from "./text-block.ws";
+import HeadingMeta from "./heading.ws";
+import ParagraphMeta from "./paragraph.ws";
+import LinkMeta from "./link.ws";
+import RichTextLinkMeta from "./rich-text-link.ws";
+import SpanMeta from "./span.ws";
+import BoldMeta from "./bold.ws";
+import ItalicMeta from "./italic.ws";
+import SuperscriptMeta from "./superscript.ws";
+import SubscriptMeta from "./subscript.ws";
+import ButtonMeta from "./button.ws";
+import InputMeta from "./input.ws";
+import FormMeta from "./form.ws";
+import ImageMeta from "./image.ws";
+import { Body } from "./body";
+import { Box } from "./box";
+import { TextBlock } from "./text-block";
+import { Heading } from "./heading";
+import { Paragraph } from "./paragraph";
+import { Link } from "./link";
+import { RichTextLink } from "./rich-text-link";
+import { Span } from "./span";
+import { Bold } from "./bold";
+import { Italic } from "./italic";
+import { Superscript } from "./superscript";
+import { Subscript } from "./subscript";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Form } from "./form";
+import { Image } from "./image";
+const meta = {
+  Box: BoxMeta,
+  Body: BodyMeta,
+  TextBlock: TextBlockMeta,
+  Heading: HeadingMeta,
+  Paragraph: ParagraphMeta,
+  Link: LinkMeta,
+  RichTextLink: RichTextLinkMeta,
+  Span: SpanMeta,
+  Bold: BoldMeta,
+  Italic: ItalicMeta,
+  Superscript: SuperscriptMeta,
+  Subscript: SubscriptMeta,
+  Button: ButtonMeta,
+  Input: InputMeta,
+  Form: FormMeta,
+  Image: ImageMeta
+};
 const components = {
-    Body,
-    Box,
-    TextBlock,
-    Heading,
-    Paragraph,
-    Link,
-    Span,
-    Bold,
-    Italic,
-    Superscript,
-    Subscript,
-    Button,
-    Input,
-    Form,
-    Image,
+  Box,
+  Body,
+  TextBlock,
+  Heading,
+  Paragraph,
+  Link,
+  RichTextLink,
+  Span,
+  Bold,
+  Italic,
+  Superscript,
+  Subscript,
+  Button,
+  Input,
+  Form,
+  Image
 };
 let registeredComponents = null;
+let registeredComponentsMeta = null;
 const componentNames = Object.keys(components);
-export const getComponentNames = () => {
-    const uniqueNames = new Set([
-        ...componentNames,
-        ...Object.keys(registeredComponents || {}),
-    ]);
-    return [...uniqueNames.values()];
+const getComponentNames = () => {
+  const uniqueNames = /* @__PURE__ */ new Set([
+    ...componentNames,
+    ...Object.keys(registeredComponents || {})
+  ]);
+  return [...uniqueNames.values()];
+};
+const getComponentMeta = (name) => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    return { ...meta[name], ...registeredComponentsMeta[name] };
+  }
+  return meta[name];
 };
-export const getComponentMeta = (name) => {
-    if (registeredComponents != null &&
-        name in registeredComponents &&
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        registeredComponents[name].meta != null) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        return { ...components[name], ...registeredComponents[name].meta };
+const getComponent = (name) => {
+  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
+};
+const getComponentMetaProps = (name) => {
+  if (registeredComponentsMeta != null && name in registeredComponentsMeta) {
+    const allMetaPropKeys = /* @__PURE__ */ new Set([
+      ...Object.keys(meta[name]?.props ?? {}),
+      ...Object.keys(registeredComponentsMeta[name].props)
+    ]);
+    const props = {};
+    for (const key of allMetaPropKeys.values()) {
+      props[key] = {
+        ...meta[name]?.props[key],
+        ...registeredComponentsMeta[name]?.props?.[key],
+        defaultValue: registeredComponentsMeta[name]?.props?.[key]?.defaultValue ?? meta[name]?.props[key]?.defaultValue ?? null,
+        required: registeredComponentsMeta[name]?.props?.[key]?.required || meta[name]?.props[key]?.required
+      };
     }
-    return components[name];
+    return props;
+  }
+  return meta[name].props;
+};
+const registerComponents = (components2) => {
+  registeredComponents = components2;
 };
-/**
- * @todo Remove Component from meta and read directly (via import),
- * as meta information is not needed during production render.
- **/
-export const getComponent = (name) => {
-    return registeredComponents != null && name in registeredComponents
-        ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            registeredComponents[name]
-                .Component
-        : components[name].Component;
+const registerComponentsMeta = (componentsMeta) => {
+  registeredComponentsMeta = componentsMeta;
 };
-/**
- *  @todo: Allow register any component.
- * Now we can register only existings Components, as all our type system would
- * break otherwise, see getComponent etc. So its overwriteComponent now
- **/
-export const registerComponents = (components) => {
-    registeredComponents = components;
+export {
+  getComponent,
+  getComponentMeta,
+  getComponentMetaProps,
+  getComponentNames,
+  registerComponents,
+  registerComponentsMeta
 };

package/lib/components/input.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 = "input";
-export const Input = forwardRef(({ children: _children, ...props }, ref) => _jsx("input", { ...props, ref: ref }));
+const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", {
+  ...props,
+  ref
+}));
 Input.displayName = "Input";
+export {
+  Input
+};

package/lib/components/input.ws.js

@@ -1,12 +1,12 @@
 import { InputIcon } from "@webstudio-is/icons";
-import { Input } from "./input";
+import props from "./__generated__/input.props.json";
 const meta = {
-    Icon: InputIcon,
-    Component: Input,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Input",
+  type: "control",
+  label: "Input",
+  Icon: InputIcon,
+  props
+};
+var input_ws_default = meta;
+export {
+  input_ws_default as default
 };
-export default meta;

package/lib/components/italic.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 = "i";
-export const Italic = forwardRef((props, ref) => _jsx("i", { ...props, ref: ref }));
+const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", {
+  ...props,
+  ref
+}));
 Italic.displayName = "Italic";
+export {
+  Italic
+};

package/lib/components/italic.ws.js

@@ -1,19 +1,19 @@
 import { FontItalicIcon } from "@webstudio-is/icons";
-import { Italic } from "./italic";
+import props from "./__generated__/italic.props.json";
 const defaultStyle = {
-    fontStyle: {
-        type: "keyword",
-        value: "italic",
-    },
+  fontStyle: {
+    type: "keyword",
+    value: "italic"
+  }
 };
 const meta = {
-    Icon: FontItalicIcon,
-    Component: Italic,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: false,
-    isInlineOnly: true,
-    label: "Italic Text",
-    isListed: false,
+  type: "rich-text-child",
+  label: "Italic Text",
+  Icon: FontItalicIcon,
+  defaultStyle,
+  props
+};
+var italic_ws_default = meta;
+export {
+  italic_ws_default as default
 };
-export default meta;

package/lib/components/link.js

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

package/lib/components/link.ws.js

@@ -1,25 +1,25 @@
 import { Link2Icon } from "@webstudio-is/icons";
-import { Link } from "./link";
+import props from "./__generated__/link.props.json";
 const defaultStyle = {
-    minHeight: {
-        type: "unit",
-        unit: "em",
-        value: 1,
-    },
-    display: {
-        type: "keyword",
-        value: "inline-block",
-    },
+  minHeight: {
+    type: "unit",
+    unit: "em",
+    value: 1
+  },
+  display: {
+    type: "keyword",
+    value: "inline-block"
+  }
 };
 const meta = {
-    Icon: Link2Icon,
-    Component: Link,
-    defaultStyle,
-    canAcceptChildren: false,
-    isContentEditable: true,
-    isInlineOnly: false,
-    isListed: true,
-    label: "Link",
-    children: ["Link text you can edit"],
+  type: "rich-text",
+  label: "Link",
+  Icon: Link2Icon,
+  defaultStyle,
+  children: ["Link text you can edit"],
+  props
+};
+var link_ws_default = meta;
+export {
+  link_ws_default as default
 };
-export default meta;

package/lib/components/paragraph.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 = "p";
-export const Paragraph = forwardRef((props, ref) => _jsx("p", { ...props, ref: ref }));
+const Paragraph = forwardRef((props, ref) => /* @__PURE__ */ jsx("p", {
+  ...props,
+  ref
+}));
 Paragraph.displayName = "Paragraph";
+export {
+  Paragraph
+};

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
+};