feat: storybook setup, chromatic setup and typography stories

.eslintrc

@@ -3,7 +3,8 @@
     "airbnb-base",
     "next/core-web-vitals",
     "eslint:recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "env": {
     "browser": true,
@@ -52,7 +53,11 @@
   "overrides": [
     // Configuration for TypeScript files
     {
-      "files": ["**/*.ts", "**/*.tsx", "netlify/*.ts"],
+      "files": [
+        "**/*.ts",
+        "**/*.tsx",
+        "netlify/*.ts"
+      ],
       "plugins": [
         "@typescript-eslint",
         "tailwindcss",
@@ -63,7 +68,8 @@
         "plugin:tailwindcss/recommended",
         "airbnb-typescript",
         "next/core-web-vitals",
-        "plugin:prettier/recommended"
+        "plugin:prettier/recommended",
+        "plugin:storybook/recommended"
       ],
       "parserOptions": {
         "project": "./tsconfig.json"
@@ -93,7 +99,9 @@
         "unused-imports/no-unused-imports": "error",
         "unused-imports/no-unused-vars": [
           "error",
-          { "argsIgnorePattern": "^_" }
+          {
+            "argsIgnorePattern": "^_"
+          }
         ],
         // Variables
         "init-declarations": "off",
@@ -192,7 +200,10 @@
             "ignoreChainWithDepth": 4
           }
         ],
-        "newline-after-var": ["error", "always"],
+        "newline-after-var": [
+          "error",
+          "always"
+        ],
         "no-array-constructor": "error",
         "no-lonely-if": "error",
         "no-mixed-operators": "off",
@@ -294,10 +305,12 @@
       }
     },
     {
-      "files": ["components/logos/*"],
+      "files": [
+        "components/logos/*"
+      ],
       "rules": {
         "max-len": "off"
       }
     }
   ]
-}
+}

.gitignore

@@ -18,4 +18,6 @@ cypress/screenshots
 cypress/videos
 /config/finance/json-data/*
 *.mdx
-coverage
+*storybook.log
+/storybook-static/
+coverage

.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/nextjs";
+
+const config: StorybookConfig = {
+  stories: [
+    "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  docs: {
+    defaultName: 'Documentation',
+  },
+  framework: {
+    name: "@storybook/nextjs",
+    options: {},
+  },
+  staticDirs: ["../public"],
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import "../styles/globals.css";
+import type { Preview } from "@storybook/react";
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks';
+
+const preview: Preview = {
+  tags: ['autodocs'],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      toc: {
+        title: 'Table of contents',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Controls />
+          <Stories />
+        </>
+      )
+    }
+  }
+};
+
+export default preview;

README.md

@@ -27,7 +27,8 @@ This repository contains the sources of AsyncAPI website:
 
 - It's powered by [Next.js](https://nextjs.org/),
 - It uses [Tailwind](https://tailwindcss.com/) CSS framework,
-- It's build and deployed with [Netlify](https://www.netlify.com/).
+- It's build and deployed with [Netlify](https://www.netlify.com/),
+- It uses [Storybook](https://storybook.js.org/) as a frontend workshop and for dociuenting UI components.
 
 ## Requirements
 
@@ -69,6 +70,14 @@ Use the following tools to set up the project:
 
 7. Access the live development server at [localhost:3000](http://localhost:3000).
 
+8. To run the storybook locally:
+
+```bash
+    npm run dev:storybook
+```
+
+9. Access the live storybook development server at [localhost:6006](http://localhost:6006).
+
 
 ## Compose new blog post
 
@@ -88,14 +97,22 @@ To spin up a Gitpod codespace, go to http://gitpod.io/#https://github.com/asynca
 
 ### Build
 
-To build a production-ready website, run the following command:
+1. To build a production-ready website, run the following command:
 
 ```bash
 npm run build
 ```
 
 Generated files of the website go to the `.next` folder.
 
+2. To build the production-ready storybook, run the following command:
+
+```bash
+npm run build:storybook
+```
+
+Generated files of the storybook go to the `storybook-static` folder.
+
 ### Run locally using Docker
 
 #### Prerequisites:

components/typography/Heading.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
+
+import Heading from './Heading';
+
+const meta: Meta<typeof Heading> = {
+  title: 'Typography/Heading',
+  component: Heading,
+  argTypes: {
+    level: {
+      options: Object.values(HeadingLevel),
+      control: { type: 'select' }
+    },
+    typeStyle: {
+      options: Object.values(HeadingTypeStyle),
+      control: { type: 'select' }
+    },
+    children: {
+      control: { type: 'text' }
+    },
+    className: {
+      control: { type: 'text' }
+    },
+    textColor: {
+      table: {
+        disable: true
+      }
+    },
+    id: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Headings: Story = {
+  args: {
+    level: HeadingLevel.h1,
+    typeStyle: HeadingTypeStyle.lg,
+    children: 'Quick brown fox jumps over the lazy dog'
+  }
+};
+
+export const HeadingsLevel = () => (
+  <>
+    <Heading level={HeadingLevel.h1}>Heading 1</Heading>
+    <Heading level={HeadingLevel.h2}>Heading 2</Heading>
+    <Heading level={HeadingLevel.h3}>Heading 3</Heading>
+    <Heading level={HeadingLevel.h4}>Heading 4</Heading>
+    <Heading level={HeadingLevel.h5}>Heading 5</Heading>
+    <Heading level={HeadingLevel.h6}>Heading 6</Heading>
+  </>
+);
+
+export const HeadingsTypeStyle = () => (
+  <>
+    <Heading typeStyle={HeadingTypeStyle.xl}>Heading XL</Heading>
+    <Heading typeStyle={HeadingTypeStyle.lg}>Heading LG</Heading>
+    <Heading typeStyle={HeadingTypeStyle.md}>Heading MD</Heading>
+    <Heading typeStyle={HeadingTypeStyle.mdSemibold}>Heading MD Semibold</Heading>
+    <Heading typeStyle={HeadingTypeStyle.sm}>Heading SM</Heading>
+    <Heading typeStyle={HeadingTypeStyle.smSemibold}>Heading SM Semibold</Heading>
+    <Heading typeStyle={HeadingTypeStyle.xs}>Heading XS</Heading>
+    <Heading typeStyle={HeadingTypeStyle.xsSemibold}>Heading XS Semibold</Heading>
+    <Heading typeStyle={HeadingTypeStyle.bodyLg}>Body LG</Heading>
+    <Heading typeStyle={HeadingTypeStyle.bodyMd}>Body MD</Heading>
+    <Heading typeStyle={HeadingTypeStyle.bodySm}>Body SM</Heading>
+  </>
+);

components/typography/Heading.tsx

@@ -3,22 +3,29 @@ import React from 'react';
 import { HeadingLevel, HeadingTypeStyle } from '@/types/typography/Heading';
 
 export interface HeadingProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** Contains the type of heading style. HeadingTypeStyle.lg is default */
   typeStyle?: HeadingTypeStyle;
+
+  /** Contains the level of heading. HeadingLevel.h2 is by default */
   level?: HeadingLevel;
+
+  /** Contains text color for the heading. 'text-primary-800' is by default */
   textColor?: string;
+
+  /** Contains additional classes that should be added to the component */
   className?: string;
+
+  /** Contains all the child elements bounded inside component */
   children?: React.ReactNode;
+
+  /** Contains an id to be appended on heading */
   id?: string;
 }
 
 /**
- * Heading
- * @param {HeadingTypeStyle} props.typeStyle contains the type of heading style. HeadingTypeStyle.lg is default
- * @param {HeadingLevel} props.level contains the level of heading. HeadingLevel.h2 is by default
- * @param {string} props.textColor contains text color for the heading. 'text-primary-800' is by default
- * @param {string} props.className contains additional classes that should be added to the component
- * @param {React.ReactNode} props.children contains all the child elements bounded inside component
- * @param {string} props.id contains an id to be appended on heading
+ * Heading component is used to render a heading element with different styles and sizes.
  */
 export default function Heading({
   typeStyle = HeadingTypeStyle.lg,

components/typography/Paragraph.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
+
+import Paragraph from './Paragraph';
+
+const meta: Meta<typeof Paragraph> = {
+  title: 'Typography/Paragraph',
+  component: Paragraph,
+  argTypes: {
+    typeStyle: {
+      options: Object.values(ParagraphTypeStyle),
+      control: { type: 'select' }
+    },
+    textColor: {
+      control: { type: 'text' }
+    },
+    fontWeight: {
+      control: { type: 'text' }
+    },
+    children: {
+      control: { type: 'text' }
+    },
+    className: {
+      control: { type: 'text' }
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Paragraph>;
+
+export const Paragraphs: Story = {
+  args: {
+    typeStyle: ParagraphTypeStyle.lg,
+    textColor: 'text-gray-700',
+    fontWeight: '',
+    children: 'Quick brown fox jumps over the lazy dog'
+  }
+};

components/typography/Paragraph.tsx

@@ -3,20 +3,26 @@ import { twMerge } from 'tailwind-merge';
 import { ParagraphTypeStyle } from '@/types/typography/Paragraph';
 
 export interface ParagraphProps {
+  // eslint-disable-next-line prettier/prettier
+
+  /** Contains the type of paragraph style. ParagraphTypeStyle.lg is by default */
   typeStyle?: ParagraphTypeStyle;
+
+  /** Contains text color for the paragraph. 'text-gray-700' is by default */
   textColor?: string;
+
+  /** Contains class name for applying font weight in the paragraph */
   fontWeight?: string;
+
+  /** Contains additional classes that should be added to the component */
   className?: string;
+
+  /** Contains all the child elements bounded inside component */
   children?: React.ReactNode;
 }
 
 /**
- * Paragraph
- * @param {ParagraphTypeStyle} props.typeStyle contains the type of paragraph style. ParagraphTypeStyle.lg is by default
- * @param {string} props.textColor contains text color for the paragraph. 'text-gray-700' is by default
- * @param {string} props.fontWeight contains class name for applying font weight in the paragraph
- * @param {string} props.className contains additional classes that should be added to the component
- * @param {React.ReactNode} props.children contains all the child elements bounded inside component
+ * Paragraph component is used to render a paragraph element with different type of styles.
  */
 export default function Paragraph({
   typeStyle = ParagraphTypeStyle.lg,