@postxl/generators 1.1.0 → 1.2.0

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

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

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

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

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

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

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