Skip to content

Commit e99d3bf

Browse files
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]>
1 parent dbbd4d9 commit e99d3bf

27 files changed

+5027
-20368
lines changed

.eslintrc.cjs

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:@typescript-eslint/recommended',
7+
'plugin:react-hooks/recommended',
8+
],
9+
ignorePatterns: ['dist', '.eslintrc.cjs'],
10+
parser: '@typescript-eslint/parser',
11+
plugins: ['react-refresh'],
12+
rules: {
13+
'react-refresh/only-export-components': [
14+
'warn',
15+
{ allowConstantExport: true },
16+
],
17+
},
18+
}

.github/workflows/main.yml

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,23 @@
11
name: Build & Test
2-
on: push
2+
on:
3+
push:
4+
branches:
5+
- master
6+
pull_request:
7+
8+
permissions:
9+
contents: read
310

411
jobs:
512
main:
613
name: Main
714
runs-on: ubuntu-latest
815
steps:
916
- uses: actions/checkout@master
10-
- uses: actions/setup-node@v1
17+
- uses: actions/setup-node@v4
1118
with:
12-
node-version: '10.x'
19+
node-version: 20
1320
- run: npm ci
21+
- run: npm run lint
22+
- run: npm run build
1423
- run: npm run cypress:ci

.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ bower_components
3131

3232
# Compiled binary addons (http://nodejs.org/api/addons.html)
3333
build/Release
34-
3534
# Dependency directories
3635
node_modules/
3736
jspm_packages/

.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
package-lock.json

.prettierrc

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"singleQuote": true,
3+
"tabWidth": 2,
4+
"arrowParens": "avoid",
5+
"jsxBracketSameLine": true,
6+
"bracketSameLine": true
7+
}

.vscode/extensions.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
44

55
// List of extensions which should be recommended for users of this workspace.
6-
"recommendations": [
7-
"esbenp.prettier-vscode",
8-
"ms-vscode.vscode-typescript-tslint-plugin"
9-
],
6+
"recommendations": ["esbenp.prettier-vscode"],
107
// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
118
"unwantedRecommendations": []
129
}

.vscode/settings.json

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"editor.formatOnSave": true,
3-
"editor.defaultFormatter": "esbenp.prettier-vscode",
4-
"prettier.jsxSingleQuote": true,
5-
"prettier.singleQuote": true
6-
}
2+
"editor.formatOnSave": true,
3+
"editor.defaultFormatter": "esbenp.prettier-vscode",
4+
"prettier.jsxSingleQuote": true,
5+
"prettier.singleQuote": true
6+
}

cypress.config.ts

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

cypress.json

-1
This file was deleted.

cypress/e2e/test_form.cy.js

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/// <reference types="Cypress" />
2+
3+
context('Form', () => {
4+
beforeEach(() => {
5+
cy.visit('http://localhost:3000/');
6+
});
7+
8+
it('should change input values', () => {
9+
const nameText = 'John Deer';
10+
const descText = 'This is a desc test';
11+
const recurrenceIntervalText = 10;
12+
const dateText = '2001-03-15';
13+
14+
cy.get('[id="#/properties/name-input"]').clear().type(nameText);
15+
cy.get('[id="#/properties/description-input"]').clear().type(descText);
16+
cy.get('[id="#/properties/done-input"]').uncheck();
17+
cy.get('[id="#/properties/recurrence"]').parent().click();
18+
cy.get('[id="#/properties/recurrence-option-3"]').click(); // Monthly
19+
cy.get('[id="#/properties/recurrence_interval-input"]')
20+
.clear()
21+
.type(recurrenceIntervalText);
22+
cy.get('[id="#/properties/due_date-input"]').clear().type(dateText);
23+
cy.get('[id="#/properties/rating"] span:last').click();
24+
cy.get('[id="boundData"]')
25+
.invoke('text')
26+
.then(content => {
27+
const data = JSON.parse(content);
28+
29+
expect(data.name).to.equal(nameText);
30+
cy.get('[id="#/properties/name"] p').should('be.empty');
31+
32+
cy.get('[id="#/properties/recurrence_interval"]').should('exist');
33+
34+
expect(data.description).to.equal(descText);
35+
expect(data.done).to.equal(false);
36+
expect(data.recurrence).to.equal('Monthly');
37+
expect(data.recurrence_interval).to.equal(recurrenceIntervalText);
38+
expect(data.due_date).to.equal(dateText);
39+
expect(data.rating).to.equal(5);
40+
});
41+
});
42+
43+
it('should show errors', () => {
44+
cy.get('[id="#/properties/name-input"]').clear();
45+
46+
cy.get('[id="#/properties/name"] p:first-child').should('not.be.empty');
47+
48+
cy.get('[id="#/properties/due_date-input"]').clear().type('351');
49+
50+
cy.get('[id="#/properties/due_date"] p:first-child').should('not.be.empty');
51+
52+
cy.get('[id="#/properties/recurrence"]').parent().click();
53+
cy.get('[id="#/properties/recurrence-option-0"]').click(); // Never
54+
55+
cy.get('[id="#/properties/recurrence_interval"]').should('not.exist');
56+
57+
cy.get('[id="boundData"]')
58+
.invoke('text')
59+
.then(content => {
60+
const data = JSON.parse(content);
61+
62+
// expect(data.due_date).to.equal('Invalid date'); <- Mui doesn't allow setting invalid date
63+
expect(data.due_date).to.equal(undefined);
64+
});
65+
});
66+
});

cypress/integration/test_form.spec.js

-60
This file was deleted.
File renamed without changes.

index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>JSONForms React Starter</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)