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, 55 insertions, 0 deletions

diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
new file mode 100644
index 0000000..9bac847
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import styles from './progress-bar.module.scss';
+
+export type ProgressBarProps = {
+  /**
+   * Accessible progress bar name.
+   */
+  'aria-label'?: string;
+  /**
+   * Current value.
+   */
+  current: number;
+  /**
+   * Additional information to display before progress bar.
+   */
+  info?: string;
+  /**
+   * Minimal value.
+   */
+  min: number;
+  /**
+   * Maximal value.
+   */
+  max: number;
+};
+
+/**
+ * ProgressBar component
+ *
+ * Render a progress bar.
+ */
+const ProgressBar: FC<ProgressBarProps> = ({
+  current,
+  info,
+  min,
+  max,
+  ...props
+}) => {
+  return (
+    <div className={styles.progress}>
+      {info && <div className={styles.progress__info}>{info}</div>}
+      <progress
+        className={styles.progress__bar}
+        max={max}
+        value={current}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={current}
+        {...props}
+      ></progress>
+    </div>
+  );
+};
+
+export default ProgressBar;