Retro-ui NPM | npm.io

retro-ui

NES-style (8bit-like) react & styled-components UI

Usage

Install with:

yarn add retro-ui

Add the font via CDN on index.html head:

<!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

Development

This react library is made with styled-components.
Uses react-styleguidist for docs.

Scripts

yarn        # install deps :)
yarn start  # runs a styleguidist dev server with hot reload
yarn lint   # lint rules
yarn test   # run unit/integration tests

To 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 version

Local env

Styling 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 🤖📟

CI & Releases

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 master branch, CI will create a release, build library and docs, and publish to NPM.
On every push to master branch, Github pages will publish the website in docs/ folder.