🚨 Add eslint and stylelint and format

frontend/.eslintignore

@@ -0,0 +1 @@
+src/types.ts

frontend/.eslintrc.js

@@ -0,0 +1,53 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: "module",
+  },
+  extends: [
+    "plugin:prettier/recommended",
+    "plugin:react/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  rules: {
+    "no-console": "off",
+    "prefer-destructuring": "off",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        devDependencies: ["**/*.test.js", "**/*.spec.js", "**/__tests__/**"],
+      },
+    ],
+    "import/prefer-default-export": "off",
+    "import/order": [
+      "error",
+      {
+        groups: ["builtin", "external", "internal", ["parent", "sibling", "index"]],
+        "newlines-between": "always",
+        alphabetize: { order: "asc" },
+      },
+    ],
+    "react-hooks/exhaustive-deps": "error",
+    "react-hooks/rules-of-hooks": "error",
+    "react/button-has-type": "error",
+    "react/jsx-filename-extension": ["warn", { extensions: [".js", ".jsx", ".ts", ".tsx"] }],
+    "react/jsx-uses-react": "off",
+    "react/prefer-stateless-function": "warn",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/sort-comp": "off",
+  },
+  plugins: ["prettier", "react", "react-hooks"],
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+};

frontend/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "printWidth": 120
+}

frontend/package.json

@@ -3,18 +3,22 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
     "build": "tsc && vite build",
+    "dev": "vite",
+    "format:js": "eslint --fix src",
+    "format:styles": "stylelint --fix src",
     "generate": "graphql-codegen",
+    "lint:js": "eslint src",
+    "lint:styles": "stylelint src",
     "preview": "vite preview",
     "start": "vite",
     "test": "jest"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
+    "graphql": "^15.7.2",
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "graphql": "^15.7.2"
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "^2.2.2",
@@ -22,8 +26,24 @@
     "@graphql-codegen/typescript-react-apollo": "^3.2.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "@vitejs/plugin-react": "^1.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.2",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^27.3.1",
+    "prettier": "^2.4.1",
+    "stylelint": "^13.13.1",
+    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended": "^5.0.0",
+    "stylelint-order": "^4.1.0",
+    "stylelint-prettier": "^1.2.0",
     "typescript": "^4.3.2",
     "vite": "^2.6.4"
   }

frontend/src/App.module.css

@@ -1,7 +1,4 @@
-.App {
-}
-
 .logo {
   width: 100px;
   pointer-events: none;
-}
+}

frontend/src/App.tsx

@@ -1,20 +1,18 @@
-import {ApolloProvider} from "@apollo/client";
-import React from 'react'
+import { ApolloProvider } from "@apollo/client";
+import React from "react";
 
-import logo from './assets/brick.svg';
-import styles from './App.module.css'
-import {Register} from "./features/Register";
+import styles from "./App.module.css";
+import logo from "./assets/brick.svg";
 import client from "./client";
+import { Register } from "./features/Register";
 
-function App() {
-  return (
-      <ApolloProvider client={client}>
+const App: React.FC = () => (
+  <ApolloProvider client={client}>
     <div className={styles.app}>
-        <img src={logo} className={styles.logo} alt="logo" />
-        <Register />
+      <img src={logo} className={styles.logo} alt="logo" />
+      <Register />
     </div>
-      </ApolloProvider>
-  )
-}
+  </ApolloProvider>
+);
 
-export default App
+export default App;

frontend/src/client.ts

@@ -1,8 +1,8 @@
-import {ApolloClient,InMemoryCache} from "@apollo/client";
+import { ApolloClient, InMemoryCache } from "@apollo/client";
 
 const client = new ApolloClient({
-  uri: 'http://localhost:8000/graphql/',  // FIXME: env
-  cache: new InMemoryCache()
+  uri: "http://localhost:8000/graphql/", // FIXME: env
+  cache: new InMemoryCache(),
 });
 
-export default client;
+export default client;

frontend/src/features/Register.tsx

@@ -1,17 +1,21 @@
 import React from "react";
 
-import {Product, useAllProductsQuery} from '../types';
+import { Product, useAllProductsQuery } from "../types";
 
 export const Register: React.FC = () => {
-  const { data, error, loading } = useAllProductsQuery({variables:{active: true}});
-  if(error) {
-    console.log('🔥', error)
+  const { data, error, loading } = useAllProductsQuery({ variables: { active: true } });
+  if (error) {
+    console.log("🔥", error);
     return null;
   }
-  if(loading) {
-    return <div>...</div>
+  if (loading) {
+    return <div>...</div>;
   }
-  return (<div>{data?.allProducts.map((product: Product) => {
-    return <div key={product.id}>{product.name}</div>
-  })} </div>)
-};
+  return (
+    <div>
+      {data?.allProducts.map((product: Product) => {
+        return <div key={product.id}>{product.name}</div>;
+      })}{" "}
+    </div>
+  );
+};

frontend/src/main.tsx

@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
+import React from "react";
+import ReactDOM from "react-dom";
+
+import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
-)
+  document.getElementById("root")
+);

frontend/src/types.ts

@@ -1,10 +1,10 @@
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
+import { gql } from "@apollo/client";
+import * as Apollo from "@apollo/client";
 export type Maybe<T> = T | null;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
 export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
-const defaultOptions =  {}
+const defaultOptions = {};
 /** All built-in and custom scalars, mapped to their actual values */
 export type Scalars = {
   ID: string;
@@ -15,46 +15,46 @@ export type Scalars = {
 };
 
 export type Product = {
-  __typename?: 'Product';
-  id: Scalars['ID'];
-  name: Scalars['String'];
-  salePriceExt: Scalars['Float'];
-  salePriceInt: Scalars['Float'];
+  __typename?: "Product";
+  id: Scalars["ID"];
+  name: Scalars["String"];
+  salePriceExt: Scalars["Float"];
+  salePriceInt: Scalars["Float"];
 };
 
 export type ProductFilter = {
-  active?: Maybe<Scalars['Boolean']>;
-  id?: Maybe<Scalars['ID']>;
+  active?: Maybe<Scalars["Boolean"]>;
+  id?: Maybe<Scalars["ID"]>;
 };
 
 export type Query = {
-  __typename?: 'Query';
+  __typename?: "Query";
   allProducts: Array<Product>;
 };
 
-
 export type QueryAllProductsArgs = {
   filters?: Maybe<ProductFilter>;
 };
 
 export type AllProductsQueryVariables = Exact<{
-  active: Scalars['Boolean'];
+  active: Scalars["Boolean"];
 }>;
 
-
-export type AllProductsQuery = { __typename?: 'Query', allProducts: Array<{ __typename?: 'Product', id: string, name: string, salePriceExt: number, salePriceInt: number }> };
-
+export type AllProductsQuery = {
+  __typename?: "Query";
+  allProducts: Array<{ __typename?: "Product"; id: string; name: string; salePriceExt: number; salePriceInt: number }>;
+};
 
 export const AllProductsDocument = gql`
-    query allProducts($active: Boolean!) {
-  allProducts(filters: {active: $active}) {
-    id
-    name
-    salePriceExt
-    salePriceInt
+  query allProducts($active: Boolean!) {
+    allProducts(filters: { active: $active }) {
+      id
+      name
+      salePriceExt
+      salePriceInt
+    }
   }
-}
-    `;
+`;
 
 /**
  * __useAllProductsQuery__
@@ -73,13 +73,15 @@ export const AllProductsDocument = gql`
  * });
  */
 export function useAllProductsQuery(baseOptions: Apollo.QueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-      }
-export function useAllProductsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
-        }
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+}
+export function useAllProductsLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<AllProductsQuery, AllProductsQueryVariables>
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<AllProductsQuery, AllProductsQueryVariables>(AllProductsDocument, options);
+}
 export type AllProductsQueryHookResult = ReturnType<typeof useAllProductsQuery>;
 export type AllProductsLazyQueryHookResult = ReturnType<typeof useAllProductsLazyQuery>;
-export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;
+export type AllProductsQueryResult = Apollo.QueryResult<AllProductsQuery, AllProductsQueryVariables>;

frontend/src/typings.d.ts

@@ -1,5 +1,5 @@
 declare module "*.svg" {
-  const content: any;
+  const content: unknown;
   export default content;
 }
-declare module "*.module.css";
+declare module "*.module.css";

frontend/stylelint.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ["stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-idiomatic-order"],
+  plugins: ["stylelint-order"],
+  rules: {
+    // Useful?
+    "no-descending-specificity": null,
+  },
+  ignoreFiles: ["**/*.md", "**/*.svg", "**/*.jpg", "**/*.graphql"],
+};