Initial commit

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": ["@emotion/babel-plugin"]
+}

.dockerignore

@@ -0,0 +1,24 @@
+
+/node_modules/
+/.next/
+/out/
+/build/
+/dist/
+
+/.git/
+/.github/
+/.gitignore
+
+/.idea/
+/.vscode/
+
+.DS_Store
+.env*
+
+debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+Dockerfile
+

.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_ENDPOINT=https://www.reddit.com/

.eslintignore

@@ -0,0 +1,2 @@
+src/generated.tsx
+.next

.eslintrc.js

@@ -0,0 +1,116 @@
+module.exports = {
+  extends: [
+    "standard",
+    "standard-react",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:switch-case/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  plugins: ["switch-case"],
+  parser: "@typescript-eslint/parser",
+  rules: {
+    "newline-per-chained-call": ["error", { ignoreChainWithDepth: 3 }],
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-uses-vars": ["error"],
+    "prettier/prettier": ["error", { endOfLine: "auto" }],
+    "react/prop-types": 0,
+    "react/jsx-curly-newline": 0,
+    "no-param-reassign": ["error", { props: true }],
+    "switch-case/newline-between-switch-case": [
+      "error",
+      "always",
+      { fallthrough: "never" },
+    ],
+    "padding-line-between-statements": [
+      "error",
+      { blankLine: "always", prev: "*", next: "return" },
+    ],
+    "no-unreachable": "error",
+    "prefer-object-spread": 0,
+    "one-var": ["error", "never"],
+    "prefer-destructuring": ["error", { object: true, array: true }],
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "generator-star-spacing": ["error", { before: false, after: true }],
+    "func-style": ["error", "declaration", { allowArrowFunctions: true }],
+    "no-nested-ternary": "error",
+    "react/no-array-index-key": "error",
+    "no-use-before-define": 0,
+    curly: ["error", "all"],
+    "arrow-body-style": ["error", "as-needed"],
+    "no-useless-constructor": "off",
+    "@typescript-eslint/no-useless-constructor": "error",
+    "@typescript-eslint/no-unused-vars": ["error", { varsIgnorePattern: "^_" }],
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "import/newline-after-import": ["error", { count: 1 }],
+    "import/no-relative-parent-imports": "error",
+    "import/order": [
+      "error",
+      {
+        alphabetize: {
+          order: "asc",
+        },
+        groups: [
+          ["builtin", "external"],
+          "internal",
+          "parent",
+          ["sibling", "index"],
+        ],
+        "newlines-between": "always",
+      },
+    ],
+    "max-len": [
+      "error",
+      {
+        code: 80,
+        tabWidth: 2,
+        comments: 80,
+        ignoreUrls: true,
+        ignoreTemplateLiterals: true,
+        ignoreRegExpLiterals: true,
+        ignorePattern: "^import\\s.+\\sfrom\\s.+;$",
+      },
+    ],
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "max-depth": ["error", 5],
+    complexity: ["error", 8],
+    "max-statements": ["error", 14],
+    "max-params": ["error", 2],
+    "lines-between-class-members": [
+      "error",
+      "always",
+      { exceptAfterSingleLine: true },
+    ],
+    "no-trailing-spaces": "error",
+    semi: ["error", "always"],
+    quotes: ["error", "double"],
+    "comma-dangle": ["error", "always-multiline"],
+    "space-before-function-paren": [
+      "error",
+      { anonymous: "always", named: "never", asyncArrow: "always" },
+    ],
+    "array-bracket-newline": ["error", "consistent"],
+    "no-else-return": ["error", { allowElseIf: false }],
+    "import/no-cycle": [2, { maxDepth: 2, ignoreExternal: true }],
+    "import/no-self-import": "error",
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "ExportDefaultDeclaration",
+        message: "Prefer named exports",
+      },
+    ],
+    "react/jsx-handler-names": [
+      2,
+      {
+        eventHandlerPrefix: "handle",
+        eventHandlerPropPrefix: "on",
+        checkLocalVariables: true,
+        checkInlineFunction: true,
+      },
+    ],
+  },
+};

.github/workflows/ci.yml

@@ -0,0 +1,25 @@
+name: CI
+on: [push]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    container: node:15
+
+    steps:
+    - uses: actions/checkout@v1
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile
+
+    - name: Check translations
+      run: yarn validate-messages
+
+    - name: Typecheck
+      run: yarn tsc
+
+    - name: Lint
+      run: yarn lint
+
+    - name: Test
+      run: yarn test

.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+.env
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+node_modules

.nvmrc

@@ -0,0 +1 @@
+15

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+}

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "eslint.format.enable": true,
+  "eslint.validate": [
+    "typescript",
+    "typescriptreact"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,122 @@
+# Next.JS Boilerplate
+
+Next.js boilerplate with React 17, emotion, react-query and typescript
+
+## PLEASE READ / INITIAL SETUP
+
+#### ENSURE YOU HAVE THE FOLLOWING
+
+- Node 15
+- Typescript ^4.1.2 (Project has this dependency) for React 17
+- Use Typescript of this project (bottom right and change typescript version to the one in this project)
+- Read section `Developing project` below
+
+## Developing project
+
+1. Populate `.env` file with values found in `.env.example`
+2. `yarn`
+3. `yarn dev`
+
+## Adding react-query hooks
+
+```
+└─CarPage
+  ├── CarPage.tsx
+  └── carQueries.ts
+```
+
+1. Create request function in `carQueries.ts`
+```typescript
+import { api } from "~/api";
+
+export enum CarInMemoryKey {
+  CAR = "car",
+}
+
+type Car = {
+  title: strig;
+  id: number;
+};
+
+type CarResult = {
+  cars: Car[];
+};
+
+export const getCar = (opts: { carId: string }) => async () => {
+  const { data } = await api.get<CarResult>(`/cars/${opts.carId}`);
+
+  return data;
+};
+
+```
+
+2. Create a hook in your component in `CarPage.tsx`
+```typescript
+import { useQuery } from "react-query";
+
+const CarPage: FC = () => {
+  const { isLoading, data } = useQuery(
+    // `carId` is a dynamic parameter
+    [CarInMemoryKey.CAR, carId],
+    getCar({ carId }),
+  );
+
+  return ...
+}
+```
+
+- `[SubredditKey.SUBREDDIT, subreddit]` is cache key. 
+  Field can take numbers, string and **arrays** with dynamic values.
+- Read more at https://react-query.tanstack.com/docs/api#querycache
+
+
+## Adding new translations for messages
+
+```tsx
+const messages = defineMessages({
+  example: {
+    id: "example",
+    defaultMessage: "Example"
+  }
+})
+
+const Example = () => (
+  <div>
+    <FormattedMessage {...messages.example} />
+  </div>
+);
+```
+
+2. `yarn extract-messages`
+
+
+## Adding new language for translation
+
+- Add a `.json` file in `/src/translations/[language].json` E.g. `en.json`
+
+- Add Locale to `/src/@types/locale.ts`
+
+
+## Project structure
+
+```
+└─src
+  ├── @types
+        Global styles
+  ├── assets
+        Contains images and svgs
+  ├── atoms
+        Base bulding blocks
+  ├── molecules
+        Bulding blocks for sites
+  ├── organisms
+        Site specific sets
+  ├── pages
+        Site structure
+  ├── pagesWithContext
+        Pages with `react-query` and other related components
+  ├── providers
+        App global contexts
+  └── translations
+        Contains translations for languages
+```

jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  roots: ["<rootDir>"],
+  preset: "ts-jest",
+  setupFilesAfterEnv: ["<rootDir>/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"],
+
+  globals: {
+    "ts-jest": {
+      tsconfig: "<rootDir>/tsconfig.jest.json",
+    },
+  },
+};

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />