@webstudio-is/sdk-components-react-radix 0.83.0 → 0.85.0

package/src/popover.ws.tsx

@@ -0,0 +1,127 @@
+import { PopoverIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
+import {
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsPopover,
+  propsPopoverContent,
+  propsPopoverTrigger,
+} from "./__generated__/popover.props";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
+
+// @todo add [data-state] to button and link
+export const metaPopoverTrigger: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaPopoverContent: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  presetStyle,
+  label: "Popover Content",
+  icon: ContentIcon,
+  detachable: false,
+};
+
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/popover.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export const metaPopover: WsComponentMeta = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover",
+  icon: PopoverIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      dataSources: {
+        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+        isOpen: { type: "variable", initialValue: "initial" },
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen",
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          props: [],
+          /**
+           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
+           **/
+          styles: [
+            tc.z(50),
+            tc.w(72),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.p(4),
+            tc.text("popoverForeground"),
+            tc.shadow("md"),
+            tc.outline("none"),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMetaPopover: WsComponentPropsMeta = {
+  props: propsPopover,
+  initialProps: ["isOpen", "modal"],
+};
+
+export const propsMetaPopoverTrigger: WsComponentPropsMeta = {
+  props: propsPopoverTrigger,
+};
+
+export const propsMetaPopoverContent: WsComponentPropsMeta = {
+  props: propsPopoverContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+};

package/src/props.ts

@@ -3,3 +3,37 @@ export {
   propsMetaCollapsibleTrigger as CollapsibleTrigger,
   propsMetaCollapsibleContent as CollapsibleContent,
 } from "./collapsible.ws";
+export {
+  propsMetaDialog as Dialog,
+  propsMetaDialogTrigger as DialogTrigger,
+  propsMetaDialogOverlay as DialogOverlay,
+  propsMetaDialogContent as DialogContent,
+  propsMetaDialogClose as DialogClose,
+  propsMetaDialogTitle as DialogTitle,
+  propsMetaDialogDescription as DialogDescription,
+} from "./dialog.ws";
+export {
+  propsMetaPopover as Popover,
+  propsMetaPopoverTrigger as PopoverTrigger,
+  propsMetaPopoverContent as PopoverContent,
+} from "./popover.ws";
+export {
+  propsMetaTooltip as Tooltip,
+  propsMetaTooltipTrigger as TooltipTrigger,
+  propsMetaTooltipContent as TooltipContent,
+} from "./tooltip.ws";
+export {
+  propsMetaSheet as Sheet,
+  propsMetaSheetTrigger as SheetTrigger,
+  propsMetaSheetOverlay as SheetOverlay,
+  propsMetaSheetContent as SheetContent,
+  propsMetaSheetClose as SheetClose,
+  propsMetaSheetTitle as SheetTitle,
+  propsMetaSheetDescription as SheetDescription,
+} from "./sheet.ws";
+export {
+  propsMetaTabs as Tabs,
+  propsMetaTabsList as TabsList,
+  propsMetaTabsTrigger as TabsTrigger,
+  propsMetaTabsContent as TabsContent,
+} from "./tabs.ws";

package/src/sheet.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Sheet as SheetPrimitive } from "./sheet";
+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/Sheet",
+  component: SheetPrimitive,
+} satisfies Meta<typeof SheetPrimitive>;
+
+export const Sheet: StoryObj<typeof SheetPrimitive> = {
+  render: () =>
+    renderComponentTemplate({
+      name: "Sheet",
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/sheet.tsx

@@ -0,0 +1,40 @@
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+} from "react";
+import * as Dialog from "./dialog";
+
+export const Sheet = Dialog.Dialog;
+export const SheetTrigger = Dialog.DialogTrigger;
+export const SheetOverlay = Dialog.DialogOverlay;
+export const SheetClose = Dialog.DialogClose;
+export const SheetTitle = Dialog.DialogTitle;
+export const SheetDescription = Dialog.DialogDescription;
+
+// eslint-disable-next-line react/display-name
+export const SheetContent = forwardRef<
+  ElementRef<"div">,
+  ComponentPropsWithoutRef<typeof Dialog.DialogContent> & {
+    tag?: "div" | "nav";
+    side?: "top" | "right" | "bottom" | "left";
+  }
+>(
+  (
+    { tag = "nav", side = "left", role = "navigation", children, ...props },
+    ref
+  ) => {
+    // Do not do this at args like { tag: Tag = "nav" }, generate-arg-types will not find defaultValue in that case
+    const Tag = tag;
+    return (
+      <Dialog.DialogContent
+        asChild={true}
+        data-side={side}
+        role={role}
+        {...props}
+      >
+        <Tag ref={ref}>{children}</Tag>
+      </Dialog.DialogContent>
+    );
+  }
+);

package/src/sheet.ws.tsx

@@ -0,0 +1,326 @@
+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 * 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";
+
+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",
+  label: "Sheet Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaSheetContent: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Sheet Content",
+  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,
+  label: "Sheet Overlay",
+  icon: OverlayIcon,
+  detachable: false,
+};
+
+export const metaSheetTitle: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  presetStyle: titlePresetStyle,
+  label: "Sheet Title",
+  icon: HeadingIcon,
+};
+
+export const metaSheetDescription: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  presetStyle: descriptionPresetStyle,
+  label: "Sheet Description",
+  icon: TextIcon,
+};
+
+export const metaSheetClose: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  presetStyle: buttonPresetStyle,
+  label: "Sheet Close",
+  icon: ButtonElementIcon,
+};
+
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/sheet.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export const metaSheet: WsComponentMeta = {
+  category: "radix",
+
+  type: "container",
+  label: "Sheet",
+  icon: HamburgerMenuIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Sheet",
+      dataSources: {
+        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+        isOpen: { type: "variable", initialValue: "initial" },
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen",
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SheetTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "SheetOverlay",
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            tc.fixed(),
+            tc.inset(0),
+            tc.z(50),
+            tc.bg("background", 80),
+            tc.backdropBlur("sm"),
+            // To allow positioning Content
+            tc.flex(),
+            tc.flex("col"),
+            tc.overflow("auto"),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SheetContent",
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                tc.w("full"),
+                tc.z(50),
+                tc.flex(),
+                tc.flex("col"),
+                tc.gap(4),
+                tc.border(),
+                tc.bg("background"),
+                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]"),
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Sheet Header",
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  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(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Sheet Title",
+                        },
+                      ],
+                    },
+                    {
+                      type: "instance",
+                      component: "SheetDescription",
+                      /**
+                       * 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: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }],
+                },
+
+                {
+                  type: "instance",
+                  component: "SheetClose",
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    tc.absolute(),
+                    tc.right(4),
+                    tc.top(4),
+                    tc.rounded("sm"),
+                    tc.opacity(70),
+                    tc.flex(),
+                    tc.items("center"),
+                    tc.justify("center"),
+                    tc.h(4),
+                    tc.w(4),
+                    tc.border(0),
+                    tc.bg("transparent"),
+                    tc.outline("none"),
+                    tc.hover(tc.opacity(100)),
+                    tc.focus(tc.ring("ring", 2, "background", 2)),
+                  ].flat(),
+                  children: [{ type: "text", value: "✕" }],
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMetaSheet: WsComponentPropsMeta = {
+  props: propsSheet,
+  initialProps: ["isOpen", "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/tabs.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Tabs as TabsPrimitive } from "./tabs";
+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/Tabs",
+  component: TabsPrimitive,
+} satisfies Meta<typeof TabsPrimitive>;
+
+export const Tabs: StoryObj<typeof TabsPrimitive> = {
+  render: () =>
+    renderComponentTemplate({
+      name: "Tabs",
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/tabs.tsx

@@ -0,0 +1,46 @@
+/* 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 ComponentPropsWithoutRef,
+  type ForwardRefExoticComponent,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  forwardRef,
+  Children,
+} from "react";
+import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromComponentProps } from "@webstudio-is/react-sdk";
+
+export const Tabs: ForwardRefExoticComponent<
+  Omit<ComponentPropsWithRef<typeof Root>, "asChild" | "defaultValue">
+> = Root;
+
+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];
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return (
+    <Trigger ref={ref} value={value ?? index} asChild={true} {...props}>
+      {firstChild ?? <button>Add button</button>}
+    </Trigger>
+  );
+});
+
+export const TabsContent = forwardRef<
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof Content>, "asChild">
+>(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return <Content ref={ref} value={value ?? index} {...props} />;
+});