Build Future-Friendly Design Systems with Stencil JS
By: Meenu Meena
Tags: Stenciljs, Alerts, Design Systems, Reusable Component, Web Components

Design System

What is Design System

Design System — a collection of repeatable components and a set of standards guiding the use of those components. Companies like Airbnb, Uber, and IBM has been able to change the pace of creation and innovation for their products within their teams by design system. By changing the ways they design digital products by incorporating their own unique design systems.

Key steps and benefits to building a design system

Conduct a visual audit Create a visual design language Create a UI/pattern library Document what each component is and when to use it

So the main ingredient/ building block of the design system is web component. We are going to take a look how the magical, reusable web component compiler works.

Stencil Definition — As a noun, ‘A physical object whose shape is used as a guide to make other objects’, as a verb, ‘draw or decorate’.

Photo by Miki Fath on Unsplash

Like as, Stencil is a simple compiler tool for front-end artists(developers) to decorating the web applications by drawing their own web components and static site generated progressive web apps (PWA).Stencil combines the best concepts of the most popular front-end frameworks into a compile-time rather than run-time tool.

Although totally different from a front-end framework, Stencil.js uses many well-known concepts and technologies from front-end development — and that’s often confusing for a developer. So, Stencil.js provides:

A virtual DOM

JSX (like in React)

Reactive Data (like AngularJS $watch)

Async rendering (inspired by React Fiber)

TypeScript support

By combining all these features, Stencil.js is able to generate standard-compliant components. Moreover, Stencil.js Stencil will automatically polyfill them on-demand required to support older browsers.

Creating a reusable cross-framework component using Stencil.js

A Stencil.js project is specifically for the purpose of creating generic web components to be used elsewhere. This is easy to set up, as it is one of the default starting options when generating a new project.

Run the following command to generate a new Stencil.js project:

npm init stencil

When prompted with the following options, choose component:

? Pick a starter › - Use arrow-keys. Return to submit. ionic-pwa Everything you need to build fast, production ready PWAs

app Minimal starter for building a Stencil app or website

❯component Collection of web components that can be used anywhere

Fill out the additional prompts with information about your project, and then your project will be created. If you like, you can run the project right away to see it in the browser by making it your working directory and running:

npm start

This command will power up the server. In the folder structure, you can see the src folder. Inside that folder only, we are going to do our magic.

Let us see how can we contribute a reusable alert component to a design system with future proof. We are going to create an alert component. there are two files for alert component which we are going to play around for reusing it.

alert-component.tsx

alert-component.css

After a few minutes in the shoes of an integrator, here is what I get from some JSX and CSS. To see how the button looks like, we open the file index.html and add the code required to display the component we just created:

The result will be like this

So now to future proof your alert component for design system, we need to do some changes.

Future Proofing the component:

Steps to do the same are as follows

Using prop feature for dynamic content, you can refer this link for that https://stenciljs.com/docs/properties reuse values for the styling, by creating variables

To define a CSS variable, we simply define a value prefixed with -- :

:host {

--background-color: rgba(0, 0, 0, 0.03);

}

Once defined, we can use these anywhere in our CSS files by wrapping the variable name with var() :

.card {

background-color: var(--background-color);

color: var(--color);

}

Info , Success and Danger alerts

A common use-case of design systems is to provide multiple themes. Using CSS variables makes it an extremely easy task.

We can define the variables based on the selected theme. In order to achieve that, we use :host(selector) . This pseudo-class function allows us to select the host based on the selector passed as a parameter.

:host(.primary) {

--background-color: #cce5ff;

--border-color: #b8daff;

--color: #004085;

} :host(.success) {

--background-color: #d4edda;

--border-color: #c3e6cb;

--color: #155724;

} :host(.danger) {

--color: #721c24;

--background-color: #f8d7da;

--border-color: #f5c6cb;

}

Changing themes is a matter of switching the correct theme class on one of the ancestors. For example, we can add the class primary to the element.

Publishing components as a design system

Okay, so we have a component built, now what do we do?

Stencil.js is already on it. Once you’re done making your components, you can simply run npm run build to generate a production-ready library of components ready for most web environments.

To use them, we still need to publish them somewhere. In our case, the easiest way we can publish our set of components is simply by running npm publish , which will publish the built package to the NPM registry. List it under the "name" key in your package.json.

Conclusion

Before starting working on the design system, evaluate the values you want to focus on. If you’ve decided to incorporate the system, Web Components perfectly solves challenges that stand before design systems and is a great technology to build your components upon.

Stencil.js makes it easy to manage and deliver components for different targets.

Use cases for Stencil include: