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

package/src/dialog.ws.tsx

@@ -22,6 +22,7 @@ import {
   propsDialogTitle,
   propsDialogDescription,
 } from "./__generated__/dialog.props";
+import { template as buttonTemplate } from "./button.ws";
 
 import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 
@@ -44,9 +45,7 @@ const descriptionPresetStyle = {
 // @todo add [data-state] to button and link
 export const metaDialogTrigger: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false,
@@ -54,9 +53,7 @@ export const metaDialogTrigger: WsComponentMeta = {
 
 export const metaDialogContent: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Content",
   presetStyle,
   icon: ContentIcon,
   detachable: false,
@@ -64,9 +61,7 @@ export const metaDialogContent: WsComponentMeta = {
 
 export const metaDialogOverlay: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog Overlay",
   presetStyle,
   icon: OverlayIcon,
   detachable: false,
@@ -74,28 +69,22 @@ export const metaDialogOverlay: WsComponentMeta = {
 
 export const metaDialogTitle: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: titlePresetStyle,
-  label: "Dialog Title",
   icon: HeadingIcon,
 };
 
 export const metaDialogDescription: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: descriptionPresetStyle,
-  label: "Dialog Description",
   icon: TextIcon,
 };
 
 export const metaDialogClose: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle: buttonPresetStyle,
-  label: "Dialog Close",
   icon: ButtonElementIcon,
 };
 
@@ -109,9 +98,7 @@ export const metaDialogClose: WsComponentMeta = {
  **/
 export const metaDialog: WsComponentMeta = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Dialog",
   icon: DialogIcon,
   order: 15,
   stylable: false,
@@ -120,14 +107,20 @@ export const metaDialog: WsComponentMeta = {
       type: "instance",
       component: "Dialog",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" },
+        dialogOpen: { type: "variable", initialValue: false },
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen",
+          name: "open",
+          dataSourceName: "dialogOpen",
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `dialogOpen = open` },
+          ],
         },
       ],
       children: [
@@ -135,13 +128,9 @@ export const metaDialog: WsComponentMeta = {
           type: "instance",
           component: "DialogTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }],
+          }),
         },
         {
           type: "instance",
@@ -282,7 +271,7 @@ export const metaDialog: WsComponentMeta = {
 
 export const propsMetaDialog: WsComponentPropsMeta = {
   props: propsDialog,
-  initialProps: ["isOpen", "modal"],
+  initialProps: ["open", "modal"],
 };
 
 export const propsMetaDialogTrigger: WsComponentPropsMeta = {

package/src/hooks.ts

@@ -1,4 +1,18 @@
 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";
 
-export const hooks: Hook[] = [hooksCollapsible];
+export const hooks: Hook[] = [
+  hooksCollapsible,
+  hooksTabs,
+  hooksDialog,
+  hooksPopover,
+  hooksSheet,
+  hooksTooltip,
+  hooksAccordion,
+];

package/src/input.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { renderComponentTemplate } from "@webstudio-is/react-sdk";
+import { Input as InputPrimitive } from "./input";
+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/Input",
+  component: InputPrimitive,
+  argTypes: {
+    placeholder: {
+      type: "string",
+    },
+    type: {
+      options: ["text", "file"],
+      control: { type: "select" },
+    },
+  },
+} satisfies Meta<typeof InputPrimitive>;
+
+export const Input: StoryObj<typeof InputPrimitive> = {
+  render: (props) =>
+    renderComponentTemplate({
+      name: "Input",
+      props: { ...props },
+      components: { ...baseComponents, ...radixComponents },
+      metas: { ...baseMetas, ...radixMetas },
+    }),
+};

package/src/input.tsx

@@ -0,0 +1,12 @@
+/* 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";
+
+export const Input = forwardRef<
+  HTMLInputElement,
+  ComponentPropsWithoutRef<"input">
+  // Make sure children are not passed down to an input, because this will result in error.
+>(({ children: _children, ...props }, ref) => {
+  return <input ref={ref} {...props} />;
+});

package/src/input.ws.ts

@@ -0,0 +1,78 @@
+import { FormTextFieldIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import { input } from "@webstudio-is/react-sdk/css-normalize";
+import { props } from "./__generated__/input.props";
+import * as tc from "./theme/tailwind-classes";
+
+const presetStyle = {
+  input,
+} satisfies PresetStyle<"input">;
+
+export const meta: WsComponentMeta = {
+  category: "radix",
+  type: "control",
+  invalidAncestors: ["Button"],
+  icon: FormTextFieldIcon,
+  presetStyle,
+  states: [
+    ...defaultStates,
+    { selector: ":disabled", label: "Disabled" },
+    { selector: "::placeholder", label: "Placeholder" },
+    { selector: "::file-selector-button", label: "File Selector Button" },
+    // @todo share https://github.com/webstudio-is/webstudio-builder/issues/2102
+    { selector: ":valid", label: "Valid" },
+    { selector: ":invalid", label: "Invalid" },
+    { selector: ":required", label: "Required" },
+    { selector: ":optional", label: "Optional" },
+    { selector: ":enabled", label: "Enabled" },
+    { selector: ":read-only", label: "Read Only" },
+    { selector: ":read-write", label: "Read Write" },
+  ],
+  order: 1,
+  template: [
+    {
+      type: "instance",
+      component: "Input",
+      styles: [
+        // flex h-10 w-full rounded-md border border-input bg-background
+        // px-3 py-2 text-sm
+        // ring-offset-background
+        // file:border-0 file:bg-transparent file:text-sm file:font-medium
+        // placeholder:text-muted-foreground
+        // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+        // disabled:cursor-not-allowed disabled:opacity-50"
+        tc.flex(),
+        tc.h(10),
+        tc.w("full"),
+        tc.rounded("md"),
+        tc.border(),
+        tc.border("input"),
+        tc.bg("background"),
+        tc.px(3),
+        tc.py(2),
+        tc.text("sm"),
+        tc.state(
+          [tc.border(0), tc.bg("transparent"), tc.font("medium")].flat(),
+          "::file-selector-button"
+        ),
+        tc.state(tc.text("mutedForeground"), "::placeholder"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
+      ].flat(),
+
+      children: [],
+    },
+  ],
+};
+
+export const propsMeta: WsComponentPropsMeta = {
+  props,
+  initialProps: ["id", "name", "type", "placeholder", "required", "autoFocus"],
+};

package/src/label.stories.ts

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

@@ -0,0 +1,15 @@
+/* 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

@@ -0,0 +1,48 @@
+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",
+  type: "container",
+  icon: LabelIcon,
+  presetStyle,
+  states: defaultStates,
+  order: 1,
+  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"],
+};

package/src/metas.ts

@@ -37,3 +37,14 @@ export {
   metaTabsTrigger as TabsTrigger,
   metaTabsContent as TabsContent,
 } from "./tabs.ws";
+export { meta as Button } from "./button.ws";
+export { meta as Input } from "./input.ws";
+export { meta as Textarea } from "./textarea.ws";
+export { meta as Label } from "./label.ws";
+export {
+  metaAccordion as Accordion,
+  metaAccordionItem as AccordionItem,
+  metaAccordionHeader as AccordionHeader,
+  metaAccordionTrigger as AccordionTrigger,
+  metaAccordionContent as AccordionContent,
+} from "./accordion.ws";

package/src/popover.stories.tsx

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

package/src/popover.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 PopoverPrimitive from "@radix-ui/react-popover";
-
 import {
-  forwardRef,
-  type ElementRef,
   type ComponentPropsWithoutRef,
-  Children,
   type ReactNode,
+  forwardRef,
+  Children,
 } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+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 Popover in the builder
- **/
-type BuilderPopoverProps = {
-  isOpen: "initial" | "open" | "closed";
-};
-
+// wrap in forwardRef because Root is functional component without ref
 export const Popover = forwardRef<
-  ElementRef<"div">,
-  ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> & BuilderPopoverProps
->(({ open: openProp, isOpen, ...props }, ref) => {
-  const open =
-    openProp ??
-    (isOpen === "open" ? true : isOpen === "closed" ? false : undefined);
-
-  return <PopoverPrimitive.Root open={open} {...props} />;
+  HTMLDivElement,
+  Omit<ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>, "defaultOpen">
+>((props, _ref) => {
+  return <PopoverPrimitive.Root {...props} />;
 });
 
 /**
@@ -37,7 +25,7 @@ export const Popover = forwardRef<
  * which would prevent us from displaying styles properly in the builder.
  */
 export const PopoverTrigger = forwardRef<
-  ElementRef<"button">,
+  HTMLButtonElement,
   { children: ReactNode }
 >(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
@@ -50,7 +38,7 @@ export const PopoverTrigger = forwardRef<
 });
 
 export const PopoverContent = forwardRef<
-  ElementRef<typeof PopoverPrimitive.Content>,
+  HTMLDivElement,
   ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(
   (
@@ -68,3 +56,41 @@ export const PopoverContent = forwardRef<
     </PopoverPrimitive.Portal>
   )
 );
+
+/* BUILDER HOOKS */
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each PopoverContent component within the selection,
+// we identify its closest parent Popover component
+// and update its open prop bound to variable.
+export const hooksPopover: Hook = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:PopoverContent`) {
+        const popover = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Popover`
+        );
+        if (popover) {
+          context.setPropVariable(popover.id, "open", true);
+        }
+      }
+    }
+  },
+};

package/src/popover.ws.tsx

@@ -11,6 +11,7 @@ import {
   propsPopoverTrigger,
 } from "./__generated__/popover.props";
 import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { template as buttonTemplate } from "./button.ws";
 
 const presetStyle = {
   div,
@@ -19,9 +20,7 @@ const presetStyle = {
 // @todo add [data-state] to button and link
 export const metaPopoverTrigger: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover Trigger",
   icon: TriggerIcon,
   stylable: false,
   detachable: false,
@@ -29,10 +28,8 @@ export const metaPopoverTrigger: WsComponentMeta = {
 
 export const metaPopoverContent: WsComponentMeta = {
   category: "hidden",
-  invalidAncestors: [],
   type: "container",
   presetStyle,
-  label: "Popover Content",
   icon: ContentIcon,
   detachable: false,
 };
@@ -47,9 +44,7 @@ export const metaPopoverContent: WsComponentMeta = {
  **/
 export const metaPopover: WsComponentMeta = {
   category: "radix",
-  invalidAncestors: [],
   type: "container",
-  label: "Popover",
   icon: PopoverIcon,
   order: 15,
   stylable: false,
@@ -58,14 +53,20 @@ export const metaPopover: WsComponentMeta = {
       type: "instance",
       component: "Popover",
       dataSources: {
-        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
-        isOpen: { type: "variable", initialValue: "initial" },
+        popoverOpen: { type: "variable", initialValue: false },
       },
       props: [
         {
           type: "dataSource",
-          name: "isOpen",
-          dataSourceName: "isOpen",
+          name: "open",
+          dataSourceName: "popoverOpen",
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            { type: "execute", args: ["open"], code: `popoverOpen = open` },
+          ],
         },
       ],
       children: [
@@ -73,13 +74,9 @@ export const metaPopover: WsComponentMeta = {
           type: "instance",
           component: "PopoverTrigger",
           props: [],
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Button" }],
-            },
-          ],
+          children: buttonTemplate({
+            children: [{ type: "text", value: "Button" }],
+          }),
         },
         {
           type: "instance",
@@ -114,7 +111,7 @@ export const metaPopover: WsComponentMeta = {
 
 export const propsMetaPopover: WsComponentPropsMeta = {
   props: propsPopover,
-  initialProps: ["isOpen", "modal"],
+  initialProps: ["open", "modal"],
 };
 
 export const propsMetaPopoverTrigger: WsComponentPropsMeta = {

package/src/props.ts

@@ -37,3 +37,14 @@ export {
   propsMetaTabsTrigger as TabsTrigger,
   propsMetaTabsContent as TabsContent,
 } from "./tabs.ws";
+export { propsMeta as Button } from "./button.ws";
+export { propsMeta as Input } from "./input.ws";
+export { propsMeta as Textarea } from "./textarea.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";

package/src/sheet.tsx

@@ -3,6 +3,7 @@ import {
   type ElementRef,
   type ComponentPropsWithoutRef,
 } from "react";
+import { getClosestInstance, type Hook } from "@webstudio-is/react-sdk";
 import * as Dialog from "./dialog";
 
 export const Sheet = Dialog.Dialog;
@@ -38,3 +39,41 @@ export const SheetContent = forwardRef<
     );
   }
 );
+
+/* BUILDER HOOKS */
+
+const namespace = "@webstudio-is/sdk-components-react-radix";
+
+// For each SheetOverlay component within the selection,
+// we identify its closest parent Sheet component
+// and update its open prop bound to variable.
+export const hooksSheet: Hook = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SheetOverlay`) {
+        const sheet = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Sheet`
+        );
+        if (sheet) {
+          context.setPropVariable(sheet.id, "open", true);
+        }
+      }
+    }
+  },
+};