Expense App

.eslintrc.js

@@ -0,0 +1,68 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true
+  },
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+    'plugin:jsx-a11y/recommended'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    project: './tsconfig.json',
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: ['react', 'react-hooks', '@typescript-eslint', 'jsx-a11y'],
+  rules: {
+    'react/jsx-filename-extension': [
+      'error',
+      {
+        extensions: ['.tsx']
+      }
+    ],
+    'react/prop-types': ['off', {}],
+    'react/react-in-jsx-scope': 'off',
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
+    'no-console': [
+      'error',
+      {
+        allow: ['warn', 'error']
+      }
+    ],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'spaced-comment': ['error', 'always'],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['**/*.test.ts', '**/*.test.tsx', '**/*.stories.tsx'],
+        peerDependencies: true
+      }
+    ],
+    'import/no-named-as-default': 0,
+    'import/extensions': [
+      'warn',
+      'ignorePackages',
+      {
+        js: 'never',
+        ts: 'never',
+        jsx: 'never',
+        tsx: 'never'
+      }
+    ]
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};

.github/workflows/deploy.yml

@@ -0,0 +1,33 @@
+# Workflow name
+name: Deploy Application
+
+# Controls when the action will run.
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# List of jobs
+jobs:
+  job1:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - name: Install Dependenciess
+        run: npm install
+      - name: Run Build
+        run: |
+          npm run build
+      - name: deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build

.gitignore

@@ -0,0 +1,15 @@
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# dev
+dist
+
+# production
+build
+storybook-static
+
+# misc
+.env

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run typecheck && npm run lint-staged

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm test

.jest/resolver.js

@@ -0,0 +1,22 @@
+module.exports = (path, options) => {
+  // Call the defaultResolver, so we leverage its cache, error handling, etc.
+  return options.defaultResolver(path, {
+    ...options,
+    // Use packageFilter to process parsed `package.json` before
+    // the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+    packageFilter: pkg => {
+      // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+      // but @hookform/resolvers only offers an ESM browser export and not a CommonJS one. Jest does not yet
+      // support ESM modules natively, so this causes a Jest error related to trying to parse
+      // "export" syntax.
+      //
+      // This workaround prevents Jest from considering @hookform/resolvers module-based exports at all;
+      // it falls back to CommonJS+node "main" property.
+      if (pkg.name === '@hookform/resolvers' || pkg.name === 'uuid') {
+        delete pkg['exports'];
+        delete pkg['module'];
+      }
+      return pkg;
+    }
+  });
+};

.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "src/**/*.{ts,tsx}": [
+    "prettier --write",
+    "eslint --fix"
+  ]
+}

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "semi": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "trailingComma": "none",
+  "useTabs": false,
+  "quoteProps": "as-needed"
+}

jest.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  collectCoverage: true,
+  silent: true,
+  coverageDirectory: 'coverage',
+  testPathIgnorePatterns: ['<rootDir>/dist'],
+  setupFilesAfterEnv: ['<rootDir>/jestImports.ts'],
+  modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  coverageProvider: 'v8',
+  moduleNameMapper: {
+    '^.+\\.(css|less|scss)$': 'babel-jest'
+  },
+  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
+  coveragePathIgnorePatterns: [
+    '<rootDir>/node_modules',
+    '<rootDir>/src/store',
+    '<rootDir>/src/types',
+    '<rootDir>/src/constants.ts',
+    '<rootDir>/src/index.ts',
+    '<rootDir>/src/App.tsx',
+    '<rootDir>/src/data.ts'
+  ],
+  // https://github.com/react-hook-form/resolvers/issues/396
+  resolver: '<rootDir>/.jest/resolver.js'
+};

jestImports.ts

@@ -0,0 +1,4 @@
+import '@testing-library/jest-dom';
+import { enableFetchMocks } from 'jest-fetch-mock';
+
+enableFetchMocks();