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

package/src/popover.ws.tsx

@@ -1,128 +0,0 @@
-import { PopoverIcon, 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 { getButtonStyles } from "./theme/styles";
-import {
-  propsPopover,
-  propsPopoverContent,
-  propsPopoverTrigger,
-} from "./__generated__/popover.props";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-// @todo add [data-state] to button and link
-export const metaPopoverTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false,
-};
-
-export const metaPopoverContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  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",
-  order: 6,
-  type: "container",
-  icon: PopoverIcon,
-  stylable: false,
-  description: "Displays rich content in a portal, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Popover",
-      dataSources: {
-        popoverOpen: { type: "variable", initialValue: false },
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "popoverOpen",
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `popoverOpen = open` },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "PopoverTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "PopoverContent",
-          /**
-           *  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: ["open"],
-};
-
-export const propsMetaPopoverTrigger: WsComponentPropsMeta = {
-  props: propsPopoverTrigger,
-};
-
-export const propsMetaPopoverContent: WsComponentPropsMeta = {
-  props: propsPopoverContent,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"],
-};

package/src/props-descriptions.ts

@@ -1,43 +0,0 @@
-const open =
-  "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
-
-const alignOffset =
-  "The offset in pixels from the “start“ or “end“ alignment options.";
-
-const sideOffset =
-  "The distance in pixels between the Content and the Trigger.";
-
-const side =
-  "The preferred alignment against the Trigger. May change when collisions occur.";
-
-export const propsDescriptions = {
-  Dialog: {
-    open,
-  },
-  Sheet: {
-    open,
-  },
-  Collapsible: {
-    open,
-  },
-  Popover: {
-    open,
-  },
-  PopoverContent: {
-    alignOffset,
-    sideOffset,
-    side,
-  },
-  Tooltip: {
-    open,
-    delayDuration:
-      "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
-    disableHoverableContent:
-      "When toggled, prevents the Tooltip content from showing when the Trigger is hovered.",
-  },
-  TooltipContent: {
-    alignOffset,
-    sideOffset,
-    side,
-  },
-};

package/src/props.ts

@@ -1,73 +0,0 @@
-export {
-  propsMetaCollapsible as Collapsible,
-  propsMetaCollapsibleTrigger as CollapsibleTrigger,
-  propsMetaCollapsibleContent as CollapsibleContent,
-} from "./collapsible.ws";
-export {
-  propsMetaDialog as Dialog,
-  propsMetaDialogTrigger as DialogTrigger,
-  propsMetaDialogOverlay as DialogOverlay,
-  propsMetaDialogContent as DialogContent,
-  propsMetaDialogClose as DialogClose,
-  propsMetaDialogTitle as DialogTitle,
-  propsMetaDialogDescription as DialogDescription,
-} from "./dialog.ws";
-export {
-  propsMetaPopover as Popover,
-  propsMetaPopoverTrigger as PopoverTrigger,
-  propsMetaPopoverContent as PopoverContent,
-} from "./popover.ws";
-export {
-  propsMetaTooltip as Tooltip,
-  propsMetaTooltipTrigger as TooltipTrigger,
-  propsMetaTooltipContent as TooltipContent,
-} from "./tooltip.ws";
-export {
-  propsMetaTabs as Tabs,
-  propsMetaTabsList as TabsList,
-  propsMetaTabsTrigger as TabsTrigger,
-  propsMetaTabsContent as TabsContent,
-} from "./tabs.ws";
-export { propsMeta as Label } from "./label.ws";
-export {
-  propsMetaAccordion as Accordion,
-  propsMetaAccordionItem as AccordionItem,
-  propsMetaAccordionHeader as AccordionHeader,
-  propsMetaAccordionTrigger as AccordionTrigger,
-  propsMetaAccordionContent as AccordionContent,
-} from "./accordion.ws";
-
-export {
-  propsMetaNavigationMenu as NavigationMenu,
-  propsMetaNavigationMenuList as NavigationMenuList,
-  propsMetaNavigationMenuItem as NavigationMenuItem,
-  propsMetaNavigationMenuTrigger as NavigationMenuTrigger,
-  propsMetaNavigationMenuContent as NavigationMenuContent,
-  propsMetaNavigationMenuLink as NavigationMenuLink,
-  propsMetaNavigationMenuViewport as NavigationMenuViewport,
-} from "./navigation-menu.ws";
-
-export {
-  propsMetaSelect as Select,
-  propsMetaSelectTrigger as SelectTrigger,
-  propsMetaSelectValue as SelectValue,
-  propsMetaSelectViewport as SelectViewport,
-  propsMetaSelectContent as SelectContent,
-  propsMetaSelectItem as SelectItem,
-  propsMetaSelectItemIndicator as SelectItemIndicator,
-  propsMetaSelectItemText as SelectItemText,
-} from "./select.ws";
-
-export {
-  propsMetaSwitch as Switch,
-  propsMetaSwitchThumb as SwitchThumb,
-} from "./switch.ws";
-export {
-  propsMetaCheckbox as Checkbox,
-  propsMetaCheckboxIndicator as CheckboxIndicator,
-} from "./checkbox.ws";
-export {
-  propsMetaRadioGroup as RadioGroup,
-  propsMetaRadioGroupItem as RadioGroupItem,
-  propsMetaRadioGroupIndicator as RadioGroupIndicator,
-} from "./radio-group.ws";

package/src/radio-group.stories.ts

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

package/src/radio-group.tsx

@@ -1,17 +0,0 @@
-import {
-  type ForwardRefExoticComponent,
-  type ComponentPropsWithRef,
-} from "react";
-import { Root, Item, Indicator } from "@radix-ui/react-radio-group";
-
-export const RadioGroup: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Root>
-> = Root;
-
-export const RadioGroupItem: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Item>
-> = Item;
-
-export const RadioGroupIndicator: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Indicator>
-> = Indicator;

package/src/radio-group.ws.ts

@@ -1,178 +0,0 @@
-import {
-  ItemIcon,
-  RadioCheckedIcon,
-  RadioDotIcon,
-  TriggerIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  WsEmbedTemplate,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsRadioGroup,
-  propsRadioGroupIndicator,
-  propsRadioGroupItem,
-} from "./__generated__/radio-group.props";
-
-const createRadioGroupItem = ({
-  value,
-  label,
-}: {
-  value: string;
-  label: string;
-}): WsEmbedTemplate[number] => ({
-  type: "instance",
-  component: "Label",
-  // flex items-center space-x-2
-  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "RadioGroupItem",
-      props: [{ name: "value", type: "string", value }],
-      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
-      // focus:outline-none
-      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-      // disabled:cursor-not-allowed disabled:opacity-50
-      styles: [
-        tc.aspect("square"),
-        tc.h(4),
-        tc.w(4),
-        tc.rounded("full"),
-        tc.border(),
-        tc.border("primary"),
-        tc.text("primary"),
-        tc.focusVisible(
-          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-        ),
-        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "RadioGroupIndicator",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Indicator Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: RadioDotIcon,
-                },
-              ],
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: label }],
-    },
-  ],
-});
-
-export const metaRadioGroup: WsComponentMeta = {
-  category: "radix",
-  order: 100,
-  type: "container",
-  description:
-    "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
-  icon: RadioCheckedIcon,
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states",
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states",
-    },
-  ],
-  presetStyle: {
-    div,
-  },
-  template: [
-    {
-      type: "instance",
-      component: "RadioGroup",
-      dataSources: {
-        radioGroupValue: { type: "variable", initialValue: "" },
-      },
-      // grid gap-2
-      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
-      props: [
-        {
-          type: "dataSource",
-          name: "value",
-          dataSourceName: "radioGroupValue",
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `radioGroupValue = value`,
-            },
-          ],
-        },
-      ],
-      children: [
-        createRadioGroupItem({ value: "default", label: "Default" }),
-        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
-        createRadioGroupItem({ value: "compact", label: "Compact" }),
-      ],
-    },
-  ],
-};
-
-export const metaRadioGroupItem: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  requiredAncestors: ["RadioGroup"],
-  icon: ItemIcon,
-  states: defaultStates,
-  presetStyle: {
-    button: [button, buttonReset].flat(),
-  },
-};
-
-export const metaRadioGroupIndicator: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: defaultStates,
-  presetStyle: {
-    span,
-  },
-};
-
-export const propsMetaRadioGroup: WsComponentPropsMeta = {
-  props: propsRadioGroup,
-  initialProps: ["id", "value", "name", "required"],
-};
-
-export const propsMetaRadioGroupItem: WsComponentPropsMeta = {
-  props: propsRadioGroupItem,
-  initialProps: ["value"],
-};
-
-export const propsMetaRadioGroupIndicator: WsComponentPropsMeta = {
-  props: propsRadioGroupIndicator,
-};

package/src/select.tsx

@@ -1,112 +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 ForwardRefExoticComponent,
-  type ComponentPropsWithRef,
-  type ComponentPropsWithoutRef,
-  forwardRef,
-} from "react";
-import {
-  Root,
-  Value,
-  Trigger,
-  Content,
-  Item,
-  ItemIndicator,
-  ItemText,
-  Portal,
-  Viewport,
-} from "@radix-ui/react-select";
-import { type Hook, getClosestInstance } from "@webstudio-is/react-sdk";
-
-// wrap in forwardRef because Root is functional component without ref
-export const Select = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<typeof Root>
->(({ value, ...props }, _ref) => {
-  // radix consider empty string as empty value since this change but not released yet
-  // https://github.com/radix-ui/primitives/commit/a3dadb0a825524dd60629d426538dac74930791a
-  if (value === "") {
-    value = undefined;
-  }
-  return <Root value={value} {...props} />;
-});
-
-export const SelectTrigger: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Trigger>
-> = Trigger;
-
-export const SelectValue = forwardRef<
-  HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof Value>, "placeholder"> & {
-    placeholder?: string;
-  }
->((props, ref) => {
-  return <Value ref={ref} {...props} />;
-});
-
-export const SelectContent = forwardRef<
-  HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof Content>, "position" | "side">
->((props, ref) => {
-  return (
-    <Portal>
-      <Content ref={ref} {...props} position="popper" />
-    </Portal>
-  );
-});
-
-export const SelectViewport: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Viewport>
-> = Viewport;
-
-export const SelectItem: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Item>
-> = Item;
-
-export const SelectItemIndicator: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof ItemIndicator>
-> = ItemIndicator;
-
-export const SelectItemText: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof ItemText>
-> = ItemText;
-
-/* BUILDER HOOKS */
-
-const namespace = "@webstudio-is/sdk-components-react-radix";
-
-// For each SelectContent component within the selection,
-// we identify its closest parent Select component
-// and update its open prop bound to variable.
-export const hooksSelect: Hook = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SelectContent`) {
-        const select = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Select`
-        );
-        if (select) {
-          context.setPropVariable(select.id, "open", true);
-        }
-      }
-    }
-  },
-};