Merge pull request #59 from tkrotoff/react18

Use React 18 in examples + update most npm packages when possible

Author: tkrotoff

.eslintignore

@@ -1,6 +1,4 @@
 node_modules/
 build/
 dist/
-lib/
-lib-es5/
 coverage/

.eslintrc.js

@@ -6,27 +6,22 @@ const config = {
   parserOptions: {},
   extends: [
     // /!\ Order matters: the next one overrides rules from the previous one
-    'plugin:unicorn/recommended',
     'plugin:jest/recommended',
+    'plugin:unicorn/recommended',
     'airbnb',
     // Already done by Airbnb
     //'plugin:react/recommended'
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended',
-    'prettier/@typescript-eslint',
-    'prettier/react'
+    'plugin:prettier/recommended'
   ],
   plugins: ['simple-import-sort', 'react-hooks'],
   env: {
     browser: true
   },
-  globals: {
-    // Jest Puppeteer, see https://github.com/smooth-code/jest-puppeteer/blob/v4.0.0/README.md#configure-eslint
-    page: true
-  },
+  globals: {},
 
   rules: {
-    'no-console': 'off',
+    'no-console': ['error', { allow: ['error', 'info'] }],
     'no-alert': 'off',
     'no-underscore-dangle': 'off',
     'no-plusplus': 'off',
@@ -46,10 +41,10 @@ const config = {
     'import/prefer-default-export': 'off',
     'import/extensions': 'off',
 
-    'simple-import-sort/sort': [
+    'simple-import-sort/imports': [
       'error',
       {
-        // https://github.com/lydell/eslint-plugin-simple-import-sort/blob/v5.0.2/src/sort.js#L3-L15
+        // https://github.com/lydell/eslint-plugin-simple-import-sort/blob/v7.0.0/src/imports.js#L5
         groups: [
           // Side effect imports
           ['^\\u0000'],
@@ -63,8 +58,8 @@ const config = {
           ],
 
           // Absolute imports and other imports such as Vue-style `@/foo`
-          // Anything that does not start with a dot
-          ['^[^.]'],
+          // Anything not matched in another group
+          ['^'],
 
           // Relative imports
           [
@@ -86,6 +81,7 @@ const config = {
         ]
       }
     ],
+    'simple-import-sort/exports': 'error',
 
     // https://github.com/typescript-eslint/typescript-eslint/blob/v4.1.0/packages/eslint-plugin/docs/rules/no-use-before-define.md
     'no-use-before-define': 'off',
@@ -119,21 +115,38 @@ const config = {
     // [IE does not support for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of#Browser_compatibility)
     'unicorn/no-for-loop': 'off',
     'unicorn/no-null': 'off',
+    // https://github.com/sindresorhus/eslint-plugin-unicorn/blob/v27.0.0/docs/rules/no-array-for-each.md
+    // https://github.com/github/eslint-plugin-github/blob/v4.1.1/docs/rules/array-foreach.md
+    // conflicts with
+    // https://github.com/airbnb/javascript/issues/1271
+    'unicorn/no-array-for-each': 'off',
+    // FIXME Activate when ES modules are well supported
+    'unicorn/prefer-module': 'off',
     'unicorn/prefer-query-selector': 'off',
+    'unicorn/numeric-separators-style': 'off',
+    'unicorn/no-await-expression-member': 'off',
 
     'jsx-a11y/label-has-associated-control': 'off',
 
     'react/no-unescaped-entities': 'off',
     'react/jsx-filename-extension': ['error', { extensions: ['.tsx', '.jsx'] }],
+    'react/jsx-uses-react': 'off',
+    'react/react-in-jsx-scope': 'off',
+    // FIXME https://github.com/yannickcr/eslint-plugin-react/issues/3114#issuecomment-951725512
+    'react/jsx-no-bind': 'off',
     'react/jsx-pascal-case': 'off',
     'react/jsx-props-no-spreading': 'off',
     'react/static-property-placement': 'off',
     'react/state-in-constructor': 'off',
+    'react/no-unused-class-component-methods': 'off',
+    'react/no-unstable-nested-components': 'off',
+    'react/require-default-props': 'off',
+    'react/default-props-match-prop-types': 'off',
+    'react/no-unused-prop-types': 'off',
 
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'error',
 
-    'jest/no-expect-resolves': 'error',
     'jest/expect-expect': 'off'
   },
 
@@ -154,8 +167,10 @@ const config = {
       }
     },
     {
-      files: ['*.test.tsx'],
+      files: ['*.test.ts', '*.test.tsx'],
       rules: {
+        'unicorn/consistent-function-scoping': 'off',
+
         'jsx-a11y/iframe-has-title': 'off'
       }
     }

.github/workflows/node.js.yml

@@ -1,4 +1,4 @@
-# https://github.com/actions/starter-workflows/blob/c934669ce246e6d64e54006b714b04199cbe445b/ci/node.js.yml
+# https://github.com/actions/starter-workflows/blob/692c4c52607f67dd3ee34ad0b7c26066ae85bbae/ci/node.js.yml
 
 name: Node.js CI
 
@@ -11,19 +11,18 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [16.x, 18.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js ${{matrix.node-version}}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: ${{matrix.node-version}}
-      - run: yarn install
-      - run: yarn prepublishOnly
-      - run: yarn build
-      - run: yarn lint
-      - run: yarn test:coverage
-      - run: yarn test:e2e
-        env:
-          CI: true
+          cache: 'npm'
+      - run: npm install
+      - run: npx playwright install --with-deps
+      - run: npm run build
+      - run: npm run lint
+      - run: npm run test:coverage
+      - run: npm run test:e2e

.github/workflows/npm-publish.yml

@@ -1,4 +1,4 @@
-# https://github.com/actions/starter-workflows/blob/c934669ce246e6d64e54006b714b04199cbe445b/ci/npm-publish.yml
+# https://github.com/actions/starter-workflows/blob/692c4c52607f67dd3ee34ad0b7c26066ae85bbae/ci/npm-publish.yml
 
 name: Node.js Package
 
@@ -10,28 +10,27 @@ jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
-      - run: yarn install
-      - run: yarn prepublishOnly
-      - run: yarn build
-      - run: yarn lint
-      - run: yarn test:coverage
-      - run: yarn test:e2e
+          node-version: 16
+      - run: npm install
+      - run: npm run prepublishOnly
+      - run: npm run build
+      - run: npm run lint
+      - run: npm run test:coverage
+      - run: npm run test:e2e
 
   publish-npm:
     needs: build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 12
+          node-version: 16
           registry-url: https://registry.npmjs.org/
-      - run: yarn install
-      - run: yarn prepublishOnly
-      - run: yarn lerna publish from-git --yes
+      - run: npm install
+      - run: npm run publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.gitignore

@@ -4,10 +4,10 @@ node_modules/
 # Generated files
 build/
 dist/
-lib/
-lib-es5/
 coverage/
 
-# rollup-plugin-typescript2
-# [.rpt2_cache should be in /tmp](https://github.com/ezolenko/rollup-plugin-typescript2/issues/34)
-.rpt2_cache/
+# React Native example
+examples/ReactNative/package-lock.json
+examples/ReactNative/.expo/
+examples/ReactNative/ios/
+examples/ReactNative/android/

.husky/pre-commit

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

.husky/pre-push

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

.huskyrc.js

@@ -1,16 +1,19 @@
 .git/
+.husky/
 node_modules/
 build/
 dist/
-lib/
-lib-es5/
 coverage/
 .gitignore
 .prettierignore
 .eslintignore
 .editorconfig
 .browserslistrc
 *.png
-yarn.lock
-yarn-error.log
+package-lock.json
 LICENSE
+
+# React Native example
+examples/ReactNative/.expo/
+examples/ReactNative/ios/
+examples/ReactNative/android/

.prettierignore

@@ -1,12 +1,12 @@
 // @ts-check
 
-/** @type {Partial<import('stylelint').Configuration>} */
+/** @type {Partial<import('stylelint').Config>} */
 const config = {
   extends: [
     // /!\ Order matters: the next one overrides rules from the previous one
 
-    // Includes stylelint-config-recommended-scss and stylelint-config-standard
-    'stylelint-config-twbs-bootstrap/scss',
+    // Extends stylelint-config-standard-scss which extends stylelint-config-recommended-scss
+    'stylelint-config-twbs-bootstrap',
 
     'stylelint-prettier/recommended'
   ],

.stylelintrc.js

@@ -1,3 +1,12 @@
+## v0.19.0 (2022/07/21)
+
+- Fix React 18 types (#58)
+- Use React 18 in examples
+- Update most npm packages when possible
+- Switch from Puppeteer to Playwright
+- Remove Yarn, use npm workspaces instead
+- Use Lerna only for `npm run version`
+
 ## v0.18.0 (2021/05/20)
 
 ### Breaking Changes

CHANGELOG.md

@@ -335,67 +335,6 @@ You can use HTML5 attributes like `type="email"`, `required`, [`minlength`](http
 
 In the last case you will have to manage translations yourself (see SignUp example).
 
-## How to consume the npm packages?
-
-### ESNext (currently ES2018) + ES modules
-
-Files inside [`lib/`](https://unpkg.com/react-form-with-constraints@latest/lib/) (package.json `"module": "lib/index.js"`).
-
-A recent browser or Node.js is required or you will need to transpile the react-form-with-constraints source code using Babel (or TypeScript tsc).
-
-Several advantages:
-
-- The combine use of `"sideEffects": false` with `"module": ...` generates a smaller bundle thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/)
-- You can transpile react-form-with-constraints source code with your Babel's [preset-env](https://babeljs.io/docs/en/babel-preset-env) and [Browserslist](https://github.com/browserslist/browserslist) configuration
-
-For this to work, do not exclude `node_modules` from your webpack configuration, example:
-
-```JS
-// webpack.config.js
-module: {
-  rules: [
-    {
-      test: /\.jsx?$/,
-
-      //exclude: /node_modules/,
-      // [Babel should not transpile core-js](https://github.com/zloirock/core-js/issues/514#issuecomment-476533317)
-      exclude: /\/core-js/,
-
-      loader: 'babel-loader'
-    }
-  ]
-}
-```
-
-```JS
-// babel.config.js
-module.exports = {
-  presets: [
-    [
-      '@babel/preset-env',
-      {
-        useBuiltIns: 'entry',
-        corejs: 3
-      }
-    ],
-    '@babel/preset-react'
-  ],
-  plugins: []
-};
-```
-
-### ES5 + CommonJS
-
-Classic ES5 transpilation, files inside [`lib-es5/`](https://unpkg.com/react-form-with-constraints@latest/lib-es5/) (package.json `"main": "lib-es5/index.js"`).
-No tree shaking.
-
-### UMD (Universal Module Definition) + ES5
-
-Files inside [`dist/`](https://unpkg.com/react-form-with-constraints@latest/dist/).
-Typical use is with `<script src="react-form-with-constraints.production.min.js">` inside your index.html.
-
-A good use case is [CodePen](https://codepen.io/tkrotoff/pen/BRGdqL), files are generated by [Rollup](packages/react-form-with-constraints/rollup.config.js).
-
 ## Notes
 
 - A [`type="hidden"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden#Validation), [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-disabled) input won't trigger any HTML5 form constraint validation like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required), see https://codepen.io/tkrotoff/pen/gdjVNv

README.md

@@ -4,9 +4,9 @@ import 'core-js';
 import 'regenerator-runtime/runtime';
 import 'raf/polyfill';
 
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { isEqual } from 'lodash-es';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   Async,
   FieldFeedback,
@@ -20,11 +20,13 @@ import './index.html';
 import './App.scss';
 
 function wait(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise(resolve => {
+    setTimeout(resolve, ms);
+  });
 }
 
 async function checkUsernameAvailability(value) {
-  console.log('checkUsernameAvailability');
+  console.info('checkUsernameAvailability');
   await wait(1000);
   return !['john', 'paul', 'george', 'ringo'].includes(value.toLowerCase());
 }
@@ -214,4 +216,5 @@ function App() {
   );
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+const root = createRoot(document.getElementById('app'));
+root.render(<App />);