# Strategies' Design System UI Components

<a href='https://www.npmjs.com/package/@strategies/ui'>
  <img src="https://img.shields.io/npm/v/@strategies/ui?style=flat-square" alt="ui pkg version" />
</a>

[![Publish to Chromatic](https://github.com/sasakiassociates/design-system/actions/workflows/chromatic.yml/badge.svg)](https://github.com/sasakiassociates/design-system/actions/workflows/chromatic.yml) <a href="https://www.chromatic.com/reviews?appId=6568e2d97288bec78eb6e3cc"><img src="public/link.png" alt="chromatic link" width="15" height="15" /></a>

[![Deploy built sb app to firebase](https://github.com/sasakiassociates/design-system/actions/workflows/firebase-deploy-built-sb.yml/badge.svg)](https://github.com/sasakiassociates/design-system/actions/workflows/firebase-deploy-built-sb.yml) <a href="https://design-system-storybook-a93dd.firebaseapp.com/"><img src="public/link.png" alt="chromatic link" width="15" height="15" /></a>

## Installation

```sh
pnpm add @strategies/ui
```

## Usage

There are two types of components in the system: interface components and portals.

The interface components specify the child elements to act as portals that you can declaratively
pass your content into. Regardless of declaration order, these named portals will place their children
inside of the elements specified by the interface component.

### Example

```jsx
import { Modal, Title, Body, Buttons, Button } from '@strategies/ui'
;<Modal>
  <Title>My Modal Title</Title>

  <Body>
    <p>This is the body of my modal</p>
  </Body>

  <Buttons>
    <Button onClick={cancel}>Cancel</Button>

    <Button onClick={save}>Save</Button>
  </Buttons>
</Modal>
```

## <img src="../../public/react.png" alt="react" width="21" height="21"> How do I make changes or implement new components?

### Implementing a new component

1. Create a new folder in `src/components` with the name of your component.
2. Create a new `.tsx` file, a testing `.stories.tsx` file, a new `.scss` file, and a README file in the folder with the name of your component.
3. Implement your component in the file.
4. Export your component from the file to the `indes.ts` in `src`.
5. Test your component in Storybook.

### Making changes to an existing component

1. Find the component in `src/components`.
2. Make changes to the component.
3. Test your changes in Storybook.
4. Commit your changes.

### components

The interface components that are available are:

- [AccordionStandard](src/components/AccordionStandard)
- [AccordionBasic](src/components/AccordionStandard)
- [BaseIcon](src/components/BaseIcon)
- [Button](src/components/Button)
- [Checkbox](src/components/Checkbox)
- [CheckboxPill](src/components/CheckboxPill)
- [Chips](src/components/Chips)
- [ColorField](src/components/ColorField)
- [ColorPicker](src/components/ColorPicker)
- [ColorItem](src/components/ColorItem)
- [FilterButton](src/components/FilterButton)
- [FilterButtonList](src/components/FilterButtonList)
- [FilterPill](src/components/FilterPill)
- [HorizontalMixer](src/components/HorizontalMixer)
- [IconButton](src/components/IconButton)
- [InputoutputPill](src/components/InputoutputPill)
- [List](src/components/List)
- [ListItem](src/components/ListItem)
- [MenuBar](src/components/MenuBar)
- [Modal](src/components/Modal)
- [MultiSliderComposite](src/components/MultiSliderComposite)
- [MultiSliderLarge](src/components/MultiSliderLarge)
- [MultiSliderOutput](src/components/MultiSliderOutput)
- [MultiSliderSmall](src/components/MultiSliderSmall)
- [NotificationIndicator](src/components/NotificationIndicator)
- [NumberField](src/components/NumberField)
- [Overlay](src/components/Overlay)
- [Panel](src/components/Panel)
- [Pill](src/components/Pill)
- [ProgressBar](src/components/ProgressBar)
- [RadioSlider](src/components/RadioSlider)
- [RadioSelect](src/components/RadioSelect)
- [ReorderableListBox](src/components/ReorderableListBox)
- [Select](src/components/Select)
- [Slider](src/components/Slider)
- [SortableListBox](src/components/SortableListBox)
- [Switch](src/components/Switch)
- [Tabs](src/components/Tabs)
- [Tooltip](src/components/Tooltip)
- [TextField](src/components/TextField)

## <img src="../../public/npm.png" alt="npm" width="21" height="21"> Build & Publish

- This command will roll up all the components into `dist` folder.

```sh
pnpm run build
```

- You can go to the root of the repository and follow the [instructions: how to publish all packages to npm](../../README.md#how-to-publish-all-packages-to-npm-) to publish the package.
