A collection of reusable components used by The Times
BSD-3-CLAUSE License
Home of The Times' react
components.
We require MacOS with Node.js (for specific version please check package.json restrictions), yarn (latest)
You can try without these requirements, but you'd be on your own.
Go to http://components.thetimes.co.uk
Run yarn install
Components can be seen running in a storybook
yarn storybook
See utils package on how to update the schema.
The components in this project can be debugged through your browser's developer tools. These steps assume the use of Chrome DevTools.
To debug our web Storybook:
yarn storybook
Any of these source files can be debugged directly.
Follow these steps here
You will also see the option to do a canary release in the pipeline, which will publish a test version of your changes that you can import in render.
Besides linking the Times Components and Render repos together, you can view changes made to Times Components in Render through the rnw.js files.
yarn bundle
in the package in which you were working. If you were working in the ts-components
package you will need to run yarn build
first and then yarn bundle
.node_modules
. For example, if you bundled the rnw.js file in the article-skeleton
package in Times Components, you would paste the contents into node_modules/@times-components/article-skeleton/rnw.js
.Tests are currently using jest to run so if you want to debug any test follow these steps:
(FIND YOUR TEST COMMAND) jest --config="./packages/provider/__tests__/jest.config.js"
. Depending on what directory we start the tests from, the --config
directory may differ. My currenct directory is at the repo root: times-components
.
See your test command from the package.json
for the speciffic package you want to check out.
NOTE: If you don't have jest installed globally, you can use it locally from the
node_modules/.bin/jest
node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand
NOTE:
--runInBand
is ajest
flag that runs all tests serially in the current process. If we don't add this flag, only the node process that startedjest
will be debuggable .
(ADD DEBUG STATEMENTS) Normaly we would add breakpoints, but when remote debugging that's not always possible, because the files we need to put the breakpoints on aren't loaded yet by jest
. So in order to make the debugger stop where we want it to, we need to add debugger;
statements instead of breakpoints in the code and re-transpile if necessary.
(ATTACH TO WEB SOCKET) Once we've started the tests in debug mode, we need to attach to it:
(RECOMMENDED) use chrome remote debug for node:
chrome://inspect
in chrome address barOpen dedicated DevTools for Node
buttonConnection
tab of the pop-up window and add connection localhost:9229
or whatever your port is--inspect-brk
flag and once you press the play button (resume execution) it should stop on your debugger;
statementNOTE: once it stops you may see all of your code is bundled up in one line. There's an easy fix for that: at the bottom of the debug window near the
Line: 1 Column: 1
labels you should see a{}
button that will prettify your code and you will still be able to debug properly.
(Use VSCode) Config should look close to this:
...
"configurations": [
{
"localRoot": "${workspaceFolder}/packages/provider", //change this depending on what test you're debugging
"remoteRoot": "${workspaceFolder}/packages/provider", //change this depending on what test you're debugging
"type": "node",
"request": "attach",
"name": "Attach to Server on 9229",
"address": "127.0.0.1",
"port": 9229
}
]
See the CONTRIBUTING.md for an extensive breakdown of the project.
yarn commit
will commit files (same as git commit
), and will aid the
contributor with adding a suitable commit message inline with
conventional changelog