@linzjs/step-ag-grid 29.11.3 → 29.12.0

package/src/stories/grid/GridSorting.stories.tsx

@@ -0,0 +1,189 @@
+import '../../styles/GridTheme.scss';
+import '../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+import { expect } from 'storybook/test';
+
+import {
+  ColDefT,
+  compareNaturalInsensitive,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridProps,
+  GridUpdatingContextProvider,
+  GridWrapper,
+  wait,
+} from '../..';
+import {
+  clickColumnHeaderToSort,
+  gridColumnValues,
+  waitForGridReady,
+  waitForGridRows,
+} from '../../utils/__tests__/storybookTestUtil';
+
+export default {
+  title: 'Components / Grids',
+  component: Grid,
+  args: {
+    quickFilter: true,
+    quickFilterValue: '',
+    quickFilterPlaceholder: 'Quick filter...',
+    selectable: false,
+    rowSelection: 'single',
+  }, // Storybook hangs otherwise
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 1024, height: 400, display: 'flex', flexDirection: 'column' }}>
+        <GridUpdatingContextProvider>
+          <GridContextProvider>
+            <Story />
+          </GridContextProvider>
+        </GridUpdatingContextProvider>
+      </div>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+interface ITestRow {
+  id: number;
+  numeric?: number;
+  text?: string;
+}
+
+const GridReadOnlyTemplate: StoryFn<typeof Grid<ITestRow>> = (props: GridProps<ITestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        lockVisible: true,
+      }),
+      GridCell({
+        field: 'numeric',
+        headerName: 'Numeric',
+      }),
+      GridCell({
+        field: 'text',
+        headerName: 'Text',
+      }),
+      GridCell({
+        colId: 'customComparatorText',
+        headerName: 'Cust. comp. id as text',
+        valueFormatter: ({ data }) => data?.text ?? '',
+        comparator: (_v1, _v2, n1, n2) => compareNaturalInsensitive(String(n1.data?.id), String(n2.data?.id)) ?? 0,
+      }),
+      GridCell({
+        colId: 'customComparatorNumeric',
+        headerName: 'Cust. comp. abs number',
+        valueFormatter: ({ data }) => String(data?.numeric ?? ''),
+        comparator: (_v1, _v2, n1, n2) => {
+          return compareNaturalInsensitive(n1.data?.numeric, n2.data?.numeric) ?? 0;
+        },
+      }),
+    ],
+    [],
+  );
+
+  const [rowData] = useState<ITestRow[]>([
+    { id: 1009, numeric: -1.1, text: 'ade' },
+    { id: 1000, numeric: 1, text: 'ade' },
+    { id: 1001, numeric: 11, text: 'cdc' },
+    { id: 1002, numeric: 21, text: '2' },
+    { id: 1003, numeric: 2.1, text: '10' },
+    { id: 1004, numeric: 2.01, text: 'b' },
+    { id: 1005, numeric: 2.21, text: 'b' },
+    { id: 1006, numeric: 3, text: undefined },
+    { id: 1008, numeric: 3, text: 'e' },
+    { id: 1007, numeric: undefined, text: 'e' },
+  ]);
+
+  return (
+    <GridWrapper maxHeight={400}>
+      <Grid
+        data-testid={'readonly'}
+        {...props}
+        selectable={true}
+        enableClickSelection={true}
+        enableSelectionWithoutKeys={true}
+        autoSelectFirstRow={true}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        rowData={rowData}
+      />
+    </GridWrapper>
+  );
+};
+
+export const Sorting = GridReadOnlyTemplate.bind({});
+Sorting.play = async (context) => {
+  const { canvasElement } = context;
+  await waitForGridReady(context);
+  await waitForGridRows({ grid: canvasElement });
+
+  const test = async (colId: string | null, expected: string[] | null, idExpected?: string[]) => {
+    if (colId !== null) {
+      await clickColumnHeaderToSort(colId, canvasElement);
+      await wait(500);
+      expected && expect(gridColumnValues(colId, canvasElement)).toEqual(expected);
+    }
+    idExpected && expect(gridColumnValues('id', canvasElement)).toEqual(idExpected);
+  };
+
+  // Default sort order
+  await test(null, null, ['1009', '1000', '1001', '1002', '1003', '1004', '1005', '1006', '1008', '1007']);
+
+  await test('numeric', ['–', '-1.1', '1', '2.01', '2.1', '2.21', '3', '3', '11', '21']);
+  await test('numeric', ['21', '11', '3', '3', '2.21', '2.1', '2.01', '1', '-1.1', '–']);
+
+  await test(
+    'text',
+    ['–', '2', '10', 'ade', 'ade', 'b', 'b', 'cdc', 'e', 'e'],
+    ['1006', '1002', '1003', '1000', '1009', '1004', '1005', '1001', '1007', '1008'],
+  );
+  await test(
+    'text',
+    ['e', 'e', 'cdc', 'b', 'b', 'ade', 'ade', '10', '2', '–'],
+    ['1008', '1007', '1001', '1005', '1004', '1009', '1000', '1003', '1002', '1006'],
+  );
+
+  await test('customComparatorText', null, [
+    '1000',
+    '1001',
+    '1002',
+    '1003',
+    '1004',
+    '1005',
+    '1006',
+    '1007',
+    '1008',
+    '1009',
+  ]);
+  await test('customComparatorText', null, [
+    '1009',
+    '1008',
+    '1007',
+    '1006',
+    '1005',
+    '1004',
+    '1003',
+    '1002',
+    '1001',
+    '1000',
+  ]);
+
+  await test('customComparatorNumeric', ['–', '-1.1', '1', '2.01', '2.1', '2.21', '3', '3', '11', '21']);
+  await test('customComparatorNumeric', ['21', '11', '3', '3', '2.21', '2.1', '2.01', '1', '-1.1', '–']);
+};

package/src/stories/grid/gridAutosize/GridAutoSize.stories.tsx

@@ -0,0 +1,84 @@
+import '../../../styles/GridTheme.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+          flex: 1,
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      Auto-size. Col 1 should autosize, Col 2 should flex to fill.
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _AutoSize = GridPopoutEditGenericTemplate.bind({});
+_AutoSize.play = waitForGridReady;

package/src/stories/grid/gridAutosize/GridFitSize.stories.tsx

@@ -0,0 +1,84 @@
+import '../../../styles/GridTheme.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      Equisized flex columns spread across container
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        sizeColumns={'fit'}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _FitSize = GridPopoutEditGenericTemplate.bind({});
+_FitSize.play = waitForGridReady;

package/src/stories/grid/gridAutosize/GridFitSizeFlex.stories.tsx

@@ -0,0 +1,86 @@
+import '../../../styles/GridTheme.scss';
+import '../../../styles/index.scss';
+import '@linzjs/lui/dist/scss/base.scss';
+import '@linzjs/lui/dist/fonts';
+
+import { Meta, StoryFn } from '@storybook/react-vite';
+import { useMemo, useState } from 'react';
+
+import { ColDefT, Grid, GridCell, GridContextProvider, GridProps, GridUpdatingContextProvider } from '../../..';
+import { waitForGridReady } from '../../../utils/__tests__/storybookTestUtil';
+import { FormTest, IFormTestRow } from '../FormTest';
+
+export default {
+  title: 'Components / Grid Size',
+  component: Grid,
+  args: {
+    quickFilterValue: '',
+    selectable: true,
+  },
+  decorators: [
+    (Story) => (
+      <GridUpdatingContextProvider>
+        <GridContextProvider>
+          <Story />
+        </GridContextProvider>
+      </GridUpdatingContextProvider>
+    ),
+  ],
+} as Meta<typeof Grid>;
+
+const GridPopoutEditGenericTemplate: StoryFn<typeof Grid<IFormTestRow>> = (props: GridProps<IFormTestRow>) => {
+  const [externalSelectedItems, setExternalSelectedItems] = useState<any[]>([]);
+  const columnDefs: ColDefT<IFormTestRow>[] = useMemo(
+    () => [
+      GridCell({
+        field: 'id',
+        headerName: 'Id',
+        flex: 2,
+      }),
+      GridCell(
+        {
+          field: 'name',
+          headerName: 'Popout Generic Edit',
+          flex: 1,
+        },
+        {
+          multiEdit: true,
+          editor: FormTest,
+          editorParams: {},
+        },
+      ),
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    { id: 1000, name: 'IS IS DP12345', nameType: 'IS', numba: 'IX', plan: 'DP 12345' },
+    {
+      id: 1001,
+      name: 'PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523PEG V SD523',
+      nameType: 'PEG',
+      numba: 'V',
+      plan: 'SD 523',
+    },
+  ] as IFormTestRow[]);
+
+  return (
+    <>
+      1:3 flex columns spread across container. These columns should not be the same size.
+      <Grid
+        {...props}
+        externalSelectedItems={externalSelectedItems}
+        setExternalSelectedItems={setExternalSelectedItems}
+        columnDefs={columnDefs}
+        sizeColumns={'fit'}
+        hideSelectColumn={true}
+        selectable={true}
+        rowData={rowData}
+        domLayout={'autoHeight'}
+      />
+    </>
+  );
+};
+
+export const _FitSizeFlex = GridPopoutEditGenericTemplate.bind({});
+_FitSizeFlex.play = waitForGridReady;

package/src/stories/grid/gridAutosize/ShowPanelResizingAgGrid/ShowPanelResizingStepAgGrid.tsx

@@ -10,13 +10,15 @@ import {
   PanelHeader,
   PanelsContextProvider,
 } from '@linzjs/windows';
-import { useContext, useMemo, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 
 import {
   ColDefT,
   Grid,
   GridCell,
   GridContextProvider,
+  GridFilterColumnsToggle,
+  GridFilters,
   GridIcon,
   GridPopoverMenu,
   GridPopoverMessage,
@@ -93,11 +95,13 @@ export const PanelContentsWithResize = () => {
       GridCell({
         field: 'age',
         headerName: 'Age',
+        width: 80,
+        flex: 1,
       }),
       GridCell({
         field: 'desc',
         headerName: 'Description',
-        flex: 1,
+        flex: 2,
       }),
       GridPopoverMessage(
         {
@@ -148,28 +152,57 @@ export const PanelContentsWithResize = () => {
     [],
   );
 
-  const [rowData] = useState([
-    /* Your grid row data */
-    /* exclude */
-    {
-      id: 1000,
-      position: 'Tester',
-      age: 30,
-      desc: 'Tests application',
-      dd: '1',
-    },
-    { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
-    { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
-    /* exclude */
-  ]);
+  const [rowData, setRowData] = useState<ITestRow[] | null>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setRowData([
+        {
+          id: 1000,
+          position: 'Tester',
+          age: 30,
+          desc: 'Tests application',
+          dd: '1',
+        },
+        { id: 1001, position: 'Developer', age: 12, desc: 'Develops application', dd: '2' },
+        { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
+        /* exclude */
+      ]);
+    }, 2000);
+    setTimeout(() => {
+      setRowData([
+        {
+          id: 1000,
+          position: 'Tester',
+          age: 30,
+          desc: 'Tests application',
+          dd: '1',
+        },
+        {
+          id: 1001,
+          position: 'Developer DeveloperDeveloper DeveloperDeveloper DeveloperDeveloper DeveloperDeveloper Developer',
+          age: 12,
+          desc: 'Develops application',
+          dd: '2',
+        },
+        { id: 1002, position: 'Manager', age: 65, desc: 'Manages', dd: '3' },
+        /* exclude */
+      ]);
+    }, 5000);
+  }, []);
 
   return (
     <GridUpdatingContextProvider>
       <GridContextProvider>
         <GridWrapper>
+          <GridFilters>
+            <GridFilterColumnsToggle />
+          </GridFilters>
           <Grid
             columnDefs={columnDefs}
             rowData={rowData}
+            selectable={true}
+            hideSelectColumn={true}
             onContentSize={initialResizePanel}
             sizeColumns={'auto-skip-headers'}
           />

package/src/utils/__tests__/storybookTestUtil.ts

@@ -1,4 +1,31 @@
-import { expect, waitFor } from 'storybook/test';
+import { sortBy } from 'lodash-es';
+import { expect, userEvent, waitFor } from 'storybook/test';
+
+import { findQuick, getAllQuick } from './testQuick';
 
 export const waitForGridReady = ({ canvasElement }: { canvasElement: HTMLElement }) =>
   waitFor(() => expect(canvasElement.querySelector('.Grid-ready')).toBeInTheDocument(), { timeout: 5000 });
+
+export const waitForGridRows = async (props?: { grid?: HTMLElement; timeout?: number }) =>
+  waitFor(() => expect(getAllQuick({ classes: '.ag-row' }, props?.grid).length > 0).toBe(true), {
+    timeout: props?.timeout ?? 4000,
+  });
+
+export const clickColumnHeaderToSort = async (colId: string, within: HTMLElement): Promise<void> => {
+  const user = userEvent.setup({
+    delay: 100,
+  });
+  const header = await findQuick({ selector: `.ag-header-cell[col-id="${colId}"]` }, within);
+  await expect(header).toBeInTheDocument();
+  // For some reason clicks in storybook don't trigger ag-grid, but manual clicks do
+  await user.click(header);
+  await user.keyboard('{Enter}');
+};
+
+export const gridColumnValues = (colId: string, within: HTMLElement): string[] => {
+  return sortBy(
+    getAllQuick({ tagName: `[col-id="${colId}"]`, classes: `.ag-cell` }, within),
+    // @ts-expect-error css style type
+    (el) => el.parentElement?.attributeStyleMap.get('transform')?.[0]?.y.value,
+  ).map((cell) => cell.innerText);
+};

package/src/utils/__tests__/testQuick.ts

@@ -25,6 +25,7 @@ export interface IQueryQuick {
   role?: string;
   classes?: string;
   child?: IQueryQuick;
+  selector?: string;
 }
 
 const escapeSelectorParam = (param: string): string => param.replace(/["\\]/g, '\\$&');
@@ -51,6 +52,7 @@ const quickSelector = <T extends HTMLElement>(
   let lastIQueryQuick = props;
   for (let loop: IQueryQuick | undefined = props; loop; loop = loop.child) {
     lastIQueryQuick = loop;
+    loop.selector && (selector += loop.selector);
     loop.tagName && (selector += loop.tagName);
     loop.ariaLabel && (selector += `[aria-label='${escapeSelectorParam(loop.ariaLabel)}']`);
     loop.role && (selector += `[role="${escapeSelectorParam(loop.role)}"]`);

package/src/utils/util.ts

@@ -1,4 +1,5 @@
 import { isEmpty, negate } from 'lodash-es';
+import natsort from 'natsort';
 
 export const isNotEmpty = negate(isEmpty);
 
@@ -58,3 +59,21 @@ export const sanitiseFileName = (filename: string): string => {
   if (!fileExt) return valid.slice().slice(0, 64);
   return valid.slice(0, -fileExt.length - 1).slice(0, 64) + '.' + fileExt;
 };
+
+const naturalSortInsensitive = natsort({ insensitive: true });
+const santitizeNaturalValue = (v: string | number | null | undefined): string => {
+  if (v === '–' || v === '-' || v == null) {
+    return '';
+  }
+  return String(v);
+};
+export const compareNaturalInsensitive = (
+  a?: object | string | number | null,
+  b?: object | string | number | null,
+): number => {
+  if ((a !== null && typeof a === 'object') || (b !== null && typeof b === 'object')) {
+    // We can't compare objects
+    return 0;
+  }
+  return naturalSortInsensitive(santitizeNaturalValue(a), santitizeNaturalValue(b));
+};