@postxl/generators 1.0.11 → 1.0.14

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

@@ -0,0 +1,780 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { DataGrid } from './data-grid'
+import { useDataGrid } from './hooks/use-data-grid'
+import { Checkbox } from '../checkbox/checkbox'
+import { Button } from '../button/button'
+import { MinusIcon, MoonIcon, PlusIcon, SunIcon, TrashIcon } from '@radix-ui/react-icons'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { ColumnDef, getExpandedRowModel } from '@tanstack/react-table'
+import { RowHeightValue } from './data-grid-types'
+import { ISODateRange, isoToLocalDate } from './cell-variants/utils/gantt-timerange-picker'
+import { DataGridViewMenu } from './data-grid-view-menu'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select/select'
+
+const meta = {
+  title: 'DataGrid',
+  component: DataGrid,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {},
+} satisfies Meta<typeof DataGrid>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+type ExampleData = {
+  shortText: string
+  longText: string | null
+  valueLabelSelect: string | null
+  boolean: boolean
+  enumSelect: string
+  multiSelect: string[] | null
+  number: number | null
+  startDate: Date | null
+  endDate: Date | null
+  accessorFn?: 'day' | 'night'
+  customNode?: React.ReactNode
+}
+
+const getCustomReactNodeCell = (time: 'day' | 'night') => {
+  return (
+    <div className="size-full flex items-center justify-center">
+      {time === 'day' ? <SunIcon className="text-yellow-500" /> : <MoonIcon className="text-blue-900" />}
+    </div>
+  )
+}
+
+const initialData: ExampleData[] = [
+  {
+    shortText: 'Reduce energy consumption',
+    longText: 'Implement energy-efficient practices to lower consumption by 15%.',
+    valueLabelSelect: 'ja982ika782',
+    boolean: true,
+    enumSelect: 'Red',
+    multiSelect: ['optionA', 'optionC'],
+    number: 1500,
+    startDate: new Date('2024-12-31'),
+    endDate: new Date('2025-12-31'),
+    accessorFn: 'day',
+    customNode: <div className="size-full flex items-center justify-center text-blue-500 font-bold">Direct Node 1</div>,
+  },
+  {
+    shortText: 'Waste reduction program',
+    longText: 'Launch a waste reduction initiative to decrease waste by 20%.',
+    valueLabelSelect: 'jd81j980905',
+    boolean: false,
+    enumSelect: 'Green',
+    multiSelect: null,
+    number: 800,
+    startDate: null,
+    endDate: null,
+    accessorFn: 'night',
+    customNode: (
+      <div className="size-full flex items-center justify-center">
+        <Button size="xs2" className="h-5">
+          Action
+        </Button>
+      </div>
+    ),
+  },
+  {
+    shortText: 'Water conservation efforts',
+    longText: null,
+    valueLabelSelect: null,
+    boolean: false,
+    enumSelect: 'Amber',
+    multiSelect: ['optionB'],
+    number: 600,
+    startDate: new Date('2025-01-15'),
+    endDate: new Date('2025-10-20'),
+  },
+  {
+    shortText: 'Sustainable sourcing',
+    longText: 'Source 25% of materials from sustainable suppliers.',
+    valueLabelSelect: null,
+    boolean: true,
+    enumSelect: 'Red',
+    multiSelect: ['optionA', 'optionD'],
+    number: 2000,
+    startDate: new Date('2024-10-20'),
+    endDate: null,
+  },
+  {
+    shortText: 'Employee training on sustainability',
+    longText: 'Conduct training sessions to educate employees on sustainable practices.',
+    valueLabelSelect: 'jd0920982ljkna8',
+    boolean: true,
+    enumSelect: 'Green',
+    multiSelect: ['optionA', 'optionC', 'optionD'],
+    number: 300,
+    startDate: new Date('2024-09-15'),
+    endDate: new Date('2024-12-15'),
+    accessorFn: 'day',
+  },
+  {
+    shortText: 'Carbon footprint assessment',
+    longText: 'Evaluate and report the company’s carbon footprint.',
+    valueLabelSelect: 'jad982ja9802ijlljk',
+    boolean: false,
+    enumSelect: 'NA',
+    multiSelect: null,
+    number: null,
+    startDate: new Date('2024-08-31'),
+    endDate: new Date('2024-11-30'),
+  },
+]
+
+const parseDate = (value: string | Date | null): Date | null => {
+  if (!value) return null
+  if (value instanceof Date) return value
+  if (typeof value === 'string') {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+    if (match) {
+      return new Date(Number.parseInt(match[1], 10), Number.parseInt(match[2], 10) - 1, Number.parseInt(match[3], 10))
+    }
+  }
+  const parsed = new Date(value)
+  return Number.isNaN(parsed.getTime()) ? null : parsed
+}
+
+const DataGridDemo = () => {
+  const [data, setData] = useState<ExampleData[]>(initialData)
+  const [selectedGanttRange, setSelectedGanttRange] = useState<ISODateRange | undefined>(undefined)
+
+  const columns = useMemo<ColumnDef<ExampleData>[]>(
+    () => [
+      {
+        id: 'select',
+        header: ({ table }) => (
+          <div className="size-full p-0 m-0 flex items-center gap-2 ">
+            <Checkbox
+              variant={table.getIsSomePageRowsSelected() ? 'default' : 'simple'}
+              iconStyle={table.getIsSomePageRowsSelected() ? 'default' : 'simple'}
+              checkIcon="check"
+              checked={table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected()}
+              onChange={(e) => table.toggleAllPageRowsSelected(!!e.target.checked)}
+            />
+            <Button
+              variant="ghost"
+              className="size-5 hover:[&_svg]:text-background hover:bg-destructive/90"
+              onClick={() => {
+                const toRemove = Array.from(table.getSelectedRowModel().rows)
+                if (toRemove.length === 0) {
+                  return
+                }
+                const idsToRemove = new Set(toRemove.map((row) => row.index))
+                setData((prev) => prev.filter((_, index) => !idsToRemove.has(index)))
+                table.toggleAllRowsSelected(false)
+              }}
+            >
+              <TrashIcon />
+            </Button>
+          </div>
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            variant="simple"
+            iconStyle="simple"
+            checkIcon="check"
+            checked={row.getIsSelected()}
+            onChange={(e) => row.toggleSelected(!!e.target.checked)}
+          />
+        ),
+        size: 70,
+        enableSorting: false,
+        enableHiding: false,
+      },
+      {
+        id: 'shortText',
+        accessorKey: 'shortText',
+        header: 'Short Text',
+        meta: { cell: { variant: 'short-text' } },
+        size: 150,
+      },
+      {
+        id: 'longText',
+        accessorKey: 'longText',
+        header: 'Long Text',
+        meta: { cell: { variant: 'long-text' } },
+        size: 150,
+      },
+      {
+        id: 'boolean',
+        accessorKey: 'boolean',
+        header: 'Boolean',
+        meta: { cell: { variant: 'checkbox' } },
+        size: 150,
+      },
+      {
+        id: 'enumSelect',
+        accessorKey: 'enumSelect',
+        header: 'Enum Select',
+        meta: {
+          cell: {
+            variant: 'select',
+            options: [
+              { label: 'Red', value: 'Red' },
+              { label: 'Amber', value: 'Amber' },
+              { label: 'Green', value: 'Green' },
+              { label: 'NA', value: 'NA' },
+            ],
+          },
+        },
+        size: 150,
+      },
+      {
+        id: 'valueLabelSelect',
+        accessorKey: 'valueLabelSelect',
+        header: 'Value-label Select',
+        meta: {
+          cell: {
+            variant: 'select',
+            options: [
+              { label: 'Max Mustermann', value: 'ja982ika782' },
+              { label: 'Erika Musterfrau', value: 'jd81j980905' },
+              { label: 'John Doe', value: 'jia82813jh4g' },
+              { label: 'Jane Doe', value: '28jnfg8a8x9' },
+              { label: 'Anna Schmidt', value: 'jd0920982ljkna8' },
+              { label: 'Paul Müller', value: 'jad982ja9802ijlljk' },
+            ],
+            hasSearch: true,
+          },
+        },
+        size: 170,
+      },
+      {
+        id: 'multiSelect',
+        accessorKey: 'multiSelect',
+        header: 'Multi Select',
+        meta: {
+          cell: {
+            variant: 'multi-select',
+            options: [
+              { label: 'Option A', value: 'optionA' },
+              { label: 'Option B', value: 'optionB' },
+              { label: 'Option C', value: 'optionC' },
+              { label: 'Option D', value: 'optionD' },
+            ],
+          },
+        },
+        size: 210,
+      },
+      {
+        id: 'number',
+        accessorKey: 'number',
+        header: 'Number',
+        meta: { cell: { variant: 'number' } },
+        size: 150,
+      },
+      {
+        id: 'startDate',
+        accessorKey: 'startDate',
+        header: 'Start Date',
+        meta: { cell: { variant: 'date' } },
+        size: 150,
+      },
+      {
+        id: 'endDate',
+        accessorKey: 'endDate',
+        header: 'End Date',
+        meta: { cell: { variant: 'date' } },
+        size: 150,
+      },
+      {
+        id: 'timeline',
+        header: 'Timeline',
+        accessorFn: (row) => {
+          const start = parseDate(row.startDate as unknown as string | Date | null)
+          const end = parseDate(row.endDate as unknown as string | Date | null)
+
+          if (!start || !end) {
+            return null
+          }
+          return {
+            start,
+            end,
+            barClassName: row.boolean ? 'bg-primary' : 'bg-primary/50',
+          }
+        },
+        meta: {
+          cell: {
+            variant: 'gantt',
+            timelineStart: new Date(new Date().getFullYear() - 1, 6, 0),
+            timelineEnd: new Date(new Date().getFullYear() + 1, 3, 1),
+            dateRangeFrom: selectedGanttRange?.from ? isoToLocalDate(selectedGanttRange.from) : undefined,
+            dateRangeTo: selectedGanttRange?.to ? isoToLocalDate(selectedGanttRange.to) : undefined,
+            onRangeChange: setSelectedGanttRange,
+          },
+        },
+        maxSize: 1000,
+        size: 500,
+      },
+      {
+        id: 'withAccessorFn',
+        accessorFn: (row) => (row.accessorFn ? getCustomReactNodeCell(row.accessorFn) : null),
+        header: 'With accessorFn',
+        meta: { cell: { variant: 'react-node' } },
+        size: 150,
+      },
+      {
+        id: 'customNode',
+        accessorKey: 'customNode',
+        header: 'Custom React Node',
+        meta: { cell: { variant: 'react-node' } },
+        size: 150,
+      },
+    ],
+    [selectedGanttRange],
+  )
+
+  const onRowAdd = useCallback(() => {
+    setData((prev) => [...prev, { shortText: 'New Item', boolean: false, enumSelect: 'NA' } as ExampleData])
+
+    return {
+      rowIndex: data.length,
+      columnId: 'shortText',
+    }
+  }, [data.length])
+
+  const { table, ...dataGridProps } = useDataGrid({
+    columns,
+    data,
+    onDataChange: setData,
+    onRowAdd,
+    initialState: {
+      columnPinning: {
+        left: ['select'],
+      },
+    },
+    enableSearch: true,
+  })
+  return (
+    <div className="w-220 flex flex-col gap-2">
+      <DataGridViewMenu table={table} />
+      <DataGrid {...dataGridProps} table={table} />
+    </div>
+  )
+}
+
+export const Default: Story = {
+  args: {} as any,
+  render: () => <DataGridDemo />,
+}
+
+type PropertyDemoData = {
+  normal: string
+  editable: boolean
+  withAlignment: string
+}
+
+const initialPropertyDemoData: PropertyDemoData[] = [
+  {
+    normal: 'Text',
+    editable: false,
+    withAlignment: 'Aligned Text',
+  },
+  {
+    normal: 'Text',
+    editable: true,
+    withAlignment: 'Aligned Text',
+  },
+  {
+    normal: 'Text',
+    editable: false,
+    withAlignment: 'Aligned Text',
+  },
+]
+
+const DataGridPropertyDemo = () => {
+  const [data, setData] = useState<PropertyDemoData[]>(initialPropertyDemoData)
+
+  const [alignment, setAlignment] = useState<'left' | 'center' | 'right' | undefined>(undefined)
+  const [rowHeight, setRowHeight] = useState<RowHeightValue>('short')
+  const [enableColumnSelection, setEnableColumnSelection] = useState(true)
+
+  const columns = useMemo<ColumnDef<PropertyDemoData>[]>(
+    () => [
+      {
+        id: 'normal',
+        accessorKey: 'normal',
+        header: 'Normal',
+        meta: { cell: { variant: 'short-text' } },
+        size: 150,
+      },
+      {
+        id: 'editable',
+        accessorKey: 'editable',
+        header: 'Editable',
+        meta: {
+          cell: { variant: 'checkbox' },
+        },
+        size: 110,
+      },
+      {
+        id: 'withEditable',
+        accessorFn: (row) => (row.editable ? 'Cell is editable' : 'Cell is not editable'),
+        header: 'With Editable',
+        meta: { cell: { variant: 'short-text' }, editable: (row: PropertyDemoData) => row.editable },
+        size: 150,
+      },
+      {
+        id: 'withAlignment',
+        accessorKey: 'withAlignment',
+        header: 'With Alignment',
+        meta: { cell: { variant: 'short-text' }, align: alignment },
+        size: 150,
+      },
+      {
+        id: 'withClassName',
+        accessorFn: (row) => (row.editable ? 'Row has editable set' : 'Row has not editable set'),
+        header: 'With Class name',
+        meta: {
+          cell: { variant: 'short-text' },
+          className: (row: PropertyDemoData) => (row.editable ? undefined : 'opacity-50'),
+        },
+        size: 170,
+      },
+      {
+        id: 'notSortable',
+        accessorKey: 'normal',
+        header: 'Not sortable',
+        meta: { cell: { variant: 'short-text' } },
+        enableSorting: false,
+        size: 150,
+      },
+      {
+        id: 'notPinnable',
+        accessorKey: 'normal',
+        header: 'Not pinnable',
+        meta: { cell: { variant: 'short-text' } },
+        enablePinning: false,
+        size: 150,
+      },
+      {
+        id: 'notHideable',
+        accessorKey: 'normal',
+        header: 'Not hideable',
+        meta: { cell: { variant: 'short-text' } },
+        enableHiding: false,
+        size: 150,
+      },
+      {
+        id: 'notResizable',
+        accessorKey: 'normal',
+        header: 'Not resizable',
+        meta: { cell: { variant: 'short-text' } },
+        enableResizing: false,
+        size: 150,
+      },
+      {
+        id: 'controlledResizeable',
+        accessorKey: 'normal',
+        header: 'Controlled resizable (200-300 px)',
+        meta: { cell: { variant: 'short-text' } },
+        size: 250,
+        minSize: 200,
+        maxSize: 300,
+      },
+      {
+        id: 'customHeader',
+        header: () => <span className="text-primary font-bold">Custom Header & Cells</span>,
+        cell: ({ row }) => (
+          <a href={`https://www.example.com/${row.index + 1}`} className="text-primary font-bold hover:underline">
+            Custom Cell {row.index + 1}
+          </a>
+        ),
+        size: 180,
+      },
+    ],
+    [alignment],
+  )
+
+  const { table, ...dataGridProps } = useDataGrid({
+    columns,
+    data,
+    onDataChange: setData,
+    enableSearch: true,
+    rowHeight,
+    enableColumnSelection,
+  })
+
+  return (
+    <div className="w-220 flex flex-col gap-2">
+      <div className="flex gap-2 items-center flex-wrap">
+        <Select value={alignment} onValueChange={(value) => setAlignment(value as 'left' | 'center' | 'right')}>
+          <SelectTrigger size="sm" className="w-[150px]">
+            Select alignment
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="left">Left</SelectItem>
+            <SelectItem value="center">Center</SelectItem>
+            <SelectItem value="right">Right</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <Select value={rowHeight} onValueChange={(value) => setRowHeight(value as RowHeightValue)}>
+          <SelectTrigger size="sm" className="w-[150px]">
+            Row height
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="short">Short</SelectItem>
+            <SelectItem value="medium">Medium</SelectItem>
+            <SelectItem value="tall">Tall</SelectItem>
+            <SelectItem value="extra-tall">Extra Tall</SelectItem>
+          </SelectContent>
+        </Select>
+
+        <div className="flex items-center gap-2 border rounded-md px-3 py-1 h-8 text-sm bg-background">
+          <Checkbox
+            id="col-select"
+            checked={enableColumnSelection}
+            onChange={(e) => setEnableColumnSelection(e.target.checked)}
+          />
+          <label htmlFor="col-select">Enable Column Selection</label>
+        </div>
+
+        <DataGridViewMenu table={table} />
+      </div>
+      <DataGrid {...dataGridProps} table={table} />
+    </div>
+  )
+}
+
+export const PropertyDemo: Story = {
+  args: {} as any,
+  render: () => <DataGridPropertyDemo />,
+}
+
+type ExpandableData = {
+  id: string
+  name: string
+  foundedYear?: number
+  type: 'company' | 'department' | 'team' | 'employee'
+  role?: string
+  salary?: number
+  subRows?: ExpandableData[]
+}
+
+const expandableData: ExpandableData[] = [
+  {
+    id: 'company-1',
+    name: 'Tech Corp',
+    foundedYear: 1998,
+    type: 'company',
+    subRows: [
+      {
+        id: 'dept-1',
+        name: 'Engineering',
+        foundedYear: 1999,
+        type: 'department',
+        subRows: [
+          {
+            id: 'team-1',
+            name: 'Frontend Team',
+            foundedYear: 2010,
+            type: 'team',
+            subRows: [
+              {
+                id: 'emp-1',
+                name: 'Alice Johnson',
+                role: 'Senior Frontend Engineer',
+                type: 'employee',
+                salary: 90000,
+              },
+              {
+                id: 'emp-2',
+                name: 'Bob Smith',
+                role: 'Frontend Engineer',
+                type: 'employee',
+                salary: 75000,
+              },
+            ],
+          },
+          {
+            id: 'team-2',
+            name: 'Backend Team',
+            foundedYear: 2008,
+            type: 'team',
+            subRows: [
+              {
+                id: 'emp-3',
+                name: 'Charlie Brown',
+                role: 'Backend Engineer',
+                type: 'employee',
+                salary: 80000,
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'dept-2',
+        name: 'Design',
+        foundedYear: 2005,
+        type: 'department',
+        subRows: [
+          {
+            id: 'emp-4',
+            name: 'Diana Miller',
+            role: 'Product Designer',
+            type: 'employee',
+            salary: 70000,
+          },
+        ],
+      },
+    ],
+  },
+]
+
+function aggregateSalaries(data: ExpandableData[]): ExpandableData[] {
+  return data.map((node) => {
+    if (!node.subRows || node.subRows.length === 0) {
+      return {
+        ...node,
+        salary: node.salary ?? 0,
+      }
+    }
+    const aggregatedSubRows = aggregateSalaries(node.subRows)
+    const totalSalary = aggregatedSubRows.reduce((sum, child) => sum + (child.salary ?? 0), 0)
+    return {
+      ...node,
+      subRows: aggregatedSubRows,
+      salary: totalSalary,
+    }
+  })
+}
+
+const aggregatedData = aggregateSalaries(expandableData)
+
+const DataGridExpandableDemo = () => {
+  const [data] = useState(aggregatedData)
+
+  const columns = useMemo<ColumnDef<ExpandableData>[]>(
+    () => [
+      {
+        id: 'name',
+        accessorKey: 'name',
+        header: 'Name',
+        cell: ({ row, getValue }) => {
+          const indent = row.depth * 16
+          const canExpand = row.getCanExpand()
+          const isExpanded = row.getIsExpanded()
+
+          return (
+            <div className="size-full flex items-center px-2">
+              <div style={{ width: indent, minWidth: indent }} />
+              {canExpand ? (
+                <>
+                  <Button
+                    variant="ghost"
+                    size="iconSm"
+                    className="size-5.5 mr-1"
+                    onClick={row.getToggleExpandedHandler()}
+                    aria-label={isExpanded ? 'Collapse' : 'Expand'}
+                  >
+                    {isExpanded ? <MinusIcon /> : <PlusIcon />}
+                  </Button>
+                  <span className="truncate font-semibold">{getValue<string>()}</span>
+                </>
+              ) : (
+                <span className="truncate">{getValue<string>()}</span>
+              )}
+            </div>
+          )
+        },
+        meta: { cell: { variant: 'short-text' } },
+        size: 200,
+      },
+      {
+        id: 'type',
+        accessorKey: 'type',
+        header: 'Type',
+        meta: {
+          cell: {
+            variant: 'select',
+            options: [
+              { label: 'Company', value: 'company' },
+              { label: 'Department', value: 'department' },
+              { label: 'Team', value: 'team' },
+              { label: 'Employee', value: 'employee' },
+            ],
+          },
+        },
+        size: 150,
+      },
+      {
+        id: 'foundedYear',
+        accessorKey: 'foundedYear',
+        header: 'Founded Year',
+        meta: { cell: { variant: 'number' } },
+        size: 150,
+      },
+      {
+        id: 'salary',
+        accessorKey: 'salary',
+        header: 'Salary',
+        meta: {
+          cell: {
+            variant: 'number',
+            suffix: ' €',
+            fallbackValue: 'N/A',
+          },
+          className(row) {
+            return row?.type === 'employee' ? undefined : 'font-semibold'
+          },
+          editable(row) {
+            return row?.type === 'employee'
+          },
+        },
+        size: 150,
+      },
+      {
+        id: 'role',
+        accessorKey: 'role',
+        header: 'Role',
+        meta: { cell: { variant: 'short-text' } },
+        size: 150,
+      },
+    ],
+    [],
+  )
+
+  const defaultExpanded = useMemo(() => {
+    const expanded: Record<string, boolean> = {}
+    for (const p of data) {
+      if (p.subRows && p.subRows.length > 0) {
+        expanded[p.id] = true
+      }
+    }
+    return expanded
+  }, [data])
+
+  const { table, ...dataGridProps } = useDataGrid({
+    columns,
+    data,
+    getRowId: (row) => row.id,
+    getSubRows: (row) => row.subRows,
+    getExpandedRowModel: getExpandedRowModel(),
+    initialState: { expanded: defaultExpanded, columnPinning: { left: ['name'] } },
+  })
+
+  useEffect(() => {
+    if (table && defaultExpanded) {
+      table.setExpanded(defaultExpanded)
+    }
+  }, [table, defaultExpanded])
+
+  return (
+    <div className="w-220 flex flex-col gap-2">
+      <DataGrid {...dataGridProps} table={table} />
+    </div>
+  )
+}
+
+export const ExpandableRows: Story = {
+  args: {} as any,
+  render: () => <DataGridExpandableDemo />,
+}