@postxl/generators 0.2.2

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

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

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

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

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

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

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