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

diff --git a/src/components/Comment/Comment.tsx b/src/components/Comment/Comment.tsx
deleted file mode 100644
index 355363b..0000000
--- a/src/components/Comment/Comment.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { Button } from '@components/Buttons';
-import Spinner from '@components/Spinner/Spinner';
-import { Comment as CommentData } from '@ts/types/comments';
-import { settings } from '@utils/config';
-import { getFormattedDate } from '@utils/helpers/format';
-import dynamic from 'next/dynamic';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
-import Script from 'next/script';
-import { useState } from 'react';
-import { useIntl } from 'react-intl';
-import { Comment as CommentSchema, WithContext } from 'schema-dts';
-import styles from './Comment.module.scss';
-
-const DynamicCommentForm = dynamic(
-  () => import('@components/CommentForm/CommentForm'),
-  {
-    loading: () => <Spinner />,
-  }
-);
-
-const Comment = ({
-  articleId,
-  comment,
-  isNested = false,
-}: {
-  articleId: number;
-  comment: CommentData;
-  isNested?: boolean;
-}) => {
-  const intl = useIntl();
-  const router = useRouter();
-  const locale = router.locale ? router.locale : settings.locales.defaultLocale;
-  const [shouldOpenForm, setShouldOpenForm] = useState<boolean>(false);
-
-  const getCommentAuthor = () => {
-    return comment.author.url ? (
-      <Link href={comment.author.url}>
-        <a className={styles.author}>{comment.author.name}</a>
-      </Link>
-    ) : (
-      <span className={styles.author}>{comment.author.name}</span>
-    );
-  };
-
-  const getLocaleDate = () => {
-    const date = getFormattedDate(comment.date, locale);
-    const time = new Date(comment.date)
-      .toLocaleTimeString(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-      })
-      .replace(':', 'h');
-    return intl.formatMessage(
-      {
-        defaultMessage: '{date} at {time}',
-        description: 'Comment: publication date',
-        id: 'CT3ydM',
-      },
-      {
-        date,
-        time,
-      }
-    );
-  };
-
-  const getApprovedComment = () => {
-    return (
-      <>
-        <article
-          className={styles.wrapper}
-          id={`comment-${comment.databaseId}`}
-        >
-          <header className={styles.header}>
-            {comment.author.gravatarUrl && (
-              <div className={styles.avatar}>
-                <Image
-                  src={comment.author.gravatarUrl}
-                  alt={comment.author.name}
-                  layout="fill"
-                />
-              </div>
-            )}
-            {getCommentAuthor()}
-          </header>
-          <dl className={styles.date}>
-            <dt>
-              {intl.formatMessage({
-                defaultMessage: 'Published on:',
-                description: 'Comment: publication date label',
-                id: 'soj7do',
-              })}
-            </dt>
-            <dd>
-              <time dateTime={comment.date}>
-                <Link href={`#comment-${comment.databaseId}`}>
-                  <a>{getLocaleDate()}</a>
-                </Link>
-              </time>
-            </dd>
-          </dl>
-          <div
-            className={styles.body}
-            dangerouslySetInnerHTML={{ __html: comment.content }}
-          ></div>
-          {!isNested && (
-            <footer className={styles.footer}>
-              <Button clickHandler={() => setShouldOpenForm((prev) => !prev)}>
-                {shouldOpenForm
-                  ? intl.formatMessage({
-                      defaultMessage: 'Cancel reply',
-                      description: 'Comment: reply button',
-                      id: 'e1Forh',
-                    })
-                  : intl.formatMessage({
-                      defaultMessage: 'Reply',
-                      description: 'Comment: reply button',
-                      id: 'hzHuCc',
-                    })}
-              </Button>
-            </footer>
-          )}
-        </article>
-        {shouldOpenForm && (
-          <DynamicCommentForm
-            articleId={articleId}
-            parentId={comment.databaseId}
-          />
-        )}
-        {comment.replies.length > 0 && (
-          <ol className={styles.list}>
-            {comment.replies.map((reply) => {
-              return (
-                <Comment
-                  articleId={articleId}
-                  key={reply.databaseId}
-                  comment={reply}
-                  isNested={true}
-                />
-              );
-            })}
-          </ol>
-        )}
-      </>
-    );
-  };
-
-  const getCommentStatus = () => {
-    return (
-      <p>
-        {intl.formatMessage({
-          defaultMessage: 'This comment is awaiting moderation.',
-          description: 'Comment: awaiting moderation message',
-          id: 'rXeTkM',
-        })}
-      </p>
-    );
-  };
-
-  const schemaJsonLd: WithContext<CommentSchema> = {
-    '@context': 'https://schema.org',
-    '@id': `${settings.url}/#comment-${comment.databaseId}`,
-    '@type': 'Comment',
-    parentItem: isNested
-      ? { '@id': `${settings.url}/#comment-${comment.parentDatabaseId}` }
-      : undefined,
-    about: { '@type': 'Article', '@id': `${settings.url}/#article` },
-    author: {
-      '@type': 'Person',
-      name: comment.author.name,
-      image: comment.author.gravatarUrl,
-      url: comment.author.url,
-    },
-    creator: {
-      '@type': 'Person',
-      name: comment.author.name,
-      image: comment.author.gravatarUrl,
-      url: comment.author.url,
-    },
-    dateCreated: comment.date,
-    datePublished: comment.date,
-    text: comment.content,
-  };
-
-  return (
-    <>
-      <Script
-        id="schema-comments"
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
-      />
-      <li className={styles.item}>
-        {comment.approved ? getApprovedComment() : getCommentStatus()}
-      </li>
-    </>
-  );
-};
-
-export default Comment;