@postxl/generators 1.1.0 → 1.2.0

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

@@ -1,67 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,68 +0,0 @@
-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

@@ -1,160 +0,0 @@
-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" />
-  },
-}