@postxl/generators 1.1.1 → 1.2.0

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

@@ -1,168 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { SunIcon, ChevronUpIcon, ChevronDownIcon } from '@radix-ui/react-icons'
-import { expect, userEvent, screen, waitFor } from 'storybook/test'
-import { useState } from 'react'
-import {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-} from './dropdown-menu'
-import { Button } from '@components/ui/button/button'
-import { Label } from '@components/ui/label/label'
-import { Checkbox } from '@components/ui/checkbox/checkbox'
-import { Input } from '@components/ui/input/input'
-
-const meta = {
-  title: 'DropdownMenu',
-  component: DropdownMenu,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {},
-} satisfies Meta<typeof DropdownMenu>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <div data-testid="outside-click-for-test" className="pointer-events-auto">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline">Open dropdown</Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-[250px]" align="start">
-          <DropdownMenuLabel>Category 1</DropdownMenuLabel>
-          <DropdownMenuGroup>
-            <DropdownMenuItem>Item 1</DropdownMenuItem>
-            <DropdownMenuItem>
-              Item 2<DropdownMenuShortcut>⌘P (only visually)</DropdownMenuShortcut>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>Sub menu trigger</DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>More... (just another item)</DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-            <DropdownMenuItem disabled>Disabled</DropdownMenuItem>
-            <div className="flex items-center justify-center gap-3 mt-5">
-              <span>or just use custom content instead of the DropdownMenuItems</span>
-              <SunIcon className="size-15 text-yellow-500" />
-            </div>
-          </DropdownMenuGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  ),
-  play: async () => {
-    await userEvent.click(screen.getByText('Open dropdown'))
-    const item1 = await screen.findByText('Item 1')
-    await waitFor(() => {
-      const style = window.getComputedStyle(item1)
-      expect(style.visibility).toBe('visible')
-      expect(Number(style.opacity)).toBeGreaterThan(0)
-    })
-    await userEvent.click(screen.getByTestId('outside-click-for-test'))
-    await waitFor(() => {
-      expect(screen.queryByText('Item 1')).toBeNull()
-    })
-    await userEvent.keyboard('{Escape}')
-    await waitFor(() => {
-      expect(screen.queryByText('Item 1')).toBeNull()
-    })
-  },
-}
-
-export const ExampleDropdownSearchableSelection: Story = {
-  render: () => {
-    const dummyUsers = [
-      { id: '1', name: 'alice@wonderland.net' },
-      { id: '2', name: 'bob.builder@kika.de' },
-      { id: '3', name: 'charlie.bucket@chocolate-factory.com' },
-    ]
-    const [menuOpen, setMenuOpen] = useState(false)
-    const [userFilterValue, setUserFilterValue] = useState('')
-    const [selectedUserIds, setSelectedUserIds] = useState<string[]>([])
-
-    const filteredUserData = dummyUsers.filter((user) =>
-      user.name.toLowerCase().includes(userFilterValue.toLowerCase()),
-    )
-
-    const handleCheckboxChange = (userId: string) => {
-      setSelectedUserIds((prev) => (prev.includes(userId) ? prev.filter((id) => id !== userId) : [...prev, userId]))
-    }
-
-    return (
-      <div className="w-[180px]">
-        <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="outline"
-              size="sm"
-              className="group w-full flex items-center justify-between disabled:text-muted-foreground border-input hover:bg-muted-foreground hover:text-background"
-            >
-              <span className="mx-auto">
-                {selectedUserIds.length === 0
-                  ? 'Select specific users'
-                  : `${selectedUserIds.length} user${selectedUserIds.length > 1 ? 's' : ''} selected`}
-              </span>
-              {menuOpen ? (
-                <ChevronUpIcon className="size-4 opacity-50 text-muted-foreground group-hover:text-background" />
-              ) : (
-                <ChevronDownIcon className="size-4 opacity-50 group-hover:opacity-100 text-muted-foreground group-hover:text-background" />
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start" className="w-[280px] flex flex-col p-0 border-(--discreet-border)">
-            <Input
-              className=" rounded-none border-0 border-b-1"
-              variant="simple"
-              placeholder="Search users"
-              value={userFilterValue}
-              onChange={(e) => setUserFilterValue(e.target.value)}
-            />
-            <div className="p-1">
-              {filteredUserData.length > 0 ? (
-                filteredUserData.map((user) => (
-                  <div key={user.id} className="flex hover:bg-accent py-1 px-2 rounded items-center gap-2">
-                    <Checkbox
-                      checked={selectedUserIds.includes(user.id)}
-                      onChange={() => handleCheckboxChange(user.id)}
-                      id={`user-${user.id}`}
-                      variant="iconSolo"
-                      checkboxSize="lg"
-                      checkIcon="check"
-                      iconStyle="solo"
-                    />
-                    <Label htmlFor={`user-${user.id}`} className="cursor-pointer">
-                      {user.name}
-                    </Label>
-                  </div>
-                ))
-              ) : (
-                <p className="text-center text-muted-foreground py-3">no results found</p>
-              )}
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    )
-  },
-}

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

@@ -1,225 +0,0 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from '@radix-ui/react-icons'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-function DropdownMenu({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Root>>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Portal>>) {
-  return <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-}
-
-function DropdownMenuTrigger({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>>) {
-  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Content>>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Group>>) {
-  return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_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]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>>) {
-  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: Readonly<
-  React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
->) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Separator>>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({ ...props }: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.Sub>>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: Readonly<
-  React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
->) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: Readonly<React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

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

@@ -1,141 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { useState } from 'react'
-
-import { Input } from './input'
-import { expect, userEvent, screen } from 'storybook/test'
-import { Button } from '@components/ui/button/button'
-
-const meta = {
-  title: 'Input',
-  component: Input,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'simple'],
-    },
-  },
-} satisfies Meta<typeof Input>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { variant: 'default' },
-  render: (args) => {
-    const [value, setValue] = useState('')
-    return (
-      <div className="flex items-center gap-2">
-        <Input
-          placeholder="Enter text..."
-          {...args}
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          className="w-[200px]"
-        />
-        <span data-testid="input-value">
-          {value ? 'value: ' : ''}
-          {value}
-        </span>
-      </div>
-    )
-  },
-  play: async () => {
-    const input = screen.getByPlaceholderText('Enter text...')
-    await userEvent.type(input, 'test')
-    const valueSpan = screen.getByTestId('input-value')
-    expect(valueSpan).toHaveTextContent('test')
-  },
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2 items-center">
-      <Input placeholder="default" variant="default" className="w-48" />
-      <Input placeholder="simple" variant="simple" className="w-48" />
-    </div>
-  ),
-}
-
-export const Disabled: Story = {
-  render: (args) => (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Input disabled {...args} className="w-[200px]" placeholder="Disabled" />
-    </div>
-  ),
-}
-
-export const EmailForm: Story = {
-  render: () => {
-    const [value, setValue] = useState('')
-    const [error, setError] = useState<string | null>(null)
-    const [submitted, setSubmitted] = useState(false)
-    const [touched, setTouched] = useState(false)
-
-    function validateEmail(email: string) {
-      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
-    }
-
-    function validate(value: string) {
-      if (!value) return 'Field is required.'
-      if (!validateEmail(value)) return 'Not a valid email.'
-      return null
-    }
-
-    const handleSubmit = (e: React.FormEvent) => {
-      e.preventDefault()
-      setSubmitted(true)
-      setError(validate(value))
-    }
-
-    const handleBlur = () => {
-      setTouched(true)
-      setError(validate(value))
-    }
-
-    return (
-      <form className="flex flex-col gap-2 items-center w-[350px]" onSubmit={handleSubmit} noValidate>
-        <Input
-          className="w-full"
-          placeholder="Enter an email..."
-          value={value}
-          onChange={(e) => {
-            setValue(e.target.value)
-            if (submitted || touched) setError(validate(e.target.value))
-          }}
-          onBlur={handleBlur}
-          aria-invalid={!!error}
-        />
-        {error && (touched || submitted) && (
-          <span className="text-destructive mt-1" role="alert">
-            {error}
-          </span>
-        )}
-        <Button type="submit" size="smLow">
-          Submit
-        </Button>
-      </form>
-    )
-  },
-  play: async () => {
-    const input = screen.getByPlaceholderText('Enter an email...')
-    const submitButton = screen.getByRole('button', { name: /submit/i })
-
-    // Submit with empty input
-    await userEvent.clear(input)
-    await userEvent.click(submitButton)
-    await expect(await screen.findByRole('alert')).toHaveTextContent('Field is required.')
-    // Enter invalid email and submit
-    await userEvent.type(input, 'not-an-email')
-    await userEvent.click(submitButton)
-    await expect(await screen.findByRole('alert')).toHaveTextContent('Not a valid email.')
-    // Enter valid email and submit
-    await userEvent.clear(input)
-    await userEvent.type(input, 'test@example.com')
-    await userEvent.click(submitButton)
-    await expect(screen.queryByRole('alert')).toBeNull()
-  },
-}

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

@@ -1,47 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const inputVariants = cva(
-  'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-  {
-    variants: {
-      variant: {
-        default: 'h-9 md:text-sm focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        simple: 'h-8',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-type InputProps = React.ComponentProps<'input'> &
-  VariantProps<typeof inputVariants> & {
-    /**
-     * E2E test_id to identify the input.
-     */
-    __e2e_test_id__?: string
-    onEnter?: () => void
-  }
-function Input({ className, type, variant, __e2e_test_id__, onEnter, ...props }: InputProps) {
-  return (
-    <input
-      type={type}
-      data-slot="input"
-      className={cn(inputVariants({ variant, className }))}
-      data-test-id={__e2e_test_id__}
-      onKeyDown={(e) => {
-        props.onKeyDown?.(e)
-        if (e.key === 'Enter') {
-          onEnter?.()
-        }
-      }}
-      {...props}
-    />
-  )
-}
-
-export { Input }

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

@@ -1,41 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, screen } from 'storybook/test'
-
-import { Label } from './label'
-import { Checkbox } from '@components/ui/checkbox/shadcn-checkbox'
-
-const meta = {
-  title: 'Label',
-  component: Label,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof Label>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => <Label>Label</Label>,
-}
-
-export const Usage: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-2 items-center">
-      <Checkbox id="label-1" />
-      <Label htmlFor="label-1" className="cursor-pointer">
-        Label for usage demonstration (click label to toggle checkbox)
-      </Label>
-    </div>
-  ),
-  play: async () => {
-    const label = screen.getByText(/Label for usage demonstration/)
-    const checkbox = screen.getByRole('checkbox')
-    await expect(checkbox).not.toBeChecked()
-    await userEvent.click(label)
-    await expect(checkbox).toBeChecked()
-    await userEvent.click(label)
-    await expect(checkbox).not.toBeChecked()
-  },
-}

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

@@ -1,20 +0,0 @@
-import * as LabelPrimitive from '@radix-ui/react-label'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Label }

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

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Loader } from './loader'
-
-const meta = {
-  title: 'Loader',
-  component: Loader,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-    },
-  },
-} satisfies Meta<typeof Loader>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: { label: 'Loading...' },
-  render: (args) => (
-    <div className="relative w-[350px] h-[150px] border">
-      <span>Background, loader is applied on, which gets dimmed</span>
-      <br />
-      <span>needs position relative for correct loader placement</span>
-      <Loader {...args} />
-    </div>
-  ),
-  // play: async () => {
-  //   // Check that the loader label is visible
-  //   expect(screen.getByText('Loading...')).toBeVisible()
-  //   const loaderLabel = screen.getByText('Loading...')
-  //   // Find the SVG spinner within the loader
-  //   const svg = loaderLabel.closest('div')?.querySelector('svg')
-  //   expect(svg).toBeTruthy()
-  //   expect(svg).toBeVisible()
-  //   // Check that the SVG size is greater than 0
-  //   const rect = svg?.getBoundingClientRect()
-  //   expect(rect?.width).toBeGreaterThan(0)
-  //   expect(rect?.height).toBeGreaterThan(0)
-  // },
-}