Solid Foundations

Croud's Solid based component library

Installation

This package uses Yarn to manage the dependencies.

yarn

Storybook

Our components are documented in Storybook.

Netlify publishes the latest version of Storybook when we merge anything into Master. The latest version of Storybook is deployed to the following url

https://croud-solid-foundations.netlify.app

ESBuild

Storybook has traditionally used Webpack to build storybook, but as our repo uses Vite (which is based on esbuild), we are using the experimental storybook-builder-vite builder.

This gives us a massive speed improvment as well as a consistency with the rest of our toolchain, but not everything in the Storybook ecosystem is compatible with this builder yet

Local dev

Use the following command to build Storybook locally for development

yarn storybook

Production build

We can build a production ready version of the storybook locally with the following command, but this will probably only be useful for debugging the production build.

yarn build-storybook

The assets from this build we be output into the storybook-static dir (which is ignored by Git)

Design tokens

Design tokens are generated using theo which allows us to export our tokens in multiple formats.

Defining design tokens

All design tokens are defined in yml format in the ~/src/tokens/config directory.

The design token definitions are broken down, categorised and split out to make it easier to maintain. All new files must be imported into the root index.yml file in order to be processed

Generating design tokens

To generate our design tokens in our desired formats we need to run the following command

yarn tokens:generate

Consuming design tokens

The specifics of how we consume our generated design tokens depends on the language we need to reference them in.

All generated design token files are added to the ~/src/tokens/ directory.

For more info, including guidence on maintaining existing tokens and adding defining new tokens, please refer to the theo docs

Sharing Webcomponents

If we want to port any components from this library to our existing CC monorepo, we will need to compile them as a Web Component. This will allow them to behave as self contained "black boxes" of interactivity within Croud Control.

Defining Web Components

Any customElements defined in the /src/webComponents.tsx file will be bundled into our NPM package There is a handy WebComponentWrapper HOC we should use to handle some common Web Component logic

customElement('some-component', { foo: undefined }, props => (
  <WebComponentWrapper>
    <SomeComponent {...props} />
  </WebComponentWrapper>
))

For more info, see the Solid Element docs

Build NPM package

After we have defined our customElement, we can build a production ready build of our Web Components using the following command

yarn build-npm

The assets from this build we be output into the dist dir (which is ignored by Git)

Publish new package

Bump the package version

npm version [patch, minor, major]

Publish the dist dir to NPM

npm publish