sapera-components v0.0.16-development

Sapera Components

Sapera Pattern Library powered by Storybook and React.

Netlify URL: https://sapera-storybook.netlify.app/

Usage

• Add the dependency to package.json, e.g.

yarn add sapera-components@^0.0.1-development

• Include the components you want.

import { Button } from "sapera-components";

sapera-components provides an integrated TypeScript experience out of the box. The types for each component is provided (following the pattern {Component}Props and can be imported for type-checking while developing.

import { Button, ButtonProps } from "sapera-components";

General Notes

• Each Component has its own folder under src/components/{Component}/.
• Each Component has its tests under src/components/{Component}.test.tsx.
• Each Component has its stories under src/components/{Component}.stories.tsx.

Storybook

To run Storybook use: yarn start:storybook. (served on http:localhost:9009) A storybook preview is automatically built on every commit (deploy-storybook step) generating unique preview URL. The storybook is automatically built and deployed with every master branch commit and served using Netlify.

Testing

Testing works with jest There is a yarn test task that runs (automatically on every build)

Linting

The code is linted with:

• ESLint (linting)
• Prettier (formatting)

There are yarn lint:check and yarn format:check tasks that runs linting checks on every build. There are also yarn lint and yarn format tasks that run on staged files on a pre-commit hook to automatically fix linting issues (when possible).

Publishing

With every tag release the package is automatically published to NPM (automated through CircleCI) you need to:

• update the version number in the package.json
• create a tag on GitHub to match the (semantic) version number to trigger the publish workflow through CircleCI.

The package is built -using rollup.js- to bundle only the components and typing for production usage on other project.

Advanced Usage

Using yarn with git(hub) package

To use the package directly from git (master branch), you need to build the package locally (after installing), this can be done with the following:

yarn add https://github.com/infographicsgroup/sapera-components#master
// or if it's already added
yarn upgrade sapera-components

cd node_modules/sapera-components && yarn build

Developing/Debugging locally in another project

To actively develop a component while simultaneously using the new component in another project, you can elevate the use of yarn link as follows:

git clone https://github.com/infographicsgroup/sapera-components && cd sapera-component
yarn link                       # Create the symlink to be added in other project
yarn build --watch              # Automatically build new version on every change to the components code
cd /path/to/other/project/
yarn link "sapera-components"   # Use the symlink with the latest build edits and fetch latest build on code changes