@postxl/generators 0.2.2

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { DatePickerDemo } from './date-picker'
+import { HTMLAttributes, useState } from 'react'
+import { DateRange } from 'react-day-picker'
+import { addDays, format } from 'date-fns'
+
+import { cn } from '@lib/utils'
+import { Button } from '@components/ui/button/button'
+import { Calendar } from '@components/ui/calendar/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
+import { CalendarIcon } from '@radix-ui/react-icons'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@components/ui/select/select'
+
+const meta = {
+  title: 'Date Picker',
+  component: DatePickerDemo,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A date picker component with range and presets using the calendar, popover and select components.',
+      },
+    },
+  },
+} satisfies Meta<typeof DatePickerDemo>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A basic date picker component for single date selection.',
+      },
+    },
+  },
+  render: () => (
+    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
+      <DatePickerDemo />
+    </div>
+  ),
+}
+
+const DateRangePickerExample = ({ className }: HTMLAttributes<HTMLDivElement>) => {
+  const [date, setDate] = useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  })
+
+  return (
+    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
+      <div className={cn('grid gap-2', className)}>
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              id="date"
+              variant={'outline'}
+              className={cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground')}
+            >
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              {date?.from ? (
+                date.to ? (
+                  <>
+                    {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+                  </>
+                ) : (
+                  format(date.from, 'LLL dd, y')
+                )
+              ) : (
+                <span>Pick a date</span>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-0" align="start">
+            <Calendar
+              initialFocus
+              mode="range"
+              defaultMonth={date?.from}
+              selected={date}
+              onSelect={setDate}
+              numberOfMonths={2}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  )
+}
+
+export const DateRangePicker: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'A date picker that allows selecting a date range with a dual-month calendar view.',
+      },
+    },
+  },
+  render: () => <DateRangePickerExample />,
+}
+
+const DatePickerWithPresetsExample = () => {
+  const [presetDate, setPresetDate] = useState<Date>()
+
+  return (
+    <div className="preview flex min-h-[350px] w-full justify-center p-10 items-center">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            variant={'outline'}
+            className={cn('w-[240px] justify-start text-left font-normal', !presetDate && 'text-muted-foreground')}
+          >
+            <CalendarIcon className="mr-2 h-4 w-4" />
+            {presetDate ? format(presetDate, 'PPP') : <span>Pick a date</span>}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="flex w-auto flex-col space-y-2 p-2">
+          <Select onValueChange={(value) => setPresetDate(addDays(new Date(), parseInt(value)))}>
+            <SelectTrigger>
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent position="popper">
+              <SelectItem value="0">Today</SelectItem>
+              <SelectItem value="1">Tomorrow</SelectItem>
+              <SelectItem value="3">In 3 days</SelectItem>
+              <SelectItem value="7">In a week</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="rounded-md border">
+            <Calendar mode="single" selected={presetDate} onSelect={setPresetDate} />
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
+
+export const WithPresets: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A date picker with preset options (Today, Tomorrow, In 3 days, In a week) and a calendar for custom selection.',
+      },
+    },
+  },
+  render: () => <DatePickerWithPresetsExample />,
+}

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

@@ -0,0 +1,30 @@
+import { CalendarIcon } from '@radix-ui/react-icons'
+
+import { format } from 'date-fns'
+import * as React from 'react'
+
+import { Button } from '@components/ui/button/button'
+import { Calendar } from '@components/ui/calendar/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
+import { cn } from '@lib/utils'
+
+export function DatePickerDemo() {
+  const [date, setDate] = React.useState<Date>()
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={'outline'}
+          className={cn('w-[240px] justify-start text-left font-normal', !date && 'text-muted-foreground')}
+        >
+          <CalendarIcon className="mr-2 h-4 w-4" />
+          {date ? format(date, 'PPP') : <span>Pick a date</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Calendar mode="single" selected={date} onSelect={setDate} initialFocus />
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, screen, waitFor } from 'storybook/test'
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+import { Button } from '@components/ui/button/button'
+
+const meta = {
+  title: 'Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+} satisfies Meta<typeof Dialog>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="outline">Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-[425px]" showCloseButton={true}>
+        <DialogHeader>
+          <DialogTitle>Dialog title</DialogTitle>
+          <DialogDescription>Dialog description</DialogDescription>
+        </DialogHeader>
+        <p className="border-1 border-(--discreet-border)">
+          some dialog content here
+          <br />
+          showCloseButton={'{true}'} on DialogContent for cross in top right corner
+        </p>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Footer (close button)</Button>
+          </DialogClose>
+          <Button>Footer (e.g. submit button)</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  ),
+  play: async () => {
+    await userEvent.click(screen.getByText('Open Dialog'))
+    await waitFor(
+      async () => {
+        const heading = await screen.findByRole('heading', { name: 'Dialog title' })
+        expect(heading).toBeVisible()
+      },
+      { timeout: 1000 },
+    )
+
+    await userEvent.click(screen.getByText('Footer (close button)'))
+
+    /* await waitFor(
+      () => {
+        expect(screen.queryByRole('heading', { name: 'Dialog title' })).not.toBeInTheDocument()
+      },
+      { timeout: 1000 },
+    ) */
+    await waitFor(
+      () => {
+        expect(screen.queryByText('Dialog title')).toBeNull()
+        expect(screen.getByText('Open Dialog')).toBeVisible()
+      },
+      { timeout: 1000 },
+    )
+  },
+}

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

@@ -0,0 +1,134 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+
+import * as React from 'react'
+
+import { Button } from '@components/ui/button/button'
+import { cn } from '@lib/utils'
+
+function Dialog(props: Readonly<React.ComponentProps<typeof DialogPrimitive.Root>>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger(props: Readonly<React.ComponentProps<typeof DialogPrimitive.Trigger>>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal(props: Readonly<React.ComponentProps<typeof DialogPrimitive.Portal>>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose(props: Readonly<React.ComponentProps<typeof DialogPrimitive.Close>>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50 dark:bg-gray-500/30',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  __e2e_test_id__,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+  __e2e_test_id__?: string
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal" data-test-id={__e2e_test_id__}>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            title="Close"
+            data-slot="dialog-close"
+            className="flex ring-offset-background focus:ring-transparent data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-3 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 cursor-pointer"
+          >
+            <Button
+              asChild
+              variant="outline"
+              size="icon"
+              className="size-6 rounded"
+              __e2e_test_id__={__e2e_test_id__ ? `${__e2e_test_id__}-close` : undefined}
+            >
+              <Cross2Icon />
+            </Button>
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

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

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from './drawer'
+import { Button } from '@components/ui/button/button'
+import { MinusIcon, PlusIcon } from '@radix-ui/react-icons'
+import { useState } from 'react'
+
+const meta = {
+  title: 'Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The Drawer is a panel that slides in from the edge of the screen. It can also be combined with other components to create more complex UIs e.g. combined with a dialog it can be used to render the drawer for mobile and dialog for desktop.',
+      },
+    },
+  },
+} satisfies Meta<typeof Drawer>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const DrawerExample = () => {
+  const [goal, setGoal] = useState(350)
+
+  function onClick(adjustment: number) {
+    setGoal(Math.max(200, Math.min(400, goal + adjustment)))
+  }
+
+  return (
+    <div className="flex items-center justify-center">
+      <Drawer>
+        <DrawerTrigger asChild>
+          <Button variant="outline">Open Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <DrawerHeader>
+              <DrawerTitle>Move Goal</DrawerTitle>
+              <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+            </DrawerHeader>
+            <div className="p-4 pb-0">
+              <div className="flex items-center justify-center space-x-2">
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-full"
+                  onClick={() => onClick(-10)}
+                  disabled={goal <= 200}
+                >
+                  <MinusIcon className="h-4 w-4" />
+                  <span className="sr-only">Decrease</span>
+                </Button>
+                <div className="flex-1 text-center">
+                  <div className="text-7xl font-bold tracking-tighter">{goal}</div>
+                  <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
+                </div>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  className="h-8 w-8 shrink-0 rounded-full"
+                  onClick={() => onClick(10)}
+                  disabled={goal >= 400}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  <span className="sr-only">Increase</span>
+                </Button>
+              </div>
+            </div>
+            <DrawerFooter>
+              <Button>Submit</Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Cancel</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}
+
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A basic drawer with interactive content that allows setting a daily activity goal with increment/decrement controls.',
+      },
+    },
+  },
+  render: () => <DrawerExample />,
+}

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

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+import { cn } from '@lib/utils'
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+)
+Drawer.displayName = 'Drawer'
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay ref={ref} className={cn('fixed inset-0 z-50 bg-black/80', className)} {...props} />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = 'DrawerContent'
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}