refactor: add typescript [ECO-960]

.eslintrc.json

@@ -1,10 +1,26 @@
 {
-  "extends": ["next/babel","next/core-web-vitals"],
+  "env": {
+      "browser": true,
+      "es2021": true
+  },
+  "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "extends: next/core-web-vitals"
+  ],
+  "parserOptions": {
+      "ecmaFeatures": {
+          "jsx": true
+      },
+      "ecmaVersion": 12,
+      "sourceType": "module"
+  },
+  "plugins": [
+      "react"
+  ],
   "rules": {
-    "@next/next/no-page-custom-font":"off",
-    "@next/next/no-sync-scripts":"off",
-    "@next/next/no-img-element":"off",
-    "react-hooks/exhaustive-deps":"off",
-    "import/no-anonymous-default-export":"off"
+      "react/prop-types":0,
+      "no-undef":"off",
+      "no-unused-vars": "off"
   }
 }

.gitignore

@@ -23,13 +23,13 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local
 
 # vercel
 .vercel
+
+# typescript
+*.tsbuildinfo

README.md

@@ -27,13 +27,4 @@ We have created an in-depth tutorial on how you can create a Next.js starter web
 
 Read Contentstack [docs](https://www.contentstack.com/docs/)
 
-Learn about [Next.js](https://learnnextjs.com/)
-
-
-
-
-
-
-
-
-
+Learn about [Next.js](https://learnnextjs.com/)

components/about-section-bucket.js → components/about-section-bucket.tsx

@@ -1,8 +1,38 @@
 import React from 'react';
 import parse from 'html-react-parser';
+import { Action,Image } from '../typescript/action';
 
-export default function AboutSectionBucket({ sectionWithBuckets }) {
-  function bucketContent(bucket, index) {
+type AdditionalParam = {
+  title_h2?: string;
+  title_h3?: string;
+  description?: string;
+}
+
+type Bucket = {
+  title_h3: string;
+  description: string;
+  icon: Image;
+  $: AdditionalParam;
+  url: string;
+}
+
+type BucketsList = {
+  title_h3: string;
+  description: string;
+  url: string;
+  call_to_action: Action;
+  icon: Image;
+  $: AdditionalParam;
+}
+
+type BucketProps = {
+  title_h2: string;
+  buckets:[BucketsList];
+  $: AdditionalParam;
+}
+
+export default function AboutSectionBucket({ sectionWithBuckets }: {sectionWithBuckets:BucketProps}) {
+  function bucketContent(bucket: Bucket, index: number) {
     return (
       <div className='mission-content-section' key={index}>
         {bucket.icon && (

components/archive-relative.js → components/archive-relative.tsx

@@ -2,7 +2,23 @@ import React from 'react';
 import Link from 'next/link';
 import parse from 'html-react-parser';
 
-export default function ArchiveRelative({ blogs }) {
+type AdditionalParam = {
+  title: string;
+  body: string;
+}
+
+type Blog = {
+  url: string;
+  body: string;
+  title: string;
+  $: AdditionalParam;
+}
+
+type BlogListProps = {
+  blogs: [Blog];
+}
+
+export default function ArchiveRelative({ blogs }: BlogListProps) {
   return (
     <>
       {blogs?.map((blog, idx) => (

components/blog-banner.js → components/blog-banner.tsx

@@ -1,6 +1,22 @@
 import React from 'react';
 
-export default function BlogBanner({ blogBanner }) {
+type AdditionalParam = {
+  banner_title:string;
+  banner_description: string;
+  title: {};
+  title_h2: string;
+  body: string;
+  date: string;
+}
+
+type BannerProps = {
+  banner_title:string;
+  banner_description: string;
+  bg_color: string;
+  $: AdditionalParam;
+}
+
+export default function BlogBanner({ blogBanner }: {blogBanner : BannerProps}) {
   return (
     <div
       className='blog-page-banner'

components/blog-list.js → components/blog-list.tsx

@@ -2,9 +2,35 @@ import React from 'react';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Link from 'next/link';
+import { Image } from "../typescript/action";
 
-function BlogList({ bloglist }) {
-  let body = typeof bloglist.body === 'string' && bloglist.body.substr(0, 300);
+type AdditionalParam = {
+  banner_title:string;
+  banner_description: string;
+  title: {};
+  title_h2: string;
+  body: string;
+  date: string;
+}
+
+type Author = {
+  title: string;
+  $: AdditionalParam;
+}
+
+
+type BloglistProps = {
+  body: string;
+  url: string;
+  featured_image: Image; 
+  title: string;
+  date: string;
+  author: [Author];
+  $: AdditionalParam;
+}
+
+function BlogList({ bloglist }: { bloglist: BloglistProps }) {
+  let body: string = bloglist.body && bloglist.body.substr(0, 300);
   const stringLength = body.lastIndexOf(' ');
   body = `${body.substr(0, Math.min(body.length, stringLength))}...`;
   return (

components/blog-section.js → components/blog-section.tsx

@@ -1,8 +1,46 @@
 import React from 'react';
 import Link from 'next/link';
 import parse from 'html-react-parser';
+import { Image } from "../typescript/action";
+
+type AdditionalParam = {
+  banner_title:string;
+  banner_description: string;
+  title: {};
+  title_h2: string;
+  body: string;
+  date: string;
+}
+
+type Article = {
+  href: string;
+  title: string;
+  $: AdditionalParam;
+}
+
+type FeaturedBlog = {
+  title: string;
+  featured_image: Image;
+  body: string;
+  url: string;
+  $: AdditionalParam;
+}
+
+type FeaturedBlogData = {
+  title_h2: string;
+  view_articles: Article;
+  featured_blogs: [FeaturedBlog]
+  $: AdditionalParam;
+}
+
+type FeaturedBlogProps = {
+  fromBlog: FeaturedBlogData;
+  }
+
+export default function BlogSection(props: FeaturedBlogProps) {
+
+  const fromBlog = props.fromBlog;
 
-export default function BlogSection({ fromBlog }) {
   return (
     <div className='community-section'>
       <div className='community-head'>

components/card-section.js → components/card-section.tsx

@@ -1,7 +1,24 @@
 import React from 'react';
 import Link from 'next/link';
+import { Action } from "../typescript/action";
 
-export default function CardSection({ cards }) {
+type AdditionalParam = {
+    title_h3: string;
+    description: string;
+  }
+
+type Card = {
+    title_h3: string;
+    description: string;
+    call_to_action: Action;
+    $: AdditionalParam;
+  }
+
+type CardProps = {
+    cards: [Card]
+  }
+
+export default function CardSection({ cards }: CardProps) {
   return (
     <div className='demo-section'>
       {cards?.map((card, index) => (

components/devtools.js → components/devtools.tsx

@@ -4,7 +4,7 @@ import Tooltip from './tool-tip';
 
 const DynamicReactJson = dynamic(import('react-json-view'), { ssr: false });
 
-function filterObject(inputObject) {
+function filterObject(inputObject: any) {
   const unWantedProps = [
     '_version',
     'ACL',
@@ -26,11 +26,11 @@ function filterObject(inputObject) {
   return inputObject;
 }
 
-const DevTools = ({ response }) => {
+const DevTools = ({ response }: any) => {
   const filteredJson = filterObject(response);
   const [forceUpdate, setForceUpdate] = useState(0);
 
-  function copyObject(object) {
+  function copyObject(object: any) {
     navigator.clipboard.writeText(object);
     setForceUpdate(1);
   }
@@ -47,7 +47,7 @@ const DevTools = ({ response }) => {
       id="staticBackdrop"
       data-bs-backdrop="static"
       data-bs-keyboard="false"
-      tabIndex="-1"
+      tabIndex={-1}
       aria-labelledby="staticBackdropLabel"
       aria-hidden="true"
       role="dialog"

components/footer.js → components/footer.tsx

@@ -4,16 +4,18 @@ import parse from 'html-react-parser';
 import { onEntryChange } from '../contentstack-sdk';
 import { getFooterRes } from '../helper';
 import Skeleton from 'react-loading-skeleton';
+import { FooterProps, Entry, Links } from "../typescript/layout";
 
-export default function Footer({ footer, entries }) {
-  const [getFooter, setFooter] = useState(footer);
+export default function Footer({ footer, entries }: {footer: FooterProps, entries: Entry}) {
 
-  function buildNavigation(ent, ft) {
+  const [getFooter, setFooter] = useState(footer);
+
+  function buildNavigation(ent: Entry, ft: FooterProps) {
     let newFooter = { ...ft };
     if (ent.length !== newFooter.navigation.link.length) {
       ent.forEach((entry) => {
         const fFound = newFooter?.navigation.link.find(
-          (nlink) => nlink.title === entry.title
+          (nlink: Links) => nlink.title === entry.title
         );
         if (!fFound) {
           newFooter.navigation.link?.push({
@@ -29,7 +31,7 @@ export default function Footer({ footer, entries }) {
 
   async function fetchData() {
     try {
-      if (footer && entries != {}) {
+      if (footer && entries) {
         const footerRes = await getFooterRes();
         const newfooter = buildNavigation(entries, footerRes);
         setFooter(newfooter);

components/header.js → components/header.tsx

@@ -6,17 +6,19 @@ import Tooltip from './tool-tip';
 import { onEntryChange } from '../contentstack-sdk';
 import { getHeaderRes } from '../helper';
 import Skeleton from 'react-loading-skeleton';
+import { HeaderProps, Entry, NavLinks } from "../typescript/layout";
+
+export default function Header({ header, entries }: {header: HeaderProps, entries: Entry}) {
 
-export default function Header({ header, entries }) {
   const router = useRouter();
   const [getHeader, setHeader] = useState(header);
 
-  function buildNavigation(ent, hd) {
+  function buildNavigation(ent: Entry, hd: HeaderProps) {
     let newHeader={...hd};
     if (ent.length!== newHeader.navigation_menu.length) {
           ent.forEach((entry) => {
             const hFound = newHeader?.navigation_menu.find(
-              (navLink) => navLink.label === entry.title
+              (navLink: NavLinks) => navLink.label === entry.title
             );
             if (!hFound) {
               newHeader.navigation_menu?.push({
@@ -34,7 +36,7 @@ export default function Header({ header, entries }) {
 
   async function fetchData() {
     try {
-      if (header && entries!=={}) {
+      if (header && entries) {
       const headerRes = await getHeaderRes();
       const newHeader = buildNavigation(entries,headerRes)
       setHeader(newHeader);
@@ -111,7 +113,7 @@ export default function Header({ header, entries }) {
         </nav>
 
         <div className='json-preview'>
-          <Tooltip content='JSON Preview' direction='top'>
+          <Tooltip content='JSON Preview' direction='top' dynamic={false} delay={200} status={0}>
             <span data-bs-toggle='modal' data-bs-target='#staticBackdrop'>
               <img src='/json.svg' alt='JSON Preview icon' />
             </span>