https://github.com/newsuk/times-components

A collection of reusable components used by The Times
https://github.com/newsuk/times-components

components react react-native react-native-web

Last synced: 16 days ago
JSON representation

A collection of reusable components used by The Times

• Host: GitHub
• URL: https://github.com/newsuk/times-components
• Owner: newsuk
• License: bsd-3-clause
• Created: 2017-06-02T09:41:03.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-10-25T16:08:49.000Z (19 days ago)
• Last Synced: 2024-10-26T07:21:20.148Z (18 days ago)
• Topics: components, react, react-native, react-native-web
• Language: JavaScript
• Homepage: https://components.thetimes.co.uk/
• Size: 417 MB
• Stars: 258
• Watchers: 69
• Forks: 42
• Open Issues: 78
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

README

        
# The Times Component Library

[![Coverage Status](https://coveralls.io/repos/github/newsuk/times-components/badge.svg?branch=master)](https://coveralls.io/github/newsuk/times-components?branch=master)

[![Build Status](https://app.bitrise.io/app/b82f579b5213b496#/builds)](https://app.bitrise.io/app/b82f579b5213b496#/builds)

### Purpose

Home of The Times' `react` components.

### Dev Environment

We require MacOS with [Node.js](https://nodejs.org) (for specific version please check package.json restrictions),

[yarn](https://yarnpkg.com) (latest)

You can try without these requirements, but you'd be on your own.

## Viewing Our Components

Go to http://components.thetimes.co.uk

## Getting Started

1. Run `yarn install`

2. Components can be seen running in a storybook

- storybook

  1. `yarn storybook`

  2. go to http://localhost:9001

### Schema

See [utils package](packages/utils/README.md) on how to update the schema.

## Debugging

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:

1. `yarn storybook`

2. navigate to http://localhost:9001

3. open DevTools

4. Click _Sources_

5. In the _Network_ tab under the leftmost pane, expand _top_ =>

   _storybook-preview-iframe_ => _webpack://_ => _._ => _packages_

Any of these source files can be debugged directly.

## Link times-components to the Render project

Follow these steps [here](https://github.com/newsuk/cps-content-render#integrating-with-times-components)

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.

## See your changes in Render with rnw.js files

Besides linking the Times Components and Render repos together, you can view changes made to Times Components in Render through the rnw.js files.

1. In Times Components, after you have made your changes, run `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`.

2. Running the command creates an rnw.js file in the root of the folder. Check the file to see if your changes have come through.

3. Copy the contents of the rnw.js file and paste it into the related file in Render's `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`.

4. Run render and you should see your changes.

## Debugging the tests

Tests are currently using [jest](https://jestjs.io/) to run so if you want to debug any test follow these steps:

1. (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`.

2. 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`

3. (START TESTS IN DEBUG MODE) We need to start the same command but through node while in debug mode like so:

   `node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand`

> NOTE: `--runInBand` is a `jest` flag that runs all tests serially in the current process. If we don't add this flag, only the node process that started `jest` will be debuggable .

4. (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;`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger) statements instead of breakpoints in the code and re-transpile if necessary.

5. (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:

  1. open `chrome://inspect` in chrome address bar

  2. `Open dedicated DevTools for Node` button

  3. If you've started the tests with the aforementioned command it should automatically connect, but if it doesn't go to the `Connection` tab of the pop-up window and add connection `localhost:9229` or whatever your port is

  4. The debugger should stop on the first line because of the `--inspect-brk` flag and once you press the play button (resume execution) it should stop on your `debugger;` statement

  > NOTE: 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:

```json

...

    "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

      }

  ]

```

## Contributing

See the [CONTRIBUTING.md](.github/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](https://github.com/commitizen/cz-cli)