# Installable Kit

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

## Build-time configuration (platform API)

Consumers should inject the Vestaboard **platform base URL at webpack/build time** using the **`PLATFORM_ENDPOINT`** environment variable (bundled into this package via `DefinePlugin`, `environment`, etc.). Subscription config, messaging APIs, media upload, deeplinks, and the legacy visual editor session all resolve against this value.

If your host app (for example Laravel) already exposes **`VESTABOARD_PLATFORM_URL`**, map that to **`PLATFORM_ENDPOINT`** in the webpack config for the installables bundle so the names stay consistent in Laravel while this package keeps a single knob: **`PLATFORM_ENDPOINT`**.

## 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:

### `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](https://mui.com/system/styles/api/)

```tsx
# 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}/>
```

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