GUI

Before Dashboard v4 we have built our GUI library internally in Dashboard core, and we exposed it with the old plugin API.

The old GUI was built without any form of "UX perspective".

With Dashboard v4 we rebuilt our GUI library from scratch, together with our UX team and came up with new components that fits right in Dashboard, we call it Style-Guide

The new GUI is built externally and imported into Dashboard and exposed with the new Plugin-API along with the old GUI as well, to support old plugins.

Unfortunately! all the config GUI still using the old core GUI lib, but will be changed later as well to use the components from the new GUI lib

How can i use Dashboard GUI

As mentioned before we still have the old GUI lib supported, so you will get both the old one along with the new one, so try to not mix them up 🙃

Get the old GUI from core

With Plugin-API, you can access the components with the reserved name GUI

import { Plugin } from '@root'

const GUI = Plugin.GUI

const App = () => {
    const handleOnClick = () => {
        console.log('Clicked!')
    }
    
    return (
        <GUI.Wrapper>
            <GUI.Button 
                text={'Click me'}
                onClick={handleOnClick}
            />
        </GUI.Wrapper>
    )
}

export default App

Keep in mind that the old GUI will be deprecated at some point in the future, so we recommend to use the new Style-Guide GUI lib instead

Get the new Style-Guide

If you are using the Dashboard-Plugin base from version 2.0.0, you will get the the StyleGuide under the import name Dashboard/modules

import { GUI } from '@root'

/*
    OR you can import from the modules import name
    import { GUI } from 'Dashboard/modules'
*/

const App = () => {
    const handleOnClick = () => {
        console.log('Clicked!')
    }
    
    return (
        <div>
            <GUI.Button onClick={handleOnClick}>
                {'Click me'}
            </GUI.Button>
        </div>
    )
}

export default App

With Dashboard-Plugin base from version 2.0.0, we export the new Style-Guide GUI from '@root' so you can import API methods and GUI from the same import name