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

package/src/radio-group.ws.ts

@@ -0,0 +1,174 @@
+import {
+  ItemIcon,
+  RadioCheckedIcon,
+  RadioDotIcon,
+  TriggerIcon,
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  WsEmbedTemplate,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} 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,
+}: {
+  value: string;
+  label: string;
+}): WsEmbedTemplate[number] => ({
+  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 }],
+    },
+  ],
+});
+
+export const metaRadioGroup: WsComponentMeta = {
+  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" }),
+      ],
+    },
+  ],
+};
+
+export const metaRadioGroupItem: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  states: defaultStates,
+  presetStyle: {
+    button: [button, buttonReset].flat(),
+  },
+};
+
+export const metaRadioGroupIndicator: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  states: defaultStates,
+  presetStyle: {
+    span,
+  },
+};
+
+export const propsMetaRadioGroup: WsComponentPropsMeta = {
+  props: propsRadioGroup,
+  initialProps: ["id", "value", "name", "required"],
+};
+
+export const propsMetaRadioGroupItem: WsComponentPropsMeta = {
+  props: propsRadioGroupItem,
+  initialProps: ["value"],
+};
+
+export const propsMetaRadioGroupIndicator: WsComponentPropsMeta = {
+  props: propsRadioGroupIndicator,
+};

package/src/select.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Select as SelectPrimitive } from "./select";
+import * as baseComponents from "@webstudio-is/sdk-components-react";
+import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
+import * as radixComponents from "./components";
+import * as radixMetas from "./metas";
+
+export default {
+  title: "Components/Select",
+  component: SelectPrimitive,
+} satisfies Meta<typeof SelectPrimitive>;
+
+export const Select: StoryObj<typeof SelectPrimitive> = {
+  render: () =>
+    renderComponentTemplate({
+      name: "Select",
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/select.tsx

@@ -0,0 +1,107 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import {
+  type ForwardRefExoticComponent,
+  type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+} from "react";
+import {
+  Root,
+  Value,
+  Trigger,
+  Content,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Portal,
+  Viewport,
+} from "@radix-ui/react-select";
+import { type Hook, getClosestInstance } from "@webstudio-is/react-sdk";
+
+// wrap in forwardRef because Root is functional component without ref
+export const Select = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof Root>
+>(({ value, ...props }, _ref) => {
+  // radix consider empty string as empty value since this change but not released yet
+  // https://github.com/radix-ui/primitives/commit/a3dadb0a825524dd60629d426538dac74930791a
+  if (value === "") {
+    value = undefined;
+  }
+  return <Root value={value} {...props} />;
+});
+
+export const SelectTrigger: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Trigger>
+> = Trigger;
+
+export const SelectValue: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Value>
+> = Value;
+
+export const SelectContent = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof Content>, "position" | "side">
+>((props, ref) => {
+  return (
+    <Portal>
+      <Content ref={ref} {...props} position="popper" />
+    </Portal>
+  );
+});
+
+export const SelectViewport: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Viewport>
+> = Viewport;
+
+export const SelectItem: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Item>
+> = Item;
+
+export const SelectItemIndicator: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof ItemIndicator>
+> = ItemIndicator;
+
+export const SelectItemText: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof ItemText>
+> = ItemText;
+
+/* BUILDER HOOKS */
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each SelectContent component within the selection,
+// we identify its closest parent Select component
+// and update its open prop bound to variable.
+export const hooksSelect: Hook = {
+  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);
+        }
+      }
+    }
+  },
+};

package/src/select.ws.ts

@@ -0,0 +1,347 @@
+import {
+  SelectIcon,
+  TriggerIcon,
+  FormTextFieldIcon,
+  ContentIcon,
+  ItemIcon,
+  ViewportIcon,
+  TextIcon,
+  CheckMarkIcon,
+} from "@webstudio-is/icons/svg";
+import type {
+  EmbedTemplateInstance,
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+  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 {
+  propsSelect,
+  propsSelectContent,
+  propsSelectItem,
+  propsSelectItemIndicator,
+  propsSelectItemText,
+  propsSelectTrigger,
+  propsSelectValue,
+  propsSelectViewport,
+} from "./__generated__/select.props";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+const createSelectItem = ({
+  props,
+  children,
+}: {
+  props?: EmbedTemplateInstance["props"];
+  children: WsEmbedTemplate;
+}): EmbedTemplateInstance => ({
+  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,
+    },
+  ],
+});
+
+export const metaSelect: WsComponentMeta = {
+  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" }],
+                }),
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const metaSelectTrigger: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  detachable: false,
+  presetStyle: {
+    button,
+  },
+};
+
+export const metaSelectValue: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Value",
+  icon: FormTextFieldIcon,
+  detachable: false,
+  presetStyle: {
+    span,
+  },
+};
+
+export const metaSelectContent: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon,
+  detachable: false,
+  presetStyle,
+};
+
+export const metaSelectViewport: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ViewportIcon,
+  detachable: false,
+  presetStyle,
+};
+
+export const metaSelectItem: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  requiredAncestors: ["SelectViewport"],
+  presetStyle,
+};
+
+export const metaSelectItemIndicator: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Indicator",
+  icon: CheckMarkIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span,
+  },
+};
+
+export const metaSelectItemText: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Item Text",
+  icon: TextIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span,
+  },
+};
+
+export const propsMetaSelect: WsComponentPropsMeta = {
+  props: propsSelect,
+  initialProps: ["value", "open", "name", "required"],
+};
+
+export const propsMetaSelectTrigger: WsComponentPropsMeta = {
+  props: propsSelectTrigger,
+};
+
+export const propsMetaSelectValue: WsComponentPropsMeta = {
+  props: propsSelectValue,
+  initialProps: ["placeholder"],
+};
+
+export const propsMetaSelectContent: WsComponentPropsMeta = {
+  props: propsSelectContent,
+};
+
+export const propsMetaSelectViewport: WsComponentPropsMeta = {
+  props: propsSelectViewport,
+};
+
+export const propsMetaSelectItem: WsComponentPropsMeta = {
+  props: propsSelectItem,
+  initialProps: ["value"],
+};
+
+export const propsMetaSelectItemIndicator: WsComponentPropsMeta = {
+  props: propsSelectItemIndicator,
+};
+
+export const propsMetaSelectItemText: WsComponentPropsMeta = {
+  props: propsSelectItemText,
+};