A React UI toolkit used in Yeldo to develop the company design system and reuse across FrontEnds.
After a few test & research, we found styling with SCSS the most effective way to work.
This approach has a few features we definitely wanted to have:
- Scoped classnames, to avoid unpredictable CSS interferences/redefinitions (our design choice is to use it only on component root)
- Readable code, with semantic and logical classnames, for easy evolution/mainteinance
- Keep the library components and sub-components easy to customize from the consumer app, if needed
- Optimization: the consumer app will only import the needed style, and tree-shaking is supported
(We will also try to take advantage of css variables)
The boilerplate for this library is 100% due to this Alex Eagleson's article. God bless you Alex!
import React from "react";
import style from "./TestComponent.module.scss";
const TestComponent = () => {
return (
<div className={"ye-TestComponent " + style.root}>
this is the component
<div className="ye-frame">
this is the frame
<div className="ye-innerbox">this is the inside</div>
</div>
</div>
);
};
export default TestComponent;
.root {
:global {
background: #ffeedd;
padding: 1rem;
.ye-frame {
padding: 1rem;
background: #55eedd;
.ye-innerbox {
padding: 1rem;
background: #11dd00;
}
}
}
}
yarn install yarn storybook
to bump a new version: yarn rollup (to bundle the library before publishing) yarn patch (minor|major) npm publish
yarn audit yarn upgrade-interactive yarn upgrade-interactive --latest
the library uses "rem" units, so every distance/size is calculated against the base html root font size.
To keep aspect ratio on every screen size, we use fluid font sizes where the "root" p font sizes are:
- Mobile: 18px (@390px)
- Desktop: 20px (@1920px)
If you have a size in px from the design, please use the formula to get the rem size: Rem size = px size / root px size
To make it all work fine, the consumer app should use fluid types too. This library exports a small CSS that can be imported to this extent:
[in _app.tsx] @import "yeldo-ui-library-next/dist/style.css";