Feature/initial project configuration

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

.eslintrc.json

@@ -0,0 +1,101 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "jest": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "jest",
+    "babel"
+  ],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-handler-names": 2,
+    "react/require-render-return": 2,
+    "react/no-unused-state": 2,
+    "react/prefer-stateless-function": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/jsx-key": 2,
+    "react/jsx-uses-vars": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/no-multi-comp": 2,
+    "no-unused-expressions": 0,
+    "babel/no-unused-expressions": 1,
+    "react/jsx-no-bind": [
+      2,
+      {
+        "ignoreRefs": false,
+        "allowArrowFunctions": true,
+        "allowBind": false
+      }
+    ],
+    "react/jsx-indent-props": [
+      "error",
+      2
+    ],
+    "ignoredNodes": 0,
+    "react/jsx-pascal-case": 2,
+    "react/prop-types": 2,
+    "react/jsx-indent": [
+      "error",
+      2
+    ],
+    "indent": [
+      "error",
+      2
+    ],
+    "no-undef": [
+      1
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ]
+  },
+  "globals": {
+    "React": "writable"
+  },
+  "overrides": [
+    {
+      "files": [
+        "test/*.spec.js"
+      ],
+      // Or *.test.js
+      "rules": {
+        "require-jsdoc": "off"
+      }
+    }
+  ],
+  "settings": {
+    "react": {
+      "createClass": "createReactClass",
+      "pragma": "React",
+      "version": "detect"
+    }
+  }
+}

CHANGELOG.md

@@ -0,0 +1,12 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.1.1 (2021-02-13)
+
+
+### Features
+
+* added styles, linting, commit standards configuration for the project ([905382a](https://github.com/toelapiut/g-hub/commit/905382a54607644ade204ec4105f15cc5b19c87d))
+* initial project commit ([42ea9ab](https://github.com/toelapiut/g-hub/commit/42ea9abf8b940d7c216be3bdc7e75c6ca0b512e7))
+* tested my test environment configuration by adding snapshot test ([65d06b9](https://github.com/toelapiut/g-hub/commit/65d06b9629ad067a286858104affb21b125544ae))

commitlint.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  extends: [
+    '@commitlint/config-conventional'
+  ],
+  'rules': {
+    'subject-case': [
+      2,
+      'never',
+      [
+        'start-case',
+        'pascal-case'
+      ]
+    ]
+  }
+};

enzyme.js

@@ -0,0 +1,3 @@
+const Adapter = require('enzyme-adapter-react-16');
+
+require('enzyme').configure({adapter: new Adapter()});

jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  setupFilesAfterEnv: ['./enzyme.js'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy'
+  }
+};

package.json

@@ -1,15 +1,67 @@
 {
   "name": "g-hub",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest --passWithNoTests",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "release": "standard-version",
+    "lint": "eslint src/**/*.js src/**/*.js .eslintrc.json --ext js,jsx",
+    "lint:fix": "eslint src/**/*.js src/**/*.js .eslintrc.json --fix --ext js,jsx"
   },
   "dependencies": {
+    "@jest/globals": "^26.6.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
     "next": "10.0.6",
     "react": "17.0.1",
     "react-dom": "17.0.1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@fullhuman/postcss-purgecss": "^4.0.0",
+    "@testing-library/dom": "^7.29.4",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@testing-library/react-hooks": "^3.4.2",
+    "axios": "^0.21.0",
+    "babel-core": "^6.26.3",
+    "babel-eslint": "8.0.1",
+    "babel-jest": "^26.6.3",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "check-prop-types": "^1.1.2",
+    "commitlint": "^11.0.0",
+    "eslint": "npm:eslint-nullish-coalescing",
+    "eslint-plugin-babel": "^5.3.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "husky": "^4.3.0",
+    "jest": "^26.6.3",
+    "jest-dom": "^4.0.0",
+    "lint-staged": "^10.4.2",
+    "postcss-preset-env": "^6.7.0",
+    "prop-types": "^15.7.2",
+    "react-test-renderer": "^17.0.1",
+    "standard-version": "^9.0.0",
+    "tailwindcss": "^1.9.4"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "./**/*.{js,jsx,ts,tsx}": [
+      "eslint src/**/*.js src/**/*.js",
+      "yarn test"
+    ]
   }
 }

pages/_app.js

@@ -1,7 +1,24 @@
-import '../styles/globals.css'
+import '../styles/globals.css';
+import '../styles/tailwind.css';
+import PropTypes from 'prop-types';
+import Layout from '../src/components/Layout';
 
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />
+
+function MyApp({Component, pageProps}) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
-export default MyApp
+
+MyApp.propTypes = {
+  pageProps: PropTypes.object,
+  Component: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func
+  ]),
+};
+
+export default MyApp;

pages/index.js

@@ -1,65 +1,7 @@
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
-
 export default function Home() {
   return (
-    <div className={styles.container}>
-      <Head>
-        <title>Create Next App</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.js</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h3>Documentation &rarr;</h3>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h3>Learn &rarr;</h3>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/master/examples"
-            className={styles.card}
-          >
-            <h3>Examples &rarr;</h3>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h3>Deploy &rarr;</h3>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
-        </a>
-      </footer>
+    <div>
+      <p>Hello world </p>
     </div>
-  )
-}
+  );
+}

postcss.config.js

@@ -0,0 +1,25 @@
+const purgecss = [
+  '@fullhuman/postcss-purgecss',
+  {
+    // Specify the paths to all of the template files
+    content: [
+      './pages/**/*.{js,jsx,ts,tsx}',
+      './components/**/*.{js,jsx,ts,tsx}',
+    ],
+    // This is the function used to extract class names from the templates
+    defaultExtractor: (content) => {
+      // Capture as liberally as possible, including things like `h-(screen-1.5)`
+      const broadMatches = content.match(/[^<>"'`\\s]*[^<>"'`\\s:]/g) || [];
+      // Capture classes within other delimiters like .block(class="w-1/2") in Pug
+      const innerMatches = content.match(/[^<>"'`\\s.()]*[^<>"'`\\s.():]/g) || [];
+      return broadMatches.concat(innerMatches);
+    },
+  },
+];
+module.exports = {
+  plugins: [
+    'tailwindcss',
+    process.env.NODE_ENV === 'production' ? purgecss : undefined,
+    'postcss-preset-env',
+  ],
+};

src/components/Layout/Layout.js

@@ -0,0 +1,18 @@
+import styles from './styles.module.css';
+import PropTypes from 'prop-types';
+
+
+export const Layout = ({children}) => {
+  return (
+    <div className={styles.contain}>
+      {children}
+    </div>
+  );
+};
+
+Layout.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func
+  ]),
+};

src/components/Layout/__tests__/__snapshots__/layout.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`layout Component matches the navbar snapshots 1`] = `
+<div
+  className="contain"
+/>
+`;

src/components/Layout/__tests__/layout.spec.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Layout from '../';
+import renderer from 'react-test-renderer';
+import {describe, it} from '@jest/globals';
+
+describe('layout Component', () => {
+
+  it('matches the navbar snapshots', () => {
+    const tree = renderer.create(
+      <Layout/>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/Layout/index.js

@@ -0,0 +1,4 @@
+import {Layout} from './Layout';
+
+
+export default Layout;