@addev-be/ui 0.3.5 → 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.5",
+  "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/data/DataGrid/DataGridRowTemplate.tsx

@@ -0,0 +1,69 @@
+import * as styles from './styles';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridRowTemplateProps } from './types';
+import { useContext } from 'react';
+
+export const DataGridRowTemplate = <R,>({
+  row,
+  rowIndex,
+  context,
+}: DataGridRowTemplateProps<R>) => {
+  const { visibleColumns, rowKeyGetter, toggleSelection, ...props } =
+    useContext(context);
+
+  if (!row) {
+    return (
+      <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+        {!!props.selectable && (
+          <styles.LoadingCell className="animate-pulse">
+            <div />
+          </styles.LoadingCell>
+        )}
+        {visibleColumns.map((_, index) => (
+          <styles.LoadingCell
+            className="animate-pulse"
+            key={`loading-${rowIndex}-${index}`}
+          >
+            <div />
+          </styles.LoadingCell>
+        ))}
+      </styles.DataGridRow>
+    );
+  }
+  const key = rowKeyGetter(row);
+  const selected = props.selectedKeys.includes(key);
+  const { className, style } = props.rowClassNameGetter?.(row) ?? {
+    className: '',
+    style: undefined,
+  };
+  return (
+    <styles.DataGridRow key={key}>
+      {!!props.selectable && (
+        <styles.SelectionCell
+          key="__select_checkbox__"
+          onClick={() => toggleSelection(key)}
+        >
+          <input
+            type="checkbox"
+            value={key as string}
+            checked={selected}
+            readOnly
+          />
+        </styles.SelectionCell>
+      )}
+      {visibleColumns.map(([key, col], index) => (
+        <DataGridCell
+          key={`loading-${rowIndex}-${index}`}
+          {...(index === 0 ? { className, style } : {})}
+          row={row}
+          rowIndex={rowIndex}
+          column={col}
+          columnIndex={index}
+          context={context}
+          columnKey={key}
+        />
+      ))}
+    </styles.DataGridRow>
+  );
+};

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

@@ -1,12 +1,11 @@
 import * as styles from './styles';
 
-import { ReactNode, useContext } from 'react';
-
-import { DataGridContext } from './types';
+import { DataGridContext, DataGridRowTemplateProps } from './types';
+import { FC, useContext } from 'react';
 
 type VirtualScrollerProps<R> = {
   showAllRows?: boolean;
-  rowTemplate: (row: R, index: number) => ReactNode;
+  rowTemplate: FC<DataGridRowTemplateProps<R>>;
   hasFooter?: boolean;
   context: DataGridContext<R>;
   onRangeChange?: (startIndex: number, length: number) => void;
@@ -22,7 +21,7 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
     gridTemplateColumns,
   } = useContext(props.context);
   const {
-    rowTemplate,
+    rowTemplate: RowTemplate,
     // hasFooter, onRangeChange
   } = props;
 
@@ -39,7 +38,9 @@ export const VirtualScroller = <R,>(props: VirtualScrollerProps<R>) => {
         $topPadding={topPadding}
         $rowHeight={rowHeight}
       >
-        {visibleRows.map(rowTemplate)}
+        {visibleRows.map((row, index) => (
+          <RowTemplate row={row} rowIndex={index} context={props.context} />
+        ))}
       </styles.VirtualScrollerRowsContainer>
     </styles.VirtualScrollerContainer>
   );

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

@@ -92,6 +92,17 @@ export const useDataGrid = <R,>(
     onSelectionChange?.(selectedKeys);
   }, [onSelectionChange, selectedKeys]);
 
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
   /** ROWS FILTERING **/
 
   const [filters, setFilters] = useState<DataGridFilters>({});
@@ -240,6 +251,7 @@ export const useDataGrid = <R,>(
       footers,
       setFooters,
       footerFunctions,
+      toggleSelection,
       ...override,
     }),
     [
@@ -265,6 +277,7 @@ export const useDataGrid = <R,>(
       gridTemplateColumns,
       footers,
       footerFunctions,
+      toggleSelection,
       override,
     ]
   );
@@ -298,6 +311,7 @@ export const useDataGrid = <R,>(
         gridTemplateColumns: '',
         footers: {},
         setFooters: () => {},
+        toggleSelection: () => {},
       }),
     []
   );

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

@@ -2,11 +2,10 @@ import * as styles from './styles';
 
 import { DataGridContextProps, DataGridProps } from './types';
 
-import { DataGridCell } from './DataGridCell';
 import { DataGridFooter } from './DataGridFooter';
 import { DataGridHeader } from './DataGridHeader';
+import { DataGridRowTemplate } from './DataGridRowTemplate';
 import { VirtualScroller } from './VirtualScroller';
-import { useCallback } from 'react';
 import { useDataGrid } from './hooks';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -25,95 +24,16 @@ export const DataGrid = <R,>({
   } = props;
   const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
   const {
-    selectedKeys,
-    setSelectedKeys,
     columns,
-    visibleColumns,
     rowHeight = 32,
     headerRowHeight = 40,
     scrollableRef,
     onScroll,
-    rowKeyGetter,
   } = contextProps;
 
   const hasFooter = Object.values(columns).some((col) => col.footer);
 
-  const toggleSelection = useCallback(
-    (key: string) => {
-      if (selectedKeys.includes(key)) {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      } else {
-        setSelectedKeys([...selectedKeys, key]);
-      }
-    },
-    [selectedKeys, setSelectedKeys]
-  );
-
-  const rowTemplate = useCallback(
-    (row: R, rowIndex: number) => {
-      if (!row) {
-        return (
-          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
-            {!!props.selectable && (
-              <styles.LoadingCell className="animate-pulse">
-                <div />
-              </styles.LoadingCell>
-            )}
-            {visibleColumns.map((_, index) => (
-              <styles.LoadingCell
-                className="animate-pulse"
-                key={`loading-${rowIndex}-${index}`}
-              >
-                <div />
-              </styles.LoadingCell>
-            ))}
-          </styles.DataGridRow>
-        );
-      }
-      const key = rowKeyGetter(row);
-      const { className, style } = props.rowClassNameGetter?.(row) ?? {
-        className: '',
-        style: undefined,
-      };
-      return (
-        <styles.DataGridRow key={key}>
-          {!!props.selectable && (
-            <styles.SelectionCell
-              key="__select_checkbox__"
-              onClick={() => toggleSelection(key)}
-            >
-              <input
-                type="checkbox"
-                value={key as string}
-                checked={selectedKeys.includes(key)}
-                readOnly
-              />
-            </styles.SelectionCell>
-          )}
-          {visibleColumns.map(([key, col], index) => (
-            <DataGridCell
-              key={`loading-${rowIndex}-${index}`}
-              {...(index === 0 ? { className, style } : {})}
-              row={row}
-              rowIndex={rowIndex}
-              column={col}
-              columnIndex={index}
-              context={DataGridContext}
-              columnKey={key}
-            />
-          ))}
-        </styles.DataGridRow>
-      );
-    },
-    [
-      DataGridContext,
-      props,
-      rowKeyGetter,
-      selectedKeys,
-      toggleSelection,
-      visibleColumns,
-    ]
-  );
+  const rowTemplate = DataGridRowTemplate;
 
   return (
     <DataGridContext.Provider value={contextProps}>

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

@@ -131,6 +131,7 @@ export type DataGridContextProps<R> = DataGridProps<R> & {
   length: number;
   rowKeyGetter: (row: R) => string;
   gridTemplateColumns: string;
+  toggleSelection: (key: string) => void;
 };
 
 export type DataGridContext<R> = Context<DataGridContextProps<R>>;
@@ -265,3 +266,11 @@ export type DataGridFilterCheckbox = {
   values: DataGridFilterValue[];
   level: number;
 };
+
+export type DataGridRowTemplateProps<R> = {
+  row: R | null;
+  rowIndex: number;
+  selected?: boolean;
+  toggleSelection?: () => void;
+  context: DataGridContext<R>;
+};

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

@@ -15,6 +15,17 @@ export const inputStyle = css`
   }
 `;
 
-export const Input = styled.input`
+export const Input = styled.input.attrs({
+  className: 'Input',
+})`
   ${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/search/QuickSearchBar.tsx

@@ -1,8 +1,10 @@
+import * as styles from './styles';
+
 import { SearchResults, SearchTypeDefinitions } from './types';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { Dropdown } from '../layout';
-import { QuickSearchBarInput } from './styles';
+import { Input } from '../forms';
 import { QuickSearchResults } from './QuickSearchResults';
 import { useDebounce } from '@uidotdev/usehooks';
 import { useGlobalSearchRequestHandler } from '../../services';
@@ -18,8 +20,10 @@ export const QuickSearchBar = <R,>({ definitions }: QuickSearchBarProps<R>) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [results, setResults] = useState<SearchResults<R> | null>(null);
 
+  const fakeInputRef = useRef<HTMLInputElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const rect = inputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const rect = fakeInputRef.current?.getBoundingClientRect() ?? new DOMRect();
+  const destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
   const globalSearch = useGlobalSearchRequestHandler();
 
   useEffect(() => {
@@ -36,41 +40,39 @@ export const QuickSearchBar = <R,>({ definitions }: QuickSearchBarProps<R>) => {
   }, [globalSearch, debouncedTerm]);
 
   const onFocus = useCallback(() => {
-    if (term) {
-      setDropdownVisible(true);
-    }
-  }, [term]);
-
-  useEffect(() => {
-    const input = inputRef.current;
-    input?.addEventListener('focus', onFocus);
-    return () => {
-      input?.removeEventListener('focus', onFocus);
-    };
-  }, [onFocus]);
+    setDropdownVisible(true);
+    requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+  }, []);
 
   return (
     <>
-      <QuickSearchBarInput
-        type="text"
-        value={term}
-        onChange={(e) => setTerm(e.target.value)}
-        ref={inputRef}
-        $opened={dropdownVisible}
-      />
-      {results && dropdownVisible && rect && (
+      <Input type="text" ref={fakeInputRef} value={term} onFocus={onFocus} />
+      {dropdownVisible && rect && (
         <Dropdown
-          $sourceRect={rect}
+          $sourceRect={destRect}
           onClose={() => setDropdownVisible(false)}
           $width={rect.width}
-          $height={[250, 400]}
+          $height={[results ? 250 : rect.height, 400]}
           $autoPositionY={false}
         >
-          <QuickSearchResults
-            results={results}
-            definitions={definitions}
-            term={debouncedTerm}
-          />
+          <styles.QuickSearchDropdownContainer>
+            <Input
+              type="text"
+              ref={inputRef}
+              value={term}
+              onChange={(e) => setTerm(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+            />
+            {results && (
+              <QuickSearchResults
+                results={results}
+                definitions={definitions}
+                term={debouncedTerm}
+              />
+            )}
+          </styles.QuickSearchDropdownContainer>
         </Dropdown>
       )}
     </>

package/src/components/search/styles.ts

@@ -1,41 +1,64 @@
-import { Input } from '../forms';
 import styled from 'styled-components';
 
-export const QuickSearchResultsContainer = styled.div`
+export const QuickSearchDropdownContainer = styled.div.attrs({
+  className: 'QuickSearchDropdownContainer',
+})`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+export const QuickSearchResultsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsContainer',
+})`
   display: flex;
   flex-direction: row;
   height: 100%;
+  flex: 1;
+  padding: var(--space-2) 0;
+  overflow: hidden;
 `;
 
-export const QuickSearchResultsListContainer = styled.div`
+export const QuickSearchResultsListContainer = styled.div.attrs({
+  className: 'QuickSearchResultsListContainer',
+})`
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
-  border-right: 1px solid var(--color-gray-200);
-  flex: 3;
+  border-right: 1px solid var(--color-neutral-200);
+  flex: 1;
   overflow: auto;
 `;
 
-export const QuickSearchResultsTitle = styled.div`
+export const QuickSearchResultsTitle = styled.div.attrs({
+  className: 'QuickSearchResultsTitle',
+})`
   margin: 0;
   margin-bottom: var(--space-1);
   &:not(:first-child) {
     margin-top: var(--space-2);
   }
   font-weight: bold;
-  font-size: var(--text-lg);
+  font-size: var(--text-sm);
+  text-transform: uppercase;
+  letter-spacing: 120%;
+  color: var(--color-neutral-500);
 `;
 
-export const QuickSearchResultsItem = styled.div`
+export const QuickSearchResultsItem = styled.div.attrs({
+  className: 'QuickSearchResultsItem',
+})`
   padding: var(--space-2) var(--space-3);
   cursor: pointer;
   border-radius: 4px;
   &:hover {
-    background-color: var(--color-gray-100);
+    background-color: var(--color-neutral-100);
   }
 `;
 
-export const QuickSearchResultsDetailsContainer = styled.div`
+export const QuickSearchResultsDetailsContainer = styled.div.attrs({
+  className: 'QuickSearchResultsDetailsContainer',
+})`
   display: flex;
   flex-direction: column;
   padding: var(--space-2);
@@ -46,15 +69,11 @@ export const QuickSearchResultsDetailsDivider = styled.hr`
   margin: var(--space-2) 0;
   height: 1px;
   border: none;
-  background-color: var(--color-gray-200);
+  background-color: var(--color-neutral-200);
 `;
 
-export const QuickSearchResultDetailsTitle = styled.div`
+export const QuickSearchResultDetailsTitle = styled.div.attrs({
+  className: 'QuickSearchResultDetailsTitle',
+})`
   margin: 0;
 `;
-
-export const QuickSearchBarInput = styled(Input)<{ $opened?: boolean }>`
-  position: relative;
-  width: 100%;
-  z-index: ${({ $opened }) => ($opened ? 10000 : 0)};
-`;

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

package/src/services/WebSocketService.ts

@@ -45,6 +45,7 @@ export class WebSocketService {
         if (this.socket && this.socket.readyState === 1) {
           clearInterval(interval);
           this.setStatus(true);
+          this.sendQueue();
           this.onOpen?.();
         }
       }, 100);