@synq/ui

This package contains the SynQ design system written as React components. Components that we expect high re-use of and that are not specific to certain use cases belong in this package. For example, a button, date picker, slider, etc are all examples that would belong in this library because they are generic. On the other hand, a music player component would likely be specific to its application use case and does not belong here.

Development

Installation

To get started, first install all of the required dependencies by running:

npm i

Storybook

Storybook is a component documentation framework that makes it easier to develop components in isolation and show the various component input options as "stories." You can read more about storybook at their website: https://storybook.js.org/. And the SynQ storybook instance is hosted at: https://storybook.synqapp.io/.

To get started with storybook locally, run the following command:

npm run storybook:dev

To build a production version of storybook, run the following command:

npm run storybook:build

You can serve the production build locally with the following command:

npx serve dist/storybook

We use CDK to setup the cloud infrastructure for the hosted Storybook website. To publish production built version of the website, run the following commands:

cd infra
npm i
cdk synth
cdk deploy StorybookWebStack [--profile <SYNQ_AWS_PROFILE_NAME>]

Build and Publish

Use the following command to build the components library:

npm run build

To publish, use the following command:

npm version [<newversion> | patch | minor | major]
npm publish

The package.json has the registry configured so that when you run publish, you don't accidentally try to publish to the public NPM registry.

Local Testing

In addition to trying components in isolation, it is also useful to try using the components in a real project to make sure they compile correctly when imported and that they function in the intended way. Typically, we would use npm link to symlink the components library into the application package. However, React causes us problems when trying to do this as acknowledged in their documentation at the bottom of this page. There may be some workarounds that allow us to still use symlinking but I haven't found a super concrete option as of yet.

So, instead, what we can do for now is to spin up a local NPM registry and use that registry for local testing. Below are the steps to do this:

1. First install the NPM registry package: npm i -g verdaccio
2. Start the NPM registry: verdaccio. Verdaccio starts up on http://localhost:4873.
3. Set the @synq NPM scope to use the local registry: npm config set @synq:registry http://localhost:4873.

Now when you publish or install any @synq packages, it will use the local registry. If this doesn't work because you have multiple @synq packages that exist in the AWS NPM registry, you can also specify the registry when using publish or install. For example npm i @synq/ui --registry http://localhost:4873.