@postxl/generators 1.1.1 → 1.2.0

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

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

@@ -1,160 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import {
-  CommandPalette,
-  CommandPaletteEmpty,
-  CommandPaletteDialog,
-  CommandPaletteGroup,
-  CommandPaletteInput,
-  CommandPaletteItem,
-  CommandPaletteList,
-  CommandPaletteSeparator,
-  CommandPaletteShortcut,
-} from './command-palette'
-import { CalendarIcon, EnvelopeClosedIcon, FaceIcon, GearIcon, PersonIcon, RocketIcon } from '@radix-ui/react-icons'
-import { useEffect, useState } from 'react'
-
-const meta = {
-  title: 'Command Palette',
-  component: CommandPalette,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'The Command Palette component is used to display a list of commands or actions that can be triggered by the user.',
-      },
-    },
-  },
-} satisfies Meta<typeof CommandPalette>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'A basic command palette with grouped items and keyboard shortcuts.',
-      },
-    },
-  },
-  render: () => (
-    <div className="flex items-center justify-center">
-      <CommandPalette className="rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem disabled>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPalette>
-    </div>
-  ),
-}
-
-const CommandPaletteDialogExample = () => {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener('keydown', down)
-    return () => document.removeEventListener('keydown', down)
-  }, [])
-
-  return (
-    <div className="flex items-center justify-center">
-      <p className="text-sm text-muted-foreground">
-        Press{' '}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>J
-        </kbd>
-      </p>
-      <CommandPaletteDialog open={open} onOpenChange={setOpen}>
-        <CommandPaletteInput placeholder="Type a command or search..." />
-        <CommandPaletteList>
-          <CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
-          <CommandPaletteGroup heading="Suggestions">
-            <CommandPaletteItem>
-              <CalendarIcon className="mr-2 h-4 w-4" />
-              <span>Calendar</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <FaceIcon className="mr-2 h-4 w-4" />
-              <span>Search Emoji</span>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <RocketIcon className="mr-2 h-4 w-4" />
-              <span>Launch</span>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-          <CommandPaletteSeparator />
-          <CommandPaletteGroup heading="Settings">
-            <CommandPaletteItem>
-              <PersonIcon className="mr-2 h-4 w-4" />
-              <span>Profile</span>
-              <CommandPaletteShortcut>⌘P</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <EnvelopeClosedIcon className="mr-2 h-4 w-4" />
-              <span>Mail</span>
-              <CommandPaletteShortcut>⌘B</CommandPaletteShortcut>
-            </CommandPaletteItem>
-            <CommandPaletteItem>
-              <GearIcon className="mr-2 h-4 w-4" />
-              <span>Settings</span>
-              <CommandPaletteShortcut>⌘S</CommandPaletteShortcut>
-            </CommandPaletteItem>
-          </CommandPaletteGroup>
-        </CommandPaletteList>
-      </CommandPaletteDialog>
-    </div>
-  )
-}
-
-export const Dialog: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Command palette displayed in a dialog that can be opened with ⌘J keyboard shortcut.',
-      },
-    },
-  },
-  render: () => <CommandPaletteDialogExample />,
-}

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

@@ -1,134 +0,0 @@
-import { type DialogProps } from '@radix-ui/react-dialog'
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
-
-import { Command as CommandPalettePrimitive } from 'cmdk'
-import * as React from 'react'
-
-import { Dialog, DialogContent } from '@components/ui/dialog/dialog'
-import { cn } from '@lib/utils'
-
-const CommandPalette = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive
-    ref={ref}
-    className={cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-CommandPalette.displayName = CommandPalettePrimitive.displayName
-
-type CommandPaletteDialogProps = DialogProps
-
-const CommandPaletteDialog = ({ children, ...props }: CommandPaletteDialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <CommandPalette className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[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}
-        </CommandPalette>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandPaletteInput = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Input>
->(({ className, ...props }, ref) => (
-  // eslint-disable-next-line react/no-unknown-property
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPalettePrimitive.Input
-      ref={ref}
-      className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandPaletteInput.displayName = CommandPalettePrimitive.Input.displayName
-
-const CommandPaletteList = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.List
-    ref={ref}
-    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
-    {...props}
-  />
-))
-
-CommandPaletteList.displayName = CommandPalettePrimitive.List.displayName
-
-const CommandPaletteEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Empty>
->((props, ref) => <CommandPalettePrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />)
-
-CommandPaletteEmpty.displayName = CommandPalettePrimitive.Empty.displayName
-
-const CommandPaletteGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Group
-    ref={ref}
-    className={cn(
-      'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteGroup.displayName = CommandPalettePrimitive.Group.displayName
-
-const CommandPaletteSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Separator ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
-))
-CommandPaletteSeparator.displayName = CommandPalettePrimitive.Separator.displayName
-
-const CommandPaletteItem = React.forwardRef<
-  React.ElementRef<typeof CommandPalettePrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPalettePrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPalettePrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50',
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandPaletteItem.displayName = CommandPalettePrimitive.Item.displayName
-
-const CommandPaletteShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />
-}
-CommandPaletteShortcut.displayName = 'CommandPaletteShortcut'
-
-export {
-  CommandPalette,
-  CommandPaletteDialog,
-  CommandPaletteInput,
-  CommandPaletteList,
-  CommandPaletteEmpty,
-  CommandPaletteGroup,
-  CommandPaletteItem,
-  CommandPaletteShortcut,
-  CommandPaletteSeparator,
-}