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

package/src/theme/tailwind-colors.ts

@@ -19,6 +19,15 @@ export const colors = {
   ring: "rgb(148, 163, 184)",
   mutedForeground: "rgb(100, 116, 139)",
   muted: `hsl(210 40% 96.1%)`,
+  primary: "rgb(15, 23, 42)",
+  primaryForeground: "hsl(210 40% 98%)",
+  destructive: "rgb(239, 68, 68)",
+  destructiveForeground: "rgb(248, 250, 252)",
+  accent: "rgb(241, 245, 249)",
+  accentForeground: "rgb(15, 23, 42)",
+  input: "rgb(226, 232, 240)",
+  secondary: "rgb(241, 245, 249)",
+  secondaryForeground: "rgb(15, 23, 42)",
 } as const;
 
 /*
@@ -26,20 +35,4 @@ export const colors = {
 
 --card: 0 0% 100%;
 --card-foreground: 222.2 84% 4.9%;
-
---input: 214.3 31.8% 91.4%;
-
---primary: 222.2 47.4% 11.2%;
---primary-foreground: 210 40% 98%;
-
---secondary: 210 40% 96.1%;
---secondary-foreground: 222.2 47.4% 11.2%;
-
---accent: 210 40% 96.1%;
---accent-foreground: 222.2 47.4% 11.2%;
-
---destructive: 0 84.2% 60.2%;
---destructive-foreground: 210 40% 98%;
-
---ring: 215 20.2% 65.1%;
 */

package/src/tooltip.stories.tsx

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

package/src/tooltip.tsx

@@ -2,34 +2,22 @@
 // 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 { getClosestInstance, type Hook } from "@webstudio-is/react-sdk";
 
 import {
   forwardRef,
-  type ElementRef,
   type ComponentPropsWithoutRef,
-  Children,
   type ReactNode,
+  Children,
 } 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";
-};
-
 export const Tooltip = forwardRef<
-  ElementRef<"div">,
-  ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & BuilderTooltipProps
->(({ open: openProp, isOpen, ...props }, ref) => {
-  const open =
-    openProp ??
-    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
-
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>, "defaultOpen">
+>((props, _ref) => {
   return (
     <TooltipPrimitive.Provider>
-      <TooltipPrimitive.Root open={open} {...props} />
+      <TooltipPrimitive.Root {...props} />
     </TooltipPrimitive.Provider>
   );
 });
@@ -41,7 +29,7 @@ export const Tooltip = forwardRef<
  * which would prevent us from displaying styles properly in the builder.
  */
 export const TooltipTrigger = forwardRef<
-  ElementRef<"button">,
+  HTMLButtonElement,
   { children: ReactNode }
 >(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
@@ -54,7 +42,7 @@ export const TooltipTrigger = forwardRef<
 });
 
 export const TooltipContent = forwardRef<
-  ElementRef<typeof TooltipPrimitive.Content>,
+  HTMLDivElement,
   ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => (
   <TooltipPrimitive.Portal>
@@ -67,3 +55,41 @@ export const TooltipContent = forwardRef<
     />
   </TooltipPrimitive.Portal>
 ));
+
+/* BUILDER HOOKS */
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each TooltipContent component within the selection,
+// we identify its closest parent Tooltip component
+// and update its open prop bound to variable.
+export const hooksTooltip: Hook = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:TooltipContent`) {
+        const tooltip = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Tooltip`
+        );
+        if (tooltip) {
+          context.setPropVariable(tooltip.id, "open", true);
+        }
+      }
+    }
+  },
+};

package/src/tooltip.ws.tsx

@@ -11,6 +11,7 @@ import {
   propsTooltipTrigger,
 } from "./__generated__/tooltip.props";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { template as buttonTemplate } from "./button.ws";
 
 const presetStyle = {
   div,
@@ -20,9 +21,7 @@ const presetStyle = {
 export const metaTooltipTrigger: WsComponentMeta = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip Trigger",
   icon: TriggerIcon,
   stylable: false,
 };
@@ -30,10 +29,8 @@ export const metaTooltipTrigger: WsComponentMeta = {
 export const metaTooltipContent: WsComponentMeta = {
   category: "hidden",
   detachable: false,
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Tooltip Content",
   icon: ContentIcon,
 };
 
@@ -47,9 +44,7 @@ export const metaTooltipContent: WsComponentMeta = {
  **/
 export const metaTooltip: WsComponentMeta = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Tooltip",
   icon: TooltipIcon,
   order: 15,
   stylable: false,
@@ -58,14 +53,20 @@ export const metaTooltip: WsComponentMeta = {
       type: "instance",
       component: "Tooltip",
       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" },
+        tooltipOpen: { type: "variable", initialValue: false },
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen",
+          name: "open",
+          dataSourceName: "tooltipOpen",
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `tooltipOpen = open` },
+          ],
         },
       ],
       children: [
@@ -73,13 +74,9 @@ export const metaTooltip: WsComponentMeta = {
           type: "instance",
           component: "TooltipTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }],
+          }),
         },
         {
           type: "instance",
@@ -115,7 +112,7 @@ export const metaTooltip: WsComponentMeta = {
 
 export const propsMetaTooltip: WsComponentPropsMeta = {
   props: propsTooltip,
-  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"],
+  initialProps: ["open", "delayDuration", "disableHoverableContent"],
 };
 
 export const propsMetaTooltipTrigger: WsComponentPropsMeta = {