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.
🚩 Check amazing Uibook example here: https://amplifr.com/uikit.
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 →
You should define two things only:
- The Page — simple object with test component name and cases;
- 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 →
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 ✨
uibook-controller.js
import UibookStarter from 'uibook/starter'
import ButtonUibook from './button.uibook'
export default UibookStarter({
pages: {
Button: ButtonUibook
}
})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.
This mode enables contentEditable for each case, allowing managers,
designers and interface editors to preview content in components.
