feat: converts frontend app to TypeScript

ghoshnirmalya · Aug 19, 2020 · bdb68ea · bdb68ea
1 parent d7ff60f
commit bdb68ea
Show file tree

Hide file tree

Showing 28 changed files with 527 additions and 38 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,7 @@
+**/.DS_STORE
+node_modules
+.next
+**/.env
+out
+**/*.pem
+.vercel
diff --git a/.release-it.json b/.release-it.json
@@ -0,0 +1,15 @@
+{
+  "git": {
+    "commitMessage": "chore: release v${version}"
+  },
+  "github": {
+    "release": true
+  },
+  "npm": false,
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": "angular",
+      "infile": "changelog.md"
+    }
+  }
+}
diff --git a/frontend/.env.example b/frontend/.env.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:1337/graphql
diff --git a/frontend/components/pages/index/feed.js → frontend/components/pages/index/feed.tsx b/frontend/components/pages/index/feed.js → frontend/components/pages/index/feed.tsx
@@ -1,7 +1,12 @@
 import { Box, Stack, Text, useColorMode } from "@chakra-ui/core";
-import React from "react";
+import React, { FC } from "react";
+import IFeed from "types/feed";
 
-const Feed = ({ feed }) => {
+interface IProps {
+  feed: IFeed;
+}
+
+const Feed: FC<IProps> = ({ feed }) => {
   const { colorMode } = useColorMode();
   const bgColor = { light: "white", dark: "gray.800" };
   const color = { light: "gray.800", dark: "gray.100" };
@@ -19,6 +24,7 @@ const Feed = ({ feed }) => {
       >
         <Stack>
           <Text fontWeight="bold">{feed.author.username}</Text>
+          <Text>{feed.created_at}</Text>
         </Stack>
       </Stack>
     );

diff --git a/frontend/components/pages/index/index.js → frontend/components/pages/index/index.tsx b/frontend/components/pages/index/index.js → frontend/components/pages/index/index.tsx
@@ -2,6 +2,7 @@ import { gql, useQuery } from "@apollo/client";
 import { Box, Stack } from "@chakra-ui/core";
 import Feed from "components/pages/index/feed";
 import React from "react";
+import IFeed from "types/feed";
 
 const feedsQuery = gql`
   query fetchFeeds {
@@ -27,7 +28,7 @@ const FeedsPageComponent = () => {
 
   return (
     <Stack spacing={8}>
-      {data.feeds.map((feed) => {
+      {data.feeds.map((feed: IFeed) => {
         return (
           <Box key={feed.id}>
             <Feed feed={feed} />

diff --git a/frontend/lib/with-graphql.js → frontend/lib/with-graphql.tsx b/frontend/lib/with-graphql.js → frontend/lib/with-graphql.tsx
@@ -1,6 +1,7 @@
 import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
+import { ReactNode } from "react";
 
-const WithGraphQL = ({ children }) => {
+const WithGraphQL = ({ children }: { children: ReactNode }) => {
   const client = new ApolloClient({
     uri: process.env.NEXT_PUBLIC_API_URL || "http://localhost:1337/graphql",
     cache: new InMemoryCache(),

diff --git a/frontend/next-env.d.ts b/frontend/next-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -0,0 +1,4 @@
+module.exports = {
+  // https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode
+  reactStrictMode: true,
+};
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,13 +1,15 @@
 {
-  "name": "frontend",
+  "name": "nextjs-strapi-boilerplate-frontend",
   "version": "0.0.1",
   "author": "nirmalya.email@gmail.com",
   "license": "MIT",
   "scripts": {
     "dev": "next dev",
+    "build:analyze": "ANALYZE=true next build && tsc --project tsconfig.server.json",
     "build": "next build",
+    "export": "next export",
     "start": "next start",
-    "export": "next export"
+    "type-check": "tsc"
   },
   "dependencies": {
     "@apollo/client": "^3.1.3",
@@ -19,5 +21,14 @@
     "next": "9.5.2",
     "react": "16.13.1",
     "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "@types/next": "^9.0.0",
+    "@types/node": "^14.0.27",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.8",
+    "tslint": "^6.1.3",
+    "tslint-react": "^5.0.0",
+    "typescript": "^3.9.7"
   }
 }
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { AppProps } from "next/app";
+import Head from "next/head";
+import { ThemeProvider, CSSReset, theme } from "@chakra-ui/core";
+import Layout from "components/layout";
+
+const App = ({ Component, pageProps }: AppProps) => {
+  return (
+    <>
+      <Head>
+        <link rel="shortcut icon" href="/images/favicon.ico" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        <CSSReset />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </>
+  );
+};
+
+export default App;
diff --git a/frontend/pages/index.js → frontend/pages/index.tsx b/frontend/pages/index.js → frontend/pages/index.tsx
@@ -1,17 +1,18 @@
+import React from "react";
+import Head from "next/head";
 import Page from "components/pages/index";
+import { NextPage } from "next";
 import WithGraphQL from "lib/with-graphql";
-import Head from "next/head";
-import React from "react";
 
-const Home = () => {
+const IndexPage: NextPage = () => {
   return (
     <WithGraphQL>
       <Head>
-        <title>My Account Page</title>
+        <title>Index Page</title>
       </Head>
       <Page />
     </WithGraphQL>
   );
 };
 
-export default Home;
+export default IndexPage;
diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/images/bug_fixed.svg b/frontend/public/images/bug_fixed.svg
diff --git a/frontend/public/images/favicon.ico b/frontend/public/images/favicon.ico
diff --git a/frontend/public/vercel.svg b/frontend/public/vercel.svg
diff --git a/frontend/tsconfig.base.json b/frontend/tsconfig.base.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "downlevelIteration": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "strict": true,
+    "pretty": true,
+    "jsx": "react",
+    "suppressImplicitAnyIndexErrors": true
+  }
+}
diff --git a/frontend/tsconfig.build.json b/frontend/tsconfig.build.json
@@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "build",
+    "declaration": true,
+    "jsx": "react",
+    "target": "es5",
+    "module": "commonjs",
+    "moduleResolution": "node"
+  },
+  "exclude": [
+    "build",
+    "node_modules",
+    "coverage",
+    "config",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.story.tsx"
+  ]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "*": ["/*"],
+      "components/*": ["components/*"],
+      "lib/*": ["lib/*"],
+      "pages/*": ["pages/*"],
+      "types/*": ["types/*"],
+      "configs/*": ["configs/*"]
+    },
+    "strict": false,
+    "forceConsistentCasingInFileNames": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
+}
diff --git a/frontend/tsconfig.server.json b/frontend/tsconfig.server.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "outDir": "dist",
+    "target": "es2017",
+    "isolatedModules": false,
+    "noEmit": false
+  }
+}
diff --git a/frontend/tsconfig.test.json b/frontend/tsconfig.test.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.build.json",
+  "compilerOptions": {
+    "module": "commonjs"
+  }
+}
diff --git a/frontend/tslint.json b/frontend/tslint.json
@@ -0,0 +1,82 @@
+{
+  "extends": ["tslint-react"],
+  "rules": {
+    "align": [true, "parameters", "arguments", "statements"],
+    "ban": false,
+    "class-name": true,
+    "comment-format": [true, "check-space"],
+    "curly": true,
+    "eofline": false,
+    "forin": true,
+    "indent": [true, "spaces"],
+    "interface-name": [true, "never-prefix"],
+    "jsdoc-format": true,
+    "jsx-no-lambda": false,
+    "jsx-no-multiline-js": false,
+    "jsx-wrap-multiline": false,
+    "label-position": true,
+    "max-line-length": [true, 300],
+    "member-ordering": [
+      true,
+      "public-before-private",
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-any": false,
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [false],
+    "no-consecutive-blank-lines": true,
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": true,
+    "no-eval": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": false,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "one-line": [
+      true,
+      "check-catch",
+      "check-else",
+      "check-open-brace",
+      "check-whitespace"
+    ],
+    "quotemark": [true, "single", "jsx-double"],
+    "radix": true,
+    "semicolon": [true, "always", "ignore-bound-class-methods"],
+    "switch-default": true,
+    "trailing-comma": false,
+    "triple-equals": [true, "allow-null-check"],
+    "typedef": [true, "parameter", "property-declaration"],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "variable-name": [
+      true,
+      "ban-keywords",
+      "check-format",
+      "allow-leading-underscore",
+      "allow-pascal-case"
+    ],
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-module",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ]
+  }
+}
diff --git a/frontend/types/feed.ts b/frontend/types/feed.ts
@@ -0,0 +1,8 @@
+import IUser from "types/user";
+
+export default interface IFeed {
+  id: string;
+  created_at: string;
+  body: string;
+  author: IUser;
+}
diff --git a/frontend/vendor.d.ts b/frontend/vendor.d.ts
@@ -0,0 +1,3 @@
+declare module "next-auth/client";
+declare module "next-auth";
+declare module "next-auth/providers";