@webstudio-is/sdk-components-react-radix 0.82.0

package/src/collapsible.tsx

@@ -0,0 +1,53 @@
+/* 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 WebstudioAttributes,
+  splitPropsWithWebstudioAttributes,
+} from "@webstudio-is/react-sdk";
+
+export const Collapsible: ForwardRefExoticComponent<
+  Omit<ComponentPropsWithRef<typeof Root>, "defaultOpen" | "asChild">
+> = Root;
+
+/**
+ * CollapsibleTrigger is HTML-less components.
+ * To make them work in our system, we wrap their attributes with a div that has a display: contents property.
+ *
+ * These divs function like fragments, with all web studio-related attributes attached to them.
+ */
+const displayContentsStyle = { display: "contents" };
+
+/**
+ * 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<
+  HTMLDivElement,
+  WebstudioAttributes & { children: ReactNode }
+>(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] =
+    splitPropsWithWebstudioAttributes(props);
+  return (
+    <div ref={ref} style={displayContentsStyle} {...webstudioAttributes}>
+      <Trigger asChild={true} {...restProps}>
+        {firstChild ?? <button>Add button</button>}
+      </Trigger>
+    </div>
+  );
+});
+
+export const CollapsibleContent: ForwardRefExoticComponent<
+  Omit<ComponentPropsWithRef<typeof Content>, "asChild">
+> = Content;

package/src/collapsible.ws.ts

@@ -0,0 +1,106 @@
+import { RadioUncheckedIcon, RadioCheckedIcon } from "@webstudio-is/icons/svg";
+import type {
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} from "@webstudio-is/react-sdk";
+import {
+  propsCollapsible,
+  propsCollapsibleContent,
+  propsCollapsibleTrigger,
+} from "./__generated__/collapsible.props";
+
+export const metaCollapsible: WsComponentMeta = {
+  category: "radix",
+  type: "container",
+  label: "Collapsible",
+  icon: RadioUncheckedIcon,
+  template: [
+    {
+      type: "instance",
+      component: "Collapsible",
+      props: [
+        {
+          name: "open",
+          type: "boolean",
+          value: false,
+          dataSourceRef: {
+            type: "variable",
+            name: "collapsibleOpen",
+          },
+        },
+        {
+          name: "onOpenChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["open"],
+              code: `collapsibleOpen = open`,
+            },
+          ],
+        },
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "CollapsibleTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              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",
+  label: "Collapsible Trigger",
+  icon: RadioCheckedIcon,
+  stylable: false,
+  detachable: false,
+};
+
+export const metaCollapsibleContent: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  label: "Collapsible Content",
+  icon: RadioCheckedIcon,
+  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

@@ -0,0 +1,5 @@
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./collapsible";

package/src/metas.ts

@@ -0,0 +1,5 @@
+export {
+  metaCollapsible as Collapsible,
+  metaCollapsibleTrigger as CollapsibleTrigger,
+  metaCollapsibleContent as CollapsibleContent,
+} from "./collapsible.ws";

package/src/props.ts

@@ -0,0 +1,5 @@
+export {
+  propsMetaCollapsible as Collapsible,
+  propsMetaCollapsibleTrigger as CollapsibleTrigger,
+  propsMetaCollapsibleContent as CollapsibleContent,
+} from "./collapsible.ws";