Here’s some really nerdy stuff that I’m excited about. I’ve been working on porting all the Materialize components over to Material UI. It’s going really well. It’s much easier to use React components than force in the Materialize stuff.
Great work by @AlonGvili for getting this started like a year ago!
Here are some awesome things I’ve learned that are making this development way faster and may help you with your development of controls.
Sandbox Dashboard
I created a “sandbox” dashboard that has all the components in all of their states on it. This means I can easily pop open a page and tweak a control without having to re-write that particular state for that control.
Here’s the sandbox dashboard. It has examples of all the controls.
Next, I setup a sandbox.ps1 script that starts a webpack-dev-server. Webpack Dev Server allows you to make changes to your JSX file and it automatically recompiles the JSX files and reloads the page for you. This makes tweaking controls SUPER fast.
https://recordit.co/CGNSboXNSB
The magic is in the sandbox.ps1, package.json and webpack.config.js files.
Speedy Testing
I’ve changed how we are doing testing to use the sandbox dashboard. This means, instead of each test creating its own state, we now just open the correct page and run the tests against the sandbox dashboard.
I can run over 100 tests in about 30 seconds.
Consistent Component Integration
This is the thing I’m most excited about. One of the biggest problems with implementing UD controls is integrating with Get-UDElement, Set-UDElement, Remove-UDElement, Sync-UDElement and Add-UDElement.
I’ve created a JavaScript high-order function that allows you to automatically integrate with these features. All you need to do is to wrap your component in it.
export default withComponentFeatures(UdButton);
Then, when you want to notify of JavaScript events, you can use a function passed in as a prop.
const handleClick = () => {
if (props.onClick == null) return;
props.notifyOfEvent('onClick', "")
};
State is managed by the high-order function so the component just needs to report any state up using a setState function passed as a prop.
const onChange = (event) => {
props.setState({ value : event.target.value})
if (props.onChange) {
props.notifyOfEvent('onChange', event.target.value)
}
}
Since the high-order function component is storing the props and state, it can integrate automatically with Set-UDElement and Get-UDElement.
This is awesome because then it means you can do stuff like this. Notice how I’m using New-UDSelect and passing the result to Set-UDElement. This means I can update any property of a control using Set-UDElement.
New-UDButton -Text 'Set State' -OnClick {
$Select = New-UDSelect -Label '10-12' -Id 'select' -Option {
New-UDSelectOption -Name "Ten" -Value 10
New-UDSelectOption -Name "Eleven" -Value 11
New-UDSelectOption -Name "Twelve" -Value 12
} -DefaultValue 10 -OnChange { Set-TestData $EventData }
Set-UDElement -Id 'select' -Properties $Select
}
This is how that looks to the end-user.
https://recordit.co/8dU60OaB2B
The high-order function can be found here: https://github.com/ironmansoftware/universal-dashboard/blob/master/src/UniversalDashboard.MaterialUI/Components/universal-dashboard.jsx
I’ll release it as an NPM package you’ll be able to use if your components once we release 3.0. I’m sure there are tweaks I’ll have to make to it to have it work in every scenario.
If you want a full example of its use, check out the UDSelect control.
So, that’s is. I’m super excited for v3! I’ve merged my first PR into the master branch for v3. There are a lot of things that still need to happen but it’s a huge step forward. There is a v2 branch the still contains the v2 source so we can continue to fix bugs in there if need be.
so think this should all be covered in a youtube video. So excited about v3 and all these goodies you keep releasing. Thanks so much 
glad to see it’s getting close.
and when dark 
