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

package/src/radix-dialog.ws.tsx

@@ -1,291 +0,0 @@
-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 {
-  propsDialog,
-  propsDialogContent,
-  propsDialogTrigger,
-  propsDialogOverlay,
-  propsDialogClose,
-  propsDialogTitle,
-  propsDialogDescription,
-} from "./__generated__/radix-dialog.props";
-
-// @todo add [data-state] to button and link
-export const metaDialogTrigger: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogTrigger",
-  icon: RadioCheckedIcon,
-  stylable: false,
-  detachable: false,
-};
-
-export const metaDialogContent: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogContent",
-  icon: RadioCheckedIcon,
-  detachable: false,
-};
-
-export const metaDialogOverlay: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogOverlay",
-  icon: RadioCheckedIcon,
-  detachable: false,
-};
-
-export const metaDialogTitle: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogTitle",
-  icon: RadioCheckedIcon,
-};
-
-export const metaDialogDescription: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogDescription",
-  icon: RadioCheckedIcon,
-};
-
-export const metaDialogClose: WsComponentMeta = {
-  category: "hidden",
-  invalidAncestors: [],
-  type: "container",
-  label: "DialogClose",
-  icon: RadioCheckedIcon,
-};
-
-/**
- * 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: RadioCheckedIcon,
-  order: 15,
-  stylable: false,
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      label: "Dialog",
-      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: "DialogTrigger",
-          props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          label: "Dialog Overlay",
-          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",
-              label: "Dialog Content",
-              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",
-                      label: "Dialog Title",
-                      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",
-                      label: "Dialog Description",
-                      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",
-                  label: "Dialog Close",
-                  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/radix-popover.tsx

@@ -1,89 +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 PopoverPrimitive from "@radix-ui/react-popover";
-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 Popover in the builder
- **/
-type BuilderPopoverProps = {
-  isOpen: "initial" | "open" | "closed";
-};
-
-/**
- * Popover and PopoverTrigger 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 Popover = forwardRef<
-  ElementRef<"div">,
-  WebstudioAttributes &
-    ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> &
-    BuilderPopoverProps
->(({ 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}>
-      <PopoverPrimitive.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 PopoverTrigger = 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}>
-      <PopoverPrimitive.Trigger asChild={true} {...restProps}>
-        {firstChild ?? <button>Add button or link</button>}
-      </PopoverPrimitive.Trigger>
-    </div>
-  );
-});
-
-export const PopoverContent = forwardRef<
-  ElementRef<typeof PopoverPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ sideOffset = 4, align = "center", ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align="center"
-      sideOffset={sideOffset}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
-));

package/src/radix-popover.ws.tsx

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

@@ -1,84 +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 {
-  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

@@ -1,125 +0,0 @@
-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"],
-};