feat: add dynamic label and icon to actions (#71)

Smile-SA · Nov 23, 2023 · fbc68f5 · fbc68f5
1 parent 5578d5d
commit fbc68f5
Show file tree

Hide file tree

Showing 23 changed files with 7,712 additions and 5,117 deletions.
diff --git a/.changeset/fast-items-itch.md b/.changeset/fast-items-itch.md
@@ -0,0 +1,5 @@
+---
+'@smile/react-front-kit-table': minor
+---
+
+Update `label` and `icon` action props to accept a function.
diff --git a/apps/next/package.json b/apps/next/package.json
@@ -25,7 +25,7 @@
     "@types/react-dom": "^18.2.7",
     "eslint-config-custom": "*",
     "tsconfig": "*",
-    "typescript": "^5.2.2"
+    "typescript": "~5.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": "eslint --max-warnings=0 --ignore-path ../../.gitignore"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,17 +42,17 @@
     "@changesets/cli": "^2.26.2",
     "@commitlint/cli": "^17.7.1",
     "@commitlint/config-conventional": "^17.7.0",
-    "@storybook/addon-a11y": "^7.4.1",
-    "@storybook/addon-essentials": "^7.4.1",
-    "@storybook/addon-interactions": "^7.4.1",
-    "@storybook/addon-links": "^7.4.1",
-    "@storybook/blocks": "^7.4.1",
-    "@storybook/jest": "^0.2.2",
-    "@storybook/preview-api": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/react-vite": "^7.4.1",
-    "@storybook/test-runner": "^0.13.0",
-    "@storybook/testing-library": "^0.2.0",
+    "@storybook/addon-a11y": "~7.4.1",
+    "@storybook/addon-essentials": "~7.4.1",
+    "@storybook/addon-interactions": "~7.4.1",
+    "@storybook/addon-links": "~7.4.1",
+    "@storybook/blocks": "~7.4.1",
+    "@storybook/jest": "~0.2.2",
+    "@storybook/preview-api": "~7.4.1",
+    "@storybook/react": "~7.4.1",
+    "@storybook/react-vite": "~7.4.1",
+    "@storybook/test-runner": "~0.13.0",
+    "@storybook/testing-library": "~0.2.0",
     "@turbo/gen": "^1.10.13",
     "concurrently": "^8.2.1",
     "eslint": "^8.49.0",
@@ -61,9 +61,9 @@
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
     "prettier": "3.1.0",
-    "storybook": "^7.4.1",
+    "storybook": "~7.4.1",
     "turbo": "^1.10.13",
-    "typescript": "^5.2.2",
+    "typescript": "~5.2.0",
     "wait-on": "^7.0.1"
   },
   "dependencies": {

diff --git a/packages/react-front-kit-dropzone/package.json b/packages/react-front-kit-dropzone/package.json
@@ -66,7 +66,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "test": "*",
     "tsconfig": "*",
-    "typescript": "^5.2.2"
+    "typescript": "~5.2.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

diff --git a/packages/react-front-kit-shared/package.json b/packages/react-front-kit-shared/package.json
@@ -75,7 +75,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "test": "*",
     "tsconfig": "*",
-    "typescript": "^5.2.2"
+    "typescript": "~5.2.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

diff --git a/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.stories.tsx b/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.stories.tsx
@@ -25,7 +25,7 @@ export const FileIcon: IStory = {
   args: {
     color: '#349f98',
     size: 45,
-    type: 'PDF',
+    type: 'pdf',
     weight: 'light',
   },
 };
diff --git a/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.test.tsx b/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.test.tsx
@@ -5,7 +5,7 @@ import { FileIcon } from './FileIcon';
 describe('FileIcon', () => {
   it('matches snapshot', () => {
     const { container } = renderWithProviders(
-      <FileIcon color="dark" size={45} type="PDF" />,
+      <FileIcon color="dark" size={45} type="pdf" />,
     );
     expect(container).toMatchSnapshot();
   });

diff --git a/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.tsx b/packages/react-front-kit-shared/src/1-styleGuide/FileIcon/FileIcon.tsx
@@ -46,7 +46,7 @@ const iconMap = new Map([
   ['ZIP', FileZip],
 ]);
 
-function getIconByType(type: string | undefined): Icon {
+function getIconByType(type?: string): Icon {
   return type ? iconMap.get(type.toUpperCase()) ?? File : File;
 }
 

diff --git a/packages/react-front-kit-shared/src/types/actions.ts b/packages/react-front-kit-shared/src/types/actions.ts
@@ -22,11 +22,11 @@ export interface IAction<Item> {
   color?: string;
   confirmModalProps?: IActionConfirmModalProps<Item>;
   confirmation?: boolean;
-  icon: ReactNode;
+  icon: ReactNode | ((item: Item) => ReactNode);
   id: number | string;
   isItemAction?: boolean;
   isMassAction?: boolean;
-  label: string;
+  label: string | ((item: Item) => string);
   onAction?: (item: Item) => void;
 }
 

diff --git a/packages/react-front-kit-table/package.json b/packages/react-front-kit-table/package.json
@@ -76,7 +76,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "test": "*",
     "tsconfig": "*",
-    "typescript": "^5.2.2"
+    "typescript": "~5.2.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

diff --git a/packages/react-front-kit-table/src/Components/Table/Table.tsx b/packages/react-front-kit-table/src/Components/Table/Table.tsx
@@ -5,9 +5,9 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 
 'use client';
+import type { ITableAction, ITableConfirmAction } from '../../types';
 import type { FloatingPosition } from '@mantine/core/lib/Floating';
 import type { IPaginationProps } from '@smile/react-front-kit';
-import type { IAction, IConfirmAction } from '@smile/react-front-kit-shared';
 import type { MRT_Row, MRT_TableOptions } from 'mantine-react-table';
 import type { ReactElement } from 'react';
 
@@ -31,15 +31,9 @@ import {
 } from 'mantine-react-table';
 import { useState } from 'react';
 
-import { useStyles } from './Table.style';
-
-type ITableAction<Data extends Record<string, unknown>> = IAction<
-  MRT_Row<Data> | MRT_Row<Data>[]
->;
+import { getActionIcon, getActionLabel } from '../../helpers';
 
-type ITableConfirmAction<Data extends Record<string, unknown>> = IConfirmAction<
-  MRT_Row<Data> | MRT_Row<Data>[]
->;
+import { useStyles } from './Table.style';
 
 export interface ITableProps<Data extends Record<string, unknown>>
   extends MRT_TableOptions<Data> {
@@ -184,14 +178,17 @@ export function Table<Data extends Record<string, unknown>>(
       return (
         <div className={rowActionClasses.join(' ')}>
           {visibleRowActions.map((action, index) => (
-            // eslint-disable-next-line react/no-array-index-key
-            <Tooltip key={index} label={action.label} {...tooltipProps}>
+            <Tooltip
+              key={`${index + index}`}
+              label={getActionLabel(action, row)}
+              {...tooltipProps}
+            >
               <ActionIcon
                 onClick={() => handleAction(row, action)}
                 radius={4}
                 type="button"
               >
-                {action.icon}
+                {getActionIcon(action, row)}
               </ActionIcon>
             </Tooltip>
           ))}
@@ -224,10 +221,10 @@ export function Table<Data extends Record<string, unknown>>(
                     // eslint-disable-next-line react/no-array-index-key
                     key={index}
                     color={action.color}
-                    icon={action.icon}
+                    icon={getActionIcon(action, row)}
                     onClick={() => handleAction(row, action)}
                   >
-                    {action.label}
+                    {getActionLabel(action, row)}
                   </Menu.Item>
                 ))}
               </Menu.Dropdown>
@@ -251,11 +248,11 @@ export function Table<Data extends Record<string, unknown>>(
                 // eslint-disable-next-line react/no-array-index-key
                 key={index}
                 color={action.color}
-                leftIcon={action.icon}
+                leftIcon={getActionIcon(action, rows)}
                 onClick={() => handleAction(rows, action)}
                 variant="default"
               >
-                {action.label}
+                {getActionLabel(action, rows)}
               </Button>
             ))}
 
@@ -340,7 +337,10 @@ export function Table<Data extends Record<string, unknown>>(
         onClose={handleClose}
         onConfirm={handleConfirm}
         opened={Boolean(confirmAction)}
-        title={confirmAction?.confirmModalProps?.title ?? confirmAction?.label}
+        title={
+          confirmAction?.confirmModalProps?.title ??
+          getActionLabel(confirmAction)
+        }
       />
     </>
   );

diff --git a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap
@@ -284,6 +284,7 @@ exports[`Table matches snapshot 1`] = `
                         >
                           <input
                             aria-invalid="false"
+                            aria-label="Filter by id"
                             class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                             placeholder="Filter by id"
                             title="Filter by id"
@@ -395,6 +396,7 @@ exports[`Table matches snapshot 1`] = `
                         >
                           <input
                             aria-invalid="false"
+                            aria-label="Filter by Format"
                             class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                             placeholder="Filter by Format"
                             title="Filter by Format"
@@ -506,6 +508,7 @@ exports[`Table matches snapshot 1`] = `
                         >
                           <input
                             aria-invalid="false"
+                            aria-label="Filter by Titre"
                             class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                             placeholder="Filter by Titre"
                             title="Filter by Titre"
@@ -617,6 +620,7 @@ exports[`Table matches snapshot 1`] = `
                         >
                           <input
                             aria-invalid="false"
+                            aria-label="Filter by Créateur"
                             class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                             placeholder="Filter by Créateur"
                             title="Filter by Créateur"
@@ -728,6 +732,7 @@ exports[`Table matches snapshot 1`] = `
                         >
                           <input
                             aria-invalid="false"
+                            aria-label="Filter by Date publication"
                             class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                             placeholder="Filter by Date publication"
                             title="Filter by Date publication"

diff --git a/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap b/...ct-front-kit-table/src/Components/TableGridView/__snapshots__/TableGridView.test.tsx.snap
@@ -361,6 +361,7 @@ exports[`TableGridView matches snapshot 1`] = `
                             >
                               <input
                                 aria-invalid="false"
+                                aria-label="Filter by id"
                                 class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                                 id="mantine-f4bipx4bi"
                                 placeholder="Filter by id"
@@ -473,6 +474,7 @@ exports[`TableGridView matches snapshot 1`] = `
                             >
                               <input
                                 aria-invalid="false"
+                                aria-label="Filter by Format"
                                 class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                                 id="mantine-f4bipx4bi"
                                 placeholder="Filter by Format"
@@ -585,6 +587,7 @@ exports[`TableGridView matches snapshot 1`] = `
                             >
                               <input
                                 aria-invalid="false"
+                                aria-label="Filter by Titre"
                                 class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                                 id="mantine-f4bipx4bi"
                                 placeholder="Filter by Titre"
@@ -697,6 +700,7 @@ exports[`TableGridView matches snapshot 1`] = `
                             >
                               <input
                                 aria-invalid="false"
+                                aria-label="Filter by Créateur"
                                 class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                                 id="mantine-f4bipx4bi"
                                 placeholder="Filter by Créateur"
@@ -809,6 +813,7 @@ exports[`TableGridView matches snapshot 1`] = `
                             >
                               <input
                                 aria-invalid="false"
+                                aria-label="Filter by Date publication"
                                 class="mantine-Input-input mantine-TextInput-input mantine-8fuq20"
                                 id="mantine-f4bipx4bi"
                                 placeholder="Filter by Date publication"

diff --git a/packages/react-front-kit-table/src/helpers/index.ts b/packages/react-front-kit-table/src/helpers/index.ts
@@ -0,0 +1 @@
+export * from './table';
diff --git a/packages/react-front-kit-table/src/helpers/table.ts b/packages/react-front-kit-table/src/helpers/table.ts
@@ -0,0 +1,45 @@
+import type { ITableAction, ITableConfirmAction } from '../types';
+import type { MRT_Row } from 'mantine-react-table';
+import type { ReactNode } from 'react';
+
+export function isConfirmAction<Data extends Record<string, unknown>>(
+  action: ITableAction<Data>,
+): action is ITableConfirmAction<Data> {
+  return 'item' in action;
+}
+
+export function getActionLabel<Data extends Record<string, unknown>>(
+  action?: ITableAction<Data> | null,
+  rows?: MRT_Row<Data> | MRT_Row<Data>[],
+): string {
+  if (!action) {
+    return '';
+  }
+  if (isConfirmAction(action)) {
+    return typeof action.label === 'function'
+      ? action.label(action.item)
+      : action.label;
+  }
+  if (typeof action.label === 'function') {
+    return rows ? action.label(rows) : '';
+  }
+  return action.label;
+}
+
+export function getActionIcon<Data extends Record<string, unknown>>(
+  action?: ITableAction<Data> | null,
+  rows?: MRT_Row<Data> | MRT_Row<Data>[],
+): ReactNode {
+  if (!action) {
+    return '';
+  }
+  if (isConfirmAction(action)) {
+    return typeof action.icon === 'function'
+      ? action.icon(action.item)
+      : action.icon;
+  }
+  if (typeof action.icon === 'function') {
+    return rows ? action.icon(rows) : '';
+  }
+  return action.icon;
+}
diff --git a/packages/react-front-kit-table/src/index.tsx b/packages/react-front-kit-table/src/index.tsx
@@ -1,3 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
 export * from './Components/Table/Table';
 export * from './Components/TableGridView/TableGridView';
+export * from './helpers';
+export * from './types';
diff --git a/packages/react-front-kit-table/src/types/index.ts b/packages/react-front-kit-table/src/types/index.ts
@@ -0,0 +1 @@
+export * from './table';
diff --git a/packages/react-front-kit-table/src/types/table.ts b/packages/react-front-kit-table/src/types/table.ts
@@ -0,0 +1,9 @@
+import type { IAction, IConfirmAction } from '@smile/react-front-kit-shared';
+import type { MRT_Row } from 'mantine-react-table';
+
+export type ITableAction<Data extends Record<string, unknown>> = IAction<
+  MRT_Row<Data> | MRT_Row<Data>[]
+>;
+
+export type ITableConfirmAction<Data extends Record<string, unknown>> =
+  IConfirmAction<MRT_Row<Data> | MRT_Row<Data>[]>;
diff --git a/packages/react-front-kit/package.json b/packages/react-front-kit/package.json
@@ -80,7 +80,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "test": "*",
     "tsconfig": "*",
-    "typescript": "^5.2.2"
+    "typescript": "~5.2.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
@@ -141,10 +141,16 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
                       // eslint-disable-next-line react/no-array-index-key
                       key={index}
                       color={action.color}
-                      icon={action.icon}
+                      icon={
+                        typeof action.icon === 'function'
+                          ? action.icon(props)
+                          : action.icon
+                      }
                       onClick={() => handleMenuItem(action)}
                     >
-                      {action.label}
+                      {typeof action.label === 'function'
+                        ? action.label(props)
+                        : action.label}
                     </Menu.Item>
                   ))}
                 </Menu.Dropdown>