@postxl/generators 0.2.2

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Toggle } from './toggle'
+import { FontBoldIcon } from '@radix-ui/react-icons'
+
+const meta = {
+  title: 'Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['default', 'outline'],
+      control: { type: 'radio' },
+    },
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <Toggle aria-label="Toggle italic" disabled={args.disabled} variant={args.variant} size={args.size}>
+        <FontBoldIcon className="h-4 w-4" />
+      </Toggle>
+    </div>
+  ),
+} satisfies Meta<typeof Toggle>
+
+export default meta
+
+// STORIES ---------------------------------------------------------------------
+
+export const Default = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+}
+
+export const Disabled = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: true,
+  },
+}
+
+export const WithLabel: StoryObj<typeof meta> = {
+  args: {
+    variant: 'outline',
+    size: 'default',
+    disabled: false,
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <Toggle aria-label="Toggle italic" disabled={args.disabled} variant={args.variant} size={args.size}>
+        <FontBoldIcon className="h-4 w-4" />
+        With a label
+      </Toggle>
+    </div>
+  ),
+}

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

@@ -0,0 +1,38 @@
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

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

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ToggleGroup, ToggleGroupItem } from './toggle-group'
+import { FontBoldIcon, FontItalicIcon, UnderlineIcon } from '@radix-ui/react-icons'
+
+const meta = {
+  title: 'Toggle Group',
+  component: ToggleGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      options: ['default', 'outline'],
+      control: { type: 'radio' },
+    },
+    size: {
+      options: ['default', 'sm', 'lg'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['single', 'multiple'],
+      control: { type: 'radio' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+  },
+  render: (args) => (
+    <div className="flex items-center justify-center">
+      <ToggleGroup disabled={args.disabled} type={args.type} variant={args.variant} size={args.size}>
+        <ToggleGroupItem value="bold" aria-label="Toggle bold">
+          <FontBoldIcon className="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="italic" aria-label="Toggle italic">
+          <FontItalicIcon className="h-4 w-4" />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough">
+          <UnderlineIcon className="h-4 w-4" />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+} satisfies Meta<typeof ToggleGroup>
+
+export default meta
+
+// STORIES ---------------------------------------------------------------------
+export const Default: StoryObj<typeof meta> = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    type: 'multiple',
+  },
+}
+
+export const SingleSelection: StoryObj<typeof meta> = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    type: 'single',
+  },
+}
+
+export const VariantOutline: StoryObj<typeof meta> = {
+  args: {
+    variant: 'outline',
+    size: 'default',
+    type: 'multiple',
+  },
+}
+
+export const SizeLarge: StoryObj<typeof meta> = {
+  args: {
+    variant: 'outline',
+    size: 'lg',
+    type: 'multiple',
+  },
+}
+
+export const SizeSmall: StoryObj<typeof meta> = {
+  args: {
+    variant: 'outline',
+    size: 'sm',
+    type: 'multiple',
+  },
+}

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

@@ -0,0 +1,54 @@
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+
+import { type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
+import { useMemo } from 'react'
+
+import { toggleVariants } from '@components/ui/toggle/toggle'
+import { cn } from '@lib/utils'
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => {
+  const memoizedValue = useMemo(() => ({ variant, size }), [size, variant])
+  return (
+    <ToggleGroupPrimitive.Root ref={ref} className={cn('flex items-center justify-center gap-1', className)} {...props}>
+      <ToggleGroupContext.Provider value={memoizedValue}>{children}</ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+})
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

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

@@ -0,0 +1,29 @@
+import { Meta } from '@storybook/react-vite'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './tooltip'
+import { Button } from '@components/ui/button/button'
+
+const meta = {
+  title: 'Tooltip',
+  component: Tooltip,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Tooltip>
+
+export default meta
+// STORIES ---------------------------------------------------------------------
+
+export const Default = {
+  render: () => (
+    <div className="flex items-center justify-center">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline">Hover</Button>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Add to library</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    </div>
+  ),
+}

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

@@ -0,0 +1,29 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import * as React from 'react'
+
+import { cn } from '@lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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',
+      className,
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }