@planningcenter/doxy-web

doxy-web

Unified styles + React components for Church Center Web.

Links

• NPM package
• Github repository
• Storybook (documentation)

Getting Started

cd Code
git clone [e-mail]:planningcenter/doxy-web.git
cd doxy-web
yarn install

Development Scripts

• yarn start - compiles SCSS/JS + runs Storybook using localhost
• yarn develop - compiles SCSS/JS + watches src directory for changes
• yarn develop:yalc - compiles/watches SCSS/JS and locally publishes bundled code via yalc (this is the preferred way to test package changes locally in church-center or proxied app - (check out the yalc development guide for more details)
• yarn test - runs defined component tests using Jest
• yarn test:watch - runs tests + watches src directory for changes

Local Development Process:

1. Run yarn start to use Storybook development environment

• using local pco-box - http://localhost:3000
• using pco cloud-box - http://first.churchcenter.test:3000

1. In separate terminal, run yarn develop:yalc to watch src for changes and push to yalc registry
2. In church-center (or proxied app), run yalc add @planningcenter/doxy-web to consume/test local changes

Contributing

• New versions to @planningcenter/doxy-web are made using a "batched" process by deploying changes to NPM from main.
• All changes should be made using a "feature branch" forked from main and merged using our standard PR process.
• Changes should be documented in the CHANGELOG before merging the approved PR.

Pre-release Versions

• Prior to merging a PR, depending on the scope of the change, a release candidate can be published to npm for use on staging. Release candidate versions should follow -rc.0 naming conventions (check NPM Registry to verify most-current version number)
  • Example: if the latest version is 1.16.2 and the proposed change is considered a minor change, the first release candidate version would be 1.17.0-rc.0
• In your feature branch:
  1. update the version in package.json
  2. npm login
  3. npm publish --dry-run to verify package contents and correct version number
  4. npm publish --tag next
  5. In church-center (or proxied app), run yarn add @planningcenter/doxy-web@next

Versioning + Deploying to NPM

Refer to the Planning Center release strategy on Notion.

Deploying Storybook:

• yarn deploy:storybook
• view changes: https://planningcenter.github.io/doxy-web/

Consumable CSS

Import @planningcenter/doxy-web/dist/css/doxy-web

Importing React Components

import { Heading } from "@planningcenter/doxy-web"