pnpm add @strategies/uiThere 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.
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>
- Create a new folder in
src/componentswith the name of your component. - Create a new
.tsxfile, a testing.stories.tsxfile, a new.scssfile, and a README file in the folder with the name of your component. - Implement your component in the file.
- Export your component from the file to the
indes.tsinsrc. - Test your component in Storybook.
- Find the component in
src/components. - Make changes to the component.
- Test your changes in Storybook.
- Commit your changes.
The interface components that are available are:
- AccordionStandard
- AccordionBasic
- BaseIcon
- Button
- Checkbox
- CheckboxPill
- Chips
- ColorField
- ColorPicker
- ColorItem
- FilterButton
- FilterButtonList
- FilterPill
- HorizontalMixer
- IconButton
- InputoutputPill
- List
- ListItem
- MenuBar
- Modal
- MultiSliderComposite
- MultiSliderLarge
- MultiSliderOutput
- MultiSliderSmall
- NotificationIndicator
- NumberField
- Overlay
- Panel
- Pill
- ProgressBar
- RadioSlider
- RadioSelect
- ReorderableListBox
- Select
- Slider
- SortableListBox
- Switch
- Tabs
- Tooltip
- TextField
- This command will roll up all the components into
distfolder.
pnpm run build- You can go to the root of the repository and follow the instructions: how to publish all packages to npm to publish the package.