uibook

Uibook

Uibook is a tool for visual testing of React components. With it, you can easily check desktop and mobile view of your components with different combinations of props.

The Key Features:

• Responsive Testing for developers to play with real media queries
• Live Text Editing for designers and editors to check their content
• Installed as a Webpack Plugin, it doesn’t require any additional builder.

:triangular_flag_on_post: Check amazing Uibook example here: https://amplifr.com/uikit.

Usage

Quick Install :hatching_chick:

We’ve designed Uibook for seamless integration to your project. Install it as a webpack plugin, and you’re all set: Uibook doesn’t require any separate bundler.

webpack.config.js

const UibookPlugin = require('uibook/plugin')

module.exports = {
  …
  plugins: [
    new UibookPlugin({
      outputPath: '/uibook',
      controller: path.join(__dirname, '../src/uibook-controller.js')
    })
  ],
}

Read more about installation →

Describe components in Pages :hatched_chick:

You should define two things only:

1. The Page — simple object with test component name and cases;
2. The Case — set of props and callbacks to the component.

button.uibook.js

import UibookCase from 'uibook/case'
import Button from '../src/button'

export default {
  component: Button,
  name: 'Button',
  cases: [
    () => <UibookCase>Button</UibookCase>,
    () => <UibookCase props={{ isSmall: true }}>Small button</UibookCase>
  ]
}

Read more about configuration →

Pass Pages to the Controller :baby_chick:

As soon as you finished your first Uibook Page, you’re ready to write Uibook Controller. This is a place where all Pages included and passed to UibookStarter :sparkles:

uibook-controller.js

import UibookStarter from 'uibook/starter'
import ButtonUibook from './button.uibook'

export default UibookStarter({
  pages: {
    Button: ButtonUibook
  }
})

Read more about Controller →

Launch :rocket:

There is no need in any additional servers or webpack instances. Uibook integrates into your project, so just run your bundler and open /uibook (or your custom address — outputPath) in a browser.

Live Text Editing

This mode enables contentEditable for each case, allowing managers, designers and interface editors to preview content in components.

Special thanks

• @ai
• @demiazz
• @marfitsin
• @iadramelk
• @ikowalsker
• @antiflasher
• @HellSquirrel