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

package/src/collapsible.ws.ts

@@ -1,5 +1,10 @@
-import { RadioUncheckedIcon, RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  CollapsibleIcon,
+  TriggerIcon,
+  ContentIcon,
+} from "@webstudio-is/icons/svg";
 import type {
+  PresetStyle,
   WsComponentMeta,
   WsComponentPropsMeta,
 } from "@webstudio-is/react-sdk";
@@ -8,25 +13,30 @@ import {
   propsCollapsibleContent,
   propsCollapsibleTrigger,
 } from "./__generated__/collapsible.props";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
+
+const presetStyle = {
+  div,
+} satisfies PresetStyle<"div">;
 
 export const metaCollapsible: WsComponentMeta = {
   category: "radix",
   type: "container",
+  presetStyle,
   label: "Collapsible",
-  icon: RadioUncheckedIcon,
+  icon: CollapsibleIcon,
   template: [
     {
       type: "instance",
       component: "Collapsible",
+      dataSources: {
+        collapsibleOpen: { type: "variable", initialValue: false },
+      },
       props: [
         {
+          type: "dataSource",
           name: "open",
-          type: "boolean",
-          value: false,
-          dataSourceRef: {
-            type: "variable",
-            name: "collapsibleOpen",
-          },
+          dataSourceName: "collapsibleOpen",
         },
         {
           name: "onOpenChange",
@@ -72,7 +82,7 @@ export const metaCollapsibleTrigger: WsComponentMeta = {
   category: "hidden",
   type: "container",
   label: "Collapsible Trigger",
-  icon: RadioCheckedIcon,
+  icon: TriggerIcon,
   stylable: false,
   detachable: false,
 };
@@ -80,8 +90,9 @@ export const metaCollapsibleTrigger: WsComponentMeta = {
 export const metaCollapsibleContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
+  presetStyle,
   label: "Collapsible Content",
-  icon: RadioCheckedIcon,
+  icon: ContentIcon,
   detachable: false,
 };
 

package/src/components.ts

@@ -3,3 +3,24 @@ export {
   CollapsibleTrigger,
   CollapsibleContent,
 } from "./collapsible";
+export {
+  Dialog,
+  DialogTrigger,
+  DialogOverlay,
+  DialogContent,
+  DialogClose,
+  DialogTitle,
+  DialogDescription,
+} 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";

package/src/dialog.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  Children,
+  type ReactNode,
+} from "react";
+
+/**
+ * We don't have support for boolean or undefined nor in UI not at Data variables,
+ * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Dialog in the builder
+ **/
+type BuilderDialogProps = {
+  isOpen: "initial" | "open" | "closed";
+};
+
+export const Dialog = forwardRef<
+  ElementRef<"div">,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Root> & BuilderDialogProps
+>(({ open: openProp, isOpen, ...props }, ref) => {
+  const open =
+    openProp ??
+    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
+
+  return <DialogPrimitive.Root open={open} {...props} />;
+});
+
+/**
+ * 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 DialogTrigger = forwardRef<
+  ElementRef<"div">,
+  { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+
+  return (
+    <DialogPrimitive.Trigger asChild={true} {...props}>
+      {firstChild ?? <button>Add button or link</button>}
+    </DialogPrimitive.Trigger>
+  );
+});
+
+export const DialogOverlay = forwardRef<
+  ElementRef<"div">,
+  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>((props, ref) => {
+  return (
+    <DialogPrimitive.DialogPortal>
+      <DialogPrimitive.Overlay ref={ref} {...props} />
+    </DialogPrimitive.DialogPortal>
+  );
+});
+
+export const DialogContent = DialogPrimitive.Content;
+export const DialogClose = DialogPrimitive.Close;
+export const DialogTitle = DialogPrimitive.Title;
+export const DialogDescription = DialogPrimitive.Description;

package/src/dialog.ws.tsx

@@ -0,0 +1,315 @@
+import {
+  DialogIcon,
+  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 {
+  propsDialog,
+  propsDialogContent,
+  propsDialogTrigger,
+  propsDialogOverlay,
+  propsDialogClose,
+  propsDialogTitle,
+  propsDialogDescription,
+} from "./__generated__/dialog.props";
+
+import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
+
+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 metaDialogTrigger: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaDialogContent: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog Content",
+  presetStyle,
+  icon: ContentIcon,
+  detachable: false,
+};
+
+export const metaDialogOverlay: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog Overlay",
+  presetStyle,
+  icon: OverlayIcon,
+  detachable: false,
+};
+
+export const metaDialogTitle: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  presetStyle: titlePresetStyle,
+  label: "Dialog Title",
+  icon: HeadingIcon,
+};
+
+export const metaDialogDescription: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  presetStyle: descriptionPresetStyle,
+  label: "Dialog Description",
+  icon: TextIcon,
+};
+
+export const metaDialogClose: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  presetStyle: buttonPresetStyle,
+  label: "Dialog Close",
+  icon: ButtonElementIcon,
+};
+
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/dialog.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export const metaDialog: WsComponentMeta = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Dialog",
+  icon: DialogIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Dialog",
+      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: "DialogTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "DialogOverlay",
+          props: [],
+          /**
+           * 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(),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "DialogContent",
+              props: [],
+              /**
+               * 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.m("auto"),
+                tc.maxW("lg"),
+                tc.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative(),
+              ].flat(),
+              children: [
+                {
+                  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
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight"),
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Dialog Title",
+                        },
+                      ],
+                    },
+                    {
+                      type: "instance",
+                      component: "DialogDescription",
+                      props: [],
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground"),
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "dialog description text you can edit",
+                        },
+                      ],
+                    },
+                  ],
+                },
+
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }],
+                },
+
+                {
+                  type: "instance",
+                  component: "DialogClose",
+                  props: [],
+                  /**
+                   * 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 propsMetaDialog: WsComponentPropsMeta = {
+  props: propsDialog,
+  initialProps: ["isOpen", "modal"],
+};
+
+export const propsMetaDialogTrigger: WsComponentPropsMeta = {
+  props: propsDialogTrigger,
+};
+
+export const propsMetaDialogContent: WsComponentPropsMeta = {
+  props: propsDialogContent,
+  initialProps: [],
+};
+
+export const propsMetaDialogOverlay: WsComponentPropsMeta = {
+  props: propsDialogOverlay,
+  initialProps: [],
+};
+
+export const propsMetaDialogClose: WsComponentPropsMeta = {
+  props: propsDialogClose,
+  initialProps: [],
+};
+
+export const propsMetaDialogTitle: WsComponentPropsMeta = {
+  props: propsDialogTitle,
+  initialProps: [],
+};
+
+export const propsMetaDialogDescription: WsComponentPropsMeta = {
+  props: propsDialogDescription,
+  initialProps: [],
+};

package/src/hooks.ts

@@ -0,0 +1,4 @@
+import type { Hook } from "@webstudio-is/react-sdk";
+import { hooksCollapsible } from "./collapsible";
+
+export const hooks: Hook[] = [hooksCollapsible];

package/src/metas.ts

@@ -3,3 +3,37 @@ export {
   metaCollapsibleTrigger as CollapsibleTrigger,
   metaCollapsibleContent as CollapsibleContent,
 } from "./collapsible.ws";
+export {
+  metaDialog as Dialog,
+  metaDialogTrigger as DialogTrigger,
+  metaDialogOverlay as DialogOverlay,
+  metaDialogContent as DialogContent,
+  metaDialogClose as DialogClose,
+  metaDialogTitle as DialogTitle,
+  metaDialogDescription as DialogDescription,
+} from "./dialog.ws";
+export {
+  metaPopover as Popover,
+  metaPopoverTrigger as PopoverTrigger,
+  metaPopoverContent as PopoverContent,
+} from "./popover.ws";
+export {
+  metaTooltip as Tooltip,
+  metaTooltipTrigger as TooltipTrigger,
+  metaTooltipContent as TooltipContent,
+} from "./tooltip.ws";
+export {
+  metaSheet as Sheet,
+  metaSheetTrigger as SheetTrigger,
+  metaSheetOverlay as SheetOverlay,
+  metaSheetContent as SheetContent,
+  metaSheetClose as SheetClose,
+  metaSheetTitle as SheetTitle,
+  metaSheetDescription as SheetDescription,
+} from "./sheet.ws";
+export {
+  metaTabs as Tabs,
+  metaTabsList as TabsList,
+  metaTabsTrigger as TabsTrigger,
+  metaTabsContent as TabsContent,
+} from "./tabs.ws";

package/src/popover.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name */
+// We can't use .displayName until this is merged https://github.com/styleguidist/react-docgen-typescript/pull/449
+
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import {
+  forwardRef,
+  type ElementRef,
+  type ComponentPropsWithoutRef,
+  Children,
+  type ReactNode,
+} from "react";
+
+/**
+ * We don't have support for boolean or undefined nor in UI not at Data variables,
+ * instead of binding on "open" prop we bind variable on a isOpen prop to be able to show Popover in the builder
+ **/
+type BuilderPopoverProps = {
+  isOpen: "initial" | "open" | "closed";
+};
+
+export const Popover = forwardRef<
+  ElementRef<"div">,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> & BuilderPopoverProps
+>(({ open: openProp, isOpen, ...props }, ref) => {
+  const open =
+    openProp ??
+    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
+
+  return <PopoverPrimitive.Root open={open} {...props} />;
+});
+
+/**
+ * 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 PopoverTrigger = forwardRef<
+  ElementRef<"button">,
+  { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+
+  return (
+    <PopoverPrimitive.Trigger asChild={true} ref={ref} {...props}>
+      {firstChild ?? <button>Add button or link</button>}
+    </PopoverPrimitive.Trigger>
+  );
+});
+
+export const PopoverContent = forwardRef<
+  ElementRef<typeof PopoverPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(
+  (
+    { sideOffset = 4, align = "center", hideWhenDetached = true, ...props },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align="center"
+        sideOffset={sideOffset}
+        hideWhenDetached={hideWhenDetached}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+);