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

package/src/accordion.ws.ts

@@ -4,15 +4,18 @@ import {
   HeaderIcon,
   TriggerIcon,
   ContentIcon,
+  ChevronDownIcon,
 } from "@webstudio-is/icons/svg";
 import type {
   EmbedTemplateStyleDecl,
   PresetStyle,
   WsComponentMeta,
   WsComponentPropsMeta,
+  WsEmbedTemplate,
 } from "@webstudio-is/react-sdk";
 import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
 import {
   propsAccordion,
   propsAccordionItem,
@@ -37,20 +40,73 @@ const presetStyle = {
 // border-b
 const accordionItemStyles: EmbedTemplateStyleDecl[] = [tc.borderB()].flat();
 
-// flex
-const accordionHeaderStyles: EmbedTemplateStyleDecl[] = [tc.flex()].flat();
-
-// flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
-const accordionTriggerStyles: EmbedTemplateStyleDecl[] = [
-  tc.flex(),
-  tc.flex(1),
-  tc.items("center"),
-  tc.justify("between"),
-  tc.py(4),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.hover([tc.underline()].flat()),
-].flat();
+const createAccordionTrigger = ({
+  children,
+}: {
+  children: WsEmbedTemplate;
+}): WsEmbedTemplate[number] => ({
+  type: "instance",
+  component: "AccordionHeader",
+  // flex
+  styles: [tc.flex()].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "AccordionTrigger",
+      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
+      styles: [
+        tc.flex(),
+        tc.flex(1),
+        tc.items("center"),
+        tc.justify("between"),
+        tc.py(4),
+        tc.font("medium"),
+        tc.hover([tc.underline()].flat()),
+        tc.property("--accordion-trigger-icon-transform", "0deg"),
+        tc.state(
+          [tc.property("--accordion-trigger-icon-transform", "180deg")],
+          "[data-state=open]"
+        ),
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Text",
+          children,
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Icon Container",
+          // h-4 w-4 shrink-0 transition-transform duration-200
+          styles: [
+            tc.property("rotate", "--accordion-trigger-icon-transform"),
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.transition("all"),
+            tc.duration(200),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Chevron Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: ChevronDownIcon,
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+});
 
 // overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down
 // pb-4 pt-0
@@ -64,9 +120,12 @@ const accordionContentStyles: EmbedTemplateStyleDecl[] = [
 
 export const metaAccordion: WsComponentMeta = {
   category: "radix",
+  order: 3,
   type: "container",
   icon: AccordionIcon,
   presetStyle,
+  description:
+    "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   template: [
     {
       type: "instance",
@@ -95,19 +154,9 @@ export const metaAccordion: WsComponentMeta = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it accessible?" }],
-                },
-              ],
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it accessible?" }],
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -127,19 +176,9 @@ export const metaAccordion: WsComponentMeta = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it styled?" }],
-                },
-              ],
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it styled?" }],
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -160,19 +199,9 @@ export const metaAccordion: WsComponentMeta = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it animated?" }],
-                },
-              ],
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it animated?" }],
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -199,6 +228,7 @@ export const metaAccordionItem: WsComponentMeta = {
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
   presetStyle,
+  label: "Item",
 };
 
 export const metaAccordionHeader: WsComponentMeta = {
@@ -210,6 +240,7 @@ export const metaAccordionHeader: WsComponentMeta = {
   presetStyle: {
     h3: [h3, tc.my(0)].flat(),
   },
+  label: "Item Header",
 };
 
 export const metaAccordionTrigger: WsComponentMeta = {
@@ -219,24 +250,9 @@ export const metaAccordionTrigger: WsComponentMeta = {
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
   presetStyle: {
-    button: [
-      button,
-      {
-        property: "backgroundColor",
-        value: { type: "keyword", value: "transparent" },
-      } as const,
-      {
-        property: "backgroundImage",
-        value: { type: "keyword", value: "none" },
-      } as const,
-      {
-        property: "cursor",
-        value: { type: "keyword", value: "pointer" },
-      } as const,
-      tc.px(0),
-      tc.border(0),
-    ].flat(),
+    button: [button, buttonReset].flat(),
   },
+  label: "Item Trigger",
 };
 
 export const metaAccordionContent: WsComponentMeta = {
@@ -246,6 +262,7 @@ export const metaAccordionContent: WsComponentMeta = {
   requiredAncestors: ["AccordionItem"],
   detachable: false,
   presetStyle,
+  label: "Item Content",
 };
 
 export const propsMetaAccordion: WsComponentPropsMeta = {

package/src/{textarea.stories.ts → checkbox.stories.ts}

@@ -1,25 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Textarea as TextareaPrimitive } from "./textarea";
 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 { Checkbox as CheckboxPrimitive } from "./checkbox";
 
 export default {
-  title: "Components/Textarea",
-  component: TextareaPrimitive,
-  argTypes: {
-    placeholder: {
-      type: "string",
-    },
-  },
-} satisfies Meta<typeof TextareaPrimitive>;
+  title: "Components/Checkbox",
+  component: CheckboxPrimitive,
+} satisfies Meta<typeof CheckboxPrimitive>;
 
-export const Textarea: StoryObj<typeof TextareaPrimitive> = {
+export const Checkbox: StoryObj<typeof CheckboxPrimitive> = {
   render: (props) =>
     renderComponentTemplate({
-      name: "Textarea",
+      name: "Checkbox",
       props: { ...props },
       components: { ...baseComponents, ...radixComponents },
       metas: { ...baseMetas, ...radixMetas },

package/src/checkbox.tsx

@@ -0,0 +1,22 @@
+/* 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,
+  forwardRef,
+} from "react";
+import { Root, Indicator } from "@radix-ui/react-checkbox";
+
+export const Checkbox = forwardRef<
+  HTMLButtonElement,
+  // radix checked has complex named type which cannot be parsed
+  // cast to boolean
+  Omit<ComponentPropsWithRef<typeof Root>, "checked"> & { checked: boolean }
+>((props, ref) => {
+  return <Root ref={ref} {...props} />;
+});
+
+export const CheckboxIndicator: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Indicator>
+> = Indicator;

package/src/checkbox.ws.ts

@@ -0,0 +1,154 @@
+import {
+  CheckMarkIcon,
+  CheckboxCheckedIcon,
+  TriggerIcon,
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { button, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import {
+  propsCheckbox,
+  propsCheckboxIndicator,
+} from "./__generated__/checkbox.props";
+
+export const metaCheckbox: WsComponentMeta = {
+  category: "radix",
+  order: 101,
+  type: "container",
+  icon: CheckboxCheckedIcon,
+  description:
+    "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states",
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states",
+    },
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat(),
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      styles: [tc.flex(), tc.gap(2), tc.items("center")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Checkbox",
+          dataSources: {
+            checkboxChecked: { type: "variable", initialValue: false },
+          },
+          props: [
+            {
+              name: "checked",
+              type: "dataSource",
+              dataSourceName: "checkboxChecked",
+            },
+            {
+              name: "onCheckedChange",
+              type: "action",
+              value: [
+                {
+                  type: "execute",
+                  args: ["checked"],
+                  code: `checkboxChecked = checked`,
+                },
+              ],
+            },
+          ],
+          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
+          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          // data-[state=checked]:bg-primary
+          // data-[state=checked]:text-primary-foreground",
+          styles: [
+            // We are not supporting peer like styles yet
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.rounded("sm"),
+            tc.border(),
+            tc.border("primary"),
+            tc.focusVisible(
+              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+            ),
+            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
+            tc.state(
+              [tc.bg("primary"), tc.text("primaryForeground")].flat(),
+              "[data-state=checked]"
+            ),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "CheckboxIndicator",
+              // flex items-center justify-center text-current
+              styles: [
+                tc.flex(),
+                tc.items("center"),
+                tc.justify("center"),
+                tc.text("current"),
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Indicator Icon",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: CheckMarkIcon,
+                    },
+                  ],
+                  children: [],
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ name: "tag", type: "string", value: "span" }],
+          children: [{ type: "text", value: "Checkbox" }],
+        },
+      ],
+    },
+  ],
+};
+
+export const metaCheckboxIndicator: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon,
+  states: defaultStates,
+  presetStyle: {
+    span,
+  },
+};
+
+export const propsMetaCheckbox: WsComponentPropsMeta = {
+  props: propsCheckbox,
+  initialProps: ["id", "checked", "name", "required"],
+};
+
+export const propsMetaCheckboxIndicator: WsComponentPropsMeta = {
+  props: propsCheckboxIndicator,
+};

package/src/collapsible.ws.ts

@@ -8,12 +8,13 @@ import type {
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
 import {
   propsCollapsible,
   propsCollapsibleContent,
   propsCollapsibleTrigger,
 } from "./__generated__/collapsible.props";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { getButtonStyles } from "./theme/styles";
 
 const presetStyle = {
   div,
@@ -21,9 +22,12 @@ const presetStyle = {
 
 export const metaCollapsible: WsComponentMeta = {
   category: "radix",
+  order: 5,
   type: "container",
   presetStyle,
   icon: CollapsibleIcon,
+  description:
+    "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
       type: "instance",
@@ -53,6 +57,7 @@ export const metaCollapsible: WsComponentMeta = {
             {
               type: "instance",
               component: "Button",
+              styles: getButtonStyles("outline"),
               children: [{ type: "text", value: "Click to toggle content" }],
             },
           ],

package/src/components.ts

@@ -14,19 +14,7 @@ export {
 } from "./dialog";
 export { Popover, PopoverTrigger, PopoverContent } from "./popover";
 export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
-export {
-  Sheet,
-  SheetTrigger,
-  SheetOverlay,
-  SheetContent,
-  SheetClose,
-  SheetTitle,
-  SheetDescription,
-} from "./sheet";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-export { Button } from "./button";
-export { Input } from "./input";
-export { Textarea } from "./textarea";
 export { Label } from "./label";
 export {
   Accordion,
@@ -35,3 +23,28 @@ export {
   AccordionTrigger,
   AccordionContent,
 } from "./accordion";
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport,
+} from "./navigation-menu";
+
+export {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+} from "./select";
+
+export { Switch, SwitchThumb } from "./switch";
+export { Checkbox, CheckboxIndicator } from "./checkbox";
+export { RadioGroup, RadioGroupItem, RadioGroupIndicator } from "./radio-group";

package/src/dialog.ws.tsx

@@ -12,6 +12,7 @@ import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
+import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
 import {
   propsDialog,
@@ -22,9 +23,7 @@ import {
   propsDialogTitle,
   propsDialogDescription,
 } from "./__generated__/dialog.props";
-import { template as buttonTemplate } from "./button.ws";
-
-import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
+import { getButtonStyles } from "./theme/styles";
 
 const presetStyle = {
   div,
@@ -86,6 +85,7 @@ export const metaDialogClose: WsComponentMeta = {
   type: "container",
   presetStyle: buttonPresetStyle,
   icon: ButtonElementIcon,
+  label: "Close Button",
 };
 
 /**
@@ -98,10 +98,12 @@ export const metaDialogClose: WsComponentMeta = {
  **/
 export const metaDialog: WsComponentMeta = {
   category: "radix",
+  order: 4,
   type: "container",
   icon: DialogIcon,
-  order: 15,
   stylable: false,
+  description:
+    "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
   template: [
     {
       type: "instance",
@@ -127,15 +129,18 @@ export const metaDialog: WsComponentMeta = {
         {
           type: "instance",
           component: "DialogTrigger",
-          props: [],
-          children: buttonTemplate({
-            children: [{ type: "text", value: "Button" }],
-          }),
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
         },
         {
           type: "instance",
           component: "DialogOverlay",
-          props: [],
           /**
            * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
            * flex
@@ -148,12 +153,12 @@ export const metaDialog: WsComponentMeta = {
             tc.backdropBlur("sm"),
             // To allow positioning Content
             tc.flex(),
+            tc.overflow("auto"),
           ].flat(),
           children: [
             {
               type: "instance",
               component: "DialogContent",
-              props: [],
               /**
                * fixed w-full z-50
                * grid gap-4 max-w-lg
@@ -179,13 +184,11 @@ export const metaDialog: WsComponentMeta = {
                   type: "instance",
                   component: "Box",
                   label: "Dialog Header",
-                  props: [],
                   styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
                   children: [
                     {
                       type: "instance",
                       component: "DialogTitle",
-                      props: [],
                       /**
                        * text-lg leading-none tracking-tight
                        **/
@@ -205,7 +208,6 @@ export const metaDialog: WsComponentMeta = {
                     {
                       type: "instance",
                       component: "DialogDescription",
-                      props: [],
                       /**
                        * text-sm text-muted-foreground
                        **/
@@ -217,7 +219,7 @@ export const metaDialog: WsComponentMeta = {
                       children: [
                         {
                           type: "text",
-                          value: "dialog description text you can edit",
+                          value: "Dialog description text you can edit",
                         },
                       ],
                     },
@@ -233,7 +235,6 @@ export const metaDialog: WsComponentMeta = {
                 {
                   type: "instance",
                   component: "DialogClose",
-                  props: [],
                   /**
                    * absolute right-4 top-4
                    * rounded-sm opacity-70
@@ -271,7 +272,7 @@ export const metaDialog: WsComponentMeta = {
 
 export const propsMetaDialog: WsComponentPropsMeta = {
   props: propsDialog,
-  initialProps: ["open", "modal"],
+  initialProps: ["open"],
 };
 
 export const propsMetaDialogTrigger: WsComponentPropsMeta = {

package/src/hooks.ts

@@ -6,6 +6,8 @@ import { hooksPopover } from "./popover";
 import { hooksSheet } from "./sheet";
 import { hooksTooltip } from "./tooltip";
 import { hooksAccordion } from "./accordion";
+import { hooksNavigationMenu } from "./navigation-menu";
+import { hooksSelect } from "./select";
 
 export const hooks: Hook[] = [
   hooksCollapsible,
@@ -15,4 +17,6 @@ export const hooks: Hook[] = [
   hooksSheet,
   hooksTooltip,
   hooksAccordion,
+  hooksNavigationMenu,
+  hooksSelect,
 ];

package/src/label.ws.ts

@@ -15,11 +15,13 @@ const presetStyle = {
 
 export const meta: WsComponentMeta = {
   category: "radix",
+  order: 102,
   type: "container",
   icon: LabelIcon,
   presetStyle,
   states: defaultStates,
-  order: 1,
+  description:
+    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
   template: [
     {
       type: "instance",