Components

Table of Contents

• Quick Start
• Usage

---

Quick Start

yarn && yarn start

Usage

⚡ Install

yarn add purplenl/purplex-components

✨ Import

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

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	✅	✅

🚀 Start Storybook

Runs the Storybook in the development mode.
Open http://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.

🦾 Develop (app)

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

🏗️ Build Storybook

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 version

Bump and commit package version.

yarn bump<:patch|minor|major>?

📦 Bundle library

Bundle package into dist folder with tsup.

yarn compile

🏄‍♂️ Update and Consume library

purplex-components

1. add/tweak what's needed
2. run yarn compile:icons if adding new icons
3. run yarn compile to update the bundle
4. create PR (resolve CR feedback and rebase conflicts with the master branch)
5. squash and merge

purplex-awesome-webapp

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.