Summon UI

Summon 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

Tech Stack

ReactJS & Typescript: We use React and we write in Typescript.

UI

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 and we use Chromatic (https://www.chromatic.com/) for CI.

UNIT TESTING

JEST: https://jestjs.io/

RTL (React Testing Library): https://testing-library.com/

Development Process

PRs

• We open PRs to introduce new code in our main branch
• A PR shall be approved by 1 people before merge

Code

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 linter and prettier.
• 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

Editor/IDE

If you feel comfortable with it, we recommend to use VSCode as having linter and prettier 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

Local Testing Procedure

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:

   "summon-ui": "file:..//summon-ui"

3. Install the updated dependency by running pnpm install.

Publishing

Whenever you upgrade the version in the main branch, a new package will be automatically published.