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

package/src/theme/tailwind-colors.ts

@@ -0,0 +1,45 @@
+/**
+ * Variables source:
+ * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/themes.ts#L1
+ * https://github.com/shadcn-ui/ui/blob/5e172fc34fdf015aa0d141f52cc8c082b8ae6613/apps/www/scripts/build-registry.ts#L220
+ *
+ * Attributions
+ * MIT License
+ * Copyright (c) 2023 shadcn
+ **/
+
+export const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+  popover: "rgb(255, 255, 255)",
+  popoverForeground: "rgb(2, 8, 23)",
+  border: "rgb(226, 232, 240)",
+  background: "rgb(255, 255, 255)",
+  foreground: "hsl(222.2 84% 4.9%)",
+  ring: "rgb(148, 163, 184)",
+  mutedForeground: "rgb(100, 116, 139)",
+  muted: `hsl(210 40% 96.1%)`,
+} as const;
+
+/*
+// Not used, leave it for the following components.
+
+--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/theme/tailwind-theme.ts

@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/no-internal-modules
+import defaultTheme from "tailwindcss/defaultTheme"; // Imported theme https://github.com/tailwindlabs/tailwindcss/blob/e0c52a9332a64ef7eb0ba23d2a0fd5a16fe57ab7/stubs/config.full.js
+import type { EvaluatedDefaultTheme } from "./radix-common-types";
+import { colors } from "./tailwind-colors";
+
+// Override the default theme with our own colors and other values if needed
+const localTheme = { ...defaultTheme };
+
+export const theme = <T extends keyof EvaluatedDefaultTheme>(
+  name: T
+): EvaluatedDefaultTheme[T] => {
+  const value = localTheme?.[name] as unknown;
+
+  if (typeof value === "function") {
+    return value({ theme, colors, breakpoints: () => ({}) });
+  }
+
+  return value as never;
+};
+
+// Override with our own colors, and other values if needed
+localTheme.colors = colors;
+localTheme.borderRadius = { ...theme("borderRadius") };
+localTheme.borderRadius.DEFAULT = "0.5rem";

package/src/tooltip.tsx

@@ -0,0 +1,69 @@
+/* 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 {
+  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";
+};
+
+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);
+
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root open={open} {...props} />
+    </TooltipPrimitive.Provider>
+  );
+});
+
+/**
+ * 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<"button">,
+  { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+
+  return (
+    <TooltipPrimitive.Trigger asChild={true} ref={ref} {...props}>
+      {firstChild ?? <button>Add button or link</button>}
+    </TooltipPrimitive.Trigger>
+  );
+});
+
+export const TooltipContent = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      // Do not show content if trigger is detached
+      hideWhenDetached={hideWhenDetached}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+));

package/src/tooltip.ws.tsx

@@ -0,0 +1,128 @@
+import { TooltipIcon, 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 {
+  propsTooltip,
+  propsTooltipContent,
+  propsTooltipTrigger,
+} from "./__generated__/tooltip.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 metaTooltipTrigger: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip Trigger",
+  icon: TriggerIcon,
+  stylable: false,
+};
+
+export const metaTooltipContent: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  presetStyle,
+  label: "Tooltip Content",
+  icon: ContentIcon,
+};
+
+/**
+ * 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: TooltipIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      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" },
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen",
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          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"],
+};