refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 37 insertions, 0 deletions

diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
new file mode 100644
index 0000000..6655141
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './spinner.module.scss';
+
+export type SpinnerProps = {
+  /**
+   * The loading message. Default: "Loading...".
+   */
+  message?: string;
+};
+
+/**
+ * Spinner component
+ *
+ * Render a loading message with animation.
+ */
+const Spinner: FC<SpinnerProps> = ({ message }) => {
+  const intl = useIntl();
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.text}>
+        {message ||
+          intl.formatMessage({
+            defaultMessage: 'Loading...',
+            description: 'Spinner: loading text',
+            id: 'q9cJQe',
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default Spinner;