Introduction

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!

Sample component structure

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;

Sample SCSS structure

.root {
  :global {
    background: #ffeedd;
    padding: 1rem;
    .ye-frame {
      padding: 1rem;
      background: #55eedd;
      .ye-innerbox {
        padding: 1rem;
        background: #11dd00;
      }
    }
  }
}

commands

yarn install yarn storybook

to bump a new version: yarn rollup (to bundle the library before publishing) yarn patch (minor|major) npm publish

Dependency updates

yarn audit yarn upgrade-interactive yarn upgrade-interactive --latest

font sizes and distances

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";