Beryl Design system

Primitive components for react-native-web & Beryl branded components

yarn add @weareberyl/design-system

For web

You also need to install peer dependencies:

yarn add react react-dom react-art

For native

Everything should work as normal without any changes.

Running the storybook

yarn start

Testing changes in other projects

We'll use yalc to better simulate a npm package publish and install. So, first, follow the steps from yalc to install it in your machine.

Setup

On beryl-design-system folder:

yarn build # builds the design system package
yalc publish # publishes as a npm package, but locally

On basis-engineering folder (or any other project):

yalc add @weareberyl/design-system # install from the "local npm"
yarn install # make sure added dependency is used, yarn.lock is updated
yarn start # make sure packager is restarted

Making changes

After making changes to the design system code, we need to publish the changes once again.

On beryl-design-system folder:

yarn build # builds the design system package with the changes
yalc publish --push # updates the published local package

On basis-engineering folder (or any other project):

yarn install # make sure added dependency updated
yarn start # make sure packager is restarted

Cleanup

On basis-engineering folder (or any other project):

yalc remove @weareberyl/design-system # puts back the symlink to the npm package
yarn install # updates yarn.lock

Deploying the storybook

yarn storybook:build
yarn storybook:deploy

Releasing the package

Releases are managed by git tags. So to make a release do git tag with your version eg 0.1.4-rc.1, then push the tag. Note unlike git tags npm packages can't be hard pushed over.

Accessibility

Make sure we add accesibility tags mentioned here: https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md

Api decisions

Largely inspired by jxnblk and rebass read this - http://jxnblk.com/blog/defining-component-apis-in-react/

• Everything in /primitives is essentially a implementation of rebass with react-native-web, which should be highly configureable agnostic components.
• Everything in /components are beryl specific configurations and composistions of the primitive components.