@postxl/generators 0.2.2

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

@@ -0,0 +1,230 @@
+import { Meta, StoryObj } from '@storybook/react-vite'
+
+import { ChartTooltip, ChartTooltipContent } from './base'
+import { LineChart } from './line'
+
+const meta = {
+  title: 'LineChart',
+  component: LineChart,
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['natural', 'linear', 'step'],
+      description: 'The type of line interpolation',
+    },
+    dots: {
+      control: 'boolean',
+      description:
+        'Enabling this option will show small visual indicators for each datapoint in the chart. When disabled the chart will plot a single line.',
+    },
+  },
+} satisfies Meta<any>
+
+export default meta
+
+const randomDatapoint = () => Math.max(3, Math.min(17, ~~(Math.random() * 20)))
+
+const singlePlot = [
+  { label: 'Sep 2022', value: randomDatapoint() },
+  { label: 'Oct 2022', value: randomDatapoint() },
+  { label: 'Nov 2022', value: randomDatapoint() },
+  { label: 'Dec 2022', value: randomDatapoint() },
+  { label: 'Jan 2023', value: randomDatapoint() },
+  { label: 'Feb 2023', value: randomDatapoint() },
+  { label: 'Mar 2023', value: randomDatapoint() },
+  { label: 'Apr 2023', value: randomDatapoint() },
+  { label: 'May 2023', value: randomDatapoint() },
+  { label: 'Jun 2023', value: randomDatapoint() },
+  { label: 'Jul 2023', value: randomDatapoint() },
+  { label: 'Aug 2023', value: randomDatapoint() },
+  { label: 'Sep 2023', value: randomDatapoint() },
+]
+
+const multiplePlots = [
+  { label: 'Sep 2022', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Oct 2022', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Nov 2022', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Dec 2022', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Jan 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Feb 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Mar 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Apr 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'May 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Jun 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Jul 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Aug 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+  { label: 'Sep 2023', a: randomDatapoint(), b: randomDatapoint(), c: randomDatapoint() },
+]
+
+export const Default: StoryObj<any> = {
+  name: 'Simple plot',
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <LineChart
+        className="h-[400px]"
+        data={singlePlot}
+        plots={['value']}
+        config={{
+          value: {
+            type: 'natural',
+            label: 'Value',
+            // 'hsl(var(--chart-1))' would use a theme CSS variable, but Storybook doesn't provide that variable by default.
+            // Define the variable in Storybook's global styles (e.g. preview.css) or use a concrete color here for the story.
+            color: '#2563eb',
+            dot: true,
+          },
+        }}
+        onDatapointClick={(data) => console.log(JSON.stringify(data))}
+      >
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+      </LineChart>
+    </div>
+  ),
+}
+
+export const MultiplePlots: StoryObj<any> = {
+  name: 'Multiple plots',
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <LineChart
+        className="h-[400px] max-w-full"
+        data={multiplePlots}
+        plots={['a', 'b', 'c']}
+        config={{
+          a: {
+            type: 'natural',
+            label: 'a',
+            // 'hsl(var(--chart-1))' would use a theme CSS variable, but Storybook doesn't provide that variable by default.
+            // Define the variable in Storybook's global styles (e.g. preview.css) or use a concrete color here for the story.
+            color: '#2563eb',
+            dot: true,
+          },
+          b: {
+            type: 'natural',
+            label: 'b',
+            color: '#dc2626',
+            dot: true,
+          },
+          c: {
+            type: 'natural',
+            label: 'c',
+            color: '#16a34a',
+            dot: true,
+          },
+        }}
+        onDatapointClick={(data) => console.log(JSON.stringify(data))}
+      >
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+      </LineChart>
+    </div>
+  ),
+}
+
+export const WithAxes: StoryObj<any> = {
+  name: 'With axes',
+  parameters: {
+    docs: {
+      description: {
+        story: `By default rendering the <LineChart /> component will give you the basic plot but nothing else. To render axes you can supply the 'x' or 'y' prop. This can either be a string key of your data, or an object with additional configuration.`,
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <LineChart
+        className="h-[400px]"
+        data={singlePlot}
+        plots={['value']}
+        config={{
+          value: {
+            type: 'natural',
+            label: 'Value',
+            // 'hsl(var(--chart-1))' would use a theme CSS variable, but Storybook doesn't provide that variable by default.
+            // Define the variable in Storybook's global styles (e.g. preview.css) or use a concrete color here for the story.
+            color: '#2563eb',
+            dot: true,
+          },
+        }}
+        x="label"
+        y="value"
+      >
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+      </LineChart>
+    </div>
+  ),
+}
+
+export const WithFormattedAxes: StoryObj<any> = {
+  name: 'With formatted axes',
+  parameters: {
+    docs: {
+      description: {
+        story: `An axis label can be customised by passing in a formatter function. In this example we show the month name for each tick but for January we show the year instead.`,
+      },
+    },
+  },
+  render: () => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <LineChart
+        className="h-[400px]"
+        data={singlePlot}
+        plots={['value']}
+        config={{
+          value: {
+            type: 'natural',
+            label: 'Value',
+            // 'hsl(var(--chart-1))' would use a theme CSS variable, but Storybook doesn't provide that variable by default.
+            // Define the variable in Storybook's global styles (e.g. preview.css) or use a concrete color here for the story.
+            color: '#2563eb',
+            dot: true,
+          },
+        }}
+        x={{ key: 'label', formatter: (value) => (value.startsWith('Jan') ? value.slice(4) : value.slice(0, 3)) }}
+        y="value"
+      >
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+      </LineChart>
+    </div>
+  ),
+}
+
+export const Interactive: StoryObj<any> = {
+  name: 'Interactive Controls',
+  args: {
+    type: 'natural',
+    dots: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use the controls below to interact with the chart and see how different settings affect the visualization.',
+      },
+    },
+  },
+  render: (args: any) => (
+    <div className="flex items-center justify-center border rounded p-4">
+      <LineChart
+        className="h-[400px]"
+        data={singlePlot}
+        plots={['value']}
+        config={{
+          value: {
+            type: args.type as 'natural' | 'linear' | 'step',
+            label: 'Value',
+            // 'hsl(var(--chart-1))' would use a theme CSS variable, but Storybook doesn't provide that variable by default.
+            // Define the variable in Storybook's global styles (e.g. preview.css) or use a concrete color here for the story.
+            color: '#2563eb',
+            dot: args.dots,
+          },
+        }}
+        onDatapointClick={(data) => console.log(JSON.stringify(data))}
+        x="label"
+        y="value"
+      >
+        <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+      </LineChart>
+    </div>
+  ),
+}

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

@@ -0,0 +1,121 @@
+import * as React from 'react'
+import * as Recharts from 'recharts'
+
+import { cn } from '@lib/utils'
+
+import { type ChartConfig, ChartContainer } from './base'
+import { type ValidDataKeysOf } from './util'
+
+export type LineChartProps<
+  T extends object,
+  XKey extends keyof T & string,
+  YKey extends keyof T & string,
+  // These parameters are never provided, we're using the defaults as way of
+  // storing the generic types for use in the rest of the signature.
+  K extends string & keyof T = ValidDataKeysOf<T, number>,
+> = {
+  data: T[]
+  plots: K[]
+  x?: XKey | AxisConfig<T, XKey>
+  y?: YKey | AxisConfig<T, YKey>
+  config: ChartConfig<K, { type: 'linear' | 'natural' | 'step'; dot?: boolean }>
+  /** When `true`, the chart will not be announced by screen readers or given
+   * accessibility enhancements for keyboard navigation. This is intended for
+   * decorative charts that do not convey information to users or for charts that
+   * are only intended for sighted users.
+   */
+  decorative?: boolean
+  /** You can pass additional children to the chart. This can be used to render
+   * things like a tooltip or grid lines.
+   */
+  children?: React.ReactNode
+} & LineChartEvents<T> &
+  React.ComponentProps<'div'>
+
+export type LineChartEvents<T extends object> = {
+  onDatapointClick?: (data: [T, ...T[]]) => void
+}
+
+export type AxisConfig<T extends object, K extends string & keyof T> = {
+  key: K
+  formatter?: (value: T[K]) => string
+  ticks?: boolean
+  divider?: boolean
+}
+
+export function LineChart<T extends object, XKey extends keyof T & string, YKey extends keyof T & string>({
+  data,
+  plots,
+  x,
+  y,
+  config,
+  //
+  onDatapointClick,
+  //
+  className,
+  children,
+  ...delegated
+}: LineChartProps<T, XKey, YKey>) {
+  return (
+    <ChartContainer config={config} className={cn('max-w-full', className)} {...delegated}>
+      <Recharts.LineChart
+        onClick={
+          onDatapointClick &&
+          ((data) => {
+            if (data.activePayload && data.activePayload.length > 0) {
+              // A this point, we know more about the payload than TypeScript does.
+              // We've already confirmed the array has at least one element, and
+              // we already know the payloads will be `T` so we can safely cast
+              // this map to `[T, ...T[]]`.
+              const datapoints = data.activePayload.map(({ payload }) => payload) as [T, ...T[]]
+              onDatapointClick(datapoints)
+            }
+          })
+        }
+        accessibilityLayer
+        data={data}
+        margin={{
+          left: 12,
+          right: 12,
+        }}
+      >
+        <Recharts.CartesianGrid vertical={false} />
+        {x && (
+          <Recharts.XAxis
+            {...(typeof x === 'string'
+              ? { dataKey: x }
+              : {
+                  dataKey: x.key,
+                  tickLine: x.ticks,
+                  axisLine: x.divider,
+                  tickFormatter: x.formatter,
+                })}
+          />
+        )}
+        {y && (
+          <Recharts.YAxis
+            {...(typeof y === 'string'
+              ? { dataKey: y }
+              : {
+                  dataKey: y.key,
+                  tickLine: y.ticks,
+                  axisLine: y.divider,
+                  tickFormatter: y.formatter,
+                })}
+          />
+        )}
+        {children}
+        {plots.map((key) => (
+          <Recharts.Line
+            key={key}
+            dataKey={key}
+            type={config[key].type}
+            stroke={`var(--color-${key})`}
+            strokeWidth={2}
+            dot={config[key].dot ?? false}
+          />
+        ))}
+      </Recharts.LineChart>
+    </ChartContainer>
+  )
+}

package/dist/frontend-core/template/src/components/ui/chart/util.ts

@@ -0,0 +1,3 @@
+export type ValidDataKeysOf<T, Datapoint> = {
+  [K in keyof T]: K extends string ? (T[K] extends Datapoint ? K : never) : never
+}[keyof T]

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

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Checkbox } from './checkbox'
+import { expect, userEvent, screen } from 'storybook/test'
+
+const meta = {
+  title: 'Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'simple', 'iconSolo'],
+    },
+    checkboxSize: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+    checkIcon: {
+      control: 'select',
+      options: ['default', 'check'],
+    },
+    iconStyle: {
+      control: 'select',
+      options: ['default', 'simple', 'solo'],
+    },
+  },
+} satisfies Meta<typeof Checkbox>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { variant: 'default', checkboxSize: 'default', checkIcon: 'default', iconStyle: 'default' },
+  render: (args) => <Checkbox {...args} defaultChecked={true} label="Default" id="default-cb" />,
+}
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Checkbox defaultChecked={true} label="Default" variant="default" id="default-variant" />
+      <Checkbox
+        defaultChecked={true}
+        label="Simple (combined with iconStyle=simple)"
+        variant="simple"
+        iconStyle="simple"
+        id="simple-variant"
+      />
+      <Checkbox
+        defaultChecked={true}
+        label="IconSolo (combined with iconStyle=solo)"
+        variant="iconSolo"
+        iconStyle="solo"
+        id="icon-solo-variant"
+      />
+    </div>
+  ),
+}
+
+export const IconStyles: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Checkbox defaultChecked={true} label="Default" iconStyle="default" id="default-icon-style" />
+      <Checkbox defaultChecked={true} label="Simple" iconStyle="simple" id="simple-icon-style" />
+      <Checkbox defaultChecked={true} label="Solo" iconStyle="solo" />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Checkbox defaultChecked={true} label="Small" checkboxSize="sm" />
+      <Checkbox defaultChecked={true} label="Default" checkboxSize="default" id="default-size" />
+      <Checkbox defaultChecked={true} label="Large" checkboxSize="lg" />
+    </div>
+  ),
+}
+
+export const CheckIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Checkbox defaultChecked={true} label="Default" checkIcon="default" id="default-icon" />
+      <Checkbox defaultChecked={true} label="Check" checkIcon="check" />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled',
+    disabled: true,
+  },
+  render: (args) => <Checkbox {...args} data-testid="disabled-checkbox" />,
+  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/checkbox.tsx

@@ -0,0 +1,79 @@
+import { CheckIcon, Cross1Icon } from '@radix-ui/react-icons'
+
+import { cva, type VariantProps } from 'class-variance-authority'
+
+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',
+      },
+      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)
+
+  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',
+        )}
+      >
+        {checkIcon === 'check' ? <CheckIcon /> : <Cross1Icon />}
+      </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

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

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