The Storybook

Usage no npm install needed!

<script type="module">
  import bbcDigitalPaperEditReactComponents from 'https://cdn.skypack.dev/@bbc/digital-paper-edit-react-components';


Digital Paper Edit - React Components Catalogue

The Storybook

---> Work in progress <--

! What is published in the Storybook may be different to what is being actively used in Digital-Paper-Edit-Client, as the components are currently being migrated. !

This repository uses storybook to gather the components of the React front end. You can read about the "why" in this ADR.

See here for the overall project architecture.


git clone git@github.com:bbc/digital-paper-edit-react-components.git
cd digital-paper-edit-react-components

Optional step to setup nvm to use node version 10, otherwise just use node version 10

nvm use || nvm install

in root of project

npm install

Usage - development

npm run start

Server API is listening on http://localhost:6006/

  • TODO: available on npm

System Architecture

Development env

Node version is set in node version manager .nvmrc


  • TODO

Demo & storybook

Build - storybook

To build the storybook as a static site

npm run build:storybook

Publish storybook & demo to github pages

This github repository uses github pages to host the storybook and the demo of the component. Make sure to commit and push any changes to MASTER before deploying to github pages.

npm run deploy:ghpages

Alternatively, if you simply want to build the demo locally in the build folder then just

npm run build:storybook

you can then run this command to serve the static site locally

npm run build:storybook:serve


Test coverage using jest, to run tests

npm run test

During development you can use

npm run test:watch

Travis CI

  • TODO


  • TODO


See CONTRIBUTING.md guidelines and CODE_OF_CONDUCT.md guidelines.



Legal Disclaimer

Despite using React, the BBC is not promoting any Facebook products or other commercial interest.