@croud-ui/solid-foundations

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)

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