Design
Global Design supported packages
Packages
- @planningcenter/browserslist-config
- @planningcenter/elements
- @planningcenter/grids
- @planningcenter/reach
- @planningcenter/sweetalert2
- @planningcenter/system
- @planningcenter/topbar (extracted to ministrycentered/topbar as of > v7.0.0)
- @planningcenter/typeface
- @planningcenter/url
Deprecated packages
These links can be used to copy/paste the last existing version:
- @planningcenter/experimental (last commit)
- @planningcenter/finder (last commit)
- @planningcenter/ui-kit-elements (last commit)
- @planningcenter/components (transitioned into @planningcenter/elements)
Scripts
Common scripts:
Command | Description |
---|---|
npm run dev |
Starts Storybook at `localhost:8000 |
lerna run build |
Build all projects |
lerna publish |
Publish all changed packages |
lerna changed |
List local packages that have changed since the last tagged release |
Working directories
Dir | Why it's there |
---|---|
planningcenter/ | Packages published to the @planningcenter npm org. |
churchcenter/ | Packages published to the @churchcenter npm org. |
Configuration
File/Dir | Why it's there |
---|---|
.storybook/ | Storybook |
lerna.json/ | Storybook |
.nvmrc | nvm. Support for those that work in multiple node environments |
notes | Transitional documentation and notes. Retairned as a part of — yet unformalized — decision matrix. |
Setup
Requirement: Node 10 (PCO Box standard at time of writing)
npm i -g lerna
git clone git@github.com:planningcenter/design.git ~/Code/design
cd ~/Code/design
npm install
lerna bootstrap # install and link all package-local dependencies
npm run dev
Links
- (Chromatic dashboard)[https://www.chromatic.com/builds?appId=5dfa692af1d7e20020141e86]
Team access
- The DX GitHub Team has admin rights to planningcenter/design and planningcenter/icons.