@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/src/{input.stories.ts → radio-group.stories.ts}

@@ -1,29 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Input as InputPrimitive } from "./input";
 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";
+import { RadioGroup as RadioGroupPrimitive } from "./radio-group";
 
 export default {
-  title: "Components/Input",
-  component: InputPrimitive,
-  argTypes: {
-    placeholder: {
-      type: "string",
-    },
-    type: {
-      options: ["text", "file"],
-      control: { type: "select" },
-    },
-  },
-} satisfies Meta<typeof InputPrimitive>;
+  title: "Components/RadioGroup",
+  component: RadioGroupPrimitive,
+} satisfies Meta<typeof RadioGroupPrimitive>;
 
-export const Input: StoryObj<typeof InputPrimitive> = {
+export const RadioGroup: StoryObj<typeof RadioGroupPrimitive> = {
   render: (props) =>
     renderComponentTemplate({
-      name: "Input",
+      name: "RadioGroup",
       props: { ...props },
       components: { ...baseComponents, ...radixComponents },
       metas: { ...baseMetas, ...radixMetas },

package/src/radio-group.tsx

@@ -0,0 +1,17 @@
+import {
+  type ForwardRefExoticComponent,
+  type ComponentPropsWithRef,
+} from "react";
+import { Root, Item, Indicator } from "@radix-ui/react-radio-group";
+
+export const RadioGroup: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Root>
+> = Root;
+
+export const RadioGroupItem: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Item>
+> = Item;
+
+export const RadioGroupIndicator: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Indicator>
+> = Indicator;

package/src/radio-group.ws.ts

@@ -0,0 +1,178 @@
+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",
+  description:
+    "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
+  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",
+  requiredAncestors: ["RadioGroup"],
+  icon: ItemIcon,
+  states: defaultStates,
+  presetStyle: {
+    button: [button, buttonReset].flat(),
+  },
+};
+
+export const metaRadioGroupIndicator: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  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,112 @@
+/* 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 = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof Value>, "placeholder"> & {
+    placeholder?: string;
+  }
+>((props, ref) => {
+  return <Value ref={ref} {...props} />;
+});
+
+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);
+        }
+      }
+    }
+  },
+};