@webstudio-is/react-sdk 0.70.0 → 0.72.0

package/lib/components/button.ws.js

@@ -1,31 +0,0 @@
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import { button } from "../css/normalize";
-import {
-  defaultStates
-} from "./component-meta";
-import { props } from "./__generated__/button.props";
-const presetStyle = {
-  button
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Button"],
-  label: "Button",
-  icon: ButtonElementIcon,
-  presetStyle,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 1
-};
-const propsMeta = {
-  props,
-  initialProps: ["type", "innerText", "aria-label"]
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/checkbox-field.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "label";
-const CheckboxField = forwardRef((props, ref) => /* @__PURE__ */ jsx("label", { ...props, ref }));
-CheckboxField.displayName = "CheckboxField";
-export {
-  CheckboxField,
-  defaultTag
-};

package/lib/components/checkbox-field.ws.js

@@ -1,44 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "./component-meta";
-import { props } from "./__generated__/checkbox-field.props";
-import { label } from "../css/normalize";
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "flex" } }
-  ]
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  label: "Checkbox",
-  icon: CheckboxCheckedIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CheckboxField",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "TextBlock",
-          label: "Checkbox Label",
-          props: [],
-          children: [{ type: "text", value: "Checkbox" }]
-        }
-      ]
-    }
-  ]
-};
-const propsMeta = {
-  props,
-  initialProps: []
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/checkbox.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "input";
-const Checkbox = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, type: "checkbox", ref }));
-Checkbox.displayName = "Checkbox";
-export {
-  Checkbox,
-  defaultTag
-};

package/lib/components/checkbox.ws.js

@@ -1,40 +0,0 @@
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "./component-meta";
-import { input } from "../css/normalize";
-import { props } from "./__generated__/checkbox.props";
-const presetStyle = {
-  input: [
-    ...input,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-};
-const meta = {
-  type: "control",
-  label: "Checkbox Input",
-  icon: CheckboxCheckedIcon,
-  presetStyle,
-  order: 6,
-  states: [
-    ...defaultStates,
-    { selector: ":checked", label: "Checked" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" },
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" },
-    { selector: ":read-only", label: "Read Only" },
-    { selector: ":read-write", label: "Read Write" }
-  ]
-};
-const propsMeta = {
-  props,
-  initialProps: ["name"]
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/code-text.js

@@ -1,22 +0,0 @@
-import {
-  forwardRef,
-  createElement
-} from "react";
-import { cssVars } from "@webstudio-is/css-vars";
-const defaultTag = "code";
-const displayVarNamespace = cssVars.unique("code-display");
-const blockStyle = {
-  [cssVars.define(displayVarNamespace, true)]: "block"
-};
-const CodeText = forwardRef(
-  ({ inline = false, ...props }, ref) => {
-    const style = inline ? void 0 : blockStyle;
-    return createElement(defaultTag, { ...props, style, ref });
-  }
-);
-CodeText.displayName = "CodeText";
-export {
-  CodeText,
-  defaultTag,
-  displayVarNamespace
-};

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

@@ -1,56 +0,0 @@
-import { CodeTextIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "./component-meta";
-import { displayVarNamespace } from "./code-text";
-import { props } from "./__generated__/code-text.props";
-import { code } from "../css/normalize";
-const presetStyle = {
-  code: [
-    ...code,
-    {
-      property: "display",
-      value: {
-        type: "var",
-        value: displayVarNamespace,
-        fallbacks: [{ type: "keyword", value: "inline-block" }]
-      }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 0.2, unit: "em" }
-    },
-    {
-      property: "backgroundColor",
-      value: { type: "rgb", r: 238, g: 238, b: 238, alpha: 1 }
-    }
-  ]
-};
-const meta = {
-  category: "general",
-  type: "rich-text",
-  label: "Code Text",
-  icon: CodeTextIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CodeText",
-      children: [{ type: "text", value: "Code you can edit" }]
-    }
-  ],
-  order: 8
-};
-const propsMeta = {
-  props,
-  initialProps: ["inline", "lang", "meta"]
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/components.js

@@ -1,68 +0,0 @@
-import { Slot } from "./slot";
-import { Fragment } from "./fragment";
-import { HtmlEmbed } from "./html-embed";
-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 { LinkBlock } from "./link-block";
-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";
-import { Blockquote } from "./blockquote";
-import { List } from "./list";
-import { ListItem } from "./list-item";
-import { Separator } from "./separator";
-import { CodeText } from "./code-text";
-import { Label } from "./label";
-import { SuccessMessage } from "./success-message";
-import { ErrorMessage } from "./error-message";
-import { Textarea } from "./textarea";
-import { RadioButtonField } from "./radio-button-field";
-import { RadioButton } from "./radio-button";
-import { CheckboxField } from "./checkbox-field";
-import { Checkbox } from "./checkbox";
-export {
-  Blockquote,
-  Body,
-  Bold,
-  Box,
-  Button,
-  Checkbox,
-  CheckboxField,
-  CodeText,
-  ErrorMessage,
-  Form,
-  Fragment,
-  Heading,
-  HtmlEmbed,
-  Image,
-  Input,
-  Italic,
-  Label,
-  Link,
-  LinkBlock,
-  List,
-  ListItem,
-  Paragraph,
-  RadioButton,
-  RadioButtonField,
-  RichTextLink,
-  Separator,
-  Slot,
-  Span,
-  Subscript,
-  SuccessMessage,
-  Superscript,
-  TextBlock,
-  Textarea
-};

package/lib/components/error-message.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "div";
-const ErrorMessage = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
-ErrorMessage.displayName = "ErrorMessage";
-export {
-  ErrorMessage,
-  defaultTag
-};

package/lib/components/error-message.ws.js

@@ -1,20 +0,0 @@
-import { BoxIcon } from "@webstudio-is/icons/svg";
-import { props } from "./__generated__/error-message.props";
-import { div } from "../css/normalize";
-const presetStyle = {
-  div
-};
-const meta = {
-  type: "container",
-  label: "Error Message",
-  icon: BoxIcon,
-  presetStyle
-};
-const propsMeta = {
-  props,
-  initialProps: []
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/form.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const defaultTag = "form";
-const Form = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, ref, children }));
-Form.displayName = "Form";
-export {
-  Form,
-  defaultTag
-};

package/lib/components/form.ws.js

@@ -1,64 +0,0 @@
-import { FormIcon } from "@webstudio-is/icons/svg";
-import { form } from "../css/normalize";
-import {
-  defaultStates
-} from "./component-meta";
-import { props } from "./__generated__/form.props";
-const presetStyle = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
-  ]
-};
-const meta = {
-  category: "forms",
-  type: "container",
-  label: "Form",
-  icon: FormIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0,
-  template: [
-    {
-      type: "instance",
-      component: "Form",
-      children: [
-        {
-          type: "instance",
-          component: "Label",
-          children: [{ type: "text", value: "Name" }]
-        },
-        {
-          type: "instance",
-          component: "Input",
-          props: [{ type: "string", name: "name", value: "name" }],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Label",
-          children: [{ type: "text", value: "Email" }]
-        },
-        {
-          type: "instance",
-          component: "Input",
-          props: [{ type: "string", name: "name", value: "email" }],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Button",
-          children: [{ type: "text", value: "Submit" }]
-        }
-      ]
-    }
-  ]
-};
-const propsMeta = {
-  props,
-  initialProps: []
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/fragment.js

@@ -1,9 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-const Fragment = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx("div", { ...props, ref, style: { display: "contents" } });
-});
-Fragment.displayName = "Fragment";
-export {
-  Fragment
-};

package/lib/components/fragment.ws.js

@@ -1,13 +0,0 @@
-const meta = {
-  type: "container",
-  label: "Fragment",
-  icon: "",
-  stylable: false
-};
-const propsMeta = {
-  props: {}
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/heading.js

@@ -1,14 +0,0 @@
-import {
-  forwardRef,
-  createElement
-} from "react";
-const defaultTag = "h1";
-const Heading = forwardRef(
-  ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag, { ...props, ref });
-  }
-);
-Heading.displayName = "Heading";
-export {
-  Heading
-};

package/lib/components/heading.ws.js

@@ -1,38 +0,0 @@
-import { HeadingIcon } from "@webstudio-is/icons/svg";
-import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
-import {
-  defaultStates
-} from "./component-meta";
-import { props } from "./__generated__/heading.props";
-const presetStyle = {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-};
-const meta = {
-  category: "text",
-  type: "rich-text",
-  label: "Heading",
-  icon: HeadingIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [{ type: "text", value: "Heading you can edit" }]
-    }
-  ],
-  order: 1
-};
-const propsMeta = {
-  props,
-  initialProps: ["tag"]
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/html-embed.js

@@ -1,65 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef
-} from "react";
-import { mergeRefs } from "@react-aria/utils";
-import { ReactSdkContext } from "../context";
-const ExecutableHtml = (props) => {
-  const { code, innerRef, ...rest } = props;
-  const containerRef = useRef(null);
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container === null || code === void 0) {
-      return;
-    }
-    const range = document.createRange();
-    range.setStart(container, 0);
-    const fragment = range.createContextualFragment(code);
-    while (container.firstChild) {
-      container.removeChild(container.firstChild);
-    }
-    container.append(fragment);
-  }, [code]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      ref: mergeRefs(innerRef, containerRef),
-      style: { display: "contents" }
-    }
-  );
-};
-const InnerHtml = (props) => {
-  const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...rest,
-      ref: innerRef,
-      style: { display: "contents" },
-      dangerouslySetInnerHTML: { __html: props.code ?? "" }
-    }
-  );
-};
-const Placeholder = (props) => {
-  const { code, innerRef, ...rest } = props;
-  return /* @__PURE__ */ jsx("div", { ref: innerRef, ...rest, style: { padding: "20px" }, children: 'Open "Properties" panel to insert HTML code' });
-};
-const HtmlEmbed = forwardRef((props, ref) => {
-  const { renderer } = useContext(ReactSdkContext);
-  const { code, executeScriptOnCanvas, ...rest } = props;
-  if (code === void 0 || code.trim().length === 0) {
-    return /* @__PURE__ */ jsx(Placeholder, { innerRef: ref, ...rest });
-  }
-  if (renderer === "canvas" && executeScriptOnCanvas === true) {
-    return /* @__PURE__ */ jsx(ExecutableHtml, { innerRef: ref, code, ...rest });
-  }
-  return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
-});
-HtmlEmbed.displayName = "HtmlEmbed";
-export {
-  HtmlEmbed
-};

package/lib/components/html-embed.ws.js

@@ -1,25 +0,0 @@
-import { EmbedIcon } from "@webstudio-is/icons/svg";
-import { props } from "./__generated__/html-embed.props";
-const meta = {
-  category: "general",
-  type: "embed",
-  label: "HTML Embed",
-  icon: EmbedIcon,
-  stylable: false,
-  order: 7
-};
-const propsMeta = {
-  props: {
-    ...props,
-    code: {
-      required: true,
-      control: "code",
-      type: "string",
-      rows: 10
-    }
-  }
-};
-export {
-  meta,
-  propsMeta
-};

package/lib/components/image.js

@@ -1,63 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useMemo
-} from "react";
-import {
-  Image as WebstudioImage,
-  createImageLoader
-} from "@webstudio-is/image";
-import { usePropAsset, getInstanceIdFromComponentProps } from "../props";
-import { getParams } from "../app/params";
-const defaultTag = "img";
-const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
-  width="140"
-  height="140"
-  viewBox="0 0 600 600"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  >
-  <rect width="600" height="600" fill="#CCCCCC" />
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M450 170H150C141.716 170 135 176.716 135 185V415C135 423.284 141.716 430 150 430H450C458.284 430 465 423.284 465 415V185C465 176.716 458.284 170 450 170ZM150 145C127.909 145 110 162.909 110 185V415C110 437.091 127.909 455 150 455H450C472.091 455 490 437.091 490 415V185C490 162.909 472.091 145 450 145H150Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M237.135 235.012C237.135 255.723 220.345 272.512 199.635 272.512C178.924 272.512 162.135 255.723 162.135 235.012C162.135 214.301 178.924 197.512 199.635 197.512C220.345 197.512 237.135 214.301 237.135 235.012Z"
-    fill="#A2A2A2"
-  />
-  <path
-    d="M160 405V367.205L221.609 306.364L256.552 338.628L358.161 234L440 316.043V405H160Z"
-    fill="#A2A2A2"
-  />
-</svg>`)}`;
-const Image = forwardRef(
-  (props, ref) => {
-    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-    const loader = useMemo(() => {
-      const params = getParams();
-      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
-    }, []);
-    const src = asset?.name ?? props.src;
-    if (asset == null || loader == null) {
-      return /* @__PURE__ */ jsx("img", { ...props, src: src || imagePlaceholderSvg, ref }, src);
-    }
-    return /* @__PURE__ */ jsx(
-      WebstudioImage,
-      {
-        ...props,
-        loader,
-        src,
-        ref
-      },
-      src
-    );
-  }
-);
-Image.displayName = "Image";
-export {
-  Image,
-  defaultTag
-};

package/lib/components/image.ws.js

@@ -1,48 +0,0 @@
-import { ImageIcon } from "@webstudio-is/icons/svg";
-import { img } from "../css/normalize";
-import {
-  defaultStates
-} from "./component-meta";
-import { props } from "./__generated__/image.props";
-const presetStyle = {
-  img: [
-    ...img,
-    // Otherwise on new image insert onto canvas it can overfit screen size multiple times
-    {
-      property: "maxWidth",
-      value: { type: "unit", unit: "%", value: 100 }
-    },
-    // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
-    // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-const meta = {
-  category: "media",
-  type: "embed",
-  label: "Image",
-  icon: ImageIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0
-};
-const { loader, ...publicProps } = props;
-const propsMeta = {
-  props: {
-    ...publicProps,
-    src: {
-      type: "string",
-      control: "file",
-      label: "Source",
-      required: false
-    }
-  },
-  initialProps: ["src", "width", "height", "alt", "loading"]
-};
-export {
-  meta,
-  propsMeta
-};