gerwig v0.1.2

📽 Gerwig

CURRENTLY IN A PRE-ALPHA PHASE. NOT YET READY FOR USE.

The next-gen design system for the British Film Institute.

🍿 Demo and docs

👉 Storybook is here.

There's a living documentation powered by Storybook, where you can see all the available components and their variations.

🎬 Usage

npm install gerwig

// Install peer dependencies
npm install react react-dom styled-components

Import the components you'd like to use into your app. For example:

import React from "react"
import { Card } from "gerwig"

const MyComponent = () =>
    <Card>My content</Card>

💻 Developing

You need node and npm installed.

1. Clone the repo and npm i
2. npm run dev will start up the Storybook playground and start rollup watching for changes.

If you want, you can also include this repo in another app as if it were an npm package using npm link. This is great for developing both side-by-side.

Publish a new version to NPM

1. Set the next version number in the package.json file.
2. npm publish. This will:
   • Run the tests
   • Bundle and transpile the code
   • Create and publish a tarball to NPM

🧪 Testing

We use jest and react-test-renderer to run snapshot tests on all components.

npm test runs all the tests.

If you make changes to the output of components, you can regenerate the snapshot files with jest --updateSnaphots.

The snapshot test cases themselves come from the same stories.jsx file colocated with each component.

🧼 Linting

We use eslint and jsx-a11y to detect potential accessibility issues. Some code editors will automatically pick up problems, and it runs automatically with the jest tests, but you can also lint manually with npm run lint.

What's with the name?

It's a working title, because we started making this soon after the Oscar nominations came out.

We also looked at celluloid, but it was taken on npm!

To-do list

• Add more add-ons to the Storybook playground
• Typescript support?
• Update the styled-components dependency to ~5.0.0