refactor: add typescript [ECO-960]

Author: karantalapalli

.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.tsxcomponents/about-section-bucket.js renamed to components/about-section-bucket.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import parse from 'html-react-parser';
+import { BucketProps, Bucket } from "../typescript/about-section-bucket";
 
-export default function AboutSectionBucket({ sectionWithBuckets }) {
-  function bucketContent(bucket, index) {
+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.tsxcomponents/archive-relative.js renamed to components/archive-relative.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import Link from 'next/link';
 import parse from 'html-react-parser';
+import {BlogListProps} from '../typescript/archive-relative';
 
-export default function ArchiveRelative({ blogs }) {
+export default function ArchiveRelative({ blogs }: BlogListProps) {
   return (
     <>
       {blogs?.map((blog, idx) => (

components/blog-banner.js components/blog-banner.tsxcomponents/blog-banner.js renamed to components/blog-banner.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
+import {BannerProps} from '../typescript/blog';
 
-export default function BlogBanner({ blogBanner }) {
+export default function BlogBanner({ blogBanner }: {blogBanner : BannerProps}) {
   return (
     <div
       className='blog-page-banner'

components/blog-list.js components/blog-list.tsxcomponents/blog-list.js renamed to components/blog-list.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import moment from 'moment';
 import parse from 'html-react-parser';
 import Link from 'next/link';
+import { BloglistProps } from "../typescript/blog";
 
-function BlogList({ bloglist }) {
+function BlogList({ bloglist }: { bloglist: BloglistProps }) {
   let body = typeof bloglist.body === 'string' && bloglist.body.substr(0, 300);
-  const stringLength = body.lastIndexOf(' ');
-  body = `${body.substr(0, Math.min(body.length, stringLength))}...`;
+  const stringLength = (body as string).lastIndexOf(' ');
+  body = `${(body as string).substr(0, Math.min((body as string).length, stringLength))}...`;
   return (
     <div className='blog-list'>
       {bloglist.featured_image && (

components/blog-section.js components/blog-section.tsxcomponents/blog-section.js renamed to components/blog-section.tsx

@@ -1,8 +1,12 @@
 import React from 'react';
 import Link from 'next/link';
 import parse from 'html-react-parser';
+import { FeaturedBlogProps } from "../typescript/blog";
+
+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.tsxcomponents/card-section.js renamed to components/card-section.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import Link from 'next/link';
+import { CardProps } from "../typescript/card";
 
-export default function CardSection({ cards }) {
+export default function CardSection({ cards }: CardProps) {
   return (
     <div className='demo-section'>
       {cards?.map((card, index) => (

components/devtools.js components/devtools.tsxcomponents/devtools.js renamed to 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"