Installable Kit

These components can be previewed at https://storybook.vestaboard.com

Installation

The current version of Installable kit requires these peer dependencies to be installed in your project:

``json
{
"peerDependencies": {
"@mui/icons-material": "^5.11.13",
"@mui/material": "^5.11.13",
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
`

With those in place, just run:

`bash
yarn @vestaboard/installables
`

or

`bash
npm install @vestaboard/installables
`

Available Scripts

In the project directory, you can run:

$3

Opens storybook and allows you to view and edit the components

$3

Runs the tests using jest

$3

Builds the typescript files

Releasing a new version

For a new version release, just bump the patch "version" number in package.json. This will trigger the publish job during CI, when merged into main.

ex:

`
maj.min.patch
4.0.0 => 4.0.1
`

`
git switch -c feature/my-changes
git add --all
git commit -m "changed _ components css"
git push


make a PR to main, and the new changes will be deployed when reviewed and merged


`

PRs should be made targeting the default branch

`
feature/my-changes => main
`

Migrating away from @mui/styles makeStyles, use MUI System or SX prop

@mui/styles deprecation notice

`tsx


Old ❌ installable kit < 3.0.46

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
button: (props) => ({
padding: 4,
marginLeft: 4,
borderRadius: 6
})
})
...

`

`tsx


New ✅ ^4.0.0

import { makeVestaboardStyles } from '@vestaboard/installables/lib/hooks/useVestaboardStyles';

const useVestaboardStyles = makeVestaboardStyles((props) => ({
button: {
// have to specify unit type now
padding: '4px',
marginLeft: '4px',
borderRadius: '6px'
}
}))
// or w/o props
const useVestaboardStyles = makeVestaboardStyles({
button: {
// have to specify unit type now
padding: '4px',
marginLeft: '4px',
borderRadius: '6px'
}
})
...


``