# Budibase bbui A package that handles all common components across the Budibase organisation. You can find the current live version [Here](http://bbui.budibase.com). ## 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. 4. 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](https://github.com/rixo/svench). It is somewhat akin to Storybook but a lot less bloated and much easier to setup. It also supports HMR for quick development.