@postxl/generators 1.1.1 → 1.2.1

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

@@ -1,54 +0,0 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
-import { CheckIcon } from '@radix-ui/react-icons'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const checkboxVariants = cva(
-  'cursor-pointer peer border-input dark:bg-input/30 data-[state=checked]:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary',
-      },
-      size: {
-        default: 'size-4 [&_svg]:size-3.5',
-        sm: 'size-3.5 [&_svg]:size-3',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  },
-)
-
-type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> &
-  VariantProps<typeof checkboxVariants> & {
-    /**
-     * E2E test_id to identify the button.
-     */
-    __e2e_test_id__?: string
-  }
-
-function Checkbox({ className, variant, size, __e2e_test_id__, ...props }: CheckboxProps) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      className={cn(checkboxVariants({ variant, size, className }))}
-      {...props}
-      data-test-id={__e2e_test_id__}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        <CheckIcon />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  )
-}
-
-export { Checkbox, checkboxVariants }

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

@@ -1,52 +0,0 @@
-import { CaretSortIcon } from '@radix-ui/react-icons'
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-import { useState } from 'react'
-
-import { Button } from '@components/ui/button/button'
-
-import { Collapse, CollapseContent, CollapseTrigger } from './collapse'
-
-const meta = {
-  title: 'Collapse',
-  component: Collapse,
-  tags: ['autodocs'],
-} satisfies Meta<typeof Collapse>
-
-export default meta
-
-function CollapseExample() {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <div className="flex items-center justify-center border rounded p-4">
-      <Collapse open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
-        <div className="flex items-center justify-between space-x-4 px-4">
-          <h4 className="text-sm font-semibold">You have made 3 commits</h4>
-          <CollapseTrigger asChild>
-            <Button variant="ghost" size="sm">
-              <CaretSortIcon className="h-4 w-4" />
-              <span className="sr-only">Toggle</span>
-            </Button>
-          </CollapseTrigger>
-        </div>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/primitives</div>
-        <CollapseContent className="space-y-2">
-          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@radix-ui/colors</div>
-          <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">@stitches/react</div>
-        </CollapseContent>
-      </Collapse>
-    </div>
-  )
-}
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'The Collapse component allows you to show and hide content.',
-      },
-    },
-  },
-  render: () => <CollapseExample />,
-}

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

@@ -1,9 +0,0 @@
-import * as CollapsePrimitive from '@radix-ui/react-collapsible'
-
-const Collapse = CollapsePrimitive.Root
-
-const CollapseTrigger = CollapsePrimitive.CollapsibleTrigger
-
-const CollapseContent = CollapsePrimitive.CollapsibleContent
-
-export { Collapse, CollapseTrigger, CollapseContent }

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

@@ -1,207 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { ComboboxDemo } from './combobox'
-import { useState } from 'react'
-import { Button } from '@components/ui/button/button'
-import {
-  CommandPalette,
-  CommandPaletteEmpty,
-  CommandPaletteGroup,
-  CommandPaletteInput,
-  CommandPaletteItem,
-  CommandPaletteList,
-} from '@components/ui/command-palette/command-palette'
-import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from 'components/ui/dropdown-menu/dropdown-menu'
-import { DotsHorizontalIcon } from '@radix-ui/react-icons'
-
-// DATA ------------------------------------------------------------------------
-
-const labels = ['feature', 'bug', 'enhancement', 'documentation', 'design', 'question', 'maintenance']
-
-type Status = {
-  value: string
-  label: string
-}
-
-const statuses: Status[] = [
-  {
-    value: 'backlog',
-    label: 'Backlog',
-  },
-  {
-    value: 'todo',
-    label: 'Todo',
-  },
-  {
-    value: 'in progress',
-    label: 'In Progress',
-  },
-  {
-    value: 'done',
-    label: 'Done',
-  },
-  {
-    value: 'canceled',
-    label: 'Canceled',
-  },
-]
-
-const meta = {
-  title: 'Combobox',
-  component: ComboboxDemo,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ComboboxDemo>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A basic combobox component with search and selection functionality.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <ComboboxDemo />
-    </div>
-  ),
-}
-
-const PopoverComboboxExample = () => {
-  const [openPopover, setOpenPopover] = useState(false)
-  const [selectedStatus, setSelectedStatus] = useState<Status | null>(null)
-
-  return (
-    <div className="flex items-center space-x-4">
-      <p className="text-sm text-muted-foreground">Status</p>
-      <Popover open={openPopover} onOpenChange={setOpenPopover}>
-        <PopoverTrigger asChild>
-          <Button variant="outline" className="w-[150px] justify-start">
-            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent className="p-0" side="right" align="start">
-          <CommandPalette>
-            <CommandPaletteInput placeholder="Change status..." />
-            <CommandPaletteList>
-              <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-              <CommandPaletteGroup>
-                {statuses.map((status) => (
-                  <CommandPaletteItem
-                    key={status.value}
-                    value={status.value}
-                    onSelect={(value) => {
-                      setSelectedStatus(statuses.find((priority) => priority.value === value) || null)
-                      setOpenPopover(false)
-                    }}
-                  >
-                    {status.label}
-                  </CommandPaletteItem>
-                ))}
-              </CommandPaletteGroup>
-            </CommandPaletteList>
-          </CommandPalette>
-        </PopoverContent>
-      </Popover>
-    </div>
-  )
-}
-
-export const WithPopover: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A combobox implemented using a popover with status selection functionality.',
-      },
-    },
-  },
-  render: () => <PopoverComboboxExample />,
-}
-
-const DropdownMenuComboboxExample = () => {
-  const [label, setLabel] = useState('feature')
-  const [openDropdown, setOpenDropdown] = useState(false)
-
-  return (
-    <div className="flex items-center justify-center">
-      <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
-        <p className="text-sm font-medium leading-none">
-          <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">{label}</span>
-          <span className="text-muted-foreground">Create a new project</span>
-        </p>
-        <DropdownMenu open={openDropdown} onOpenChange={setOpenDropdown}>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm">
-              <DotsHorizontalIcon />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-[200px]">
-            <DropdownMenuLabel>Actions</DropdownMenuLabel>
-            <DropdownMenuGroup>
-              <DropdownMenuItem>Assign to...</DropdownMenuItem>
-              <DropdownMenuItem>Set due date...</DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>
-                <DropdownMenuSubContent className="p-0">
-                  <CommandPalette>
-                    <CommandPaletteInput placeholder="Filter label..." autoFocus={true} className="h-9" />
-                    <CommandPaletteList>
-                      <CommandPaletteEmpty>No label found.</CommandPaletteEmpty>
-                      <DropdownMenuGroup>
-                        {labels.map((label) => (
-                          <CommandPaletteItem
-                            key={label}
-                            value={label}
-                            onSelect={(value) => {
-                              setLabel(value)
-                              setOpenDropdown(false)
-                            }}
-                          >
-                            {label}
-                          </CommandPaletteItem>
-                        ))}
-                      </DropdownMenuGroup>
-                    </CommandPaletteList>
-                  </CommandPalette>
-                </DropdownMenuSubContent>
-              </DropdownMenuSub>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem className="text-red-600">
-                Delete
-                <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </div>
-  )
-}
-
-export const WithDropdownMenu: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A combobox integrated within a dropdown menu for label selection with project management actions.',
-      },
-    },
-  },
-  render: () => <DropdownMenuComboboxExample />,
-}

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

@@ -1,79 +0,0 @@
-import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'
-
-import * as React from 'react'
-
-import { Button } from '@components/ui/button/button'
-import {
-  CommandPalette,
-  CommandPaletteEmpty,
-  CommandPaletteGroup,
-  CommandPaletteInput,
-  CommandPaletteItem,
-  CommandPaletteList,
-} from '@components/ui/command-palette/command-palette'
-import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover/popover'
-import { cn } from '@lib/utils'
-
-const frameworks = [
-  {
-    value: 'next.js',
-    label: 'Next.js',
-  },
-  {
-    value: 'sveltekit',
-    label: 'SvelteKit',
-  },
-  {
-    value: 'nuxt.js',
-    label: 'Nuxt.js',
-  },
-  {
-    value: 'remix',
-    label: 'Remix',
-  },
-  {
-    value: 'astro',
-    label: 'Astro',
-  },
-]
-
-export function ComboboxDemo() {
-  const [open, setOpen] = React.useState(false)
-  const [value, setValue] = React.useState('')
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button variant="outline" aria-expanded={open} className="w-[200px] justify-between">
-          {value ? frameworks.find((framework) => framework.value === value)?.label : 'Select framework...'}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[200px] p-0">
-        <CommandPalette>
-          <CommandPaletteInput placeholder="Search framework..." className="h-9" />
-          <CommandPaletteList>
-            <CommandPaletteEmpty>No framework found.</CommandPaletteEmpty>
-            <CommandPaletteGroup>
-              {frameworks.map((framework) => (
-                <CommandPaletteItem
-                  key={framework.value}
-                  value={framework.value}
-                  onSelect={(currentValue) => {
-                    setValue(currentValue === value ? '' : currentValue)
-                    setOpen(false)
-                  }}
-                >
-                  {framework.label}
-                  <CheckIcon
-                    className={cn('ml-auto h-4 w-4', value === framework.value ? 'opacity-100' : 'opacity-0')}
-                  />
-                </CommandPaletteItem>
-              ))}
-            </CommandPaletteGroup>
-          </CommandPaletteList>
-        </CommandPalette>
-      </PopoverContent>
-    </Popover>
-  )
-}

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

@@ -1,186 +0,0 @@
-import type { StoryObj } from '@storybook/react-vite'
-
-import {
-  Command,
-  CommandEmpty,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandGroup,
-  CommandSeparator,
-  CommandShortcut,
-  CommandInputProps,
-} from './command'
-import { expect, userEvent, waitFor, screen } from 'storybook/test'
-import { useState } from 'storybook/preview-api'
-
-const CommandWithInput = ({
-  variant: inputVariant,
-  inputSize,
-  showContent = true,
-  searchValue,
-  setSearchValue,
-  placeholder,
-  ...rest
-}: CommandProps & { showContent?: boolean } & { searchValue?: string } & {
-  setSearchValue?: (val: string) => void
-}) => (
-  <Command {...rest} className="w-[250px] border">
-    <CommandInput
-      placeholder={placeholder}
-      variant={inputVariant}
-      inputSize={inputSize}
-      value={searchValue}
-      onValueChange={(val) => {
-        setSearchValue?.(val)
-      }}
-    />
-    {showContent && (
-      <CommandList>
-        <CommandEmpty>No results found.</CommandEmpty>
-        <CommandGroup heading="Category 1">
-          <CommandItem>
-            <span>Item</span>
-          </CommandItem>
-          <CommandItem disabled>
-            <span>Disabled item</span>
-          </CommandItem>
-        </CommandGroup>
-        <CommandSeparator />
-        <CommandGroup heading="Category 2">
-          <CommandItem>
-            <span>With shortcut</span>
-            <CommandShortcut>⌘P (only visually)</CommandShortcut>
-          </CommandItem>
-        </CommandGroup>
-      </CommandList>
-    )}
-  </Command>
-)
-
-const meta = {
-  title: 'Command',
-  component: CommandWithInput,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    inputVariant: {
-      control: 'select',
-      options: ['default', 'borderless'],
-    },
-    inputSize: {
-      control: 'select',
-      options: ['md', 'sm', 'lg'],
-    },
-  },
-}
-export default meta
-
-interface CommandStoryArgs {
-  inputVariant?: 'default' | 'borderless'
-  inputSize?: 'md' | 'sm' | 'lg'
-}
-
-type Story = StoryObj<CommandStoryArgs>
-
-type CommandProps = CommandInputProps &
-  React.ComponentProps<typeof Command> & {
-    inputVariant?: 'default' | 'borderless'
-  }
-
-export const Default: Story = {
-  render: (args) => (
-    <CommandWithInput
-      variant={args.inputVariant}
-      inputSize={args.inputSize}
-      placeholder="Command with border and w-[250px]"
-    />
-  ),
-}
-
-export const InputVariants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4">
-      <CommandWithInput variant="default" inputSize="md" placeholder="Command with border and w-[250px]" />
-      <CommandWithInput variant="borderless" inputSize="md" placeholder="Command with border and w-[250px]" />
-    </div>
-  ),
-}
-
-export const InputSizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4 items-center">
-      <CommandWithInput
-        variant="borderless"
-        inputSize="sm"
-        showContent={false}
-        placeholder="Command with border and w-[250px]"
-      />
-      <CommandWithInput
-        variant="borderless"
-        inputSize="md"
-        showContent={false}
-        placeholder="Command with border and w-[250px]"
-      />
-      <CommandWithInput
-        variant="borderless"
-        inputSize="lg"
-        showContent={false}
-        placeholder="Command with border and w-[250px]"
-      />
-    </div>
-  ),
-}
-
-export const InteractiveExample: Story = {
-  render: () => {
-    const [open, setOpen] = useState(false)
-    const [searchValue, setSearchValue] = useState('')
-    return (
-      <CommandWithInput
-        variant={open ? 'default' : 'borderless'}
-        inputSize="md"
-        placeholder="Type a command or search..."
-        searchValue={searchValue}
-        setSearchValue={(val) => {
-          setSearchValue(val)
-        }}
-        showContent={open}
-        onBlur={() => {
-          setOpen(false)
-          setSearchValue('')
-        }}
-        onFocus={() => setOpen(true)}
-      />
-    )
-  },
-  play: async () => {
-    const input = screen.getByPlaceholderText('Type a command or search...')
-
-    // 1. Dropdown should be closed initially
-    await expect(screen.queryByText('Category 1')).toBeNull()
-    // 2. Focus input, dropdown opens
-    await userEvent.click(input)
-    // await expect(await screen.findByText('Category 1')).toBeVisible()
-    // 3. Type to filter items
-    await userEvent.type(input, 'Item')
-    // await expect(await screen.findByText('Item')).toBeVisible()
-    await expect(screen.queryByText('With shortcut')).toBeNull()
-    // 4. Clear input, all items visible again
-    await userEvent.clear(input)
-    // await expect(await screen.findByText('Category 1')).toBeVisible()
-    // await expect(await screen.findByText('With shortcut')).toBeVisible()
-    // 5. Blur input, dropdown closes
-    await userEvent.tab()
-    await waitFor(() => {
-      const el = screen.queryByText('Category 1')
-      expect(!el || el.getAttribute('aria-hidden') === 'true').toBe(true)
-    })
-    // 6. check that value is reset correctly
-    const inputField = screen.getByPlaceholderText('Type a command or search...')
-    await expect(inputField).toHaveValue('')
-    await expect(inputField).not.toHaveFocus()
-  },
-}