@webstudio-is/sdk-components-react-radix 0.85.0 → 0.87.0

package/src/accordion.ws.ts

@@ -0,0 +1,270 @@
+import {
+  AccordionIcon,
+  ItemIcon,
+  HeaderIcon,
+  TriggerIcon,
+  ContentIcon,
+} from "@webstudio-is/icons/svg";
+import type {
+  EmbedTemplateStyleDecl,
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { div, h3, button } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+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();
+
+// flex
+const accordionHeaderStyles: EmbedTemplateStyleDecl[] = [tc.flex()].flat();
+
+// flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
+const accordionTriggerStyles: EmbedTemplateStyleDecl[] = [
+  tc.flex(),
+  tc.flex(1),
+  tc.items("center"),
+  tc.justify("between"),
+  tc.py(4),
+  tc.font("medium"),
+  tc.transition("all"),
+  tc.hover([tc.underline()].flat()),
+].flat();
+
+// 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",
+  type: "container",
+  icon: AccordionIcon,
+  presetStyle,
+  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: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  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: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  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: [
+            {
+              type: "instance",
+              component: "AccordionHeader",
+              styles: accordionHeaderStyles,
+              children: [
+                {
+                  type: "instance",
+                  component: "AccordionTrigger",
+                  styles: accordionTriggerStyles,
+                  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",
+  icon: ItemIcon,
+  requiredAncestors: ["Accordion"],
+  indexWithinAncestor: "Accordion",
+  presetStyle,
+};
+
+export const metaAccordionHeader: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: HeaderIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle: {
+    h3: [h3, tc.my(0)].flat(),
+  },
+};
+
+export const metaAccordionTrigger: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  requiredAncestors: ["AccordionHeader"],
+  detachable: false,
+  presetStyle: {
+    button: [
+      button,
+      {
+        property: "backgroundColor",
+        value: { type: "keyword", value: "transparent" },
+      } as const,
+      {
+        property: "backgroundImage",
+        value: { type: "keyword", value: "none" },
+      } as const,
+      {
+        property: "cursor",
+        value: { type: "keyword", value: "pointer" },
+      } as const,
+      tc.px(0),
+      tc.border(0),
+    ].flat(),
+  },
+};
+
+export const metaAccordionContent: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon,
+  requiredAncestors: ["AccordionItem"],
+  detachable: false,
+  presetStyle,
+};
+
+export const propsMetaAccordion: WsComponentPropsMeta = {
+  props: propsAccordion,
+  initialProps: ["value", "collapsible", "dir", "orientation"],
+};
+
+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/button.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Button as ButtonPrimitive } from "./button";
+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/Button",
+  component: ButtonPrimitive,
+  argTypes: {
+    variant: {
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+      ],
+      control: { type: "select" },
+    },
+  },
+} satisfies Meta<typeof ButtonPrimitive>;
+
+export const Button: StoryObj<typeof ButtonPrimitive> = {
+  render: (props) =>
+    renderComponentTemplate({
+      name: "Button",
+      props: { ...props },
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/button.tsx

@@ -0,0 +1,25 @@
+/* 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 } from "react";
+
+type ButtonVariants = {
+  variant:
+    | "default"
+    | "destructive"
+    | "outline"
+    | "secondary"
+    | "ghost"
+    | "link";
+
+  size: "default" | "sm" | "lg" | "icon";
+};
+
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ComponentPropsWithoutRef<"button"> & ButtonVariants
+>(({ variant = "default", size = "default", ...props }, ref) => {
+  return (
+    <button ref={ref} data-size={size} data-variant={variant} {...props} />
+  );
+});

package/src/button.ws.ts

@@ -0,0 +1,155 @@
+import { ButtonElementIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  EmbedTemplateInstance,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { button } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/button.props";
+import * as tc from "./theme/tailwind-classes";
+
+const presetStyle = {
+  button,
+} satisfies PresetStyle<"button">;
+
+export const template = (props?: {
+  props?: EmbedTemplateInstance["props"];
+  children?: WsComponentMeta["template"];
+}): NonNullable<WsComponentMeta["template"]> => [
+  {
+    type: "instance",
+    component: "Button",
+    styles: [
+      // 'inline-flex items-center justify-center rounded-md text-sm font-medium
+      // ring-offset-background transition-colors
+      // focus-visible:outline-none focus-visible:ring-2
+      // focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:pointer-events-none disabled:opacity-50'
+      tc.border(0),
+      tc.bg("transparent"),
+      tc.inlineFlex(),
+      tc.items("center"),
+      tc.justify("center"),
+      tc.rounded("md"),
+      tc.text("sm"),
+      tc.font("medium"),
+      tc.focusVisible(
+        [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+      ),
+      tc.state([tc.pointerEvents("none"), tc.opacity(50)].flat(), ":disabled"),
+
+      // VARIANT
+      // default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+      tc.state(
+        [tc.bg("primary"), tc.text("primaryForeground")].flat(),
+        "[data-variant=default]"
+      ),
+      tc.state(
+        [[tc.bg("primary", 90)].flat()].flat(),
+        "[data-variant=default]:hover"
+      ),
+
+      // destructive:'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+      tc.state(
+        [tc.bg("destructive"), tc.text("destructiveForeground")].flat(),
+        "[data-variant=destructive]"
+      ),
+      tc.state(
+        [[tc.bg("destructive", 90)].flat()].flat(),
+        "[data-variant=destructive]:hover"
+      ),
+
+      // outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [tc.border(), tc.border("input"), tc.bg("background")].flat(),
+        "[data-variant=outline]"
+      ),
+      tc.state(
+        [[tc.bg("accent", 90), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=outline]:hover"
+      ),
+
+      // secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      tc.state(
+        [tc.bg("secondary"), tc.text("secondaryForeground")].flat(),
+        "[data-variant=secondary]"
+      ),
+      tc.state(
+        [[tc.bg("secondary", 80)].flat()].flat(),
+        "[data-variant=secondary]:hover"
+      ),
+
+      // ghost: 'hover:bg-accent hover:text-accent-foreground',
+      tc.state(
+        [[tc.bg("accent"), tc.text("accentForeground")].flat()].flat(),
+        "[data-variant=ghost]:hover"
+      ),
+
+      // link: 'text-primary underline-offset-4 hover:underline',
+      tc.state(
+        [tc.text("primary"), tc.underlineOffset(4)].flat(),
+        "[data-variant=link]"
+      ),
+      tc.state([[tc.underline()].flat()].flat(), "[data-variant=link]:hover"),
+
+      // SIZE
+      // default: 'h-10 px-4 py-2',
+      tc.state([tc.h(10), tc.px(4), tc.py(2)].flat(), "[data-size=default]"),
+
+      // sm: 'h-9 rounded-md px-3',
+      tc.state([tc.h(10), tc.px(3)].flat(), "[data-size=sm]"),
+
+      // lg: 'h-11 rounded-md px-8',
+      tc.state([tc.h(11), tc.px(8)].flat(), "[data-size=lg]"),
+
+      // icon: 'h-10 w-10',
+      tc.state([tc.h(10), tc.w(10)].flat(), "[data-size=icon]"),
+    ].flat(),
+
+    children: props?.children ?? [{ type: "text", value: "Button" }],
+    props: props?.props,
+  },
+];
+
+export const meta: WsComponentMeta = {
+  category: "radix",
+  type: "container",
+  invalidAncestors: ["Button"],
+  icon: ButtonElementIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: ":enabled", label: "Enabled" },
+
+    { selector: "[data-variant=default]", label: "Default" },
+    { selector: "[data-variant=default]:hover", label: "Default Hover" },
+
+    { selector: "[data-variant=destructive]", label: "Destructive" },
+    {
+      selector: "[data-variant=destructive]:hover",
+      label: "Destructive Hover",
+    },
+
+    { selector: "[data-variant=outline]", label: "Outline" },
+    { selector: "[data-variant=outline]:hover", label: "Outline Hover" },
+
+    { selector: "[data-variant=secondary]", label: "Secondary" },
+    { selector: "[data-variant=secondary]:hover", label: "Secondary Hover" },
+
+    { selector: "[data-variant=ghost]", label: "Ghost" },
+    { selector: "[data-variant=ghost]:hover", label: "Ghost Hover" },
+
+    { selector: "[data-variant=link]", label: "Link" },
+    { selector: "[data-variant=link]:hover", label: "Link Hover" },
+  ],
+  order: 1,
+  template: template(),
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["id", "type", "variant", "size", "aria-label"],
+};

package/src/collapsible.tsx

@@ -45,25 +45,11 @@ const namespace = "@webstudio-is/sdk-components-react-radix";
 // we identify its closest parent Collapsible component
 // and update its open prop bound to variable.
 export const hooksCollapsible: Hook = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instanceSelection) {
-      if (instance.component === `${namespace}:CollapsibleContent`) {
-        const collapsible = getClosestInstance(
-          event.instanceSelection,
-          instance,
-          `${namespace}:Collapsible`
-        );
-        if (collapsible) {
-          context.setPropVariable(collapsible.id, "open", false);
-        }
-      }
-    }
-  },
   onNavigatorSelect: (context, event) => {
-    for (const instance of event.instanceSelection) {
+    for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:CollapsibleContent`) {
         const collapsible = getClosestInstance(
-          event.instanceSelection,
+          event.instancePath,
           instance,
           `${namespace}:Collapsible`
         );

package/src/collapsible.ws.ts

@@ -23,7 +23,6 @@ export const metaCollapsible: WsComponentMeta = {
   category: "radix",
   type: "container",
   presetStyle,
-  label: "Collapsible",
   icon: CollapsibleIcon,
   template: [
     {
@@ -42,11 +41,7 @@ export const metaCollapsible: WsComponentMeta = {
           name: "onOpenChange",
           type: "action",
           value: [
-            {
-              type: "execute",
-              args: ["open"],
-              code: `collapsibleOpen = open`,
-            },
+            { type: "execute", args: ["open"], code: `collapsibleOpen = open` },
           ],
         },
       ],
@@ -81,7 +76,6 @@ export const metaCollapsible: WsComponentMeta = {
 export const metaCollapsibleTrigger: WsComponentMeta = {
   category: "hidden",
   type: "container",
-  label: "Collapsible Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false,
@@ -91,7 +85,6 @@ export const metaCollapsibleContent: WsComponentMeta = {
   category: "hidden",
   type: "container",
   presetStyle,
-  label: "Collapsible Content",
   icon: ContentIcon,
   detachable: false,
 };

package/src/components.ts

@@ -24,3 +24,14 @@ export {
   SheetDescription,
 } from "./sheet";
 export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Button } from "./button";
+export { Input } from "./input";
+export { Textarea } from "./textarea";
+export { Label } from "./label";
+export {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+} from "./accordion";

package/src/dialog.stories.tsx

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

package/src/dialog.tsx

@@ -1,33 +1,21 @@
 /* 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 DialogPrimitive from "@radix-ui/react-dialog";
-
 import {
-  forwardRef,
-  type ElementRef,
   type ComponentPropsWithoutRef,
-  Children,
   type ReactNode,
+  forwardRef,
+  Children,
 } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk";
 
-/**
- * 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 Dialog in the builder
- **/
-type BuilderDialogProps = {
-  isOpen: "initial" | "open" | "closed";
-};
-
+// wrap in forwardRef because Root is functional component without ref
 export const Dialog = forwardRef<
-  ElementRef<"div">,
-  ComponentPropsWithoutRef<typeof DialogPrimitive.Root> & BuilderDialogProps
->(({ open: openProp, isOpen, ...props }, ref) => {
-  const open =
-    openProp ??
-    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
-
-  return <DialogPrimitive.Root open={open} {...props} />;
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof DialogPrimitive.Root>, "defaultOpen">
+>((props, _ref) => {
+  return <DialogPrimitive.Root {...props} />;
 });
 
 /**
@@ -37,20 +25,20 @@ export const Dialog = forwardRef<
  * which would prevent us from displaying styles properly in the builder.
  */
 export const DialogTrigger = forwardRef<
-  ElementRef<"div">,
+  HTMLButtonElement,
   { children: ReactNode }
 >(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
 
   return (
-    <DialogPrimitive.Trigger asChild={true} {...props}>
+    <DialogPrimitive.Trigger ref={ref} asChild={true} {...props}>
       {firstChild ?? <button>Add button or link</button>}
     </DialogPrimitive.Trigger>
   );
 });
 
 export const DialogOverlay = forwardRef<
-  ElementRef<"div">,
+  HTMLDivElement,
   ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >((props, ref) => {
   return (
@@ -64,3 +52,41 @@ 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);
+        }
+      }
+    }
+  },
+};