Merge pull request #1236 from habx/feature/APP-26358

APP-26358: New Major

src/_fakeData/storyFakeData.tsx

@@ -66,43 +66,37 @@ export const RICH_COLUMNS = [
   },
 ] as Column<typeof FAKE_DATA[0]>[]
 
-export const IMEX_COLUMNS = [
+export const IMEX_COLUMNS: IMEXColumn<Faker.Card & { id: number }>[] = [
   {
     Header: 'Username',
     accessor: 'username',
-    meta: {
-      imex: {
-        identifier: true,
-        type: 'string' as const,
-      },
+    imex: {
+      path: 'username',
+      identifier: true,
     },
   },
   {
     Header: 'Name',
     accessor: 'name',
-    meta: {
-      imex: {
-        type: 'string' as const,
-        note: 'This is a comment',
-      },
+    imex: {
+      path: 'name',
+      header: 'Name',
+      note: 'This is a comment',
     },
   },
   {
     Header: 'Email',
     accessor: 'email',
-    meta: {
-      imex: {
-        type: 'string' as const,
-      },
+    imex: {
+      path: 'email',
+      header: 'Email',
     },
   },
   {
     Header: 'City',
-    accessor: 'address.city',
-    meta: {
-      imex: {
-        type: 'string' as const,
-      },
+    accessor: (row) => row.address.city,
+    imex: {
+      path: 'address.city',
     },
   },
-] as IMEXColumn<Faker.Card & { id: number }>[]
+]

src/imex/excel.utils.ts

@@ -5,6 +5,7 @@ import { palette } from '@habx/ui-core'
 
 import { createWorkbook, getCellValueTypes } from './exceljs'
 import { IMEXColumn } from './imex.interface'
+import { getHeader } from './imex.utils'
 
 export const parseExcelFileData = async (file: File): Promise<any[][]> => {
   const CellValueType = await getCellValueTypes()
@@ -43,8 +44,8 @@ export const parseExcelFileData = async (file: File): Promise<any[][]> => {
           break
         case CellValueType.Hyperlink:
           // seems to be badly typed
-          const text = ((cell.value as Excel.CellHyperlinkValue)
-            .text as unknown) as Excel.CellRichTextValue
+          const text = (cell.value as Excel.CellHyperlinkValue)
+            .text as unknown as Excel.CellRichTextValue
           data[rowIndex][cellIndex] =
             text?.richText?.map((t) => t.text).join('') ?? text ?? null
           break
@@ -94,9 +95,9 @@ export const applyValidationRulesAndStyle = <D extends {}>(
   for (const columnIndex in columns) {
     const column = columns[columnIndex]
     const columnNumber = Number(columnIndex) + 1
-    const dataValidation = column.meta?.imex?.dataValidation
-    const isIdentifer = !!column.meta?.imex?.identifier
-    const note = column.meta?.imex?.note
+    const dataValidation = column?.imex?.dataValidation
+    const isIdentifer = !!column?.imex?.identifier
+    const note = column?.imex?.note
 
     if (dataValidation || isIdentifer || note) {
       const worksheetColumn = worksheet.getColumn(columnNumber)
@@ -116,11 +117,10 @@ export const applyValidationRulesAndStyle = <D extends {}>(
               dataValidation.formulae.some((f) => f.length > 255)
             ) {
               const worksheetName = capitalize(
-                snakeCase(escape(`${column.Header}`))
-              )
-              const validationValuesWorksheet = worksheet.workbook.addWorksheet(
-                worksheetName
+                snakeCase(escape(getHeader(column)))
               )
+              const validationValuesWorksheet =
+                worksheet.workbook.addWorksheet(worksheetName)
               dataValidation.formulae.forEach((f, listColumnIndex) => {
                 const list: string[] = f.replace(/"/g, '').split(',')
                 list.forEach((listEl, rowIndex) => {

src/imex/export/useExportTable.ts

@@ -5,60 +5,58 @@ import { getImexColumns } from '../getImexColumns'
 import {
   IMEXColumn,
   IMEXFileExtensionTypes,
-  RowValueTypes,
+  IMEXColumnType,
 } from '../imex.interface'
+import { getPath } from '../imex.utils'
 
 import { exportData, ExportDataOptions } from './useExportTable.utils'
 
-export interface UseExportTableParams<D extends { [key: string]: any } = any>
+export interface UseExportTableParams<D extends object>
   extends Omit<ExportDataOptions, 'type'> {
-  data?: D[]
+  data: D[]
   columns: IMEXColumn<D>[]
+  /**
+   * @default 'xls'
+   */
   type?: IMEXFileExtensionTypes
 }
 
-const ARRAY_TYPES = new Set<RowValueTypes>(['string[]', 'number[]'])
-
-export const useExportTable = <D extends { [key: string]: any } = any>(
-  params: UseExportTableParams<D>
-) => {
-  // Put params in ref to avoid useless changes of `onFiles` function
-  const paramsRef = React.useRef(params)
-  paramsRef.current = params
+const ARRAY_TYPES = new Set<IMEXColumnType>([
+  IMEXColumnType['string[]'],
+  IMEXColumnType['number[]'],
+])
 
+export const useExportTable = <D extends object = any>() => {
   const downloadTableData = React.useCallback(
-    (title: string, options?: Partial<UseExportTableParams<D>>) => {
-      const { data, columns, ...exportOptions } = {
-        data: [],
-        type: 'xls',
-        ...paramsRef.current,
-        ...options,
-      } as const
+    (title: string, options: UseExportTableParams<D>) => {
+      const { data = [], columns, type = 'xls' } = options
 
       const imexColumns = getImexColumns(columns)
       const imexData = data.map((row) =>
         imexColumns.map((column) => {
-          const meta = column.meta?.imex
-          const valueType = meta?.type
+          const imexOptions = column.imex
+          const valueType = imexOptions?.type
+
+          const path = getPath(column)
 
-          let value = get(row, column.accessor as string)
+          let value = get(row, path)
 
-          if (meta?.parse) {
-            value = meta.parse(value, Object.values(row))
+          if (imexOptions?.format) {
+            value = imexOptions.format(value, Object.values(row))
           } else if (ARRAY_TYPES.has(valueType!) && Array.isArray(value)) {
             value = value.join(',')
           }
 
-          return exportOptions.type === 'xls' &&
-            valueType === 'number' &&
+          return type === 'xls' &&
+            valueType === IMEXColumnType.number &&
             !isFinite(value) &&
             value != null
             ? Number(value)
             : value
         })
       )
 
-      return exportData(title, imexColumns, imexData, exportOptions)
+      return exportData(title, imexColumns, imexData, { ...options, type })
     },
     []
   )

src/imex/export/useExportTable.utils.ts

@@ -6,6 +6,7 @@ import {
 } from '../excel.utils'
 import { createWorkbook } from '../exceljs'
 import { IMEXColumn, IMEXFileExtensionTypes } from '../imex.interface'
+import { getHeader } from '../imex.utils'
 
 const saveFile = (
   type: IMEXFileExtensionTypes,
@@ -63,10 +64,10 @@ export const exportData = async <D extends {}>(
   const worksheet = workbook.addWorksheet(filename)
 
   worksheet.columns = columns.map((column) => ({
-    header: column.Header + (column.meta?.imex?.required ? '*' : ''),
-    key: column.id ?? column.Header,
-    width: column.meta?.imex?.width,
-    hidden: column.meta?.imex?.hidden,
+    header: `${getHeader(column)} ${column.imex?.required ? '*' : ''}`,
+    key: column.id ?? column.imex,
+    width: column.imex?.width,
+    hidden: column.imex?.hidden,
   })) as Excel.Column[]
 
   worksheet.addRows(data)

src/imex/getImexColumns.ts

@@ -20,16 +20,26 @@ export const getImexColumns = <D extends { [key: string]: any } = any>(
   )
   const imexColumns = flatColumns.filter(
     (column) =>
-      !!column.meta?.imex &&
+      !!column?.imex &&
       COLUMN_ENABLED_CONDITION.includes(column.enabled ?? 'always')
   )
 
   imexColumns.forEach((column) => {
-    if (typeof column.accessor !== 'string') {
-      throw new Error('Cannot include data with a non-string accessor')
+    if (
+      typeof column.accessor !== 'string' &&
+      typeof column.imex?.path !== 'string'
+    ) {
+      throw new Error(
+        'Cannot include data without a column path or string accessor'
+      )
     }
-    if (typeof column.Header !== 'string') {
-      throw new Error('Cannot include non string Header')
+    if (
+      typeof column.Header !== 'string' &&
+      typeof column.imex?.header !== 'string'
+    ) {
+      throw new Error(
+        'Cannot include data without column header or imex.header'
+      )
     }
   })