@postxl/generators 1.1.1 → 1.2.0

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

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

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

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

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

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

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

@@ -1,227 +0,0 @@
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'
-
-import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react'
-import * as React from 'react'
-import { useMemo } from 'react'
-
-import { Button } from '@components/ui/button/button'
-import { cn } from '@lib/utils'
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: 'horizontal' | 'vertical'
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />')
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  ({ orientation = 'horizontal', opts, setApi, plugins, className, children, ...props }, ref) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
-      },
-      plugins,
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback(() => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [api])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext],
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect()
-      api.on('reInit', onSelect)
-      api.on('select', onSelect)
-
-      return () => {
-        api?.off('select', onSelect)
-      }
-    }, [api, onSelect])
-
-    const memoizedValue = useMemo(
-      () => ({
-        carouselRef,
-        api: api,
-        opts,
-        orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext,
-      }),
-      [api, canScrollNext, canScrollPrev, carouselRef, opts, orientation, scrollNext, scrollPrev],
-    )
-
-    return (
-      <CarouselContext.Provider value={memoizedValue}>
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn('relative', className)}
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  },
-)
-Carousel.displayName = 'Carousel'
-
-const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { carouselRef, orientation } = useCarousel()
-
-    return (
-      <div ref={carouselRef} className="overflow-hidden">
-        <div
-          ref={ref}
-          className={cn('flex', orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col', className)}
-          {...props}
-        />
-      </div>
-    )
-  },
-)
-CarouselContent.displayName = 'CarouselContent'
-
-const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    const { orientation } = useCarousel()
-
-    return (
-      <div
-        ref={ref}
-        aria-roledescription="slide"
-        className={cn('min-w-0 shrink-0 grow-0 basis-full', orientation === 'horizontal' ? 'pl-4' : 'pt-4', className)}
-        {...props}
-      />
-    )
-  },
-)
-CarouselItem.displayName = 'CarouselItem'
-
-const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-    const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          'absolute  h-8 w-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-left-12 top-1/2 -translate-y-1/2'
-            : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-          className,
-        )}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        {...props}
-      >
-        <ArrowLeftIcon className="h-4 w-4" />
-        <span className="sr-only">Previous slide</span>
-      </Button>
-    )
-  },
-)
-CarouselPrevious.displayName = 'CarouselPrevious'
-
-const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  ({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-    const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-    return (
-      <Button
-        ref={ref}
-        variant={variant}
-        size={size}
-        className={cn(
-          'absolute h-8 w-8 rounded-full',
-          orientation === 'horizontal'
-            ? '-right-12 top-1/2 -translate-y-1/2'
-            : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-          className,
-        )}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        {...props}
-      >
-        <ArrowRightIcon className="h-4 w-4" />
-        <span className="sr-only">Next slide</span>
-      </Button>
-    )
-  },
-)
-CarouselNext.displayName = 'CarouselNext'
-
-export { type CarouselApi, type CarouselProps, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }

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

@@ -1,106 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Checkbox } from './checkbox'
-import { expect, userEvent, screen } from 'storybook/test'
-
-const meta = {
-  title: 'Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'simple', 'iconSolo'],
-    },
-    checkboxSize: {
-      control: 'select',
-      options: ['default', 'sm', 'lg'],
-    },
-    checkIcon: {
-      control: 'select',
-      options: ['default', 'check', 'square'],
-    },
-    iconStyle: {
-      control: 'select',
-      options: ['default', 'simple', 'solo'],
-    },
-  },
-} satisfies Meta<typeof Checkbox>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { variant: 'default', checkboxSize: 'default', checkIcon: 'default', iconStyle: 'default' },
-  render: (args) => <Checkbox {...args} defaultChecked={true} label="Default" id="default-cb" />,
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Checkbox defaultChecked={true} label="Default" variant="default" id="default-variant" />
-      <Checkbox
-        defaultChecked={true}
-        label="Simple (combined with iconStyle=simple)"
-        variant="simple"
-        iconStyle="simple"
-        id="simple-variant"
-      />
-      <Checkbox
-        defaultChecked={true}
-        label="IconSolo (combined with iconStyle=solo)"
-        variant="iconSolo"
-        iconStyle="solo"
-        id="icon-solo-variant"
-      />
-    </div>
-  ),
-}
-
-export const IconStyles: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Checkbox defaultChecked={true} label="Default" iconStyle="default" id="default-icon-style" />
-      <Checkbox defaultChecked={true} label="Simple" iconStyle="simple" id="simple-icon-style" />
-      <Checkbox defaultChecked={true} label="Solo" iconStyle="solo" />
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Checkbox defaultChecked={true} label="Small" checkboxSize="sm" />
-      <Checkbox defaultChecked={true} label="Default" checkboxSize="default" id="default-size" />
-      <Checkbox defaultChecked={true} label="Large" checkboxSize="lg" />
-    </div>
-  ),
-}
-
-export const CheckIcons: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <Checkbox defaultChecked={true} label="Default" checkIcon="default" id="default-icon" />
-      <Checkbox defaultChecked={true} label="Check" checkIcon="check" />
-      <Checkbox defaultChecked={true} label="Square" checkIcon="square" />
-    </div>
-  ),
-}
-
-export const Disabled: Story = {
-  args: {
-    label: 'Disabled',
-    disabled: true,
-  },
-  render: (args) => <Checkbox {...args} data-testid="disabled-checkbox" />,
-  play: async () => {
-    const disabledCheckbox = screen.getByTestId('disabled-checkbox')
-
-    await expect(disabledCheckbox).toHaveAttribute('disabled')
-
-    await userEvent.click(disabledCheckbox, { pointerEventsCheck: 0 })
-  },
-}