@postxl/generators 1.1.1 → 1.2.0

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

@@ -1,88 +0,0 @@
-import { CheckIcon, Cross1Icon } from '@radix-ui/react-icons'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import { SquareIcon } from 'lucide-react'
-
-import { cn } from '@lib/utils'
-
-type CheckboxProps = React.ComponentProps<'input'> &
-  VariantProps<typeof checkboxVariants> & {
-    label?: string
-    /**
-     * E2E test_id to identify the checkbox.
-     */
-    __e2e_test_id__?: string
-  }
-
-const checkboxVariants = cva(
-  'cursor-pointer peer appearance-none rounded border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive shrink-0 shadow-xs transition-shadow',
-  {
-    variants: {
-      variant: {
-        default: '',
-        simple: ' border-input checked:bg-muted-foreground checked:border-muted-foreground',
-        iconSolo: 'border-transparent shadow-none',
-      },
-      checkboxSize: {
-        default: 'size-4 [&_svg]:size-3.5',
-        sm: 'size-3.5 [&_svg]:size-3',
-        lg: 'size-4.5 [&_svg]:size-4',
-      },
-      checkIcon: {
-        default: 'cross',
-        check: 'check',
-        square: 'square',
-      },
-      iconStyle: {
-        default: 'text-foreground',
-        simple: 'text-primary-foreground',
-        solo: 'text-muted-foreground shadow-none',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      checkIcon: 'default',
-      iconStyle: 'default',
-      checkboxSize: 'default',
-    },
-  },
-)
-
-function Checkbox({
-  label,
-  className,
-  variant,
-  checkIcon,
-  checkboxSize,
-  iconStyle,
-  __e2e_test_id__,
-  ...props
-}: CheckboxProps) {
-  const inputId = props.id ?? (label ? `${label}-checkbox` : undefined)
-
-  let icon = <Cross1Icon />
-  if (checkIcon === 'check') {
-    icon = <CheckIcon />
-  } else if (checkIcon === 'square') {
-    icon = <SquareIcon fill="var(--muted-foreground)" className="size-1/3" />
-  }
-
-  return (
-    <div className={cn('relative flex gap-2 items-center', className)} data-test-id={__e2e_test_id__}>
-      <input {...props} type="checkbox" id={inputId} className={cn(checkboxVariants({ variant, checkboxSize }))} />
-      <span
-        className={cn(
-          checkboxVariants({ iconStyle, checkboxSize }),
-          'absolute opacity-0 peer-checked:opacity-100 top-1/2 left-0 transform -translate-y-1/2 pointer-events-none flex items-center justify-center border-transparent',
-        )}
-      >
-        {icon}
-      </span>
-      <label htmlFor={inputId} className="cursor-pointer select-none">
-        {label}
-      </label>
-    </div>
-  )
-}
-
-export { Checkbox, checkboxVariants }

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

@@ -1,90 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Checkbox } from './shadcn-checkbox'
-import { expect, userEvent, screen } from 'storybook/test'
-import { Label } from '@components/ui/label/label'
-
-const meta = {
-  title: 'ShadcnCheckbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm'],
-    },
-  },
-} satisfies Meta<typeof Checkbox>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { variant: 'default', size: 'default' },
-  render: (args) => (
-    <div className="flex flex-wrap gap-2">
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="default-cb" {...args} />
-        <Label htmlFor="default-cb">Default</Label>
-      </div>
-    </div>
-  ),
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="default-variant" variant="default" defaultChecked={true} />
-        <Label htmlFor="default-variant">Default</Label>
-      </div>
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2">
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="sm" size="sm" />
-        <Label htmlFor="sm">sm</Label>
-      </div>
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="default-size" size="default" />
-        <Label htmlFor="default-size">Default</Label>
-      </div>
-    </div>
-  ),
-}
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-  render: (args) => (
-    <div className="flex flex-wrap gap-2">
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="disabled" {...args} data-testid="disabled-checkbox" defaultChecked={false} />
-        <Label htmlFor="disabled">Disabled</Label>
-      </div>
-      <div className="flex flex-wrap gap-2 items-center">
-        <Checkbox id="disabled" {...args} data-testid="disabled-checkbox-active" defaultChecked={true} />
-        <Label htmlFor="disabled">Disabled active</Label>
-      </div>
-    </div>
-  ),
-  play: async () => {
-    const disabledCheckbox = screen.getByTestId('disabled-checkbox')
-
-    await expect(disabledCheckbox).toHaveAttribute('disabled')
-
-    await userEvent.click(disabledCheckbox, { pointerEventsCheck: 0 })
-  },
-}

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