The Wikibase Design System and home of WMDE-supported component implementations.
This project uses lerna to orchestrate multiple packages.
The following examples use docker and docker-compose to ease creating a level playing field for development but they are not essential to this project.
docker-compose run --rm --user=$(id -u):$(id -g) node npm installdocker-compose run --rm --user=$(id -u):$(id -g) node npm run testTo run browser tests locally make sure storybook-vue is up and running.
docker-compose -f docker-compose.yml -f docker-compose.browsertests.yml up browsertestsNote: If you were not already running the main docker-compose services your tests may fail their first run as things are still being built.
Navigate to vue-components subdirectory and run it with your storybook URL specified:
STORYBOOK_URL=localhost:6005 npm run e2eThe cross browser tests for the vue-components package run on Saucelabs. To see the test results on Saucelabs you need an account. If you don't have one, please contact your manager.
The cross browser tests run in CI against the vue storybook built on that branch and deployed to Netlify. The url is dynamic and changes for each branch. That's why you cannot run Saucelabs tests from your machine.
The following command starts two storybooks
- the storybook of the docs package - the Design System incl. documentation and tokens, on
DOCS_STORYBOOK_PORT¹ - the storybook of the vue-components package - an inventory of the component library, on
VUECOMPONENTS_STORYBOOK_PORT¹
docker-compose upℹ In development mode, the storybooks currently do not support "composition", i.e. vue-components is not featured in the docs storybook. Please look at it in isolation.
¹ Please refer to the .env file(s) for port configuration.
As usual, docker-compose also allows for those services to be started independently of each other if preferred.
Run the following command to automatically rebuild the tokens in all output formats during development when changing one of the json source files:
docker-compose run --rm --user=$(id -u):$(id -g) node npm run -- lerna run watch --streamThis way you don't have to manually run the build:tokens command for every token change.