@webstudio-is/sdk-components-react 0.94.0 → 0.96.0

package/lib/radio-button.ws.js

@@ -1,58 +0,0 @@
-"use strict";
-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 }
-    }
-  ]
-};
-export const meta = {
-  category: "forms",
-  invalidAncestors: ["Button"],
-  type: "control",
-  label: "Radio",
-  description: "Use within a form to allow your users to select a single option from a set of mutually exclusive choices. Group multiple radios by matching their \u201CName\u201D properties.",
-  icon: RadioCheckedIcon,
-  presetStyle,
-  order: 5,
-  states: [
-    ...defaultStates,
-    { selector: ":checked", label: "Checked" },
-    { selector: ":required", label: "Required" },
-    { selector: ":optional", label: "Optional" }
-    // Additional states will go into submenu
-    //{ 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: "Radio Field",
-      children: [
-        { type: "instance", component: "RadioButton", props: [], children: [] },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Radio Label",
-          props: [{ type: "string", name: "tag", value: "span" }],
-          children: [{ type: "text", value: "Radio" }]
-        }
-      ]
-    }
-  ]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "name"]
-};

package/lib/rich-text-link.js

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

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

@@ -1,11 +0,0 @@
-"use strict";
-import { RichTextLink as LinkPrimitive } from "./rich-text-link";
-export default {
-  title: "Components/RichTextLink",
-  component: LinkPrimitive
-};
-export const RichTextLink = {
-  args: {
-    children: "RichTextLink"
-  }
-};

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

@@ -1,9 +0,0 @@
-"use strict";
-import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
-export const meta = {
-  ...linkMeta,
-  category: "hidden",
-  type: "rich-text-child",
-  template: []
-};
-export const propsMeta = linkPropsMeta;

package/lib/separator.js

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

package/lib/separator.stories.js

@@ -1,7 +0,0 @@
-"use strict";
-import { Separator as SeparatorPrimitive } from "./separator";
-export default {
-  title: "Components/Separator",
-  component: SeparatorPrimitive
-};
-export const Separator = {};

package/lib/separator.ws.js

@@ -1,50 +0,0 @@
-"use strict";
-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" }
-    }
-  ]
-};
-export const meta = {
-  category: "general",
-  type: "embed",
-  label: "Separator",
-  description: "Used to visually divide sections of content, helping to improve readability and organization within a webpage.",
-  icon: DashIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 5
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/slot.js

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

package/lib/slot.stories.js

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

package/lib/slot.ws.js

@@ -1,14 +0,0 @@
-"use strict";
-import { SlotComponentIcon } from "@webstudio-is/icons/svg";
-export const meta = {
-  category: "general",
-  type: "container",
-  label: "Slot",
-  description: "Slot is a container for content that you want to reference across the project. Changes made to a Slot's children will be reflected in all other instances of that Slot.",
-  icon: SlotComponentIcon,
-  stylable: false,
-  order: 6
-};
-export const propsMeta = {
-  props: {}
-};

package/lib/span.js

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

package/lib/span.stories.js

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

package/lib/span.ws.js

@@ -1,21 +0,0 @@
-"use strict";
-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
-};
-export const meta = {
-  type: "rich-text-child",
-  label: "Text",
-  icon: PaintBrushIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/subscript.js

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

package/lib/subscript.stories.js

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

package/lib/subscript.ws.js

@@ -1,21 +0,0 @@
-"use strict";
-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
-};
-export const meta = {
-  type: "rich-text-child",
-  label: "Subscript Text",
-  icon: SubscriptIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/superscript.js

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

package/lib/superscript.stories.js

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

package/lib/superscript.ws.js

@@ -1,21 +0,0 @@
-"use strict";
-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
-};
-export const meta = {
-  type: "rich-text-child",
-  label: "Superscript Text",
-  icon: SuperscriptIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/text.js

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

package/lib/text.stories.js

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

package/lib/text.ws.js

@@ -1,37 +0,0 @@
-"use strict";
-import { TextIcon } 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.props";
-const presetStyle = {
-  div: [
-    ...div,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    }
-  ]
-};
-export const meta = {
-  category: "text",
-  type: "container",
-  label: "Text",
-  description: "A generic container for any text content that is not a heading or a link.",
-  icon: TextIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: "The text you can edit" }]
-    }
-  ],
-  order: 0
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "tag"]
-};

package/lib/textarea.js

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

package/lib/textarea.ws.js

@@ -1,44 +0,0 @@
-"use strict";
-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" } },
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-export const meta = {
-  category: "forms",
-  type: "control",
-  label: "Text Area",
-  description: "A multi-line text input for collecting longer string data from your users.",
-  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" }
-    // Additional states will go into submenu
-    //{ selector: ":disabled", label: "Disabled" },
-    //{ selector: ":enabled", label: "Enabled" },
-    //{ selector: ":read-only", label: "Read Only" },
-    //{ selector: ":read-write", label: "Read Write" },
-  ]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "name", "placeholder", "required", "autoFocus"]
-};

package/lib/vimeo-play-button.js

@@ -1,19 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useContext
-} from "react";
-import { VimeoContext } from "./vimeo";
-import { Button, defaultTag } from "./button";
-export { defaultTag };
-export const VimeoPlayButton = forwardRef(
-  (props, ref) => {
-    const vimeoContext = useContext(VimeoContext);
-    if (vimeoContext.status !== "initial") {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(Button, { ...props, onClick: vimeoContext.onInitPlayer, ref });
-  }
-);
-VimeoPlayButton.displayName = "VimeoPlayButton";

package/lib/vimeo-play-button.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { VimeoPlayButton as VimeoPlayButtonPrimitive } from "./vimeo-play-button";
-export default {
-  title: "Components/Vimeo Play Button",
-  component: VimeoPlayButtonPrimitive
-};
-export const VimeoPlayButton = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" }
-  }
-};

package/lib/vimeo-play-button.ws.js

@@ -1,25 +0,0 @@
-"use strict";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/vimeo-play-button.props";
-import { ButtonElementIcon } from "@webstudio-is/icons/svg";
-import { button } from "@webstudio-is/react-sdk/css-normalize";
-import { defaultTag } from "./vimeo-play-button";
-const presetStyle = {
-  button
-};
-export const meta = {
-  category: "hidden",
-  type: "container",
-  invalidAncestors: ["Button"],
-  requiredAncestors: ["Vimeo"],
-  label: "Play Button",
-  icon: ButtonElementIcon,
-  presetStyle,
-  states: defaultStates
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/vimeo-preview-image.js

@@ -1,21 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useContext
-} from "react";
-import { Image, defaultTag } from "./image";
-import { VimeoContext } from "./vimeo";
-const base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
-export const VimeoPreviewImage = forwardRef(({ src, ...rest }, ref) => {
-  const vimeoContext = useContext(VimeoContext);
-  return /* @__PURE__ */ jsx(
-    Image,
-    {
-      ...rest,
-      src: String(vimeoContext.previewImageUrl ?? src ?? base64Preview),
-      ref
-    }
-  );
-});
-VimeoPreviewImage.displayName = "VimeoPreviewImage";

package/lib/vimeo-preview-image.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { VimeoPreviewImage as VimeoPreviewImagePrimitive } from "./vimeo-preview-image";
-export default {
-  title: "Components/Vimeo Preview Image",
-  component: VimeoPreviewImagePrimitive
-};
-export const VimeoPreviewImage = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" }
-  }
-};

package/lib/vimeo-preview-image.ws.js

@@ -1,19 +0,0 @@
-"use strict";
-import {
-} from "@webstudio-is/react-sdk";
-import {
-  propsOverrides as imagePropsOverrides,
-  propsMeta as imagePropsMeta,
-  meta as imageMeta
-} from "./image.ws";
-import { props } from "./__generated__/vimeo-preview-image.props";
-export const meta = {
-  ...imageMeta,
-  category: "hidden",
-  label: "Preview Image",
-  requiredAncestors: ["Vimeo"]
-};
-export const propsMeta = {
-  props: { ...props, ...imagePropsOverrides },
-  initialProps: imagePropsMeta.initialProps
-};

package/lib/vimeo-spinner.js

@@ -1,18 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useContext
-} from "react";
-import { VimeoContext } from "./vimeo";
-const defaultTag = "div";
-export const VimeoSpinner = forwardRef(
-  (props, ref) => {
-    const vimeoContext = useContext(VimeoContext);
-    if (vimeoContext.status !== "initialized") {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("div", { ...props, ref });
-  }
-);
-VimeoSpinner.displayName = "VimeoSpinner";

package/lib/vimeo-spinner.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { VimeoSpinner as VimeoSpinnerPrimitive } from "./vimeo-spinner";
-export default {
-  title: "Components/Vimeo Spinner",
-  component: VimeoSpinnerPrimitive
-};
-export const VimeoSpinner = {
-  args: {
-    style: { minHeight: 20, outline: "1px solid black" }
-  }
-};

package/lib/vimeo-spinner.ws.js

@@ -1,23 +0,0 @@
-"use strict";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/vimeo-spinner.props";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { BoxIcon } from "@webstudio-is/icons/svg";
-const presetStyle = {
-  div
-};
-export const meta = {
-  type: "container",
-  icon: BoxIcon,
-  states: defaultStates,
-  presetStyle,
-  category: "hidden",
-  label: "Spinner",
-  requiredAncestors: ["Vimeo"]
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};