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

package/src/sheet.ws.tsx

@@ -1,106 +1,7 @@
-import {
-  HamburgerMenuIcon,
-  TriggerIcon,
-  ContentIcon,
-  OverlayIcon,
-  HeadingIcon,
-  TextIcon,
-  ButtonElementIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
+import { HamburgerMenuIcon } from "@webstudio-is/icons/svg";
+import type { WsComponentMeta } from "@webstudio-is/react-sdk";
 import * as tc from "./theme/tailwind-classes";
-import {
-  propsSheet,
-  propsSheetContent,
-  propsSheetTrigger,
-  propsSheetOverlay,
-  propsSheetClose,
-  propsSheetTitle,
-  propsSheetDescription,
-} from "./__generated__/sheet.props";
-import { div, nav, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
-import type { SheetContent } from "./sheet";
-import type { ComponentProps } from "react";
-import { template as buttonTemplate } from "./button.ws";
-
-type ContentTags = NonNullable<ComponentProps<typeof SheetContent>["tag"]>;
-
-const contentPresetStyle = {
-  div,
-  nav,
-} satisfies PresetStyle<ContentTags>;
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-const buttonPresetStyle = {
-  button,
-} satisfies PresetStyle<"button">;
-
-const titlePresetStyle = {
-  h2,
-} satisfies PresetStyle<"h2">;
-
-const descriptionPresetStyle = {
-  p,
-} satisfies PresetStyle<"p">;
-
-// @todo add [data-state] to button and link
-export const metaSheetTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false,
-};
-
-export const metaSheetContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: ContentIcon,
-  detachable: false,
-  presetStyle: contentPresetStyle,
-  states: [
-    { selector: "[data-side=top]", label: "Top Side" },
-    { selector: "[data-side=right]", label: "Right Side" },
-    { selector: "[data-side=bottom]", label: "Bottom Side" },
-    { selector: "[data-side=left]", label: "Left Side" },
-  ],
-};
-
-export const metaSheetOverlay: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: OverlayIcon,
-  detachable: false,
-};
-
-export const metaSheetTitle: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: titlePresetStyle,
-  icon: HeadingIcon,
-};
-
-export const metaSheetDescription: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: descriptionPresetStyle,
-  icon: TextIcon,
-};
-
-export const metaSheetClose: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: buttonPresetStyle,
-  icon: ButtonElementIcon,
-};
+import { getButtonStyles } from "./theme/styles";
 
 /**
  * Styles source without animations:
@@ -110,17 +11,17 @@ export const metaSheetClose: WsComponentMeta = {
  * MIT License
  * Copyright (c) 2023 shadcn
  **/
-export const metaSheet: WsComponentMeta = {
+export const meta: WsComponentMeta = {
   category: "radix",
-
+  order: 1,
   type: "container",
   icon: HamburgerMenuIcon,
-  order: 15,
   stylable: false,
   template: [
     {
       type: "instance",
-      component: "Sheet",
+      component: "Dialog",
+      label: "Sheet",
       dataSources: {
         sheetOpen: { type: "variable", initialValue: false },
       },
@@ -141,32 +42,35 @@ export const metaSheet: WsComponentMeta = {
       children: [
         {
           type: "instance",
-          component: "SheetTrigger",
-          children: buttonTemplate({
-            props: [
-              { name: "variant", type: "string", value: "ghost" },
-              { name: "size", type: "string", value: "icon" },
-            ],
-            children: [
-              {
-                type: "instance",
-                component: "HtmlEmbed",
-                label: "Hamburger Menu Svg",
-                props: [
-                  {
-                    type: "string",
-                    name: "code",
-                    value: HamburgerMenuIcon,
-                  },
-                ],
-                children: [],
-              },
-            ],
-          }),
+          component: "DialogTrigger",
+          label: "Sheet Trigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("ghost", "icon"),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Hamburger Menu Svg",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: HamburgerMenuIcon,
+                    },
+                  ],
+                  children: [],
+                },
+              ],
+            },
+          ],
         },
         {
           type: "instance",
-          component: "SheetOverlay",
+          component: "DialogOverlay",
+          label: "Sheet Overlay",
           /**
            * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
            * flex
@@ -185,7 +89,8 @@ export const metaSheet: WsComponentMeta = {
           children: [
             {
               type: "instance",
-              component: "SheetContent",
+              component: "DialogContent",
+              label: "Sheet Content",
               /**
                * fixed w-full z-50
                * grid gap-4 max-w-lg
@@ -203,73 +108,82 @@ export const metaSheet: WsComponentMeta = {
                 tc.p(6),
                 tc.shadow("lg"),
                 tc.relative(),
-                tc.state(
-                  [tc.mr("auto"), tc.maxW("sm"), tc.grow()].flat(),
-                  "[data-side=left]"
-                ),
-                tc.state(
-                  [tc.ml("auto"), tc.maxW("sm"), tc.grow()].flat(),
-                  "[data-side=right]"
-                ),
-                tc.state([tc.mb("auto")].flat(), "[data-side=top]"),
-                tc.state([tc.mt("auto")].flat(), "[data-side=bottom]"),
+                // side=left
+                tc.mr("auto"),
+                tc.maxW("sm"),
+                tc.grow(),
               ].flat(),
               children: [
                 {
                   type: "instance",
                   component: "Box",
-                  label: "Sheet Header",
-                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  label: "Navigation",
+                  props: [
+                    { name: "tag", type: "string", value: "nav" },
+                    { name: "role", type: "string", value: "navigation" },
+                  ],
                   children: [
                     {
                       type: "instance",
-                      component: "SheetTitle",
-                      /**
-                       * text-lg leading-none tracking-tight
-                       **/
-                      styles: [
-                        tc.my(0),
-                        tc.leading("none"),
-                        tc.text("lg"),
-                        tc.tracking("tight"),
-                      ].flat(),
+                      component: "Box",
+                      label: "Sheet Header",
+                      styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
                       children: [
                         {
-                          type: "text",
-                          value: "Sheet Title",
+                          type: "instance",
+                          component: "DialogTitle",
+                          label: "Sheet Title",
+                          /**
+                           * text-lg leading-none tracking-tight
+                           **/
+                          styles: [
+                            tc.my(0),
+                            tc.leading("none"),
+                            tc.text("lg"),
+                            tc.tracking("tight"),
+                          ].flat(),
+                          children: [
+                            {
+                              type: "text",
+                              value: "Sheet Title",
+                            },
+                          ],
+                        },
+                        {
+                          type: "instance",
+                          component: "DialogDescription",
+                          label: "Sheet Description",
+                          /**
+                           * text-sm text-muted-foreground
+                           **/
+                          styles: [
+                            tc.my(0),
+                            tc.text("sm"),
+                            tc.text("mutedForeground"),
+                          ].flat(),
+                          children: [
+                            {
+                              type: "text",
+                              value: "Sheet description text you can edit",
+                            },
+                          ],
                         },
                       ],
                     },
+
                     {
                       type: "instance",
-                      component: "SheetDescription",
-                      /**
-                       * text-sm text-muted-foreground
-                       **/
-                      styles: [
-                        tc.my(0),
-                        tc.text("sm"),
-                        tc.text("mutedForeground"),
-                      ].flat(),
+                      component: "Text",
                       children: [
-                        {
-                          type: "text",
-                          value: "sheet description text you can edit",
-                        },
+                        { type: "text", value: "The text you can edit" },
                       ],
                     },
                   ],
                 },
-
-                {
-                  type: "instance",
-                  component: "Text",
-                  children: [{ type: "text", value: "The text you can edit" }],
-                },
-
                 {
                   type: "instance",
-                  component: "SheetClose",
+                  component: "DialogClose",
+                  label: "Close Button",
                   /**
                    * absolute right-4 top-4
                    * rounded-sm opacity-70
@@ -304,37 +218,3 @@ export const metaSheet: WsComponentMeta = {
     },
   ],
 };
-
-export const propsMetaSheet: WsComponentPropsMeta = {
-  props: propsSheet,
-  initialProps: ["open", "modal"],
-};
-
-export const propsMetaSheetTrigger: WsComponentPropsMeta = {
-  props: propsSheetTrigger,
-};
-
-export const propsMetaSheetContent: WsComponentPropsMeta = {
-  props: propsSheetContent,
-  initialProps: ["side", "role", "tag"],
-};
-
-export const propsMetaSheetOverlay: WsComponentPropsMeta = {
-  props: propsSheetOverlay,
-  initialProps: [],
-};
-
-export const propsMetaSheetClose: WsComponentPropsMeta = {
-  props: propsSheetClose,
-  initialProps: [],
-};
-
-export const propsMetaSheetTitle: WsComponentPropsMeta = {
-  props: propsSheetTitle,
-  initialProps: [],
-};
-
-export const propsMetaSheetDescription: WsComponentPropsMeta = {
-  props: propsSheetDescription,
-  initialProps: [],
-};

package/src/{button.stories.ts → switch.stories.ts}

@@ -1,33 +1,20 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Button as ButtonPrimitive } from "./button";
 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 { Switch as SwitchPrimitive } from "./switch";
 
 export default {
-  title: "Components/Button",
-  component: ButtonPrimitive,
-  argTypes: {
-    variant: {
-      options: [
-        "default",
-        "destructive",
-        "outline",
-        "secondary",
-        "ghost",
-        "link",
-      ],
-      control: { type: "select" },
-    },
-  },
-} satisfies Meta<typeof ButtonPrimitive>;
+  title: "Components/Switch",
+  component: SwitchPrimitive,
+} satisfies Meta<typeof SwitchPrimitive>;
 
-export const Button: StoryObj<typeof ButtonPrimitive> = {
+export const Switch: StoryObj<typeof SwitchPrimitive> = {
   render: (props) =>
     renderComponentTemplate({
-      name: "Button",
+      name: "Switch",
       props: { ...props },
       components: { ...baseComponents, ...radixComponents },
       metas: { ...baseMetas, ...radixMetas },

package/src/switch.tsx

@@ -0,0 +1,10 @@
+import type { ForwardRefExoticComponent, ComponentPropsWithRef } from "react";
+import { Root, Thumb } from "@radix-ui/react-switch";
+
+export const Switch: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Root>
+> = Root;
+
+export const SwitchThumb: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Thumb>
+> = Thumb;

package/src/switch.ws.ts

@@ -0,0 +1,143 @@
+import { SwitchIcon, 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 { propsSwitch, propsSwitchThumb } from "./__generated__/switch.props";
+
+export const metaSwitch: WsComponentMeta = {
+  category: "radix",
+  order: 11,
+  type: "container",
+  icon: SwitchIcon,
+  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: "Switch",
+      dataSources: {
+        switchChecked: { type: "variable", initialValue: false },
+      },
+      props: [
+        {
+          name: "checked",
+          type: "dataSource",
+          dataSourceName: "switchChecked",
+        },
+        {
+          name: "onCheckedChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["checked"],
+              code: `switchChecked = checked`,
+            },
+          ],
+        },
+      ],
+      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
+      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+      // disabled:cursor-not-allowed disabled:opacity-50
+      // data-[state=checked]:bg-primary
+      // data-[state=unchecked]:bg-input
+      styles: [
+        // We are not supporting peer like styles yet
+        tc.inlineFlex(),
+        tc.property("height", "24px"),
+        tc.property("width", "44px"),
+        tc.shrink(0),
+        tc.cursor("pointer"),
+        tc.items("center"),
+        tc.rounded("full"),
+        tc.border(2),
+        tc.border("transparent"),
+        tc.transition("all"),
+        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")].flat(), "[data-state=checked]"),
+        tc.state([tc.bg("input")].flat(), "[data-state=unchecked]"),
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "SwitchThumb",
+          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
+          // data-[state=checked]:translate-x-5
+          // data-[state=unchecked]:translate-x-0
+          styles: [
+            tc.pointerEvents("none"),
+            tc.block(),
+            tc.h(5),
+            tc.w(5),
+            tc.rounded("full"),
+            tc.bg("background"),
+            tc.shadow("lg"),
+            tc.transition("transform"),
+            tc.state(
+              [tc.property("transform", "translateX(20px)")].flat(),
+              "[data-state=checked]"
+            ),
+            tc.state(
+              [tc.property("transform", "translateX(0px)")].flat(),
+              "[data-state=unchecked]"
+            ),
+          ].flat(),
+          children: [],
+        },
+      ],
+    },
+  ],
+};
+
+export const metaSwitchThumb: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states",
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states",
+    },
+  ],
+  presetStyle: {
+    span,
+  },
+};
+
+export const propsMetaSwitch: WsComponentPropsMeta = {
+  props: propsSwitch,
+  initialProps: ["id", "checked", "name", "required"],
+};
+
+export const propsMetaSwitchThumb: WsComponentPropsMeta = {
+  props: propsSwitchThumb,
+};

package/src/tabs.tsx

@@ -5,9 +5,7 @@ import {
   type ComponentPropsWithoutRef,
   type ForwardRefExoticComponent,
   type ComponentPropsWithRef,
-  type ReactNode,
   forwardRef,
-  Children,
 } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
 import {
@@ -22,28 +20,17 @@ export const Tabs: ForwardRefExoticComponent<
 
 export const TabsList = List;
 
-/**
- * We're not exposing the 'asChild' property for the Trigger.
- * Instead, we're enforcing 'asChild=true' for the Trigger and making it style-less.
- * This avoids situations where the Trigger inadvertently passes all styles to its child,
- * which would prevent us from displaying styles properly in the builder.
- */
 export const TabsTrigger = forwardRef<
   HTMLButtonElement,
-  { value: string; children: ReactNode }
->(({ value, children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
+  ComponentPropsWithoutRef<typeof Trigger>
+>(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);
-  return (
-    <Trigger ref={ref} value={value ?? index} asChild={true} {...props}>
-      {firstChild ?? <button>Add button</button>}
-    </Trigger>
-  );
+  return <Trigger ref={ref} value={value ?? index} {...props} />;
 });
 
 export const TabsContent = forwardRef<
   HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof Content>, "asChild">
+  ComponentPropsWithoutRef<typeof Content>
 >(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);
   return <Content ref={ref} value={value ?? index} {...props} />;

package/src/tabs.ws.ts

@@ -10,8 +10,9 @@ import type {
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { button, div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
 import {
   propsTabs,
   propsTabsList,
@@ -32,8 +33,11 @@ const presetStyle = {
  * Copyright (c) 2023 shadcn
  **/
 
-// inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm
-const tabsTriggerStyles: EmbedTemplateStyleDecl[] = [
+// inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all
+// focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+// disabled:pointer-events-none disabled:opacity-50
+// data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm
+const tabsTriggerStyles = [
   tc.inlineFlex(),
   tc.items("center"),
   tc.justify("center"),
@@ -64,6 +68,7 @@ const tabsContentStyles: EmbedTemplateStyleDecl[] = [
 
 export const metaTabs: WsComponentMeta = {
   category: "radix",
+  order: 2,
   type: "container",
   icon: TabsIcon,
   presetStyle,
@@ -103,26 +108,14 @@ export const metaTabs: WsComponentMeta = {
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Account" }],
-                },
-              ],
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Account" }],
             },
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Password" }],
-                },
-              ],
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Password" }],
             },
           ],
         },
@@ -161,6 +154,10 @@ export const metaTabsTrigger: WsComponentMeta = {
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
   indexWithinAncestor: "Tabs",
+  label: "Tab Trigger",
+  presetStyle: {
+    button: [button, buttonReset].flat(),
+  },
 };
 
 export const metaTabsContent: WsComponentMeta = {
@@ -170,6 +167,7 @@ export const metaTabsContent: WsComponentMeta = {
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
   presetStyle,
+  label: "Tab Content",
 };
 
 export const propsMetaTabs: WsComponentPropsMeta = {