@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

package/src/theme/tailwind-colors.ts

@@ -1,39 +0,0 @@
-/**
- * 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",
-  inherit: "inherit",
-  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%)`,
-  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;
-
-/*
-// Not used, leave it for the following components.
-
---card: 0 0% 100%;
---card-foreground: 222.2 84% 4.9%;
-*/

package/src/theme/tailwind-theme.ts

@@ -1,24 +0,0 @@
-// 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

@@ -1,95 +0,0 @@
-/* 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 { getClosestInstance, type Hook } from "@webstudio-is/react-sdk";
-
-import {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ReactNode,
-  Children,
-} from "react";
-
-export const Tooltip = forwardRef<
-  HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>, "defaultOpen">
->((props, _ref) => {
-  return (
-    <TooltipPrimitive.Provider>
-      <TooltipPrimitive.Root {...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<
-  HTMLButtonElement,
-  { 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<
-  HTMLDivElement,
-  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>
-));
-
-/* 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

@@ -1,130 +0,0 @@
-import { TooltipIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
-import {
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import {
-  propsTooltip,
-  propsTooltipContent,
-  propsTooltipTrigger,
-} from "./__generated__/tooltip.props";
-import { getButtonStyles } from "./theme/styles";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-// @todo add [data-state] to button and link
-export const metaTooltipTrigger: WsComponentMeta = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-};
-
-export const metaTooltipContent: WsComponentMeta = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  presetStyle,
-  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",
-  order: 7,
-  type: "container",
-  icon: TooltipIcon,
-  stylable: false,
-  description:
-    "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
-  template: [
-    {
-      type: "instance",
-      component: "Tooltip",
-      dataSources: {
-        tooltipOpen: { type: "variable", initialValue: false },
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "tooltipOpen",
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `tooltipOpen = open` },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "TooltipTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "TooltipContent",
-          /**
-           *  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: ["open", "delayDuration", "disableHoverableContent"],
-};
-
-export const propsMetaTooltipTrigger: WsComponentPropsMeta = {
-  props: propsTooltipTrigger,
-};
-
-export const propsMetaTooltipContent: WsComponentPropsMeta = {
-  props: propsTooltipContent,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"],
-};