@addev-be/ui 0.3.6 → 0.4.0

package/assets/icons/circle-check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>

package/assets/icons/circle-info.svg

@@ -0,0 +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="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg>

package/assets/icons/circle-xmark.svg

@@ -0,0 +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="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>

package/assets/icons/triangle-exclamation.svg

@@ -0,0 +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="M248.4 84.3c1.6-2.7 4.5-4.3 7.6-4.3s6 1.6 7.6 4.3L461.9 410c1.4 2.3 2.1 4.9 2.1 7.5c0 8-6.5 14.5-14.5 14.5H62.5c-8 0-14.5-6.5-14.5-14.5c0-2.7 .7-5.3 2.1-7.5L248.4 84.3zm-41-25L9.1 385c-6 9.8-9.1 21-9.1 32.5C0 452 28 480 62.5 480h387c34.5 0 62.5-28 62.5-62.5c0-11.5-3.2-22.7-9.1-32.5L304.6 59.3C294.3 42.4 275.9 32 256 32s-38.3 10.4-48.6 27.3zM288 368a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-8-184c0-13.3-10.7-24-24-24s-24 10.7-24 24v96c0 13.3 10.7 24 24 24s24-10.7 24-24V184z"/></svg>

package/package.json

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

package/src/Icons.tsx

@@ -10,6 +10,9 @@ import ArrowsRotateIcon from '../assets/icons/arrows-rotate.svg?react';
 import ArrowsUpDownIcon from '../assets/icons/arrows-up-down.svg?react';
 import CheckIcon from '../assets/icons/check.svg?react';
 import ChevronDownIcon from '../assets/icons/chevron-down.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';
@@ -32,6 +35,7 @@ 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 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';
@@ -70,16 +74,17 @@ export const LoadingIcon: FC<IconFCProps> = ({ className, ...props }) => (
 );
 
 export {
-  ArrowDownAZIcon,
   ArrowDown19Icon,
+  ArrowDownAZIcon,
   ArrowDownBigSmallIcon,
-  ArrowUpZAIcon,
-  ArrowUpBigSmallIcon,
-  ArrowUp91Icon,
   ArrowsRotateIcon,
   ArrowsUpDownIcon,
+  ArrowUp91Icon,
+  ArrowUpBigSmallIcon,
+  ArrowUpZAIcon,
   CheckIcon,
   ChevronDownIcon,
+  CircleXMarkIcon,
   CopyIcon,
   DownIcon,
   EllipsisIcon,
@@ -105,4 +110,7 @@ export {
   UpIcon,
   UserTieIcon,
   XBarIcon,
+  CircleCheckIcon,
+  CircleInfoIcon,
+  TriangleExclamationIcon,
 };

package/src/components/auth/LoginForm.tsx

@@ -0,0 +1,83 @@
+import { Button, Input } from '../forms';
+import { Card, Message } from '../ui';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { Link, redirect } from 'react-router-dom';
+
+import { FormContainer } from './styles';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers';
+
+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) {
+        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

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

package/src/components/auth/PasswordRecoveryForm.tsx

@@ -0,0 +1,52 @@
+import { Button, Input } from '../forms';
+import { FC, useCallback, useState } from 'react';
+
+import { Card } from '../ui';
+import { FormContainer } from './styles';
+import { Link } from 'react-router-dom';
+import { Message } from '../ui/Message';
+import { StackedLabel } from '../forms/VerticalLabel';
+import { useAuthentication } from '../../providers';
+
+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

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

package/src/components/auth/index.ts

@@ -0,0 +1,4 @@
+export * from './LoginForm';
+export * from './LoginPage';
+export * from './PasswordRecoveryForm';
+export * from './PasswordResetForm';

package/src/components/auth/styles.ts

@@ -0,0 +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;
+  }
+`;

package/src/components/forms/VerticalLabel.tsx

@@ -0,0 +1,20 @@
+import { FC, HTMLAttributes } from 'react';
+
+import { StackedLabelContainer } from './styles';
+
+type StackedLabelProps = HTMLAttributes<HTMLDivElement> & {
+  label: string;
+};
+
+export const StackedLabel: FC<StackedLabelProps> = ({
+  label,
+  children,
+  ...props
+}) => {
+  return (
+    <StackedLabelContainer {...props}>
+      <label>{label}</label>
+      {children}
+    </StackedLabelContainer>
+  );
+};

package/src/components/forms/index.ts

@@ -2,4 +2,4 @@ export * from './Button';
 export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
-export { Input } from './styles';
+export * from './styles';

package/src/components/forms/styles.ts

@@ -20,3 +20,12 @@ export const Input = styled.input.attrs({
 })`
   ${inputStyle}
 `;
+
+export const StackedLabelContainer = styled.div.attrs({
+  className: 'StackedLabelContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  color: var(--color-gray-900);
+`;

package/src/components/index.ts

@@ -1,4 +1,6 @@
+export * from './auth';
 export * from './data';
 export * from './forms';
 export * from './layout';
 export * from './search';
+export * from './ui';

package/src/components/ui/Card/index.tsx

@@ -0,0 +1,14 @@
+import { CardContainer, CardFooter, CardHeader } from './styles';
+import { FC, HTMLAttributes } from 'react';
+
+type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+  Header: typeof CardHeader;
+  Footer: typeof CardFooter;
+};
+
+export const Card: CardFC = ({ children }) => {
+  return <CardContainer>{children}</CardContainer>;
+};
+
+Card.Header = CardHeader;
+Card.Footer = CardFooter;

package/src/components/ui/Card/styles.ts

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+
+export const CardContainer = styled.div.attrs({
+  className: 'CardContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-white);
+  border-radius: var(--rounded-md);
+  box-shadow: var(--shadow-md);
+  padding: var(--space-4);
+  border: 1px solid var(--color-neutral-100);
+`;
+
+export const CardHeader = styled.div.attrs({
+  className: 'CardHeader',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-bottom: var(--space-2);
+  border-bottom: 1px solid var(--color-neutral-200);
+  margin-bottom: var(--space-2);
+`;
+
+export const CardFooter = styled.div.attrs({
+  className: 'CardFooter',
+})`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--color-neutral-200);
+  margin-top: var(--space-2);
+`;

package/src/components/ui/Message/index.tsx

@@ -0,0 +1,57 @@
+import * as styles from './styles';
+
+import {
+  CircleCheckIcon,
+  CircleInfoIcon,
+  CircleXMarkIcon,
+  TriangleExclamationIcon,
+} from '../../../Icons';
+import { FC, PropsWithChildren } from 'react';
+
+import { ThemeColor } from '../../../providers';
+
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+
+type MessageProps = PropsWithChildren<{
+  className?: string;
+  title?: string;
+  type: MessageType;
+}>;
+
+const colorsMap: Record<
+  MessageType,
+  {
+    baseColor: ThemeColor;
+    iconComponent: FC<{ className?: string }>;
+  }
+> = {
+  success: {
+    baseColor: 'green',
+    iconComponent: CircleCheckIcon,
+  },
+  info: {
+    baseColor: 'sky',
+    iconComponent: CircleInfoIcon,
+  },
+  warning: {
+    baseColor: 'amber',
+    iconComponent: TriangleExclamationIcon,
+  },
+  error: {
+    baseColor: 'red',
+    iconComponent: CircleXMarkIcon,
+  },
+};
+
+export const Message: FC<MessageProps> = ({ children, title, type }) => {
+  const { iconComponent: Icon, baseColor = 'neutral' } = colorsMap[type];
+  return (
+    <styles.MessageContainer $baseColor={baseColor}>
+      <Icon className="MessageIcon" />
+      <styles.MessageContent>
+        {title && <h3>{title}</h3>}
+        <div>{children}</div>
+      </styles.MessageContent>
+    </styles.MessageContainer>
+  );
+};

package/src/components/ui/Message/styles.ts

@@ -0,0 +1,40 @@
+import styled, { css } from 'styled-components';
+
+import { ThemeColor } from '../../../providers';
+
+export const MessageContainer = styled.div.attrs({
+  className: 'MessageContainer',
+})<{
+  $baseColor: ThemeColor;
+}>`
+  display: flex;
+  flex-direction: row;
+  box-shadow: var(--shadow-md);
+  border-radius: var(--rounded-md);
+  padding: var(--space-4);
+  gap: var(--space-4);
+
+  ${({ $baseColor }) => css`
+    border: 1px solid var(--color-${$baseColor}-300);
+    background-color: var(--color-${$baseColor}-100);
+    color: var(--color-${$baseColor}-600);
+
+    .MessageIcon {
+      fill: var(--color-${$baseColor}-600);
+    }
+  `}
+
+  .MessageIcon {
+    width: var(--space-5);
+    height: var(--space-5);
+    flex-shrink: 0;
+  }
+`;
+
+export const MessageContent = styled.div.attrs({
+  className: 'MessageContent',
+})`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`;

package/src/components/ui/index.ts

@@ -0,0 +1,3 @@
+export * from './Card';
+export * from './ContextMenu';
+export * from './Message';

package/src/providers/ThemeProvider/ThemeProvider.ts

@@ -52,4 +52,12 @@ export const ThemeProvider = styled.div<ThemeProviderProps>`
       getThemeValuesCss('shadow', $theme.shadows),
     ].join('');
   }}
+
+  a, a:visited {
+    color: var(--color-primary-500);
+  }
+  a:active,
+  a:hover {
+    color: var(--color-primary-700);
+  }
 `;