Improvement/storybook table

.storybook/main.ts

@@ -1,14 +1,17 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 const config: StorybookConfig = {
-  stories: ['../stories/**/*.@(mdx|stories.@(ts|tsx))'],
+  stories: [
+    '../stories/**/*.@(mdx|stories.@(ts|tsx))',
+    '../stories/***/**/*.@(mdx|stories.@(ts|tsx))',
+  ],
   staticDirs: ['./public'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',
     '@storybook/addon-mdx-gfm',
   ],
 
-  webpackFinal: async (config, { configType }) => {
+  webpackFinal: async (config) => {
     // Resolve error when webpack-ing storybook:
     // Can't import the named export 'Children' from non EcmaScript module (only
     // default export is available)

.storybook/preview.js

@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { CoreUiThemeProvider } from '../src/lib/next';
 import { brand, coreUIAvailableThemes } from '../src/lib/style/theme';
 import { Wrapper } from '../stories/common';
-import { ScrollbarWrapper, ToastProvider } from '../src/lib';
+import { ToastProvider } from '../src/lib';
 
 export const globalTypes = {
   theme: {

src/lib/components/infomessage/InfoMessage.component.tsx

@@ -39,7 +39,7 @@ export const InfoMessage = ({ title, content, link }: Props) => {
       </Text>
       {link && (
         <Link href={link} target="_blank" style={{ alignSelf: 'flex-end' }}>
-          More infos <Icon name="External-link"></Icon>
+          More info <Icon name="External-link"></Icon>
         </Link>
       )}
     </InfoMessageContainer>

src/lib/components/tablev2/MultiSelectableContent.tsx

@@ -1,24 +1,24 @@
-import { useEffect, memo, CSSProperties } from 'react';
+import { memo, useEffect } from 'react';
 import { Row } from 'react-table';
 import { areEqual } from 'react-window';
-import { useTableContext } from './Tablev2.component';
+import { spacing } from '../../spacing';
+import { Box } from '../box/Box';
+import { Loader } from '../loader/Loader.component';
+import { RenderRowType, TableRows, useTableScrollbar } from './TableCommon';
+import {
+  TableHeightKeyType,
+  TableLocalType,
+  TableVariantType,
+} from './TableUtils';
 import {
   HeadRow,
   SortCaret,
   TableBody,
   TableHeader,
   TableRowMultiSelectable,
 } from './Tablestyle';
-import {
-  TableHeightKeyType,
-  TableLocalType,
-  TableVariantType,
-} from './TableUtils';
-import { RenderRowType, TableRows, useTableScrollbar } from './TableCommon';
+import { useTableContext } from './Tablev2.component';
 import useSyncedScroll from './useSyncedScroll';
-import { Box } from '../box/Box';
-import { Loader } from '../loader/Loader.component';
-import { spacing } from '../../spacing';
 
 type MultiSelectableContentProps<
   DATA_ROW extends Record<string, unknown> = Record<string, unknown>,
@@ -204,6 +204,7 @@ export const MultiSelectableContent = <
             rowHeight={rowHeight}
             separationLineVariant={separationLineVariant}
             ref={headerRef}
+            style={{}}
           >
             {headerGroup.headers.map((column) => {
               const headerStyleProps = column.getHeaderProps(

src/lib/components/tablev2/SingleSelectableContent.tsx

@@ -138,7 +138,7 @@ export function SingleSelectableContent<
             hasScrollBar={hasScrollbar}
             scrollBarWidth={scrollBarWidth}
             rowHeight={rowHeight}
-            style={{ overflow: 'hidden' }}
+            style={{}}
           >
             {headerGroup.headers.map((column) => {
               const headerStyleProps = column.getHeaderProps(

src/lib/components/tablev2/Tablestyle.tsx

@@ -117,6 +117,7 @@ type TableRowMultiSelectableType = {
 };
 export const TableRowMultiSelectable = styled.div<TableRowMultiSelectableType>`
   color: ${(props) => props.theme.textPrimary};
+  gap: ${spacing.r16};
   border-bottom: 1px solid
     ${(props) => props.theme[props.separationLineVariant]};
   box-sizing: border-box;

stories/InlineInput/InlineInput.stories.tsx

@@ -26,7 +26,9 @@ export default {
         });
       },
     });
-    return <InlineInput {...args} changeMutation={changeMutation} />;
+    return (
+      <InlineInput id={args.id} {...args} changeMutation={changeMutation} />
+    );
   },
 };
 

stories/Table/tablev2.guideline.mdx

@@ -0,0 +1,90 @@
+import {
+  Meta,
+  Story,
+  Canvas,
+  Primary,
+  Controls,
+  Unstyled,
+  Source,
+} from '@storybook/blocks';
+
+import * as TableStories from './tablev2.stories.tsx';
+
+<Meta name="Guideline" of={TableStories} />
+
+# Table
+
+Table is a powerful tool to display, filter and sort data.
+
+## Usage
+
+The Table needs only 2 props "columns" and "data" and either SingleSelectableContent or MultiSelectableContent as children to display.
+
+<Controls of={TableStories.Playground} include={['data', 'columns']} />
+
+### SingleSelectableContent
+
+#### Basic Table
+
+Using the SingleSelectTable without passing the selectedId and onRowSelected props will render a simple table.
+
+<Canvas of={TableStories.SimpleTable} layout="fullscreen" />
+
+#### Single Selectable Table
+
+Use this table when you want to have the possibility to select only one element of the table.
+This allow, for example, to display more details or editing the selected row.
+
+<Canvas of={TableStories.SingleSelectTable} layout="fullscreen" />
+
+### Multi Selectable Content
+
+Possibility to select one or more element of the table, with the possibility to select all elements with the checkbox on Header.
+
+<Canvas of={TableStories.MultiSelectTable} layout="fullscreen" />
+
+### Search input
+
+The table component has a build-in search input. This subcomponent exist in 2 variations.  
+A standard search input and a search input using query params.
+Both allow to search elements from the Table and display the number of corresponding elements.
+
+<Canvas of={TableStories.TableWithSearch} layout="fullscreen" />
+
+<Canvas of={TableStories.TableWithSearchQueryParams} layout="fullscreen" />
+
+## Variations
+
+The Table component also accepts some optionnal props allowing for more customization.
+
+### Style Variations
+
+The Table component has no background and will take the color of its parent element.
+It is however possible to change the line color thanks to the SeparationLineColor props
+
+<Canvas of={TableStories.WithSeparationLine} layout="fullscreen" />
+
+### Status Variations
+
+The Table can take a status prop indicating the status of the data when fetched or queried.
+The status accept 4 values 'loading' or 'idle', 'error', and 'success'.
+'success' status allow the display of the data fed to the Table.
+If the status is not defined then the Table behaves as if the status is 'success'.
+If there is no data the Table will display an empty state :
+
+<Canvas layout="fullscreen" of={TableStories.TableStatus} />
+
+### Entity name
+
+You can pass an entityName props to table containing singular and plural for each define locale (currently english and french).
+This entityName will be used by the search input and for the status messages.
+
+<Canvas layout="fullscreen" of={TableStories.TableWithEntityName} />
+<Controls of={TableStories.TableWithEntityName} include={['locale']} />
+
+## Playground
+
+This is a playground allowing to build and test the component.
+
+<Canvas of={TableStories.Playground} layout="fullscreen" />
+<Controls of={TableStories.Playground} />