{"id":13394672,"url":"https://github.com/carteb/carte-blanche","last_synced_at":"2025-09-28T23:32:29.930Z","repository":{"id":47180674,"uuid":"50495618","full_name":"carteb/carte-blanche","owner":"carteb","description":"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.","archived":true,"fork":false,"pushed_at":"2019-11-27T14:11:21.000Z","size":3907,"stargazers_count":1501,"open_issues_count":73,"forks_count":47,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-10-29T23:17:28.350Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=6g3-TQ6aaw8","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carteb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-27T09:14:15.000Z","updated_at":"2024-10-29T12:00:51.000Z","dependencies_parsed_at":"2022-07-24T23:32:11.968Z","dependency_job_id":null,"html_url":"https://github.com/carteb/carte-blanche","commit_stats":null,"previous_names":["pure-ui/styleguide","pure-ui/carte-blanche"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carteb%2Fcarte-blanche","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carteb%2Fcarte-blanche/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carteb%2Fcarte-blanche/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carteb%2Fcarte-blanche/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carteb","download_url":"https://codeload.github.com/carteb/carte-blanche/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234575214,"owners_count":18854924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T17:01:27.771Z","updated_at":"2025-09-28T23:32:23.425Z","avatar_url":"https://github.com/carteb.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Uncategorized","Dev Tools","Index"],"sub_categories":["Uncategorized","Test","Testing"],"readme":"# Carte Blanche\n\n**IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore.**\n\nCarte 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.\n\n[![Build Status](https://travis-ci.org/carteb/carte-blanche.svg?branch=master)](https://travis-ci.org/carteb/carte-blanche) [![Join the chat at https://gitter.im/carteb/carte-blanche](https://badges.gitter.im/carteb/carte-blanche.svg)](https://gitter.im/carteb/carte-blanche?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n![Screenshot of Carte Blanche](https://cloud.githubusercontent.com/assets/7525670/15761445/8ae05d4a-2918-11e6-8573-bd9bd0ef2330.png)\n\n## 30 seconds feature video on Youtube\n\n[\u003cimg width=\"450\" src=\"http://img.youtube.com/vi/6g3-TQ6aaw8/maxresdefault.jpg\" \u003e](http://www.youtube.com/watch?v=6g3-TQ6aaw8)\n\n## Setup\n\n**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!**\n\n**In addition we haven't invested time to make it work on windows yet. Let us know in case you want to help.**\n\n**`react@^15.0.0` is required**\n\nSetting up Carte Blanche is an easy two-step process:\n\n1. Install the plugin with `npm install --save-dev carte-blanche`\n\n2. Add it to the plugins in your development webpack configuration, specifying a relative path to the folder with your components in the `componentRoot` option:\n  ```JS\n  var CarteBlanche = require('carte-blanche');\n  /* … */\n  plugins: [\n    new CarteBlanche({\n      componentRoot: './src/components'\n    })\n  ],\n  ```\n\nThat's it, now start your development environment and go to `/carte-blanche` to see your Carte Blanche!\n\n## Options\n\nYou can specify some options for the webpack plugin:\n\n- `componentRoot` (required): Folder where your component modules are.\n\n  ```JS\n    plugins: [\n      new CarteBlanche({\n        componentRoot: 'src/components'\n      })\n    ]\n  ```\n\n- `dest` (default: `'carte-blanche'`): Change the location of your Carte Blanche. Needs to be a path.\n\n  ```JS\n    plugins: [\n      new CarteBlanche({\n        componentRoot: 'src/components',\n        dest: 'components'\n      })\n    ]\n  ```\n\n- `plugins` (default: `ReactPlugin`): An array of plugins to use in your Carte Blanche. *(Want to write your own? See [writing-plugins.md](./WRITING-PLUGINS.md) for more information!)*\n\n  ```JS\n    var ReactPlugin = require('carte-blanche-react-plugin');\n    var SourcePlugin = require('carte-blanche-source-plugin');\n\n    plugins: [\n      new CarteBlanche({\n        componentRoot: 'src/components',\n        plugins: [\n         new SourcePlugin({ /* …options for the plugin here… */ }),\n         new ReactPlugin()\n        ]\n      })\n    ]\n  ```\n\n- `filter` (default: matches files that start with a capital letter and/or folders that start with a capital letter and contain an index file): Regex that matches your components in the `componentRoot` folder. *We do not recommend changing this, as it might have unintended side effects.*\n\n  ```JS\n    plugins: [\n      new CarteBlanche({\n        filter: /.*\\.jsx$/ // Matches all files ending in .jsx\n      })\n    ]\n  ```\n\n- `hot`: The tool tries to auto dedect if you use HotReloading in your application. In any case if you don't have HotReloading we recommend to deactivate it with this option. Set it to true in case to force Carte Blanche to include it.\n\n  ```JS\n    plugins: [\n      new CarteBlanche({\n        hot: false\n      })\n    ]\n  ```\n\nThis 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)*\n\n### ReactPlugin Options\n\n- `variationFolderName` (default: `variations`): The name of the folders that stores the variation files.\n  ```JS\n  new ReactPlugin({\n    variationFolderName: 'examples'\n  })\n  ```\n\n- `port` (default: 8082): The port the variations server runs at.\n  ```JS\n  new ReactPlugin({\n    port: 7000\n  })\n  ```\n\n- `hostname` (default: `localhost`): The URL the variations server runs at.\n  ```JS\n  new ReactPlugin({\n    hostname: 'mydomain.com'\n  })\n  ```\n\n- `injectTags` (default: empty Array): Injects these tags into the iFrames of the rendered components. Useful for webfonts, stylesheets, etc.\n  ```JS\n  new ReactPlugin({\n    injectTags: ['\u003clink href=\"…\" rel=\"stylesheet /\u003e'],\n  }),\n  ```\n  Example usage: https://github.com/carteb/carte-blanche/blob/master/examples/users/webpack.dev.babel.js#L35-L37\n\n- `files` (default: empty Array): Users can add custom .js and .css files to the iFrame with the files option.\n  ```JS\n  new ReactPlugin({\n    files: [\n      path.join(__dirname, 'customStyles.css'),\n    ],\n  }),\n  ```\n  Example usage: https://github.com/carteb/carte-blanche/blob/master/examples/redux/todomvc/webpack.config.babel.js#L30-L32\n\n## Plugins\n\nThis is a list of endorsed plugins that are useable right now:\n\n- **[`carte-blanche-react-plugin`](./plugins/react)**: CarteBlanche + React = ❤︎ (installed if no other plugins are specified)\n- [`carte-blanche-source-plugin`](./plugins/source): Show the source code of your components right in the interface!\n\nWant to write your own plugin? Check out [`writing-plugins.md`](./WRITING-PLUGINS.md)!\n\n## Examples\n\nExamples 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 `:`.\n\nFor example, to run the Redux TodoMVC example, run `npm run example:redux:todomvc`.\n\n## License\n\nCopyright (c) 2016 Nikolaus Graf and Maximilian Stoiber, licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarteb%2Fcarte-blanche","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarteb%2Fcarte-blanche","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarteb%2Fcarte-blanche/lists"}