@formant/ui-sdk

UI SDK

A library of UI components from Formant. These components are re-exported subset of mui. You get the best of all worlds:

• components that look beautiful and fit in within a custom view/module.
• high quality industry standard component system for React (i.e. your knowledge is re-usable for other projects that aren't Formant related).
• unique formant specific components not offered by mui

demo

Unique Formant components

• Timeline scrubber - COMING SOON

Other MUI components

You can use the whole suite of components from mui that will inherent our styles. The components that are explicitly tested from this packages have styling that is known to be of high quality.

Setting up in your own project

yarn add @formant/ui-sdk

or check out our ViteJS example

Font

Formant UI Sdk uses the Inter open source font, add this to your project

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
  rel="stylesheet"
/>

Formant React hooks

Within this project are a number of hooks that make access informationa about your fleet easy to do.

Developing on ui-sdk

yarn
yarn dev

Running storybook

yarn storybook

Building for production

Weirdly, typescript requires npm layout package in order to generate its types

Deploying a new version

# use npm to bump the version number
npm version X.Y.Z 

# add all the changed files from the preversion/postversion tasks
git add .

# commit all the changes with a uniform commit message
git commit -m ui-sdk@$(node -p "require('./package.json').version")

# add a unified annotated tag for this version
git tag -a release/ui-sdk/$(node -p "require('./package.json').version") -m ui-sdk@$(node -p "require('./package.json').version")

# publish this version to npm; use "--tag=next" for future releases
npm publish

# push everything to remote vcs with the tags
git push --follow-tags

should run all that's necessary for creating a build