@postxl/generators 1.1.0 → 1.2.0

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()
-  },
-}

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

@@ -1,165 +0,0 @@
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import { Command as CommandPrimitive } from 'cmdk'
-import React from 'react'
-
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@components/ui/dialog/dialog'
-import { cn } from '@lib/utils'
-
-function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
-  return (
-    <CommandPrimitive
-      data-slot="command"
-      className={cn(
-        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandDialog({
-  title = 'Command Palette',
-  description = 'Search for a command to run...',
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
-  return (
-    <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent className={cn('overflow-hidden p-0', className)} showCloseButton={showCloseButton}>
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const commandInputVariants = cva('', {
-  variants: {
-    variant: { default: '', borderless: 'border-none' },
-    inputSize: {
-      sm: 'h-7.5 py-2',
-      md: 'h-9 py-3',
-      lg: 'h-12 py-4',
-    },
-  },
-  defaultVariants: { variant: 'default', inputSize: 'md' },
-})
-
-export type CommandInputProps = Omit<React.ComponentProps<typeof CommandPrimitive.Input>, 'size'> &
-  VariantProps<typeof commandInputVariants> & {
-    wrapperClassName?: string
-  }
-
-export const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
-  ({ className, wrapperClassName, variant, inputSize, ...props }, ref) => {
-    return (
-      <div
-        data-slot="command-input-wrapper"
-        className={cn(
-          'flex items-center gap-2 border-b px-3',
-          commandInputVariants({ variant, inputSize }),
-          wrapperClassName,
-        )}
-      >
-        <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
-        <CommandPrimitive.Input
-          ref={ref}
-          data-slot="command-input"
-          className={cn(
-            'placeholder:text-muted-foreground flex w-full rounded bg-transparent text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
-            className,
-          )}
-          {...props}
-        />
-      </div>
-    )
-  },
-)
-CommandInput.displayName = 'CommandInput'
-
-function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
-  return (
-    <CommandPrimitive.List
-      data-slot="command-list"
-      className={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
-      {...props}
-    />
-  )
-}
-
-function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
-  return <CommandPrimitive.Empty data-slot="command-empty" className="py-6 text-center text-sm" {...props} />
-}
-
-function CommandGroup({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Group>) {
-  return (
-    <CommandPrimitive.Group
-      data-slot="command-group"
-      className={cn(
-        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandSeparator({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Separator>) {
-  return (
-    <CommandPrimitive.Separator
-      data-slot="command-separator"
-      className={cn('bg-border -mx-1 h-px', className)}
-      {...props}
-    />
-  )
-}
-
-function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
-  return (
-    <CommandPrimitive.Item
-      data-slot="command-item"
-      className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="command-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Command,
-  CommandDialog,
-  commandInputVariants,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}