@postxl/generators 0.2.2

package/dist/frontend-core/template/src/components/ui/modal/modal.stories.tsx

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, screen, waitFor } from 'storybook/test'
+import { SunIcon } from '@radix-ui/react-icons'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@components/ui/tabs/tabs'
+
+import { Modal } from './modal'
+import { Button } from '@components/ui/button/button'
+import { RadioGroup, RadioGroupItem } from '@components/ui/radio-group/radio-group'
+import { Label } from '@components/ui/label/label'
+
+import { useState } from 'react'
+
+const meta = {
+  title: 'Modal',
+  component: Modal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isOpen: {
+      control: { disable: true },
+    },
+    setIsOpen: {
+      control: { disable: true },
+    },
+    title: {
+      control: 'text',
+    },
+    subtitle: {
+      control: 'text',
+    },
+    showCloseButton: {
+      control: 'boolean',
+    },
+    preventClickOutsideToDismiss: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: [undefined, 'fit-content', 'full-height', 'full-size', 'fit-content-width'],
+    },
+    onOpenAutoFocus: {
+      control: { disable: true },
+    },
+  },
+  args: {
+    title: 'Modal Title',
+    subtitle: 'This is the modal subtitle',
+    showCloseButton: true,
+    preventClickOutsideToDismiss: false,
+  },
+} satisfies Meta<typeof Modal>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const dummyText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum laoreet erat ac sodales. Pellentesque nec nunc in ipsum tincidunt congue sit amet in augue. Sed interdum consequat arcu, ac tempor nisl eleifend sed. Mauris gravida ipsum orci, sed vestibulum nisl commodo in. Aliquam ut dolor dui. Donec fermentum viverra faucibus. In aliquet erat et quam ornare, et accumsan magna ornare. Suspendisse potenti. Etiam a elit dui. Mauris et lectus vel metus lobortis luctus. Vestibulum elementum sit amet augue vel rutrum. Aenean sem turpis, viverra hendrerit consequat eget, vulputate sed nunc. Pellentesque sollicitudin diam nunc, vel pretium massa mattis at. Curabitur fringilla convallis mollis. '
+
+export const Default: Story = {
+  args: {
+    isOpen: false,
+    setIsOpen: () => {},
+    title: 'Modal Title',
+    subtitle: 'This is the modal subtitle',
+    showCloseButton: true,
+    preventClickOutsideToDismiss: false,
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          title={args.title}
+          subtitle={args.subtitle}
+          showCloseButton={args.showCloseButton}
+          preventClickOutsideToDismiss={args.preventClickOutsideToDismiss}
+          size={args.size}
+          onOpenAutoFocus={args.onOpenAutoFocus}
+          controls={args.controls}
+        >
+          <div className="bg-primary/20 p-4">
+            <p>Modal Content</p>
+            <br />
+            <p>{dummyText}</p>
+          </div>
+        </Modal>
+      </>
+    )
+  },
+  play: async () => {
+    // Open modal
+    const openButton = screen.getByText('Open Modal')
+    await userEvent.click(openButton)
+    // Wait for modal content to appear and be visible
+    await waitFor(() => {
+      const modalContent = screen.queryByText('Modal Content')
+      expect(modalContent).toBeTruthy()
+      expect(modalContent).toBeVisible()
+    })
+    // Close modal (via close button)
+    const closeButton = screen.getByRole('button', { name: /close/i })
+    await userEvent.click(closeButton)
+    // Wait for modal content to be hidden or removed
+    await waitFor(() => {
+      const modalContent = screen.queryByText('Modal Content')
+      if (modalContent) {
+        expect(modalContent).not.toBeVisible()
+      }
+    })
+  },
+}
+
+export const Sizes: Story = {
+  args: { isOpen: false, setIsOpen: () => {} },
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [size, setSize] = useState<'fit-content' | 'full-height' | 'full-size' | 'fit-content-width' | undefined>(
+      undefined,
+    )
+    const sizeOptions = [
+      { value: '', label: 'undefined' },
+      { value: 'fit-content', label: 'fit-content' },
+      { value: 'full-height', label: 'full-height' },
+      { value: 'full-size', label: 'full-size' },
+      { value: 'fit-content-width', label: 'fit-content-width' },
+    ]
+    return (
+      <div className="flex flex-col gap-3 items-center">
+        <RadioGroup
+          defaultValue=""
+          value={size ?? ''}
+          onValueChange={(val) => setSize(val === '' ? undefined : (val as typeof size))}
+          className="flex flex-row gap-2"
+        >
+          {sizeOptions.map((opt) => (
+            <div key={opt.value} className="flex items-center gap-2">
+              <RadioGroupItem value={opt.value} id={`modal-size-${opt.value}`} />
+              <Label htmlFor={`modal-size-${opt.value}`} className="cursor-pointer">
+                {opt.label}
+              </Label>
+            </div>
+          ))}
+        </RadioGroup>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          title="Modal Title"
+          subtitle="This is the modal subtitle"
+          showCloseButton={true}
+          preventClickOutsideToDismiss={false}
+          size={size}
+        >
+          <div className="bg-primary/20 w-[900px] min-w-0 h-full p-4">
+            <p>Modal Content with w-[900px]</p>
+            <br />
+            <p>{dummyText}</p>
+          </div>
+        </Modal>
+      </div>
+    )
+  },
+}
+
+export const WithControlsAndFooter: Story = {
+  args: {
+    isOpen: false,
+    setIsOpen: () => {},
+    title: 'Modal Title',
+    showCloseButton: true,
+    preventClickOutsideToDismiss: false,
+    controls: [
+      <Button key="c1" variant="outline" size="xs" onClick={() => alert('Cancel clicked')}>
+        Cancel
+      </Button>,
+      <Button key="c2" variant="default" size="xs" onClick={() => alert('Save clicked')}>
+        Save
+      </Button>,
+    ],
+    footer: (
+      <div className="flex items-center justify-center gap-3">
+        This is the modal footer
+        <SunIcon className="size-5 text-yellow-500" />
+      </div>
+    ),
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          title={args.title}
+          subtitle={args.subtitle}
+          showCloseButton={args.showCloseButton}
+          preventClickOutsideToDismiss={args.preventClickOutsideToDismiss}
+          size={args.size}
+          onOpenAutoFocus={args.onOpenAutoFocus}
+          controls={args.controls}
+          footer={args.footer}
+        >
+          <div className="bg-primary/20 p-4">
+            <p>Modal Content</p>
+            <br />
+            <p>{dummyText}</p>
+          </div>
+        </Modal>
+      </>
+    )
+  },
+}
+
+export const ComplexSubtitleExample: Story = {
+  args: {
+    isOpen: false,
+    setIsOpen: () => {},
+    title: 'Subtitle to navigate menu of multi page modal',
+    showCloseButton: true,
+    preventClickOutsideToDismiss: false,
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [activeTab, setActiveTab] = useState('tab1')
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          title={args.title}
+          showCloseButton={args.showCloseButton}
+          preventClickOutsideToDismiss={args.preventClickOutsideToDismiss}
+          size={args.size}
+          onOpenAutoFocus={args.onOpenAutoFocus}
+          controls={args.controls}
+          footer={args.footer}
+          subtitle={
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="mt-2">
+              <TabsList variant="protocol" size="sm" className="justify-start relative">
+                <TabsTrigger variant="protocol" value="tab1" className="px-4 cursor-pointer">
+                  Tab 1
+                </TabsTrigger>
+                <TabsTrigger variant="protocol" value="tab2" className="px-4 cursor-pointer">
+                  Tab 2
+                </TabsTrigger>
+              </TabsList>
+            </Tabs>
+          }
+        >
+          <div className="p-3 pb-2">
+            <Tabs value={activeTab} onValueChange={setActiveTab}>
+              <TabsContent value="tab1">
+                <h3>Modal page 1</h3>
+              </TabsContent>
+              <TabsContent value="tab2">
+                <h3>Modal page 2</h3>
+              </TabsContent>
+            </Tabs>
+          </div>
+        </Modal>
+      </>
+    )
+  },
+}
+
+export const ScrollableModal: Story = {
+  args: {
+    isOpen: false,
+    setIsOpen: () => {},
+  },
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false)
+    let repeatedText = ''
+    for (let i = 0; i < 20; i++) {
+      repeatedText += dummyText
+    }
+    return (
+      <>
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <Modal isOpen={isOpen} setIsOpen={setIsOpen} title="Modal Title">
+          <div className="bg-primary/20 p-4">
+            <p>Modal Content</p>
+            <br />
+            <p>{repeatedText}</p>
+          </div>
+        </Modal>
+      </>
+    )
+  },
+}

package/dist/frontend-core/template/src/components/ui/modal/modal.tsx

@@ -0,0 +1,80 @@
+import { type Dispatch, type PropsWithChildren, type ReactNode, type SetStateAction } from 'react'
+
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@components/ui/dialog/dialog'
+import { cn } from '@lib/utils'
+
+type ModalProps = {
+  title?: ReactNode | string
+  subtitle?: ReactNode
+  showCloseButton?: boolean
+  isOpen: boolean
+  setIsOpen: Dispatch<SetStateAction<boolean>>
+  __e2e_test_id__?: string
+  footer?: ReactNode
+  controls?: ReactNode[]
+  preventClickOutsideToDismiss?: boolean
+  size?: 'fit-content' | 'full-height' | 'full-size' | 'fit-content-width'
+  contentClass?: string
+  onOpenAutoFocus?: (event: Event) => void
+}
+
+export const Modal = ({
+  title = '',
+  subtitle,
+  isOpen,
+  showCloseButton = true,
+  setIsOpen,
+  children,
+  controls = [],
+  footer,
+  preventClickOutsideToDismiss,
+  size = 'fit-content',
+  contentClass = '',
+  __e2e_test_id__,
+  onOpenAutoFocus,
+}: PropsWithChildren<ModalProps>) => {
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent
+        onOpenAutoFocus={onOpenAutoFocus}
+        className={cn(
+          'sm:max-w-xl min-w-[425px] max-h-[95vh] flex flex-col p-0 gap-0 border-(--discreet-border) rounded',
+          size === 'full-height' && 'h-[95vh]',
+          size === 'full-size' && 'w-[95vw] h-[95vh] sm:max-w-[95vw]',
+          size === 'fit-content-width' && 'max-w-fit w-auto sm:max-w-fit',
+          contentClass,
+        )}
+        showCloseButton={showCloseButton}
+        __e2e_test_id__={__e2e_test_id__}
+        onInteractOutside={preventClickOutsideToDismiss ? (e) => e.preventDefault() : undefined}
+        onEscapeKeyDown={preventClickOutsideToDismiss ? (e) => e.preventDefault() : undefined}
+      >
+        <DialogHeader
+          className={cn(
+            'flex flex-row flex-shrink-0 items-center gap-2 p-3 min-h-10 border-b-1 border-(--discreet-border)',
+            showCloseButton ? 'pr-12' : '',
+            subtitle ? 'pb-0' : '',
+          )}
+        >
+          <div className="overflow-hidden">
+            {title && (
+              <DialogTitle className="text-xl overflow-hidden text-ellipsis whitespace-nowrap">{title}</DialogTitle>
+            )}
+            {subtitle}
+          </div>
+          {controls.length > 0 && (
+            <div className="flex flex-grow justify-end items-baseline gap-2 whitespace-nowrap flex-1">{controls}</div>
+          )}
+        </DialogHeader>
+
+        <div className="max-h-full h-full overflow-auto flex-grow">{children}</div>
+
+        {footer && (
+          <DialogFooter className="sm:justify-center flex-shrink-0 p-3 border-t-1 border-(--discreet-border)">
+            {footer}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

package/dist/frontend-core/template/src/components/ui/navigation-menu/navigation-menu.stories.tsx

@@ -0,0 +1,213 @@
+import { CheckCircledIcon, QuestionMarkCircledIcon, CircleIcon } from '@radix-ui/react-icons'
+
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from './navigation-menu'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import { cn } from '@lib/utils'
+
+const meta: Meta<typeof NavigationMenu> = {
+  title: 'Navigation Menu',
+  tags: ['autodocs'],
+  component: NavigationMenu,
+  argTypes: {
+    viewport: {
+      control: 'boolean',
+      description: 'optimize for small devices',
+    },
+  },
+}
+export default meta
+
+// DATA ------------------------------------------------------------------------
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: 'Alert Dialog',
+    href: '/docs/primitives/alert-dialog',
+    description: 'A modal dialog that interrupts the user with important content and expects a response.',
+  },
+  {
+    title: 'Hover Card',
+    href: '/docs/primitives/hover-card',
+    description: 'For sighted users to preview content available behind a link.',
+  },
+  {
+    title: 'Progress',
+    href: '/docs/primitives/progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+  },
+  {
+    title: 'Scroll-area',
+    href: '/docs/primitives/scroll-area',
+    description: 'Visually or semantically separates content.',
+  },
+  {
+    title: 'Tabs',
+    href: '/docs/primitives/tabs',
+    description: 'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+  },
+  {
+    title: 'Tooltip',
+    href: '/docs/primitives/tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+  },
+]
+
+// STORIES ---------------------------------------------------------------------
+
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    viewport: false,
+  },
+  render: (args) => (
+    <div
+      className={cn('flex items-center justify-center border-border border relative', {
+        'w-[320px]': args.viewport,
+      })}
+    >
+      <NavigationMenu orientation={'horizontal'} viewport={args.viewport}>
+        <NavigationMenuList className="flex-wrap">
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Home</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                <li className="row-span-3">
+                  <NavigationMenuLink asChild>
+                    <a
+                      className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6"
+                      href="/"
+                    >
+                      <div className="mb-2 text-lg font-medium sm:mt-4">shadcn/ui</div>
+                      <p className="text-muted-foreground text-sm leading-tight">
+                        Beautifully designed components built with Tailwind CSS.
+                      </p>
+                    </a>
+                  </NavigationMenuLink>
+                </li>
+                <ListItem href="/docs" title="Introduction">
+                  Re-usable components built using Radix UI and Tailwind CSS.
+                </ListItem>
+                <ListItem href="/docs/installation" title="Installation">
+                  How to install dependencies and structure your app.
+                </ListItem>
+                <ListItem href="/docs/primitives/typography" title="Typography">
+                  Styles for headings, paragraphs, lists...etc
+                </ListItem>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                {components.map((component) => (
+                  <ListItem key={component.title} title={component.title} href={component.href}>
+                    {component.description}
+                  </ListItem>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem>
+            <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
+              <a href="/docs">Docs</a>
+            </NavigationMenuLink>
+          </NavigationMenuItem>
+          <NavigationMenuItem className="hidden md:block">
+            <NavigationMenuTrigger>List</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[300px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <a href="#">
+                      <div className="font-medium">Components</div>
+                      <div className="text-muted-foreground">Browse all components in the library.</div>
+                    </a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#">
+                      <div className="font-medium">Documentation</div>
+                      <div className="text-muted-foreground">Learn how to use the library.</div>
+                    </a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#">
+                      <div className="font-medium">Blog</div>
+                      <div className="text-muted-foreground">Read our latest blog posts.</div>
+                    </a>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem className="hidden md:block">
+            <NavigationMenuTrigger>Simple</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[200px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <a href="#">Components</a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#">Documentation</a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#">Blocks</a>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+          <NavigationMenuItem className="hidden md:block">
+            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[200px] gap-4">
+                <li>
+                  <NavigationMenuLink asChild>
+                    <a href="#" className="flex-row items-center gap-2">
+                      <QuestionMarkCircledIcon />
+                      Backlog
+                    </a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#" className="flex-row items-center gap-2">
+                      <CircleIcon />
+                      To Do
+                    </a>
+                  </NavigationMenuLink>
+                  <NavigationMenuLink asChild>
+                    <a href="#" className="flex-row items-center gap-2">
+                      <CheckCircledIcon />
+                      Done
+                    </a>
+                  </NavigationMenuLink>
+                </li>
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  ),
+}
+
+function ListItem({ title, children, href, ...props }: React.ComponentPropsWithoutRef<'li'> & { href: string }) {
+  return (
+    <li {...props}>
+      <NavigationMenuLink asChild>
+        <a href={href}>
+          <div className="text-sm leading-none font-medium">{title}</div>
+          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">{children}</p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+}