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, 83 insertions, 121 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;