@addev-be/ui 2.7.4 → 2.7.5

package/src/components/auth/PasswordResetForm.tsx

@@ -1,112 +1,112 @@
-import { Button, Card, Input, useAuthentication } from '@addev-be/ui';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-
-import { FormContainer } from './styles';
-import { Message } from '../ui/Message';
-import { StackedLabel } from '../forms/VerticalLabel';
-
-export const PasswordResetForm: FC = () => {
-  const { key } = useParams<{ key: string }>();
-  const [password1, setPassword1] = useState('');
-  const [password2, setPassword2] = useState('');
-  const [keyStatus, setKeyStatus] = useState(-1);
-  const [status, setStatus] = useState(-1);
-  const [error, setError] = useState('');
-  const { resetPassword, checkRecoveryKey } = useAuthentication();
-
-  useEffect(() => {
-    if (key) {
-      checkRecoveryKey(key).then((status) => {
-        setKeyStatus(status);
-      });
-    }
-  }, [checkRecoveryKey, key]);
-
-  const onSubmitClicked = useCallback(() => {
-    if (key) {
-      if (password1 !== password2) {
-        setError('Les mots de passe ne sont pas identiques');
-        return;
-      }
-      resetPassword(key, password1).then((status) => {
-        setStatus(status);
-        setError(
-          status === 4
-            ? 'Le mot de passe est trop faible (min. 8 caractères requis)'
-            : ''
-        );
-      });
-    }
-  }, [key, password1, password2, resetPassword]);
-
-  const content = useMemo(() => {
-    if (keyStatus < 0) {
-      return <p>Chargement...</p>;
-    }
-    if (keyStatus > 0) {
-      return (
-        <>
-          <Message type="error">
-            La clé de récupération fournie est invalide ou expirée
-          </Message>
-        </>
-      );
-    }
-
-    switch (status) {
-      case 0:
-        return (
-          <>
-            <Message type="success">
-              Votre mot de passe a été réinitialisé avec succès. Vous pouvez
-              maintenant vous connecter.
-            </Message>
-          </>
-        );
-
-      default:
-        return null;
-    }
-  }, [keyStatus, status]);
-
-  return (
-    <Card>
-      <FormContainer>
-        {content ?? (
-          <>
-            <StackedLabel label="Nouveau mot de passe">
-              <Input
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password1}
-                onChange={(e) => setPassword1(e.target.value)}
-              />
-            </StackedLabel>
-            <StackedLabel label="Confirmation du mot de passe">
-              <Input
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password2}
-                onChange={(e) => setPassword2(e.target.value)}
-              />
-            </StackedLabel>
-
-            {error && (
-              <Message className="mt-4" type="error">
-                {error}
-              </Message>
-            )}
-
-            <Button $color="primary" onClick={onSubmitClicked}>
-              Réinitialiser le mot de passe
-            </Button>
-          </>
-        )}
-        <Link to="/">Retour</Link>
-      </FormContainer>
-    </Card>
-  );
-};
+import { Button, Card, Input, useAuthentication } from '@addev-be/ui';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import { FormContainer } from './styles';
+import { Message } from '../ui/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+
+export const PasswordResetForm: FC = () => {
+  const { key } = useParams<{ key: string }>();
+  const [password1, setPassword1] = useState('');
+  const [password2, setPassword2] = useState('');
+  const [keyStatus, setKeyStatus] = useState(-1);
+  const [status, setStatus] = useState(-1);
+  const [error, setError] = useState('');
+  const { resetPassword, checkRecoveryKey } = useAuthentication();
+
+  useEffect(() => {
+    if (key) {
+      checkRecoveryKey(key).then((status) => {
+        setKeyStatus(status);
+      });
+    }
+  }, [checkRecoveryKey, key]);
+
+  const onSubmitClicked = useCallback(() => {
+    if (key) {
+      if (password1 !== password2) {
+        setError('Les mots de passe ne sont pas identiques');
+        return;
+      }
+      resetPassword(key, password1).then((status) => {
+        setStatus(status);
+        setError(
+          status === 4
+            ? 'Le mot de passe est trop faible (min. 8 caractères requis)'
+            : ''
+        );
+      });
+    }
+  }, [key, password1, password2, resetPassword]);
+
+  const content = useMemo(() => {
+    if (keyStatus < 0) {
+      return <p>Chargement...</p>;
+    }
+    if (keyStatus > 0) {
+      return (
+        <>
+          <Message type="error">
+            La clé de récupération fournie est invalide ou expirée
+          </Message>
+        </>
+      );
+    }
+
+    switch (status) {
+      case 0:
+        return (
+          <>
+            <Message type="success">
+              Votre mot de passe a été réinitialisé avec succès. Vous pouvez
+              maintenant vous connecter.
+            </Message>
+          </>
+        );
+
+      default:
+        return null;
+    }
+  }, [keyStatus, status]);
+
+  return (
+    <Card>
+      <FormContainer>
+        {content ?? (
+          <>
+            <StackedLabel label="Nouveau mot de passe">
+              <Input
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password1}
+                onChange={(e) => setPassword1(e.target.value)}
+              />
+            </StackedLabel>
+            <StackedLabel label="Confirmation du mot de passe">
+              <Input
+                type="password"
+                autoComplete="current-password"
+                required
+                value={password2}
+                onChange={(e) => setPassword2(e.target.value)}
+              />
+            </StackedLabel>
+
+            {error && (
+              <Message className="mt-4" type="error">
+                {error}
+              </Message>
+            )}
+
+            <Button $color="primary" onClick={onSubmitClicked}>
+              Réinitialiser le mot de passe
+            </Button>
+          </>
+        )}
+        <Link to="/">Retour</Link>
+      </FormContainer>
+    </Card>
+  );
+};

package/src/components/auth/styles.ts

@@ -1,14 +1,14 @@
-import styled from 'styled-components';
-
-export const FormContainer = styled.form.attrs({
-  className: 'FormContainer',
-  onSubmit: (e) => e.preventDefault(),
-})`
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-
-  & > a {
-    text-align: center;
-  }
-`;
+import styled from 'styled-components';
+
+export const FormContainer = styled.form.attrs({
+  className: 'FormContainer',
+  onSubmit: (e) => e.preventDefault(),
+})`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+
+  & > a {
+    text-align: center;
+  }
+`;

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

@@ -1,81 +1,81 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import * as styles from './styles';
-
-import { MouseEvent, useCallback, useMemo } from 'react';
-
-import { DataGridCellProps } from './types';
-import { DataGridEditableCell } from './DataGridEditableCell';
-import { useDataGridContext } from './hooks';
-
-const defaultRender = (value: any) => (!value ? '' : String(value));
-
-export const DataGridCell = <R, T>({
-  row,
-  rowIndex,
-  columnKey,
-  columnIndex,
-  column,
-  context,
-  style,
-}: DataGridCellProps<R, T>) => {
-  const {
-    name,
-    editable,
-    editingCell = [-1, -1],
-    setEditingCell,
-    onRowDoubleClick,
-    userSelect,
-    headerColor,
-  } = useDataGridContext(context);
-  const isEditable =
-    !!editable &&
-    'editable' in column &&
-    !!column.editable &&
-    !!column.editComponent;
-  const isEditing =
-    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
-  const DataGridCellComponent = column.component ?? styles.DataGridCell;
-
-  const value = useMemo(() => column.getter(row), [column, row]);
-
-  const onDoubleClick = useCallback(
-    (e: MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (isEditable) {
-        setEditingCell([rowIndex, columnIndex]);
-      } else onRowDoubleClick?.(row, e);
-    },
-    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
-  );
-
-  if (isEditing) {
-    return (
-      <DataGridEditableCell
-        key={`${name}-${rowIndex}-${columnIndex}`}
-        row={row}
-        rowIndex={rowIndex}
-        columnKey={columnKey}
-        columnIndex={columnIndex}
-        column={column as any}
-        context={context}
-        userSelect={userSelect}
-      />
-    );
-  }
-
-  return (
-    <DataGridCellComponent
-      key={`${name}-${rowIndex}-${columnIndex}`}
-      onDoubleClick={onDoubleClick}
-      style={style}
-      $userSelect={userSelect}
-      $color={column.color}
-      $textAlign={column.textAlign}
-      $headerColor={headerColor}
-    >
-      {(column.render ?? defaultRender)(value, row, column)}
-    </DataGridCellComponent>
-  );
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import * as styles from './styles';
+
+import { MouseEvent, useCallback, useMemo } from 'react';
+
+import { DataGridCellProps } from './types';
+import { DataGridEditableCell } from './DataGridEditableCell';
+import { useDataGridContext } from './hooks';
+
+const defaultRender = (value: any) => (!value ? '' : String(value));
+
+export const DataGridCell = <R, T>({
+  row,
+  rowIndex,
+  columnKey,
+  columnIndex,
+  column,
+  context,
+  style,
+}: DataGridCellProps<R, T>) => {
+  const {
+    name,
+    editable,
+    editingCell = [-1, -1],
+    setEditingCell,
+    onRowDoubleClick,
+    userSelect,
+    headerColor,
+  } = useDataGridContext(context);
+  const isEditable =
+    !!editable &&
+    'editable' in column &&
+    !!column.editable &&
+    !!column.editComponent;
+  const isEditing =
+    isEditable && editingCell[0] === rowIndex && editingCell[1] === columnIndex;
+  const DataGridCellComponent = column.component ?? styles.DataGridCell;
+
+  const value = useMemo(() => column.getter(row), [column, row]);
+
+  const onDoubleClick = useCallback(
+    (e: MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isEditable) {
+        setEditingCell([rowIndex, columnIndex]);
+      } else onRowDoubleClick?.(row, e);
+    },
+    [columnIndex, isEditable, onRowDoubleClick, row, rowIndex, setEditingCell]
+  );
+
+  if (isEditing) {
+    return (
+      <DataGridEditableCell
+        key={`${name}-${rowIndex}-${columnIndex}`}
+        row={row}
+        rowIndex={rowIndex}
+        columnKey={columnKey}
+        columnIndex={columnIndex}
+        column={column as any}
+        context={context}
+        userSelect={userSelect}
+      />
+    );
+  }
+
+  return (
+    <DataGridCellComponent
+      key={`${name}-${rowIndex}-${columnIndex}`}
+      onDoubleClick={onDoubleClick}
+      style={style}
+      $userSelect={userSelect}
+      $color={column.color}
+      $textAlign={column.textAlign}
+      $headerColor={headerColor}
+    >
+      {(column.render ?? defaultRender)(value, row, column)}
+    </DataGridCellComponent>
+  );
+};

package/src/components/data/DataGrid/DataGridColumnsModal/helpers.ts

@@ -1,9 +1,9 @@
-import { DataGridColumns } from '../types';
-
-export const normalizeColumnsOrders = <R>(
-  columns: DataGridColumns<R>
-): DataGridColumns<R> =>
-  columns.map((column, index) => ({
-    ...column,
-    order: index,
-  }));
+import { DataGridColumns } from '../types';
+
+export const normalizeColumnsOrders = <R>(
+  columns: DataGridColumns<R>
+): DataGridColumns<R> =>
+  columns.map((column, index) => ({
+    ...column,
+    order: index,
+  }));

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

@@ -1,59 +1,59 @@
-import { keyBy, mapValues } from 'lodash';
-import { useCallback, useContext, useMemo, useState } from 'react';
-
-import { Button } from '../../../forms/Button';
-import { DataGridColumnsEditor } from '.';
-import { DataGridContext } from '../types';
-import { Modal } from '../../../layout/Modal';
-
-export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
-  const [isVisible, setIsVisible] = useState(false);
-  const { columns, setSettings, saveSettings } = useContext(context);
-  const [currentColumns, setCurrentColumns] = useState(columns);
-
-  const openModal = useCallback(() => {
-    setCurrentColumns(columns);
-    setIsVisible(true);
-  }, [columns]);
-  const closeModal = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  const onApplyClicked = useCallback(() => {
-    const newSettings = mapValues(keyBy(currentColumns, 'key'), (col) => ({
-      order: col.order ?? 0,
-      width: col.width ?? 150,
-    }));
-    setSettings(() => newSettings);
-    saveSettings(newSettings);
-    closeModal();
-  }, [currentColumns, closeModal, saveSettings, setSettings]);
-
-  const modal = useMemo(
-    () =>
-      isVisible ? (
-        <Modal $width={600} $height={400}>
-          <Modal.Header>Paramètres des colonnes</Modal.Header>
-          <Modal.Content>
-            <DataGridColumnsEditor
-              columns={currentColumns}
-              onColumnsChanged={setCurrentColumns}
-            />
-          </Modal.Content>
-          <Modal.Footer>
-            <Button onClick={closeModal}>Annuler</Button>
-            <Button
-              $color="primary"
-              style={{ marginLeft: 'auto' }}
-              onClick={onApplyClicked}
-            >
-              Appliquer
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      ) : null,
-    [closeModal, currentColumns, isVisible, onApplyClicked]
-  );
-
-  return { openModal, closeModal, modal };
-};
+import { keyBy, mapValues } from 'lodash';
+import { useCallback, useContext, useMemo, useState } from 'react';
+
+import { Button } from '../../../forms/Button';
+import { DataGridColumnsEditor } from '.';
+import { DataGridContext } from '../types';
+import { Modal } from '../../../layout/Modal';
+
+export const useDataGridColumnsModal = <R,>(context: DataGridContext<R>) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { columns, setSettings, saveSettings } = useContext(context);
+  const [currentColumns, setCurrentColumns] = useState(columns);
+
+  const openModal = useCallback(() => {
+    setCurrentColumns(columns);
+    setIsVisible(true);
+  }, [columns]);
+  const closeModal = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  const onApplyClicked = useCallback(() => {
+    const newSettings = mapValues(keyBy(currentColumns, 'key'), (col) => ({
+      order: col.order ?? 0,
+      width: col.width ?? 150,
+    }));
+    setSettings(() => newSettings);
+    saveSettings(newSettings);
+    closeModal();
+  }, [currentColumns, closeModal, saveSettings, setSettings]);
+
+  const modal = useMemo(
+    () =>
+      isVisible ? (
+        <Modal $width={600} $height={400}>
+          <Modal.Header>Paramètres des colonnes</Modal.Header>
+          <Modal.Content>
+            <DataGridColumnsEditor
+              columns={currentColumns}
+              onColumnsChanged={setCurrentColumns}
+            />
+          </Modal.Content>
+          <Modal.Footer>
+            <Button onClick={closeModal}>Annuler</Button>
+            <Button
+              $color="primary"
+              style={{ marginLeft: 'auto' }}
+              onClick={onApplyClicked}
+            >
+              Appliquer
+            </Button>
+          </Modal.Footer>
+        </Modal>
+      ) : null,
+    [closeModal, currentColumns, isVisible, onApplyClicked]
+  );
+
+  return { openModal, closeModal, modal };
+};