feat: création d'une molecule Alert

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 }} />
             )}

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()

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'
 

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'
 

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

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

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

front/src/components/loading.module.scss → 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);

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} />