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

package/lib/html-embed.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { HtmlEmbed as HtmlEmbedPrimitive } from "./html-embed";
-export default {
-  title: "Components/HtmlEmbed",
-  component: HtmlEmbedPrimitive
-};
-export const HtmlEmbed = {
-  args: {
-    code: "<strong>custom code</strong>"
-  }
-};

package/lib/html-embed.ws.js

@@ -1,28 +0,0 @@
-"use strict";
-import { EmbedIcon } from "@webstudio-is/icons/svg";
-import { props } from "./__generated__/html-embed.props";
-export const meta = {
-  category: "general",
-  type: "embed",
-  label: "HTML Embed",
-  description: "Used to add HTML code to the page, such as an SVG or script.",
-  icon: EmbedIcon,
-  stylable: false,
-  order: 7
-};
-export const propsMeta = {
-  props: {
-    ...props,
-    executeScriptOnCanvas: {
-      ...props.executeScriptOnCanvas,
-      label: "Run script on canvas"
-    },
-    code: {
-      required: true,
-      control: "code",
-      type: "string",
-      rows: 10
-    }
-  },
-  initialProps: []
-};

package/lib/image.js

@@ -1,74 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  useMemo,
-  useContext
-} from "react";
-import {
-  Image as WebstudioImage,
-  createImageLoader
-} from "@webstudio-is/image";
-import {
-  usePropAsset,
-  getInstanceIdFromComponentProps,
-  ReactSdkContext
-} from "@webstudio-is/react-sdk";
-export 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>`)}`;
-export const Image = forwardRef(
-  ({ loading = "lazy", ...props }, ref) => {
-    const { imageBaseUrl } = useContext(ReactSdkContext);
-    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-    const loader = useMemo(() => {
-      return createImageLoader({ imageBaseUrl });
-    }, [imageBaseUrl]);
-    const src = asset?.name ?? props.src;
-    if (asset == null || loader == null) {
-      return /* @__PURE__ */ jsx(
-        "img",
-        {
-          loading,
-          ...props,
-          src: src || imagePlaceholderSvg,
-          ref
-        },
-        src
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      WebstudioImage,
-      {
-        loading,
-        ...props,
-        loader,
-        src,
-        ref
-      },
-      src
-    );
-  }
-);
-Image.displayName = "Image";

package/lib/image.stories.js

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

package/lib/image.ws.js

@@ -1,48 +0,0 @@
-"use strict";
-import { ImageIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { img } from "@webstudio-is/react-sdk/css-normalize";
-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" }
-    }
-  ]
-};
-export const meta = {
-  category: "media",
-  type: "embed",
-  label: "Image",
-  description: "Add an image asset to the page. Webstudio automatically converts images to WebP or AVIF format and makes them responsive for best performance.",
-  icon: ImageIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 0
-};
-export const propsOverrides = {
-  src: {
-    type: "string",
-    control: "file",
-    label: "Source",
-    required: false
-  }
-};
-export const propsMeta = {
-  props: {
-    ...props,
-    ...propsOverrides
-  },
-  initialProps: ["id", "src", "width", "height", "alt", "loading"]
-};

package/lib/input.js

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

package/lib/input.stories.js

@@ -1,9 +0,0 @@
-"use strict";
-import { Input as InputPrimitive } from "./input";
-export default {
-  title: "Components/Input",
-  component: InputPrimitive
-};
-export const Input = {
-  args: {}
-};

package/lib/input.ws.js

@@ -1,43 +0,0 @@
-"use strict";
-import { FormTextFieldIcon } 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__/input.props";
-const presetStyle = {
-  input: [
-    ...input,
-    {
-      property: "display",
-      value: { type: "keyword", value: "block" }
-    }
-  ]
-};
-export const meta = {
-  category: "forms",
-  invalidAncestors: ["Button"],
-  type: "control",
-  label: "Text Input",
-  description: "A single-line text input for collecting string data from your users.",
-  icon: FormTextFieldIcon,
-  presetStyle,
-  order: 3,
-  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", "type", "placeholder", "required", "autoFocus"]
-};

package/lib/italic.js

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

package/lib/italic.stories.js

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

package/lib/italic.ws.js

@@ -1,27 +0,0 @@
-"use strict";
-import { TextItalicIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { i } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/italic.props";
-const presetStyle = {
-  i: [
-    ...i,
-    {
-      property: "fontStyle",
-      value: { type: "keyword", value: "italic" }
-    }
-  ]
-};
-export const meta = {
-  type: "rich-text-child",
-  label: "Italic Text",
-  icon: TextItalicIcon,
-  states: defaultStates,
-  presetStyle
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/label.js

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

package/lib/label.ws.js

@@ -1,40 +0,0 @@
-"use strict";
-import { LabelIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/label.props";
-const presetStyle = {
-  label: [
-    ...label,
-    { property: "display", value: { type: "keyword", value: "block" } }
-  ]
-};
-export const meta = {
-  category: "forms",
-  invalidAncestors: ["Button", "Label"],
-  type: "container",
-  label: "Input Label",
-  icon: LabelIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 2,
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Form Label" }]
-    }
-  ]
-};
-export const propsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      ...props.htmlFor,
-      label: "For"
-    }
-  },
-  initialProps: ["id", "htmlFor"]
-};

package/lib/link.js

@@ -1,33 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from "react";
-import {
-  usePropUrl,
-  getInstanceIdFromComponentProps,
-  ReactSdkContext
-} from "@webstudio-is/react-sdk";
-export const defaultTag = "a";
-export const Link = forwardRef((props, ref) => {
-  const { assetBaseUrl } = useContext(ReactSdkContext);
-  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  let url = "#";
-  switch (href?.type) {
-    case "page": {
-      url = href.page.path === "" ? "/" : href.page.path;
-      const urlTo = new URL(url, "https://any-valid.url");
-      url = urlTo.pathname;
-      if (href.hash !== void 0) {
-        urlTo.hash = encodeURIComponent(href.hash);
-        url = `${urlTo.pathname}${urlTo.hash}`;
-      }
-      break;
-    }
-    case "asset":
-      url = `${assetBaseUrl}${href.asset.name}`;
-      break;
-    case "string":
-      url = href.url;
-  }
-  return /* @__PURE__ */ jsx("a", { ...props, href: url, ref });
-});
-Link.displayName = "Link";

package/lib/link.stories.js

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

package/lib/link.ws.js

@@ -1,60 +0,0 @@
-"use strict";
-import { LinkIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { a } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/link.props";
-const presetStyle = {
-  a: [
-    ...a,
-    {
-      property: "minHeight",
-      value: { type: "unit", unit: "em", value: 1 }
-    },
-    {
-      property: "display",
-      value: { type: "keyword", value: "inline-block" }
-    }
-  ]
-};
-export const meta = {
-  category: "general",
-  type: "container",
-  label: "Link",
-  description: "Use a link to send your users to another page, section, or resource. Configure links in the Settings panel.",
-  icon: LinkIcon,
-  invalidAncestors: ["Link"],
-  presetStyle,
-  order: 1,
-  states: [
-    ...defaultStates,
-    {
-      selector: ":visited",
-      label: "Visited"
-    },
-    {
-      category: "component-states",
-      selector: "[aria-current=page]",
-      label: "Current page"
-    }
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Link",
-      children: [{ type: "text", value: "Link text you can edit" }]
-    }
-  ]
-};
-export const propsMeta = {
-  props: {
-    ...props,
-    href: {
-      type: "string",
-      control: "url",
-      required: false
-    }
-  },
-  initialProps: ["id", "href", "target"]
-};

package/lib/list-item.js

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

package/lib/list-item.stories.js

@@ -1,11 +0,0 @@
-"use strict";
-import { ListItem as ListItemPrimitive } from "./list-item";
-export default {
-  title: "Components/List Item",
-  component: ListItemPrimitive
-};
-export const ListItem = {
-  args: {
-    children: "ListItem"
-  }
-};

package/lib/list-item.ws.js

@@ -1,32 +0,0 @@
-"use strict";
-import { ListItemIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { li } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/list-item.props";
-const presetStyle = {
-  li
-};
-export const meta = {
-  category: "general",
-  type: "container",
-  requiredAncestors: ["List"],
-  label: "List Item",
-  description: "Adds a new item to an existing list.",
-  icon: ListItemIcon,
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "ListItem",
-      children: [{ type: "text", value: "List Item you can edit" }]
-    }
-  ],
-  order: 4
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/list.js

@@ -1,12 +0,0 @@
-"use strict";
-import {
-  forwardRef,
-  createElement
-} from "react";
-const unorderedTag = "ul";
-const orderedTag = "ol";
-export const List = forwardRef(({ ordered = false, ...props }, ref) => {
-  const tag = ordered ? orderedTag : unorderedTag;
-  return createElement(tag, { ...props, ref });
-});
-List.displayName = "List";

package/lib/list.stories.js

@@ -1,13 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import { List as ListPrimitive } from "./list";
-import { ListItem } from "./list-item";
-export default {
-  title: "Components/List",
-  component: ListPrimitive
-};
-export const List = {
-  args: {
-    children: /* @__PURE__ */ jsx(ListItem, { children: "List" })
-  }
-};

package/lib/list.ws.js

@@ -1,53 +0,0 @@
-"use strict";
-import { ListIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} from "@webstudio-is/react-sdk";
-import { ol, ul } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/list.props";
-const presetStyle = {
-  ol: [
-    ...ol,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" }
-    }
-  ],
-  ul: [
-    ...ul,
-    {
-      property: "marginTop",
-      value: { type: "keyword", value: "0" }
-    },
-    {
-      property: "marginBottom",
-      value: { type: "keyword", value: "10px" }
-    },
-    {
-      property: "paddingLeft",
-      value: { type: "keyword", value: "40px" }
-    }
-  ]
-};
-export const meta = {
-  category: "general",
-  type: "container",
-  label: "List",
-  description: "Groups content, like links in a menu or steps in a recipe.",
-  icon: ListIcon,
-  states: defaultStates,
-  presetStyle,
-  order: 3
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id", "ordered", "start", "reversed"]
-};

package/lib/paragraph.js

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

package/lib/paragraph.stories.js

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

package/lib/paragraph.ws.js

@@ -1,32 +0,0 @@
-"use strict";
-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
-};
-export const meta = {
-  category: "text",
-  type: "container",
-  label: "Paragraph",
-  description: "A container for multi-line text.",
-  icon: TextAlignLeftIcon,
-  invalidAncestors: ["Paragraph"],
-  states: defaultStates,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "Paragraph",
-      children: [{ type: "text", value: "Paragraph you can edit" }]
-    }
-  ],
-  order: 2
-};
-export const propsMeta = {
-  props,
-  initialProps: ["id"]
-};

package/lib/radio-button.js

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