Merge pull request #33 from contentstack/refactor/ECO-960_add_typescript

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

@@ -30,12 +30,3 @@ Read Contentstack [docs](https://www.contentstack.com/docs/)
 Region support [docs](https://www.contentstack.com/docs/developers/selecting-region-in-contentstack-starter-apps)
 
 Learn about [Next.js](https://learnnextjs.com/)
-
-
-
-
-
-
-
-
-

SECURITY.md

@@ -0,0 +1,27 @@
+## Security
+
+Contentstack takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations.
+
+If you believe you have found a security vulnerability in any Contentstack-owned repository, please report it to us as described below.
+
+## Reporting Security Issues
+
+**Please do not report security vulnerabilities through public GitHub issues.**
+
+Send email to [security@contentstack.com](mailto:security@contentstack.com).
+
+You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message.
+
+Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
+
+  * Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
+  * Full paths of source file(s) related to the manifestation of the issue
+  * The location of the affected source code (tag/branch/commit or direct URL)
+  * Any special configuration required to reproduce the issue
+  * Step-by-step instructions to reproduce the issue
+  * Proof-of-concept or exploit code (if possible)
+  * Impact of the issue, including how an attacker might exploit the issue
+
+This information will help us triage your report more quickly.
+
+[https://www.contentstack.com/trust/](https://www.contentstack.com/trust/)

components/about-section-bucket.js components/about-section-bucket.tsxcomponents/about-section-bucket.js renamed to 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.tsxcomponents/archive-relative.js renamed to 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.tsxcomponents/blog-banner.js renamed to 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.tsxcomponents/blog-list.js renamed to 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.tsxcomponents/blog-section.js renamed to 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.tsxcomponents/card-section.js renamed to 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) => (