@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/accordion.ws.js

@@ -1,259 +0,0 @@
-"use strict";
-import {
-  AccordionIcon,
-  ItemIcon,
-  HeaderIcon,
-  TriggerIcon,
-  ContentIcon,
-  ChevronDownIcon
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} 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
-};
-const accordionItemStyles = [tc.borderB()].flat();
-const createAccordionTrigger = ({
-  children
-}) => ({
-  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: []
-            }
-          ]
-        }
-      ]
-    }
-  ]
-});
-const accordionContentStyles = [
-  tc.overflow("hidden"),
-  tc.text("sm"),
-  // transition does not work with display: none
-  // tc.transition("all"),
-  tc.pb(4)
-].flat();
-export const metaAccordion = {
-  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 = {
-  category: "hidden",
-  type: "container",
-  label: "Item",
-  icon: ItemIcon,
-  requiredAncestors: ["Accordion"],
-  indexWithinAncestor: "Accordion",
-  presetStyle
-};
-export const metaAccordionHeader = {
-  category: "hidden",
-  type: "container",
-  label: "Item Header",
-  icon: HeaderIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle: {
-    h3: [h3, tc.my(0)].flat()
-  }
-};
-export const metaAccordionTrigger = {
-  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 = {
-  category: "hidden",
-  type: "container",
-  label: "Item Content",
-  icon: ContentIcon,
-  requiredAncestors: ["AccordionItem"],
-  detachable: false,
-  presetStyle
-};
-export const propsMetaAccordion = {
-  props: propsAccordion,
-  initialProps: ["value", "collapsible"]
-};
-export const propsMetaAccordionItem = {
-  props: propsAccordionItem
-};
-export const propsMetaAccordionHeader = {
-  props: propsAccordionHeader
-};
-export const propsMetaAccordionTrigger = {
-  props: propsAccordionTrigger
-};
-export const propsMetaAccordionContent = {
-  props: propsAccordionContent
-};

package/lib/checkbox.js

@@ -1,10 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef
-} from "react";
-import { Root, Indicator } from "@radix-ui/react-checkbox";
-export const Checkbox = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(Root, { ref, ...props });
-});
-export const CheckboxIndicator = Indicator;

package/lib/checkbox.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-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
-};
-export const Checkbox = {
-  render: (props) => renderComponentTemplate({
-    name: "Checkbox",
-    props: { ...props },
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/checkbox.ws.js

@@ -1,148 +0,0 @@
-"use strict";
-import {
-  CheckMarkIcon,
-  CheckboxCheckedIcon,
-  TriggerIcon
-} from "@webstudio-is/icons/svg";
-import {
-  defaultStates
-} 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 = {
-  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 \u201CName\u201D 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 = {
-  category: "hidden",
-  type: "container",
-  detachable: false,
-  icon: TriggerIcon,
-  states: defaultStates,
-  presetStyle: {
-    span
-  }
-};
-export const propsMetaCheckbox = {
-  props: propsCheckbox,
-  initialProps: ["id", "checked", "name", "required"]
-};
-export const propsMetaCheckboxIndicator = {
-  props: propsCheckboxIndicator
-};

package/lib/collapsible.js

@@ -1,31 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  Children
-} from "react";
-import { Root, Trigger, Content } from "@radix-ui/react-collapsible";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-export const Collapsible = Root;
-export const CollapsibleTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
-});
-export const CollapsibleContent = Content;
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksCollapsible = {
-  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);
-        }
-      }
-    }
-  }
-};

package/lib/collapsible.stories.js

@@ -1,18 +0,0 @@
-"use strict";
-import { renderComponentTemplate } from "@webstudio-is/react-sdk";
-import { Collapsible as CollapsiblePrimitive } from "./collapsible";
-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/Collapsible",
-  component: CollapsiblePrimitive
-};
-export const Collapsible = {
-  render: () => renderComponentTemplate({
-    name: "Collapsible",
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};

package/lib/collapsible.ws.js

@@ -1,103 +0,0 @@
-"use strict";
-import {
-  CollapsibleIcon,
-  TriggerIcon,
-  ContentIcon
-} from "@webstudio-is/icons/svg";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import {
-  propsCollapsible,
-  propsCollapsibleContent,
-  propsCollapsibleTrigger
-} from "./__generated__/collapsible.props";
-import { getButtonStyles } from "./theme/styles";
-const presetStyle = {
-  div
-};
-export const metaCollapsible = {
-  category: "radix",
-  order: 5,
-  type: "container",
-  presetStyle,
-  icon: CollapsibleIcon,
-  description: "An interactive component which expands and collapses some content, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Collapsible",
-      dataSources: {
-        collapsibleOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "collapsibleOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `collapsibleOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "CollapsibleTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              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 = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-export const metaCollapsibleContent = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  detachable: false
-};
-export const propsMetaCollapsible = {
-  props: {
-    ...propsCollapsible,
-    onOpenChange: {
-      type: "action",
-      control: "action",
-      required: false
-    }
-  },
-  initialProps: ["open", "onOpenChange"]
-};
-export const propsMetaCollapsibleTrigger = {
-  props: propsCollapsibleTrigger
-};
-export const propsMetaCollapsibleContent = {
-  props: propsCollapsibleContent
-};

package/lib/dialog.js

@@ -1,53 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  Children
-} from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-export const Dialog = forwardRef((props, _ref) => {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { ...props });
-});
-export const DialogTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { ref, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
-});
-export const DialogOverlay = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { ref, ...props }) });
-});
-export const DialogContent = DialogPrimitive.Content;
-export const DialogClose = DialogPrimitive.Close;
-export const DialogTitle = DialogPrimitive.Title;
-export const DialogDescription = DialogPrimitive.Description;
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksDialog = {
-  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);
-        }
-      }
-    }
-  }
-};

package/lib/dialog.stories.js

@@ -1,18 +0,0 @@
-"use strict";
-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
-};
-export const Dialog = {
-  render: () => renderComponentTemplate({
-    name: "Dialog",
-    components: { ...baseComponents, ...radixComponents },
-    metas: { ...baseMetas, ...radixMetas }
-  })
-};