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

diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
new file mode 100644
index 0000000..a0d1d3e
--- /dev/null
+++ b/src/components/atoms/layout/notice.tsx
@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import styles from './notice.module.scss';
+
+export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
+
+export type NoticeProps = {
+  /**
+   * Set additional classnames to the notice wrapper.
+   */
+  className?: string;
+  /**
+   * The notice kind.
+   */
+  kind: NoticeKind;
+  /**
+   * The notice body.
+   */
+  message: string;
+};
+
+/**
+ * Notice component
+ *
+ * Render a colored message depending on notice kind.
+ */
+const Notice: FC<NoticeProps> = ({ className = '', kind, message }) => {
+  const kindClass = `wrapper--${kind}`;
+
+  return message ? (
+    <div className={`${styles.wrapper} ${styles[kindClass]} ${className}`}>
+      {message}
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default Notice;