@webstudio-is/sdk-components-react-radix 0.87.0 → 0.88.0

package/lib/radio-group.ws.js

@@ -0,0 +1,170 @@
+import {
+  ItemIcon,
+  RadioCheckedIcon,
+  RadioDotIcon,
+  TriggerIcon
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  WsEmbedTemplate
+} from "@webstudio-is/react-sdk";
+import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import {
+  propsRadioGroup,
+  propsRadioGroupIndicator,
+  propsRadioGroupItem
+} from "./__generated__/radio-group.props";
+const createRadioGroupItem = ({
+  value,
+  label
+}) => ({
+  type: "instance",
+  component: "Label",
+  // flex items-center space-x-2
+  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "RadioGroupItem",
+      props: [{ name: "value", type: "string", value }],
+      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
+      // focus:outline-none
+      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:cursor-not-allowed disabled:opacity-50
+      styles: [
+        tc.aspect("square"),
+        tc.h(4),
+        tc.w(4),
+        tc.rounded("full"),
+        tc.border(),
+        tc.border("primary"),
+        tc.text("primary"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "RadioGroupIndicator",
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Indicator Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: RadioDotIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "Text",
+      children: [{ type: "text", value: label }]
+    }
+  ]
+});
+const metaRadioGroup = {
+  category: "radix",
+  order: 100,
+  type: "container",
+  icon: RadioCheckedIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    div
+  },
+  template: [
+    {
+      type: "instance",
+      component: "RadioGroup",
+      dataSources: {
+        radioGroupValue: { type: "variable", initialValue: "" }
+      },
+      // grid gap-2
+      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
+      props: [
+        {
+          type: "dataSource",
+          name: "value",
+          dataSourceName: "radioGroupValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `radioGroupValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        createRadioGroupItem({ value: "default", label: "Default" }),
+        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
+        createRadioGroupItem({ value: "compact", label: "Compact" })
+      ]
+    }
+  ]
+};
+const metaRadioGroupItem = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  states: defaultStates,
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  }
+};
+const metaRadioGroupIndicator = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  states: defaultStates,
+  presetStyle: {
+    span
+  }
+};
+const propsMetaRadioGroup = {
+  props: propsRadioGroup,
+  initialProps: ["id", "value", "name", "required"]
+};
+const propsMetaRadioGroupItem = {
+  props: propsRadioGroupItem,
+  initialProps: ["value"]
+};
+const propsMetaRadioGroupIndicator = {
+  props: propsRadioGroupIndicator
+};
+export {
+  metaRadioGroup,
+  metaRadioGroupIndicator,
+  metaRadioGroupItem,
+  propsMetaRadioGroup,
+  propsMetaRadioGroupIndicator,
+  propsMetaRadioGroupItem
+};

package/lib/select.js

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import {
+  Root,
+  Value,
+  Trigger,
+  Content,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Portal,
+  Viewport
+} from "@radix-ui/react-select";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
+const Select = forwardRef(({ value, ...props }, _ref) => {
+  if (value === "") {
+    value = void 0;
+  }
+  return /* @__PURE__ */ jsx(Root, { value, ...props });
+});
+const SelectTrigger = Trigger;
+const SelectValue = Value;
+const SelectContent = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { ref, ...props, position: "popper" }) });
+});
+const SelectViewport = Viewport;
+const SelectItem = Item;
+const SelectItemIndicator = ItemIndicator;
+const SelectItemText = ItemText;
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksSelect = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SelectContent`) {
+        const select = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SelectContent`) {
+        const select = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", true);
+        }
+      }
+    }
+  }
+};
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  hooksSelect
+};

package/lib/select.ws.js

@@ -0,0 +1,337 @@
+import {
+  SelectIcon,
+  TriggerIcon,
+  FormTextFieldIcon,
+  ContentIcon,
+  ItemIcon,
+  ViewportIcon,
+  TextIcon,
+  CheckMarkIcon
+} from "@webstudio-is/icons/svg";
+import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsSelect,
+  propsSelectContent,
+  propsSelectItem,
+  propsSelectItemIndicator,
+  propsSelectItemText,
+  propsSelectTrigger,
+  propsSelectValue,
+  propsSelectViewport
+} from "./__generated__/select.props";
+const presetStyle = {
+  div
+};
+const createSelectItem = ({
+  props,
+  children
+}) => ({
+  type: "instance",
+  component: "SelectItem",
+  props,
+  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
+  // focus:bg-accent focus:text-accent-foreground
+  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
+  styles: [
+    tc.relative(),
+    tc.flex(),
+    tc.w("full"),
+    tc.cursor("default"),
+    tc.select("none"),
+    tc.items("center"),
+    tc.rounded("md"),
+    tc.py(1.5),
+    tc.pl(8),
+    tc.pr(2),
+    tc.text("sm"),
+    tc.outline("none"),
+    tc.focus([tc.bg("accent"), tc.text("accentForeground")].flat()),
+    tc.state(
+      [tc.pointerEvents("none"), tc.opacity(50)].flat(),
+      "[data-disabled]"
+    )
+  ].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "SelectItemIndicator",
+      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
+      styles: [
+        tc.absolute(),
+        tc.left(2),
+        tc.flex(),
+        tc.h(3.5),
+        tc.w(3.5),
+        tc.items("center"),
+        tc.justify("center")
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "HtmlEmbed",
+          label: "Indicator Icon",
+          props: [
+            {
+              type: "string",
+              name: "code",
+              value: CheckMarkIcon
+            }
+          ],
+          children: []
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "SelectItemText",
+      children
+    }
+  ]
+});
+const metaSelect = {
+  category: "radix",
+  order: 10,
+  type: "container",
+  icon: SelectIcon,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Select",
+      dataSources: {
+        selectValue: { type: "variable", initialValue: "" },
+        selectOpen: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          name: "value",
+          type: "dataSource",
+          dataSourceName: "selectValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["value"], code: `selectValue = value` }
+          ]
+        },
+        {
+          name: "open",
+          type: "dataSource",
+          dataSourceName: "selectOpen"
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `selectOpen = open` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SelectTrigger",
+          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
+          // placeholder:text-muted-foreground
+          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          styles: [
+            tc.flex(),
+            tc.h(10),
+            tc.w("full"),
+            tc.items("center"),
+            tc.justify("between"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.border("input"),
+            tc.bg("background"),
+            tc.px(3),
+            tc.py(2),
+            tc.text("sm"),
+            tc.state([tc.text("mutedForeground")].flat(), "::placeholder"),
+            tc.focus(
+              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+            ),
+            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectValue",
+              props: [{ name: "placeholder", type: "string", value: "Theme" }],
+              children: []
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "SelectContent",
+          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
+          // data-[state=open]:animate-in
+          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+          // data-[state=open]:fade-in-0
+          // data-[state=closed]:zoom-out-95
+          // data-[state=open]:zoom-in-95
+          // data-[side=bottom]:slide-in-from-top-2
+          // data-[side=left]:slide-in-from-right-2
+          // data-[side=right]:slide-in-from-left-2
+          // data-[side=top]:slide-in-from-bottom-2
+          // position=popper
+          // data-[side=bottom]:translate-y-1
+          // data-[side=left]:-translate-x-1
+          // data-[side=right]:translate-x-1
+          // data-[side=top]:-translate-y-1
+          styles: [
+            tc.relative(),
+            tc.z(50),
+            tc.property("minWidth", "8rem"),
+            tc.overflow("hidden"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.text("popoverForeground"),
+            tc.shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SelectViewport",
+              // p-1
+              // position=popper
+              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
+              styles: [
+                tc.p(1),
+                tc.property("height", "--radix-select-trigger-height"),
+                tc.w("full"),
+                tc.property("minWidth", "--radix-select-trigger-width")
+              ].flat(),
+              children: [
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "light" }],
+                  children: [{ type: "text", value: "Light" }]
+                }),
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "dark" }],
+                  children: [{ type: "text", value: "Dark" }]
+                }),
+                createSelectItem({
+                  props: [{ name: "value", type: "string", value: "system" }],
+                  children: [{ type: "text", value: "System" }]
+                })
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaSelectTrigger = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  detachable: false,
+  presetStyle: {
+    button
+  }
+};
+const metaSelectValue = {
+  category: "hidden",
+  type: "container",
+  label: "Value",
+  icon: FormTextFieldIcon,
+  detachable: false,
+  presetStyle: {
+    span
+  }
+};
+const metaSelectContent = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon,
+  detachable: false,
+  presetStyle
+};
+const metaSelectViewport = {
+  category: "hidden",
+  type: "container",
+  icon: ViewportIcon,
+  detachable: false,
+  presetStyle
+};
+const metaSelectItem = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  requiredAncestors: ["SelectViewport"],
+  presetStyle
+};
+const metaSelectItemIndicator = {
+  category: "hidden",
+  type: "container",
+  label: "Indicator",
+  icon: CheckMarkIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+const metaSelectItemText = {
+  category: "hidden",
+  type: "container",
+  label: "Item Text",
+  icon: TextIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+const propsMetaSelect = {
+  props: propsSelect,
+  initialProps: ["value", "open", "name", "required"]
+};
+const propsMetaSelectTrigger = {
+  props: propsSelectTrigger
+};
+const propsMetaSelectValue = {
+  props: propsSelectValue,
+  initialProps: ["placeholder"]
+};
+const propsMetaSelectContent = {
+  props: propsSelectContent
+};
+const propsMetaSelectViewport = {
+  props: propsSelectViewport
+};
+const propsMetaSelectItem = {
+  props: propsSelectItem,
+  initialProps: ["value"]
+};
+const propsMetaSelectItemIndicator = {
+  props: propsSelectItemIndicator
+};
+const propsMetaSelectItemText = {
+  props: propsSelectItemText
+};
+export {
+  metaSelect,
+  metaSelectContent,
+  metaSelectItem,
+  metaSelectItemIndicator,
+  metaSelectItemText,
+  metaSelectTrigger,
+  metaSelectValue,
+  metaSelectViewport,
+  propsMetaSelect,
+  propsMetaSelectContent,
+  propsMetaSelectItem,
+  propsMetaSelectItemIndicator,
+  propsMetaSelectItemText,
+  propsMetaSelectTrigger,
+  propsMetaSelectValue,
+  propsMetaSelectViewport
+};