budibase/packages/bbui
Budibase Release Bot ad45781228 v0.9.39 2021-06-09 13:51:07 +00:00
..
src Fix radio group opacity on firefox on ubuntu 2021-06-07 09:41:27 +01:00
.gitignore Add BBUI package to monorepo 2021-03-31 10:59:07 +01:00
README.md Add BBUI package to monorepo 2021-03-31 10:59:07 +01:00
package.json v0.9.39 2021-06-09 13:51:07 +00:00
rollup.config.js Change BBUI to single bundle export and clean up some form components 2021-04-15 19:28:08 +01:00
yarn.lock Bump ws from 5.2.2 to 5.2.3 in /packages/bbui 2021-06-09 10:13:33 +00:00

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.