Skip to content
A collection of reusable components used by The Times
JavaScript TypeScript Objective-C Java Shell HTML Other
Branch: master
Clone or download
J. Doe (
J. Doe ( chore: Publish e54dadf [ci skip]
 - @times-components/android-app@0.16.80
 - @times-components/ios-app@0.15.101
 - @times-components/ad@2.7.22
 - @times-components/article-byline@3.1.133
 - @times-components/article-comments@0.5.73
 - @times-components/article-error@0.2.116
 - @times-components/article-extras@0.4.0
 - @times-components/article-flag@2.6.81
 - @times-components/article-image@7.3.44
 - @times-components/article-in-depth@3.13.7
 - @times-components/article-label@2.4.23
 - @times-components/article-lead-asset@1.3.48
 - @times-components/article-list@9.3.13
 - @times-components/article-magazine-comment@3.13.7
 - @times-components/article-magazine-standard@3.13.7
 - @times-components/article-main-comment@2.13.7
 - @times-components/article-main-standard@3.15.7
 - @times-components/article-paragraph@1.3.91
 - @times-components/article-skeleton@1.17.7
 - @times-components/article-summary@3.13.22
 - @times-components/article-topics@4.0.64
 - @times-components/article@7.2.164
 - @times-components/author-profile@6.0.140
 - @times-components/brightcove-video@3.2.116
 - @times-components/button@2.3.116
 - @times-components/caption@3.0.76
 - @times-components/card@6.2.39
 - @times-components/context@1.1.6
 - @times-components/date-publication@0.20.102
 - @times-components/edition-slices@0.97.1
 - @times-components/error-view@2.2.101
 - @times-components/gestures@4.1.67
 - @times-components/gradient@3.1.67
 - @times-components/icons@2.13.0
 - @times-components/image@6.4.33
 - @times-components/interactive-wrapper@0.3.33
 - @times-components/key-facts@2.0.71
 - @times-components/lazy-load@0.4.71
 - @times-components/link@3.4.53
 - @times-components/markup@3.3.114
 - @times-components/message-bar@0.2.44
 - @times-components/mocks@0.0.49
 - @times-components/pages@2.0.225
 - @times-components/pagination@3.2.112
 - @times-components/provider@1.19.9
 - @times-components/pull-quote@3.4.130
 - @times-components/related-articles@6.2.9
 - @times-components/responsive@0.4.74
 - @times-components/save-and-share-bar@0.8.0
 - @times-components/save-star-web@0.3.38
 - @times-components/section@1.5.1
 - @times-components/slice-layout@0.44.5
 - @times-components/ssr@2.9.0
 - @times-components/star-button@0.1.84
 - @times-components/sticky@0.1.23
 - @times-components/storybook@4.1.0
 - @times-components/styleguide@3.29.0
 - @times-components/topic@5.0.141
 - @times-components/tracking@2.4.76
 - @times-components/user-state@0.0.35
 - @times-components/utils@5.1.0
 - @times-components/video-label@2.3.21
 - @times-components/video@4.7.84
 - @times-components/watermark@2.6.51
 - @times-components/storybook-native@0.0.40
Latest commit 15de531 Oct 16, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: remove dextrose (#1975) May 20, 2019
.storybook Feat/extract graphql files (#2194) Aug 26, 2019
android-app chore: Publish e54dadf [ci skip] Oct 16, 2019
android feat: (REPLAT-6797) add viewport tracking for unruly ads (#2111) Aug 7, 2019
ios-app chore: Publish e54dadf [ci skip] Oct 16, 2019
ios feat: (REPLAT-6797) add viewport tracking for unruly ads (#2111) Aug 7, 2019
lib chore: upgrade react test renderer (#2292) Oct 11, 2019
packages chore: Publish e54dadf [ci skip] Oct 16, 2019
storybook-native chore: Publish e54dadf [ci skip] Oct 16, 2019
.bithoundrc bug: fix native action logger (#50) Jul 10, 2017
.buckconfig Add card component Jun 8, 2017
.editorconfig feat: add Editor Config File TAP-203 (#365) Nov 7, 2017
.eslintignore chore: react native 0.59.8 (#1931) May 14, 2019
.eslintrc.json chore: add plugin rules (#2238) Aug 29, 2019
.gitattributes Add card component Jun 8, 2017
.gitignore chore: remove dextrose (#1975) May 20, 2019
.npmrc chore: update CLI and set exact Jul 21, 2017
.nvmrc fix: ads in article list for pagination and loading states (#1028) Jun 18, 2018
.prettierignore chore: remove dextrose (#1975) May 20, 2019
.watchmanconfig Add card component Jun 8, 2017
CODEOWNERS chore: remove neha (#2289) Sep 17, 2019
LICENSE chore: updates author name Jun 9, 2017 chore: update readme (how to debug tests) (#2188) Aug 19, 2019
TimesComponents.podspec REPLAT-6654 Upgrade Web View Library within Native App (#2024) Jun 14, 2019
app.json chore: upgrade prettier to version 1.14.3 (#1419) Oct 17, 2018
babel.config.js chore: remove babel 6 polyfill and use core-js 2 (#2190) Aug 21, 2019
build.gradle feat: article flatlist (#373) Nov 24, 2017
cypress.json Feat/fixture generator (#1484) Dec 3, 2018
graphql.config.json text-layout v2 (#1843) May 1, 2019
lerna.json chore: Downgrade to react native 0.58.6 (#1967) May 17, 2019
package.json feat: ppdsc 388 newskit sharebar (#2339) Oct 16, 2019
settings.gradle [Component] Brightcove Video Player (#19) Jul 7, 2017
times-components feat: cli, first steps Jun 8, 2017
yarn.lock feat: ppdsc 388 newskit sharebar (#2339) Oct 16, 2019

The Times Component Library

Coverage Status Build Status


Home of The Times' react/react native components, using react-native-web to share across platforms

Dev Environment

We require MacOS with Node.js (version >=8.10.0 < 10> with npm v5), yarn (latest) and watchman installed. Native development requires Xcode, Android Studio, JDK 8 and pip.

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

Viewing Our Components

Go to

Getting Started

  1. Install fontforge: brew install fontforge (See Fonts section)

  2. Run yarn install

  3. Components can be seen running in a storybook:

  • web storybook
    1. yarn storybook
    2. go to http://localhost:9001
  • native storybook
    1. yarn storybook-native and leave it running
    2. yarn ios to start the iOS app
    3. To start the Android app:
      • Start a virtual device
      • Check Android SDK path is exported to $ANDROID_HOME. In Mac, android sdk is installed to ~/Library/Android/sdk by default. export ANDROID_HOME="/Users/<USERNAME>/Library/Android/sdk"
      • yarn android
      • If you get build errors, check your JDK version with javac -version, which should print javac 1.8.XXXX. Earlier or later versions may not work.
    4. go to http://localhost:7007

Native App Dev Server

In order to run development servers for native applications, start react-native dev server via:

yarn android:app or yarn ios:app

For step by step guide, see the corresponding Readme documentation for android and ios

Fonts ⚠️

In order to view the storybook on native, you'll need to fix broken fonts. This fix is done automatically when running storybook (both web and native), but requires that fontforge is installed, otherwise the fix won't be applied and you'll get the classic red error screen when trying to use a broken font.


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:

  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.

To debug our native Storybook:

  1. yarn storybook-native and leave it running
  2. yarn android:logs or yarn ios:logs (this will build storybook app and output logs) 2a. Or you could just run yarn android or yarn ios to just build the apps
  3. open the developer menu on your device (Cmd + M on Android, Cmd + D on iOS) and tap Debug JS Remotely
  4. navigate to http://localhost:8081/debugger-ui if it hasn't opened automatically
  5. open DevTools
  6. click Sources
  7. expand debuggerWorker.js => webpack:// => . => packages

Link times-components to the Render project

Follow these steps here

Testing and code coverage

Tests Covered CI
Unit tests, UI tests and Integration tests Travis Build
Visual Regression tool (Dextrose) Not automated
Functional Regression tool (Fructose) Not automated

Debugging the tests

Tests are currently using jest 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

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

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

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

    "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": "",
          "port": 9229


See the 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

You can’t perform that action at this time.