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, 251 deletions

diff --git a/src/components/ProjectSummary/ProjectSummary.module.scss b/src/components/ProjectSummary/ProjectSummary.module.scss
deleted file mode 100644
index cf1e77f..0000000
--- a/src/components/ProjectSummary/ProjectSummary.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-@use "@styles/abstracts/functions" as fun;
-
-.wrapper {
-  margin-bottom: var(--spacing-md);
-  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
-  border: fun.convert-px(1) solid var(--color-border);
-}
-
-.cover {
-  height: fun.convert-px(150);
-  position: relative;
-}
-
-.info {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
-  align-items: start;
-  justify-content: left;
-  column-gap: var(--spacing-md);
-  margin: var(--spacing-md) 0 0;
-}
-
-.inline-data {
-  display: inline-block;
-  margin-top: fun.convert-px(3);
-
-  &:not(:last-of-type) {
-    margin-right: var(--spacing-xs);
-  }
-}
-
-.techno {
-  padding: 0 var(--spacing-2xs);
-  border: fun.convert-px(1) solid var(--color-primary-darker);
-}
-
-.repo {
-  display: block;
-  width: 3em;
-  height: 3em;
-  background: none;
-  box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-      var(--color-shadow),
-    fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1)
-      var(--color-shadow),
-    fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3)
-      var(--color-shadow),
-    0 0 0 0 var(--color-shadow);
-  transition: all 0.3s linear 0s;
-
-  &:hover,
-  &:focus {
-    box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1)
-        var(--color-shadow),
-      fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1)
-        var(--color-shadow-light),
-      fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4)
-        var(--color-shadow-light),
-      fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3)
-        var(--color-shadow);
-    transform: scale(1.15);
-  }
-
-  &:focus {
-    outline: var(--color-primary) dashed fun.convert-px(2);
-  }
-
-  &:active {
-    box-shadow: 0 0 0 0 var(--color-shadow);
-    outline: none;
-    transform: scale(0.9);
-  }
-}
diff --git a/src/components/ProjectSummary/ProjectSummary.tsx b/src/components/ProjectSummary/ProjectSummary.tsx
deleted file mode 100644
index 79e783e..0000000
--- a/src/components/ProjectSummary/ProjectSummary.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import GithubIcon from '@assets/images/social-media/github.svg';
-import GitlabIcon from '@assets/images/social-media/gitlab.svg';
-import { ProjectMeta } from '@ts/types/app';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import { slugify } from '@utils/helpers/slugify';
-import useGithubApi from '@utils/hooks/useGithubApi';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { useIntl } from 'react-intl';
-import styles from './ProjectSummary.module.scss';
-
-const ProjectSummary = ({
-  id,
-  meta,
-}: {
-  id: string;
-  title: string;
-  meta: ProjectMeta;
-}) => {
-  const { hasCover, license, repos, technologies } = meta;
-  const intl = useIntl();
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-  const { data } = useGithubApi(repos?.github ? repos.github : '');
-
-  return (
-    <div className={styles.wrapper}>
-      {hasCover && (
-        <div className={styles.cover}>
-          <Image
-            src={`/projects/${id}.jpg`}
-            alt={intl.formatMessage({
-              defaultMessage: '{title} preview',
-              description: 'ProjectSummary: cover alt text',
-              id: 'mh7tGg',
-            })}
-            layout="fill"
-            objectFit="contain"
-          />
-        </div>
-      )}
-      <dl className={styles.info}>
-        {data && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Created on:',
-                description: 'ProjectSummary: creation date label',
-                id: 'CWi0go',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={data.created_at}>
-                {getFormattedDate(data.created_at, locale)}
-              </time>
-            </dd>
-          </div>
-        )}
-        {data && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Last updated on:',
-                description: 'ProjectSummary: update date label',
-                id: 'vJ+QDV',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={data.updated_at}>
-                {getFormattedDate(data.updated_at, locale)}
-              </time>
-            </dd>
-          </div>
-        )}
-        <div className={styles.info__item}>
-          <dt>
-            {intl.formatMessage({
-              defaultMessage: 'License:',
-              description: 'ProjectSummary: license label',
-              id: 'hKagVG',
-            })}
-          </dt>
-          <dd>{license}</dd>
-        </div>
-        {technologies && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    '{count, plural, =0 {Technologies:} one {Technology:} other {Technologies:}}',
-                  description: 'ProjectSummary: technologies list label',
-                  id: 'enwhNm',
-                },
-                { count: technologies.length }
-              )}
-            </dt>
-            {technologies.map((techno) => (
-              <dd
-                key={slugify(techno)}
-                className={`${styles.techno} ${styles['inline-data']}`}
-              >
-                {techno}
-              </dd>
-            ))}
-          </div>
-        )}
-        {repos && (
-          <div className={styles.info__item}>
-            <dt>
-              {intl.formatMessage(
-                {
-                  defaultMessage:
-                    '{count, plural, =0 {Repositories:} one {Repository:} other {Repositories:}}',
-                  description: 'ProjectSummary: repositories list label',
-                  id: 'OTTv+m',
-                },
-                { count: Object.keys(repos).length }
-              )}
-            </dt>
-            {repos.github && (
-              <dd className={styles['inline-data']}>
-                <a
-                  href={`https://github.com/${repos.github}`}
-                  className={styles.repo}
-                >
-                  <GithubIcon />
-                  <span className="screen-reader-text">Github</span>
-                </a>
-              </dd>
-            )}
-            {repos.gitlab && (
-              <dd className={styles['inline-data']}>
-                <a
-                  href={`https://gitlab.com/${repos.gitlab}`}
-                  className={styles.repo}
-                >
-                  <GitlabIcon />
-                  <span className="screen-reader-text">Gitlab</span>
-                </a>
-              </dd>
-            )}
-          </div>
-        )}
-        {data && repos && (
-          <div>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Popularity:',
-                description: 'ProjectSummary: popularity label',
-                id: 'vgMk0q',
-              })}
-            </dt>
-            {repos.github && (
-              <dd>
-                ⭐&nbsp;
-                <a href={`https://github.com/${repos.github}/stargazers`}>
-                  {intl.formatMessage(
-                    {
-                      defaultMessage:
-                        '{starsCount, plural, =0 {0 stars on Github} one {# star on Github} other {# stars on Github}}',
-                      description: 'ProjectSummary: technologies list label',
-                      id: 'aA3hOT',
-                    },
-                    { starsCount: data.stargazers_count }
-                  )}
-                </a>
-              </dd>
-            )}
-          </div>
-        )}
-      </dl>
-    </div>
-  );
-};
-
-export default ProjectSummary;