@ardoq/shared-ui

Ardoq Shared UI

Re-usable components for ardoq's front-end applications.

For now the storybook is published from the ardoq-front repository, but we aim to move the stories here soon.

Contributing

Write commit messages as changelog entries

While the library is still considered unstable, the git history serves as the canonical list of changes between versions. So please write self-contained commits, with subjects and descriptions which allow users of the library to easily see and understand what has changed and why.

Prepare pull requests for dependent projects

Since we do not yet have meaningful semantic versioning of this library, if a change modifies an external interface, it is advisable to prepare in advance any PRs necessary to update dependent projects (eg. ardoq-front, ardoq-surveys) for the modifications being made. Link these when creating your PR for shared-ui.

Using yarn link to test the library without publishing a new version

1. In the root folder of this project, run yarn watch. This will continuously build the package when you make changes in /src.
2. In the /dist folder of this project, run yarn link. This allows yarn to install the package via symlinks.
3. Do a fresh install of node modules in the repository you'd like to link (e.g. ardoq-front). From root folder: rm -rf node_modules. Then install the dependencies with yarn install.
4. In the root folder of the repostiory that you would like to link (i.e. ardoq-front), run yarn link @ardoq/shared-ui. This tells yarn to install the package from the dist folder.

Now any changes that you make in /src should be automatically reflected in the repository where you linked the package. Later, you might want to use the published version of the package again. Run yarn unlink @ardoq/shared-ui from within the linked repo (i.e. ardoq-front).

Publishing a new version of the package

Circle will pick up the new commit and publish a new version automatic if its on master branch and a release commit

1. Verify that "it works": yarn lint && yarn check-types && yarn test
2. Deploy yarn deploy # *patch*|minor|major

Testing

1. In the root folder of this project, run yarn watch. This will continuously build the package when you make changes in /src.
2. You can now use either yarn test:watch (continuous) or yarn test (on-demand) to run tests. Tests are run against the compiled files in dist, but sourcemaps allow us to see the correct line numbers in the source .*ts files.

Material iconfont update

1. Download latest font files using yarn run dl-icons. Icons will be downloaded to ./material-icons
2. Generate base64 version of woff file font: base64 material-icons/material-round.woff > material-icons/material-round-woff-base64.txt
3. In the app we are using rounded version of icons. Therefore copy the version and round font files to ./src/fonts/material:

• material-round.otf
• material-round.woff
• material-round.woff2
• version.json

1. Edit file ./src/fonts/material/style.css

• update src: url(data:font/woff;charset=utf-8;base64,<<GENERATED BASE64 STRING FROM material-icons/material-round-woff-base64.txt FILE>>)

1. Delete the local folder ./material-icons/ (its under gitignore anyway)