@webstudio-is/sdk-components-react 0.95.0 → 0.97.0

package/lib/blockquote.ws.js

@@ -1,75 +0,0 @@
-"use strict";
-import { BlockquoteIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/blockquote.props";
-const presetStyle = {
-  blockquote: [
-    {
-      property: "marginTop",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginRight",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "marginLeft",
-      value: { type: "unit", value: 0, unit: "number" }
-    },
-    {
-      property: "paddingTop",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingBottom",
-      value: { type: "unit", value: 10, unit: "px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "paddingRight",
-      value: { type: "unit", value: 20, unit: "px" }
-    },
-    {
-      property: "borderLeftWidth",
-      value: { type: "unit", value: 5, unit: "px" }
-    },
-    {
-      property: "borderLeftStyle",
-      value: { type: "keyword", value: "solid" }
-    },
-    {
-      property: "borderLeftColor",
-      value: { type: "rgb", r: 226, g: 226, b: 226, alpha: 1 }
-    }
-  ]
-};
-export const meta = {
-  category: "text",
-  type: "container",
-  label: "Blockquote",
-  description: "Use to style a quote from an external source like an article or book.",
-  icon: BlockquoteIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Blockquote",
-      children: [{ type: "text", value: "Blockquote you can edit" }]
-    }
-  ],
-  order: 3
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "cite"]
-};

package/lib/body.js

@@ -1,6 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const defaultTag = "body";
-export const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", { ...props, ref }));
-Body.displayName = "Body";

package/lib/body.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Body as BodyPrimitive } from "./body";
-export default {
-  title: "Components/Body",
-  component: BodyPrimitive
-};
-export const Body = {
-  args: {
-    children: "Body"
-  }
-};

package/lib/body.ws.js

@@ -1,31 +0,0 @@
-"use strict";
-import { BodyIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { body } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/body.props";
-const presetStyle = {
-  body: [
-    ...body,
-    {
-      property: "WebkitFontSmoothing",
-      value: { type: "keyword", value: "antialiased" }
-    },
-    {
-      property: "MozOsxFontSmoothing",
-      value: { type: "keyword", value: "grayscale" }
-    }
-  ]
-};
-export const meta = {
-  type: "container",
-  label: "Body",
-  icon: BodyIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/bold.js

@@ -1,6 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const defaultTag = "b";
-export const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", { ...props, ref }));
-Bold.displayName = "Bold";

package/lib/bold.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Bold as BoldPrimitive } from "./bold";
-export default {
-  title: "Components/Bold",
-  component: BoldPrimitive
-};
-export const Bold = {
-  args: {
-    children: "some bold text"
-  }
-};

package/lib/bold.ws.js

@@ -1,21 +0,0 @@
-"use strict";
-import { BoldIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { b } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/bold.props";
-const presetStyle = {
-  b
-};
-export const meta = {
-  type: "rich-text-child",
-  label: "Bold Text",
-  icon: BoldIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/box.js

@@ -1,12 +0,0 @@
-"use strict";
-import {
-  createElement,
-  forwardRef
-} from "react";
-export const defaultTag = "div";
-export const Box = forwardRef(
-  ({ tag = defaultTag, ...props }, ref) => {
-    return createElement(tag, { ...props, ref });
-  }
-);
-Box.displayName = "Box";

package/lib/box.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Box as BoxPrimitive } from "./box";
-export default {
-  title: "Components/Box",
-  component: BoxPrimitive
-};
-export const Box = {
-  args: {
-    children: "Box"
-  }
-};

package/lib/box.ws.js

@@ -1,44 +0,0 @@
-"use strict";
-import { BoxIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main,
-  nav,
-  section
-} from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/box.props";
-const presetStyle = {
-  div,
-  address,
-  article,
-  aside,
-  figure,
-  footer,
-  header,
-  main,
-  nav,
-  section
-};
-export const meta = {
-  category: "general",
-  type: "container",
-  label: "Box",
-  description: "A container for content. By default this is a Div, but the tag can be changed in settings.",
-  icon: BoxIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "tag"]
-};

package/lib/button.js

@@ -1,8 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-export const defaultTag = "button";
-export const Button = forwardRef(
-  ({ type = "submit", children, ...props }, ref) => /* @__PURE__ */ jsx("button", { type, ...props, ref, children })
-);
-Button.displayName = "Button";

package/lib/button.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Button as ButtonPrimitive } from "./button";
-export default {
-  title: "Components/Button",
-  component: ButtonPrimitive
-};
-export const Button = {
-  args: {
-    children: "Click me"
-  }
-};

package/lib/button.ws.js

@@ -1,36 +0,0 @@
-"use strict";
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { button } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/button.props";
-const presetStyle = {
-  button
-};
-export const meta = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Button"],
-  label: "Button",
-  description: "Use a button to submit forms or trigger actions within a page. Do not use a button to navigate users to another resource or another page - that\u2019s what a link is used for.",
-  icon: ButtonElementIcon,
-  presetStyle,
-  states: [
-    ...defaultStates,
-    { selector: ":disabled", label: "Disabled" },
-    { selector: ":enabled", label: "Enabled" }
-  ],
-  order: 1,
-  template: [
-    {
-      type: "instance",
-      component: "Button",
-      children: [{ type: "text", value: "Button you can edit" }]
-    }
-  ]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "type", "aria-label"]
-};

package/lib/checkbox.js

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

package/lib/checkbox.ws.js

@@ -1,57 +0,0 @@
-"use strict";
-import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { input } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/checkbox.props";
-const presetStyle = {
-  input: [
-    ...input,
-    {
-      property: "marginRight",
-      value: { type: "unit", unit: "em", value: 0.5 }
-    }
-  ]
-};
-export const meta = {
-  category: "forms",
-  invalidAncestors: ["Button"],
-  type: "control",
-  label: "Checkbox",
-  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  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" }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      children: [
-        { type: "instance", component: "Checkbox", children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Checkbox" }]
-        }
-      ]
-    }
-  ]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "name"]
-};

package/lib/code-text.js

@@ -1,10 +0,0 @@
-"use strict";
-import {
-  forwardRef,
-  createElement
-} from "react";
-export const defaultTag = "code";
-export const CodeText = forwardRef((props, ref) => {
-  return createElement(defaultTag, { ...props, ref });
-});
-CodeText.displayName = "CodeText";

package/lib/code-text.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { CodeText as CodeTextPrimitive } from "./code-text";
-export default {
-  title: "Components/CodeText",
-  component: CodeTextPrimitive
-};
-export const CodeText = {
-  args: {
-    children: "alert('Hello World!')"
-  }
-};

package/lib/code-text.ws.js

@@ -1,54 +0,0 @@
-"use strict";
-import { CodeTextIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { code } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/code-text.props";
-const presetStyle = {
-  code: [
-    ...code,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    },
-    {
-      property: "whiteSpace",
-      value: { type: "keyword", value: "pre-wrap" }
-    },
-    {
-      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 }
-    }
-  ]
-};
-export const meta = {
-  category: "general",
-  type: "container",
-  label: "Code Text",
-  description: "Use this component when you want to display code as text on the page.",
-  icon: CodeTextIcon,
-  invalidAncestors: ["CodeText"],
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "CodeText",
-      children: [{ type: "text", value: "Code you can edit" }]
-    }
-  ],
-  order: 8
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "lang"]
-};

package/lib/form.js

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

package/lib/form.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Form as FormPrimitive } from "./form";
-export default {
-  title: "Components/Form",
-  component: FormPrimitive
-};
-export const Form = {
-  args: {
-    children: "Form"
-  }
-};

package/lib/form.ws.js

@@ -1,63 +0,0 @@
-"use strict";
-import { FormIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/form.props";
-const presetStyle = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
-  ]
-};
-export const meta = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Form"],
-  label: "Form",
-  description: "Collect information from your users using validation rules.",
-  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" }]
-        }
-      ]
-    }
-  ]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "action"]
-};

package/lib/fragment.js

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

package/lib/fragment.ws.js

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

package/lib/heading.js

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

package/lib/heading.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { Heading as HeadingPrimitive } from "./heading";
-export default {
-  title: "Components/Heading",
-  component: HeadingPrimitive
-};
-export const Heading = {
-  args: {
-    children: "Heading"
-  }
-};

package/lib/heading.ws.js

@@ -1,37 +0,0 @@
-"use strict";
-import { HeadingIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { h1, h2, h3, h4, h5, h6 } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/heading.props";
-const presetStyle = {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6
-};
-export const meta = {
-  category: "text",
-  type: "container",
-  label: "Heading",
-  description: "Use HTML headings to structure and organize content. Use the Tag property in settings to change the heading level (h1-h6).",
-  icon: HeadingIcon,
-  invalidAncestors: ["Heading"],
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Heading",
-      children: [{ type: "text", value: "Heading you can edit" }]
-    }
-  ],
-  order: 1
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "tag"]
-};

package/lib/html-embed.js

@@ -1,63 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useContext,
-  useEffect,
-  useRef
-} from "react";
-import { mergeRefs } from "@react-aria/utils";
-import { ReactSdkContext } from "@webstudio-is/react-sdk";
-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 the "Settings" panel to insert HTML code' });
-};
-export 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 || renderer === "preview") {
-    return /* @__PURE__ */ jsx(ExecutableHtml, { innerRef: ref, code, ...rest });
-  }
-  return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
-});
-HtmlEmbed.displayName = "HtmlEmbed";