@postxl/generators 0.2.2

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

@@ -0,0 +1,293 @@
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DoubleArrowLeftIcon,
+  DoubleArrowRightIcon,
+} from '@radix-ui/react-icons'
+
+import * as React from 'react'
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
+
+import { Button, buttonVariants } from '@components/ui/button/button'
+import { cn } from '@lib/utils'
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  showYearNavigation = false,
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant']
+  showYearNavigation?: boolean
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  // Track last selected field for range mode
+  const [rangeSelectionStep, setRangeSelectionStep] = React.useState<'from' | 'to'>('from')
+  // Custom onDayClick for range mode to make sure 'from' and 'to' are always set alternatingly
+  const handleDayClick = React.useCallback(
+    (day: Date, modifiers: any, e: React.MouseEvent<Element>) => {
+      if (props.mode === 'range') {
+        const range = props.selected as { from?: Date; to?: Date } | undefined
+
+        // Always start a new range when selecting 'from'
+        if (rangeSelectionStep === 'from') {
+          props.onSelect?.({ from: day, to: undefined }, day, modifiers, e)
+          setRangeSelectionStep('to')
+          return
+        }
+
+        // Only set 'to' if 'from' is set and not the same day
+        if (rangeSelectionStep === 'to') {
+          if (range?.from && day.getTime() !== range.from.getTime()) {
+            props.onSelect?.({ from: range.from, to: day }, day, modifiers, e)
+            setRangeSelectionStep('from')
+          }
+          return
+        }
+      } else {
+        props.onDayClick?.(day, modifiers, e)
+      }
+    },
+    [props, rangeSelectionStep],
+  )
+
+  // default year range if caption layout has year dropdown: 100 years past and 100 years future unless user overrides
+  // with the dropdown a range is required. if we don't set it manually it will be -100 years until now which is impractical for future events
+  let fromMonth: Date | undefined
+  let toMonth: Date | undefined
+  if (captionLayout === 'dropdown-years' || captionLayout === 'dropdown') {
+    const nowYear = new Date().getFullYear()
+    fromMonth = props.startMonth ?? new Date(nowYear - 100, 0)
+    toMonth = props.endMonth ?? new Date(nowYear + 100, 11)
+  }
+
+  // controlled month state so we can programmatically change months (and years)
+  const [currentMonth, setCurrentMonth] = React.useState<Date>(props.defaultMonth ?? props.month ?? new Date())
+  React.useEffect(() => {
+    if (props.month) {
+      setCurrentMonth(props.month)
+    }
+  }, [props.month])
+
+  const addMonths = (date: Date, months: number) => {
+    const d = new Date(date)
+    d.setMonth(d.getMonth() + months)
+    if (fromMonth && d < fromMonth) {
+      return fromMonth
+    }
+    if (toMonth && d > toMonth) {
+      return toMonth
+    }
+    return d
+  }
+
+  return (
+    <DayPicker
+      month={currentMonth}
+      onMonthChange={(m) => {
+        setCurrentMonth(m)
+        props.onMonthChange?.(m)
+      }}
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn('flex gap-4 flex-col md:flex-row relative', defaultClassNames.months),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn('flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn('absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn('select-none w-(--cell-size)', defaultClassNames.week_number_header),
+        week_number: cn('text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn('rounded-l-md bg-accent', defaultClassNames.range_start),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      // prefer startMonth/toMonth instead of deprecated fromYear/toYear
+      startMonth={fromMonth}
+      endMonth={toMonth}
+      components={{
+        // custom navigation: to add double-chevron year skip buttons
+        Nav: ({ className }) => (
+          <div className={cn('mt-0.5', className)}>
+            <div className="flex items-center">
+              {showYearNavigation && (
+                <Button
+                  aria-label="previous year"
+                  variant={buttonVariant}
+                  size="iconSm"
+                  disabled={fromMonth && currentMonth <= fromMonth}
+                  className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
+                  onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), -12))}
+                >
+                  <DoubleArrowLeftIcon className="" />
+                </Button>
+              )}
+              <Button
+                aria-label="previous month"
+                variant={buttonVariant}
+                size="iconSm"
+                disabled={fromMonth && currentMonth <= fromMonth}
+                className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
+                onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), -1))}
+              >
+                <ChevronLeftIcon />
+              </Button>
+            </div>
+
+            <div className="flex items-center">
+              <Button
+                aria-label="next month"
+                variant={buttonVariant}
+                size="iconSm"
+                disabled={toMonth && currentMonth >= toMonth}
+                className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
+                onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), 1))}
+              >
+                <ChevronRightIcon />
+              </Button>
+              {showYearNavigation && (
+                <Button
+                  aria-label="next year"
+                  variant={buttonVariant}
+                  size="iconSm"
+                  disabled={toMonth && currentMonth >= toMonth}
+                  className={captionLayout === 'dropdown' ? 'size-6.5' : ''}
+                  onClick={() => setCurrentMonth((m) => addMonths(m ?? new Date(), 12))}
+                >
+                  <DoubleArrowRightIcon />
+                </Button>
+              )}
+            </div>
+          </div>
+        ),
+        // prettier-ignore
+        Root: ({ className, rootRef, ...props }) => {     //NOSONAR - default shadeCn
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />
+        },
+        // prettier-ignore
+        Chevron: ({ className, orientation, ...props }) => {      //NOSONAR - default shadeCn
+          if (orientation === 'left') {
+            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+          }
+
+          if (orientation === 'right') {
+            return <ChevronRightIcon className={cn('size-4', className)} {...props} />
+          }
+
+          return <ChevronDownIcon className={cn('size-4', className)} {...props} />
+        },
+        DayButton: CalendarDayButton,
+        // prettier-ignore
+        WeekNumber: ({ children, ...props }) => {     //NOSONAR - default shadeCn
+          return (
+            <td {...props}>
+              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+            </td>
+          )
+        },
+        ...components,
+      }}
+      onDayClick={handleDayClick}
+      {...props}
+    />
+  )
+}
+
+function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef<HTMLButtonElement>(null)
+  React.useEffect(() => {
+    if (modifiers.focused) {
+      ref.current?.focus()
+    }
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Calendar, CalendarDayButton }

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

@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card'
+import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
+import { cn } from '@lib/utils'
+import { Button } from '@components/ui/button/button'
+
+const meta = {
+  title: 'Card',
+  component: Card,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The Card component is used to group related information in a single container.This means any other component can be placed inside the Card component.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Card className={cn('w-[380px]')}>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>You have 3 unread messages.</CardDescription>
+        </CardHeader>
+        <CardContent className="grid gap-4">
+          <div className=" flex items-center space-x-4 rounded-md border p-4">
+            <BellIcon />
+            <div className="flex-1 space-y-1">
+              <p className="text-sm font-medium leading-none">Push Notifications</p>
+              <p className="text-sm text-muted-foreground">Send notifications to device.</p>
+            </div>
+          </div>
+          <div>
+            {notifications.map((notification, index) => (
+              <div key={index} className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+                <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">{notification.title}</p>
+                  <p className="text-sm text-muted-foreground">{notification.description}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button className="w-full">
+            <CheckIcon className="mr-2 h-4 w-4" /> Mark all as read
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}
+
+// DATA ------------------------------------------------------------------------
+
+const notifications = [
+  {
+    title: 'Your call has been confirmed.',
+    description: '1 hour ago',
+  },
+  {
+    title: 'You have a new message!',
+    description: '1 hour ago',
+  },
+  {
+    title: 'Your subscription is expiring soon!',
+    description: '2 hours ago',
+  },
+]

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

@@ -0,0 +1,45 @@
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn('rounded-xl border bg-card text-card-foreground shadow', className)} {...props} />
+))
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  ),
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, children, ...props }, ref) => (
+    <h3 ref={ref} className={cn('font-semibold leading-none tracking-tight', className)} {...props}>
+      {children}
+    </h3>
+  ),
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  ),
+)
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />,
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  ),
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

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

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './card-hover'
+
+const meta = {
+  title: 'Hover Card',
+  component: HoverCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof HoverCard>
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'The Hover Card component displays additional information when hovering over an element.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center">
+      <HoverCard>
+        <HoverCardTrigger>Hover</HoverCardTrigger>
+        <HoverCardContent>The React Framework – created and maintained by @vercel.</HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+}

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

@@ -0,0 +1,28 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className,
+    )}
+    {...props}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }

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

@@ -0,0 +1,154 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  Carousel,
+  CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  CarouselProps,
+} from './carousel'
+import { Card, CardContent } from '@components/ui/card/card'
+import { useEffect, useState } from 'react'
+
+const meta = {
+  title: 'Carousel',
+  component: Carousel,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+    },
+  },
+} satisfies Meta<typeof Carousel>
+
+export default meta
+
+export const Default: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'The Carousel component displays a list of items that can be scrolled through.',
+      },
+    },
+  },
+  args: {
+    orientation: 'horizontal',
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Carousel {...args} className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index} className="basis-1/3">
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+}
+
+function CarouselWithApi() {
+  const [api, setApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState(0)
+  const [count, setCount] = useState(0)
+
+  useEffect(() => {
+    if (!api) {
+      return
+    }
+
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
+
+    api.on('select', () => {
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
+
+  return (
+    <div className="mx-auto max-w-xs">
+      <Carousel setApi={setApi} className="w-full max-w-xs">
+        <CarouselContent>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <Card>
+                <CardContent className="flex aspect-square items-center justify-center p-6">
+                  <span className="text-4xl font-semibold">{index + 1}</span>
+                </CardContent>
+              </Card>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+      <div className="py-2 text-center text-sm text-muted-foreground">
+        Slide {current} of {count}
+      </div>
+    </div>
+  )
+}
+
+export const WithApi: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Carousel with API integration showing current slide counter. The setApi prop allows you to access carousel methods and state for custom controls and indicators.',
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <CarouselWithApi />
+    </div>
+  ),
+}
+
+export const Vertical: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Vertical orientation carousel that scrolls up and down instead of left and right. Perfect for vertical content layouts or space-constrained horizontal designs.',
+      },
+    },
+  },
+  args: {
+    orientation: 'vertical',
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <Carousel {...args} className="w-full max-w-xs">
+        <CarouselContent className="h-[200px]">
+          {Array.from({ length: 5 }).map((_, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious />
+        <CarouselNext />
+      </Carousel>
+    </div>
+  ),
+}