JavaScript Objective-C Java Shell HTML Ruby Python
Switch branches/tags
@times-components/webpack-configurator@1.0.1 @times-components/webpack-configurator@1.0.0 @times-components/webpack-configurator@0.1.1 @times-components/webpack-configurator@0.1.0 @times-components/watermark@1.0.13 @times-components/watermark@1.0.12 @times-components/watermark@1.0.11 @times-components/watermark@1.0.10 @times-components/watermark@1.0.9 @times-components/watermark@1.0.8 @times-components/watermark@1.0.7 @times-components/watermark@1.0.6 @times-components/watermark@1.0.5 @times-components/watermark@1.0.4 @times-components/watermark@1.0.3 @times-components/watermark@1.0.2 @times-components/watermark@1.0.1 @times-components/watermark@1.0.0 @times-components/watermark@0.8.0 @times-components/watermark@0.7.9 @times-components/watermark@0.7.8 @times-components/watermark@0.7.7 @times-components/watermark@0.7.6 @times-components/watermark@0.7.5 @times-components/watermark@0.7.4 @times-components/watermark@0.7.3 @times-components/watermark@0.7.2 @times-components/watermark@0.7.0 @times-components/watermark@0.6.2 @times-components/watermark@0.6.1 @times-components/watermark@0.6.0 @times-components/watermark@0.5.14 @times-components/watermark@0.5.13 @times-components/watermark@0.5.12 @times-components/watermark@0.5.11 @times-components/watermark@0.5.10 @times-components/watermark@0.5.9 @times-components/watermark@0.5.8 @times-components/watermark@0.5.7 @times-components/watermark@0.5.6 @times-components/watermark@0.5.5 @times-components/watermark@0.5.4 @times-components/watermark@0.5.3 @times-components/watermark@0.5.2 @times-components/watermark@0.5.1 @times-components/watermark@0.5.0 @times-components/watermark@0.4.27 @times-components/watermark@0.4.26 @times-components/watermark@0.4.25 @times-components/watermark@0.4.24 @times-components/watermark@0.4.23 @times-components/watermark@0.4.22 @times-components/watermark@0.4.21 @times-components/watermark@0.4.20 @times-components/watermark@0.4.19 @times-components/watermark@0.4.18 @times-components/watermark@0.4.17 @times-components/watermark@0.4.16 @times-components/watermark@0.4.15 @times-components/watermark@0.4.14 @times-components/watermark@0.4.13 @times-components/watermark@0.4.12 @times-components/watermark@0.4.11 @times-components/watermark@0.4.10 @times-components/watermark@0.4.9 @times-components/watermark@0.4.8 @times-components/watermark@0.4.7 @times-components/watermark@0.4.6 @times-components/watermark@0.4.5 @times-components/watermark@0.4.4 @times-components/watermark@0.4.3 @times-components/watermark@0.4.2 @times-components/watermark@0.4.1 @times-components/watermark@0.4.0 @times-components/watermark@0.3.11 @times-components/watermark@0.3.10 @times-components/watermark@0.3.9 @times-components/watermark@0.3.8 @times-components/watermark@0.3.7 @times-components/watermark@0.3.6 @times-components/watermark@0.3.5 @times-components/watermark@0.3.4 @times-components/watermark@0.3.3 @times-components/watermark@0.3.2 @times-components/watermark@0.3.1 @times-components/watermark@0.3.0 @times-components/watermark@0.2.17 @times-components/watermark@0.2.16 @times-components/watermark@0.2.15 @times-components/watermark@0.2.14 @times-components/watermark@0.2.13 @times-components/watermark@0.2.12 @times-components/watermark@0.2.11 @times-components/watermark@0.2.10 @times-components/watermark@0.2.9 @times-components/watermark@0.2.8 @times-components/watermark@0.2.7 @times-components/watermark@0.2.6 @times-components/watermark@0.2.5 @times-components/watermark@0.2.4
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
.expo feat: add expo (#860) Apr 17, 2018
.github Chore: Add groupings to storybook stories (#631) Feb 15, 2018
.storybook.native feat: replace react-native CLI with Haul (#901) Apr 27, 2018
.storybook fix: missing font to fix storybook fonts in IE (#1032) Jun 18, 2018
android-app chore: Publish 61e7ac4 [ci skip] Jul 12, 2018
android Disable delta bundling on android for haul (#961) May 23, 2018
dextrose chore: bump fructose (#957) May 23, 2018
fructose refactor: move Xnative into repo (#1082) Jul 10, 2018
ios-app chore: Publish 61e7ac4 [ci skip] Jul 12, 2018
ios chore: amend ios build scheme to run in dev (#1002) Jun 11, 2018
lib test: improve video snapshots (#1107) Jul 12, 2018
packages refactor: test utils hash helper (#1110) Jul 13, 2018
.babelrc chore: update babel-presets, plugins and peerdeps (#828) Apr 10, 2018
.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 refactor: move Xnative into repo (#1082) Jul 10, 2018
.eslintrc.json refactor: rolls out eslint config for all test environments (#530) Jan 15, 2018
.gitattributes Add card component Jun 8, 2017
.gitignore feat: make rnw bundles (#958) May 29, 2018
.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 refactor: move Xnative into repo (#1082) Jul 10, 2018
.snyk feat: add expo (#860) Apr 17, 2018
.travis.yml chore: bump versions (#718) Mar 12, 2018
.watchmanconfig Add card component Jun 8, 2017
LICENSE chore: updates author name Jun 9, 2017
README.md refactor: move Xnative into repo (#1082) Jul 10, 2018
TimesReactIOS.podspec refactor: move Xnative into repo (#1082) Jul 10, 2018
app.json chore: updated expo sdk in app json and node module version in packag… Jun 18, 2018
bitrise.yml chore: bump versions (#718) Mar 12, 2018
build.gradle feat: article flatlist (#373) Nov 24, 2017
graphql.config.json feat: add graphql integration (#205) Sep 8, 2017
index.js feat: add expo (#860) Apr 17, 2018
lerna.json refactor: move Xnative into repo (#1082) Jul 10, 2018
package.json refactor: move Xnative into repo (#1082) Jul 10, 2018
settings.gradle [Component] Brightcove Video Player (#19) Jul 7, 2017
times-components feat: cli, first steps Jun 8, 2017
uploadExpoQRCode.js Feat: expo qr codes (#937) May 16, 2018
yarn.lock fix: video native (#1111) Jul 13, 2018

README.md

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 (version >=8 with npm v5), yarn (latest) and watchman installed. Native development requires Xcode, Android Studio and JDK 8.

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

Viewing Our Components

If you use Expo you are able to scan the QR code below

This has been made possible using Fructose

Getting Started

  1. Run yarn to install dependencies
  2. Install fontforge: brew install fontforge (See Fonts section)
  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 haul dev server via:

yarn android:app or yarn ios:app

Haul

We use Haul in lieu of the standard react-native CLI so that we can generate native Storybook bundles using Webpack, which we configure to honour our monorepo packages' respective dev entry points; this allows one to update a package's source code and preview the changes without having to manually re-transpile. Haul also automatically generates debuggable source maps.

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 or yarn ios
  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

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

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