kiworkshop · myeongjae-kim · Aug 14, 2020 · Aug 14, 2020 · Aug 14, 2020 · Aug 14, 2020
diff --git a/community-frontend/.eslintrc.js b/community-frontend/.eslintrc.js
@@ -0,0 +1,42 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2020: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 11,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+    '@typescript-eslint',
+  ],
+  rules: {
+    'react/jsx-filename-extension': [0],
+    'react/jsx-props-no-spreading': [0],
+    'react/prop-types': [0],
+    'import/extensions': [0],
+    'import/no-unresolved': [0],
+    'max-len': [2, {
+      code: 120,
+      ignoreComments: true,
+      ignoreTrailingComments: true,
+      ignoreUrls: true,
+      ignoreStrings: true,
+      ignoreTemplateLiterals: true,
+      ignoreRegExpLiterals: true,
+    }],
+    'import/prefer-default-export': [0],
+    'import/no-extraneous-dependencies': [0],
+  },
+};
diff --git a/community-frontend/app/community-admin/jest.config.js b/community-frontend/app/community-admin/jest.config.js
@@ -0,0 +1,30 @@
+// https://medium.com/@kjaer/setting-up-jest-and-enzyme-for-typescript-next-js-apps-ce383167643
+module.exports = {
+  testEnvironment: 'node',
+  preset: 'ts-jest',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
+  moduleFileExtensions: [
+    'ts',
+    'tsx',
+    'js',
+    'jsx',
+    'json',
+    'node',
+  ],
+  testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
+  snapshotSerializers: ['enzyme-to-json/serializer'],
+
+  // https://github.com/zeit/next.js/issues/8663#issue-490553899
+  globals: {
+    // we must specify a custom tsconfig for tests because we need the typescript transform
+    // to transform jsx into js rather than leaving it jsx such as the next build requires. you
+    // can see this setting in tsconfig.jest.json -> "jsx": "react"
+    'ts-jest': {
+      tsConfig: '<rootDir>/tsconfig.jest.json',
+    },
+  },
+};
diff --git a/community-frontend/app/community-admin/package.json b/community-frontend/app/community-admin/package.json
@@ -3,6 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
+    "@community/core": "0.0.1",
     "@material-ui/core": "^4.11.0",
     "clsx": "^1.1.1",
     "next": "^9.5.0",
@@ -13,6 +14,8 @@
   "scripts": {
     "dev": "next",
     "build": "next build && next export",
+    "lint": "eslint . --ext .ts,.tsx --fix && tsc --noEmit",
+    "test": "jest",
     "post-update": "echo \"codesandbox preview only, need an update\" && yarn upgrade --latest",
     "build-for-deployment": "sh scripts/build-for-deployment.sh",
     "resolve-dependencies": "sh scripts/resolve-bins.sh"

diff --git a/community-frontend/app/community-admin/pages/_app.tsx b/community-frontend/app/community-admin/pages/_app.tsx
@@ -1,23 +1,24 @@
 import React from 'react';
 import Head from 'next/head';
-import { AppProps } from 'next/app';
+import { AppProps, AppContext, AppInitialProps } from 'next/app';
 import { ThemeProvider } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
+import { NextComponentType } from 'next';
 import theme from '../src/theme';
 
-export default function MyApp(props: AppProps) {
+const MyApp: NextComponentType<AppContext, AppInitialProps, AppProps> = (props: AppProps) => {
   const { Component, pageProps } = props;
 
   React.useEffect(() => {
     // Remove the server-side injected CSS.
     const jssStyles = document.querySelector('#jss-server-side');
-    if (jssStyles) {
-      jssStyles.parentElement!.removeChild(jssStyles);
+    if (jssStyles && jssStyles.parentElement) {
+      jssStyles.parentElement.removeChild(jssStyles);
     }
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <Head>
         <title>My page</title>
         <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
@@ -28,6 +29,8 @@ export default function MyApp(props: AppProps) {
         This is admin.
         <Component {...pageProps} />
       </ThemeProvider>
-    </React.Fragment>
+    </>
   );
-}
+};
+
+export default MyApp;
diff --git a/community-frontend/app/community-admin/pages/_document.tsx b/community-frontend/app/community-admin/pages/_document.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
-import Document, { Html, Head, Main, NextScript } from 'next/document';
+import Document, {
+  Html, Head, Main, NextScript,
+} from 'next/document';
 import { ServerStyleSheets } from '@material-ui/core/styles';
 import theme from '../src/theme';
 
 export default class MyDocument extends Document {
-  render() {
+  render(): JSX.Element {
     return (
       <Html lang="en">
         <Head>
@@ -53,10 +55,9 @@ MyDocument.getInitialProps = async (ctx) => {
   const sheets = new ServerStyleSheets();
   const originalRenderPage = ctx.renderPage;
 
-  ctx.renderPage = () =>
-    originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-    });
+  ctx.renderPage = () => originalRenderPage({
+    enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+  });
 
   const initialProps = await Document.getInitialProps(ctx);
 

diff --git a/community-frontend/app/community-admin/pages/about.tsx b/community-frontend/app/community-admin/pages/about.tsx
@@ -2,21 +2,22 @@ import React from 'react';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
+import { NextPage } from '@community/core';
 import ProTip from '../src/ProTip';
 import Link from '../src/Link';
 import Copyright from '../src/Copyright';
 
-export default function About() {
-  return (
-    <Container maxWidth="sm">
-      <Box my={4}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Next.js with TypeScript example
-        </Typography>
-        <Link href="/">Go to the main page</Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}
+const About: NextPage = () => (
+  <Container maxWidth="sm">
+    <Box my={4}>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Next.js with TypeScript example
+      </Typography>
+      <Link href="/">Go to the main page</Link>
+      <ProTip />
+      <Copyright />
+    </Box>
+  </Container>
+);
+
+export default About;
diff --git a/community-frontend/app/community-admin/pages/index.tsx b/community-frontend/app/community-admin/pages/index.tsx
@@ -2,23 +2,24 @@ import React from 'react';
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
+import { NextPage } from '@community/core';
 import ProTip from '../src/ProTip';
 import Link from '../src/Link';
 import Copyright from '../src/Copyright';
 
-export default function Index() {
-  return (
-    <Container maxWidth="sm">
-      <Box my={4}>
-        <Typography variant="h4" component="h1" gutterBottom>
-          Next.js with TypeScript example
-        </Typography>
-        <Link href="/about" color="secondary">
-          Go to the about page
-        </Link>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}
+const Index: NextPage = () => (
+  <Container maxWidth="sm">
+    <Box my={4}>
+      <Typography variant="h4" component="h1" gutterBottom>
+        Next.js with TypeScript example
+      </Typography>
+      <Link href="/about" color="secondary">
+        Go to the about page
+      </Link>
+      <ProTip />
+      <Copyright />
+    </Box>
+  </Container>
+);
+
+export default Index;
diff --git a/community-frontend/app/community-admin/scripts/resolve-bins.sh b/community-frontend/app/community-admin/scripts/resolve-bins.sh
@@ -3,8 +3,7 @@
 ROOT_BIN_DIR=../../node_modules/.bin
 THIS_BIN_DIR=node_modules/.bin
 
-mkdir -p node_modules;
 mkdir -p node_modules/.bin;
 for i in $ROOT_BIN_DIR/*; do
-  ln -s ../../$ROOT_BIN_DIR/$(readlink $i) $THIS_BIN_DIR/${i##*/};
-done
+  ln -sf ../../$ROOT_BIN_DIR/$(readlink $i) $THIS_BIN_DIR/${i##*/};
+done
diff --git a/community-frontend/app/community-admin/src/Copyright.tsx b/community-frontend/app/community-admin/src/Copyright.tsx
@@ -2,15 +2,16 @@ import React from 'react';
 import Typography from '@material-ui/core/Typography';
 import MuiLink from '@material-ui/core/Link';
 
-export default function Copyright() {
-  return (
-    <Typography variant="body2" color="textSecondary" align="center">
-      {'Copyright © '}
-      <MuiLink color="inherit" href="https://material-ui.com/">
-        Your Website
-      </MuiLink>{' '}
-      {new Date().getFullYear()}
-      {'.'}
-    </Typography>
-  );
-}
+const Copyright: React.FC = () => (
+  <Typography variant="body2" color="textSecondary" align="center">
+    {'Copyright © '}
+    <MuiLink color="inherit" href="https://material-ui.com/">
+      Your Website
+    </MuiLink>
+    {' '}
+    {new Date().getFullYear()}
+    .
+  </Typography>
+);
+
+export default Copyright;
diff --git a/community-frontend/app/community-admin/src/Link.tsx b/community-frontend/app/community-admin/src/Link.tsx
@@ -1,15 +1,17 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import * as React from 'react';
+import { Link as MuiLink, LinkProps as MuiLinkProps } from '@material-ui/core';
 import clsx from 'clsx';
-import { useRouter } from 'next/router';
 import NextLink, { LinkProps as NextLinkProps } from 'next/link';
-import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
+import { useRouter } from 'next/router';
+import * as React from 'react';
 
 type NextComposedProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> &
   NextLinkProps;
 
 const NextComposed = React.forwardRef<HTMLAnchorElement, NextComposedProps>((props, ref) => {
-  const { as, href, replace, scroll, passHref, shallow, prefetch, ...other } = props;
+  const {
+    as, href, replace, scroll, passHref, shallow, prefetch, ...other
+  } = props;
 
   return (
     <NextLink

diff --git a/community-frontend/app/community-admin/src/ProTip.tsx b/community-frontend/app/community-admin/src/ProTip.tsx
@@ -1,8 +1,8 @@
+import {
+  createStyles, Link, makeStyles, SvgIcon, SvgIconProps, Typography,
+} from '@material-ui/core';
+
 import React from 'react';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import Link from '@material-ui/core/Link';
-import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
-import Typography from '@material-ui/core/Typography';
 
 function LightBulbIcon(props: SvgIconProps) {
   return (
@@ -12,26 +12,29 @@ function LightBulbIcon(props: SvgIconProps) {
   );
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      margin: theme.spacing(6, 0, 3),
-    },
-    lightBulb: {
-      verticalAlign: 'middle',
-      marginRight: theme.spacing(1),
-    },
-  }),
-);
+const useStyles = makeStyles((theme) => createStyles({
+  root: {
+    margin: theme.spacing(6, 0, 3),
+  },
+  lightBulb: {
+    verticalAlign: 'middle',
+    marginRight: theme.spacing(1),
+  },
+}));
 
-export default function ProTip() {
+const ProTip: React.FC = () => {
   const classes = useStyles();
   return (
     <Typography className={classes.root} color="textSecondary">
       <LightBulbIcon className={classes.lightBulb} />
-      Pro tip: See more{' '}
-      <Link href="https://material-ui.com/getting-started/templates/">templates</Link> on the
+      Pro tip: See more
+      {' '}
+      <Link href="https://material-ui.com/getting-started/templates/">templates</Link>
+      {' '}
+      on the
       Material-UI documentation.
     </Typography>
   );
-}
+};
+
+export default ProTip;
diff --git a/community-frontend/app/community-admin/tsconfig.jest.json b/community-frontend/app/community-admin/tsconfig.jest.json
@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react"
+  }
+}
diff --git a/community-frontend/app/community-admin/tsconfig.json b/community-frontend/app/community-admin/tsconfig.json
@@ -5,9 +5,9 @@
     "jsx": "preserve",
     "lib": [
       "dom",
-      "es2017"
+      "es2019"
     ],
-    "module": "esnext",
+    "module": "commonjs",
     "moduleResolution": "node",
     "noEmit": true,
     "noUnusedLocals": true,
@@ -17,7 +17,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "esnext",
+    "target": "es2019",
     "forceConsistentCasingInFileNames": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,