yarn && yarn start
yarn add purplenl/purplex-components
There're 3 entry points. Every component has its own entry point, but not every component is available on the general entry point.
// General
import { Button, ButtonProps } from "purplex-components";
// Component related w/ related types, hooks and styles
import { ComponentName } from "purplex-components/base/<component-name>";
import { Button, button, sizes } from "purplex-components/base/button";
// Theme w/ color and typography tokens (not a theme provider)
import { colors, h1 } from "purplex-components/theme";
Components | General entry | Component entry |
---|---|---|
Button | ✅ | ✅ |
ClickOtsideGuard | ✅ | ✅ |
Dialog | ✅ | ✅ |
Divider | ✅ | ✅ |
Field | ✅ | ✅ |
Flex | ✅ | ✅ |
Grid | ✅ | ✅ |
Icon | ✅ | ✅ |
Idle | ✅ | ✅ |
Input | ✅ | ✅ |
Menu | ✅ | ✅ |
Navigation | ✅ | ✅ |
NumberInput | ⛔ | ✅ |
Order | ⛔ | ✅ |
Overlay | ✅ | ✅ |
Pagination | ⛔ | ✅ |
Range | ⛔ | ✅ |
Select | ⛔ | ✅ |
Slider | ⛔ | ✅ |
Spinner | ✅ | ✅ |
Status | ✅ | ✅ |
Switch | ✅ | ✅ |
Table | ⛔ | ✅ |
Text | ✅ | ✅ |
Textarea | ✅ | ✅ |
Toast | ✅ | ✅ |
Tooltip | ✅ | ✅ |
Runs the Storybook in the development mode.
Open https://192.168.1.14:6006/ to view it in the browser.
yarn start
The page will reload if you make edits. You will also see any lint errors in the console.
Runs the Storybook and compiles the package on every change.
That's handy when developing component in other app context locally via yarn link
.
yarn start:dev
Builds the Storybook as a static web app to the storybook-static
folder.
Your app is ready to be deployed!
yarn build
See the section about publishing storybook for more information.
Bump and commit package version.
yarn bump<:patch|minor|major>?
Bundle package into dist
folder with tsup.
yarn compile
- add/tweak what's needed
- run
yarn compile:icons
if adding new icons - run
yarn compile
to update the bundle - create PR (resolve CR feedback and rebase conflicts with the
master
branch) - squash and merge
Reinstal purplex-components
to fetch the latest changes from master
by running:
yarn add purplenl/purplex-components
You can verify it by comparing the commit SHA in with the value used in yarn.lock
.