budibase/packages/bbui/README.md

Budibase bbui

A package that handles all common components across the Budibase organisation. You can find the current live version Here.

Install

1. Clone
2. npm install
3. npm run svench

(Note: yarn won't work!)

Example workflow to create a component

1. Create a file: Headline.svelte
2. Create a Svench file: Headline.svench
3. Build component and add variants to the Svench file.
4. Once done, re-export the file in src/index.js.
5. Publish, update the package in the main project and profit.

Guidelines

Making components

1. Think about re-usability
2. Use the css custom properties (variables) that are in the css stylesheet. This makes it easy to tweak things later down the line.
3. Opt to forward events (<button on:click> for example) rather than using callbacks.
4. Avoid adding margins to the outermost container of the component.

Using components and the styleguide

1. Get familiar with the different props that exist on the component. If something vital is missing, make a PR and add it.
2. Take advantage of the css custom properties in the stylesheet and avoid writing hard-coded values.
3. Since there is no margin on the components, think about the structure of the DOM and how to achieve correct spacing, etc. This can be done using css grid + grid gap or with a container div where you specify a padding or margin. The best solution depends on the circumstance.

TODO

• Figure out a good documentation situation
• Add testing suite (E2E using Playwright?)

Other

The project uses Svench. It is somewhat akin to Storybook but a lot less bloated and much easier to setup. It also supports HMR for quick development.