@postxl/generators 1.1.1 → 1.2.0

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

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