@movable/ui

todo: update

This repo contains the shared components for our frontend applications. Using this react component library guide

Local Development

Installation

1. Ensure you have volta 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

import palette from 'path_to_src/theme/palette';

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

Yarn Linking

1. @movable/ui: yarn link
2. @movable/ui: npm run watch
3. front-end/packages/studio: yarn link /path/to/local/@movable/ui
4. front-end/packages/studio: yarn dev --force
5. Be sure afterwards to unlink from front-end/packages/studio: yarn unlink @movable/ui

If yarn gets confused, try unlinking, removing node_modules and following the steps again.

NPM Linking

tbd

Linking to local Studio

Conventional Commits

This repo has conventional-commits 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