Doodle Web Components

https://design-system.doodle-test.com/

React Components, styleguide, component library

Install

echo @doodle:registry=https://npm-proxy.fury.io/tmf/ >> .npmrc
yarn add --save --exact @doodle/components

Contribute

You will need Node 8 to start this application

Install the dependencies

yarn

Start the styleguide app

yarn start

Development

Unfortunately, lib-components is not easily linkable with yarn link. Instead, you can use yalc.

1. Run yarn build
2. From ./dist/library run yalc publish
3. In the project where you want to use it, run yalc add @doodle/components
4. To update the "linked" version, run yalc update in the project using lib-components

See also this short slidedeck for more info.

Alternatively, you can use yarn add:

1. Run yarn build
2. In the project where you want to use it, run yarn add file:<path/to/lib-components/dist/library>
3. To get the latest version of lib-components in your project, re-run the yarn add file:... command above. This is required because yarn add copies (instead of links) the built files to the node_modules folder of the consuming project.

Test

Run the unit tests

yarn test

Publishing new version

• make changes to the code
• create a PR
• merge PR to master branch
• it will automatically deploy your changes to staging (https://design-system.staging.doodle-test.com/)
• you can check if everyting went fine here: https://builder.internal.doodle-test.com/job/stack/job/web-components/job/master/
• create a tag in github and name it with the new version number
• creating a tag (publishing a release) will automatically deploy your changes to preprod and update package version in Gemfury.

Deploying to prod

• In Jenkins, go to the Tags tab on lib-components
• Select the release you would like to deploy to prod
• Then, go to Build with parameters, select the correct target environment from the list (i.e production) and click on the Build button in the same page

Notes

Versioning

Keep the version in the package.json file to 0.0.0. We keep track of the version number using tags.

File location

All javascript files must be inside the components folder. When the library is built for production, the components folder is exported in the base path. This means that javascript files outside of the components folder would be unreachable in the production build.

Unit tests in frontends that use components from lib-components (since 3.14.0)

Some components in this library rely on babel-polyfill. This might cause your unit tests to fail with the following error:

ReferenceError: regeneratorRuntime is not defined

To prevent this, add the following to your jest setup file:

import 'babel-polyfill';

Tracking components

Starting from lib-components release 5.0.0, components that support tracking must be used in coordination with lib-tracking version 1.x or above, which should already be setup in the consuming app.

Most tracked components, like the Footer, will need to implement only the declarative form of lib-tracking, i.e. they are distributed with tracking data attributes which encode the tracking intent. That's the preferred way to make a component tracking-aware if you are adding one or modifying an existing to have track support.

However in cases where the component has click handlers that perform a redirect which needs to be tracked, like in Navigation poll menu items, we should provide the component with a trackingClient prop, with a TrackingClientShape proptype validation. Then that prop will have to be informed by the consuming app, by providing its initialized instance of the lib-tracking client. This allows the component's click handlers to call, for instance, await this.props.trackingClient.track({ trackingIntent }), which will avoid race conditions and ensure tracking is complete before redirecting. The advantage of this dependency injection technique is that we leave the responsibility of depending and initializing lib-tracking to the consuming app, while keeping lib-components only weakly coupled.