Tutorial to bring more Spectrum Web Components to Budibase

[poirazis]

I would like to contribute to Budibase by bringing some more Spectrum Web Components to Budibase.
If someone has done something like this, building any custom components, to submit to core, i would appreciate a small guide on how to do this. I am on a Mac ( M1 ) machine if the steps for building and testing would be any different.

If this is premature and we should wait a little more for the custom components functionality to come around, just ignore this :)

[aptkingston]

Hey @poirazis. Firstly thanks for wanting to contribute! Our BBUI package contains the suite of components that we use to build the Budibase platform itself. These are a slightly customised version of spectrum components. The components available to use inside apps are located in packages/client/src/components/app, and a lot of these are based off spectrum components, so they usually pull in and use a component in BBUI too. Whenever the feature set for the Budibase platform and client apps diverge, we usually end up making a second implentation of those spectrum components for each use case - the Button component is an example of this.

Generally speaking we maintain BBUI ourselves as this is quite specific to our platform, but client app components would certainly make useful contributions. If there are some spectrum components (or indeed, any types of components) that you would like to use in an app but aren't available at the moment then you could certainly feel free to contribute those.

I'm not sure if we have public contribution docs for adding components (I think this is just internal documentation at the moment), but I'll give a brief overview of the process. You can always just give us a ping here if you get stuck in process of course and we'll be happy to help.

• Add a very basic svelte component to packages/client/src/components/app
• Export this component from the client library by adding it to packages/client/src/components/app/index.js
• Add the component definition (settings etc) to the manifest packages/client/manifest.json. You can reference other definitions in that file for examples of how to define the settings. Feel free to reach out if you aren't sure how to configure something correctly!
• Add the component to the builder, so that you can try it yourself and add it to an app. Do this by adding the exported component name (all lowercase and no spaces by convention) to componentStructure.json in the builder package
• You can now add your component to an app which will let you debug and try it as you build it. Most of the functionality you'll need to interact with the client library is available via the sdk context (getContext("sdk")). Check out some other components for examples of how to do certain things.

Thanks again!

[poirazis]

Thank you @aptkingston !
I will give it a go and let you know how it goes!

[poirazis]

Hey @aptkingston just wanted to give you a quick update on this
I am up the initial curve, and i am now developing / testing my Tabs Component and learning Svelte along the way
Its a good choice i think as i can reference your own code in bbui when stuck

the end result should be an Adobe Spectrum Tabs implementation with all customization options

lets see how this goes!

[poirazis]

Hey @aptkingston I have a question when you have some time.

I am now able to create my own components and set their options in the builder etc.

The question is this. Lets take the scenario i want to bring to the builder the ProgressBar component.
There are three ways for this ( at least to the best of my understanding )

Import the packaged JS web component from Adobe Spectrum and then give it dynamic properties
OR
Import the CSS Adobe package, and build the component structure in our bb implementation (as you do in bbui)
OR
Import the bbui implementation of the Adobe Web Component if it exists ( i.e ActionButton ) and expose the dynamic properties you want, like text, size, icon etc ..

In the case of Adobe Spectrum Web components, since they are also used as the core UI, i think the 3rd route should be the preferred. Bring already maintained components to the builder. What do you think ? Which way should i use ? I have implemented the first two ways but failed with the 3rd way ( dependencies / compilation failure ) but i am sure i will sort it out.

In case of NON adobe Spectrum Web component, i.e IBM Carbon. Lets assume we decided to bring some of those to the core builder, some charts for example.
Which route would be the preferred ?
Re implementation using CSS only, or import JS Web Component and expose customization and dynamic properties ?
(There is also a Svelte Implementation of Carbon )

and another more of a general comment
when we start building complex components, as extensions / plugins etc, as not everything will be accepted in Core, there will be often cases where the list of customization options will be pretty big. Imagine lets say a Lightbox Gallery Component to showcase images. With different arrangements, effects, animations, layouts etc. The need to show more knobs would need the Properties Panel to be at some point extended, to be able to handle much more complex customization options. Possibly seperated in Options / Styles / Data or something similar, and have controls to set various options types.