Synth design system

Public tokens and components for the Synth design system used by Vise.

Development cycle

0. Get your npm account added to the vise_inc organization and login on your local machine using npm login
1. After writing and testing the updated package, include the bumped version field package.json in your pull request. Follow the semver versioning process.
   • Package upgrades in application code should be in a separate PR.
2. After getting the change approved and merged, run the following commands:
3. npm run build # Runs prettier, lint, and outputs Javascript and Typescript declarations
4. If the build steps fail, then fix any errors and open a new pull request
5. npm publish # Publishes new version of package

Linking for local development

Webpack

If you want to test local changes to ds-vise in a consuming app you will need to link this package. In this package run npm install --omit peer to make sure extra copies of react and other dependencies aren't included in the bundle, then create a global symlink with npm link. In the consuming app, link it with npm link @vise_inc/ds-vise. Webpack must be configured to be able to fallback to the app's top-level node_modules so it can resolve the missing peer-linked dependencies (this shouldn't be needed if it's linked as a npm workspace package). This can be done by adding path.resolve(__dirname, 'node_modules') to the end of the resolve.modules list in the development webpack config.

Because the peer dependencies are missing you won't be able to use storybook with this setup so you will need to temporarily install them with npm install if you want to work on storybook. Typescript will also complain as the local packages will be missing. To go back to using the package as a linked dependency use npm install --omit peer

Requirements for new components

• Storybook documentation
  • Property documentation
  • Storybook controls