Summon UI library
npm install summon-uiSummon UI project contains the common Front-end code of all Summon products. It's a Storybook project that contains our UI components as well as UI Providers for branding theming, helpers and more.
Through time we will be decoupling our UI from all our different products (user portal, client portal, etc) and migrating it in here.
It will allow us
- To maintain common components across projects in a single place
- To have a proper scalable design system and a complete storybook
ReactJS & Typescript:
We use React and we write in Typescript.
MANTINE UI: https://mantine.dev/
Mantine is our Front-end library.
We use Mantine components, as well as theme/brand handling.
UI colors are based in Mantine color system.
We avoid writing styles, Inline styles are forbidden :)
Instead we use Mantine components and their props.
We use css modules.
If there is some component to be styled, there is a super powerful way to do this globally for components in the current theme.
If there are some classNames that need to be added to a component we use Tailwind classes passed via prop.
Mantine also offer a vast number of hooks and other functions that have proven to be very useful
TAILWIND CSS: https://tailwindcss.com/
STORYBOOK: https://storybook.js.org/
The Summon UI project is a Storybook project
JEST: https://jestjs.io/
RTL (React Testing Library): https://testing-library.com/
- We open PRs to introduce new code in our main branch
- A PR shall be approved by 1 people before merge
We like very much our code to be clean, free from Typescript errors, free from format errors, free from test errors.
For that:
- We use Biome for linting and formatting.
- We have husky and lint-staged
- We use commitlint
But we also care a lot about our git log.
For that:
- We use conventional commits (https://www.conventionalcommits.org/en/v1.0.0-beta.4/)
We also use NVM so we all use the same Node JS version
If you feel comfortable with it, we recommend to use VSCode, Windsurf or Cursor as having Biome for linting and formatting working is pretty straight forward.
But of course, this is a free choice.
As long as your editor/IDE allows you to follow all the standards described above you can create your code in whatever way you want
1. Generate the dist folder in summon-ui by running pnpm build.
2. Adjust the package in the target repository to reference your local changes:
``json``
"summon-ui": "file://../summon-ui"
3. Install the updated dependency by running pnpm install.
Whenever you upgrade the version in the main branch, a new package will be automatically published.