Replace CRA with ViteJS and improve dev setup (#119)

- Replace react-scripts with vite for better build and live reload speed
- Set up vitest for unit testing
- Updated dependencies to latest
- Setup ESLint as per vite
- Set up prettier for consistent code formatting
- Refactor for better readability and maintainability
- Fix lint issues
- Fix cypress test
- Execute ci in pull requests and add linting to ci
---------

Co-authored-by: Lucas Koehler <[email protected]>

.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/main.yml

@@ -1,14 +1,23 @@
 name: Build & Test
-on: push
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+
+permissions:
+  contents: read
 
 jobs:
   main:
     name: Main
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v4
         with:
-          node-version: '10.x'
+          node-version: 20
       - run: npm ci
+      - run: npm run lint
+      - run: npm run build
       - run: npm run cypress:ci

.gitignore

@@ -31,7 +31,6 @@ bower_components
 
 # Compiled binary addons (http://nodejs.org/api/addons.html)
 build/Release
-
 # Dependency directories
 node_modules/
 jspm_packages/

.prettierignore

@@ -0,0 +1 @@
+package-lock.json

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "tabWidth": 2,
+  "arrowParens": "avoid",
+  "jsxBracketSameLine": true,
+  "bracketSameLine": true
+}

.vscode/extensions.json

@@ -3,10 +3,7 @@
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
 
   // List of extensions which should be recommended for users of this workspace.
-  "recommendations": [
-    "esbenp.prettier-vscode",
-    "ms-vscode.vscode-typescript-tslint-plugin"
-  ],
+  "recommendations": ["esbenp.prettier-vscode"],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
 }

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-    "editor.formatOnSave": true,
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "prettier.jsxSingleQuote": true,
-    "prettier.singleQuote": true
-} 
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "prettier.jsxSingleQuote": true,
+  "prettier.singleQuote": true
+}

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      return require('./cypress/plugins/index.js')(on, config);
+    },
+  },
+});

cypress/e2e/test_form.cy.js

@@ -0,0 +1,66 @@
+/// <reference types="Cypress" />
+
+context('Form', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:3000/');
+  });
+
+  it('should change input values', () => {
+    const nameText = 'John Deer';
+    const descText = 'This is a desc test';
+    const recurrenceIntervalText = 10;
+    const dateText = '2001-03-15';
+
+    cy.get('[id="#/properties/name-input"]').clear().type(nameText);
+    cy.get('[id="#/properties/description-input"]').clear().type(descText);
+    cy.get('[id="#/properties/done-input"]').uncheck();
+    cy.get('[id="#/properties/recurrence"]').parent().click();
+    cy.get('[id="#/properties/recurrence-option-3"]').click(); // Monthly
+    cy.get('[id="#/properties/recurrence_interval-input"]')
+      .clear()
+      .type(recurrenceIntervalText);
+    cy.get('[id="#/properties/due_date-input"]').clear().type(dateText);
+    cy.get('[id="#/properties/rating"] span:last').click();
+    cy.get('[id="boundData"]')
+      .invoke('text')
+      .then(content => {
+        const data = JSON.parse(content);
+
+        expect(data.name).to.equal(nameText);
+        cy.get('[id="#/properties/name"] p').should('be.empty');
+
+        cy.get('[id="#/properties/recurrence_interval"]').should('exist');
+
+        expect(data.description).to.equal(descText);
+        expect(data.done).to.equal(false);
+        expect(data.recurrence).to.equal('Monthly');
+        expect(data.recurrence_interval).to.equal(recurrenceIntervalText);
+        expect(data.due_date).to.equal(dateText);
+        expect(data.rating).to.equal(5);
+      });
+  });
+
+  it('should show errors', () => {
+    cy.get('[id="#/properties/name-input"]').clear();
+
+    cy.get('[id="#/properties/name"] p:first-child').should('not.be.empty');
+
+    cy.get('[id="#/properties/due_date-input"]').clear().type('351');
+
+    cy.get('[id="#/properties/due_date"] p:first-child').should('not.be.empty');
+
+    cy.get('[id="#/properties/recurrence"]').parent().click();
+    cy.get('[id="#/properties/recurrence-option-0"]').click(); // Never
+
+    cy.get('[id="#/properties/recurrence_interval"]').should('not.exist');
+
+    cy.get('[id="boundData"]')
+      .invoke('text')
+      .then(content => {
+        const data = JSON.parse(content);
+
+        // expect(data.due_date).to.equal('Invalid date'); <- Mui doesn't allow setting invalid date
+        expect(data.due_date).to.equal(undefined);
+      });
+  });
+});

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JSONForms React Starter</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>