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

package/src/collapsible.ws.ts

@@ -1,115 +0,0 @@
-import {
-  CollapsibleIcon,
-  TriggerIcon,
-  ContentIcon,
-} from "@webstudio-is/icons/svg";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import {
-  propsCollapsible,
-  propsCollapsibleContent,
-  propsCollapsibleTrigger,
-} from "./__generated__/collapsible.props";
-import { getButtonStyles } from "./theme/styles";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-export const metaCollapsible: WsComponentMeta = {
-  category: "radix",
-  order: 5,
-  type: "container",
-  presetStyle,
-  icon: CollapsibleIcon,
-  description:
-    "An interactive component which expands and collapses some content, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Collapsible",
-      dataSources: {
-        collapsibleOpen: { type: "variable", initialValue: false },
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "collapsibleOpen",
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `collapsibleOpen = open` },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "CollapsibleTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Click to toggle content" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "CollapsibleContent",
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "text", value: "Collapsible Content" }],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export const metaCollapsibleTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false,
-};
-
-export const metaCollapsibleContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  detachable: false,
-};
-
-export const propsMetaCollapsible: WsComponentPropsMeta = {
-  props: {
-    ...propsCollapsible,
-    onOpenChange: {
-      type: "action",
-      control: "action",
-      required: false,
-    },
-  },
-  initialProps: ["open", "onOpenChange"],
-};
-
-export const propsMetaCollapsibleTrigger: WsComponentPropsMeta = {
-  props: propsCollapsibleTrigger,
-};
-
-export const propsMetaCollapsibleContent: WsComponentPropsMeta = {
-  props: propsCollapsibleContent,
-};

package/src/components.ts

@@ -1,50 +0,0 @@
-export {
-  Collapsible,
-  CollapsibleTrigger,
-  CollapsibleContent,
-} from "./collapsible";
-export {
-  Dialog,
-  DialogTrigger,
-  DialogOverlay,
-  DialogContent,
-  DialogClose,
-  DialogTitle,
-  DialogDescription,
-} from "./dialog";
-export { Popover, PopoverTrigger, PopoverContent } from "./popover";
-export { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-export { Label } from "./label";
-export {
-  Accordion,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent,
-} from "./accordion";
-
-export {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuLink,
-  NavigationMenuViewport,
-} from "./navigation-menu";
-
-export {
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectViewport,
-  SelectContent,
-  SelectItem,
-  SelectItemIndicator,
-  SelectItemText,
-} from "./select";
-
-export { Switch, SwitchThumb } from "./switch";
-export { Checkbox, CheckboxIndicator } from "./checkbox";
-export { RadioGroup, RadioGroupItem, RadioGroupIndicator } from "./radio-group";

package/src/dialog.tsx

@@ -1,92 +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 {
-  type ComponentPropsWithoutRef,
-  type ReactNode,
-  forwardRef,
-  Children,
-} from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk";
-
-// wrap in forwardRef because Root is functional component without ref
-export const Dialog = forwardRef<
-  HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "defaultOpen">
->((props, _ref) => {
-  return <DialogPrimitive.Root {...props} />;
-});
-
-/**
- * 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 DialogTrigger = forwardRef<
-  HTMLButtonElement,
-  { children: ReactNode }
->(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-
-  return (
-    <DialogPrimitive.Trigger ref={ref} asChild={true} {...props}>
-      {firstChild ?? <button>Add button or link</button>}
-    </DialogPrimitive.Trigger>
-  );
-});
-
-export const DialogOverlay = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->((props, ref) => {
-  return (
-    <DialogPrimitive.DialogPortal>
-      <DialogPrimitive.Overlay ref={ref} {...props} />
-    </DialogPrimitive.DialogPortal>
-  );
-});
-
-export const DialogContent = DialogPrimitive.Content;
-export const DialogClose = DialogPrimitive.Close;
-export const DialogTitle = DialogPrimitive.Title;
-export const DialogDescription = DialogPrimitive.Description;
-
-/* BUILDER HOOKS */
-
-const namespace = "@webstudio-is/sdk-components-react-radix";
-
-// For each DialogOverlay component within the selection,
-// we identify its closest parent Dialog component
-// and update its open prop bound to variable.
-export const hooksDialog: Hook = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:DialogOverlay`) {
-        const dialog = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Dialog`
-        );
-        if (dialog) {
-          context.setPropVariable(dialog.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:DialogOverlay`) {
-        const dialog = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Dialog`
-        );
-        if (dialog) {
-          context.setPropVariable(dialog.id, "open", true);
-        }
-      }
-    }
-  },
-};

package/src/dialog.ws.tsx

@@ -1,318 +0,0 @@
-import {
-  DialogIcon,
-  TriggerIcon,
-  ContentIcon,
-  OverlayIcon,
-  HeadingIcon,
-  TextIcon,
-  ButtonElementIcon,
-  LargeXIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import {
-  propsDialog,
-  propsDialogContent,
-  propsDialogTrigger,
-  propsDialogOverlay,
-  propsDialogClose,
-  propsDialogTitle,
-  propsDialogDescription,
-} from "./__generated__/dialog.props";
-import { buttonReset, getButtonStyles } from "./theme/styles";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-const titlePresetStyle = {
-  h2,
-} satisfies PresetStyle<"h2">;
-
-const descriptionPresetStyle = {
-  p,
-} satisfies PresetStyle<"p">;
-
-// @todo add [data-state] to button and link
-export const metaDialogTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false,
-};
-
-export const metaDialogContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  detachable: false,
-};
-
-export const metaDialogOverlay: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: OverlayIcon,
-  detachable: false,
-};
-
-export const metaDialogTitle: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: titlePresetStyle,
-  icon: HeadingIcon,
-};
-
-export const metaDialogDescription: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: descriptionPresetStyle,
-  icon: TextIcon,
-};
-
-export const metaDialogClose: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle: {
-    button: [buttonReset, button].flat(),
-  },
-  icon: ButtonElementIcon,
-  label: "Close Button",
-};
-
-/**
- * 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",
-  order: 4,
-  type: "container",
-  icon: DialogIcon,
-  stylable: false,
-  description:
-    "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      dataSources: {
-        dialogOpen: { type: "variable", initialValue: false },
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "dialogOpen",
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `dialogOpen = open` },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          /**
-           * 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(),
-            tc.overflow("auto"),
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "DialogContent",
-              /**
-               * 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",
-                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "DialogTitle",
-                      /**
-                       * 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",
-                      /**
-                       * 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",
-                  /**
-                   * 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: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: LargeXIcon,
-                        },
-                      ],
-                      children: [],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export const propsMetaDialog: WsComponentPropsMeta = {
-  props: propsDialog,
-  initialProps: ["open"],
-};
-
-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/hooks.ts

@@ -1,22 +0,0 @@
-import type { Hook } from "@webstudio-is/react-sdk";
-import { hooksCollapsible } from "./collapsible";
-import { hooksTabs } from "./tabs";
-import { hooksDialog } from "./dialog";
-import { hooksPopover } from "./popover";
-import { hooksSheet } from "./sheet";
-import { hooksTooltip } from "./tooltip";
-import { hooksAccordion } from "./accordion";
-import { hooksNavigationMenu } from "./navigation-menu";
-import { hooksSelect } from "./select";
-
-export const hooks: Hook[] = [
-  hooksCollapsible,
-  hooksTabs,
-  hooksDialog,
-  hooksPopover,
-  hooksSheet,
-  hooksTooltip,
-  hooksAccordion,
-  hooksNavigationMenu,
-  hooksSelect,
-];

package/src/label.stories.ts

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

package/src/label.tsx

@@ -1,15 +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 {
-  forwardRef,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-} from "react";
-
-import * as LabelPrimitive from "@radix-ui/react-label";
-
-export const Label = forwardRef<
-  ElementRef<typeof LabelPrimitive.Root>,
-  Omit<ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, "asChild">
->((props, ref) => <LabelPrimitive.Root ref={ref} {...props} />);

package/src/label.ws.ts

@@ -1,50 +0,0 @@
-import { LabelIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { label } from "@webstudio-is/react-sdk/css-normalize";
-import { props } from "./__generated__/label.props";
-import * as tc from "./theme/tailwind-classes";
-
-const presetStyle = {
-  label,
-} satisfies PresetStyle<"label">;
-
-export const meta: WsComponentMeta = {
-  category: "radix",
-  order: 102,
-  type: "container",
-  icon: LabelIcon,
-  presetStyle,
-  states: defaultStates,
-  description:
-    "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      styles: [
-        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
-        tc.text("sm"),
-        tc.font("medium"),
-        tc.leading("none"),
-        // We are not supporting peer like styles yet
-      ].flat(),
-      children: [{ type: "text", value: "Form Label" }],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    htmlFor: {
-      ...props.htmlFor,
-      label: "For",
-    },
-  },
-  initialProps: ["id", "htmlFor"],
-};