wonderbly-components

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

Publishing a new version

• Ensure the changes made on the branch you're working on have been approved and merged into master.
• Checkout to the master branch.
• Make sure you have pulled the lastest changes so master is up to date locally
• To bump the version: npm version [<newversion> | major | minor | patch
• Publish package: npm publish
• Push the versioning commit made by npm publish to master
• Update the package.json of website-v2

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