@postxl/generators 1.1.1 → 1.2.0

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

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

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

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

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

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

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