tablecheck / tablecheck-react-system

TableCheck Inc. react settings and scripts

TableCheck Frontend System

For Documentation please see https://tablecheck.github.io/frontend

Development setup

Prerequisites

• Install nvm

Installation

To setup your development environment please run these commands in order. We develop using storybook as our main development environment.

nvm use
npm ci
npm start

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Simeon Cheeseman 📖 🚇 ⚠️ 💻 💡

Alex ⚠️

tablecheck-ci 📖

Akash Gupta 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

tablecheck-react-system's Issues

Bug with jest formatter

See comment thread in https://gitlab.com/tablecheck/frontend/tablekit/-/merge_requests/352#note_526609838 for issue and where it needs to be fixed.

Add license checker Webpack plugin

Add https://github.com/microsoft/license-checker-webpack-plugin to the razzle webpack plugins outputting the results at the same place as the bundleAnalysisReport.html

We should have this so checking for license usage is bundled automatically.

Improve test DX

Add jest-watch-typeahead to the standard jest setup in scripts for better development experience and ease of use.

Update max-mixed-css to show the counted number of lines of css/jsx

The error message for our max-mixed-css rule is a little lacking in information.

This file has more than 20 css statements and more than 20 of JSX function code  @tablecheck/max-mixed-css

We want to change this to show the number of css/jsx statements that we counted like below.

This file has 21/20 css statements and 215/20 of JSX function code  @tablecheck/max-mixed-css

Razzle Build outputs sourcemaps, but not the comment

The output of razzle build doesn't seem to output the //# sourceMappingURL=client.ed0c8671.js.map comment at the end of the file.

This prevents us from using sourcemap uploads like sentry or replay.io

update storybook to 6.4.10

related to tablecheck/tablekit#82

Make the lerna lib build run in parallel to improve speed

Referring to this particular part of the build lib process: https://github.com/tablecheck/tablecheck-react-system/blob/bee6ff77f71c1b3bea9150191502f36240da3b1c/packages/scripts/scripts/build-lib.js#L38-L44

2 things that would need to be fixed;

• references needs to be a dependency graph, so we don't try build one package before it's dependencies are all built.
• The logTaskEnd and logTaskStart would need to handle this properly or the log output would end up getting out of order and messed up.

"eslint-disable"/"eslint-enable" pairs are not correctly auto-fixed

Prerequisites:

• file contains /* eslint-disable max-lines */ and /* eslint-enable max-lines */ pair
• file line quantity does not exceed limit

Steps:

• run tablecheck-scripts lint --fix
• /* eslint-disable max-lines */ is removed and /* eslint-enable max-lines */ has been left

Result:

• check fails with error: error 'max-lines' rule is re-enabled but it has not been disabled eslint-comments/no-unused-enable

Add release process and code of conduct

Add how releases work to the README and add a CODE_OF_CONDUCT document.

Add Replay.io Webpack Plugin

Add the replay.io webpack plugin to the razzle configurations as outlined here.

We should make the plugin run based on the presence of both the RECORD_REPLAY_API_KEY and REPLAY_BUILD_ID environment variables.

Use the REPLAY_BUILD_ID environment variable as the group parameter.

Documentation is missing

Need to update documentation to respect the latest tooling and NX.

Injection of config in ES6 causes errors in some cases.

In the following error we can see that .map(k => CONFIG.thumborURLS[k]) gets transformed to .map(k => {...}.thumberURLS[k]) which is not valid ES6.

The fix should be to change this line (link) to CONFIG: `(${JSON.stringify(config)})`

[1] ✔ Server: Compiled successfully in 8.32s
[1] /Users/joanmira/Dev/booking-form/build/server.js:263392
[1] const thumborURLs = Object.keys({"release":"development","deployTarget":"development","appName":"TableCheck","isChina":false,"ssrURL":"SSR URL NOT SET","apiURL":"https://staging-qa.tablecheck.com/v2","cdnURL":"https://cdn0.tablecheck.com/common","tablecheckURL":"http://localhost:3000/","marketingSiteURL":"https://staging-qa.tablecheck.com/","serverErrorURL":"https://www.tablecheck.com/en/500","geoipURL":"https://staging-qa.tablecheck.com/v2","googleMapsKey":"AIzaSyDC1H5spRRygoMPBf68Rzjpa4AP30GjKE8","oAuth":{"google":"697279787877-0oj654et5c7irlh2a2tm52d775is2ja3.apps.googleusercontent.com","facebook":"154048611457451"},"paymentGatewayLibs":{"bluesnap":"https://gateway.bluesnap.com/js/cse/v1.0.3/bluesnap.js","gmo":"https://stg.static.mul-pay.jp/ext/js/token.js","stripe":"https://js.stripe.com/v2/","omise":"https://cdn2.omise.co/omise.js.gz"},"sentry":{"frontend":"https://[email protected]/5792973","server":"https://[email protected]/5792956"},"posthog":{"host":"https://booking.post.tablecheck.com/","key":"phc_Nj1H9vgvvjRarU4xifXa6YOYTCiny2nngp5l6wNph7T"},"isDevelopment":true,"thumborURLS":["https://thumbor.staging.ap-northeast-1.aws.tablecheck.net/"],"assetsPath":"static/booking","features":{"payments":true,"sentry":false,"posthog":false},"hiddenLocales":["ar"]}.thumborURLS).map(k => {"release":"development","deployTarget":"development","appName":"TableCheck","isChina":false,"ssrURL":"SSR URL NOT SET","apiURL":"https://staging-qa.tablecheck.com/v2","cdnURL":"https://cdn0.tablecheck.com/common","tablecheckURL":"http://localhost:3000/","marketingSiteURL":"https://staging-qa.tablecheck.com/","serverErrorURL":"https://www.tablecheck.com/en/500","geoipURL":"https://staging-qa.tablecheck.com/v2","googleMapsKey":"AIzaSyDC1H5spRRygoMPBf68Rzjpa4AP30GjKE8","oAuth":{"google":"697279787877-0oj654et5c7irlh2a2tm52d775is2ja3.apps.googleusercontent.com","facebook":"154048611457451"},"paymentGatewayLibs":{"bluesnap":"https://gateway.bluesnap.com/js/cse/v1.0.3/bluesnap.js","gmo":"https://stg.static.mul-pay.jp/ext/js/token.js","stripe":"https://js.stripe.com/v2/","omise":"https://cdn2.omise.co/omise.js.gz"},"sentry":{"frontend":"https://[email protected]/5792973","server":"https://[email protected]/5792956"},"posthog":{"host":"https://booking.post.tablecheck.com/","key":"phc_Nj1H9vgvvjRarU4xifXa6YOYTCiny2nngp5l6wNph7T"},"isDevelopment":true,"thumborURLS":["https://thumbor.staging.ap-northeast-1.aws.tablecheck.net/"],"assetsPath":"static/booking","features":{"payments":true,"sentry":false,"posthog":false},"hiddenLocales":["ar"]}.thumborURLS[k]);
[1]                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
[1] 
[1] SyntaxError: Unexpected token ':'
[1]     at Object.compileFunction (node:vm:352:18)
[1]     at wrapSafe (node:internal/modules/cjs/loader:1025:15)
[1]     at Module._compile (node:internal/modules/cjs/loader:1059:27)
[1]     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1124:10)
[1]     at Module.load (node:internal/modules/cjs/loader:975:32)
[1]     at Function.Module._load (node:internal/modules/cjs/loader:816:12)
[1]     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:79:12)
[1]     at node:internal/main/run_main_module:17:47
[1] sswp> !!! Script exited with code 1

Eslint not correctly reformat fragments

Running tablecheck-scripts lint --fix command converts <Fragment></Fragment> into <React.Fragment></Fragment>.

Disable max-lines for certain files

As discussed internally, we want to disable the max-lines rule for the following named files;

• types.ts
• *.types.ts
• machine.{ts,tsx,js,jsx,mjs,cjs}
• *.machine.{ts,tsx,js,jsx,mjs,cjs}

Upgrade to Webpack 5

Once razzle has upgraded to support webpack 5, we should too.

Upgrade issues/packages:

• jaredpalmer/razzle#1662
• arthanzel/node-config-webpack#6
• css-loader v6 requires Webpack 5
• escape-string-regexp and is-root needs ESM config files which seems to be Webpack 5 only (See Here)

Installation failing on Windows

npm ERR! code 1
npm ERR! path D:\Documents\VS_Code_Projects\open_source\tablekit\node_modules\@tablecheck\scripts
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c ./bin/postinstall.js
npm ERR! '.' is not recognized as an internal or external command,
npm ERR! operable program or batch file.

The script is present in @tablecheck/scripts npm package. I think the way we're executing the script is not compatible with Windows OS.

---

Device info

OS: Windows 10
npm version: v16.4.2

Update init script

• Use "@commitlint/cli": "12.1.4" to devDependencies
• Add "husky": "7.0.0"to devDependencies
  • No more "husky:precommit": "react-scripts precommit" - need to change to adding the husky commands in the folder after npx husky install
• src/definitions/window.d.ts
    * 6:13  warning  An empty interface is equivalent to {}  @typescript-eslint/no-empty-interface
• .nvmrc should be v16.4.2 (latest node.js if possible?)
• Remove fsevents from devDependencies - note required in react-system, not in project
• Add public/robots.txt with User-agent: * Disallow: /