@movable/ui/README.md

Movable Ink's shared MUI components and MUI theme for our vite applications

# @movable/ui

todo: update

This repo contains the shared components for our frontend applications. Using this [react component library guide](https://prateeksurana.me/blog/react-component-library-using-storybook-7/#compiling-the-library-using-rollup)

## Local Development

### Installation

1. Ensure you have [`volta`](https://volta.sh) installed on your computer
2. Clone the repo
3. `npm install` (note: `npm`, not `yarn`)

### Usage

Ensure the project consuming this library has all the required peer dependencies.

### WARNING: Providing Theme Colors to Custom Components

While within using app you'll be able to use `(theme) => theme.palette...` style of sx props. But within our custom component this _does NOT_ traverse to the using app. You'll want to use the theme palette directly to ensure proper color strings. See #224

```jsx
import palette from 'path_to_src/theme/palette';

export default InkCustomComponent() {
  return (
    <Box sx={{ backgroundColor: palette.neutral50 }}>
      ...
    </Box>
  )
}
```

## Alpha Pre-release Workflow

This project supports alpha releases for testing changes before full releases.

### Manual Alpha Release
For testing specific features or changes:

1. **Navigate to Actions tab** in GitHub repository
2. **Select "Pre-Release to NPM"** workflow
3. **Click "Run workflow"** button
4. **Configure options:**
   - `dist_tag`: Leave as `alpha` or customize (e.g., `beta`, `feature-test`)
   - `increment`: Leave empty for auto-increment or specify (`patch`, `minor`, `major`)
5. **Click "Run workflow"** to trigger the release

**Result:** Creates version like `3.4.1-alpha.0` and publishes to npm with `@alpha` tag

### Using Alpha Versions in Other Projects

Install alpha versions in your consuming projects:

```bash
# Install latest alpha
npm install @movable/ui@alpha
yarn add @movable/ui@alpha

# Install specific alpha version
npm install @movable/ui@3.4.1-alpha.0
yarn add @movable/ui@3.4.1-alpha.0
```

View all available versions at: https://www.npmjs.com/package/@movable/ui?activeTab=versions

## Conventional Commits

This repo has [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) We lint for this both pre-commit and on PR actions. It is **required** and will not pass without it.

Ex:

```
fix(percy): added percy snapshots for all component states

- active
- disabled
- focused
```