@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/src/lib/stepper/stepper.tsx

@@ -0,0 +1,92 @@
+import {
+  ChangeEventHandler,
+  DetailedHTMLProps,
+  InputHTMLAttributes,
+} from 'react'
+
+import { IndicatorType, IValidator, validateClassName } from '@sebgroup/extract'
+
+export interface StepperProps
+  extends DetailedHTMLProps<
+    InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement
+  > {
+  id?: string
+  value?: string | number
+  onChange?: ChangeEventHandler<HTMLInputElement>
+  label?: string
+  description?: string
+  statusMessage?: string
+  validator?: IValidator
+  onIncrease?: () => void
+  onDecrease?: () => void
+  testId?: string
+}
+
+// TODO: Should be named "Numeric input" instead of stepper?
+
+export function Stepper({
+  id,
+  label,
+  description,
+  statusMessage,
+  validator,
+  value = 0,
+  onChange = () => undefined,
+  onIncrease = () => undefined,
+  onDecrease = () => undefined,
+  testId,
+  ...props
+}: StepperProps) {
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      onIncrease()
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      onDecrease()
+    }
+  }
+
+  const PrimitiveStepper = (
+    <div
+      data-testid={testId}
+      className={`group group-border group-stepper ${
+        validator && validateClassName(validator?.indicator as IndicatorType)
+      }`}
+    >
+      <button type="button" onClick={onDecrease}>
+        -
+      </button>
+      <input
+        id={id}
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        onChange={onChange}
+        onFocus={({ target }) => target.select()}
+        onKeyDown={handleKeyDown}
+        placeholder="0"
+        value={value}
+        {...props}
+      />
+      <button type="button" onClick={onIncrease}>
+        +
+      </button>
+    </div>
+  )
+
+  if (!label && !description && !statusMessage && !validator)
+    return PrimitiveStepper
+
+  return (
+    <div className="form-group">
+      {label && <label htmlFor={id}>{label}</label>}
+      {description && <span className="form-info">{description}</span>}
+      <div className="stepper-wrapper">
+        {PrimitiveStepper}
+        {validator && <span className="form-info">{validator.message}</span>}
+      </div>
+    </div>
+  )
+}

package/src/lib/table/components/Table.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+
+import { Table } from './Table'
+
+describe('Component: Table', () => {
+  it('Should render simple table', async () => {
+    render(<Table />)
+    expect(screen.getByRole('table')).not.toBeNull()
+  })
+})

package/src/lib/table/components/Table.tsx

@@ -0,0 +1,63 @@
+import React, { JSX } from 'react'
+import classnames from 'classnames'
+
+import {
+  SortedColumn,
+  TableContext,
+  TableState,
+} from './context/TableContextProvider'
+
+export type TableProps = JSX.IntrinsicElements['table'] & {
+  /** callback when row is selected */
+  onRowSelect?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    rowKey: string,
+  ) => void
+  /** callback when row is expanded */
+  onRowExpand?: (isExpanded: boolean, rowKey: string) => void
+  /** callback when column is sorted */
+  onSort?: (sortedColumn: SortedColumn) => void
+  /** preset sorted column */
+  sortedColumn?: SortedColumn | null
+}
+
+export const Table = React.memo(
+  React.forwardRef<HTMLTableElement, TableProps>(
+    (
+      {
+        onRowSelect,
+        onRowExpand,
+        onSort,
+        sortedColumn = null,
+        className,
+        children,
+        ...props
+      },
+      ref,
+    ): React.ReactElement => {
+      const [tableState, setTableState] = React.useState<TableState>({
+        expandedRows: [],
+        sortedColumn,
+      })
+      return (
+        <TableContext.Provider
+          value={{
+            tableState,
+            onSort,
+            onRowSelect,
+            onRowExpand,
+            setTableState,
+          }}
+        >
+          <table
+            {...props}
+            className={classnames('table', className)}
+            ref={ref}
+          >
+            {children}
+          </table>
+        </TableContext.Provider>
+      )
+    },
+  ),
+)

package/src/lib/table/components/context/TableContextProvider.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import { SortDirection } from '../table-typings'
+
+export interface SortedColumn<T = any> {
+  accessor?: keyof T
+  sortDirection: SortDirection
+}
+
+export interface TableState {
+  sortedColumn: SortedColumn | null
+  expandedRows: Array<string>
+}
+
+export type TableContextType = {
+  tableState: TableState
+  setTableState: (newState: TableState) => void
+  onRowSelect?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+    rowKey: string,
+  ) => void
+  onRowExpand?: (isExpanded: boolean, rowKey: string) => void
+  onSort?: (sortedColumn: SortedColumn) => void
+}
+
+const defaultContext: any = {
+  tableState: {
+    sortedColumn: null,
+    expandedRows: [],
+  },
+  setTableState: null,
+  onRowSelect: null,
+  onRowExpand: null,
+  onSort: null,
+}
+
+export const TableContext: React.Context<TableContextType> =
+  React.createContext(defaultContext)
+
+export const useTableContext = () => {
+  return React.useContext(TableContext)
+}

package/src/lib/table/components/index.ts

@@ -0,0 +1,9 @@
+export * from './table-typings'
+export * from './context/TableContextProvider'
+export * from './parts/helperFunctions'
+export * from './parts/TableCell'
+export * from './parts/TableBody'
+export * from './parts/TableHeader'
+export * from './parts/TableHeaderCell'
+export * from './parts/TableRow'
+export * from './Table'

package/src/lib/table/components/parts/TableBody/TableBody.spec.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+
+import { TableRow } from '../TableRow'
+import { TableBody } from './TableBody'
+
+describe('Component: Table body', () => {
+  it('Should render correctly', () => {
+    render(
+      <table>
+        <TableBody />
+      </table>,
+    )
+    expect(document.body.querySelector('tbody')).toBeInTheDocument()
+  })
+
+  it('Should render children correctly', () => {
+    render(
+      <table>
+        <TableBody>
+          <TableRow />
+        </TableBody>
+      </table>,
+    )
+    expect(document.body.querySelector('tr')).toBeInTheDocument()
+  })
+
+  it('Should render append parent key to sub row correctly', () => {
+    const uniqueKey = 'test'
+    render(
+      <table>
+        <TableBody>
+          <TableRow uniqueKey={uniqueKey}></TableRow>
+          <TableRow isSubRow></TableRow>
+        </TableBody>
+      </table>,
+    )
+    expect(document.body.querySelector('.sub-row')).toBeInTheDocument()
+  })
+
+  it('Should render append parent key to sub row correctly within fragment', () => {
+    const uniqueKey = 'test'
+    render(
+      <table>
+        <TableBody>
+          <React.Fragment>
+            <TableRow uniqueKey={uniqueKey}></TableRow>
+            <TableRow isSubRow></TableRow>
+            <tr className="custom" />
+          </React.Fragment>
+        </TableBody>
+      </table>,
+    )
+    expect(document.body.querySelector('.sub-row')).toBeInTheDocument()
+    expect(document.body.querySelector('.custom')).toBeInTheDocument()
+  })
+})

package/src/lib/table/components/parts/TableBody/TableBody.tsx

@@ -0,0 +1,61 @@
+import React, { JSX } from 'react'
+
+import { TableRowProps } from '../TableRow/TableRow'
+
+export type TableBodyProps = JSX.IntrinsicElements['tbody']
+
+const TableBody = React.forwardRef(
+  (
+    { ...props }: TableBodyProps,
+    ref: React.ForwardedRef<HTMLTableSectionElement>,
+  ) => {
+    let parentKey: string
+
+    /**
+     * clone table row by appending parent key to sub row if necessary
+     * @param Child react element
+     * @param index index number
+     */
+    const cloneTableRow = React.useCallback(
+      (Child: React.ReactElement<any>, index: number) => {
+        const isTableRow: boolean =
+          React.isValidElement<React.FC<TableRowProps>>(Child) &&
+          (Child?.type as any)?.displayName === 'TableRow'
+        if (isTableRow && !Child.props.isSubRow) {
+          parentKey = Child.props.uniqueKey
+        }
+        return isTableRow
+          ? React.cloneElement<any>(Child, { index, parentKey })
+          : Child
+      },
+      [],
+    )
+
+    return (
+      <tbody {...props} ref={ref}>
+        {React.Children.map(
+          props.children as React.ReactElement,
+          (Child: React.ReactElement<any>, i: number) => {
+            if (Child?.type === React.Fragment) {
+              return React.cloneElement<any>(Child, {
+                children: React.Children.map(
+                  Child.props.children,
+                  (
+                    FragmentChild: React.ReactElement<any>,
+                    fragmentIndex: number,
+                  ) => cloneTableRow(FragmentChild, fragmentIndex),
+                ),
+              })
+            } else {
+              return cloneTableRow(Child, i)
+            }
+          },
+        )}
+      </tbody>
+    )
+  },
+)
+
+TableBody.displayName = 'TableBody'
+
+export { TableBody }

package/src/lib/table/components/parts/TableBody/index.ts

@@ -0,0 +1 @@
+export * from './TableBody'

package/src/lib/table/components/parts/TableCell/TableCell.spec.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react'
+
+import { TableCell } from './TableCell'
+
+describe('Component: Table cell', () => {
+  it('Should render correctly', () => {
+    render(
+      <table>
+        <tbody>
+          <tr>
+            <TableCell>TableCell</TableCell>
+          </tr>
+        </tbody>
+      </table>,
+    )
+    expect(screen.getByText('TableCell')).toBeInTheDocument()
+  })
+})

package/src/lib/table/components/parts/TableCell/TableCell.tsx

@@ -0,0 +1,14 @@
+import React, { JSX } from 'react'
+
+export type TableCellProps = JSX.IntrinsicElements['td']
+
+export const TableCell = React.forwardRef(
+  (
+    { ...props }: TableCellProps,
+    ref: React.ForwardedRef<HTMLTableCellElement>,
+  ) => {
+    return <td {...props} ref={ref} />
+  },
+)
+
+TableCell.displayName = 'TableCell'

package/src/lib/table/components/parts/TableCell/index.ts

@@ -0,0 +1 @@
+export * from './TableCell'

package/src/lib/table/components/parts/TableHeader/TableHeader.spec.tsx

@@ -0,0 +1,59 @@
+import { render } from '@testing-library/react'
+
+import { TableContext } from '../../context/TableContextProvider'
+import { TableRow } from '../TableRow'
+import { TableHeader } from './TableHeader'
+
+describe('Component: Table header', () => {
+  it('Should render correctly', () => {
+    render(
+      <table>
+        <TableHeader />
+      </table>,
+    )
+    expect(document.body.querySelector('thead')).toBeInTheDocument()
+  })
+
+  it('Should display empty cell if row is the only header row', () => {
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: null,
+      onRowSelect: jest.fn(),
+      onRowExpand: jest.fn(),
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <table>
+          <TableHeader>
+            <TableRow />
+          </TableHeader>
+        </table>
+      </TableContext.Provider>,
+    )
+    expect(document.body.querySelectorAll('th').length).toEqual(2)
+  })
+
+  it('Should only display select if row is the header row', () => {
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: jest.fn(),
+      onRowSelect: jest.fn(),
+      onRowExpand: jest.fn(),
+      onSort: null,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <table>
+          <TableHeader>
+            <TableRow isHeaderRow />
+            <TableRow />
+            <tr className="custom" />
+          </TableHeader>
+        </table>
+      </TableContext.Provider>,
+    )
+    expect(document.body.querySelectorAll('input').length).toEqual(1)
+    expect(document.body.querySelector('.custom')).not.toBeNull()
+  })
+})

package/src/lib/table/components/parts/TableHeader/TableHeader.tsx

@@ -0,0 +1,36 @@
+import React, { JSX } from 'react'
+
+import { TableRowProps } from '../TableRow'
+
+export type TableHeaderProps = JSX.IntrinsicElements['thead']
+
+const TableHeader = React.forwardRef(
+  (
+    { ...props }: TableHeaderProps,
+    ref: React.ForwardedRef<HTMLTableSectionElement>,
+  ) => {
+    return (
+      <thead {...props} ref={ref}>
+        {React.Children.count(props.children) === 1 &&
+        React.isValidElement<TableRowProps>(props.children)
+          ? React.cloneElement<any>(props.children, {
+              isHeaderRow: true,
+              index: -1,
+            })
+          : React.Children.map(props.children, (Child, i: number) => {
+              return React.isValidElement<TableRowProps>(Child) &&
+                (Child?.type as any)?.displayName === 'TableRow'
+                ? React.cloneElement<any>(Child, {
+                    index: i,
+                    hideSelect: !Child.props.isHeaderRow,
+                  })
+                : Child
+            })}
+      </thead>
+    )
+  },
+)
+
+TableHeader.displayName = 'TableHeader'
+
+export { TableHeader }

package/src/lib/table/components/parts/TableHeader/index.ts

@@ -0,0 +1 @@
+export * from './TableHeader'

package/src/lib/table/components/parts/TableHeaderCell/TableHeaderCell.spec.tsx

@@ -0,0 +1,129 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { UserEvent } from '@testing-library/user-event/dist/types/setup/setup'
+
+import { TableContext } from '../../context/TableContextProvider'
+import { SortDirection } from '../../table-typings'
+import { TableHeaderCell, TableHeaderCellProps } from './TableHeaderCell'
+
+describe('Component: Table header cell', () => {
+  function WrapperTableHeader(props: Omit<TableHeaderCellProps, 'ref'> = {}) {
+    return (
+      <table>
+        <thead>
+          <tr>
+            <TableHeaderCell {...props}>TableHeader</TableHeaderCell>
+          </tr>
+        </thead>
+      </table>
+    )
+  }
+
+  it('Should render correctly', () => {
+    render(<WrapperTableHeader />)
+    expect(screen.getByText('TableHeader')).toBeInTheDocument()
+  })
+
+  it('Should be sortable', async () => {
+    const user: UserEvent = userEvent.setup()
+    const sortFn: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand: null,
+      onSort: sortFn,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableHeader accessor="test">child</WrapperTableHeader>
+      </TableContext.Provider>,
+    )
+    await user.click(
+      document.body.querySelector('.sg-table-sort') as HTMLElement,
+    )
+    expect(setTableStateFn).toBeCalled()
+    expect(sortFn).toBeCalled()
+  })
+
+  it('Should change sorting direction', async () => {
+    const user: UserEvent = userEvent.setup()
+    const sortFn: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: {
+        sortedColumn: { accessor: 'test', sortDirection: SortDirection.ASC },
+        expandedRows: [],
+      },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand: null,
+      onSort: sortFn,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableHeader accessor="test">child</WrapperTableHeader>
+      </TableContext.Provider>,
+    )
+    await user.click(
+      document.body.querySelector('.sg-table-sort') as HTMLElement,
+    )
+    expect(setTableStateFn).toBeCalledWith({
+      ...mockProviderValue.tableState,
+      sortedColumn: {
+        ...mockProviderValue.tableState.sortedColumn,
+        sortDirection: SortDirection.DESC,
+      },
+    })
+    expect(sortFn).toBeCalled()
+  })
+
+  it('Should change sorting direction using prop', () => {
+    const sortFn: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: { sortedColumn: null, expandedRows: [] },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand: null,
+      onSort: sortFn,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableHeader accessor="test" sortDirection={SortDirection.ASC}>
+          child
+        </WrapperTableHeader>
+      </TableContext.Provider>,
+    )
+    expect(setTableStateFn).toBeCalledWith({
+      ...mockProviderValue.tableState,
+      sortedColumn: { accessor: 'test', sortDirection: SortDirection.ASC },
+    })
+  })
+
+  it('Should able to disable sort per cell', () => {
+    const sortFn: jest.Mock = jest.fn()
+    const setTableStateFn: jest.Mock = jest.fn()
+    const mockProviderValue: any = {
+      tableState: {
+        sortedColumn: { accessor: 'test', sortDirection: SortDirection.ASC },
+        expandedRows: [],
+      },
+      setTableState: setTableStateFn,
+      onRowSelect: null,
+      onRowExpand: null,
+      onSort: sortFn,
+    }
+    render(
+      <TableContext.Provider value={mockProviderValue}>
+        <WrapperTableHeader disableSort accessor="test">
+          child
+        </WrapperTableHeader>
+      </TableContext.Provider>,
+    )
+    expect(
+      document.body.querySelector('th')?.classList.contains('sortable'),
+    ).toBeFalsy()
+  })
+})