.eslintrc

@@ -2,6 +2,111 @@
   "extends": "ksv741",
   "reportUnusedDisableDirectives": true,
   "settings": {
-    "import/resolver": "webpack"
+    "react": {
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    }
+  },
+  "rules": {
+    "import/order": [
+      "error", {
+        "pathGroups": [
+          {
+            "pattern": "__spec__/**",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "apps/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "pages/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "widgets/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "features/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "entities/**",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "shared/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "distinctGroup": true,
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "object",
+          "index",
+          "type"
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+    }],
+    "import/extensions": ["error", {
+      "js": "never",
+      "jsx": "never",
+      "tsx": "never",
+      "ts": "never"
+    }],
+    "import/no-extraneous-dependencies": ["error", {
+      "devDependencies": [
+        "test/**",
+        "tests/**",
+        "spec/**",
+        "**/__tests__/**",
+        "**/__mocks__/**",
+        "**/__spec__/**",
+        "**/configs/**",
+        "test.{[j|t]sx,[j|t]sx}",
+        "test-*.{[j|t]sx,[j|t]sx}",
+        "**/*{.,_}{test,spec}.{[j|t]sx,[j|t]sx}",
+        "**/jest.config.[j|t]s",
+        "**/jest.setup.[j|t]s",
+        "**/vue.config.[j|t]s",
+        "**/webpack.config.[j|t]s",
+        "**/webpack.config.*.[j|t]s",
+        "**/rollup.config.[j|t]s",
+        "**/rollup.config.*.[j|t]s",
+        "**/gulpfile.[j|t]s",
+        "**/gulpfile.*.[j|t]s",
+        "**/Gruntfile{,.[j|t]}s",
+        "**/protractor.conf.[j|t]s",
+        "**/protractor.conf.*.[j|t]s",
+        "**/karma.conf.[j|t]s",
+        "**/.eslintrc.[j|t]s"
+      ],
+      "optionalDependencies": false
+    }],
+    "react/function-component-definition": [
+      "error", {
+      "namedComponents": "arrow-function",
+      "unnamedComponents": "arrow-function"
+    }]
   }
 }

.gitignore

@@ -26,3 +26,7 @@ yarn-error.log*
 # ide
 /.vscode
 /.idea
+
+.yarn/*
+!.yarn/releases
+!.yarn/plugins

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:20.11.1-alpine
+image: node:20.14.0-alpine
 
 stages:
   - preparing
@@ -28,7 +28,18 @@ test:
   script:
     - yarn run test:start
   only:
+    - branches
     - merge_requests
+    - tags
+
+typechecking:
+  stage: checking
+  script:
+    - yarn run typechecking
+  only:
+    - branches
+    - merge_requests
+    - tags
 
 pages:
   stage: deploy

.nvmrc

@@ -1 +1 @@
-20.11.1
+20.15.0

CHANGELOG.md

@@ -1,4 +1,32 @@
 # MoneyControll App CHANGELOG
+### 0.0.2 (2024-04-29)
+
+
+### 🛠️ Bug Fixes
+
+* fix spec files eslint ([1818a27](https://gitlab.com/money-control2/web/frontend/commit/1818a279b5b79239c98d43b5689b63365be263dd))
+
+
+### 🚀 New Features
+
+* add calendar page ([950fbee](https://gitlab.com/money-control2/web/frontend/commit/950fbee317e45a1d9d3aca50e71869e5fdbc9cd5))
+* add calendar widget ([078e2c9](https://gitlab.com/money-control2/web/frontend/commit/078e2c987fcdb3093416b9fb06d83de7dfcd88c5))
+* add customization calendar widget ([c950bc6](https://gitlab.com/money-control2/web/frontend/commit/c950bc675799d7f11d1b067eb38cae14d5236a3e))
+* add DatePicker ([422bef6](https://gitlab.com/money-control2/web/frontend/commit/422bef601f9203de8180e63a4ef556906828e2f8))
+* add helpers ([29c1bce](https://gitlab.com/money-control2/web/frontend/commit/29c1bce814866bb6f3ee408dd04d932be025a367))
+* add highlight props ([46e1cd5](https://gitlab.com/money-control2/web/frontend/commit/46e1cd5d4aa2433f3e09add7382ed2bdd8453d1d))
+* add jest user events ([c51c36c](https://gitlab.com/money-control2/web/frontend/commit/c51c36c0417ce0f49e8bf159d72c1714f86a6775))
+* add typescript [#9](https://gitlab.com/money-control2/web/frontend/issues/9) ([a603f31](https://gitlab.com/money-control2/web/frontend/commit/a603f31c1a4f2f12842a647bcd6f34bbe0274708))
+* **app:** add base scripts [#1](https://gitlab.com/money-control2/web/frontend/issues/1) ([3977ac2](https://gitlab.com/money-control2/web/frontend/commit/3977ac2adc25e008b9db0e64f58893e70176f5ff))
+* **app:** add eslint [#3](https://gitlab.com/money-control2/web/frontend/issues/3) ([c29db6f](https://gitlab.com/money-control2/web/frontend/commit/c29db6ffd178e8cb2abf4db2572c750f5853005f))
+* **app:** add eslint for jest files [#3](https://gitlab.com/money-control2/web/frontend/issues/3) ([f50c60b](https://gitlab.com/money-control2/web/frontend/commit/f50c60b6814eba28b4458de446e8fc7d8a0645b0))
+* **app:** add git hooks control [#4](https://gitlab.com/money-control2/web/frontend/issues/4) ([9f8eaf4](https://gitlab.com/money-control2/web/frontend/commit/9f8eaf424e0b03eaab30362e62ad30de910eeaba))
+* **app:** add jest testing [#2](https://gitlab.com/money-control2/web/frontend/issues/2) ([4697997](https://gitlab.com/money-control2/web/frontend/commit/4697997c1fcee67d10389a395b79de01ef205114))
+* **app:** add standard-version [#5](https://gitlab.com/money-control2/web/frontend/issues/5) ([fe57ae4](https://gitlab.com/money-control2/web/frontend/commit/fe57ae4a5e4c986923d3851e1742965e4570839c))
+* **hoc:** add withProvider HOC ([bb28d93](https://gitlab.com/money-control2/web/frontend/commit/bb28d93016d67457822b31b97ee69b733161da0d))
+* **shared:** add constants and utils ([afde44b](https://gitlab.com/money-control2/web/frontend/commit/afde44beade36a28c0e57dde7d6cac14c74fa4ff))
+* update project to typescript [#9](https://gitlab.com/money-control2/web/frontend/issues/9) ([8c5e4a0](https://gitlab.com/money-control2/web/frontend/commit/8c5e4a08bf2599a0a4c41ededec63fe2f725f8dd))
+
 ### 0.0.1 (2024-03-28)
 
 

README.md

@@ -1,6 +1,6 @@
 # Money Controll Frontend SPA
 ***
-### Application to control your income and outcome money, planning your personal budget  
+### Application path control your income and outcome money, planning your personal budget  
 
 ### Scripts
 - `start:dev` - start local application on [`https://localhost:3000`](https://localhost:3000)

__spec__/custom-expects/toHaveDataDate.ts

@@ -0,0 +1,20 @@
+import type { MatcherFunction } from 'expect';
+
+// eslint-disable-next-line func-names
+export const toHaveDataDate: MatcherFunction<[dataDate: unknown]> = function (actual, dataDate) {
+  if (!(actual instanceof HTMLElement)) {
+    throw new TypeError('These must be HTMLElement!');
+  }
+
+  const actualDataDate = actual.getAttribute('data-date');
+  const pass = this.equals(actualDataDate, dataDate);
+
+  const message = () => `${this.utils.matcherHint('toHaveDataDate', 'element')}\n\n`
+    + `Expected element to have data-date attribute:\n ${this.utils.printExpected(dataDate)}\n`
+    + `Received:\n ${this.utils.printReceived(actualDataDate)}`;
+
+  return {
+    message,
+    pass,
+  };
+};

__spec__/custom-queries/byDataDate.ts

@@ -0,0 +1,32 @@
+import { queryHelpers, buildQueries } from '@testing-library/react';
+
+import type { DataDateString } from 'shared/types/date';
+
+import type { GetErrorFunction } from '@testing-library/dom/types/query-helpers';
+import type { Matcher, MatcherOptions } from '@testing-library/react';
+
+const queryAllByDataDate = (
+  container: HTMLElement,
+  id: Matcher,
+  options?: MatcherOptions | undefined,
+) => queryHelpers.queryAllByAttribute('data-date', container, id, options);
+
+const getMultipleError: GetErrorFunction<[id: DataDateString, options?: MatcherOptions | undefined]> = (_, dataDateValue) => `Found multiple elements with the data-date attribute of: ${dataDateValue}`;
+const getMissingError: GetErrorFunction<[id: DataDateString, options?: MatcherOptions | undefined]> = (_, dataDateValue: string) => `Unable to find an element with the data-date attribute of: ${dataDateValue}`;
+
+const [
+  queryByDataDate,
+  getAllByDataDate,
+  getByDataDate,
+  findAllByDataDate,
+  findByDataDate,
+] = buildQueries(queryAllByDataDate, getMultipleError, getMissingError);
+
+export {
+  queryByDataDate,
+  queryAllByDataDate,
+  getByDataDate,
+  getAllByDataDate,
+  findAllByDataDate,
+  findByDataDate,
+};

__spec__/custon-renders.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';
+
+import { render } from './utils';
+
+export const renderWithProvider = (Component: ReactNode) => {
+  const routes = [
+    {
+      path: '/',
+      element: Component,
+    },
+  ];
+
+  const router = createMemoryRouter(routes, {
+    initialEntries: ['/'],
+    initialIndex: 0,
+  });
+
+  return render(<RouterProvider router={router} />);
+};

__spec__/helpers.ts

@@ -0,0 +1,18 @@
+import { fireEvent } from '@testing-library/react';
+
+import type { DataDateString } from 'shared/types/date';
+
+import { screen } from './utils';
+
+export const pickCellByDataDate = (dataDate: DataDateString) => {
+  const cellElem = screen.getByDataDate(dataDate);
+  fireEvent.click(cellElem);
+};
+
+export const dragAndDropCellByDataDate = (dragDataDate: DataDateString, dropDataDate: DataDateString) => {
+  const oldLastDateElem = screen.getByDataDate(dragDataDate);
+  const dropTarget = screen.getByDataDate(dropDataDate);
+
+  fireEvent.dragStart(oldLastDateElem);
+  fireEvent.drop(dropTarget);
+};

__spec__/utils.js

@@ -0,0 +1,15 @@
+import { render, queries, within } from '@testing-library/react';
+
+import * as customQueries from './custom-queries/byDataDate';
+
+const allQueries = {
+  ...queries,
+  ...customQueries,
+};
+
+const customScreen = within(document.body, allQueries);
+const customWithin = (element) => within(element, allQueries);
+const customRender = (ui, options) => render(ui, { queries: allQueries, ...options });
+
+// override render method
+export { customScreen as screen, customWithin as within, customRender as render };

configs/jest/__mocks__/fileMock.js

@@ -1 +0,0 @@
-module.exports = 'test-file-stub';

configs/jest/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+export default 'test-file-stub';

configs/jest/babel-jest.config.js

@@ -1,8 +0,0 @@
-module.exports = {
-  presets: [
-    '@babel/preset-env',
-    ['@babel/preset-react', {
-      runtime: 'automatic',
-    }],
-  ],
-};

configs/jest/global.d.ts

@@ -0,0 +1,10 @@
+declare global {
+  namespace jest {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface Matchers<R> {
+      toHaveDataDate: (dataDate: string) => R;
+    }
+  }
+}
+
+export {};

configs/jest/setupTests.js

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

configs/jest/setupTests.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+import { expect } from '@jest/globals';
+
+import { toHaveDataDate } from '../../__spec__/custom-expects/toHaveDataDate';
+
+expect.extend({
+  toHaveDataDate,
+});

jest.config.js

@@ -1,15 +0,0 @@
-module.exports = {
-  testEnvironment: 'jsdom',
-  transform: {
-    '\\.jsx?$': ['babel-jest', {
-      configFile: './configs/jest/babel-jest.config.js',
-    }],
-  },
-  setupFilesAfterEnv: ['./configs/jest/setupTests.js'],
-  modulePaths: ['src'],
-  moduleNameMapper: {
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
-      './configs/jest/__mocks__/fileMock.js',
-    '\\.(css|less|scss)$': 'identity-obj-proxy',
-  },
-};

jest.config.ts

@@ -0,0 +1,25 @@
+import type { Config } from 'jest';
+
+const config: Config = {
+  clearMocks: true,
+  testEnvironment: 'jsdom',
+  coverageDirectory: 'coverage',
+  setupFilesAfterEnv: ['./configs/jest/setupTests.ts'],
+  modulePaths: [
+    '<rootDir>src',
+    '<rootDir>',
+  ],
+  rootDir: './',
+  verbose: true,
+  preset: 'ts-jest/presets/js-with-ts',
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/configs/jest/__mocks__/fileMock.ts',
+    '\\.(css|less|scss)$': 'identity-obj-proxy',
+  },
+  transformIgnorePatterns: [
+    'node_modules/(?!react-dnd|dnd-core|@react-dnd|react-dnd-html5-backend)',
+  ],
+};
+
+export default config;

nginx.conf

@@ -0,0 +1,9 @@
+server {
+ listen 80;
+ server_name frontend;
+ location / {
+   # This would be the directory where your React app's static files are stored at
+   root /usr/share/nginx/html;
+   try_files $uri /index.html;
+ }
+}