Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bfi-digital/bfi-design-system
the new design system for bfi
https://github.com/bfi-digital/bfi-design-system
design jest react storybook system
Last synced: 4 months ago
JSON representation
the new design system for bfi
- Host: GitHub
- URL: https://github.com/bfi-digital/bfi-design-system
- Owner: bfi-digital
- Archived: true
- Created: 2020-01-14T14:07:59.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-03T14:30:18.000Z (almost 2 years ago)
- Last Synced: 2024-04-26T21:04:27.317Z (9 months ago)
- Topics: design, jest, react, storybook, system
- Language: JavaScript
- Homepage: https://design-system.bfi.digital
- Size: 19.6 MB
- Stars: 0
- Watchers: 10
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Archived!
This repo has now been merged with the [web frontend](https://github.com/bfi-digital/bfi-web-frontend/)
# 📽 BFI Design System
[](https://app.netlify.com/sites/gerwig/deploys) [](https://circleci.com/gh/bfi-digital/bfi-design-system)
The next-gen design system for the [British Film Institute](bfi.org.uk).
Compatible with Node 16 & NPM 8.
## 🍿 Demo and docs
👉 **[BFI design system is here.](https://design-system.bfi.digital)**
This is a living documentation powered by [Storybook](https://storybook.js.org/), where you can see all the available components and their variations.
## 🎬 Using the design system
```{bash}
npm install bfi-design-system
// Install peer dependencies
npm install react react-dom styled-components
```
Import the components you'd like to use into your app. For example:
```{bash}
import React from "react"
import { Card } from "bfi-design-system"
const MyComponent = () =>
My content
```
Each component has documentation in the design system explaining the avaliable props, how to use it, and any guidence on using it.
## 💻 Developing the design system
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`](https://docs.npmjs.com/cli/link). This is great for developing both side-by-side.
### How to publish a new version to NPM
1. Ensure all tests pass with `npm test`.
2. If the snapshot tests are out of date due to changes in the components then ensure all is working and update them with `npx jest --updateSnapshot`.
3. Increment the next version number in the `package.json` file.
4. `npm publish`. This will:
- Run the tests
- Bundle and transpile the code
- Create and publish a tarball to NPM
5. If you are wanting to utilise the updated design system, for example in the BFI [`web frontend`](https://github.com/bfi-digital/bfi-web-frontend) you will then need to update the version number of the design system in the `package.json` file within that repo.
## 🧪 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 --updateSnapshot`.
The snapshot test cases themselves come from the same `stories.jsx` file colocated with each component.
### 🧼 Linting
We use `eslint` and [`jsx-a11y`](https://www.npmjs.com/package/eslint-plugin-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`.
## To-do list
- Add more add-ons to the Storybook playground
- Typescript support?