@vestaboard/installables

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:

{
  "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:

yarn @vestaboard/installables

or

npm install @vestaboard/installables

Available Scripts

In the project directory, you can run:

yarn start

Opens storybook and allows you to view and edit the components

yarn test

Runs the tests using jest

yarn build

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

# Old ❌ installable kit < 3.0.46
import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({
  button: (props) => ({
    padding: 4,
    marginLeft: 4,
    borderRadius:  6
  })
})
...
<Button className={classes.button}/>

# 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'
  }
})
...
<Button sx={classes.button}/>