@webstudio-is/sdk-components-react 0.70.0

package/lib/metas.js

@@ -0,0 +1,68 @@
+import { meta } from "./slot.ws";
+import { meta as meta2 } from "./fragment.ws";
+import { meta as meta3 } from "./html-embed.ws";
+import { meta as meta4 } from "./body.ws";
+import { meta as meta5 } from "./box.ws";
+import { meta as meta6 } from "./text-block.ws";
+import { meta as meta7 } from "./heading.ws";
+import { meta as meta8 } from "./paragraph.ws";
+import { meta as meta9 } from "./link.ws";
+import { meta as meta10 } from "./link-block.ws";
+import { meta as meta11 } from "./rich-text-link.ws";
+import { meta as meta12 } from "./span.ws";
+import { meta as meta13 } from "./bold.ws";
+import { meta as meta14 } from "./italic.ws";
+import { meta as meta15 } from "./superscript.ws";
+import { meta as meta16 } from "./subscript.ws";
+import { meta as meta17 } from "./button.ws";
+import { meta as meta18 } from "./input.ws";
+import { meta as meta19 } from "./form.ws";
+import { meta as meta20 } from "./image.ws";
+import { meta as meta21 } from "./blockquote.ws";
+import { meta as meta22 } from "./list.ws";
+import { meta as meta23 } from "./list-item.ws";
+import { meta as meta24 } from "./separator.ws";
+import { meta as meta25 } from "./code-text.ws";
+import { meta as meta26 } from "./label.ws";
+import { meta as meta27 } from "./success-message.ws";
+import { meta as meta28 } from "./error-message.ws";
+import { meta as meta29 } from "./textarea.ws";
+import { meta as meta30 } from "./radio-button-field.ws";
+import { meta as meta31 } from "./radio-button.ws";
+import { meta as meta32 } from "./checkbox-field.ws";
+import { meta as meta33 } from "./checkbox.ws";
+export {
+  meta21 as Blockquote,
+  meta4 as Body,
+  meta13 as Bold,
+  meta5 as Box,
+  meta17 as Button,
+  meta33 as Checkbox,
+  meta32 as CheckboxField,
+  meta25 as CodeText,
+  meta28 as ErrorMessage,
+  meta19 as Form,
+  meta2 as Fragment,
+  meta7 as Heading,
+  meta3 as HtmlEmbed,
+  meta20 as Image,
+  meta18 as Input,
+  meta14 as Italic,
+  meta26 as Label,
+  meta9 as Link,
+  meta10 as LinkBlock,
+  meta22 as List,
+  meta23 as ListItem,
+  meta8 as Paragraph,
+  meta31 as RadioButton,
+  meta30 as RadioButtonField,
+  meta11 as RichTextLink,
+  meta24 as Separator,
+  meta as Slot,
+  meta12 as Span,
+  meta16 as Subscript,
+  meta27 as SuccessMessage,
+  meta15 as Superscript,
+  meta6 as TextBlock,
+  meta29 as Textarea
+};

package/lib/paragraph.js

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

package/lib/paragraph.ws.js

@@ -0,0 +1,32 @@
+import { TextAlignLeftIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { p } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/paragraph.props";
+const presetStyle = {
+  p
+};
+const meta = {
+  category: "text",
+  type: "rich-text",
+  label: "Paragraph",
+  icon: TextAlignLeftIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }]
+    }
+  ],
+  order: 2
+};
+const propsMeta = {
+  props
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/props.js

@@ -0,0 +1,68 @@
+import { propsMeta } from "./slot.ws";
+import { propsMeta as propsMeta2 } from "./fragment.ws";
+import { propsMeta as propsMeta3 } from "./html-embed.ws";
+import { propsMeta as propsMeta4 } from "./body.ws";
+import { propsMeta as propsMeta5 } from "./box.ws";
+import { propsMeta as propsMeta6 } from "./text-block.ws";
+import { propsMeta as propsMeta7 } from "./heading.ws";
+import { propsMeta as propsMeta8 } from "./paragraph.ws";
+import { propsMeta as propsMeta9 } from "./link.ws";
+import { propsMeta as propsMeta10 } from "./link-block.ws";
+import { propsMeta as propsMeta11 } from "./rich-text-link.ws";
+import { propsMeta as propsMeta12 } from "./span.ws";
+import { propsMeta as propsMeta13 } from "./bold.ws";
+import { propsMeta as propsMeta14 } from "./italic.ws";
+import { propsMeta as propsMeta15 } from "./superscript.ws";
+import { propsMeta as propsMeta16 } from "./subscript.ws";
+import { propsMeta as propsMeta17 } from "./button.ws";
+import { propsMeta as propsMeta18 } from "./input.ws";
+import { propsMeta as propsMeta19 } from "./form.ws";
+import { propsMeta as propsMeta20 } from "./image.ws";
+import { propsMeta as propsMeta21 } from "./blockquote.ws";
+import { propsMeta as propsMeta22 } from "./list.ws";
+import { propsMeta as propsMeta23 } from "./list-item.ws";
+import { propsMeta as propsMeta24 } from "./separator.ws";
+import { propsMeta as propsMeta25 } from "./code-text.ws";
+import { propsMeta as propsMeta26 } from "./label.ws";
+import { propsMeta as propsMeta27 } from "./success-message.ws";
+import { propsMeta as propsMeta28 } from "./error-message.ws";
+import { propsMeta as propsMeta29 } from "./textarea.ws";
+import { propsMeta as propsMeta30 } from "./radio-button-field.ws";
+import { propsMeta as propsMeta31 } from "./radio-button.ws";
+import { propsMeta as propsMeta32 } from "./checkbox-field.ws";
+import { propsMeta as propsMeta33 } from "./checkbox.ws";
+export {
+  propsMeta21 as Blockquote,
+  propsMeta4 as Body,
+  propsMeta13 as Bold,
+  propsMeta5 as Box,
+  propsMeta17 as Button,
+  propsMeta33 as Checkbox,
+  propsMeta32 as CheckboxField,
+  propsMeta25 as CodeText,
+  propsMeta28 as ErrorMessage,
+  propsMeta19 as Form,
+  propsMeta2 as Fragment,
+  propsMeta7 as Heading,
+  propsMeta3 as HtmlEmbed,
+  propsMeta20 as Image,
+  propsMeta18 as Input,
+  propsMeta14 as Italic,
+  propsMeta26 as Label,
+  propsMeta9 as Link,
+  propsMeta10 as LinkBlock,
+  propsMeta22 as List,
+  propsMeta23 as ListItem,
+  propsMeta8 as Paragraph,
+  propsMeta31 as RadioButton,
+  propsMeta30 as RadioButtonField,
+  propsMeta11 as RichTextLink,
+  propsMeta24 as Separator,
+  propsMeta as Slot,
+  propsMeta12 as Span,
+  propsMeta16 as Subscript,
+  propsMeta27 as SuccessMessage,
+  propsMeta15 as Superscript,
+  propsMeta6 as TextBlock,
+  propsMeta29 as Textarea
+};

package/lib/radio-button-field.js

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

package/lib/radio-button-field.ws.js

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

package/lib/radio-button.js

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

package/lib/radio-button.ws.js

@@ -0,0 +1,40 @@
+import { RadioCheckedIcon } 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__/radio-button.props";
+const presetStyle = {
+  input: [
+    ...input,
+    {
+      property: "marginRight",
+      value: { type: "unit", unit: "em", value: 0.5 }
+    }
+  ]
+};
+const meta = {
+  type: "control",
+  label: "Radio Input",
+  icon: RadioCheckedIcon,
+  presetStyle,
+  order: 5,
+  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/rich-text-link.js

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

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

@@ -0,0 +1,19 @@
+import { props } from "./__generated__/rich-text-link.props";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
+const { category, ...linkMetaRest } = linkMeta;
+const meta = {
+  ...linkMetaRest,
+  type: "rich-text-child",
+  template: []
+};
+const propsMeta = {
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  }
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/separator.js

@@ -0,0 +1,15 @@
+import {
+  forwardRef,
+  createElement
+} from "react";
+const defaultTag = "hr";
+const Separator = forwardRef(
+  (props, ref) => {
+    return createElement(defaultTag, { ...props, ref });
+  }
+);
+Separator.displayName = "Separator";
+export {
+  Separator,
+  defaultTag
+};

package/lib/separator.ws.js

@@ -0,0 +1,52 @@
+import { DashIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { hr } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/separator.props";
+const presetStyle = {
+  hr: [
+    ...hr,
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
+    },
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
+    },
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
+    }
+  ]
+};
+const meta = {
+  category: "general",
+  type: "embed",
+  label: "Separator",
+  icon: DashIcon,
+  states: defaultStates,
+  presetStyle,
+  order: 5
+};
+const propsMeta = {
+  props,
+  initialProps: []
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/slot.js

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

package/lib/slot.ws.js

@@ -0,0 +1,16 @@
+import { SlotComponentIcon } from "@webstudio-is/icons/svg";
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  icon: SlotComponentIcon,
+  stylable: false,
+  order: 6
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/span.js

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

package/lib/span.ws.js

@@ -0,0 +1,23 @@
+import { PaintBrushIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { span } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/span.props";
+const presetStyle = {
+  span
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Styled Text",
+  icon: PaintBrushIcon,
+  states: defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/subscript.js

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

package/lib/subscript.ws.js

@@ -0,0 +1,23 @@
+import { SubscriptIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { sub } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/subscript.props";
+const presetStyle = {
+  sub
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Subscript Text",
+  icon: SubscriptIcon,
+  states: defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/success-message.js

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

package/lib/success-message.ws.js

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

package/lib/superscript.js

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

package/lib/superscript.ws.js

@@ -0,0 +1,23 @@
+import { SuperscriptIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { sup } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/superscript.props";
+const presetStyle = {
+  sup
+};
+const meta = {
+  type: "rich-text-child",
+  label: "Superscript Text",
+  icon: SuperscriptIcon,
+  states: defaultStates,
+  presetStyle
+};
+const propsMeta = {
+  props
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/text-block.js

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

package/lib/text-block.ws.js

@@ -0,0 +1,39 @@
+import { TextBlockIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/text-block.props";
+const presetStyle = {
+  div: [
+    ...div,
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
+    }
+  ]
+};
+const meta = {
+  category: "text",
+  type: "rich-text",
+  label: "Text Block",
+  icon: TextBlockIcon,
+  states: defaultStates,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }]
+    }
+  ],
+  order: 0
+};
+const propsMeta = {
+  props,
+  initialProps: ["tag"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/textarea.js

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

package/lib/textarea.ws.js

@@ -0,0 +1,41 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { textarea } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/textarea.props";
+const presetStyle = {
+  textarea: [
+    ...textarea,
+    // resize doesn't work well while on canvas
+    { property: "resize", value: { type: "keyword", value: "none" } }
+  ]
+};
+const meta = {
+  category: "forms",
+  type: "control",
+  label: "Text Area",
+  icon: FormTextAreaIcon,
+  presetStyle,
+  order: 4,
+  states: [
+    ...defaultStates,
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { 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", "placeholder", "required", "autoFocus"]
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/types/__generated__/blockquote.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;

package/lib/types/__generated__/body.props.d.ts

@@ -0,0 +1,2 @@
+import type { PropMeta } from "@webstudio-is/generate-arg-types";
+export declare const props: Record<string, PropMeta>;