Merge pull request #396 from samuel-gomez/refactor/table-custom

refactor(table): update table custom with table toolkit

Author: samuel-gomez

src/Layout/Layout.scss

@@ -0,0 +1,11 @@
+.af-main {
+  padding: 1rem;
+  min-height: calc(100vh - (calc(var(--fullheaderHeight) + var(--footerHeight))));
+  background: $color-gray-2;
+}
+
+@include media-breakpoint-down(sm) {
+  .af-main {
+    padding: 0;
+  }
+}

src/Layout/Layout.tsx

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import withClassNameModifier from 'shared/hoc/WithClassNameModifier';
+import withClassNameModifier, { TwithClassNameModifier } from 'shared/hoc/WithClassNameModifier';
 import Header from 'Layout/Header';
 import Footer from 'Layout/Footer';
 import TitleBar from 'Layout/TitleBar';
@@ -22,7 +22,7 @@ export type TLayout = {
   propsTitle?: ComponentPropsWithoutRef<typeof TitleBar>;
   propsFooter?: ComponentPropsWithoutRef<typeof Footer>;
   propsA11yMenu?: ComponentPropsWithoutRef<typeof A11yMenu>;
-};
+} & TwithClassNameModifier;
 
 export type TLayoutPage = TLayout & {
   titleBar?: string;
@@ -37,8 +37,6 @@ const disabledDefault = {
   a11yMenu: false,
 };
 
-const DEFAULT_CLASSNAME = 'af-main';
-
 const Layout = withClassNameModifier(
   ({ className, children, propsHeader, propsMenu, propsTitle, propsFooter, propsA11yMenu, fullScreen, disabled = disabledDefault }: TLayout) => (
     <>
@@ -52,7 +50,7 @@ const Layout = withClassNameModifier(
       {!disabled.footer && <Footer {...propsFooter} fullScreen={fullScreen} />}
     </>
   ),
-  DEFAULT_CLASSNAME,
+  { defaultClassName: 'af-main' },
 );
 
 export default Layout;

src/pages/Demos/ModalCustom/ModalConfirm/ModalConfirm.tsx

@@ -1,17 +1,15 @@
 import { Alert } from '@axa-fr/react-toolkit-all';
 import Modal from '@axa-fr/react-toolkit-modal-default';
 import { ModalCommonHeader, ModalCommonBody, ModalCommonFooter, TReturnUseToggleModal } from 'shared/components/ModalCommon';
-import withClassNameModifier from 'shared/hoc/WithClassNameModifier';
+import withClassNameModifier, { TwithClassNameModifier } from 'shared/hoc/WithClassNameModifier';
 
 /**
  * NOTE: Ce composant est un snippet, il n'est pas utilisé dans la démo
  */
 
 type TModalConfirm = Pick<TReturnUseToggleModal, 'isOpen' | 'onCancel'> & {
   className?: string;
-};
-
-const DEFAULT_CLASSNAME = 'af-modal';
+} & TwithClassNameModifier;
 
 const ModalConfirm = withClassNameModifier(
   ({ className, isOpen, onCancel }: TModalConfirm) => (
@@ -24,7 +22,7 @@ const ModalConfirm = withClassNameModifier(
       <ModalCommonFooter cancelLabel="Annuler" onCancel={onCancel} onSubmit={onCancel} confirmLabel="Valider" confirmClassModifier="" />
     </Modal>
   ),
-  DEFAULT_CLASSNAME,
+  { defaultClassName: 'af-modal' },
 );
 
 export default ModalConfirm;

src/pages/Demos/Table/Table.tsx

@@ -19,7 +19,7 @@ const INITIAL_STATE = {
   classModifier: '',
   className: 'af-table',
   headers: [
-    { label: 'Prénomlll', id: 'firstname' },
+    { label: 'Prénom', id: 'firstname' },
     {
       label: `<span><strong>Nom</strong>
     <i className="glyphicon glyphicon-ok"></i></span>`,

src/shared/components/LiveCode/LiveCode.tsx

@@ -2,7 +2,7 @@ import vsDark from 'prism-react-renderer/themes/vsDark';
 import React from 'react';
 import { LiveProviderProps, LiveProvider, LiveError, LivePreview } from 'react-live';
 import * as reactTookitAll from '@axa-fr/react-toolkit-all';
-import withClassNameModifier from 'shared/hoc/WithClassNameModifier';
+import withClassNameModifier, { TwithClassNameModifier } from 'shared/hoc/WithClassNameModifier';
 import { TReturnUseToggleModal } from '../ModalCommon';
 import TabsLiveCode from './TabsLiveCode';
 import Accessibility from './Accessibility';
@@ -23,7 +23,7 @@ type TLiveCode = {
   hideCode?: boolean;
   hideAccessibility?: boolean;
   hideReadme?: boolean;
-};
+} & TwithClassNameModifier;
 
 const styleLivePreviewDefault = { background: 'white', padding: '2rem', width: '100%' } as const;
 const ariaLabel = 'af-accessibility' as const;
@@ -53,7 +53,7 @@ const LiveCode = withClassNameModifier(
       </TabsLiveCode>
     </article>
   ),
-  'af-livecode',
+  { defaultClassName: 'af-livecode' },
 );
 
 export default LiveCode;

src/shared/components/Table/Body/Body.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { default as TableTk } from '@axa-fr/react-toolkit-table';
 import Line from './Line';
 
 export type Tcol = {
@@ -7,13 +8,14 @@ export type Tcol = {
   children?: ReactNode;
   classModifier?: string;
 };
+
 export type TCols = {
   [k: string]: Tcol;
 };
 
 type TItems = {
   key: string;
-  modifier?: string;
+  classModifier?: string;
   cols: TCols;
 };
 
@@ -24,12 +26,12 @@ export type TBody = {
 };
 
 const Body = ({ items = [], children, ariaLabel = 'table-body' }: TBody) => (
-  <tbody className="af-table__body" aria-label={ariaLabel}>
-    {items.map(({ key, modifier, cols }) => (
-      <Line key={key} modifier={modifier} cols={Object.entries({ ...cols })} />
+  <TableTk.Body aria-label={ariaLabel}>
+    {items.map(({ key, classModifier, cols }) => (
+      <Line key={key} classModifier={classModifier} cols={Object.entries({ ...cols })} />
     ))}
     {children}
-  </tbody>
+  </TableTk.Body>
 );
 
 export default Body;

src/shared/components/Table/Body/Line/Line.container.tsx

@@ -1,19 +1,17 @@
 import type { Tcol } from '../Body';
-import Line from './Line';
+import Line, { TLine } from './Line';
 
-export type TLineContainer = {
-  className?: string;
-  modifier?: string;
+export type TLineContainer = Omit<TLine, 'columns'> & {
   LineCmpt?: typeof Line;
   cols: [string, Tcol][];
 };
 
-const LineContainer = ({ className, modifier = '', LineCmpt = Line, cols }: TLineContainer) => {
+const LineContainer = ({ LineCmpt = Line, cols, ...restLineProps }: TLineContainer) => {
   const columns = cols.map(([keyCol, value]) => ({
     keyCol,
     ...value,
   }));
-  return <LineCmpt className={className} modifier={modifier} columns={columns} />;
+  return <LineCmpt {...restLineProps} columns={columns} />;
 };
 
 export default LineContainer;

src/shared/components/Table/Body/Line/Line.tsx

@@ -1,38 +1,21 @@
-import { ReactNode } from 'react';
-import withClassNameModifier from 'shared/hoc/WithClassNameModifier';
+import { ComponentPropsWithoutRef } from 'react';
+import { default as TableTk } from '@axa-fr/react-toolkit-table';
 import Td, { TTdContainer } from './Td';
 
-type TTr = {
-  className?: string;
-  children: ReactNode;
-};
-const DEFAULT_CLASSNAME = 'af-table__tr';
-
-const Tr = withClassNameModifier(
-  ({ className, children, ...rest }: TTr) => (
-    <tr className={className} aria-label="table-body-line" {...rest}>
-      {children}
-    </tr>
-  ),
-  DEFAULT_CLASSNAME,
-);
-
-export type TLine = {
-  className?: string;
+export type TLine = ComponentPropsWithoutRef<typeof TableTk.Tr> & {
   columns: (TTdContainer & { keyCol: string })[];
-  modifier?: string;
-  children?: ReactNode;
+  ariaLabel?: string;
 };
 
-const Line = ({ className, columns = [], modifier = '', children }: TLine) => (
-  <Tr classModifier={modifier} className={className}>
+const Line = ({ className, columns = [], classModifier = '', children, ariaLabel = 'table-body-line' }: TLine) => (
+  <TableTk.Tr classModifier={classModifier} className={className} aria-label={ariaLabel}>
     <>
       {columns.map(({ keyCol, ...restTd }) => (
         <Td key={keyCol} {...restTd} />
       ))}
       {children}
     </>
-  </Tr>
+  </TableTk.Tr>
 );
 
 export default Line;

src/shared/components/Table/Body/Line/Td/Td.container.tsx

@@ -1,20 +1,23 @@
 import { ReactNode } from 'react';
-import withClassNameModifier from 'shared/hoc/WithClassNameModifier';
+import HelpHover, { THelpInfo } from 'shared/components/HelpInfo';
+import { default as TableTk } from '@axa-fr/react-toolkit-table';
 
-export type TTd = {
-  className?: string;
+export type TTdContainer = Omit<THelpInfo, 'children'> & {
   children?: ReactNode;
+  label?: ReactNode;
+  classModifier?: string;
+  hover?: ReactNode;
+  TdCmpt?: typeof TableTk.Td;
+  HelpHoverCmpt?: typeof HelpHover;
 };
 
-const DEFAULT_CLASSNAME = 'af-table__cell';
-
-const Td = withClassNameModifier(
-  ({ className, children, ...rest }: TTd) => (
-    <td {...rest} className={className}>
+const TdContainer = ({ children, label, hover, classModifier, TdCmpt = TableTk.Td, HelpHoverCmpt = HelpHover }: TTdContainer) => (
+  <TdCmpt classModifier={classModifier}>
+    <HelpHoverCmpt content={hover} classModifier="content">
+      {label}
       {children}
-    </td>
-  ),
-  DEFAULT_CLASSNAME,
+    </HelpHoverCmpt>
+  </TdCmpt>
 );
 
-export default Td;
+export default TdContainer;