2023 version

.eslintrc.cjs

@@ -0,0 +1,78 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'semi': ['error', 'never'],
+    'prefer-const': [
+      'warn',
+      {
+        'destructuring': 'any',
+        'ignoreReadBeforeAssign': false
+      }
+    ],
+    'getter-return': ['error'],
+    'no-async-promise-executor': ['warn'],
+    'no-cond-assign': ['warn', 'except-parens'],
+    'no-dupe-keys': ['error'],
+    'no-empty': ['warn'],
+    'no-ex-assign': ['error'],
+    'no-extra-boolean-cast': [
+      'error',
+      {
+        'enforceForLogicalOperands': true
+      }
+    ],
+    'no-extra-parens': ['warn', 'all'],
+    'no-func-assign': ['error'],
+    'no-import-assign': ['error'],
+    'no-inner-declarations': ['error', 'both'],
+    'no-obj-calls': ['error'],
+    'no-promise-executor-return': ['error'],
+    'no-sparse-arrays': ['error'],
+    'no-template-curly-in-string': ['error'],
+    'no-unreachable': ['error'],
+    'no-unreachable-loop': ['error'],
+    'no-unsafe-optional-chaining': ['error'],
+    'require-atomic-updates': ['error'],
+    'use-isnan': ['error'],
+    'block-scoped-var': ['error'],
+    'consistent-return': ['error'],
+    'default-param-last': ['warn'],
+    'no-alert': ['error'],
+    'no-caller': ['error'],
+    'no-constructor-return': ['error'],
+    'no-global-assign': ['error'],
+    'no-lone-blocks': ['warn'],
+    'no-multi-spaces': ['warn'],
+    'no-new': ['warn'],
+    'no-param-reassign': ['error'],
+    'no-proto': ['warn'],
+    'no-redeclare': ['error'],
+    'no-return-assign': ['error'],
+    'no-return-await': ['warn'],
+    'no-self-assign': ['error'],
+    'no-sequences': ['warn'],
+    'no-useless-catch': ['warn'],
+    'no-useless-return': ['error'],
+    'no-void': ['error'],
+    'no-with': ['error'],
+    'no-undef': ['off'],
+    'react/display-name': ['off'],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/build.yml

@@ -9,13 +9,13 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js 15.x
-      uses: actions/setup-node@v1
+    - uses: actions/checkout@v3
+    - name: Use Node.js 20.x
+      uses: actions/setup-node@v3
       with:
-        node-version: 15.x
+        node-version: 20.x
     - name: Cache node modules
-      uses: actions/cache@v1
+      uses: actions/cache@v3
       with:
         path: ~/.npm
         key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

.gitignore

@@ -22,5 +22,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-# VSC - Git Lens 
+# VSC - Git Lens
 .history

.nvmrc

@@ -1 +1 @@
-18.4.0
+20.4.0

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
+    "editor.formatOnSave": true, 
+    "files.autoSave": "afterDelay" 
+}

README.md

@@ -135,20 +135,20 @@ test('inicialmente aparece habilitado el formulario', () => {
   expect(screen.getByTestId('input-nombre')).toBeInTheDocument()
 })
 
+test('al presionar el botón para deshabilitar el formulario queda readonly', async () => {
+  render(<App />)
+  await fireEvent.click(screen.getByRole('switch'))
+  expect(screen.queryByTestId('input-nombre')).toBeNull()
+  expect(screen.getByText(/pepita/i)).toBeInTheDocument()
+})
+
 test('si está habilitado podemos cambiar el valor de una referencia', async () => {
   render(<App />)
   const inputNombre = screen.getByTestId('input-nombre')
   expect(inputNombre.value).toBe('Pepita')
   await userEvent.type(inputNombre, '{backspace}{backspace}{backspace}{backspace}{backspace}{backspace}restaurant')
   expect(screen.getByTestId('input-nombre').value).toBe('restaurant')
 })
-
-test('al presionar el botón para deshabilitar el formulario queda readonly', () => {
-  render(<App />)
-  fireEvent.click(screen.getByTestId('enable'))
-  expect(screen.queryByTestId('input-nombre')).toBeNull()
-  expect(screen.getByText(/pepita/i)).toBeInTheDocument()
-})
 ```
 
 ## Material relacionado

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Inputs dinámicos React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>