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

package/lib/navigation-menu.ws.js

@@ -1,486 +0,0 @@
-"use strict";
-import {
-  ContentIcon,
-  ListIcon,
-  ListItemIcon,
-  TriggerIcon,
-  BoxIcon,
-  ChevronDownIcon,
-  ViewportIcon,
-  NavigationMenuIcon
-} from "@webstudio-is/icons/svg";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { getButtonStyles } from "./theme/styles";
-import {
-  propsNavigationMenu,
-  propsNavigationMenuItem,
-  propsNavigationMenuTrigger,
-  propsNavigationMenuContent,
-  propsNavigationMenuLink,
-  propsNavigationMenuList,
-  propsNavigationMenuViewport
-} from "./__generated__/navigation-menu.props";
-const presetStyle = {
-  div
-};
-const components = [
-  {
-    title: "Sheet",
-    href: "/docs/components/sheet",
-    description: "Extends the Dialog component to display content that complements the main content of the screen."
-  },
-  {
-    title: "Navigation Menu",
-    href: "/docs/components/navigation-menu",
-    description: "A collection of links for navigating websites."
-  },
-  {
-    title: "Tabs",
-    href: "/docs/components/tabs",
-    description: "A set of layered sections of content\u2014known as tab panels\u2014that are displayed one at a time."
-  },
-  {
-    title: "Accordion",
-    href: "/docs/components/accordion",
-    description: "A vertically stacked set of interactive headings that each reveal a section of content."
-  },
-  {
-    title: "Dialog",
-    href: "/docs/components/dialog",
-    description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert."
-  },
-  {
-    title: "Collapsible",
-    href: "/docs/components/collapsible",
-    description: "An interactive component which expands/collapses a panel."
-  },
-  {
-    title: "Popover",
-    href: "/docs/components/popover",
-    description: "Displays rich content in a portal, triggered by a button."
-  },
-  {
-    title: "Tooltip",
-    href: "/docs/components/tooltip",
-    description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
-  },
-  {
-    title: "Button",
-    href: "/docs/components/button",
-    description: "Displays a button or a component that looks like a button."
-  }
-];
-const navItem = (props) => [
-  {
-    type: "instance",
-    component: "NavigationMenuLink",
-    children: [
-      {
-        type: "instance",
-        component: "Link",
-        // block select-none space-y-1 rounded-md p-3 leading-none
-        // no-underline outline-none transition-colors
-        // hover:bg-accent hover:text-accent-foreground
-        // focus:bg-accent focus:text-accent-foreground
-        styles: [
-          tc.text("inherit"),
-          tc.flex(),
-          tc.flex("col"),
-          tc.select("none"),
-          tc.gap(1),
-          tc.rounded("md"),
-          tc.p(3),
-          tc.leading("none"),
-          tc.noUnderline(),
-          tc.outline("none"),
-          tc.hover([tc.bg("accent"), tc.text("accentForeground")].flat()),
-          tc.focus([tc.bg("accent"), tc.text("accentForeground")].flat())
-        ].flat(),
-        props: [
-          {
-            name: "href",
-            type: "string",
-            value: `https://ui.shadcn.com${props.href}`
-          }
-        ],
-        children: [
-          {
-            type: "instance",
-            component: "Text",
-            // text-sm font-medium leading-none
-            styles: [
-              tc.text("sm"),
-              tc.font("medium"),
-              tc.leading("none")
-            ].flat(),
-            children: [
-              {
-                type: "text",
-                value: props.title
-              }
-            ]
-          },
-          {
-            type: "instance",
-            component: "Paragraph",
-            // line-clamp-2 text-sm leading-snug text-muted-foreground
-            styles: [
-              tc.m(0),
-              tc.lineClamp(2),
-              tc.text("sm"),
-              tc.leading("snug"),
-              tc.text("mutedForeground")
-            ].flat(),
-            children: [
-              {
-                type: "text",
-                value: props.description
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  }
-];
-const navItemsList = (props) => [
-  {
-    type: "instance",
-    component: "Box",
-    label: "Flex Column",
-    styles: [tc.w(64), tc.flex(), tc.gap(4), tc.flex("col")].flat(),
-    children: Array.from(
-      Array(props.count),
-      (_, index) => navItem(components[index + props.offset])
-    ).flat()
-  }
-];
-const menuItemLink = (props) => [
-  {
-    type: "instance",
-    component: "NavigationMenuItem",
-    children: [
-      {
-        type: "instance",
-        component: "NavigationMenuLink",
-        children: [
-          {
-            type: "instance",
-            component: "Link",
-            styles: [
-              getButtonStyles("ghost", "sm"),
-              tc.noUnderline(),
-              tc.text("current")
-            ].flat(),
-            children: [{ type: "text", value: props.title }]
-          }
-        ]
-      }
-    ]
-  }
-];
-const menuItem = (props) => [
-  {
-    type: "instance",
-    component: "NavigationMenuItem",
-    children: [
-      {
-        type: "instance",
-        component: "NavigationMenuTrigger",
-        children: [
-          {
-            type: "instance",
-            component: "Button",
-            styles: [
-              getButtonStyles("ghost", "sm"),
-              tc.property("--navigation-menu-trigger-icon-transform", "0deg"),
-              tc.state(
-                [
-                  tc.property(
-                    "--navigation-menu-trigger-icon-transform",
-                    "180deg"
-                  )
-                ],
-                "[data-state=open]"
-              )
-            ].flat(),
-            children: [
-              {
-                type: "instance",
-                component: "Text",
-                children: [{ type: "text", value: props.title }]
-              },
-              {
-                type: "instance",
-                component: "Box",
-                label: "Icon Container",
-                // h-4 w-4 shrink-0 transition-transform duration-200
-                styles: [
-                  tc.ml(1),
-                  tc.property(
-                    "rotate",
-                    "--navigation-menu-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: []
-                  }
-                ]
-              }
-            ]
-          }
-        ]
-      },
-      {
-        type: "instance",
-        component: "NavigationMenuContent",
-        // left-0 top-0 absolute w-max
-        styles: [
-          tc.left(0),
-          tc.top(0),
-          tc.absolute(),
-          tc.w("max"),
-          tc.p(4)
-        ].flat(),
-        children: [
-          {
-            type: "instance",
-            component: "Box",
-            label: "Content",
-            styles: [tc.flex(), tc.gap(4), tc.p(props.padding)].flat(),
-            children: props.children
-          }
-        ]
-      }
-    ]
-  }
-];
-export const metaNavigationMenu = {
-  category: "radix",
-  order: 2,
-  type: "container",
-  description: "A collection of links for navigating websites.",
-  icon: NavigationMenuIcon,
-  presetStyle,
-  template: [
-    {
-      type: "instance",
-      component: "NavigationMenu",
-      dataSources: {
-        menuValue: { type: "variable", initialValue: "" }
-      },
-      props: [
-        { type: "dataSource", name: "value", dataSourceName: "menuValue" },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: `menuValue = value`
-            }
-          ]
-        }
-      ],
-      // relative
-      // Omiting this: z-10 flex max-w-max flex-1 items-center justify-center
-      styles: [tc.relative(), tc.maxW("max")].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "NavigationMenuList",
-          styles: [
-            // ul defaults in tailwind
-            tc.p(0),
-            tc.m(0),
-            // shadcdn styles
-            tc.flex(),
-            tc.flex(1),
-            tc.list("none"),
-            tc.items("center"),
-            tc.justify("center"),
-            tc.gap(1)
-          ].flat(),
-          children: [
-            ...menuItem({
-              title: "About",
-              padding: 2,
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  styles: [
-                    tc.bg("border"),
-                    tc.p(4),
-                    tc.w(48),
-                    tc.rounded("md")
-                  ].flat(),
-                  children: [
-                    {
-                      type: "text",
-                      value: ""
-                    }
-                  ]
-                },
-                ...navItemsList({ count: 3, offset: 0 })
-              ]
-            }),
-            ...menuItem({
-              title: "Components",
-              padding: 0,
-              children: [
-                ...navItemsList({ count: 3, offset: 3 }),
-                ...navItemsList({ count: 3, offset: 6 })
-              ]
-            }),
-            ...menuItemLink({ title: "Standalone" })
-          ]
-        },
-        {
-          type: "instance",
-          component: "Box",
-          label: "Viewport Container",
-          // absolute left-0 top-full flex justify-center
-          styles: [
-            tc.absolute(),
-            tc.left(0),
-            tc.top("full"),
-            tc.flex(),
-            tc.justify("center")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "NavigationMenuViewport",
-              /*
-                origin-top-center relative mt-1.5 w-full
-                overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg
-                h-[var(--radix-navigation-menu-viewport-height)]
-                w-[var(--radix-navigation-menu-viewport-width)]
-                // anims
-                [animation-duration:150ms!important] [transition-duration:150ms!important]
-                data-[state=open]:animate-in data-[state=closed]:animate-out
-                data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90
-              */
-              styles: [
-                tc.relative(),
-                tc.mt(1.5),
-                tc.overflow("hidden"),
-                tc.rounded("md"),
-                tc.border(),
-                tc.bg("popover"),
-                tc.text("popoverForeground"),
-                tc.shadow("lg"),
-                tc.property(
-                  "height",
-                  "--radix-navigation-menu-viewport-height"
-                ),
-                tc.property("width", "--radix-navigation-menu-viewport-width")
-              ].flat(),
-              children: []
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export const metaNavigationMenuList = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: ListIcon,
-  requiredAncestors: ["NavigationMenu"],
-  presetStyle,
-  label: "Menu List"
-};
-export const metaNavigationMenuItem = {
-  category: "hidden",
-  type: "container",
-  icon: ListItemIcon,
-  requiredAncestors: ["NavigationMenu"],
-  presetStyle,
-  indexWithinAncestor: "NavigationMenu",
-  label: "Menu Item"
-};
-export const metaNavigationMenuTrigger = {
-  category: "hidden",
-  detachable: false,
-  stylable: false,
-  type: "container",
-  icon: TriggerIcon,
-  requiredAncestors: ["NavigationMenuItem"],
-  presetStyle,
-  label: "Menu Trigger"
-};
-export const metaNavigationMenuContent = {
-  category: "hidden",
-  detachable: false,
-  type: "container",
-  icon: ContentIcon,
-  requiredAncestors: ["NavigationMenuItem"],
-  indexWithinAncestor: "NavigationMenu",
-  presetStyle,
-  label: "Menu Content"
-};
-export const metaNavigationMenuLink = {
-  category: "hidden",
-  detachable: true,
-  type: "container",
-  stylable: false,
-  icon: BoxIcon,
-  // https://github.com/webstudio-is/webstudio/issues/2193
-  // requiredAncestors: ["NavigationMenuContent", "NavigationMenuItem"],
-  // Temporary restrict to NavigationMenu
-  requiredAncestors: ["NavigationMenu"],
-  presetStyle,
-  label: "Accessible Link Wrapper"
-};
-export const metaNavigationMenuViewport = {
-  category: "hidden",
-  detachable: true,
-  type: "container",
-  icon: ViewportIcon,
-  requiredAncestors: ["NavigationMenu"],
-  presetStyle,
-  label: "Menu Viewport"
-};
-export const propsMetaNavigationMenu = {
-  props: propsNavigationMenu
-};
-export const propsMetaNavigationMenuItem = {
-  props: propsNavigationMenuItem
-};
-export const propsMetaNavigationMenuTrigger = {
-  props: propsNavigationMenuTrigger
-};
-export const propsMetaNavigationMenuContent = {
-  props: propsNavigationMenuContent
-};
-export const propsMetaNavigationMenuLink = {
-  props: propsNavigationMenuLink
-};
-export const propsMetaNavigationMenuList = {
-  props: propsNavigationMenuList
-};
-export const propsMetaNavigationMenuViewport = {
-  props: propsNavigationMenuViewport
-};

package/lib/popover.js

@@ -1,58 +0,0 @@
-"use strict";
-import { jsx } from "react/jsx-runtime";
-import {
-  forwardRef,
-  Children
-} from "react";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { getClosestInstance } from "@webstudio-is/react-sdk";
-export const Popover = forwardRef((props, _ref) => {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
-});
-export const PopoverTrigger = forwardRef(({ children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
-});
-export const PopoverContent = forwardRef(
-  ({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
-    {
-      ref,
-      align: "center",
-      sideOffset,
-      hideWhenDetached,
-      ...props
-    }
-  ) })
-);
-const namespace = "@webstudio-is/sdk-components-react-radix";
-export const hooksPopover = {
-  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/lib/popover.stories.js

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

package/lib/popover.ws.js

@@ -1,110 +0,0 @@
-"use strict";
-import { PopoverIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
-import {
-} from "@webstudio-is/react-sdk";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import * as tc from "./theme/tailwind-classes";
-import { getButtonStyles } from "./theme/styles";
-import {
-  propsPopover,
-  propsPopoverContent,
-  propsPopoverTrigger
-} from "./__generated__/popover.props";
-const presetStyle = {
-  div
-};
-export const metaPopoverTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-export const metaPopoverContent = {
-  category: "hidden",
-  type: "container",
-  presetStyle,
-  icon: ContentIcon,
-  detachable: false
-};
-export const metaPopover = {
-  category: "radix",
-  order: 6,
-  type: "container",
-  icon: PopoverIcon,
-  stylable: false,
-  description: "Displays rich content in a portal, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Popover",
-      dataSources: {
-        popoverOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "popoverOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `popoverOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "PopoverTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: getButtonStyles("outline"),
-              children: [{ type: "text", value: "Button" }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "PopoverContent",
-          /**
-           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
-           **/
-          styles: [
-            tc.z(50),
-            tc.w(72),
-            tc.rounded("md"),
-            tc.border(),
-            tc.bg("popover"),
-            tc.p(4),
-            tc.text("popoverForeground"),
-            tc.shadow("md"),
-            tc.outline("none")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [{ type: "text", value: "The text you can edit" }]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-export const propsMetaPopover = {
-  props: propsPopover,
-  initialProps: ["open"]
-};
-export const propsMetaPopoverTrigger = {
-  props: propsPopoverTrigger
-};
-export const propsMetaPopoverContent = {
-  props: propsPopoverContent,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"]
-};

package/lib/props-descriptions.js

@@ -1,34 +0,0 @@
-"use strict";
-const open = "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
-const alignOffset = "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options.";
-const sideOffset = "The distance in pixels between the Content and the Trigger.";
-const side = "The preferred alignment against the Trigger. May change when collisions occur.";
-export const propsDescriptions = {
-  Dialog: {
-    open
-  },
-  Sheet: {
-    open
-  },
-  Collapsible: {
-    open
-  },
-  Popover: {
-    open
-  },
-  PopoverContent: {
-    alignOffset,
-    sideOffset,
-    side
-  },
-  Tooltip: {
-    open,
-    delayDuration: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
-    disableHoverableContent: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered."
-  },
-  TooltipContent: {
-    alignOffset,
-    sideOffset,
-    side
-  }
-};