Configure project (#2)

* Add chakra-ui
* Add build workflow
* Add prettier and audit workflow
* Add test
* Update setup-node version
* Move test folder to the right place
* Add components and test

.eslintrc.js

@@ -1,3 +1,3 @@
 module.exports = {
-  extends: "next/core-web-vitals",
+  extends: ["next/core-web-vitals", "prettier"],
 };

.github/workflows/audit.yml

@@ -0,0 +1,40 @@
+name: Audit
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  audit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v2
+        with:
+          node-version: lts/*
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v2
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install
+        run: npm install
+
+      - name: Format
+        run: npm run format:check
+
+      - name: Lint
+        run: npm run lint

.github/workflows/build.yml

@@ -0,0 +1,41 @@
+name: Build
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x, 14.x, 16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v2
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build

.github/workflows/test.yml

@@ -0,0 +1,37 @@
+name: Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js LTS
+        uses: actions/setup-node@v2
+        with:
+          node-version: lts/*
+
+      - name: Get npm cache directory
+        id: npm-cache-dir
+        run: |
+          echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v2
+        id: npm-cache # use this to check for `cache-hit` ==> if: steps.npm-cache.outputs.cache-hit != 'true'
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-
+
+      - name: Install
+        run: npm install
+
+      - name: Test
+        run: npm run test

.prettierignore

@@ -0,0 +1,2 @@
+.next
+coverage

README.md

@@ -2,7 +2,7 @@
 
 <img src="./public/logo.png" width=256 height=256 />
 
-[![License](https://img.shields.io/badge/Licence-GPLv3-blue.svg)](https://github.com/utilForever/Cubby/blob/main/LICENSE) 
+[![License](https://img.shields.io/badge/Licence-GPLv3-blue.svg)](https://github.com/utilForever/Cubby/blob/main/LICENSE)
 
 CubbyAdmin is a voxel-based MMORPG admin web page using Next.js.
 
@@ -34,9 +34,9 @@ The class is licensed under the [GNU General Public License v3.0 License](http:/
 
 Copyright &copy; 2021 Cubby Team
 
-  * [Chris Ohk](https://github.com/utilForever)
-  * [Seungoh Han](https://github.com/h5jam)
-  * [Jaeyong Sung](https://github.com/buttercrab)
-  * [Seungbin Oh](https://github.com/sboh1214)
+- [Chris Ohk](https://github.com/utilForever)
+- [Seungoh Han](https://github.com/h5jam)
+- [Jaeyong Sung](https://github.com/buttercrab)
+- [Seungbin Oh](https://github.com/sboh1214)
 
-CubbyAdmin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. CubbyServer is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+CubbyAdmin is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. CubbyServer is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

__tests__/components.test.tsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Layout from "../components/layout";
+
+describe("Components", () => {
+  it("renders Layout", () => {
+    render(<Layout>Hello</Layout>);
+  });
+});

__tests__/pages.test.tsx

@@ -0,0 +1,8 @@
+import { render } from "@testing-library/react";
+import Index from "../pages/index";
+
+describe("Pages", () => {
+  it("renders Index", () => {
+    render(<Index />);
+  });
+});

components/layout.tsx

@@ -0,0 +1,7 @@
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function Layout({ children }: Props) {
+  return <>{children}</>;
+}

jest.config.js

@@ -0,0 +1,30 @@
+module.exports = {
+  collectCoverageFrom: [
+    "**/*.{js,jsx,ts,tsx}",
+    "!**/*.d.ts",
+    "!**/node_modules/**",
+  ],
+  moduleNameMapper: {
+    /* Handle CSS imports (with CSS modules)
+    https://jestjs.io/docs/webpack#mocking-css-modules */
+    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+
+    // Handle CSS imports (without CSS modules)
+    "^.+\\.(css|sass|scss)$": "<rootDir>/__mocks__/styleMock.js",
+
+    /* Handle image imports
+    https://jestjs.io/docs/webpack#handling-static-assets */
+    "^.+\\.(jpg|jpeg|png|gif|webp|svg)$": "<rootDir>/__mocks__/fileMock.js",
+  },
+  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
+  testEnvironment: "jsdom",
+  transform: {
+    /* Use babel-jest to transpile tests with the next/babel preset
+    https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object */
+    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }],
+  },
+  transformIgnorePatterns: [
+    "/node_modules/",
+    "^.+\\.module\\.(css|sass|scss)$",
+  ],
+};

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
   reactStrictMode: true,
-}
+};