@postxl/generators 0.2.2

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Badge } from './badge'
+
+const meta = {
+  title: 'Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'secondary', 'destructive', 'outline', 'filter', 'info'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'xs', 'sm', 'md', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Badge>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { variant: 'default', size: 'default' },
+  render: (args) => <Badge {...args}>Badge</Badge>,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="filter">Filter</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      <Badge size="xs">Extra Small</Badge>
+      <Badge size="sm">Small</Badge>
+      <Badge size="default">Default</Badge>
+      <Badge size="md">Medium</Badge>
+      <Badge size="lg">Large</Badge>
+    </div>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <Badge>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="m15 9-6 6" />
+        <path d="m9 9 6 6" />
+      </svg>
+      With Icon
+    </Badge>
+  ),
+}

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

@@ -0,0 +1,48 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-base font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        filter: 'bg-primary text-background border-0',
+        info: 'bg-yellow-500 text-foreground border-0',
+      },
+      size: {
+        default: '',
+        xs: 'h-3.5 text-sm',
+        sm: 'h-4.5 text-xs',
+        md: 'h-6 text-md',
+        lg: 'h-8 text-lg',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+function Badge({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'span'
+
+  return <Comp data-slot="badge" className={cn(badgeVariants({ variant, size }), className)} {...props} />
+}
+
+export { Badge, badgeVariants }

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

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from './breadcrumb'
+
+const meta = {
+  title: 'Breadcrumb',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}
+
+export const WithEllipsis: StoryObj<typeof meta> = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs/components">Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+}

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

@@ -0,0 +1,85 @@
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<'nav'> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = 'Breadcrumb'
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<'ol'>>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+BreadcrumbList.displayName = 'BreadcrumbList'
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn('inline-flex items-center gap-1.5', className)} {...props} />
+  ),
+)
+BreadcrumbItem.displayName = 'BreadcrumbItem'
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<'a'> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : 'a'
+
+  return <Comp ref={ref} className={cn('transition-colors hover:text-foreground', className)} {...props} />
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  ),
+)
+BreadcrumbPage.displayName = 'BreadcrumbPage'
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<'li'>) => (
+  <li aria-hidden="true" className={cn('[&>svg]:size-3.5', className)} {...props}>
+    {children ?? <ChevronRightIcon />}
+  </li>
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<'span'>) => (
+  <span aria-hidden="true" className={cn('flex h-9 w-9 items-center justify-center', className)} {...props}>
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbElipssis'
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

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

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from './button'
+import { expect, userEvent, screen } from 'storybook/test'
+
+const meta = {
+  title: 'Button',
+  component: Button,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: [
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'ghost',
+        'link',
+        'outlineInvert',
+        'extraGhost',
+        'extraGhost2',
+        'neutral',
+      ],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'xs', 'sm', 'lg', 'xs2', 'icon', 'iconSm', 'smLow', 'max'],
+    },
+  },
+} satisfies Meta<typeof Button>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { variant: 'default', size: 'default' },
+  render: (args) => (
+    <Button {...args} onClick={() => window.alert('click event fired')} data-testid="default-button">
+      Button
+    </Button>
+  ),
+  play: async () => {
+    // Use a simple global spy for window.alert
+    const originalAlert = window.alert
+    let alertCalled = false
+    window.alert = (msg) => {
+      if (msg === 'click event fired') alertCalled = true
+    }
+    const button = screen.getByTestId('default-button')
+    await userEvent.click(button)
+    expect(alertCalled).toBe(true)
+    window.alert = originalAlert
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Button variant="default">Default</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="outlineInvert">Outline Invert</Button>
+      <Button variant="extraGhost">Extra Ghost</Button>
+      <Button variant="extraGhost2">Extra Ghost 2</Button>
+      <Button variant="neutral">Neutral</Button>
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      <Button size="xs">Extra Small</Button>
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xs2">Extra Small 2</Button>
+      <Button size="icon">Icon</Button>
+      <Button size="iconSm">Icon Small</Button>
+      <Button size="smLow">Small Low</Button>
+      <Button size="max">Max</Button>
+    </div>
+  ),
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <Button>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <circle cx="12" cy="12" r="10" />
+        <path d="m15 9-6 6" />
+        <path d="m9 9 6 6" />
+      </svg>
+      With Icon
+    </Button>
+  ),
+}
+
+export const AsChild: Story = {
+  render: () => (
+    <Button asChild>
+      <a href="https://example.com" target="_blank" rel="noreferrer">
+        Link Button
+      </a>
+    </Button>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+  render: (args) => (
+    <Button {...args} onClick={() => window.alert('click event fired')} data-testid="disabled-button" />
+  ),
+  play: async () => {
+    // Use a simple global spy for window.alert
+    const originalAlert = window.alert
+    let alertCalled = false
+    window.alert = (msg) => {
+      if (msg === 'click event fired') alertCalled = true
+    }
+    const disabledButton = screen.getByTestId('disabled-button')
+
+    await expect(disabledButton).toHaveAttribute('disabled')
+    await expect(disabledButton).toHaveStyle('pointer-events: none')
+
+    await userEvent.click(disabledButton, { pointerEventsCheck: 0 })
+    expect(alertCalled).toBe(false)
+    window.alert = originalAlert
+  },
+}

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

@@ -0,0 +1,68 @@
+import { Slot } from '@radix-ui/react-slot'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md cursor-pointer text-base font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outlineInvert:
+          'border border-muted-foreground bg-background shadow-xs text-muted-foreground hover:bg-muted-foreground hover:text-background dark:bg-input/30 dark:border-input dark:hover:bg-input/70 dark:hover:text-foreground/80',
+        extraGhost: 'bg-none hover:text-accent-foreground text-muted-foreground hover:text-foreground',
+        extraGhost2: 'bg-none text-foreground hover:text-muted-foreground',
+        neutral: 'bg-background',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 px-6 has-[>svg]:px-4',
+        xs: 'py-1 px-2',
+        xs2: 'px-2 py-0.5',
+        icon: 'size-9',
+        iconSm: 'size-7.5',
+        smLow: 'h-7.5 gap-1.5 px-3 has-[>svg]:px-2.5',
+        max: 'h-full w-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+export type ButtonProps = React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+    /**
+     * E2E test_id to identify the button.
+     */
+    __e2e_test_id__?: string
+  }
+
+function Button({ className, variant, size, asChild = false, __e2e_test_id__, ...props }: ButtonProps) {
+  const Comp = asChild ? Slot : 'button'
+
+  return (
+    <Comp
+      data-slot="button"
+      {...props}
+      data-test-id={__e2e_test_id__}
+      className={cn(buttonVariants({ variant, size, className }))}
+    />
+  )
+}
+
+export { Button, buttonVariants }

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

@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Calendar } from './calendar'
+import { expect, userEvent, screen } from 'storybook/test'
+import { useState } from 'react'
+
+const meta = {
+  title: 'Calendar',
+  component: Calendar,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    buttonVariant: {
+      control: 'select',
+      options: [
+        undefined,
+        'default',
+        'secondary',
+        'destructive',
+        'outline',
+        'ghost',
+        'link',
+        'outlineInvert',
+        'extraGhost',
+        'extraGhost2',
+        'neutral',
+      ],
+    },
+    showYearNavigation: {
+      control: 'boolean',
+    },
+    mode: {
+      control: 'select',
+      options: ['single', 'multiple', 'range'],
+    },
+    showOutsideDays: {
+      control: 'boolean',
+      defaultValue: true,
+    },
+    captionLayout: {
+      control: 'select',
+      options: ['label', 'dropdown', 'dropdown-months', 'dropdown-years'],
+      defaultValue: 'label',
+    },
+    formatters: {
+      control: 'object',
+    },
+    components: {
+      control: 'object',
+    },
+    disabled: {
+      control: 'object',
+    },
+    fromYear: {
+      control: 'number',
+    },
+    toYear: {
+      control: 'number',
+    },
+  },
+} satisfies Meta<typeof Calendar>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+type DateRange = {
+  from?: Date
+  to?: Date
+}
+
+export const Default: Story = {
+  args: {
+    mode: 'single',
+    showOutsideDays: true,
+    captionLayout: 'label',
+    formatters: {
+      // used by this Calendar (and merged with the built-in formatMonthDropdown)
+      formatMonthDropdown: (date: Date) => date.toLocaleString('en-US', { month: 'long' }), // "January", "February", ...
+
+      // typical DayPicker formatter names you can override:
+      formatWeekdayName: (date: Date) => date.toLocaleDateString('en-US', { weekday: 'short' }), // "Mon", "Tue", ...
+
+      formatDay: (date: Date) => date.toLocaleDateString('en-US', { day: 'numeric' }), // "01"
+    },
+  },
+  render: (args) => <Calendar {...args} data-testid="default-calendar" />,
+  play: async () => {
+    const calendar = screen.getByTestId('default-calendar')
+    const dayButton = calendar.querySelector('button[aria-label*="13"]') as HTMLElement
+    await userEvent.click(dayButton)
+    expect(dayButton).toHaveAttribute('data-selected-single', 'true')
+  },
+}
+
+export const Multiple: Story = {
+  args: {
+    mode: 'multiple',
+  },
+  render: (args) => <Calendar {...args} data-testid="default-calendar" />,
+}
+
+function RangeCalendarStory(args: any) {
+  const [range, setRange] = useState<DateRange | undefined>(undefined)
+  return (
+    <Calendar
+      mode="range"
+      buttonVariant={args.buttonVariant}
+      data-testid="default-calendar"
+      selected={range?.from && range?.to ? { from: range.from, to: range.to } : undefined}
+      onSelect={(value: { from?: Date; to?: Date } | undefined) => {
+        if (value?.from == null) {
+          setRange(undefined)
+        } else {
+          const newRange = { from: value.from, to: value.to ?? value.from }
+          setRange(newRange)
+        }
+      }}
+    />
+  )
+}
+export const RangeWithAlternatingSelection: Story = {
+  render: (args) => <RangeCalendarStory {...args} />,
+}
+
+export const WithDisabledRange: Story = {
+  render: () => {
+    return (
+      <Calendar
+        disabled={(date) => date > new Date() || date < new Date(new Date().setMonth(new Date().getMonth() - 3))}
+        data-testid="default-calendar"
+      />
+    )
+  },
+  play: async () => {
+    const calendar = screen.getByTestId('default-calendar')
+    const today = new Date()
+    const future = new Date(today)
+    future.setDate(today.getDate() + 2)
+    const futureDate = future.toLocaleDateString()
+    // Use data-day attribute to find the specific button for the future date
+    // This is more reliable than using aria-label with partial string matching
+    const disabledDayButton = calendar.querySelector(`button[data-day="${futureDate}"]`) as HTMLElement
+
+    // Previous approach had a bug: aria-label*="${dayNumber}" would match any date containing that number
+    // For example, dayNumber=25 would incorrectly match "September 28th 2025" because it contains "25"
+    // const dayNumber = future.getDate()
+    // const disabledDayButton = calendar.querySelector(`button[aria-label*="${dayNumber}"]`) as HTMLElement
+    await expect(disabledDayButton).toHaveAttribute('disabled')
+    await userEvent.click(disabledDayButton, { pointerEventsCheck: 0 })
+    await expect(disabledDayButton).toHaveAttribute('disabled') // still disabled after click
+  },
+}
+
+export const WithDropdowns: Story = {
+  render: () => {
+    return <Calendar data-testid="default-calendar" captionLayout="dropdown" />
+  },
+}