times-components

by newsuk

A collection of reusable components used by The Times

226 Stars 33 Forks Last release: Not found BSD 3-Clause "New" or "Revised" License 3.6K Commits 28.8K Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

The Times Component Library

Coverage Status Build Status

Purpose

Home of The Times'

react
/
react native
components, using react-native-web to share across platforms

Dev Environment

We require MacOS with Node.js (for specific version please check package.json restrictions), yarn (latest)

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 http://components.thetimes.co.uk

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. cd ios && pod install && cd -
    2. yarn storybook-native
      and leave it running
    3. yarn ios
      to start the iOS app
    4. To start the Android app:
      • Start a virtual device
      • Check Android SDK path is exported to \$ANDROIDHOME. In Mac, android sdk is installed to ~/Library/Android/sdk by default. `export ANDROIDHOME="/Users//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.
    5. 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.

Schema

See utils package 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.

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

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:
    • open
      chrome://inspect
      in chrome address bar
    • Open dedicated DevTools for Node
      button
    • 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
    • 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 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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.