NES-style (8bit-like) react & styled-components UI
- Install with:
yarn add retro-ui- Add the font via CDN on
index.htmlhead:
<!DOCTYPE html>
<html>
<head>
<!-- [...] -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
/>
</head>
<!-- [...] -->
</html>- Use like:
import React from 'react'
import { Button, ThemeWrapper } from 'retro-ui'
const App = () => (
<ThemeWrapper>
<Button>{'Rawr!'}</Button>
</ThemeWrapper>
)Detailed docs here
This react library is made with styled-components.
Uses react-styleguidist for docs.
yarn # install deps :)
yarn start # runs a styleguidist dev server with hot reload
yarn lint # lint rules
yarn test # run unit/integration testsTo try out the library from a local build:
yarn build # builds for distributing as npm package
cd ../react-test-app # navigate to a test project
yarn add file:../retro-ui/build # install the library from local versionStyling and linting rules are enforced on local env. Requires prettier and eslint, as well as editor/IDE integration.
Commit message format is enforced to adhere to conventional commits.
Don't worry, there's feedback from the tools when trying to commit 🤖📟
- DeepScan & CodeClimate keep an eye on tech debt and give automated PR reviews
- On every push (master or PR), CI runs linting and unit/integration tests.
- On every push to
masterbranch, CI will create a release, build library and docs, and publish to NPM. - On every push to
masterbranch, Github pages will publish the website indocs/folder.
Yes please!
- Dump all my components from other projects here :)
- eject
crapp - Global resets & fonts via styled-components
- is styleguidist making sense, or switch to storybook?
- Is it possible to source docs from tests?
- Write meaningful e2e tests (wdio?)
Heavily inspired by NES.css, an awesome NES-style CSS Framework 💖🎮🌟