Nice default design is great but ability to customize it for particular project is even better.

Possible solutions:

1. Replace CSS Modules with regular BEM: users will be able to add custom CSS via Webpack config.
2. Fix CSS Modules class names (remove hash): same as 1 but easier for Styleguidist development.
3. Other solution I don’t know about?

This does not render correctly:

items: PropTypes.arrayOf(PropTypes.shape({
            value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
            label: PropTypes.any.isRequired
        })).isRequired

Expected result:

items   arrayOf ???

Actual result:

items   arrayOf

I know this is not an issue specifically with react-styleguidist, for example: reactjs/react-docgen#29

This happens in a lot of cases: when extending/composing components, or when using Redux and the connect() wrapper. For example, the following component is not recognised:

class Theme extends Component {
  // ...
  render() {
    // ...
  }
}

function mapStateToProps(state) {
  const variables = selectVariables(state.theme.name)
  return {
    variables: selectVariables(state.theme.name),
    styles: selectStyles(state.theme.name, variables)
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(ThemeActions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(Theme)

When using wrappers, we could use two files: _Theme.jsx (export "raw" component and use it for styleguide), and Theme (that uses wrappers etc.). However it would be great if it just work.

Any ideas on what needs to be done?

module.exports = {
  rootDir: ['./src', './node_modules/material-ui/lib', /* ... */],
  // ...
};

This way it becomes easy to use 3rd party components in examples.

How to add loaders, existing loaders, etc.

• Component preview.
• Live editor.
• Markdown examples rendering.
• Markdown examples hot reload.
• PropTypes documentation.
• Sane styles.
• CLI.
• Ability to extend Webpack config.
• Ability to specify config location via CLI.
• Improve example project.
• Production build.
• Publish example to gh-pages.
• Readme.
• ESLint.
• Travis CI.
• Update GIF.

It would be cool if we could have a task to run all the code examples from the docs and check that they don't throw exceptions both when used with ReactDOM.render and ReactDOMServer.renderToString. I'd like to put it in npm test task for my project and have it checked with CI.

We just need to get the examples using examples.loader, and do it for all the code chunks.

I would even implement it myself, but I can't figure out how. I thought I could write something similar to mocha-loader, but I just don't get what's going on there (it's a pitch loader, whatever that really means).

Or maybe enhanced-require (unmaintained 😞) in Node would help? I have no idea.

Webpack docs about usage in Node.js might be useful.

I do not argue that we need a feature like this in react-styleguidist, but I'd like to have this for my project, and imho having a recipe how to do this could be also useful for others.

If the project already has rules with loaders defined in webpack config, they might conflict with loaders from styleguidist (CSS and JSON loaders for instance).

I'd suggest to keep the styleguidist webpack config minimal and extend the project's webpack config, adding only loaders required for styleguidist to work properly.

Readme says it shoud work:

but this code:

* First
* Second
* third

1. First
2. Second
3. Third

renders like this:

And even the output HTML doesn't look valid, either:

And drop React 0.13 support.

Styleguidist currently uses Babel 5, and my project uses Babel 6.

I have babel config in my package.json, containing the following:

  "babel": {
    "plugins": ["transform-react-jsx"],
    "ignore": ["node_modules/**/*"]
  },

Then when I start styleguidist server, I get:

Module build failed: TypeError: The plugin "transform-react-jsx" didn't export a Plugin instance

This happens because Styleguidist webpack config uses Babel 5, it loads plugins as specified in make-webpack-config (which is fine, these plugins are all compatible), and the plugins from babel config in the upper directory (which is a Babel 6 plugin, thus incompatible with Babel 5).

Hi, first I wanted to say that your project looks impressive! :)

But I just tried styleguidist on my existing project, and it failed with a lot of errors. From what I understand, react-styleguidist/loaders/props.loader.js tried to parse my *.jsx files as ordinary JS (error message is mostly Unexpected token <). I don't know why exactly this happens, but it seems to me that styleguidist has some assumptions about project that aren't mentioned in the readme. I'll try to list what might be relevant here (i.e. how my project differs from your example):

• I use .jsx file extension, the example uses .js.
• I don't use webpack, I use browserify with babel transform.
• I don't use ES6 modules, I use the oldschool require() and module.exports.
• I use the ui/**/*.jsx path for my components, and this path includes unit tests as well. (I use the Jest's recommended directory structure).

Any suggestions what I could do to make it work?

P.S. I just tried react-docgen CLI on some example component of mine and it works fine.

If existing project's .babelrc already uses babel-plugin-react-transform when it will throuw following error:

ERROR in ./~/react-styleguidist/src/index.js
Module build failed: ReferenceError: The plugin "babel-plugin-react-transform" collides with another of the same name

This can be fixed by setting BABEL_ENV for instance to BABEL_ENV=styleguidist in package.json. But I think this can be handled by this package itself. I'll try to submit a PR soon.

-"styleguide-server": "styleguidist server",
+"styleguide-server": "BABEL_ENV=styleguidist styleguidist server",

JSXTransformer is deprecated.

When I try to run react-styleguidist I get this error

ERROR in ./src/browser/components/Layout/Grid.scss
Module parse failed: /Users/smashercosmo/Documents/Projects/oppex-react/src/browser/components/Layout/Grid.scss Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import "Variables";
| 
| .root {
 @ ./src/browser/components/Layout/Grid.react.js 9:16-38

It doesn't know how to deal with imports in scss. Webpack itself handles all these stuff correctly.

Try something like this.

(originally reported in #9 (comment))

I can now run styleguidist, and it can display the props for one component, but when I add another one, it fails:

I think it's because of the enum in the other component's propTypes. Here are the propTypes of the relevant component:

    propTypes: {
        issue: React.PropTypes.object,
        width: React.PropTypes.oneOf([26, 40, 55, 70, 110, 155, 190, 265]),
        style: React.PropTypes.object,
    },

I have a modal that I would like to showcase, but it need to be closed from the beginning. I created a hack to support this, but it would be really nice if react-styleguidist would support something similar out of the box:

<State>
{(state, setState) => 
  <div>
    <Button onClick={() => setState({ isOpen: !state.isOpen })}>Open modal</Button>
    <Modal isOpen={state.isOpen} onClick={() => setState({ isOpen: false })}>Modal content</Modal>
  </div>
}
</State>

This looks like a great project and I just wanted to try it out, but sadly I seem to have an error in my config.

=> npm run styleguide-server

> [email protected] styleguide-server /Users/timm/Projects/react-components
> styleguidist server

Listening at http://localhost:3000

webpack built 2b950ff29d70bb484414 in 145ms
Hash: 2b950ff29d70bb484414
Version: webpack 1.12.2
Time: 145ms
          Asset     Size  Chunks       Chunk Names
build/bundle.js  44.4 kB       0       main
chunk    {0} build/bundle.js (main) 7.37 kB [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client.js 3.11 kB {0} [built]
    [2] (webpack)/buildin/module.js 251 bytes {0} [built]
    [3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
    [4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
    [5] (webpack)-hot-middleware/client-overlay.js 917 bytes {0} [built]
    [6] (webpack)-hot-middleware/process-update.js 2.75 kB {0} [built]

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index in /Users/timm/Projects/react-components
 @ multi main

Any hint would be appreciated.

My config looks like this:

module.exports = {
  title: 'Style guide',
  rootDir: './src',
  components: './components/**/*.js',
}

And my file tree like this:

Any help is appreciated :-)

Development server isn't working properly with the included example. After git clone [email protected]:sapegin/react-styleguidist.git I run the example with:

$ ./bin/styleguidist server --config ./example/styleguide.config.js
Listening at http://localhost:3000

webpack built bb4f1fafc1fb15880004 in 12464ms

http://localhost:3000/works fine. I make some change (either to the components or Readme.md) but hot reload isn't working. I manually reload the page but still don't get the changes.

My environment:

$ node -v
v0.12.7

And npm list output here.

The single reason is: performance.

In this recorded timeline I'm playing with a simple progress bar component. And it seems that anything that might become bigger than page width would cause a full page layout recalculation and re-render (I mean browser rerender, not react). (Rendering is purple in these graphs)

Attaching the nav always via position: fixed and having a margin-right on Layout should fix this.

I found that my components are being styled by the react-styleguidist postcss loader, which is suboptimal, as my project also uses CSS modules with other capabilities than the ones supplied by react-styleguidist. @sapegin seems to agree: #60 (comment)

Ideally I would like react-styleguidist not to use any kind of special loaders for my components. Right now .js, .jsx, .css and .json files are going through the react-styleguidist loaders : https://github.com/sapegin/react-styleguidist/blob/master/src/make-webpack-config.js#L145-L185
I no that this is more controversial wish, but if you don't agree it would be nice to be able to disabled that using a configuration.

Kind regards
Sune

The following produces invalid HTML:

marked.parse('<div>')

...and if the HTML is invalid, I get this error in console:

...and all the code examples after the invalid HTML part are broken.

I guess we could either:

a) report this as bug in marked (but they could say - well, you give inavlid html in, you get invalid html out - it's a big deal mostly with React)
b) check if the produced HTML is valid and throw an error pointing to the problematic file
c) use some other parser like react-markdown

#25 was merged, but I forgot to add the related documentation. TODO :)

Draft:

Writing usage examples

The examples are extracted from markdown code blocks. They can use any components defined on the page (all the components are exposed as global variables) without requiring them. If you need anything else, you can require it just like you would in an ordinary .js file. Here's a markdown example:

Simple example:

    <Message data={ {content: 'Hello world'} } />

More complex example:

    var mockData = require('./mocks');
    <Message data={ {content: 'Hello world'} } />

Note that for mock data, it's often a good idea to use the same mocks in the unit tests too.

If you need more complex demos, you can even use React.createClass right in your code examples, but it's often a good idea to define them in a separate MyComponentDemo.js file instead and then just require them in markdown.

Current examples are too simple.

• require() usage.
• state and setState usage — #45

Any other ideas?

/cc @mik01aj @sunesimonsen @panayi @reintroducing

Right now an empty table is rendered:

💥 2.0.0 is out 💥

There are some breaking changes planned (or needs discussion) for the next release:

• Disable all Webpack loaders for project’s code by default (#57, #60, #62).
• Show warning when project uses different version of Webpack or Babel.
• Render fenced blocks with language flag as regular Markdown code snippets.
• Fallback to file name or folder name if component name can’t be detected in runtime (#74, #84).
• Update docs.

Removed or postponed items:

• Use custom Babel environment (#58) — now we don’t read user’s .babelrc which should fix the problem.
• Move Webpack and Babel to peerDependencies (#56, #61) — see discussion below.
• Make it work with npm 2 (#55, #59, #66). — was fixed before 2.0.
• Use react-docgen to find components (#37) — non-breaking change, can be done later.

Provide a function (as a config option) that will receive a file path and a component name and return a new string.

For example this will allow to have import Button from 'components/Button'; instead of components/Button/Button.js.

This file is resetting styles across the board. Im finding that my inputs don't have borders, my selects look like text with no select styling at all.

I get the following error:

Listening at http://localhost:3000

Error when parsing index.js
Error: Multiple exported component definitions found.

/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:30
                            request: newRequest.path,
                                               ^

TypeError: Cannot read property 'path' of null
    at Tapable.next (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:30:27)
    at Tapable.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:42:5)
    at Tapable.applyPluginsParallelBailResult (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/tapable/lib/Tapable.js:139:14)
    at Tapable.doResolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:83:15)
    at Tapable.resolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:43:33)
    at Tapable.resolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:23:14)
    at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:80:28)
    at /Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:713:13
    at async.forEachOf.async.eachOf (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:233:13)
    at _parallel (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:712:9)
    at Object.async.parallel (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:726:9)
    at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:73:10)
    at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:27:4)
    at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:156:3)
    at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
    at NormalModuleFactory.create (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:141:7)

I'm running version 1.2.1 right now and it also warning me about the multi export:

Listening at http://localhost:3000

Error when parsing index.js
Error: Multiple exported component definitions found.

webpack built 276e76ed2a0dc560b56f in 16786ms

But everything works fine with version 1.2.1.

Do you have any idea what this could be about?

Kind regards
Sune

Right now the structure is very strongly component-oriented. It's a good idea for component libraries, but in real world projects there is a need for overview/explanation pages. Being able to add some introduction, higher-level explanation, documentation of data fetching/processing or just a pile of random snippets of html/jsx would be cool.

Additionally, I'd like to be able to define the order of my pages in generated docs.

Basically, the page breaks because of keys here:

renderComponents() {
    let { highlightTheme, components } = this.props;

    return components.map((component) => {
        return (
            <ReactComponent highlightTheme={highlightTheme} component={component} key={component.name}/>
        );
    });
}

I think we could detect it in styleguide.loader.js and then either fix it (component #1, component #2, etc) or throw an error with some friendly message.

Each time I do npm install <anything> in my project (using npm 2), I get these annoying warnings:

npm WARN unmet dependency /Users/mikolajdadela/code/lb-react-frontend/node_modules/react-styleguidist/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/node_modules/fstream-ignore requires fstream@'~0.1.17' but will load
npm WARN unmet dependency /Users/mikolajdadela/code/lb-react-frontend/node_modules/react-styleguidist/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/node_modules/fstream,
npm WARN unmet dependency which is version 1.0.8

Is this fixable?

First off I want to say I'm pretty excited about this project. I've been working on my own styleguide based on much of the same tech, so I'm excited to potentially work along side others.

One thing I'm currently doing is letting example files be either markdown or full on react components. This way if I need to store state or similar to show examples of how a component works I can. I'm still digging into your code, so maybe this is currently possible, but if not it might be a nice thing to have if there is a simple way to provide it.

The latest version of react-docgen supports React stateless components, it would be really nice if they was also supported by react-styleguidist:

https://github.com/reactjs/react-docgen/commits/v2.4.0

I tested the new version on our style guide and it works great.

Originally suggested by @reintroducing in #12:

Ability to somehow group components with a navigation so you can show/hide only what section you want to see

As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:

http://spothero.com/uniform/#ui/css

I love this idea. My current codebase has around 20 components now, so it's not big, but navigating the page is hard already. I think that it's OK to keep it all on one page, we just need some better navigation. Imho the Bootstrap documentation is a great example of this.

Possibly related issue that might be useful: react-bootstrap/react-bootstrap#51

This project might be useful too: https://github.com/makotot/react-scrollspy

Hi,

As I noticed before in twitter, I've recently made a fork of this repo, creating SourceJS integration plugin - https://github.com/sourcejs/sourcejs-react-styleguidist. This allows to combine all the best from styleguidist features, and SourceJS platform. Demo example of how it works could be found here https://github.com/sourcejs/sourcejs-react-bundle-example.

I changed quite a few things to make integration possible, but it could be a big pain to sync both version in future, so it's better to think which parts we can re-use. I really believe collaboration is the best option we can choose, allowing to contribute to common toolset from both parties.

Would be great, if we can elaborate on it and think which parts could be improved with more flexible configuration, and which components would be nice to decouple from the main repo.

Code and high-level integration description is available in the plugin repo https://github.com/sourcejs/sourcejs-react-styleguidist. Here's a slight overview of my changes and some thoughts about potential re-usage approach:

• Changed entry file

  sourcejs/sourcejs-react-styleguidist@1fe97fc

  Updated src/index.js file, so it could handle different model from styleguide-loader. This is done to render component example per SourceJS spec, because we separate component documentation into different pages.

  I also use there components/Playground directly, since I need only rendered component example and editor.

  Re-use solution: allow to define custom entry file from styleguidist configuration.

• Changed styleguide and example loaders

  https://github.com/sourcejs/sourcejs-react-styleguidist/blob/54884721235709a97b65dadbfec557d9853cd1ec/loaders/examples.loader.js

  Since I've needed custom data model to pass into entry file, I've changed styleguide.loader.js, to keep file re-usable, we can probable expose components key renderer function to configuration.

  Few small changes were also done in examples.loader.js primarily to readExamples function, which should be also overridable.

  Re-use solution: expose rendering functions to configuration, so they could be overridden.

• Updated Playground component

  sourcejs/sourcejs-react-styleguidist@ead8127#diff-7fe7badfce237da87bab50760526fd30R27

  Using custom entry file, we will be able to override any UI components to approach our needs. This should be useful also for theming the styleguide.

• Changed config.js lib and webpack config

  sourcejs/sourcejs-react-styleguidist@ead8127

  I can move my changes from config.js to other abstraction later on, so here's nothing to be changed in the core.

  Changes in utils/utils.js can be handled by just making util functions more robust, and allowing them to accept Object or Array.

Todo

• Allow to define custom entry file from styleguidist configuration.
• Expose rendering functions to configuration, so they could be overridden.
• setComponentsNames and globalizeComponents should accept objects as well as arrays.
• Allow to pass config via the API as well as via a file.
• Document components overriding.

I wasn't sure where to post this so I'm just putting it in an issue. After having worked with this awesome tool a bit over the weekend here are some suggestions which I think would make it more extensible for larger projects:

• Set path to styleguide.config.js
• Set path to template for output
• Set a different syntax highlighter
• If a type is "union" list out the possible types within it
• Ability to toggle showing/hiding code examples
• Ability to somehow group components with a navigation so you can show/hide only what section you want to see

As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:

http://spothero.com/uniform/#ui/css

What do you think about these?

This looks like a fantastic little module but I can't seem to get it working. I'm using Browserify normally as my bundler (not webpack for local dev) with ES6 React components. Here is my config:

module.exports = {
    title: 'SpotHero React Components',
    rootDir: './',
    components: 'frontend/src/js/components/**/*.jsx',
    styleguideDir: './spothero/static/main/uniform/docs-react'
};

If I run the build script and nothing else, the resulting HTML page shows this error:

Error: HtmlWebpackPlugin: Unable to read HTML template "./src/templates/index.html"

If I try to run the server for local dev I just get:

Cannot GET /

When I look at my Terminal window I see this:

[185] ./~/react-styleguidist/~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/react-styleguidist/~/postcss-loader!./~/react-styleguidist/~/sanitize.css/dist/sanitize.css 2.17 kB {0} [built]
  [186] ./~/react-styleguidist/~/style-loader/addStyles.js 6.09 kB {0} [built]
  [187] ./~/react-styleguidist/src/styles.css 1.25 kB {0} [built]

ERROR in ./frontend/src/js/components/breadcrumbs/Breadcrumbs.jsx
Module parse failed: /Users/mprzybylski/Work/SpotHero/SpotHero-Django/frontend/src/js/components/breadcrumbs/Breadcrumbs.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, {Component, PropTypes} from 'react';
|
| class Breadcrumbs extends Component {
 @ ./~/react-styleguidist/loaders/styleguide.loader.js! 3:139-253

Over and over for all my components that its trying to parse.

Any ideas what I'm doing wrong? Really appreciate any help you could offer.

The background-color: inherit; breaks stuff for me, because my styles expect stuff to be transparent by default (so that the parent background-image is visible).

In general, while rules like this would be ok for a newly-starting product, they are not acceptable for a library that should interoperate with other existing styles.

Related: csstools/sanitize.css#43. Maybe upgrading sanitize.css to 2.1 would quick-fix this?

EDIT: but wait... we already have "sanitize.css": "3.0.0" in package.json... I don't understand why this rule is still there.

I will start it here, please post some useful questions/answers that you already have answered when using styleguidist. We can move them to the README when we have more of them.

If you believe that this should not be a FAQ and would better be merged into the main documentation, please comment. :)

Here's one from me:

How can I debug code of my examples?
Just open your developer tools and type debugger; in your code example.

Getting the title'd error why trying to run styleguidist.

I'm not sure what's going on. I tried to troubleshoot myself, but was unsuccessful.

> [email protected] styleguide-server /PROJECT
> styleguidist server

Listening at http://localhost:3000

webpack built 25ce954cda50e939fb85 in 823ms
Hash: 25ce954cda50e939fb85
Version: webpack 1.12.2
Time: 823ms
          Asset     Size  Chunks       Chunk Names
build/bundle.js  45.1 kB       0       main
chunk    {0} build/bundle.js (main) 7.69 kB [rendered]
    [0] multi main 40 bytes {0} [built] [1 error]
    [1] (webpack)-hot-middleware/client.js 3.27 kB {0} [built]
    [2] (webpack)/buildin/module.js 251 bytes {0} [built]
    [3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
    [4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
    [5] (webpack)-hot-middleware/client-overlay.js 883 bytes {0} [built]
    [6] (webpack)-hot-middleware/process-update.js 2.93 kB {0} [built]

ERROR in ./~/react-styleguidist/src/index.js
Module build failed: TypeError: Illegal kind "string" for plugin ""
    at PluginManager.add (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/plugin-manager.js:196:13)
    at File.buildTransformers (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/index.js:237:21)
    at new File (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/index.js:139:10)
    at Pipeline.transform (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/PROJECT/node_modules/react-styleguidist/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/PROJECT/node_modules/react-styleguidist/node_modules/babel-loader/index.js:71:12)
 @ multi main

To preserve displayName when using React.createClass().

The extract-text-webpack-plugin has a bug which is fixed in newer webpack: webpack-contrib/extract-text-webpack-plugin#132

Upgrading react-codemirror to 0.2.0 will probably fix it.

See JedWatson/react-codemirror@5bf2a20#diff-903ef30e8a234bfe0d0d7900f041e618L8884

I'm trying to get up and running and I think I'm getting pretty close. However I'm having an issue with my first component. I'm using a file called Button.jsx that has a const Button = React.createClass({ and export default Button; at the bottom. I have styleguidist setup like so:

rootDir: './src',
components: './components/**/*.jsx',
skipComponentsWithoutExample: true,
getExampleFilename: function(componentpath) {
    return componentpath.replace(/\.jsx?$/, '.examples.md');
}

when I view the style guide I see ProxyClass where I would expect Button then in my example I get:

ReferenceError: Can't find variable: Button

all the docs from the file are fine and the example code is there and looking ok, just no preview or component name.

Hi this is more a question than a issue. I'm trying to use react-styleguidist on a project that as a webpack alias for components, that seems to class with react-styleguidist that is also loading things from components as well: import Layout from 'components/Layout'

Do you know a way around this problem?

Kind regards
Sune

Array of regexp masks or function.

I needed to add the json-loader because the color npm package imports some JSON config files and those break web pack without it.

In order to get this working with styleguidist I had to move the colors package to node_modules/react-styleguidist/node_modules though..

This is how I configure webpack:

  updateWebpackConfig: function(webpackConfig, env) {
    webpackConfig.module = webpackConfig.module || {};
    webpackConfig.module.loaders = webpackConfig.module.loaders || [];
    webpackConfig.module.loaders.push({ test: /\.json$/, loader: 'json-loader' });

    return webpackConfig;
  },

There seems to be a path issue with require in this project.