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

package/src/accordion.tsx

@@ -1,88 +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 ForwardRefExoticComponent,
-  type ComponentPropsWithRef,
-  forwardRef,
-} from "react";
-import {
-  Root,
-  Item,
-  Header,
-  Trigger,
-  Content,
-} from "@radix-ui/react-accordion";
-import {
-  getClosestInstance,
-  getIndexWithinAncestorFromComponentProps,
-  type Hook,
-} from "@webstudio-is/react-sdk";
-
-export const Accordion = forwardRef<
-  HTMLDivElement,
-  Omit<
-    ComponentPropsWithoutRef<typeof Root>,
-    "type" | "asChild" | "defaultValue" | "value" | "onValueChange"
-  > & {
-    value: string;
-    onValueChange: (value: string) => void;
-  }
->((props, ref) => {
-  return <Root ref={ref} type="single" {...props} />;
-});
-
-export const AccordionItem = forwardRef<
-  HTMLDivElement,
-  Omit<ComponentPropsWithoutRef<typeof Item>, "asChild">
->(({ value, ...props }, ref) => {
-  const index = getIndexWithinAncestorFromComponentProps(props);
-  return <Item ref={ref} value={value ?? index} {...props} />;
-});
-
-export const AccordionHeader: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Header>, "asChild">
-> = Header;
-
-export const AccordionTrigger: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Trigger>, "asChild">
-> = Trigger;
-
-export const AccordionContent: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Content>, "asChild">
-> = Content;
-
-/* BUILDER HOOKS */
-
-const namespace = "@webstudio-is/sdk-components-react-radix";
-
-// For each AccordionContent component within the selection,
-// we identify its closest parent Accordion component
-// and update its open prop bound to variable.
-export const hooksAccordion: Hook = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:AccordionContent`) {
-        const accordion = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Accordion`
-        );
-        const item = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:AccordionItem`
-        );
-        if (accordion && item) {
-          const itemValue =
-            context.getPropValue(item.id, "value") ??
-            context.indexesWithinAncestors.get(item.id)?.toString();
-          if (itemValue) {
-            context.setPropVariable(accordion.id, "value", itemValue);
-          }
-        }
-      }
-    }
-  },
-};

package/src/accordion.ws.ts

@@ -1,296 +0,0 @@
-import {
-  AccordionIcon,
-  ItemIcon,
-  HeaderIcon,
-  TriggerIcon,
-  ContentIcon,
-  ChevronDownIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type EmbedTemplateStyleDecl,
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  type WsEmbedTemplate,
-} from "@webstudio-is/react-sdk";
-import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsAccordion,
-  propsAccordionItem,
-  propsAccordionHeader,
-  propsAccordionTrigger,
-  propsAccordionContent,
-} from "./__generated__/accordion.props";
-
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
-/**
- * Styles source without animations:
- * https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/accordion.tsx
- *
- * Attributions
- * MIT License
- * Copyright (c) 2023 shadcn
- **/
-
-// border-b
-const accordionItemStyles: EmbedTemplateStyleDecl[] = [tc.borderB()].flat();
-
-const createAccordionTrigger = ({
-  children,
-}: {
-  children: WsEmbedTemplate;
-}): WsEmbedTemplate[number] => ({
-  type: "instance",
-  component: "AccordionHeader",
-  // flex
-  styles: [tc.flex()].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "AccordionTrigger",
-      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
-      styles: [
-        tc.flex(),
-        tc.flex(1),
-        tc.items("center"),
-        tc.justify("between"),
-        tc.py(4),
-        tc.font("medium"),
-        tc.hover([tc.underline()].flat()),
-        tc.property("--accordion-trigger-icon-transform", "0deg"),
-        tc.state(
-          [tc.property("--accordion-trigger-icon-transform", "180deg")],
-          "[data-state=open]"
-        ),
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Text",
-          children,
-        },
-        {
-          type: "instance",
-          component: "Box",
-          label: "Icon Container",
-          // h-4 w-4 shrink-0 transition-transform duration-200
-          styles: [
-            tc.property("rotate", "--accordion-trigger-icon-transform"),
-            tc.h(4),
-            tc.w(4),
-            tc.shrink(0),
-            tc.transition("all"),
-            tc.duration(200),
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Chevron Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: ChevronDownIcon,
-                },
-              ],
-              children: [],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-});
-
-// overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down
-// pb-4 pt-0
-const accordionContentStyles: EmbedTemplateStyleDecl[] = [
-  tc.overflow("hidden"),
-  tc.text("sm"),
-  // transition does not work with display: none
-  // tc.transition("all"),
-  tc.pb(4),
-].flat();
-
-export const metaAccordion: WsComponentMeta = {
-  category: "radix",
-  order: 3,
-  type: "container",
-  icon: AccordionIcon,
-  presetStyle,
-  description:
-    "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
-  template: [
-    {
-      type: "instance",
-      component: "Accordion",
-      dataSources: {
-        accordionValue: { type: "variable", initialValue: "0" },
-      },
-      props: [
-        { type: "boolean", name: "collapsible", value: true },
-        { type: "dataSource", name: "value", dataSourceName: "accordionValue" },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `accordionValue = value`,
-            },
-          ],
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: accordionItemStyles,
-          children: [
-            createAccordionTrigger({
-              children: [{ type: "text", value: "Is it accessible?" }],
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: accordionContentStyles,
-              children: [
-                {
-                  type: "text",
-                  value: "Yes. It adheres to the WAI-ARIA design pattern.",
-                },
-              ],
-            },
-          ],
-        },
-
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: accordionItemStyles,
-          children: [
-            createAccordionTrigger({
-              children: [{ type: "text", value: "Is it styled?" }],
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: accordionContentStyles,
-              children: [
-                {
-                  type: "text",
-                  value:
-                    "Yes. It comes with default styles that matches the other components' aesthetic.",
-                },
-              ],
-            },
-          ],
-        },
-
-        {
-          type: "instance",
-          component: "AccordionItem",
-          styles: accordionItemStyles,
-          children: [
-            createAccordionTrigger({
-              children: [{ type: "text", value: "Is it animated?" }],
-            }),
-            {
-              type: "instance",
-              component: "AccordionContent",
-              styles: accordionContentStyles,
-              children: [
-                {
-                  type: "text",
-                  value:
-                    "Yes. It's animated by default, but you can disable it if you prefer.",
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    },
-  ],
-};
-
-export const metaAccordionItem: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Item",
-  icon: ItemIcon,
-  requiredAncestors: ["Accordion"],
-  indexWithinAncestor: "Accordion",
-  presetStyle,
-};
-
-export const metaAccordionHeader: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Item Header",
-  icon: HeaderIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle: {
-    h3: [h3, tc.my(0)].flat(),
-  },
-};
-
-export const metaAccordionTrigger: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Item Trigger",
-  icon: TriggerIcon,
-  requiredAncestors: ["AccordionHeader"],
-  detachable: false,
-  states: [
-    ...defaultStates,
-    {
-      category: "component-states",
-      label: "Open",
-      selector: "[data-state=open]",
-    },
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat(),
-  },
-};
-
-export const metaAccordionContent: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  label: "Item Content",
-  icon: ContentIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle,
-};
-
-export const propsMetaAccordion: WsComponentPropsMeta = {
-  props: propsAccordion,
-  initialProps: ["value", "collapsible"],
-};
-
-export const propsMetaAccordionItem: WsComponentPropsMeta = {
-  props: propsAccordionItem,
-};
-
-export const propsMetaAccordionHeader: WsComponentPropsMeta = {
-  props: propsAccordionHeader,
-};
-
-export const propsMetaAccordionTrigger: WsComponentPropsMeta = {
-  props: propsAccordionTrigger,
-};
-
-export const propsMetaAccordionContent: WsComponentPropsMeta = {
-  props: propsAccordionContent,
-};

package/src/checkbox.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 { Checkbox as CheckboxPrimitive } from "./checkbox";
-
-export default {
-  title: "Components/Checkbox",
-  component: CheckboxPrimitive,
-} satisfies Meta<typeof CheckboxPrimitive>;
-
-export const Checkbox: StoryObj<typeof CheckboxPrimitive> = {
-  render: (props) =>
-    renderComponentTemplate({
-      name: "Checkbox",
-      props: { ...props },
-      components: { ...baseComponents, ...radixComponents },
-      metas: { ...baseMetas, ...radixMetas },
-    }),
-};

package/src/checkbox.tsx

@@ -1,22 +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,
-  forwardRef,
-} from "react";
-import { Root, Indicator } from "@radix-ui/react-checkbox";
-
-export const Checkbox = forwardRef<
-  HTMLButtonElement,
-  // radix checked has complex named type which cannot be parsed
-  // cast to boolean
-  Omit<ComponentPropsWithRef<typeof Root>, "checked"> & { checked: boolean }
->((props, ref) => {
-  return <Root ref={ref} {...props} />;
-});
-
-export const CheckboxIndicator: ForwardRefExoticComponent<
-  ComponentPropsWithRef<typeof Indicator>
-> = Indicator;

package/src/checkbox.ws.ts

@@ -1,154 +0,0 @@
-import {
-  CheckMarkIcon,
-  CheckboxCheckedIcon,
-  TriggerIcon,
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/react-sdk";
-import { button, span } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { buttonReset } from "./theme/styles";
-import {
-  propsCheckbox,
-  propsCheckboxIndicator,
-} from "./__generated__/checkbox.props";
-
-export const metaCheckbox: WsComponentMeta = {
-  category: "radix",
-  order: 101,
-  type: "container",
-  icon: CheckboxCheckedIcon,
-  description:
-    "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
-  states: [
-    ...defaultStates,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states",
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states",
-    },
-  ],
-  presetStyle: {
-    button: [button, buttonReset].flat(),
-  },
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      label: "Checkbox Field",
-      styles: [tc.flex(), tc.gap(2), tc.items("center")].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "Checkbox",
-          dataSources: {
-            checkboxChecked: { type: "variable", initialValue: false },
-          },
-          props: [
-            {
-              name: "checked",
-              type: "dataSource",
-              dataSourceName: "checkboxChecked",
-            },
-            {
-              name: "onCheckedChange",
-              type: "action",
-              value: [
-                {
-                  type: "execute",
-                  args: ["checked"],
-                  code: `checkboxChecked = checked`,
-                },
-              ],
-            },
-          ],
-          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
-          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-          // disabled:cursor-not-allowed disabled:opacity-50
-          // data-[state=checked]:bg-primary
-          // data-[state=checked]:text-primary-foreground",
-          styles: [
-            // We are not supporting peer like styles yet
-            tc.h(4),
-            tc.w(4),
-            tc.shrink(0),
-            tc.rounded("sm"),
-            tc.border(),
-            tc.border("primary"),
-            tc.focusVisible(
-              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-            ),
-            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
-            tc.state(
-              [tc.bg("primary"), tc.text("primaryForeground")].flat(),
-              "[data-state=checked]"
-            ),
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "CheckboxIndicator",
-              // flex items-center justify-center text-current
-              styles: [
-                tc.flex(),
-                tc.items("center"),
-                tc.justify("center"),
-                tc.text("current"),
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Indicator Icon",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: CheckMarkIcon,
-                    },
-                  ],
-                  children: [],
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: "instance",
-          component: "Text",
-          label: "Checkbox Label",
-          props: [{ name: "tag", type: "string", value: "span" }],
-          children: [{ type: "text", value: "Checkbox" }],
-        },
-      ],
-    },
-  ],
-};
-
-export const metaCheckboxIndicator: WsComponentMeta = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: defaultStates,
-  presetStyle: {
-    span,
-  },
-};
-
-export const propsMetaCheckbox: WsComponentPropsMeta = {
-  props: propsCheckbox,
-  initialProps: ["id", "checked", "name", "required"],
-};
-
-export const propsMetaCheckboxIndicator: WsComponentPropsMeta = {
-  props: propsCheckboxIndicator,
-};

package/src/collapsible.tsx

@@ -1,62 +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 ReactNode,
-  type ForwardRefExoticComponent,
-  type ComponentPropsWithRef,
-  forwardRef,
-  Children,
-} from "react";
-import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
-import { type Hook, getClosestInstance } from "@webstudio-is/react-sdk";
-
-export const Collapsible: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Root>, "defaultOpen" | "asChild">
-> = Root;
-
-/**
- * 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 CollapsibleTrigger = forwardRef<
-  HTMLButtonElement,
-  { children: ReactNode }
->(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return (
-    <Trigger asChild={true} ref={ref} {...props}>
-      {firstChild ?? <button>Add button</button>}
-    </Trigger>
-  );
-});
-
-export const CollapsibleContent: ForwardRefExoticComponent<
-  Omit<ComponentPropsWithRef<typeof Content>, "asChild">
-> = Content;
-
-/* BUILDER HOOKS */
-
-const namespace = "@webstudio-is/sdk-components-react-radix";
-
-// For each CollapsibleContent component within the selection,
-// we identify its closest parent Collapsible component
-// and update its open prop bound to variable.
-export const hooksCollapsible: Hook = {
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:CollapsibleContent`) {
-        const collapsible = getClosestInstance(
-          event.instancePath,
-          instance,
-          `${namespace}:Collapsible`
-        );
-        if (collapsible) {
-          context.setPropVariable(collapsible.id, "open", true);
-        }
-      }
-    }
-  },
-};