@webstudio-is/sdk-components-react 0.90.0 → 0.92.0

package/lib/box.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import { BoxIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -27,7 +28,7 @@ const presetStyle = {
   nav,
   section
 };
-const meta = {
+export const meta = {
   category: "general",
   type: "container",
   label: "Box",
@@ -37,11 +38,7 @@ const meta = {
   presetStyle,
   order: 0
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "tag"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/button.js

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

package/lib/button.stories.js

@@ -0,0 +1,11 @@
+"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,3 +1,4 @@
+"use strict";
 import { ButtonElementIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -7,7 +8,7 @@ import { props } from "./__generated__/button.props";
 const presetStyle = {
   button
 };
-const meta = {
+export const meta = {
   category: "forms",
   type: "container",
   invalidAncestors: ["Button"],
@@ -29,11 +30,7 @@ const meta = {
     }
   ]
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "type", "aria-label"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/checkbox.js

@@ -1,9 +1,6 @@
+"use strict";
 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 }));
+export const defaultTag = "input";
+export const Checkbox = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, type: "checkbox", ref }));
 Checkbox.displayName = "Checkbox";
-export {
-  Checkbox,
-  defaultTag
-};

package/lib/checkbox.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import { CheckboxCheckedIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -13,7 +14,7 @@ const presetStyle = {
     }
   ]
 };
-const meta = {
+export const meta = {
   category: "forms",
   invalidAncestors: ["Button"],
   type: "control",
@@ -50,11 +51,7 @@ const meta = {
     }
   ]
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "name"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/code-text.js

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

package/lib/code-text.stories.js

@@ -0,0 +1,11 @@
+"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,3 +1,4 @@
+"use strict";
 import { CodeTextIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -29,7 +30,7 @@ const presetStyle = {
     }
   ]
 };
-const meta = {
+export const meta = {
   category: "general",
   type: "container",
   label: "Code Text",
@@ -47,11 +48,7 @@ const meta = {
   ],
   order: 8
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "lang"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/components.js

@@ -1,66 +1,33 @@
-import { Slot } from "./slot";
-import { Fragment } from "./fragment";
-import { HtmlEmbed } from "./html-embed";
-import { Body } from "./body";
-import { Box } from "./box";
-import { Text } from "./text";
-import { Heading } from "./heading";
-import { Paragraph } from "./paragraph";
-import { Link } from "./link";
-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 { Textarea } from "./textarea";
-import { RadioButton } from "./radio-button";
-import { Checkbox } from "./checkbox";
-import { Vimeo } from "./vimeo";
-import { VimeoPreviewImage } from "./vimeo-preview-image";
-import { VimeoPlayButton } from "./vimeo-play-button";
-import { VimeoSpinner } from "./vimeo-spinner";
-export {
-  Blockquote,
-  Body,
-  Bold,
-  Box,
-  Button,
-  Checkbox,
-  CodeText,
-  Form,
-  Fragment,
-  Heading,
-  HtmlEmbed,
-  Image,
-  Input,
-  Italic,
-  Label,
-  Link,
-  List,
-  ListItem,
-  Paragraph,
-  RadioButton,
-  RichTextLink,
-  Separator,
-  Slot,
-  Span,
-  Subscript,
-  Superscript,
-  Text,
-  Textarea,
-  Vimeo,
-  VimeoPlayButton,
-  VimeoPreviewImage,
-  VimeoSpinner
-};
+"use strict";
+export { Slot } from "./slot";
+export { Fragment } from "./fragment";
+export { HtmlEmbed } from "./html-embed";
+export { Body } from "./body";
+export { Box } from "./box";
+export { Text } from "./text";
+export { Heading } from "./heading";
+export { Paragraph } from "./paragraph";
+export { Link } from "./link";
+export { RichTextLink } from "./rich-text-link";
+export { Span } from "./span";
+export { Bold } from "./bold";
+export { Italic } from "./italic";
+export { Superscript } from "./superscript";
+export { Subscript } from "./subscript";
+export { Button } from "./button";
+export { Input } from "./input";
+export { Form } from "./form";
+export { Image } from "./image";
+export { Blockquote } from "./blockquote";
+export { List } from "./list";
+export { ListItem } from "./list-item";
+export { Separator } from "./separator";
+export { CodeText } from "./code-text";
+export { Label } from "./label";
+export { Textarea } from "./textarea";
+export { RadioButton } from "./radio-button";
+export { Checkbox } from "./checkbox";
+export { Vimeo } from "./vimeo";
+export { VimeoPreviewImage } from "./vimeo-preview-image";
+export { VimeoPlayButton } from "./vimeo-play-button";
+export { VimeoSpinner } from "./vimeo-spinner";

package/lib/form.js

@@ -1,9 +1,6 @@
+"use strict";
 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 }));
+export const defaultTag = "form";
+export const Form = forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, ref, children }));
 Form.displayName = "Form";
-export {
-  Form,
-  defaultTag
-};

package/lib/form.stories.js

@@ -0,0 +1,11 @@
+"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,3 +1,4 @@
+"use strict";
 import { FormIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -10,7 +11,7 @@ const presetStyle = {
     { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
   ]
 };
-const meta = {
+export const meta = {
   category: "forms",
   type: "container",
   invalidAncestors: ["Form"],
@@ -56,11 +57,7 @@ const meta = {
     }
   ]
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "action"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/fragment.js

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

package/lib/fragment.ws.js

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

package/lib/heading.js

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

package/lib/heading.stories.js

@@ -0,0 +1,11 @@
+"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,3 +1,4 @@
+"use strict";
 import { HeadingIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -12,7 +13,7 @@ const presetStyle = {
   h5,
   h6
 };
-const meta = {
+export const meta = {
   category: "text",
   type: "container",
   label: "Heading",
@@ -30,11 +31,7 @@ const meta = {
   ],
   order: 1
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "tag"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/html-embed.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
@@ -48,7 +49,7 @@ 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' });
 };
-const HtmlEmbed = forwardRef((props, ref) => {
+export const HtmlEmbed = forwardRef((props, ref) => {
   const { renderer } = useContext(ReactSdkContext);
   const { code, executeScriptOnCanvas, ...rest } = props;
   if (code === void 0 || code.trim().length === 0) {
@@ -60,6 +61,3 @@ const HtmlEmbed = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(InnerHtml, { innerRef: ref, code, ...rest });
 });
 HtmlEmbed.displayName = "HtmlEmbed";
-export {
-  HtmlEmbed
-};

package/lib/html-embed.stories.js

@@ -0,0 +1,11 @@
+"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,6 +1,7 @@
+"use strict";
 import { EmbedIcon } from "@webstudio-is/icons/svg";
 import { props } from "./__generated__/html-embed.props";
-const meta = {
+export const meta = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
@@ -9,7 +10,7 @@ const meta = {
   stylable: false,
   order: 7
 };
-const propsMeta = {
+export const propsMeta = {
   props: {
     ...props,
     executeScriptOnCanvas: {
@@ -25,7 +26,3 @@ const propsMeta = {
   },
   initialProps: []
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/image.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
@@ -13,7 +14,7 @@ import {
   getInstanceIdFromComponentProps,
   ReactSdkContext
 } from "@webstudio-is/react-sdk";
-const defaultTag = "img";
+export const defaultTag = "img";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"
@@ -37,7 +38,7 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
-const Image = forwardRef(
+export const Image = forwardRef(
   ({ loading = "lazy", ...props }, ref) => {
     const { imageBaseUrl } = useContext(ReactSdkContext);
     const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
@@ -71,7 +72,3 @@ const Image = forwardRef(
   }
 );
 Image.displayName = "Image";
-export {
-  Image,
-  defaultTag
-};

package/lib/image.stories.js

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

package/lib/image.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import { ImageIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -20,7 +21,7 @@ const presetStyle = {
     }
   ]
 };
-const meta = {
+export const meta = {
   category: "media",
   type: "embed",
   label: "Image",
@@ -30,7 +31,7 @@ const meta = {
   presetStyle,
   order: 0
 };
-const propsOverrides = {
+export const propsOverrides = {
   src: {
     type: "string",
     control: "file",
@@ -38,15 +39,10 @@ const propsOverrides = {
     required: false
   }
 };
-const propsMeta = {
+export const propsMeta = {
   props: {
     ...props,
     ...propsOverrides
   },
   initialProps: ["id", "src", "width", "height", "alt", "loading"]
 };
-export {
-  meta,
-  propsMeta,
-  propsOverrides
-};

package/lib/input.js

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

package/lib/input.stories.js

@@ -0,0 +1,9 @@
+"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,3 +1,4 @@
+"use strict";
 import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
 import {
   defaultStates
@@ -13,7 +14,7 @@ const presetStyle = {
     }
   ]
 };
-const meta = {
+export const meta = {
   category: "forms",
   invalidAncestors: ["Button"],
   type: "control",
@@ -28,18 +29,15 @@ const meta = {
     { 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" }
+    { 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" },
   ]
 };
-const propsMeta = {
+export const propsMeta = {
   props,
   initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"]
 };
-export {
-  meta,
-  propsMeta
-};

package/lib/italic.js

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

package/lib/italic.stories.js

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