feat(redmine 1246968): added ThumbnailGrid and TableGridView, refactored action types

.changeset/giant-planes-juggle.md

@@ -0,0 +1,7 @@
+---
+'@smile/react-front-kit-shared': minor
+'@smile/react-front-kit-table': minor
+'@smile/react-front-kit': minor
+---
+
+Reworked action/confirm types and moved then in `react-front-kit-shared` then refactored types in `Table`, `Thumbnail` and `ConfirmModal` , Added `ThumbnailGrid` and `TableGridView` components,

packages/react-front-kit-shared/src/types/actions.ts

@@ -0,0 +1,35 @@
+import type { MantineColor, ModalProps } from '@mantine/core';
+import type { ReactNode } from 'react';
+
+export interface IConfirmModal extends Omit<ModalProps, 'title'> {
+  cancelColor?: MantineColor;
+  cancelLabel?: string;
+  confirmColor?: MantineColor;
+  confirmLabel?: string;
+  onCancel?: () => void;
+  onConfirm?: () => void;
+  title?: string;
+}
+
+export interface IActionConfirmModalProps<Item>
+  extends Omit<IConfirmModal, 'onCancel' | 'onClose' | 'onConfirm' | 'opened'> {
+  onCancel?: (item: Item) => false | void;
+  onClose?: () => void;
+  onConfirm?: (item: Item) => false | void;
+}
+
+export interface IAction<Item> {
+  color?: string;
+  confirmModalProps?: IActionConfirmModalProps<Item>;
+  confirmation?: boolean;
+  icon: ReactNode;
+  id: number | string;
+  isItemAction?: boolean;
+  isMassAction?: boolean;
+  label: string;
+  onAction?: (item: Item) => void;
+}
+
+export interface IConfirmAction<Item> extends IAction<Item> {
+  item: Item;
+}

packages/react-front-kit-shared/src/types/index.ts

@@ -1 +1,2 @@
+export * from './actions';
 export * from './options';

packages/react-front-kit-table/src/Components/Table/Table.mock.tsx

@@ -0,0 +1,146 @@
+import type { ITableProps } from './Table';
+
+import {
+  DownloadSimple,
+  Eye,
+  PencilSimple,
+  ShareNetwork,
+  Star,
+  Trash,
+} from '@phosphor-icons/react';
+import { FolderMove } from '@smile/react-front-kit-shared';
+import { action } from '@storybook/addon-actions';
+
+export const tableMock: ITableProps<Record<string, unknown>> = {
+  actions: [
+    {
+      icon: <FolderMove />,
+      id: 'move',
+      isMassAction: true,
+      label: 'Move in tree',
+      onAction: action('Move in tree'),
+    },
+    {
+      icon: <Eye />,
+      id: 'open',
+      label: 'Open document',
+      onAction: action('Open document'),
+    },
+    {
+      icon: <PencilSimple />,
+      id: 'edit',
+      label: 'Edit document',
+      onAction: action('Edit document'),
+    },
+    {
+      icon: <Star />,
+      id: 'favorite',
+      label: 'Add to favorites',
+      onAction: action('Add to favorites'),
+    },
+    {
+      confirmation: true,
+      icon: <ShareNetwork />,
+      id: 'share',
+      label: 'Share',
+      onAction: action('Share'),
+    },
+    {
+      icon: <DownloadSimple />,
+      id: 'download',
+      label: 'Download',
+      onAction: action('Download'),
+    },
+    {
+      color: 'red',
+      confirmModalProps: {
+        children: 'Are you sure you want to delete ?',
+        confirmColor: 'red',
+        confirmLabel: 'Delete',
+        onCancel: action('Delete:Cancel'),
+        onConfirm: action('Delete:Confirm'),
+        title: 'Delete ?',
+      },
+      confirmation: true,
+      icon: <Trash />,
+      id: 'delete',
+      isMassAction: true,
+      label: 'Delete',
+      onAction: action('Delete'),
+    },
+  ],
+  columns: [
+    {
+      accessorKey: 'id',
+      header: 'id',
+    },
+    {
+      accessorKey: 'format',
+      header: 'Format',
+    },
+    {
+      accessorKey: 'title',
+      header: 'Titre',
+    },
+    {
+      accessorKey: 'creator',
+      header: 'Créateur',
+    },
+    {
+      accessorKey: 'date',
+      header: 'Date publication',
+    },
+  ],
+  data: [
+    {
+      creator: 'Valentin Perello',
+      date: '16/05/2022',
+      format: 'SVG',
+      id: 1,
+      title: 'Doc test 1',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '17/05/2022',
+      format: 'PDF',
+      id: 2,
+      title: 'Doc test 2',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '18/05/2022',
+      format: 'PDF',
+      id: 3,
+      title: 'Doc test 3',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '19/05/2022',
+      format: 'PDF',
+      id: 4,
+      title: 'Doc test 4',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '20/05/2022',
+      format: 'PDF',
+      id: 5,
+      title: 'Doc test 5',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '21/05/2022',
+      format: 'PDF',
+      id: 6,
+      title: 'Doc test 6',
+    },
+    {
+      creator: 'Valentin Perello',
+      date: '22/05/2022',
+      format: 'PDF',
+      id: 7,
+      title: 'Doc test 7',
+    },
+  ],
+  rowActionNumber: 3,
+};

packages/react-front-kit-table/src/Components/Table/Table.stories.tsx

@@ -1,17 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import {
-  DownloadSimple,
-  Eye,
-  PencilSimple,
-  ShareNetwork,
-  Star,
-  Trash,
-} from '@phosphor-icons/react';
-import { FolderMove } from '@smile/react-front-kit-shared';
-import { action } from '@storybook/addon-actions';
-
 import { Table as Cmp } from './Table';
+import { tableMock } from './Table.mock';
 
 const meta = {
   component: Cmp,
@@ -25,115 +15,6 @@ type IStory = StoryObj<typeof meta>;
 
 export const Table: IStory = {
   args: {
-    actions: [
-      {
-        icon: <FolderMove />,
-        isMassAction: true,
-        label: 'Move in tree',
-        onAction: action('Move in tree'),
-      },
-      {
-        icon: <Eye />,
-        label: 'Open document',
-        onAction: action('Open document'),
-      },
-      {
-        icon: <PencilSimple />,
-        label: 'Edit document',
-        onAction: action('Edit document'),
-      },
-      {
-        icon: <Star />,
-        label: 'Add to favorites',
-        onAction: action('Add to favorites'),
-      },
-      {
-        confirmation: true,
-        icon: <ShareNetwork />,
-        label: 'Share',
-        onAction: action('Share'),
-      },
-      {
-        icon: <DownloadSimple />,
-        label: 'Download',
-        onAction: action('Download'),
-      },
-      {
-        color: 'red',
-        confirmModalProps: {
-          children: 'Are you sur you want to delete ?',
-          confirmColor: 'red',
-          confirmLabel: 'Delete',
-          onCancel: action('Delete:Cancel'),
-          onConfirm: action('Delete:Confirm'),
-          title: 'Delete ?',
-        },
-        confirmation: true,
-        icon: <Trash />,
-        isMassAction: true,
-        label: 'Delete',
-        onAction: action('Delete'),
-      },
-    ],
-    columns: [
-      {
-        accessorKey: 'id',
-        header: 'id',
-      },
-      {
-        accessorKey: 'format',
-        header: 'Format',
-      },
-      {
-        accessorKey: 'title',
-        header: 'Titre',
-      },
-      {
-        accessorKey: 'creator',
-        header: 'Créateur',
-      },
-      {
-        accessorKey: 'date',
-        header: 'Date publication',
-      },
-    ],
-    data: [
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'SVG',
-        id: 1,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 2,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 3,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 4,
-        title: 'Doc test',
-      },
-      {
-        creator: 'Valentin Perello',
-        date: '20/05/2022',
-        format: 'PDF',
-        id: 5,
-        title: 'Doc test',
-      },
-    ],
-    rowActionNumber: 3,
+    ...tableMock,
   },
 };