f8855bb0c1 | ||
---|---|---|
.. | ||
src | ||
.gitignore | ||
LICENSE | ||
README.md | ||
package.json | ||
vite.config.js |
README.md
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.