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

package/src/navigation-menu.ws.ts

@@ -0,0 +1,523 @@
+import {
+  ContentIcon,
+  ListIcon,
+  ListItemIcon,
+  TriggerIcon,
+  BoxIcon,
+  ChevronDownIcon,
+  ViewportIcon,
+  NavigationMenuIcon,
+} from "@webstudio-is/icons/svg";
+import type {
+  PresetStyle,
+  WsComponentMeta,
+  WsComponentPropsMeta,
+} 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 {
+  propsNavigationMenu,
+  propsNavigationMenuItem,
+  propsNavigationMenuTrigger,
+  propsNavigationMenuContent,
+  propsNavigationMenuLink,
+  propsNavigationMenuList,
+  propsNavigationMenuViewport,
+} from "./__generated__/navigation-menu.props";
+
+const presetStyle = {
+  div,
+} satisfies 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—known as tab panels—that 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: (typeof components)[number]
+): NonNullable<WsComponentMeta["template"]> => [
+  {
+    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: {
+  count: number;
+  offset: number;
+}): NonNullable<WsComponentMeta["template"]> => [
+  {
+    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: {
+  title: string;
+}): NonNullable<WsComponentMeta["template"]> => [
+  {
+    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: {
+  title: string;
+  children: NonNullable<WsComponentMeta["template"]>;
+  padding: 0 | 2;
+}): NonNullable<WsComponentMeta["template"]> => [
+  {
+    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: WsComponentMeta = {
+  category: "radix",
+  order: 2,
+  type: "container",
+  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: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: ListIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Menu List",
+};
+
+export const metaNavigationMenuItem: WsComponentMeta = {
+  category: "hidden",
+  type: "container",
+  icon: ListItemIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item",
+};
+export const metaNavigationMenuTrigger: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  stylable: false,
+  type: "container",
+  icon: TriggerIcon,
+  requiredAncestors: ["NavigationMenuItem"],
+  presetStyle,
+  label: "Menu Trigger",
+};
+export const metaNavigationMenuContent: WsComponentMeta = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: ContentIcon,
+  requiredAncestors: ["NavigationMenuItem"],
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle,
+  label: "Menu Content",
+};
+
+export const metaNavigationMenuLink: WsComponentMeta = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  stylable: false,
+  icon: BoxIcon,
+  // https://github.com/webstudio-is/webstudio-builder/issues/2193
+  // requiredAncestors: ["NavigationMenuContent", "NavigationMenuItem"],
+  // Temporary restrict to NavigationMenu
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Accessible Link Wrapper",
+};
+
+export const metaNavigationMenuViewport: WsComponentMeta = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  icon: ViewportIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Menu Viewport",
+};
+
+export const propsMetaNavigationMenu: WsComponentPropsMeta = {
+  props: propsNavigationMenu,
+};
+export const propsMetaNavigationMenuItem: WsComponentPropsMeta = {
+  props: propsNavigationMenuItem,
+};
+export const propsMetaNavigationMenuTrigger: WsComponentPropsMeta = {
+  props: propsNavigationMenuTrigger,
+};
+export const propsMetaNavigationMenuContent: WsComponentPropsMeta = {
+  props: propsNavigationMenuContent,
+};
+export const propsMetaNavigationMenuLink: WsComponentPropsMeta = {
+  props: propsNavigationMenuLink,
+};
+export const propsMetaNavigationMenuList: WsComponentPropsMeta = {
+  props: propsNavigationMenuList,
+};
+export const propsMetaNavigationMenuViewport: WsComponentPropsMeta = {
+  props: propsNavigationMenuViewport,
+};

package/src/popover.ws.tsx

@@ -4,14 +4,14 @@ import {
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } 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";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
-import { template as buttonTemplate } from "./button.ws";
 
 const presetStyle = {
   div,
@@ -44,9 +44,9 @@ export const metaPopoverContent: WsComponentMeta = {
  **/
 export const metaPopover: WsComponentMeta = {
   category: "radix",
+  order: 6,
   type: "container",
   icon: PopoverIcon,
-  order: 15,
   stylable: false,
   template: [
     {
@@ -73,15 +73,18 @@ export const metaPopover: WsComponentMeta = {
         {
           type: "instance",
           component: "PopoverTrigger",
-          props: [],
-          children: buttonTemplate({
-            children: [{ type: "text", value: "Button" }],
-          }),
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("outline"),
+              children: [{ type: "text", value: "Button" }],
+            },
+          ],
         },
         {
           type: "instance",
           component: "PopoverContent",
-          props: [],
           /**
            *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
            **/
@@ -111,7 +114,7 @@ export const metaPopover: WsComponentMeta = {
 
 export const propsMetaPopover: WsComponentPropsMeta = {
   props: propsPopover,
-  initialProps: ["open", "modal"],
+  initialProps: ["open"],
 };
 
 export const propsMetaPopoverTrigger: WsComponentPropsMeta = {

package/src/props.ts

@@ -22,24 +22,12 @@ export {
   propsMetaTooltipTrigger as TooltipTrigger,
   propsMetaTooltipContent as TooltipContent,
 } from "./tooltip.ws";
-export {
-  propsMetaSheet as Sheet,
-  propsMetaSheetTrigger as SheetTrigger,
-  propsMetaSheetOverlay as SheetOverlay,
-  propsMetaSheetContent as SheetContent,
-  propsMetaSheetClose as SheetClose,
-  propsMetaSheetTitle as SheetTitle,
-  propsMetaSheetDescription as SheetDescription,
-} from "./sheet.ws";
 export {
   propsMetaTabs as Tabs,
   propsMetaTabsList as TabsList,
   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,
@@ -48,3 +36,38 @@ export {
   propsMetaAccordionTrigger as AccordionTrigger,
   propsMetaAccordionContent as AccordionContent,
 } from "./accordion.ws";
+
+export {
+  propsMetaNavigationMenu as NavigationMenu,
+  propsMetaNavigationMenuList as NavigationMenuList,
+  propsMetaNavigationMenuItem as NavigationMenuItem,
+  propsMetaNavigationMenuTrigger as NavigationMenuTrigger,
+  propsMetaNavigationMenuContent as NavigationMenuContent,
+  propsMetaNavigationMenuLink as NavigationMenuLink,
+  propsMetaNavigationMenuViewport as NavigationMenuViewport,
+} from "./navigation-menu.ws";
+
+export {
+  propsMetaSelect as Select,
+  propsMetaSelectTrigger as SelectTrigger,
+  propsMetaSelectValue as SelectValue,
+  propsMetaSelectViewport as SelectViewport,
+  propsMetaSelectContent as SelectContent,
+  propsMetaSelectItem as SelectItem,
+  propsMetaSelectItemIndicator as SelectItemIndicator,
+  propsMetaSelectItemText as SelectItemText,
+} from "./select.ws";
+
+export {
+  propsMetaSwitch as Switch,
+  propsMetaSwitchThumb as SwitchThumb,
+} from "./switch.ws";
+export {
+  propsMetaCheckbox as Checkbox,
+  propsMetaCheckboxIndicator as CheckboxIndicator,
+} from "./checkbox.ws";
+export {
+  propsMetaRadioGroup as RadioGroup,
+  propsMetaRadioGroupItem as RadioGroupItem,
+  propsMetaRadioGroupIndicator as RadioGroupIndicator,
+} from "./radio-group.ws";

package/src/{input.stories.ts → radio-group.stories.ts}

@@ -1,29 +1,20 @@
 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";
+import { RadioGroup as RadioGroupPrimitive } from "./radio-group";
 
 export default {
-  title: "Components/Input",
-  component: InputPrimitive,
-  argTypes: {
-    placeholder: {
-      type: "string",
-    },
-    type: {
-      options: ["text", "file"],
-      control: { type: "select" },
-    },
-  },
-} satisfies Meta<typeof InputPrimitive>;
+  title: "Components/RadioGroup",
+  component: RadioGroupPrimitive,
+} satisfies Meta<typeof RadioGroupPrimitive>;
 
-export const Input: StoryObj<typeof InputPrimitive> = {
+export const RadioGroup: StoryObj<typeof RadioGroupPrimitive> = {
   render: (props) =>
     renderComponentTemplate({
-      name: "Input",
+      name: "RadioGroup",
       props: { ...props },
       components: { ...baseComponents, ...radixComponents },
       metas: { ...baseMetas, ...radixMetas },

package/src/radio-group.tsx

@@ -0,0 +1,17 @@
+import {
+  type ForwardRefExoticComponent,
+  type ComponentPropsWithRef,
+} from "react";
+import { Root, Item, Indicator } from "@radix-ui/react-radio-group";
+
+export const RadioGroup: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Root>
+> = Root;
+
+export const RadioGroupItem: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Item>
+> = Item;
+
+export const RadioGroupIndicator: ForwardRefExoticComponent<
+  ComponentPropsWithRef<typeof Indicator>
+> = Indicator;