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.

2 files changed, 0 insertions, 179 deletions

diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss
deleted file mode 100644
index 34fa23d..0000000
--- a/src/components/Tooltip/Tooltip.module.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-@use "@styles/abstracts/mixins" as mix;
-
-.title {
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  position: absolute;
-  top: calc(var(--spacing-sm) * -1);
-  left: var(--spacing-lg);
-  background: var(--color-bg);
-  border: fun.convert-px(1) solid var(--color-primary-dark);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-  color: var(--color-primary-darker);
-  font-size: var(--font-size-sm);
-  font-variant: small-caps;
-  font-weight: 500;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      top: 0;
-    }
-
-    @include mix.dimensions("md") {
-      left: var(--spacing-md);
-    }
-  }
-
-  &::before {
-    content: "?";
-    padding: var(--spacing-2xs);
-    position: absolute;
-    top: fun.convert-px(-1);
-    bottom: fun.convert-px(-1);
-    right: 100%;
-    background: var(--color-primary-dark);
-    border: fun.convert-px(1) solid var(--color-primary-dark);
-    box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow);
-    color: var(--color-fg-inverted);
-    font-weight: 600;
-  }
-}
-
-.message {
-  transition: all 0.5s ease-in-out 0;
-}
-
-.wrapper {
-  padding: 9% 6% var(--spacing-sm) 6%;
-  position: absolute;
-  bottom: 30%;
-  left: fun.convert-px(15);
-  right: fun.convert-px(15);
-  background: var(--color-bg);
-  border: fun.convert-px(2) solid var(--color-primary-dark);
-  border-radius: fun.convert-px(3);
-  box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow),
-    fun.convert-px(2) fun.convert-px(2) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow-light);
-  transform-origin: bottom;
-
-  @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      overflow-y: auto;
-      top: 18%;
-    }
-
-    @include mix.dimensions("sm") {
-      bottom: unset;
-      left: fun.convert-px(15);
-      right: fun.convert-px(15);
-      top: 100%;
-      transform-origin: top;
-    }
-  }
-
-  ul,
-  p {
-    margin: 0;
-    padding: 0;
-  }
-}
-
-.hidden {
-  visibility: hidden;
-  opacity: 0;
-  transition: all 0.5s ease-in-out 0s, opacity 0.3s ease-in-out 0.2s;
-  transform: scaleY(0);
-
-  .message,
-  .title {
-    opacity: 0;
-  }
-
-  .message {
-    transition: all 0.3s ease-in-out 0s;
-  }
-
-  .title {
-    transition: all 0.2s ease-in-out 0.2s;
-  }
-}
-
-.visible {
-  visibility: visible;
-  opacity: 1;
-  transform: scaleY(1);
-  transition: all 0.8s ease-in-out 0s, opacity 0.7s ease-in-out 0.2s;
-
-  .message,
-  .title {
-    opacity: 1;
-  }
-
-  .message {
-    transition: all 0.5s ease-in-out 0.2s;
-  }
-
-  .title {
-    transition: all 0.4s ease-in-out 0s;
-  }
-}
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 56a87ab..0000000
--- a/src/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { ButtonHelp } from '@components/Buttons';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-import styles from './Tooltip.module.scss';
-
-const Tooltip = ({
-  message,
-  title,
-}: {
-  message: string | string[];
-  title: string;
-}) => {
-  const intl = useIntl();
-  const [isOpen, setIsOpen] = useState<boolean>(false);
-
-  const getMessageFromArray = (strings: string[]) => {
-    let keyIndex = 0;
-    return (
-      <ul>
-        {strings.map((string) => {
-          keyIndex = keyIndex + 1;
-          return <li key={`message-${keyIndex}`}>{string}</li>;
-        })}
-      </ul>
-    );
-  };
-
-  const buttonTitle = isOpen
-    ? intl.formatMessage({
-        defaultMessage: 'Close help',
-        description: 'Tooltip: button title',
-        id: '9kx83j',
-      })
-    : intl.formatMessage({
-        defaultMessage: 'Show help',
-        description: 'Tooltip: button title',
-        id: 'A5n+C9',
-      });
-
-  const wrapperModifier = isOpen ? styles.visible : styles.hidden;
-
-  return (
-    <div>
-      <ButtonHelp
-        showHelp={isOpen}
-        setShowHelp={setIsOpen}
-        title={buttonTitle}
-      />
-      <div className={`${styles.wrapper} ${wrapperModifier}`}>
-        <div className={styles.title}>{title}</div>
-        <div className={styles.message}>
-          {Array.isArray(message) ? getMessageFromArray(message) : message}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Tooltip;