@addev-be/ui 2.3.0 → 2.4.1

package/src/Icons.tsx

@@ -1,138 +1,138 @@
-import { FC, SVGProps, useEffect, useState } from 'react';
-
-import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
-import AngleRightIcon from '../assets/icons/angle-right.svg?react';
-import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
-import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
-import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
-import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
-import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
-import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
-import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
-import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
-import BarsIcon from '../assets/icons/bars.svg?react';
-import CheckIcon from '../assets/icons/check.svg?react';
-import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
-import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
-import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
-import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
-import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
-import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
-import CopyIcon from '../assets/icons/copy.svg?react';
-import DownIcon from '../assets/icons/down.svg?react';
-import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
-import FilterFullIcon from '../assets/icons/filter-full.svg?react';
-import FilterIcon from '../assets/icons/filter.svg?react';
-import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
-import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
-import HashtagIcon from '../assets/icons/hashtag.svg?react';
-import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
-import LeftIcon from '../assets/icons/left.svg?react';
-import MagnifierIcon from '../assets/icons/magnifier.svg?react';
-import PhoneIcon from '../assets/icons/phone.svg?react';
-import PlusIcon from '../assets/icons/plus.svg?react';
-import RightIcon from '../assets/icons/right.svg?react';
-import SigmaIcon from '../assets/icons/sigma.svg?react';
-import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
-import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
-import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
-import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
-import TableFooterIcon from '../assets/icons/table-footer.svg?react';
-import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
-import TableIcon from '../assets/icons/table.svg?react';
-import TallyIcon from '../assets/icons/tally.svg?react';
-import TrashCanIcon from '../assets/icons/trash-can.svg?react';
-import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?react';
-import UpIcon from '../assets/icons/up.svg?react';
-import UserTieIcon from '../assets/icons/user-tie.svg?react';
-import XBarIcon from '../assets/icons/x-bar.svg?react';
-import XMarkIcon from '../assets/icons/xmark.svg?react';
-import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
-
-type IconFCProps = SVGProps<SVGSVGElement>;
-export type IconFC = FC<IconFCProps>;
-
-type AnimatedIconProps = {
-  icons: FC[];
-  speed?: number;
-};
-
-export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
-  icons,
-  speed = 150,
-  ...props
-}) => {
-  const [currentIcon, setCurrentIcon] = useState(0);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
-    }, speed);
-
-    return () => {
-      clearInterval(interval);
-    };
-  }, [icons.length, speed]);
-
-  const Icon = icons[currentIcon];
-  return <Icon {...props} />;
-};
-
-export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
-  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
-);
-
-export const BlankIcon: FC<IconFCProps> = (props) => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} />
-);
-
-export {
-  AngleLeftIcon,
-  AngleRightIcon,
-  ArrowDown19Icon,
-  ArrowDownAZIcon,
-  ArrowDownBigSmallIcon,
-  ArrowsRotateIcon,
-  ArrowsUpDownIcon,
-  ArrowUp91Icon,
-  ArrowUpBigSmallIcon,
-  ArrowUpZAIcon,
-  BarsIcon,
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CircleCheckIcon,
-  CircleInfoIcon,
-  CircleXMarkIcon,
-  CopyIcon,
-  DownIcon,
-  EllipsisIcon,
-  FilterFullIcon,
-  FilterIcon,
-  FilterSlashIcon,
-  FloppyDiskIcon,
-  HashtagIcon,
-  ImageSlashIcon,
-  LeftIcon,
-  MagnifierIcon,
-  PhoneIcon,
-  PlusIcon,
-  RightIcon,
-  SigmaIcon,
-  SortCalendarAscendingIcon,
-  SortCalendarDescendingIcon,
-  SpinnerIcon,
-  TableColumnsIcon,
-  TableFooterIcon,
-  TableFooterSlashIcon,
-  TableIcon,
-  TallyIcon,
-  TrashCanIcon,
-  TriangleExclamationIcon,
-  UpIcon,
-  UserTieIcon,
-  XBarIcon,
-  XMarkIcon,
-  XMarkLargeIcon,
-};
+import { FC, SVGProps, useEffect, useState } from 'react';
+
+import AngleLeftIcon from '../assets/icons/angle-left.svg?react';
+import AngleRightIcon from '../assets/icons/angle-right.svg?react';
+import ArrowDown19Icon from '../assets/icons/arrow-down-1-9.svg?react';
+import ArrowDownAZIcon from '../assets/icons/arrow-down-a-z.svg?react';
+import ArrowDownBigSmallIcon from '../assets/icons/arrow-down-big-small.svg?react';
+import ArrowUp91Icon from '../assets/icons/arrow-up-9-1.svg?react';
+import ArrowUpBigSmallIcon from '../assets/icons/arrow-up-big-small.svg?react';
+import ArrowUpZAIcon from '../assets/icons/arrow-up-z-a.svg?react';
+import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
+import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
+import BarsIcon from '../assets/icons/bars.svg?react';
+import CheckIcon from '../assets/icons/check.svg?react';
+import ChevronDownIcon from '../assets/icons/chevron-down.svg?react';
+import ChevronLeftIcon from '../assets/icons/chevron-left.svg?react';
+import ChevronRightIcon from '../assets/icons/chevron-right.svg?react';
+import CircleCheckIcon from '../assets/icons/circle-check.svg?react';
+import CircleInfoIcon from '../assets/icons/circle-info.svg?react';
+import CircleXMarkIcon from '../assets/icons/circle-xmark.svg?react';
+import CopyIcon from '../assets/icons/copy.svg?react';
+import DownIcon from '../assets/icons/down.svg?react';
+import EllipsisIcon from '../assets/icons/ellipsis.svg?react';
+import FilterFullIcon from '../assets/icons/filter-full.svg?react';
+import FilterIcon from '../assets/icons/filter.svg?react';
+import FilterSlashIcon from '../assets/icons/filter-slash.svg?react';
+import FloppyDiskIcon from '../assets/icons/floppy-disk.svg?react';
+import HashtagIcon from '../assets/icons/hashtag.svg?react';
+import ImageSlashIcon from '../assets/icons/image-slash.svg?react';
+import LeftIcon from '../assets/icons/left.svg?react';
+import MagnifierIcon from '../assets/icons/magnifier.svg?react';
+import PhoneIcon from '../assets/icons/phone.svg?react';
+import PlusIcon from '../assets/icons/plus.svg?react';
+import RightIcon from '../assets/icons/right.svg?react';
+import SigmaIcon from '../assets/icons/sigma.svg?react';
+import SortCalendarAscendingIcon from '../assets/icons/sort-calendar-ascending.svg?react';
+import SortCalendarDescendingIcon from '../assets/icons/sort-calendar-descending.svg?react';
+import SpinnerIcon from '../assets/icons/spinner-third.svg?react';
+import TableColumnsIcon from '../assets/icons/table-columns.svg?react';
+import TableFooterIcon from '../assets/icons/table-footer.svg?react';
+import TableFooterSlashIcon from '../assets/icons/table-footer-slash.svg?react';
+import TableIcon from '../assets/icons/table.svg?react';
+import TallyIcon from '../assets/icons/tally.svg?react';
+import TrashCanIcon from '../assets/icons/trash-can.svg?react';
+import TriangleExclamationIcon from '../assets/icons/triangle-exclamation.svg?react';
+import UpIcon from '../assets/icons/up.svg?react';
+import UserTieIcon from '../assets/icons/user-tie.svg?react';
+import XBarIcon from '../assets/icons/x-bar.svg?react';
+import XMarkIcon from '../assets/icons/xmark.svg?react';
+import XMarkLargeIcon from '../assets/icons/xmark-large.svg?react';
+
+type IconFCProps = SVGProps<SVGSVGElement>;
+export type IconFC = FC<IconFCProps>;
+
+type AnimatedIconProps = {
+  icons: FC[];
+  speed?: number;
+};
+
+export const AnimatedIcon: FC<AnimatedIconProps & IconFCProps> = ({
+  icons,
+  speed = 150,
+  ...props
+}) => {
+  const [currentIcon, setCurrentIcon] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIcon((currentIcon) => (currentIcon + 1) % icons.length);
+    }, speed);
+
+    return () => {
+      clearInterval(interval);
+    };
+  }, [icons.length, speed]);
+
+  const Icon = icons[currentIcon];
+  return <Icon {...props} />;
+};
+
+export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
+  <SpinnerIcon className={`animate-spin ${className}`} {...props} />
+);
+
+export const BlankIcon: FC<IconFCProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props} />
+);
+
+export {
+  AngleLeftIcon,
+  AngleRightIcon,
+  ArrowDown19Icon,
+  ArrowDownAZIcon,
+  ArrowDownBigSmallIcon,
+  ArrowsRotateIcon,
+  ArrowsUpDownIcon,
+  ArrowUp91Icon,
+  ArrowUpBigSmallIcon,
+  ArrowUpZAIcon,
+  BarsIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  CopyIcon,
+  DownIcon,
+  EllipsisIcon,
+  FilterFullIcon,
+  FilterIcon,
+  FilterSlashIcon,
+  FloppyDiskIcon,
+  HashtagIcon,
+  ImageSlashIcon,
+  LeftIcon,
+  MagnifierIcon,
+  PhoneIcon,
+  PlusIcon,
+  RightIcon,
+  SigmaIcon,
+  SortCalendarAscendingIcon,
+  SortCalendarDescendingIcon,
+  SpinnerIcon,
+  TableColumnsIcon,
+  TableFooterIcon,
+  TableFooterSlashIcon,
+  TableIcon,
+  TallyIcon,
+  TrashCanIcon,
+  TriangleExclamationIcon,
+  UpIcon,
+  UserTieIcon,
+  XBarIcon,
+  XMarkIcon,
+  XMarkLargeIcon,
+};

package/src/components/auth/LoginForm.tsx

@@ -1,86 +1,86 @@
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { Link, redirect } from 'react-router-dom';
-
-import { Button } from '../forms/Button';
-import { Card } from '../ui/Card';
-import { FormContainer } from './styles';
-import { Input } from '../forms/styles';
-import { Message } from '../ui/Message';
-import { StackedLabel } from '../forms/VerticalLabel';
-import { useAuthentication } from '../../providers/hooks';
-
-export const LoginForm: FC = () => {
-  const [username, setUsername] = useState(
-    localStorage.getItem('username') || ''
-  );
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-  const usernameInputRef = useRef<HTMLInputElement>(null);
-  const passwordInputRef = useRef<HTMLInputElement>(null);
-
-  const { login } = useAuthentication();
-
-  const onLoginClicked = useCallback(() => {
-    setError('');
-    setIsLoading(true);
-    login(username, password).then((success) => {
-      setIsLoading(false);
-      if (success) {
-        localStorage.setItem('username', username);
-        redirect('/');
-      } else {
-        setError('Identifiants invalides');
-      }
-    });
-  }, [login, password, username]);
-
-  useEffect(() => {
-    if (usernameInputRef.current && passwordInputRef.current) {
-      const input = !username
-        ? usernameInputRef.current
-        : passwordInputRef.current;
-      input.select();
-      input.focus();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (isLoading) return <div>Chargement...</div>;
-
-  return (
-    <Card>
-      <FormContainer>
-        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
-          <Input
-            ref={usernameInputRef}
-            type="email"
-            autoComplete="email"
-            required
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-          />
-        </StackedLabel>
-
-        <StackedLabel label="Mot de passe">
-          <Input
-            ref={passwordInputRef}
-            type="password"
-            autoComplete="current-password"
-            required
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-          />
-        </StackedLabel>
-
-        {error && <Message type="error">{error}</Message>}
-
-        <Button $color="primary" onClick={onLoginClicked}>
-          Se connecter
-        </Button>
-
-        <Link to="/recover">Mot de passe oublié ?</Link>
-      </FormContainer>
-    </Card>
-  );
-};
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, redirect } from 'react-router-dom';
+
+import { Button } from '../forms/Button';
+import { Card } from '../ui/Card';
+import { FormContainer } from './styles';
+import { Input } from '../forms/styles';
+import { Message } from '../ui/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers/hooks';
+
+export const LoginForm: FC = () => {
+  const [username, setUsername] = useState(
+    localStorage.getItem('username') || ''
+  );
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const usernameInputRef = useRef<HTMLInputElement>(null);
+  const passwordInputRef = useRef<HTMLInputElement>(null);
+
+  const { login } = useAuthentication();
+
+  const onLoginClicked = useCallback(() => {
+    setError('');
+    setIsLoading(true);
+    login(username, password).then((success) => {
+      setIsLoading(false);
+      if (success) {
+        localStorage.setItem('username', username);
+        redirect('/');
+      } else {
+        setError('Identifiants invalides');
+      }
+    });
+  }, [login, password, username]);
+
+  useEffect(() => {
+    if (usernameInputRef.current && passwordInputRef.current) {
+      const input = !username
+        ? usernameInputRef.current
+        : passwordInputRef.current;
+      input.select();
+      input.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (isLoading) return <div>Chargement...</div>;
+
+  return (
+    <Card>
+      <FormContainer>
+        <StackedLabel label="Adresse e-mail / Nom d'utilisateur">
+          <Input
+            ref={usernameInputRef}
+            type="email"
+            autoComplete="email"
+            required
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+          />
+        </StackedLabel>
+
+        <StackedLabel label="Mot de passe">
+          <Input
+            ref={passwordInputRef}
+            type="password"
+            autoComplete="current-password"
+            required
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+        </StackedLabel>
+
+        {error && <Message type="error">{error}</Message>}
+
+        <Button $color="primary" onClick={onLoginClicked}>
+          Se connecter
+        </Button>
+
+        <Link to="/recover">Mot de passe oublié ?</Link>
+      </FormContainer>
+    </Card>
+  );
+};

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