@addev-be/ui 0.9.1 → 0.10.3

package/assets/icons/table.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addev-be/ui",
-  "version": "0.9.1",
+  "version": "0.10.3",
   "type": "module",
   "scripts": {
     "watch": "tsc -b --watch",

package/src/components/auth/LoginForm.tsx

@@ -73,7 +73,7 @@ export const LoginForm: FC = () => {
 
         {error && <Message type="error">{error}</Message>}
 
-        <Button color="primary" onClick={onLoginClicked}>
+        <Button $color="primary" onClick={onLoginClicked}>
           Se connecter
         </Button>
 

package/src/components/auth/PasswordRecoveryForm.tsx

@@ -41,7 +41,7 @@ export const PasswordRecoveryForm: FC = () => {
               />
             </StackedLabel>
 
-            <Button color="primary" onClick={onSubmitClicked}>
+            <Button $color="primary" onClick={onSubmitClicked}>
               Envoyer un lien de récupération
             </Button>
           </>

package/src/components/auth/PasswordResetForm.tsx

@@ -100,7 +100,7 @@ export const PasswordResetForm: FC = () => {
               </Message>
             )}
 
-            <Button color="primary" onClick={onSubmitClicked}>
+            <Button $color="primary" onClick={onSubmitClicked}>
               Réinitialiser le mot de passe
             </Button>
           </>

package/src/components/data/DataGrid/DataGridColumnsModal/hooks.tsx

@@ -43,7 +43,7 @@ export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
           <Modal.Footer>
             <Button onClick={closeModal}>Annuler</Button>
             <Button
-              color="primary"
+              $color="primary"
               style={{ marginLeft: 'auto' }}
               onClick={onApplyClicked}
             >

package/src/components/data/DataGrid/DataGridFilterMenu/hooks.tsx

@@ -55,12 +55,12 @@ export const useFilterModal = <R,>({
         />
       </Modal.ContentWithIcon>
       <Modal.Buttons>
-        <Button color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
+        <Button $color="danger" icon={FilterSlashIcon} onClick={onClearClicked}>
           Supprimer
         </Button>
         <Button
           style={{ marginLeft: 'auto' }}
-          color="primary"
+          $color="primary"
           icon={FilterIcon}
           onClick={onApplyClicked}
         >

package/src/components/data/DataGrid/DataGridFilterMenu/index.tsx

@@ -46,6 +46,7 @@ import {
 import { ContextMenu } from '../../../ui/ContextMenu';
 import { FilterValuesScroller } from './FilterValuesScroller';
 import { Input } from '../../../forms';
+import { MenuContainer } from '../../../ui/ContextMenu/styles';
 import { useFilterModal } from './hooks';
 
 type FilterValuesProps<R> = {
@@ -53,6 +54,8 @@ type FilterValuesProps<R> = {
   columnIndex: number;
   context: DataGridContext<R>;
   onClose?: () => void;
+  contextMenu?: boolean;
+  showTotalButton?: boolean;
 };
 
 const sortAsc: Record<DataGridFilterType, [string, IconFC]> = {
@@ -87,6 +90,8 @@ export const DataGridFilterMenu = <R,>({
   columnKey,
   context,
   onClose,
+  contextMenu = true,
+  showTotalButton = true,
 }: FilterValuesProps<R>) => {
   const { openModal, modal } = useFilterModal({ columnKey, context });
   const {
@@ -258,8 +263,8 @@ export const DataGridFilterMenu = <R,>({
     onClose?.();
   }, [columnKey, onClose, setFooters]);
 
-  return (
-    <ContextMenu>
+  const content = (
+    <>
       {modal}
       {column.sortGetter && (
         <>
@@ -283,48 +288,55 @@ export const DataGridFilterMenu = <R,>({
           <ContextMenu.Divider />
         </>
       )}
-      {!isFooterVisible && typeof column.footer === 'function' && (
+      {showTotalButton && (
         <>
-          <ContextMenu.Item onClick={() => showFooter('count')}>
-            <TableFooterIcon />
-            Afficher le total
-          </ContextMenu.Item>
-          <ContextMenu.Divider />
-        </>
-      )}
-      {typeof column.footer === 'object' && (
-        <>
-          <ContextMenu.ParentItem>
-            <TableFooterIcon />
-            Afficher le total
-            <ContextMenu.SubMenu>
-              {Object.keys(column.footer).map((key) => {
-                const TotalIcon =
-                  footerFunctionsIcons[
-                    key as DataGridFooterPredefinedFunction
-                  ] ?? TableFooterIcon;
-                return (
-                  <ContextMenu.Item key={key} onClick={() => showFooter(key)}>
-                    <TotalIcon />
-                    {key in footerFunctionsTexts
-                      ? footerFunctionsTexts[
-                          key as DataGridFooterPredefinedFunction
-                        ]
-                      : key}
+          {!isFooterVisible && typeof column.footer === 'function' && (
+            <>
+              <ContextMenu.Item onClick={() => showFooter('count')}>
+                <TableFooterIcon />
+                Afficher le total
+              </ContextMenu.Item>
+              <ContextMenu.Divider />
+            </>
+          )}
+          {showTotalButton && typeof column.footer === 'object' && (
+            <>
+              <ContextMenu.ParentItem>
+                <TableFooterIcon />
+                Afficher le total
+                <ContextMenu.SubMenu>
+                  {Object.keys(column.footer).map((key) => {
+                    const TotalIcon =
+                      footerFunctionsIcons[
+                        key as DataGridFooterPredefinedFunction
+                      ] ?? TableFooterIcon;
+                    return (
+                      <ContextMenu.Item
+                        key={key}
+                        onClick={() => showFooter(key)}
+                      >
+                        <TotalIcon />
+                        {key in footerFunctionsTexts
+                          ? footerFunctionsTexts[
+                              key as DataGridFooterPredefinedFunction
+                            ]
+                          : key}
+                      </ContextMenu.Item>
+                    );
+                  })}
+                  <ContextMenu.Divider />
+                  <ContextMenu.Item
+                    onClick={hideFooter}
+                    disabled={!isFooterVisible}
+                  >
+                    <TableFooterSlashIcon />
+                    Masquer le total
                   </ContextMenu.Item>
-                );
-              })}
+                </ContextMenu.SubMenu>
+              </ContextMenu.ParentItem>
               <ContextMenu.Divider />
-              <ContextMenu.Item
-                onClick={hideFooter}
-                disabled={!isFooterVisible}
-              >
-                <TableFooterSlashIcon />
-                Masquer le total
-              </ContextMenu.Item>
-            </ContextMenu.SubMenu>
-          </ContextMenu.ParentItem>
-          <ContextMenu.Divider />
+            </>
+          )}
         </>
       )}
       <ContextMenu.Item onClick={openModal}>
@@ -355,6 +367,12 @@ export const DataGridFilterMenu = <R,>({
       <styles.CheckboxesContainer>
         {checkboxesComponent}
       </styles.CheckboxesContainer>
-    </ContextMenu>
+    </>
   );
+
+  if (!contextMenu) {
+    return <MenuContainer>{content}</MenuContainer>;
+  }
+
+  return <ContextMenu>{content}</ContextMenu>;
 };

package/src/components/data/DataGrid/DataGridHeader.tsx

@@ -76,16 +76,16 @@ export const DataGridHeader = <R,>({
           Rafraîchir
         </Button>
       )}
-      <Button color="emerald" size="small" onClick={runCopyTable}>
+      <Button $color="emerald" size="small" onClick={runCopyTable}>
         <CopyIcon />
         Copier la table
       </Button>
-      <Button size="small" color="danger" onClick={() => setFilters({})}>
+      <Button size="small" $color="danger" onClick={() => setFilters({})}>
         <FilterSlashIcon />
         Supprimer les filtres
       </Button>
       {name && (
-        <Button color="info" size="small" onClick={openModal}>
+        <Button $color="info" size="small" onClick={openModal}>
           <TableColumnsIcon />
           Paramètres des colonnes
         </Button>

package/src/components/data/DataGrid/DataGridHeaderCell.tsx

@@ -6,12 +6,12 @@ import * as styles from './styles';
 import { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
 
 import { ChevronDownIcon } from '../../../Icons';
-import { DataGridFilterMenu } from './DataGridFilterMenu';
-import { DataGridHeaderCellProps } from './types';
-import { Dropdown } from '../../layout';
+import { useUi } from '../../../providers';
 import { IconButton } from '../../forms/IconButton';
+import { Dropdown } from '../../layout';
+import { DataGridFilterMenu } from './DataGridFilterMenu';
 import { useDataGridContext } from './hooks';
-import { useUi } from '../../../providers';
+import { DataGridHeaderCellProps } from './types';
 
 export const DataGridHeaderCell = <R,>({
   columnKey,

package/src/components/data/DataGrid/index.tsx

@@ -66,6 +66,7 @@ export const DataGridInner = <R,>(
       >
         <DataGridHeader context={DataGridContext} />
         <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+          integrated
           gridTemplateColumns={gridTemplateColumns}
           items={sortedRows}
           itemTemplate={rowTemplate}

package/src/components/data/DataGrid/styles.ts

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { ThemeColor } from '../../../providers/ThemeProvider/types';
-import { VirtualScrollerContainer } from '../VirtualScroller/styles';
+import { VirtualScrollerFiller } from '../VirtualScroller/styles';
 
 export const TOOLBAR_HEIGHT = 40;
 export const DEFAULT_HEADER_ROW_HEIGHT = 40;
@@ -168,7 +168,7 @@ export const DataGridContainer = styled.div<{
     box-sizing: border-box;
   }
 
-  ${VirtualScrollerContainer} {
+  ${VirtualScrollerFiller} {
     grid-column-start: 1;
     grid-column-end: -1;
     grid-row: 3;

package/src/components/data/SqlRequestDataGrid/helpers/columns.tsx

@@ -3,6 +3,7 @@
 import { SqlRequestDataGridColumn, SqlRequestDataGridColumns } from '../types';
 import {
   buildExcelFormat,
+  dateFilter,
   numberFilter,
   textFilter,
 } from '../../DataGrid/helpers';
@@ -110,7 +111,7 @@ export const sqlDateColumn = <R extends Record<string, any>>(
     excelFormatter: () => 'dd/mm/yyyy',
     excelValue: (value) => formatDate(value, 'YYYY-MM-DD'),
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       getter: (value) => value[key] ?? '',
       formatter: (value) => formatDate(value),
       renderer: (value) => formatDate(value),
@@ -134,7 +135,7 @@ export const sqlDateTimeColumn = <R extends Record<string, any>>(
     excelFormatter: () => 'dd/mm/yyyy hh:mm:ss',
     excelValue: (value) => formatDateTime(value, 'YYYY-MM-DD HH:mm:ss'),
     filter: {
-      ...textFilter(key),
+      ...dateFilter(key),
       getter: (value) => value[key] ?? '',
       formatter: (value) => formatDateTime(value),
       renderer: (value) => formatDateTime(value),
@@ -172,7 +173,7 @@ export const sqlNumberColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,
@@ -202,7 +203,7 @@ export const sqlMoneyColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals, ' €'),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,
@@ -231,7 +232,7 @@ export const sqlPercentageColumn = <R extends Record<string, any>>(
     excelFormatter: () => buildExcelFormat(decimals, '%'),
     excelValue: (value) => formatNumberInvariant(value, decimals),
     getter: (row) => row[key] ?? '',
-    sortGetter: (row) => row[key] ?? '',
+    sortGetter: (row) => row[key] ?? 0,
     filter: {
       ...numberFilter(key),
       getter: (value) => value[key] ?? 0,

package/src/components/data/SqlRequestGrid/filters/FiltersSidebar.tsx

@@ -0,0 +1,102 @@
+import * as styles from './styles';
+
+import {
+  CircleXMarkIcon,
+  FilterSlashIcon,
+  LeftIcon,
+  RightIcon,
+} from '../../../../Icons';
+import { MouseEvent, useCallback, useState } from 'react';
+
+import { DataGridContext } from '../../DataGrid/types';
+import { DataGridFilterMenu } from '../../DataGrid/DataGridFilterMenu';
+import { IconButton } from '../../../forms';
+import { SqlRequestGridProps } from '../types';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+type FiltersSidebarProps<R, P extends object = {}> = {
+  props: SqlRequestGridProps<R, P>;
+  context: DataGridContext<R>;
+  onClose?: () => void;
+  onClearFilters?: () => void;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export const FiltersSidebar = <R, P extends object = {}>({
+  props,
+  context,
+  onClose,
+  onClearFilters,
+}: FiltersSidebarProps<R, P>) => {
+  const [columnKey, setColumnKey] = useState<string | null>(null);
+  const column = columnKey ? props.fields[columnKey] : null;
+  const visible = !!(columnKey && column);
+
+  const stopPropagation = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+  }, []);
+
+  const onFilterClick = useCallback((columnKey: string | null) => {
+    setColumnKey(columnKey);
+  }, []);
+
+  return (
+    <styles.Backdrop onClick={onClose}>
+      <styles.FiltersSidebarContainer onClick={stopPropagation}>
+        {visible ? (
+          <>
+            <styles.FiltersSidebarHeader>
+              <IconButton
+                rounded
+                icon={LeftIcon}
+                color="secondary"
+                onClick={() => onFilterClick(null)}
+              />
+              <h3>{column.name}</h3>
+              <IconButton
+                rounded
+                icon={CircleXMarkIcon}
+                color="secondary"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            <DataGridFilterMenu
+              contextMenu={false}
+              columnKey={columnKey}
+              columnIndex={0}
+              context={context}
+              showTotalButton={false}
+            />
+          </>
+        ) : (
+          <>
+            <styles.FiltersSidebarHeader>
+              <h3>Filtres</h3>
+              <IconButton
+                rounded
+                icon={FilterSlashIcon}
+                color="danger"
+                onClick={onClearFilters}
+              />
+              <IconButton
+                rounded
+                icon={CircleXMarkIcon}
+                color="secondary"
+                onClick={onClose}
+              />
+            </styles.FiltersSidebarHeader>
+            {Object.entries(props.fields).map(([key, field], index) => (
+              <styles.FiltersSidebarFilter
+                key={index}
+                onClick={() => onFilterClick(key)}
+              >
+                {field.name}
+                <RightIcon />
+              </styles.FiltersSidebarFilter>
+            ))}
+          </>
+        )}
+      </styles.FiltersSidebarContainer>
+    </styles.Backdrop>
+  );
+};

package/src/components/data/SqlRequestGrid/filters/styles.ts

@@ -0,0 +1,83 @@
+import {
+  Divider,
+  MenuContainer,
+  MenuItemContainer,
+} from '../../../ui/ContextMenu/styles';
+
+import styled from 'styled-components';
+
+export const FiltersSidebarContainer = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  max-width: var(--space-96);
+  border-radius: var(--rounded-none);
+  padding: 0;
+  z-index: 1;
+  overflow-y: auto;
+  box-sizing: border-box;
+  background-color: var(--color-neutral-50);
+  border-right: 1px solid var(--color-neutral-300);
+  box-shadow: var(--shadow-sm);
+
+  & > ${MenuContainer} {
+    position: relative;
+    background: none;
+    padding: var(--space-2) 0;
+
+    ${MenuItemContainer} {
+      background: none;
+      /* height: var(--size-6); */
+      padding: var(--space-2) var(--space-4);
+    }
+
+    ${Divider} {
+      margin: var(--space-2) 0;
+    }
+  }
+`;
+
+export const FiltersSidebarHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-4);
+  padding: var(--space-2);
+
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-300);
+
+  h3 {
+    margin: 0;
+    margin-right: auto;
+  }
+`;
+
+export const FiltersSidebarFilter = styled.div`
+  display: flex;
+  align-items: center;
+  padding: var(--space-4) var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-300);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--color-neutral-100);
+  }
+  svg {
+    margin-left: auto;
+    width: var(--space-4);
+    height: var(--space-4);
+  }
+`;
+
+export const Backdrop = styled.div`
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-color: rgba(0, 0, 0, 0.5);
+`;