@webstudio-is/sdk-components-react 0.82.0 → 0.83.0

package/src/radix-popover.ws.tsx

@@ -0,0 +1,124 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+
+import {
+  propsPopover,
+  propsPopoverContent,
+  propsPopoverTrigger,
+} from "./__generated__/radix-popover.props";
+
+// @todo add [data-state] to button and link
+export const metaPopoverTrigger: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaPopoverContent: WsComponentMeta = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverContent",
+  icon: RadioCheckedIcon,
+  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: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      label: "Popover",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen",
+          },
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          label: "Popover Content",
+          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/radix-tooltip.tsx

@@ -0,0 +1,84 @@
+/* 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 TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+  splitPropsWithWebstudioAttributes,
+  type WebstudioAttributes,
+} from "@webstudio-is/react-sdk";
+
+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 Tooltip in the builder
+ **/
+type BuilderTooltipProps = {
+  isOpen: "initial" | "open" | "closed";
+};
+
+/**
+ * Tooltip and TooltipTrigger are HTML-less components.
+ * To make them work in our system, we wrap their attributes with a div that has a display: contents property.
+ *
+ * These divs function like fragments, with all web studio-related attributes attached to them.
+ */
+const DisplayContentsStyle = { display: "contents" };
+
+export const Tooltip = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes &
+    ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> &
+    BuilderTooltipProps
+>(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  const open =
+    openProp ??
+    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <TooltipPrimitive.Root open={open} {...restProps} />
+    </div>
+  );
+});
+
+/**
+ * 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 TooltipTrigger = forwardRef<
+  ElementRef<"div">,
+  WebstudioAttributes & { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+
+  return (
+    <div ref={ref} style={DisplayContentsStyle} {...webstudioAttributes}>
+      <TooltipPrimitive.Trigger asChild={true} {...restProps}>
+        {firstChild ?? <button>Add button or link</button>}
+      </TooltipPrimitive.Trigger>
+    </div>
+  );
+});
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} {...props} />
+  </TooltipPrimitive.Portal>
+));

package/src/radix-tooltip.ws.tsx

@@ -0,0 +1,125 @@
+import { RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import {
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import * as tc from "./theme/tailwind-classes";
+
+import {
+  propsTooltip,
+  propsTooltipContent,
+  propsTooltipTrigger,
+} from "./__generated__/radix-tooltip.props";
+
+// @todo add [data-state] to button and link
+export const metaTooltipTrigger: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipTrigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+};
+
+export const metaTooltipContent: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipContent",
+  icon: RadioCheckedIcon,
+};
+
+/**
+ * Styles source without animations:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/tooltip.tsx
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+export const metaTooltip: WsComponentMeta = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip",
+  icon: RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      label: "Tooltip",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen",
+          },
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          label: "Tooltip Content",
+          props: [],
+          /**
+           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
+           **/
+          styles: [
+            tc.z(50),
+            tc.overflow("hidden"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.px(3),
+            tc.py(1.5),
+            tc.text("sm"),
+            tc.text("popoverForeground"),
+            tc.shadow("md"),
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+};
+
+export const propsMetaTooltip: WsComponentPropsMeta = {
+  props: propsTooltip,
+  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"],
+};
+
+export const propsMetaTooltipTrigger: WsComponentPropsMeta = {
+  props: propsTooltipTrigger,
+};
+
+export const propsMetaTooltipContent: WsComponentPropsMeta = {
+  props: propsTooltipContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+};