@addev-be/ui 2.1.6 → 2.2.0

package/src/components/auth/LoginPage.tsx

@@ -1,32 +1,32 @@
-import { FC } from 'react';
-import { Outlet } from 'react-router-dom';
-
-export const LoginPage: FC = () => {
-  return (
-    <div className="flex flex-row h-full w-full">
-      <div className="relative hidden w-0 flex-1 lg:block">
-        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
-      </div>
-      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
-        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
-          <div className="text-center">
-            <img
-              className="h-20 w-auto inline-block"
-              src="/logo192.png"
-              alt="Burotel"
-            />
-            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
-              Connectez-vous
-            </h2>
-          </div>
-
-          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
-            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
-              <Outlet />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { FC } from 'react';
+import { Outlet } from 'react-router-dom';
+
+export const LoginPage: FC = () => {
+  return (
+    <div className="flex flex-row h-full w-full">
+      <div className="relative hidden w-0 flex-1 lg:block">
+        <img className="absolute inset-0 h-full w-full object-cover" alt="" />
+      </div>
+      <div className="flex flex-1 flex-col justify-space-evenly overflow-y-auto px-4 py-12 sm:px-6 lg:flex-none lg:px-24 xl:px-36">
+        <div className="mx-auto w-full max-w-sm lg:max-w-96 lg:w-96 xl:max-w-[32rem] xl:w-[32rem]">
+          <div className="text-center">
+            <img
+              className="h-20 w-auto inline-block"
+              src="/logo192.png"
+              alt="Burotel"
+            />
+            <h2 className="mt-8 text-2xl font-bold leading-9 tracking-tight text-gray-900">
+              Connectez-vous
+            </h2>
+          </div>
+
+          <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-[640px]">
+            <div className="bg-white px-6 py-12 shadow sm:rounded-lg sm:px-12">
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/auth/PasswordRecoveryForm.tsx

@@ -1,53 +1,53 @@
-import { FC, useCallback, useState } from 'react';
-
-import { Button } from '../forms/Button';
-import { Card } from '../ui/Card';
-import { FormContainer } from './styles';
-import { Input } from '../forms/styles';
-import { Link } from 'react-router-dom';
-import { Message } from '../ui/Message';
-import { StackedLabel } from '../forms/VerticalLabel';
-import { useAuthentication } from '../../providers/hooks';
-
-export const PasswordRecoveryForm: FC = () => {
-  const [email, setEmail] = useState('');
-  const [isSubmitted, setIsSubmitted] = useState(false);
-  const { sendRecoveryKey } = useAuthentication();
-
-  const onSubmitClicked = useCallback(() => {
-    sendRecoveryKey(email).then(() => {
-      setIsSubmitted(true);
-    });
-  }, [email, sendRecoveryKey]);
-
-  return (
-    <Card>
-      <FormContainer>
-        {isSubmitted ? (
-          <>
-            <Message type="success">
-              Un e-mail de réinitialisation de mot de passe vous a été envoyé.
-            </Message>
-            <Link to="/">Retour</Link>
-          </>
-        ) : (
-          <>
-            <StackedLabel label="Adresse e-mail">
-              <Input
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </StackedLabel>
-
-            <Button $color="primary" onClick={onSubmitClicked}>
-              Envoyer un lien de récupération
-            </Button>
-          </>
-        )}
-      </FormContainer>
-    </Card>
-  );
-};
+import { FC, useCallback, useState } from 'react';
+
+import { Button } from '../forms/Button';
+import { Card } from '../ui/Card';
+import { FormContainer } from './styles';
+import { Input } from '../forms/styles';
+import { Link } from 'react-router-dom';
+import { Message } from '../ui/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers/hooks';
+
+export const PasswordRecoveryForm: FC = () => {
+  const [email, setEmail] = useState('');
+  const [isSubmitted, setIsSubmitted] = useState(false);
+  const { sendRecoveryKey } = useAuthentication();
+
+  const onSubmitClicked = useCallback(() => {
+    sendRecoveryKey(email).then(() => {
+      setIsSubmitted(true);
+    });
+  }, [email, sendRecoveryKey]);
+
+  return (
+    <Card>
+      <FormContainer>
+        {isSubmitted ? (
+          <>
+            <Message type="success">
+              Un e-mail de réinitialisation de mot de passe vous a été envoyé.
+            </Message>
+            <Link to="/">Retour</Link>
+          </>
+        ) : (
+          <>
+            <StackedLabel label="Adresse e-mail">
+              <Input
+                type="email"
+                autoComplete="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </StackedLabel>
+
+            <Button $color="primary" onClick={onSubmitClicked}>
+              Envoyer un lien de récupération
+            </Button>
+          </>
+        )}
+      </FormContainer>
+    </Card>
+  );
+};

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,
+  }));