@addev-be/ui 0.7.0 → 0.7.2

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

@@ -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/index.ts

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

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/AdvancedRequestDataGrid/helpers/advancedRequests.ts

@@ -1,93 +1,93 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import {
-  AdvancedRequestDTO,
-  ConditionDTO,
-  FieldDTO,
-  OrderByDTO,
-} from '../../../../services/advancedRequests';
-import {
-  AdvancedRequestDataGridColumns,
-  AdvancedRequestDataGridFilters,
-} from '../types';
-
-import _ from 'lodash';
-
-export const getAdvancedRequestDto = <R>({
-  type,
-  columns,
-  conditions = [],
-  orderBy = [],
-  start = 0,
-  length = 100,
-  getTotal = false,
-  idField = { fieldName: 'Id' },
-}: {
-  type: string;
-  columns: AdvancedRequestDataGridColumns<R>;
-  conditions?: ConditionDTO[];
-  orderBy?: OrderByDTO[];
-  start?: number;
-  length?: number;
-  getTotal?: boolean;
-  idField?: FieldDTO | null;
-}): AdvancedRequestDTO => ({
-  fields: [
-    ...(idField === null ? [] : [idField]),
-    ...Object.keys(columns).map((key) =>
-      columns[key].field
-        ? {
-            ...columns[key].field,
-            fieldName: columns[key].field?.fieldName ?? key,
-            fieldAlias: key,
-          }
-        : {
-            fieldName: key,
-            fieldAlias: key,
-          }
-    ),
-  ],
-  conditions,
-  orderBy,
-  type,
-  start,
-  length,
-  getTotal,
-});
-
-export const convertFiltersToConditions = <R>(
-  filters: AdvancedRequestDataGridFilters,
-  columns: AdvancedRequestDataGridColumns<R>
-): Record<string, ConditionDTO> =>
-  _.mapValues(filters, (filter, columnKey) => ({
-    field:
-      columns[columnKey].filterField ??
-      columns[columnKey].field?.fieldAlias ??
-      columns[columnKey].field?.fieldName ??
-      columnKey,
-    operator: filter.operator as any,
-    value: ['inArray', 'inRange'].includes(filter.operator)
-      ? filter.values
-      : _.castArray<string | number | null>(filter.values)[0],
-  }));
-
-export const parseJsonObjectFields = <R>(
-  rows: any[],
-  columns: AdvancedRequestDataGridColumns<R>,
-  parser?: (row: any) => R
-): R[] => {
-  const jsonColumns = Object.keys(columns).filter(
-    (key) => columns[key].field?.operator === 'jsonObject'
-  );
-  const parsedRows =
-    jsonColumns.length === 0
-      ? rows
-      : rows.map((row) => {
-          const parsedRow = { ...row };
-          jsonColumns.forEach((key) => {
-            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
-          });
-          return parsedRow;
-        });
-  return parser ? parsedRows.map(parser) : parsedRows;
-};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import {
+  AdvancedRequestDTO,
+  ConditionDTO,
+  FieldDTO,
+  OrderByDTO,
+} from '../../../../services/advancedRequests';
+import {
+  AdvancedRequestDataGridColumns,
+  AdvancedRequestDataGridFilters,
+} from '../types';
+
+import _ from 'lodash';
+
+export const getAdvancedRequestDto = <R>({
+  type,
+  columns,
+  conditions = [],
+  orderBy = [],
+  start = 0,
+  length = 100,
+  getTotal = false,
+  idField = { fieldName: 'Id' },
+}: {
+  type: string;
+  columns: AdvancedRequestDataGridColumns<R>;
+  conditions?: ConditionDTO[];
+  orderBy?: OrderByDTO[];
+  start?: number;
+  length?: number;
+  getTotal?: boolean;
+  idField?: FieldDTO | null;
+}): AdvancedRequestDTO => ({
+  fields: [
+    ...(idField === null ? [] : [idField]),
+    ...Object.keys(columns).map((key) =>
+      columns[key].field
+        ? {
+            ...columns[key].field,
+            fieldName: columns[key].field?.fieldName ?? key,
+            fieldAlias: key,
+          }
+        : {
+            fieldName: key,
+            fieldAlias: key,
+          }
+    ),
+  ],
+  conditions,
+  orderBy,
+  type,
+  start,
+  length,
+  getTotal,
+});
+
+export const convertFiltersToConditions = <R>(
+  filters: AdvancedRequestDataGridFilters,
+  columns: AdvancedRequestDataGridColumns<R>
+): Record<string, ConditionDTO> =>
+  _.mapValues(filters, (filter, columnKey) => ({
+    field:
+      columns[columnKey].filterField ??
+      columns[columnKey].field?.fieldAlias ??
+      columns[columnKey].field?.fieldName ??
+      columnKey,
+    operator: filter.operator as any,
+    value: ['inArray', 'inRange'].includes(filter.operator)
+      ? filter.values
+      : _.castArray<string | number | null>(filter.values)[0],
+  }));
+
+export const parseJsonObjectFields = <R>(
+  rows: any[],
+  columns: AdvancedRequestDataGridColumns<R>,
+  parser?: (row: any) => R
+): R[] => {
+  const jsonColumns = Object.keys(columns).filter(
+    (key) => columns[key].field?.operator === 'jsonObject'
+  );
+  const parsedRows =
+    jsonColumns.length === 0
+      ? rows
+      : rows.map((row) => {
+          const parsedRow = { ...row };
+          jsonColumns.forEach((key) => {
+            parsedRow[key] = JSON.parse(parsedRow[key] ?? '{}');
+          });
+          return parsedRow;
+        });
+  return parser ? parsedRows.map(parser) : parsedRows;
+};