@budibase/bbui

Budibase bbui

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

Install

• Clone
• npm install
• npm run svench

(Note: yarn won't work!)

Example workflow to create a component

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

Guidelines

Making components

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

Using components and the styleguide

• Get familiar with the different props that exist on the component. If something vital is missing, make a PR and add it.
• Take advantage of the css custom properties in the stylesheet and avoid writing hard-coded values.
• 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.