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

Create a link for @doodle/components

• Run yarn build

• From the ./dist/library, run yarn link

• Use the link in your project by running yarn link @doodle/components

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';