+`;
diff --git a/packages/react-front-kit/src/Components/DocumentList/DocumentList.mock.tsx b/packages/react-front-kit/src/Components/DocumentList/DocumentList.mock.tsx
new file mode 100644
index 00000000..c0316974
--- /dev/null
+++ b/packages/react-front-kit/src/Components/DocumentList/DocumentList.mock.tsx
@@ -0,0 +1,73 @@
+import type { IDocument } from '../../../dist';
+
+import { Button, Space } from '@mantine/core';
+import { DownloadSimple } from '@phosphor-icons/react';
+
+export const documentsMock: IDocument[] = [
+ {
+ author: 'Author Name',
+ content: (
+ <>
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Author Name
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Author Name
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Author Name
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react-front-kit/src/Components/SelectableList/SelectableList.mock.tsx b/packages/react-front-kit/src/Components/SelectableList/SelectableList.mock.tsx
new file mode 100644
index 00000000..c19c9ee1
--- /dev/null
+++ b/packages/react-front-kit/src/Components/SelectableList/SelectableList.mock.tsx
@@ -0,0 +1,70 @@
+import { Button, Space } from '@mantine/core';
+import { DownloadSimple } from '@phosphor-icons/react';
+
+import { DocumentCard } from '../DocumentCard/DocumentCard';
+
+export const selectableListElementsMock = [
+
+ <>
+
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+
+
+
+ ,
+
+ <>
+
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+
+
+
+ ,
+
+ <>
+
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Aline Dupon
+
+
+
+
+
+
+
+ Ceci est une description faite pour cette facture et ajoutée par le créateur lors de l’import du document dans la GED, en l’absence de description cet espace est laissé vide...
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Julien Dominique
+
+
+
+
+
+
+
+ Ceci est une description faite pour cette facture et ajoutée par le créateur lors de l’import du document dans la GED, en l’absence de description cet espace est laissé vide...
+
+
+ Published on December 24, 2023
+
+
+ -
+
+
+ Mohamed Aldri
+
+
+
+
+
+
+
+ Ceci est une description faite pour cette facture et ajoutée par le créateur lors de l’import du document dans la GED, en l’absence de description cet espace est laissé vide...
+
1 selected file
diff --git a/packages/react-front-kit/src/index.tsx b/packages/react-front-kit/src/index.tsx
index a7902d96..7d5ca2b0 100644
--- a/packages/react-front-kit/src/index.tsx
+++ b/packages/react-front-kit/src/index.tsx
@@ -1,14 +1,16 @@
/* eslint-disable react-refresh/only-export-components */
export * from '@smile/react-front-kit-shared';
// component exports
-export * from './Components/Filters/Filters';
+export * from './Components/ActionBar/ActionBar';
export * from './Components/BitConverter/BitConverter';
export * from './Components/Breadcrumbs/Breadcrumbs';
export * from './Components/CollapseButton/CollapseButtonControlled';
export * from './Components/CollapseButton/CollapseButton';
export * from './Components/ConfirmModal/ConfirmModal';
export * from './Components/DocumentCard/DocumentCard';
+export * from './Components/DocumentList/DocumentList';
export * from './Components/DropdownButton/DropdownButton';
+export * from './Components/Filters/Filters';
export * from './Components/Header/Header';
export * from './Components/HeaderSearch/HeaderSearch';
export * from './Components/InfoCard/InfoCard';
@@ -16,6 +18,7 @@ export * from './Components/InfoCard/Motif';
export * from './Components/Pagination/Pagination';
export * from './Components/ResponsiveTabs/ResponsiveTabs';
export * from './Components/SearchBar/SearchBar';
+export * from './Components/SelectableList/SelectableList';
export * from './Components/SidebarMenu/SidebarMenu';
export * from './Components/SwitchableView/SwitchableView';
export * from './Components/Thumbnail/Thumbnail';
diff --git a/packages/storybook-pages/package.json b/packages/storybook-pages/package.json
index 317512bc..ae42faa2 100644
--- a/packages/storybook-pages/package.json
+++ b/packages/storybook-pages/package.json
@@ -12,6 +12,9 @@
"@smile/react-front-kit-shared": "*",
"@smile/react-front-kit-table": "*"
},
+ "devDependencies": {
+ "@storybook/addon-actions": "^7.4.1"
+ },
"peerDependencies": {
"@emotion/react": ">=11",
"@mantine/core": "6",
diff --git a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx
index f760a85d..b70cf8ad 100644
--- a/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx
+++ b/packages/storybook-pages/src/Pages/SearchResults/SearchResults.tsx
@@ -1,23 +1,20 @@
'use client';
+import type { IDocument } from '@smile/react-front-kit';
import type { ReactElement } from 'react';
import {
AppShell,
Box,
- Button,
- Divider,
Flex,
Paper,
Select,
- Space,
- Stack,
createStyles,
rem,
} from '@mantine/core';
-import { CaretDown, DownloadSimple } from '@phosphor-icons/react';
+import { CaretDown } from '@phosphor-icons/react';
import {
- DocumentCard,
+ DocumentList,
FoldableColumnLayout,
Header,
Motif,
@@ -30,7 +27,13 @@ import {
} from '@smile/react-front-kit-shared';
import { useState } from 'react';
-import { headerContent, headerLeft, headerRight } from '../pages.mock';
+import {
+ headerContent,
+ headerLeft,
+ headerRight,
+ searchActions,
+ searchDocuments,
+} from '../pages.mock';
export interface IOption {
label: string;
@@ -121,8 +124,32 @@ export function SearchResults(): ReactElement {
const [activeSorting, setActiveSorting] = useState(
sortingOptions[0]?.value,
);
-
const totalPages = Math.ceil(typeFilteredResults / rowsPerPage);
+ // Documents
+ const [selectedDocuments, setSelectedDocuments] = useState([]);
+
+ function handleDocumentSelected(
+ selectedDocument: IDocument,
+ isSelected: boolean,
+ ): void {
+ const newSelectedDocuments = [...selectedDocuments];
+ if (
+ newSelectedDocuments
+ .map((document) => document.id)
+ .includes(selectedDocument.id) &&
+ !isSelected
+ ) {
+ delete newSelectedDocuments[
+ newSelectedDocuments.findIndex(
+ (document) => document.id === selectedDocument.id,
+ )
+ ];
+ } else {
+ newSelectedDocuments.push(selectedDocument);
+ }
+ setSelectedDocuments(newSelectedDocuments.filter(isNotNullNorEmpty));
+ }
+
const { classes } = useStyles();
return (
@@ -203,77 +230,19 @@ export function SearchResults(): ReactElement {
}
topBlockTheme={{ ...secondaryTheme, colorScheme: 'dark' }}
>
-
-
-
-
- <>
-
- Ceci est une description faite pour cette facture et ajoutée
- par le créateur lors de l’import du document dans la GED, en
- l’absence de description cet espace est laissé vide...
-
-
-
-
-
-
-
-
- <>
-
- Ceci est une description faite pour cette facture et ajoutée
- par le créateur lors de l’import du document dans la GED, en
- l’absence de description cet espace est laissé vide...
-
-
-
-
-
-
-
-
- <>
-
- Ceci est une description faite pour cette facture et ajoutée
- par le créateur lors de l’import du document dans la GED, en
- l’absence de description cet espace est laissé vide...
-
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+
+ Ceci est une description faite pour cette facture et ajoutée par le
+ créateur lors de l’import du document dans la GED, en l’absence de
+ description cet espace est laissé vide...
+