Wonderbly Components

https://wonderbly-components.herokuapp.com/

This package is a unit tested bundle of reusable components built in React. Wonderbly website-v2 consumes these components via npm for example:

import Tag from 'wonderbly-components/lib/Tag'

<Tag
  backgroundColor="#7077CC">
  I'm a tag
</Tag>

The site repo also displays component examples via react-styleguidist.

Requirements

• node
• yarn
• heroku cli & account (if deploying from repo)
• npm account (if publishing to npm)

Setup

yarn install

• You will need to npm login and have access from wonderbly
• You will need to heroku login and have access from wonderbly

Commands

yarn start
# fire up styleguide locally

yarn test
# run mocha + enzyme unit tests

yarn test:watch
# rerun tests on file changes

yarn styleguide:copy-assets
# styleguidist requires fonts as static assets from wonderbly-css
# styleguide/assets/** is ignored so these must be copied once per clean install

yarn styleguide:build
# build styleguide locally to ./styleguide-build/

yarn build
# removes ./lib folder and rebuilds production files

yarn watch
# reruns build on file changes
# should be used for local yarn linked development

yarn lint
# lint ./src/

yarn lint:fix
# fix your bad typing

npm publish
# builds and publishes the package

Deployment

Use the #deployment channel to deploy master on slack:

/h deploy wonderbly-components to production

You can also deploy a branch like this:

/h deploy wonderbly-components/chore/gw_deploy-styleguide to production

Linking repositories

If you're working on the website and want to see changes from wonderbly-components on local website.

# in wonderbly-components register packages with yarn
yarn link 
# react must be linked due to react hooks
cd node_modules/react
yarn link

# in website-v2
yarn link wonderbly-components
yarn link react

# in wonderbly-components rebuild on file change
yarn watch