Home

Awesome

Carte Blanche

IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore.

Carte Blanche is an isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Build Status Join the chat at https://gitter.im/carteb/carte-blanche

Screenshot of Carte Blanche

30 seconds feature video on Youtube

<img width="450" src="http://img.youtube.com/vi/6g3-TQ6aaw8/maxresdefault.jpg" >

Setup

Please note that this project is in a beta state and under heavy development. We encourage you to try it out on your projects and letting us know of any issues you run into!

In addition we haven't invested time to make it work on windows yet. Let us know in case you want to help.

react@^15.0.0 is required

Setting up Carte Blanche is an easy two-step process:

  1. Install the plugin with npm install --save-dev carte-blanche

  2. Add it to the plugins in your development webpack configuration, specifying a relative path to the folder with your components in the componentRoot option:

var CarteBlanche = require('carte-blanche');
/* … */
plugins: [
  new CarteBlanche({
    componentRoot: './src/components'
  })
],

That's it, now start your development environment and go to /carte-blanche to see your Carte Blanche!

Options

You can specify some options for the webpack plugin:

This project has a custom plugin system to make it as extensible as possible. By default, we include the ReactPlugin, which has options of itself. (to pass these in you'll have to explicitly specify it with the plugins option)

ReactPlugin Options

Plugins

This is a list of endorsed plugins that are useable right now:

Want to write your own plugin? Check out writing-plugins.md!

Examples

Examples are in the examples directory. To run them, first run the command npm run examples:directory, where directory is the path to the example, with each directory separated by :.

For example, to run the Redux TodoMVC example, run npm run example:redux:todomvc.

License

Copyright (c) 2016 Nikolaus Graf and Maximilian Stoiber, licensed under the MIT License.