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.

14 files changed, 210 insertions, 536 deletions

diff --git a/src/ts/types/app.ts b/src/ts/types/app.ts
index 4243762..7bf1541 100644
--- a/src/ts/types/app.ts
+++ b/src/ts/types/app.ts
@@ -1,160 +1,122 @@
 import { NextPage } from 'next';
 import { AppProps } from 'next/app';
-import { ImageProps } from 'next/image';
 import { ReactElement, ReactNode } from 'react';
-import { PostBy, TotalArticles } from './articles';
-import { AllPostsSlug, LastPostCursor, RawPostsList } from './blog';
-import { CommentData, CommentsByPostId, CreateComment } from './comments';
-import { ContactData, SendEmail } from './contact';
-import {
-  AllTopics,
-  AllTopicsSlug,
-  AllThematics,
-  AllThematicsSlug,
-  TopicBy,
-  ThematicBy,
-} from './taxonomies';
-
-//==============================================================================
-// Next
-//==============================================================================
-
-export type NextPageWithLayout<P = {}> = NextPage<P> & {
-  getLayout?: (page: ReactElement) => ReactNode;
+
+export type NextPageWithLayoutOptions = {
+  withExtraPadding?: boolean;
+  isHome?: boolean;
+  useGrid?: boolean;
+};
+
+export type NextPageWithLayout<T = {}> = NextPage<T> & {
+  getLayout?: (
+    page: ReactElement,
+    options: NextPageWithLayoutOptions
+  ) => ReactNode;
 };
 
 export type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
-//==============================================================================
-// API
-//==============================================================================
-
-export type VariablesType<T> = T extends PostBy | TopicBy | ThematicBy
-  ? Slug
-  : T extends RawPostsList
-  ? CursorPagination
-  : T extends CommentsByPostId
-  ? { id: number }
-  : T extends CreateComment
-  ? CommentData
-  : T extends LastPostCursor
-  ? { first: number }
-  : T extends SendEmail
-  ? ContactData
-  : null;
-
-export type RequestType =
-  | AllPostsSlug
-  | AllTopics
-  | AllTopicsSlug
-  | AllThematics
-  | AllThematicsSlug
-  | CommentsByPostId
-  | CreateComment
-  | LastPostCursor
-  | PostBy
-  | RawPostsList
-  | SendEmail
-  | ThematicBy
-  | TopicBy
-  | TotalArticles;
-
-//==============================================================================
-// Globals
-//==============================================================================
-
-export type ButtonKind = 'primary' | 'secondary' | 'tertiary';
-
-export type ButtonPosition = 'left' | 'right' | 'center';
-
-export type ContentInfo = {
-  readingTime: number;
-  wordsCount: number;
+export type ContentKind =
+  | 'article'
+  | 'comment'
+  | 'page'
+  | 'project'
+  | 'thematic'
+  | 'topic';
+
+export type Author<T extends ContentKind> = {
+  avatar?: Image;
+  description?: T extends 'comment' ? never : string;
+  name: string;
+  website?: string;
 };
 
-export type ContentParts = {
-  afterMore: string;
-  beforeMore: string;
+export type CommentMeta = {
+  author: Author<'comment'>;
+  date: string;
 };
 
-export type CursorPagination = {
-  first: number;
-  after: string;
+export type Comment = {
+  approved: boolean;
+  content: string;
+  id: number;
+  meta: CommentMeta;
+  parentId?: number;
+  replies: Comment[];
 };
 
 export type Dates = {
   publication: string;
-  update: string;
-};
-
-export type Heading = {
-  depth: number;
-  id: string;
-  children: Heading[];
-  title: string;
+  update?: string;
 };
 
-export type Meta = {
-  title: string;
-  publishedOn: string;
-  updatedOn: string;
+export type Image = {
+  alt: string;
+  height: number;
+  src: string;
+  title?: string;
+  width: number;
 };
 
-export type MetaKind = 'article' | 'list';
-
-export type NoticeType = 'error' | 'info' | 'success' | 'warning';
-
-export type PageInfo = {
-  endCursor: string;
-  hasNextPage: boolean;
-  total: number;
+export type Repos = {
+  github?: string;
+  gitlab?: string;
 };
 
-export type ParamsIds = {
-  params: { id: string };
+export type SEO = {
+  description: string;
+  title: string;
 };
 
-export type ParamsSlug = {
-  params: { slug: string };
+export type PageKind = Exclude<ContentKind, 'comment'>;
+
+export type Meta<T extends PageKind> = {
+  articles?: T extends 'thematic' | 'topic' ? Article[] : never;
+  author?: T extends 'article' | 'page' ? Author<T> : never;
+  commentsCount?: T extends 'article' ? number : never;
+  cover?: Image;
+  dates: Dates;
+  license?: T extends 'project' ? string : never;
+  repos?: T extends 'project' ? Repos : never;
+  seo: SEO;
+  tagline?: T extends 'project' ? string : never;
+  technologies?: T extends 'project' ? string[] : never;
+  thematics?: T extends 'article' | 'topic' ? PageLink[] : never;
+  topics?: T extends 'article' | 'thematic' ? PageLink[] : never;
+  website?: T extends 'topic' ? string : never;
+  wordsCount: number;
 };
 
-export type Project = {
-  cover?: string;
-  id: string;
+export type Page<T extends PageKind> = {
+  content: string;
+  id: number | string;
   intro: string;
-  meta: ProjectMeta;
+  meta: Meta<T>;
   slug: string;
-  tagline?: string;
   title: string;
-  seo: {
-    title: string;
-    description: string;
-  };
-};
-
-export type ProjectMeta = Omit<Meta, 'title'> & {
-  hasCover: boolean;
-  license: string;
-  repos?: {
-    github?: string;
-    gitlab?: string;
-  };
-  technologies?: string[];
 };
 
-export type ProjectProps = {
-  project: Project;
+export type PageLink = {
+  id: number;
+  logo?: Image;
+  name: string;
+  url: string;
 };
 
-export type ResponsiveImageProps = ImageProps & {
-  caption?: string;
-  linkTarget?: string;
+export type Article = Page<'article'>;
+export type ArticleCard = Pick<Article, 'id' | 'slug' | 'title'> &
+  Pick<Meta<'article'>, 'cover' | 'dates'>;
+export type Project = Page<'project'>;
+export type ProjectPreview = Omit<Page<'project'>, 'content'>;
+export type ProjectCard = Pick<Page<'project'>, 'id' | 'slug' | 'title'> & {
+  meta: Pick<Meta<'project'>, 'cover' | 'dates' | 'tagline' | 'technologies'>;
 };
+export type Thematic = Page<'thematic'>;
+export type Topic = Page<'topic'>;
 
 export type Slug = {
   slug: string;
 };
-
-export type TitleLevel = 2 | 3 | 4 | 5 | 6;
diff --git a/src/ts/types/articles.ts b/src/ts/types/articles.ts
deleted file mode 100644
index 64d2860..0000000
--- a/src/ts/types/articles.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import { ContentInfo, ContentParts, Dates } from './app';
-import { Comment } from './comments';
-import { Cover, RawCover } from './cover';
-import { SEO } from './seo';
-import { RawTopicPreview, TopicPreview, ThematicPreview } from './taxonomies';
-
-export type ArticleAuthor = {
-  firstName: string;
-  lastName: string;
-  name: string;
-};
-
-export type RawACFPosts = {
-  postsInTopic: RawTopicPreview[] | null;
-  postsInThematic: ThematicPreview[] | null;
-};
-
-export type ACFPosts = {
-  postsInTopic: TopicPreview[] | null;
-  postsInThematic: ThematicPreview[] | null;
-};
-
-export type ArticleMeta = {
-  author?: ArticleAuthor;
-  commentCount?: number;
-  dates?: Dates;
-  readingTime?: number;
-  results?: number;
-  topics?: TopicPreview[];
-  thematics?: ThematicPreview[];
-  website?: string;
-  wordsCount?: number;
-};
-
-export type Article = {
-  author: ArticleAuthor;
-  commentCount: number | null;
-  content: string;
-  databaseId: number;
-  dates: Dates;
-  featuredImage: Cover;
-  id: string;
-  info: ContentInfo;
-  intro: string;
-  seo: SEO;
-  topics: TopicPreview[] | [];
-  thematics: ThematicPreview[] | [];
-  title: string;
-};
-
-export type RawArticle = Pick<
-  Article,
-  'commentCount' | 'databaseId' | 'id' | 'info' | 'seo' | 'title'
-> & {
-  acfPosts: RawACFPosts;
-  author: { node: ArticleAuthor };
-  contentParts: ContentParts;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-};
-
-export type ArticlePreview = Pick<
-  Article,
-  | 'commentCount'
-  | 'dates'
-  | 'id'
-  | 'info'
-  | 'intro'
-  | 'topics'
-  | 'thematics'
-  | 'title'
-> & { featuredImage: Cover; slug: string };
-
-export type RawArticlePreview = Pick<
-  Article,
-  'commentCount' | 'id' | 'info' | 'title'
-> & {
-  acfPosts: ACFPosts;
-  contentParts: Pick<ContentParts, 'beforeMore'>;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-  slug: string;
-};
-
-export type PostBy = {
-  post: RawArticle;
-};
-
-export type ArticleProps = {
-  comments: Comment[];
-  post: Article;
-};
-
-export type TotalArticles = {
-  posts: {
-    pageInfo: {
-      total: number;
-    };
-  };
-};
diff --git a/src/ts/types/blog.ts b/src/ts/types/blog.ts
deleted file mode 100644
index 05bdd1f..0000000
--- a/src/ts/types/blog.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PageInfo, Slug } from './app';
-import { ArticlePreview, RawArticlePreview } from './articles';
-import { ThematicPreview, TopicPreview } from './taxonomies';
-
-export type PostsList = {
-  posts: ArticlePreview[];
-  pageInfo: PageInfo;
-};
-
-export type PostsListEdges = {
-  cursor: string;
-  node: RawArticlePreview;
-};
-
-export type RawPostsList = {
-  posts: {
-    edges: PostsListEdges[];
-    pageInfo: PageInfo;
-  };
-};
-
-export type LastPostCursor = {
-  posts: {
-    pageInfo: {
-      endCursor: string;
-    };
-  };
-};
-
-export type AllPostsSlug = {
-  posts: {
-    nodes: Slug[];
-  };
-};
-
-export type BlogPageProps = {
-  allThematics: ThematicPreview[];
-  allTopics: TopicPreview[];
-  posts: PostsList;
-  totalPosts: number;
-};
diff --git a/src/ts/types/comments.ts b/src/ts/types/comments.ts
deleted file mode 100644
index aa3fac3..0000000
--- a/src/ts/types/comments.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-//==============================================================================
-// Comments query
-//==============================================================================
-
-export type CommentAuthor = {
-  name: string;
-  gravatarUrl: string;
-  url: string;
-};
-
-export type RawCommentAuthor = {
-  node: CommentAuthor;
-};
-
-export type Comment = {
-  approved: '';
-  author: CommentAuthor;
-  databaseId: number;
-  content: string;
-  date: string;
-  parentDatabaseId: number;
-  replies: Comment[];
-};
-
-export type RawComment = Omit<Comment, 'author' | 'replies'> & {
-  author: RawCommentAuthor;
-};
-
-export type CommentsNode = {
-  nodes: RawComment[];
-};
-
-export type CommentsByPostId = {
-  comments: CommentsNode;
-};
-
-//==============================================================================
-// Comment mutations
-//==============================================================================
-
-export type CommentData = {
-  author: string;
-  authorEmail: string;
-  authorUrl: string;
-  content: string;
-  parent: number;
-  commentOn: number;
-  mutationId: string;
-};
-
-export type CreatedComment = {
-  clientMutationId: string;
-  success: boolean;
-  comment: null | {
-    approved: boolean;
-  };
-};
-
-export type CreateComment = {
-  createComment: CreatedComment;
-};
diff --git a/src/ts/types/contact.ts b/src/ts/types/contact.ts
deleted file mode 100644
index ef6847a..0000000
--- a/src/ts/types/contact.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export type ContactData = {
-  body: string;
-  mutationId: string;
-  replyTo: string;
-  subject: string;
-};
-
-export type SentEmail = {
-  clientMutationId: string;
-  message: string;
-  origin: string;
-  replyTo: string;
-  sent: boolean;
-  to: string;
-};
-
-export type SendEmail = {
-  sendEmail: SentEmail;
-};
diff --git a/src/ts/types/cover.ts b/src/ts/types/cover.ts
deleted file mode 100644
index 4df898e..0000000
--- a/src/ts/types/cover.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export type Cover = {
-  altText: string;
-  sourceUrl: string;
-  title: string;
-} | null;
-
-export type RawCover = {
-  node: Cover;
-} | null;
diff --git a/src/ts/types/mdx.ts b/src/ts/types/mdx.ts
new file mode 100644
index 0000000..16538c1
--- /dev/null
+++ b/src/ts/types/mdx.ts
@@ -0,0 +1,17 @@
+import { StaticImageData } from 'next/image';
+import { Meta } from './app';
+
+export type MDXData = {
+  file: string;
+  image: StaticImageData;
+};
+
+export type MDXPageMeta = Pick<Meta<'page'>, 'cover' | 'dates' | 'seo'> & {
+  intro: string;
+  title: string;
+};
+
+export type MDXProjectMeta = Exclude<Meta<'project'>, 'wordsCount'> & {
+  intro: string;
+  title: string;
+};
diff --git a/src/ts/types/nav.ts b/src/ts/types/nav.ts
deleted file mode 100644
index 7cfc46b..0000000
--- a/src/ts/types/nav.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type NavItem = {
-  id: string;
-  name: string;
-  slug: string;
-};
diff --git a/src/ts/types/prism.ts b/src/ts/types/prism.ts
deleted file mode 100644
index 663bc08..0000000
--- a/src/ts/types/prism.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-export type PrismLanguages =
-  | 'apacheconf'
-  | 'bash'
-  | 'css'
-  | 'diff'
-  | 'docker'
-  | 'editorconfig'
-  | 'ejs'
-  | 'git'
-  | 'graphql'
-  | 'html'
-  | 'ignore'
-  | 'ini'
-  | 'javascript'
-  | 'jsdoc'
-  | 'json'
-  | 'jsx'
-  | 'makefile'
-  | 'markup'
-  | 'php'
-  | 'phpdoc'
-  | 'regex'
-  | 'scss'
-  | 'shell-session'
-  | 'smarty'
-  | 'tcl'
-  | 'toml'
-  | 'tsx'
-  | 'twig'
-  | 'yaml';
-
-export type PrismDefaultPlugins =
-  | 'autoloader'
-  | 'color-scheme'
-  | 'copy-to-clipboard'
-  | 'match-braces'
-  | 'normalize-whitespace'
-  | 'show-language'
-  | 'toolbar';
-
-export type PrismPlugins =
-  | 'command-line'
-  | 'diff-highlight'
-  | 'inline-color'
-  | 'line-highlight'
-  | 'line-numbers';
-
-export type PrismProviderProps = {
-  language: PrismLanguages;
-  plugins: PrismPlugins[];
-};
diff --git a/src/ts/types/raw-data.ts b/src/ts/types/raw-data.ts
new file mode 100644
index 0000000..dc3db90
--- /dev/null
+++ b/src/ts/types/raw-data.ts
@@ -0,0 +1,105 @@
+/**
+ * Types for raw data coming from GraphQL API.
+ */
+
+import { NodeResponse, PageInfo } from '@services/graphql/api';
+import { ContentKind } from './app';
+
+export type ACFPosts = {
+  postsInThematic?: RawThematicPreview[];
+  postsInTopic?: RawTopicPreview[];
+};
+
+export type ACFThematics = {
+  postsInThematic: RawArticle[];
+};
+
+export type ACFTopics = {
+  officialWebsite: string;
+  postsInTopic: RawArticle[];
+};
+
+export type ContentParts = {
+  afterMore: string;
+  beforeMore: string;
+};
+
+export type Info = {
+  wordsCount: number;
+};
+
+export type RawAuthor<T extends ContentKind> = {
+  description?: T extends 'comment' ? never : string;
+  gravatarUrl?: string;
+  name: string;
+  url?: string;
+};
+
+export type RawComment = {
+  approved: boolean;
+  author: NodeResponse<RawAuthor<'comment'>>;
+  content: string;
+  databaseId: number;
+  date: string;
+  parentDatabaseId: number;
+};
+
+export type RawCover = {
+  altText: string;
+  mediaDetails: {
+    width: number;
+    height: number;
+  };
+  sourceUrl: string;
+  title?: string;
+};
+
+export type RawArticle = RawPage & {
+  acfPosts: ACFPosts;
+  commentCount: number | null;
+};
+
+export type RawArticlePreview = Pick<
+  RawArticle,
+  'databaseId' | 'date' | 'featuredImage' | 'slug' | 'title'
+>;
+
+export type RawPage = {
+  author?: NodeResponse<RawAuthor<'page'>>;
+  contentParts: ContentParts;
+  databaseId: number;
+  date: string;
+  featuredImage: NodeResponse<RawCover> | null;
+  info: Info;
+  modified: string;
+  seo?: RawSEO;
+  slug: string;
+  title: string;
+};
+
+export type RawSEO = {
+  metaDesc: string;
+  title: string;
+};
+
+export type RawThematic = RawPage & {
+  acfThematics: ACFThematics;
+};
+
+export type RawThematicPreview = Pick<
+  RawThematic,
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
+>;
+
+export type RawTopic = RawPage & {
+  acfTopics: ACFTopics;
+};
+
+export type RawTopicPreview = Pick<
+  RawTopic,
+  'databaseId' | 'featuredImage' | 'slug' | 'title'
+>;
+
+export type TotalItems = {
+  pageInfo: Pick<PageInfo, 'total'>;
+};
diff --git a/src/ts/types/repos.ts b/src/ts/types/repos.ts
deleted file mode 100644
index 7dacacc..0000000
--- a/src/ts/types/repos.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export type RepoData = {
-  created_at: string;
-  updated_at: string;
-  stargazers_count: number;
-};
-
-export type RepoAPI = 'github';
diff --git a/src/ts/types/seo.ts b/src/ts/types/seo.ts
deleted file mode 100644
index 18e3c95..0000000
--- a/src/ts/types/seo.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type SEO = {
-  title: string;
-  metaDesc: string;
-  metaRobotsNofollow: string;
-  metaRobotsNoindex: string;
-};
diff --git a/src/ts/types/swr.ts b/src/ts/types/swr.ts
new file mode 100644
index 0000000..4da6b2c
--- /dev/null
+++ b/src/ts/types/swr.ts
@@ -0,0 +1,5 @@
+export type SWRResult<T> = {
+  data?: T;
+  isLoading: boolean;
+  isError: boolean;
+};
diff --git a/src/ts/types/taxonomies.ts b/src/ts/types/taxonomies.ts
deleted file mode 100644
index 17fc022..0000000
--- a/src/ts/types/taxonomies.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-import { ContentInfo, ContentParts, Dates, Slug } from './app';
-import { ArticlePreview, RawArticlePreview } from './articles';
-import { Cover, RawCover } from './cover';
-import { SEO } from './seo';
-
-//==============================================================================
-// Taxonomies base
-//==============================================================================
-
-type Taxonomy = {
-  content: string;
-  databaseId: number;
-  dates: Dates;
-  id: string;
-  info: ContentInfo;
-  intro: string;
-  posts: ArticlePreview[];
-  seo: SEO;
-  title: string;
-};
-
-type TaxonomyPreview = Pick<
-  Taxonomy,
-  'databaseId' | 'id' | 'info' | 'seo' | 'title'
-> & {
-  slug: string;
-};
-
-//==============================================================================
-// Topics
-//==============================================================================
-
-export type Topic = Taxonomy & {
-  featuredImage: Cover;
-  officialWebsite: string;
-};
-
-export type RawTopicPreview = TaxonomyPreview & {
-  featuredImage: RawCover;
-};
-
-export type TopicPreview = TaxonomyPreview & {
-  featuredImage: Cover;
-};
-
-export type AllTopics = {
-  topics: {
-    nodes: TopicPreview[];
-  };
-};
-
-export type RawTopic = TopicPreview & {
-  acfTopics: {
-    officialWebsite: string;
-    postsInTopic: RawArticlePreview[];
-  };
-  contentParts: ContentParts;
-  date: string;
-  featuredImage: RawCover;
-  modified: string;
-};
-
-export type TopicBy = {
-  topic: RawTopic;
-};
-
-export type AllTopicsSlug = {
-  topics: {
-    nodes: Slug[];
-  };
-};
-
-export type TopicProps = {
-  allTopics: TopicPreview[];
-  topic: Topic;
-};
-
-//==============================================================================
-// Thematics
-//==============================================================================
-
-export type Thematic = Taxonomy;
-
-export type ThematicPreview = TaxonomyPreview;
-
-export type AllThematics = {
-  thematics: {
-    nodes: ThematicPreview[];
-  };
-};
-
-export type RawThematic = TaxonomyPreview & {
-  acfThematics: {
-    postsInThematic: RawArticlePreview[];
-  };
-  contentParts: ContentParts;
-  date: string;
-  modified: string;
-};
-
-export type ThematicBy = {
-  thematic: RawThematic;
-};
-
-export type AllThematicsSlug = {
-  thematics: {
-    nodes: Slug[];
-  };
-};
-
-export type ThematicProps = {
-  allThematics: ThematicPreview[];
-  thematic: Thematic;
-};