From 6530eaa2b6631059d76ffc3348fdd880a9c16466 Mon Sep 17 00:00:00 2001
From: Guillaume Grossetie <ggrossetie@yuzutech.fr>
Date: Fri, 24 Jan 2025 10:33:54 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20cr=C3=A9ation=20d'une=20molecule=20`Ale?=
 =?UTF-8?q?rt`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 4 types : warning, error, info et success
- avec ou sans icone
- message personnalisable

Au passage, simplifie la molecule `Loading`.
Configure la taille de l'icone par rapport à la taille du texte.
Supprime la notion de `inline` et le padding autour du composant.
---
 front/src/components/Export.jsx               |  8 +--
 front/src/components/Loading.jsx              | 22 -------
 front/src/components/Write/PreviewPaged.jsx   |  2 +-
 front/src/components/Write/Write.jsx          |  2 +-
 front/src/components/corpus/Corpus.jsx        |  2 +-
 front/src/components/molecules/Alert.jsx      | 57 +++++++++++++++++++
 .../components/molecules/Alert.module.scss    | 28 +++++++++
 front/src/components/molecules/Loading.jsx    | 33 +++++++++++
 .../Loading.module.scss}                      | 20 +++----
 front/src/stories/Story.jsx                   | 19 ++++++-
 10 files changed, 150 insertions(+), 43 deletions(-)
 delete mode 100644 front/src/components/Loading.jsx
 create mode 100644 front/src/components/molecules/Alert.jsx
 create mode 100644 front/src/components/molecules/Alert.module.scss
 create mode 100644 front/src/components/molecules/Loading.jsx
 rename front/src/components/{loading.module.scss => molecules/Loading.module.scss} (60%)

diff --git a/front/src/components/Export.jsx b/front/src/components/Export.jsx
index 922f32096..10271bb35 100644
--- a/front/src/components/Export.jsx
+++ b/front/src/components/Export.jsx
@@ -8,7 +8,7 @@ import { applicationConfig } from '../config.js'
 
 import Select from './Select'
 import Combobox from './SelectCombobox.jsx'
-import Loading from './Loading'
+import Loading from './molecules/Loading.jsx'
 import styles from './export.module.scss'
 import buttonStyles from './button.module.scss'
 import formStyles from './form.module.scss'
@@ -86,7 +86,7 @@ export default function Export(props) {
   return (
     <section className={styles.export}>
       <form className={clsx(formStyles.form, formStyles.verticalForm)}>
-        {!exportFormats.length && <Loading inline size="24" />}
+        {!exportFormats.length && <Loading size="1.5rem" />}
         {exportFormats.length && (
           <Select
             id="export-formats"
@@ -102,7 +102,7 @@ export default function Export(props) {
           </Select>
         )}
 
-        {bib && !exportStyles.length && <Loading inline size="24" />}
+        {bib && !exportStyles.length && <Loading inline size="1.5rem" />}
         {bib && exportStyles.length && (
           <Combobox
             id="export-styles"
@@ -114,7 +114,7 @@ export default function Export(props) {
         )}
         {bib && (
           <div className={styles.bibliographyPreview}>
-            {isLoading && <Loading inline size="24" />}
+            {isLoading && <Loading inline size="1.5rem" />}
             {!isLoading && (
               <div dangerouslySetInnerHTML={{ __html: exportStylesPreview }} />
             )}
diff --git a/front/src/components/Loading.jsx b/front/src/components/Loading.jsx
deleted file mode 100644
index ae51ffcdf..000000000
--- a/front/src/components/Loading.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { Loader } from 'react-feather'
-
-import styles from './loading.module.scss'
-
-export default function Loading({
-  label = 'Loading',
-  inline = false,
-  size = 42,
-  hidden = false,
-}) {
-  return (
-    <div
-      className={clsx(styles.loading, inline && styles.inline)}
-      hidden={hidden}
-    >
-      <Loader size={size} aria-hidden />
-      {label}…
-    </div>
-  )
-}
diff --git a/front/src/components/Write/PreviewPaged.jsx b/front/src/components/Write/PreviewPaged.jsx
index 157b87b49..60b1cf9fb 100644
--- a/front/src/components/Write/PreviewPaged.jsx
+++ b/front/src/components/Write/PreviewPaged.jsx
@@ -5,7 +5,7 @@ import styles from './PreviewPaged.module.scss'
 import { Previewer } from 'pagedjs'
 import { compileTemplate } from '../../helpers/preview.js'
 import clsx from 'clsx'
-import Loading from '../Loading.jsx'
+import Loading from '../molecules/Loading.jsx'
 
 export default function Preview({ preview, metadata }) {
   const renderRef = useRef()
diff --git a/front/src/components/Write/Write.jsx b/front/src/components/Write/Write.jsx
index 2b2083c0a..7bdb399ad 100644
--- a/front/src/components/Write/Write.jsx
+++ b/front/src/components/Write/Write.jsx
@@ -29,7 +29,7 @@ import ArticleEditorMetadata from './ArticleEditorMetadata.jsx'
 import WorkingVersion from './WorkingVersion'
 import PreviewHtml from './PreviewHtml'
 import PreviewPaged from './PreviewPaged'
-import Loading from '../Loading'
+import Loading from '../molecules/Loading.jsx'
 import MonacoEditor from './providers/monaco/Editor'
 import clsx from 'clsx'
 
diff --git a/front/src/components/corpus/Corpus.jsx b/front/src/components/corpus/Corpus.jsx
index 78d2b6175..7c195d87e 100644
--- a/front/src/components/corpus/Corpus.jsx
+++ b/front/src/components/corpus/Corpus.jsx
@@ -14,7 +14,7 @@ import { useActiveWorkspace } from '../../hooks/workspace.js'
 import styles from './corpus.module.scss'
 import CorpusCreate from './CorpusCreate.jsx'
 
-import Loading from '../Loading'
+import Loading from '../molecules/Loading.jsx'
 import { useActiveUserId } from '../../hooks/user'
 import WorkspaceLabel from '../workspace/WorkspaceLabel.jsx'
 
diff --git a/front/src/components/molecules/Alert.jsx b/front/src/components/molecules/Alert.jsx
new file mode 100644
index 000000000..360925fc4
--- /dev/null
+++ b/front/src/components/molecules/Alert.jsx
@@ -0,0 +1,57 @@
+import clsx from 'clsx'
+import React from 'react'
+import { AlertOctagon, CheckCircle, Info, XOctagon } from 'react-feather'
+
+import styles from './Alert.module.scss'
+
+function getIcon(type) {
+  if (type === 'success') {
+    return <CheckCircle color={'rgb(82, 196, 26)'} />
+  }
+  if (type === 'warning') {
+    return <AlertOctagon color={'rgb(250, 173, 20)'} />
+  }
+  if (type === 'error') {
+    return <XOctagon color={'rgb(255, 77, 79)'} />
+  }
+  if (type === 'info') {
+    return <Info color={'rgb(22, 119, 255)'} />
+  }
+  return <></>
+}
+
+function getStyle(type) {
+  if (type === 'success') {
+    return styles.success
+  }
+  if (type === 'warning') {
+    return styles.warning
+  }
+  if (type === 'error') {
+    return styles.error
+  }
+  if (type === 'info') {
+    return styles.info
+  }
+  return ''
+}
+
+/**
+ * @typedef {Object} AlertProps
+ * @property {string} message
+ * @property {string=} type
+ * @property {boolean} showIcon
+ */
+
+/**
+ * @param {AlertProps} props
+ * @returns {React.ReactHTMLElement}
+ */
+export default function Alert({ message, type = 'error', showIcon = true }) {
+  const icon = showIcon ? getIcon(type) : <></>
+  return (
+    <div className={clsx(styles.alert, getStyle(type))}>
+      {icon} <span>{message}</span>
+    </div>
+  )
+}
diff --git a/front/src/components/molecules/Alert.module.scss b/front/src/components/molecules/Alert.module.scss
new file mode 100644
index 000000000..6d83c649c
--- /dev/null
+++ b/front/src/components/molecules/Alert.module.scss
@@ -0,0 +1,28 @@
+.alert {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem;
+  border: 1px solid;
+  font-size: 0.9em;
+}
+
+.warning {
+  background-color: rgb(255, 251, 230);
+  border-color: rgb(255, 229, 143);
+}
+
+.info {
+  background-color: rgb(230, 244, 255);
+  border-color: rgb(145, 202, 255);
+}
+
+.success {
+  background-color: rgb(246, 255, 237);
+  border-color: rgb(183, 235, 143);
+}
+
+.error {
+  background-color: rgb(255, 242, 240);
+  border-color: rgb(255, 204, 199);
+}
diff --git a/front/src/components/molecules/Loading.jsx b/front/src/components/molecules/Loading.jsx
new file mode 100644
index 000000000..6c709ea74
--- /dev/null
+++ b/front/src/components/molecules/Loading.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import clsx from 'clsx'
+import { Loader } from 'react-feather'
+
+import styles from './Loading.module.scss'
+
+/**
+ * @typedef {Object} LoadingProps
+ * @property {string=} label (default: 'Loading…')
+ * @property {boolean=} inline (default: false)
+ * @property {boolean=} hidden (default: false)
+ */
+
+/**
+ * @param {LoadingProps} props
+ * @returns {React.ReactHTMLElement}
+ */
+export default function Loading({
+  label = 'Loading…',
+  size = '1rem',
+  hidden = false,
+}) {
+  return (
+    <div
+      className={clsx(styles.loading)}
+      style={{ fontSize: size }}
+      hidden={hidden}
+    >
+      <Loader className={styles.icon} aria-hidden />
+      {label}
+    </div>
+  )
+}
diff --git a/front/src/components/loading.module.scss b/front/src/components/molecules/Loading.module.scss
similarity index 60%
rename from front/src/components/loading.module.scss
rename to front/src/components/molecules/Loading.module.scss
index 9958c8456..5a6ba27e9 100644
--- a/front/src/components/loading.module.scss
+++ b/front/src/components/molecules/Loading.module.scss
@@ -1,29 +1,25 @@
-@use '../styles/defaults' as *;
-@use '../styles/variables' as *;
+@use '../../styles/defaults' as *;
+@use '../../styles/variables' as *;
+
+.icon {
+  width: 1em;
+  height: 1em;
+}
 
 .loading {
   color: $main-lighter-color;
   display: flex;
-  font-size: 2em;
   align-items: center;
-  justify-content: center;
-  padding: 1em;
+  gap: 0.35em;
 
   svg {
     display: block;
     animation: rotation 2.5s;
     animation-iteration-count: infinite;
     animation-timing-function: linear;
-    margin-right: 10px;
   }
 }
 
-.inline {
-  font-size: 1em;
-  justify-content: flex-start;
-  padding: 0;
-}
-
 @keyframes rotation {
   from {
     transform: rotate(0deg);
diff --git a/front/src/stories/Story.jsx b/front/src/stories/Story.jsx
index db6305f69..41dabb7d9 100644
--- a/front/src/stories/Story.jsx
+++ b/front/src/stories/Story.jsx
@@ -3,6 +3,8 @@ import React from 'react'
 import { Search } from 'react-feather'
 import buttonStyles from '../components/button.module.scss'
 import Field from '../components/Field.jsx'
+import Alert from '../components/molecules/Alert.jsx'
+import Loading from '../components/molecules/Loading.jsx'
 import Select from '../components/Select.jsx'
 import ButtonStory from './Button.story.jsx'
 import FormStory from './Form.story.jsx'
@@ -16,10 +18,23 @@ export default function Story() {
         <Tabs.Item label="buttons" value="1">
           <ButtonStory />
         </Tabs.Item>
-        <Tabs.Item label="form" value="2">
+        <Tabs.Item label="state" value="2">
+          <h4>Loading</h4>
+          <Loading />
+          <Loading size={'1.5rem'} />
+          <Loading size={'2rem'} />
+          <Loading label={''} />
+          <h4>Alert</h4>
+          <Alert type={'warning'} message={'Warning'} />
+          <Alert type={'error'} message={'Error'} />
+          <Alert type={'info'} message={'Info'} />
+          <Alert type={'success'} message={'Success'} />
+          <Alert type={'success'} message={'Success'} showIcon={false} />
+        </Tabs.Item>
+        <Tabs.Item label="form" value="3">
           <FormStory />
         </Tabs.Item>
-        <Tabs.Item label="fields" value="3">
+        <Tabs.Item label="fields" value="4">
           <h2>Fields</h2>
           <h4>Search</h4>
           <Field placeholder="Search" icon={Search} />