@postxl/generators 0.2.2

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

@@ -0,0 +1,68 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+function RadioGroup({
+  className,
+  __e2e_test_id__,
+  ...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root> & { __e2e_test_id__?: string }) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-test-id={__e2e_test_id__}
+      data-slot="radio-group"
+      className={cn('grid gap-3', className)}
+      {...props}
+    />
+  )
+}
+
+const radioGroupVariants = cva(
+  'cursor-pointer border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      circleVariant: {
+        default: '',
+        grayThick: 'aria-checked:border-muted-foreground aria-checked:border-2',
+      },
+      size: {
+        default: 'size-4',
+        sm: 'size-3.5',
+      },
+    },
+    defaultVariants: {
+      circleVariant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> &
+  VariantProps<typeof radioGroupVariants>
+
+function RadioGroupItem({ className, circleVariant, size, ...props }: RadioGroupItemProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(radioGroupVariants({ circleVariant, size, className }))}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="relative flex items-center justify-center"
+      >
+        <div
+          className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full ${
+            circleVariant === 'grayThick' ? 'bg-muted-foreground' : 'bg-primary'
+          }
+          ${size === 'sm' ? 'size-2' : 'size-2.25'}`}
+        />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+}
+
+export { RadioGroup, RadioGroupItem }

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

@@ -0,0 +1,73 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizeable'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { ComponentProps } from 'react'
+
+type ResizableHandleProps = ComponentProps<typeof ResizableHandle>
+type ResizablePanelGroupProps = ComponentProps<typeof ResizablePanelGroup>
+
+// Define custom args that aren't component props
+type StoryArgs = ResizableHandleProps & ResizablePanelGroupProps
+
+const meta = {
+  title: 'Resizeable',
+  tags: ['autodocs'],
+  component: ResizablePanelGroup,
+  argTypes: {
+    withHandle: {
+      control: 'boolean',
+      defaultValue: true,
+      description: 'Whether to show the handle',
+      table: {
+        category: 'Props of "ResizableHandle"',
+      },
+    },
+    direction: {
+      control: 'radio',
+      options: ['horizontal', 'vertical'],
+      defaultValue: 'horizontal',
+      description: 'The direction of the resizeable panels',
+      table: {
+        category: 'Props of "ResizablePanelGroup"',
+      },
+    },
+  },
+} satisfies Meta<StoryArgs>
+
+export default meta
+
+export const Default: StoryObj<StoryArgs> = {
+  args: {
+    withHandle: true,
+    direction: 'horizontal',
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <ResizablePanelGroup
+        direction={args.direction}
+        className="max-w-md rounded-lg border md:min-w-[450px] min-h-[300px]"
+      >
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle withHandle={args.withHandle} />
+        <ResizablePanel defaultSize={50}>
+          <ResizablePanelGroup direction={'horizontal'}>
+            <ResizablePanel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle withHandle={args.withHandle} />
+            <ResizablePanel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  ),
+}

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

@@ -0,0 +1,38 @@
+import { DragHandleDots2Icon } from '@radix-ui/react-icons'
+
+import * as ResizablePrimitive from 'react-resizable-panels'
+
+import { cn } from '@lib/utils'
+
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

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

@@ -0,0 +1,55 @@
+import { ScrollArea, ScrollBar } from './scroll-area'
+import { Meta, type StoryObj } from '@storybook/react-vite'
+
+const meta: Meta<typeof ScrollArea> = {
+  title: 'Scroll Area',
+  component: ScrollArea,
+  tags: ['autodocs'],
+}
+export default meta
+
+type Artwork = {
+  artist: string
+  art: string
+}
+
+const works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <ScrollArea className="w-[400px] whitespace-nowrap rounded-md border">
+        <div className="flex w-max space-x-4 p-4 ">
+          {works.map((artwork) => (
+            <figure key={artwork.artist} className="shrink-0">
+              <div className="overflow-hidden rounded-md">
+                <img
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  className="aspect-[3/4] h-[200px] object-cover"
+                />
+              </div>
+              <figcaption className="pt-2 text-xs text-muted-foreground">
+                Photo by <span className="font-semibold text-foreground">{artwork.artist}</span>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </div>
+  ),
+}

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

@@ -0,0 +1,39 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn('relative overflow-hidden', className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

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

@@ -0,0 +1,297 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect, userEvent, screen } from 'storybook/test'
+import { useState } from 'react'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './select'
+
+const meta = {
+  title: 'Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+    selectTriggerSize: {
+      control: 'select',
+      options: ['default', 'xs', 'sm', 'lg'],
+    },
+    selectTriggerStyle: {
+      control: 'select',
+      options: ['default', 'simple'],
+    },
+    selectItemType: {
+      control: 'select',
+      options: ['default', 'deselect'],
+    },
+    selectItemSpacing: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  args: {
+    disabled: false,
+    selectTriggerSize: 'default',
+    selectTriggerStyle: 'default',
+    selectItemType: 'default',
+    selectItemSpacing: 'md',
+  },
+}
+export default meta
+
+interface SelectStoryArgs {
+  disabled?: boolean
+  selectTriggerSize?: 'default' | 'xs' | 'sm' | 'lg'
+  selectTriggerStyle?: 'default' | 'simple'
+  selectItemType?: 'default' | 'deselect'
+  selectItemSpacing?: 'sm' | 'md' | 'lg'
+}
+
+type Story = StoryObj<SelectStoryArgs>
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'orange', label: 'Orange' },
+  { value: 'grape', label: 'Grape' },
+  { value: 'watermelon', label: 'Watermelon' },
+]
+
+export const Default: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <SelectTrigger
+        className="w-[200px]"
+        data-testid="select-trigger"
+        size={args.selectTriggerSize}
+        variant={args.selectTriggerStyle}
+      >
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem
+            key={option.value}
+            value={option.value}
+            spacing={args.selectItemSpacing}
+            type={args.selectItemType}
+          >
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+  play: async () => {
+    const selectTrigger = screen.getByTestId('select-trigger')
+
+    await userEvent.click(selectTrigger)
+    // Wait for dropdown to appear
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    // Check if dropdown content is visible
+    const dropdown = document.querySelector('[role="listbox"]')
+    await expect(dropdown).toBeInTheDocument()
+  },
+}
+
+export const TriggerStyles: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      {meta.argTypes.selectTriggerStyle.options.map((style) => (
+        <Select key={style}>
+          <SelectTrigger className="w-[200px]" variant={style as SelectStoryArgs['selectTriggerStyle']}>
+            <SelectValue placeholder={style.charAt(0).toUpperCase() + style.slice(1)} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+}
+
+export const TriggerSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      {meta.argTypes.selectTriggerSize.options.map((size) => (
+        <Select key={size}>
+          <SelectTrigger className="w-[200px]" size={size as SelectStoryArgs['selectTriggerSize']}>
+            <SelectValue placeholder={size} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+}
+
+export const ItemSpacings: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2 items-center">
+      {meta.argTypes.selectItemSpacing.options.map((spacing) => (
+        <Select key={spacing}>
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder={spacing} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                spacing={spacing as SelectStoryArgs['selectItemSpacing']}
+              >
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      ))}
+    </div>
+  ),
+}
+
+export const WithDeselectOption: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null)
+    return (
+      <Select value={selected ?? ''} onValueChange={(val) => setSelected(val === 'deselect' ? null : val)}>
+        <SelectTrigger data-testid="select-trigger" className="w-[200px]">
+          <SelectValue placeholder="Select a fruit" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem type="deselect" value="deselect">
+            None
+          </SelectItem>
+          {options.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  },
+  play: async () => {
+    const selectTrigger = screen.getByTestId('select-trigger')
+    expect(selectTrigger).toHaveTextContent('Select a fruit')
+    // Open select
+    await userEvent.click(selectTrigger)
+    // Select "Banana"
+    const bananaOption = screen.getByText('Banana')
+    await userEvent.click(bananaOption)
+    expect(selectTrigger).toHaveTextContent('Banana')
+    // Open dropdown and select "None" (deselect)
+    await userEvent.click(selectTrigger)
+    const noneOption = screen.getByText('None')
+    await userEvent.click(noneOption)
+    expect(selectTrigger).toHaveTextContent('Select a fruit')
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <Select disabled>
+      <SelectTrigger className="w-[200px]" data-testid="disabled-select">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroupsDefaultAndDisabledOption: Story = {
+  render: () => (
+    <Select defaultValue="banana">
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Citrus Group</SelectLabel>
+          <SelectItem value="orange">Orange</SelectItem>
+          <SelectItem value="lemon">Lemon</SelectItem>
+          <SelectItem value="lime" disabled>
+            Lime (Unavailable)
+          </SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectItem value="banana">Banana (Default)</SelectItem>
+        <SelectItem value="watermelon">Watermelon</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  name: 'With Groups, Default and Disabled Option',
+}
+
+export const InteractiveTest: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]" data-testid="select-trigger">
+        <SelectValue placeholder="Select a fruit" data-testid="select-value" />
+      </SelectTrigger>
+      <SelectContent>
+        {options.map((option) => (
+          <SelectItem key={option.value} value={option.value} data-testid={`option-${option.value}`}>
+            {option.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  ),
+  play: async () => {
+    const selectTrigger = screen.getByTestId('select-trigger')
+    expect(selectTrigger).toHaveTextContent('Select a fruit')
+    await userEvent.click(selectTrigger)
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const dropdown = document.querySelector('[role="listbox"]')
+    expect(dropdown).toBeInTheDocument()
+
+    const bananaOption = screen.getByText('Banana')
+    await userEvent.click(bananaOption)
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    expect(selectTrigger).toHaveTextContent('Banana')
+
+    await userEvent.click(selectTrigger)
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    const grapeOption = screen.getByText('Grape')
+    await userEvent.click(grapeOption)
+
+    await new Promise((resolve) => setTimeout(resolve, 100))
+
+    expect(selectTrigger).toHaveTextContent('Grape')
+  },
+}