@nxtdtc/dtc-component-library

A shared component library for common components shared across micro-frontends. Component styles are primarily configured via design config files and custom styling can be applied by simply overriding styles via the style prop.

Usage no npm install needed!

<script type="module">
  import nxtdtcDtcComponentLibrary from 'https://cdn.skypack.dev/@nxtdtc/dtc-component-library';
</script>

README

DTC Component Library

A shared component library for common components shared across micro-frontends. Component styles are primarily configured via design config files and custom styling can be applied by simply overriding styles via the style prop.

Useful Commands

npm install will install all necessary packages - be sure you are using Node >= 10

npm start will start webpack and evaluate changes in real time. This can be useful when linking with another app to test a new component or change.

npm run storybook will open a tab with storybook running on port 6006. Storybook is especially useful for building components in isolation and testing different permutations of props.

npm test will run the test suite

To Link With an Existing Project

You will likely want to test your changes as they would appear in the front end using this library. You can achieve this using npm link

In the component library terminal - npm link

In the front end application terminal - npm link @nxtdtc/dtc-component-library

If you run into issues it's best to nuke all node_modules in your front end app, reinstall and then re-link the library.

Tests

Each component needs a test and our pipeline will fail if any test fails.

Publishing a New Version

After your PR is approved and merged to master, cut a new version of the library and publish to our npm repository.

npm version minor|patch|major

minor should be used for the majority of changes which should be any NON-BREAKING change

major should be used for any BREAKING change and you and the reviewer should agree on whether this version upgrade is appropriate or not

patch should be reserved for hotfixes. For example, if we have recently published v1.3.0 but our front end app is using v1.2.0 and has a breaking error but we do not want the changes included in v1.3.0 then we will need to branch off v1.2.0 and make a patch to fix the issue introduced in this version without introducing unwanted changes in the most recent version.

After successfully creating the new version, publish it to npm using the following command: npm publish

To check that npm is now up to date with the most recent version, view this package on NPM. The Last Publish and Version sections should reflect recent changes.