chore: configure development environment

.eslintignore

@@ -3,4 +3,8 @@ build
 coverage
 public
 .docz
-global
+global
+.prettierignore
+.eslintrc.js
+tsconfig.json
+.prettierrc

.eslintrc.js

@@ -14,10 +14,23 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     'testing-library/no-render-in-setup': 'off',
+    semi: ['error', 'always'],
+    indent: ['error', 2],
+    'linebreak-style': ['error', 'windows'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    eqeqeq: 'error',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+        bracketSpacing: true,
+      },
+    ],
   },
   env: {
     browser: true,
     amd: true,
     node: true,
   },
-}
+};

.prettierrc

@@ -1,7 +1,6 @@
 {
   "arrowParens": "avoid",
-  "bracketSpacing": false,
-  "endOfLine": "lf",
+  "bracketSpacing": true,
   "htmlWhitespaceSensitivity": "css",
   "insertPragma": false,
   "jsxBracketSameLine": false,
@@ -10,9 +9,10 @@
   "proseWrap": "always",
   "quoteProps": "as-needed",
   "requirePragma": false,
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "useTabs": false
+  "useTabs": false,
+  "endOfLine": "auto"
 }

cypress.config.ts

@@ -1,6 +1,6 @@
-import {defineConfig} from 'cypress'
-import plugins from './cypress/support/plugins'
-import tasks from './cypress/support/tasks'
+import { defineConfig } from 'cypress';
+import plugins from './cypress/support/plugins';
+import tasks from './cypress/support/tasks';
 
 export default defineConfig({
   // @ts-expect-error - experimentalSingleTabRunMode is not in the type definition
@@ -13,8 +13,8 @@ export default defineConfig({
     specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
     baseUrl: 'http://localhost:3000',
     setupNodeEvents(on, config) {
-      tasks(on)
-      return plugins(on, config)
+      tasks(on);
+      return plugins(on, config);
     },
   },
   component: {
@@ -24,4 +24,4 @@ export default defineConfig({
       bundler: 'vite',
     },
   },
-})
+});

cypress.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import {MountOptions, MountReturn} from 'cypress/react'
+import { MountOptions, MountReturn } from 'cypress/react';
 
-export {}
+export {};
 declare global {
   namespace Cypress {
     interface Chainable {
@@ -10,7 +10,7 @@ declare global {
        * cy.getByCy('search-toggle') // where the selector is [data-cy="search-toggle"]
        * ```
        */
-      getByCy(qaSelector: string, args?: any): Chainable<JQuery<HTMLElement>>
+      getByCy(qaSelector: string, args?: any): Chainable<JQuery<HTMLElement>>;
 
       /** Yields elements with data-cy attribute that partially matches a specified selector.
        * ```
@@ -20,7 +20,7 @@ declare global {
       getByCyLike(
         qaSelector: string,
         args?: any,
-      ): Chainable<JQuery<HTMLElement>>
+      ): Chainable<JQuery<HTMLElement>>;
 
       /** Yields the element that partially matches the css class
        * ```
@@ -30,7 +30,7 @@ declare global {
       getByClassLike(
         qaSelector: string,
         args?: any,
-      ): Chainable<JQuery<HTMLElement>>
+      ): Chainable<JQuery<HTMLElement>>;
 
       /** Mounts a React node
        * @param component React Node to mount
@@ -39,7 +39,7 @@ declare global {
       mount(
         component: React.ReactNode,
         options?: MountOptions,
-      ): Cypress.Chainable<MountReturn>
+      ): Cypress.Chainable<MountReturn>;
     }
   }
 }

cypress/.eslintrc.js

@@ -10,4 +10,4 @@ module.exports = {
     '@typescript-eslint/no-var-requires': 'off',
   },
   env: {'cypress/globals': true},
-}
+};

cypress/e2e/spec.cy.ts

@@ -1,7 +1 @@
-describe('e2e sanity', () => {
-  it('passes sanity', () => {
-    cy.visit('/')
-    cy.getByCy('count').contains('count is 0').dblclick().contains('count is 2')
-    cy.task('log', 'e2e sanity passed')
-  })
-})
+describe('e2e', () => {});

cypress/support/component-index.html

@@ -8,7 +8,7 @@
     <script>
       if (window.parent !== window) {
         window['__REACT_DEVTOOLS_GLOBAL_HOOK__'] =
-          window.parent['__REACT_DEVTOOLS_GLOBAL_HOOK__']
+          window.parent['__REACT_DEVTOOLS_GLOBAL_HOOK__'];
       }
     </script>
   </head>

jest.config.ts

@@ -8,4 +8,4 @@ export default {
     '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
   },
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
-}
+};

jest.setup.ts

@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom/extend-expect';
 
-import {configure} from '@testing-library/react'
+import { configure } from '@testing-library/react';
 
-configure({testIdAttribute: 'data-cy'})
+configure({ testIdAttribute: 'data-cy' });

package.json

@@ -12,6 +12,7 @@
     "lint": "eslint . --cache-location node_modules/.cache/eslint",
     "typecheck": "tsc --noEmit",
     "validate": "npm-run-all --parallel format lint typecheck build",
+    "validate:ci": "npm-run-all --parallel format lint typecheck",
     "cy:open": "cypress open",
     "cy:open-e2e": "server-test 3000 'cypress open --e2e --browser chrome'",
     "cy:run-e2e": "server-test 3000 'cypress run --e2e --browser chrome'",

src/App.tsx

@@ -1,31 +1,3 @@
-import {useState} from 'react'
-import './App.css'
-
 export default function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src="/vite.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src="/react.svg" className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button data-cy="count" onClick={() => setCount(count => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </div>
-  )
+  return <div className="App">it works!</div>;
 }

src/main.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import './index.css'
-import App from './App'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-)
+);
 
 /* istanbul ignore file */

tsconfig.json

@@ -1,6 +1,16 @@
 {
   "compilerOptions": {
     "baseUrl": "./src",
+    "paths": {
+      "@components/*": ["components/*"],
+      "@pages/*": ["pages/*"],
+      "@routes/*": ["routes/*"],
+      "@utils/*": ["utils/*"],
+      "@hooks/*": ["hooks/*"],
+      "@types/*": ["types/*"],
+      "@services/*": ["services/*"],
+      "@assets/*": ["assets/*"]
+    },
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "types": ["cypress", "node", "@testing-library/cypress"],

vite.config.ts

@@ -1,11 +1,24 @@
-import {defineConfig} from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   server: {
     port: 3000,
     host: true,
   },
+  resolve: {
+    alias: {
+      '@': '/src',
+      '@components': '/src/components',
+      '@pages': '/src/pages',
+      '@routes': '/src/routes',
+      '@utils': '/src/utils',
+      '@hooks': '/src/hooks',
+      '@assets': '/src/assets',
+      '@types': '/src/types',
+      '@services': '/src/services',
+    },
+  },
   plugins: [react()],
-})
+});