Croud's Solid foundations
npm install @croud-ui/solid-foundationsCroud's Solid based component library
This package uses Yarn to manage the dependencies.
``sh`
yarn
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
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
Use the following command to build Storybook locally for development
`sh`
yarn storybook
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.
`sh`
yarn build-storybook
The assets from this build we be output into the storybook-static dir (which is ignored by Git)
Design tokens are generated using theo which allows us to export our tokens in multiple formats.
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
To generate our design tokens in our desired formats we need to run the following command
`sh`
yarn tokens:generate
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
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.
Any customElements defined in the /src/webComponents.tsx file will be bundled into our NPM packageWebComponentWrapper
There is a handy HOC we should use to handle some common Web Component logic
`tsx`
customElement('some-component', { foo: undefined }, props => (
))
For more info, see the Solid Element docs
After we have defined our customElement, we can build a production ready build of our Web Components using the following command
`sh`
yarn build-npm
The assets from this build we be output into the dist dir (which is ignored by Git)
Bump the package version
`sh`
npm version [patch, minor, major]
Publish the dist dir to NPM
`sh``
npm publish