@postxl/generators 1.1.1 → 1.2.0

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

@@ -1,21 +0,0 @@
-import { cn } from '@lib/utils'
-
-export function Spinner({ classNames }: Readonly<{ classNames?: string }>) {
-  return (
-    <div className={cn('flex justify-center items-center w-full h-full', classNames)}>
-      <svg
-        className="w-auto text-[inherit] h-full animate-spin"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-        <path
-          className="opacity-75"
-          fill="currentColor"
-          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-        />
-      </svg>
-    </div>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
-import { Switch } from './switch'
-import { Label } from '@components/ui/label/label'
-
-const meta: Meta<typeof Switch> = {
-  title: 'Switch',
-  component: Switch,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-    },
-  },
-}
-
-export default meta
-
-export const Default: StoryObj<typeof meta> = {
-  args: {
-    disabled: false,
-  },
-  render: (args) => (
-    <div className="flex items-center justify-center">
-      <div className="flex items-center space-x-2">
-        <Switch id="airplane-mode" disabled={args.disabled} />
-        <Label htmlFor="airplane-mode">Airplane Mode</Label>
-      </div>
-    </div>
-  ),
-}

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

@@ -1,28 +0,0 @@
-import * as SwitchPrimitives from '@radix-ui/react-switch'
-
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
-
-export { Switch }

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

@@ -1,215 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { expect, userEvent, screen } from 'storybook/test'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs'
-
-// Create a wrapper component for Storybook that accepts our custom args
-const TabsStory = (args: TabStoryArgs) => {
-  return <div>Tabs Story Container</div> // Not used directly, stories use render function
-}
-
-const meta = {
-  title: 'Tabs',
-  component: TabsStory,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variantTabsList: {
-      control: 'select',
-      options: ['default', 'protocol'],
-    },
-    variantTabsTrigger: {
-      control: 'select',
-      options: ['default', 'protocol'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm', 'lg'],
-    },
-  },
-  args: {
-    variantTabsList: 'default',
-    variantTabsTrigger: 'default',
-    size: 'default',
-  },
-} satisfies Meta<TabStoryArgs>
-
-export default meta
-
-interface TabStoryArgs {
-  variantTabsList?: 'default' | 'protocol'
-  variantTabsTrigger?: 'default' | 'protocol'
-  size?: 'default' | 'sm' | 'lg'
-}
-
-type Story = StoryObj<TabStoryArgs>
-
-export const Default: Story = {
-  render: (args) => (
-    <Tabs className="w-[400px]">
-      <TabsList variant={args.variantTabsList} className="grid grid-cols-3 w-full" size={args.size}>
-        <TabsTrigger variant={args.variantTabsTrigger} value="example1" className="cursor-pointer">
-          Example 1
-        </TabsTrigger>
-        <TabsTrigger variant={args.variantTabsTrigger} value="example2" className="cursor-pointer">
-          Example 2
-        </TabsTrigger>
-        <TabsTrigger variant={args.variantTabsTrigger} value="example3" className="cursor-pointer">
-          Example 3
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="example1">
-        <div className="p-4 rounded-lg border mt-2">Example Content 1</div>
-      </TabsContent>
-      <TabsContent value="example2">
-        <div className="p-4 rounded-lg border mt-2">Example Content 2</div>
-      </TabsContent>
-      <TabsContent value="example3">
-        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
-      </TabsContent>
-    </Tabs>
-  ),
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="grid grid-cols-3 mt-8 space-x-10">
-      <Tabs>
-        <TabsList variant="default" size="default">
-          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
-            default
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="small">
-          <div className="p-4 rounded-lg border mt-2">Content</div>
-        </TabsContent>
-      </Tabs>
-      <Tabs>
-        <TabsList variant="protocol" size="default">
-          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
-            TabsList protocol
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="default">
-          <div className="p-4 rounded-lg border mt-2">Content</div>
-        </TabsContent>
-      </Tabs>
-      <Tabs>
-        <TabsList variant="protocol" size="default">
-          <TabsTrigger variant="protocol" value="large" className="cursor-pointer w-[100px]">
-            TabsList & -Trigger protocol
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="large">
-          <div className="p-4 rounded-lg border mt-2">Content</div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  ),
-}
-
-export const Sizes: Story = {
-  render: () => (
-    <div className="grid grid-cols-3 mt-8">
-      <Tabs>
-        <TabsList variant="default" size="sm">
-          <TabsTrigger variant="default" value="small" className="cursor-pointer w-[100px]">
-            sm
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="small">
-          <div className="p-4 rounded-lg border mt-2">Small Size Content</div>
-        </TabsContent>
-      </Tabs>
-      <Tabs>
-        <TabsList variant="default" size="default">
-          <TabsTrigger variant="default" value="default" className="cursor-pointer w-[100px]">
-            default
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="default">
-          <div className="p-4 rounded-lg border mt-2">Default Size Content</div>
-        </TabsContent>
-      </Tabs>
-      <Tabs>
-        <TabsList variant="default" size="lg">
-          <TabsTrigger variant="default" value="large" className="cursor-pointer w-[100px]">
-            lg
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="large">
-          <div className="p-4 rounded-lg border mt-2">Large Size Content</div>
-        </TabsContent>
-      </Tabs>
-    </div>
-  ),
-}
-
-export const Disabled: Story = {
-  render: () => (
-    <Tabs defaultValue="tab1" className="w-[400px]">
-      <TabsList className="grid grid-cols-2 w-full">
-        <TabsTrigger value="tab1" className="cursor-pointer">
-          Available
-        </TabsTrigger>
-        <TabsTrigger value="tab2" className="cursor-pointer" disabled>
-          Disabled
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="tab1">
-        <div className="p-4 rounded-lg border border mt-2">This tab is available.</div>
-      </TabsContent>
-      <TabsContent value="tab2">
-        <div className="p-4 rounded-lg border border mt-2">This content won't be accessible.</div>
-      </TabsContent>
-    </Tabs>
-  ),
-}
-
-export const InteractiveTest: Story = {
-  render: () => (
-    <Tabs defaultValue="example1" className="w-[400px]">
-      <TabsList variant="default" className="grid grid-cols-3 w-full">
-        <TabsTrigger value="example1" className="cursor-pointer" data-testid="tab-example1">
-          Example 1
-        </TabsTrigger>
-        <TabsTrigger value="example2" className="cursor-pointer" data-testid="tab-example2">
-          Example 2
-        </TabsTrigger>
-        <TabsTrigger value="example3" className="cursor-pointer">
-          Example 3
-        </TabsTrigger>
-      </TabsList>
-      <TabsContent value="example1">
-        <div className="p-4 rounded-lg border mt-2" data-testid="example1-content">
-          Example Content 1
-        </div>
-      </TabsContent>
-      <TabsContent value="example2">
-        <div className="p-4 rounded-lg border mt-2" data-testid="example2-content">
-          Example Content 2
-        </div>
-      </TabsContent>
-      <TabsContent value="example3">
-        <div className="p-4 rounded-lg border mt-2">Example Content 3</div>
-      </TabsContent>
-    </Tabs>
-  ),
-  play: async () => {
-    const example1Tab = screen.getByTestId('tab-example1')
-    const accountContent = screen.getByTestId('example1-content')
-    const example2Tab = screen.getByTestId('tab-example2')
-
-    await expect(example1Tab).toHaveAttribute('data-state', 'active')
-    await expect(accountContent).toBeVisible()
-
-    await userEvent.click(example2Tab)
-
-    await expect(example2Tab).toHaveAttribute('data-state', 'active')
-    await expect(example1Tab).toHaveAttribute('data-state', 'inactive')
-
-    const passwordContent = screen.getByTestId('example2-content')
-    await expect(passwordContent).toBeVisible()
-  },
-}

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

@@ -1,70 +0,0 @@
-import { Slot } from '@radix-ui/react-slot'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-
-import { cva, type VariantProps } from 'class-variance-authority'
-import type { ComponentProps } from 'react'
-
-import { cn } from '@lib/utils'
-
-function Tabs({ className, ...props }: ComponentProps<typeof TabsPrimitive.Root>) {
-  return <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />
-}
-
-const tabsListVariants = cva('w-fit text-muted-foreground inline-flex items-center justify-center rounded-lg', {
-  variants: {
-    variant: {
-      default: 'bg-muted p-[3px]',
-      protocol: 'bg-transparent',
-    },
-    size: {
-      default: 'h-9',
-      sm: 'h-6',
-      lg: 'h-10',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-})
-
-function TabsList({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : TabsPrimitive.List
-  return <Comp data-slot="tabs-list" className={cn(tabsListVariants({ variant, size, className }))} {...props} />
-}
-
-const tabsTriggerVariants = cva(
-  "h-[100%] text-lg inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 text-foreground",
-  {
-    variants: {
-      variant: {
-        default:
-          'h-[calc(100%-1px)] flex-1 rounded-md border border-transparent px-2 py-1 transition-[color,box-shadow] dark:text-muted-foreground data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:shadow-sm',
-        protocol:
-          'bg-transparent border-b-2 border-b-transparent hover:text-primary hover:border-b-primary data-[state=active]:border-b-primary data-[state=active]:text-primary',
-      },
-    },
-  },
-)
-
-function TabsTrigger({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: ComponentProps<typeof TabsPrimitive.Trigger> & VariantProps<typeof tabsTriggerVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : TabsPrimitive.Trigger
-  return <Comp data-slot="tabs-trigger" className={cn(tabsTriggerVariants({ variant, className }))} {...props} />
-}
-
-function TabsContent({ className, ...props }: ComponentProps<typeof TabsPrimitive.Content>) {
-  return <TabsPrimitive.Content data-slot="tabs-content" className={cn('flex-1 outline-none', className)} {...props} />
-}
-
-export { Tabs, TabsList, TabsTrigger, TabsContent }

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

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-
-import { Textarea } from './textarea'
-import { useState } from 'react'
-import { Button } from '@components/ui/button/button'
-import { expect, userEvent, within } from 'storybook/test'
-
-const meta = {
-  title: 'Textarea',
-  component: Textarea,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['default', 'simple'],
-    },
-  },
-} satisfies Meta<typeof Textarea>
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: (args) => <Textarea {...args} className="w-[350px]" placeholder="Simple Textarea..." />,
-}
-
-export const Variants: Story = {
-  render: () => (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Textarea variant="default" className="w-[250px]" placeholder="default" />
-      <Textarea variant="simple" className="w-[250px]" placeholder="simple" />
-    </div>
-  ),
-}
-
-export const Disabled: Story = {
-  render: (args) => (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Textarea disabled {...args} className="w-[350px]" placeholder="Disabled" />
-    </div>
-  ),
-}
-
-export const ManagedResizing: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4 items-center">
-      <Textarea className="h-12.5 w-[350px] resize-none" placeholder="No resizing - locked 2 lines 350px" />
-      <Textarea
-        className="min-h-6.5 max-h-24.5 w-[350px] resize-y"
-        placeholder="Vertical resizing - minimum 2, maximum 5 lines."
-      />
-      <Textarea
-        className="h-15.5 min-w-[200px] w-[350px] max-w-[500px] resize-x"
-        placeholder="Horizontal resizing - minimum 200px, maximum 500px."
-      />
-      <Textarea
-        className="min-h-12.5 min-w-[200px] max-h-24.5 max-w-[500px] w-[350px] resize"
-        placeholder="Free resizing - minimum 200px 2 lines, maximum 500px 5 lines"
-      />
-    </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) // simple email regex
-    }
-
-    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>
-        <Textarea
-          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 ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const textarea = canvas.getByPlaceholderText('Enter an email...')
-    const submitButton = canvas.getByRole('button', { name: /submit/i })
-
-    // Submit with empty input
-    await userEvent.clear(textarea)
-    await userEvent.click(submitButton)
-    expect(await canvas.findByRole('alert')).toHaveTextContent('Field is required.')
-    // Enter invalid email and submit
-    await userEvent.type(textarea, 'not-an-email')
-    await userEvent.click(submitButton)
-    expect(await canvas.findByRole('alert')).toHaveTextContent('Not a valid email.')
-    // Enter valid email and submit
-    await userEvent.clear(textarea)
-    await userEvent.type(textarea, 'test@example.com')
-    await userEvent.click(submitButton)
-    expect(canvas.queryByRole('alert')).toBeNull()
-  },
-}

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

@@ -1,40 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
-
-import { cn } from '@lib/utils'
-
-const textareaVariants = cva(
-  'border-input placeholder:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50',
-  {
-    variants: {
-      variant: {
-        default: 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        simple: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  },
-)
-
-type TextareaProps = React.ComponentProps<'textarea'> &
-  VariantProps<typeof textareaVariants> & {
-    /**
-     * E2E test_id to identify the input.
-     */
-    __e2e_test_id__?: string
-  }
-
-function Textarea({ className, variant, __e2e_test_id__, ...props }: TextareaProps) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(textareaVariants({ variant, className }))}
-      {...props}
-      data-test-id={__e2e_test_id__}
-    />
-  )
-}
-
-export { Textarea }

package/dist/frontend-core/template/src/components/ui/toast/toast.mdx

@@ -1,31 +0,0 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
-
-import * as ToastStories from './toast.stories.tsx';
-
-<Meta of={ToastStories} />
-
-# Toast with Sonner
-
-We create a toast with sonner. For more documentation, please check the [Sonner Docs](https://sonner.emilkowal.ski/) repository.
-
-### Usage
-```tsx
-import { Toaster, toast } from 'sonner'
-
-// ...
-
-function App() {
-  return (
-    <div>
-      <Toaster />
-      <button onClick={() => toast('My first toast')}>
-        Give me a toast
-      </button>
-    </div>
-  )
-}
-```
-
-<Canvas of={ToastStories.ToastExamples} />
-
-<Controls />

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

@@ -1,89 +0,0 @@
-import { Button } from '@components/ui/button/button'
-import { toast, Toaster } from 'sonner'
-import { Meta, StoryObj } from '@storybook/react-vite'
-
-const meta: Meta<typeof Toaster> = {
-  title: 'Toast',
-  parameters: {},
-  argTypes: {
-    closeButton: {
-      control: 'boolean',
-    },
-    richColors: {
-      control: 'boolean',
-    },
-    position: {
-      control: 'select',
-      options: ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'],
-    },
-    expand: {
-      control: 'boolean',
-    },
-  },
-}
-
-export default meta
-
-export const ToastExamples: StoryObj<typeof meta> = {
-  args: {
-    closeButton: false,
-    richColors: true,
-    position: 'bottom-right',
-    expand: false,
-  },
-  render: (args) => (
-    <div className="h-[250px]">
-      <Toaster
-        position={args.position}
-        expand={args.expand}
-        richColors={args.richColors}
-        closeButton={args.closeButton}
-      />
-      <div className="flex gap-2">
-        <Button variant="outline" onClick={() => toast('default toast message')}>
-          default toast
-        </Button>
-        <Button variant="outline" onClick={() => toast.error('uh oh')}>
-          error toast
-        </Button>
-        <Button
-          variant="outline"
-          onClick={() =>
-            toast('Event has been created', {
-              action: {
-                label: 'Undo',
-                onClick: () => alert('can not be undone *hohoho'),
-              },
-            })
-          }
-        >
-          action toast
-        </Button>
-        <Button
-          variant="outline"
-          onClick={() =>
-            toast.message('Event has been created', {
-              description: 'Monday, January 3rd at 6:00pm',
-            })
-          }
-        >
-          description toast
-        </Button>
-        <Button
-          variant="outline"
-          onClick={() =>
-            toast.custom((t) => (
-              <div className="flex flex-col border border-border p-3 gap-2 rounded shadow bg-(--sidebar-primary-foreground)">
-                <h2>such a beautiful toast</h2>
-                <p className="mb-2">lorem ipsum dolor sit amet</p>
-                <button onClick={() => toast.dismiss(t)}>Dismiss</button>
-              </div>
-            ))
-          }
-        >
-          bla
-        </Button>
-      </div>
-    </div>
-  ),
-}