Why a separate library
Sulmu UI exists because design and code did not agree, and because the product is about to grow from two modules to eight or ten.
Where we started
Section titled “Where we started”Before the library, the user interface of Tourism Suite came from four places:
packages/uiin the frontend monorepo held thin wrappers around Chakra UI v3. Each wrapper passed most props straight through, so every screen could, and did, style things a little differently.packages/design-systemheld a Chakra theme that was never finished.- Figma had about twenty loose components and no variables. A colour in a mockup was a hex value, not a name that code could share.
- A proof of concept was written with inline styles and matched neither of the above.
A designer could not point at a component and say “that one”, and a developer could not tell whether a difference between a mockup and a screen was intended.
Why not fix the Chakra wrappers
Section titled “Why not fix the Chakra wrappers”Chakra is a good general-purpose library, but keeping it as the base had three costs here.
- Its design language is its own. Getting from Chakra’s look to the Tourism Suite designs
means overriding most of the theme. The unfinished theme in
packages/design-systemis what that looks like half way. - It styles at runtime. Chakra needs Emotion and a provider in every app. In a Module Federation setup that is one more shared singleton that every micro frontend must agree on.
- Wrappers inside one repo do not version. With
packages/uiliving in the frontend monorepo, every module gets every change at once, and a future app outside that repo cannot use it at all.
What a separate library gives us
Section titled “What a separate library gives us”- One versioned package.
@beyul/sulmu-uihas its own repository and releases. All eight to ten planned modules, and any future app, install the same thing and upgrade when they choose. - A single visual source of truth. Figma is where a component is designed. The tokens in the repository generate both the code and the Figma variables, so the two cannot drift.
- It can sit next to Chakra. The stylesheet is precompiled, every class and variable has
the
suprefix, and there is no CSS reset. A screen can use Sulmu UI components while the screen beside it still uses Chakra. - Generic components have one home. If a component is not specific to one module, it belongs in the library, with a Figma counterpart, a story, tests and a page here.
Where things stand
Section titled “Where things stand”packages/uiin the frontend is frozen: no new components, no new features.- Screens are migrated one by one. The login screen is done.
- New work uses Sulmu UI. If a component is missing, it is added to the library, not to the app.
The decisions behind how the library is built are on the next page: Design philosophy.