@webstudio-is/react-sdk 0.60.0 → 0.62.0

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

@@ -0,0 +1,35 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons";
+import { input } from "../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 Button",
+  Icon: RadioCheckedIcon,
+  presetStyle,
+  states: [
+    { 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/components/separator.ws.js

@@ -2,33 +2,33 @@ import { DashIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/separator.props";
 import { hr } from "../css/normalize";
 const presetStyle = {
-  hr: {
+  hr: [
     ...hr,
-    height: {
-      type: "keyword",
-      value: "1px"
+    {
+      property: "height",
+      value: { type: "keyword", value: "1px" }
     },
-    backgroundColor: {
-      type: "keyword",
-      value: "gray"
+    {
+      property: "backgroundColor",
+      value: { type: "keyword", value: "gray" }
     },
-    borderTopStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderRightStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderLeftStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "none" }
     },
-    borderBottomStyle: {
-      type: "keyword",
-      value: "none"
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "none" }
     }
-  }
+  ]
 };
 const meta = {
   category: "general",

package/lib/components/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/components/success-message.ws.js

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

package/lib/components/text-block.ws.js

@@ -2,14 +2,13 @@ import { TextBlockIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/text-block.props";
 import { div } from "../css/normalize";
 const presetStyle = {
-  div: {
+  div: [
     ...div,
-    minHeight: {
-      type: "unit",
-      unit: "em",
-      value: 1
+    {
+      property: "minHeight",
+      value: { type: "unit", unit: "em", value: 1 }
     }
-  }
+  ]
 };
 const meta = {
   category: "typography",
@@ -17,7 +16,7 @@ const meta = {
   label: "Text Block",
   Icon: TextBlockIcon,
   presetStyle,
-  children: ["Block of text you can edit"]
+  children: [{ type: "text", value: "Block of text you can edit" }]
 };
 const propsMeta = {
   props

package/lib/components/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/components/textarea.ws.js

@@ -0,0 +1,36 @@
+import { FormTextAreaIcon } from "@webstudio-is/icons";
+import { textarea } from "../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,
+  states: [
+    { 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/css/css.js

@@ -1,9 +1,9 @@
 import { createCssEngine } from "@webstudio-is/css-engine";
 import { getComponentNames } from "../components/components-utils";
 import { getComponentMeta } from "../components";
-import { componentAttribute, idAttribute } from "../tree";
+import { idAttribute } from "../tree";
 import { addGlobalRules } from "./global-rules";
-import { getStyleRules } from "./style-rules";
+import { getPresetStyleRules, getStyleRules } from "./style-rules";
 const createImageValueTransformer = (assets, options) => (styleValue) => {
   if (styleValue.type === "image" && styleValue.value.type === "asset") {
     const asset = assets.get(styleValue.value.value);
@@ -40,15 +40,12 @@ const generateCssText = (data, options) => {
   for (const component of getComponentNames()) {
     const meta = getComponentMeta(component);
     const presetStyle = meta?.presetStyle;
-    if (presetStyle !== void 0) {
-      for (const [tag, style] of Object.entries(presetStyle)) {
-        engine.addStyleRule(
-          `${tag}:where([${componentAttribute}=${component}])`,
-          {
-            style
-          }
-        );
-      }
+    if (presetStyle === void 0) {
+      continue;
+    }
+    const rules = getPresetStyleRules(component, presetStyle);
+    for (const [selector, style] of rules) {
+      engine.addStyleRule(selector, { style });
     }
   }
   const styleRules = getStyleRules(styles, styleSourceSelections);