storybookjs / storybook Goto Github PK

Edited by @ndelangen:

I can see quite a bit of traffic to this issue, so I hope by editing this first message I will save a lot of people some time.

This problem occurs for companies that must use private npm proxies, mostly old ones do not properly support npm organisations. Or they are configured to not support them. An example would be artifactory.

Notify your support team about it to get support. More and more open source will eventually (have to) migrate to organisations because the global registry is getting crowded and package names are being squated.

But understandable you want a solution now,
This solution will likely work for you:

create a .npmrc-file in the root of your project (or higher in the directory-tree) with:

@storybook:registry=https://registry.npmjs.org/

If you're on a version of storybook lower than 3 you should use: @kadira:registry=https://registry.npmjs.org/

If the .npmrc file already exists, you can just append to the bottom of the file.

Since storybook has some dependencies in other npm-organisations like @types, you will probably need to add those as well.

@types:registry=https://registry.npmjs.org/

Original message:

Simply cloned your repo and ran npm install and got the error:

npm ERR! 404 Registry returned 404 for GET on https://npm-proxy.fury.io/C__hqNZ_HngaWmEnB-ps/massdrop/@kadira%2fstorybook
npm ERR! 404
npm ERR! 404 '@kadira/storybook' is not in the npm registry.

Otherwise, after a manual reload we can't get the same story.

I'm creating a spearate issue following on #33 when it is not possible to use typescript with storybook as jsx files are not resolved and storybook is concerned only with js files. Here is what I attempted yet it does not work:

const path = require('path');
module.exports = {
  module: {
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        query: { presets: ['react', 'es2015', 'stage-2'] },
        exclude: [path.resolve('./node_modules'), path.resolve(__dirname, 'node_modules')],
        include: [path.resolve('./'), __dirname],
      },
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
};

If you use the -s flag to provide a static file directory, the express routing appears to break and the app fails to load.

It will be great if development steps are added in the Readme. This way contributing can become easier. Thanks.

I think this is a very good way to show mantra to the JS community.

Also, different devs have different storybook use case. With mantra, core module can export a set of apis to allow other devs to add features easily without affecting the core.

I just created the example and moved it to my project.
When i start, it throws error

`Error in multi admin
Module not found: Error cannot resolve module 'stack-source-map/register' 

Module build failed: Error Cound't find preset "stage-2" relative to directory <my project path>`

Please help me.
Anyway, your project is so cool =D I really want to try to apply to my project soon. Love your concept and idea 👍

React native web project requires aliasing it to react-native to keep it like React native.

Do you consider centering the story inside the iFrame ? I currently work on a 27-inch screen and my Button component is pretty much lost in all this space :D

One solution could be to simply center the story on the screen. And of course, let the story scroll if it overflows the viewport.

My project uses Babel 5. Following the setup example, I when I run npm run storybook, I get:

ERROR in ./.storybook/config.js
Module build failed: ReferenceError: [BABEL] /Users/dan/projects/my-project/.storybook/config.js: Unknown option: direct.presets
    at Logger.error (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/file/logger.js:58:11)
    at OptionManager.mergeOptions (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:126:29)
    at OptionManager.init (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/file/options/option-manager.js:216:10)
    at File.initOptions (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/file/index.js:147:75)
    at new File (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/file/index.js:137:22)
    at Pipeline.transform (/Users/dan/projects/my-project/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
    at transpile (/Users/dan/projects/my-project/node_modules/babel-loader/index.js:12:22)
    at Object.module.exports (/Users/dan/projects/my-project/node_modules/babel-loader/index.js:69:12)
 @ multi preview

It comes from the Webpack output. This error seems like a Babel 5/6 mismatch of some sort. Should Babel 6 be a peer dependency, or is this able to work with legacy Babel?

Loving the storybook! Great job, I already added it to several of my packages to showcase their interfaces.

I've bumped into an issue, when a component contains a container that snatches its own data. The data are taken reactively from Meteor source. What is the workflow to accomodat these types of components?

<Component>
   <ContainerOfAnother />
</Component>

When clicked on a HREF we need to prevent any page navigation. Instead we need to fire an action.

Hello,

Good Tool, can you add a TypeScript Definition for use with *.tsx files.

Thanks

Gi

I really love the idea of building a DSL for state mutations. Since this comes as a standalone application it's not possible to integrate it in existing pattern lab solutions. (And I would really like to do that, instead of reinventing the wheel here ;)

So any plans to distribute the logic as a standalone npm module without the UI?

When switching from one item to another in the storybook, the entire left menu disappears. When clicking "clear", it shows up again.

After some investigation, I found out that i only occurs when a scrollbar is present in the left menu.

This is tested in Chrome 48 on OS X.
I could not reproduce the same bug in Safari.

Currently the binary name is storybook-server, but we need to change that to start-storybook.

As briefly mentioned in #16, I'm having trouble getting a pure component to render in a simple reference application. I receive the error Error: inst.render is not a function when attempting to render this component.

I plan to keep digging deeper to try to confirm my suspicions, but thought you may be able to confirm more quickly or guide me in another direction.

Just an idea, but it would be cool to see pixel-perfect diffing of your components/stories to see how they progress over time?

PhantomCSS is a great example of what I mean.

It would be nice if an action could trigger a transition to a different story to simulate interactivity, similar to how you can create simple prototypes with Invision, Framer.js, etc.

For example, say you have a "Toggle" widget with two states, "on" and "off", it would be nice if you could set up the actions for each story to switch to another story to simulate the toggle actually occurring:

storiesOf('Toggle', module)
  .add('on', () => {
    return <Toggle value={true} onChange={action('onChange', 'off')} />
  })
  .add('off', () => {
    return <Toggle value={false} onChange={action('onChange', 'on')} />
  });

Right now, we need to run storybook locally via something like npm run storybook. But, it'd be great, if we can build the final HTML and share it anywhere.

So it'll be something like npm run storybook-build.

Then it'll create a directory in your project and you can upload those HTML file to anywhere you want and share your stories.

When I try to install the package with npm version 3.8.3, I get the following error:

Invalid name: "@kadira/storybook"

Have seen that before?

I'd like to try out storybook in a Docker project that uses boot2docker (picking up the changes using webpack polling). Everything seems to work properly by providing a watchOptions.poll value in the webpackDevMiddleware options. Are you open to making those options configurable? If so, any preference on how it should be implemented?

(Edit: Included lazy: true as an option originally by mistake)

Whenever I trigger a new action that is same as the previous action, it's hard to tell the difference seeing the logger . If there can be a small transition in the newest logged action for a moment when it's added , the difference will be more visible.

Open to sending a PR.

It would be great we can create a set of keyboard shortcuts. Then we can do following this very easily:

• toggle controls (the menu on the left)
• toggle action logger
• full screen component preview window

Hi, it would be great if I could view all stories from the same component on the same page. This would help me a lot to see the general design. for example, I am working on a upload component and I would like to preview all states at the same time. Low prority though. Loving it so far!

Hi there,

Have been playing around with storybook & I like it, but having trouble with the Custom webpack Configurations. I am trying to use postcss-loader with autoprefixer, and having no luck. Does storybook support this? I read in the docs it says the following:

"Usually, there are a lot of things we can do with webpack, but React Storybook allows you to add only custom loaders and plugins."

I am guessing this is why, but just checking incase this is an issue with my setup?

See code for /.storybook/webpack.config.js below

const path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [{
        test: /\.css$/,
        loader: "style-loader!css-loader!postcss-loader",
        include: path.resolve(__dirname, '../')
      }

    ]
  },
  postcss: function() {
    return [precss, autoprefixer];
  }
}

Getting an error when running with this .storybook/config.js:

import { configure } from '@kadira/storybook'

function loadStories() {
  require('../src/SomeComponent')
}

configure(loadStories, module)

Error:

ERROR in ./.storybook/config.js
Module parse failed: ***/.storybook/config.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { configure } from '@kadira/storybook'
|
| function loadStories() {

Seems like babel is not transpiling or it clashes with some config in my package?

I'm trying to use storybook for an existing component in my Mantra app. The ChatInput.jsx component has two import statements at the top for React and the PureRenderMixin. I had assumed that storybook would work out of the box with Mantra apps. Do I need to do some webpack configuration in order to load my component?

This is the error I get from the storybook GUI:

My First Button
ERROR in ./client/modules/chat/components/ChatInput.jsx
Module parse failed: /Users/adrianmc/dev/olis-mantra/client/modules/chat/components/ChatInput.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| import PureRenderMixin from 'react-addons-pure-render-mixin';
| 
 @ ./.stories/chatInput.js 9:17-75

This is the story file:

import React from 'react';
import { storiesOf, action } from '@kadira/storybook';

import ChatInput from '../client/modules/chat/components/ChatInput.jsx';

storiesOf('ChatInput', module)
  .add('simple', () => (
    <ChatInput />
  ));

and perhaps with an editable source and live preview!

This could potentially be implemented in storybook: http://stack.formidable.com/component-playground/

See: https://github.com/bhauman/devcards

Clojurescript devcards is a very similar project but they have implemented some cool features which reminds me iPython notebooks.

It has a concept of card (which is similar to story in our case). Unlike in our case, we can render not only React elements, but markdown and tests as cards.
See: https://vimeo.com/97078905

Which is very useful for creating self describing documentations.

What we can get from Devcards

It's unwise if we just clone all the features of devcards. But we can inspire from it. Here are some of the things we can do.

• Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
• We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
• We shouldn't write test cases inside stories, but we should run tests and watch them. If any of the test failed, we can report it inside the storybook. (May be a red alert and show logs)

When there is an image or a font embedded in the CSS, it is not loaded in the storybook. I tried adding

{ test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
{ test: /\.(svg|ttf|woff|eot)(\?.*)?$/, loader: 'file' }

but this only solves the resolution of the file, yet it is not loade from the correct URL. For example this fails for icon files in semantic ui and bootstrap:

GET http://localhost:9001/themes/default/assets/fonts/icons.ttf  404

It would be fantastic if there was a way to set up multiple "profiles" for global settings. So if you were designing a site that can be themed with a light or dark layout, you could choose "light" from a new nav area (maybe in the bottom left?) and then click through all the stories, then choose "dark" and click back through to see the dark variations of each one.

Think of designing a website template for something like Squarespace or WordPress – you would want to set up 4 or 5 different configuration sets of fonts, colors, etc. – and then flip through all aspects of the website with each configurations set.

I would envision this as a global setting in .storybook/config.js, that then provides a config object to each .add() call in your individual story definition files. I'd be up for helping to build this out if it made sense to add it to the project.

BTW – I love what you guys have done with Storybook. Thanks for building such a great tool for everyone to use!

First of all, this a very good idea ! :)

I find confusing that the story you select jumps to the top of the list. You can't rely on the order since it keeps changing every time you click on a new story. In my opinion, one solution could be to just expand the item in the list without touching the order.

Moreover, a way to empty the action logger box should be a very very good addition. It gets harder to find your informations when the box is filled.

Hi! I've set up a plugin here: https://github.com/vadirn/atom-storybook, but not yet succeeded with rendering url into the pane.

It seems like webview tag (https://github.com/electron/electron/blob/master/docs/api/web-view-tag.md) should be used in order to render the storybook.

Any help is highly appreciated)

Can we add an example to this repository - especially to make additional feature development more accessible, so that we can just fire up within this repo while we try to code on our PRs for you?

Am trying to load CSS from my project folder but it is giving me error "Cannot resolve file or directory". Weird part is thta it is resolving correctly CSS from sub-packages. The style-loader and raw-loader have been added and webpack.config.js configured.

Example:

import "../upload.css"; // FAILS
import "semantic-ui-css/components/button.css"; // WORKS

my webpack.config.js

const path = require('path');
module.exports = {
  module: {
    loaders: [
      {
        test: /\.css?$/,
        loaders: [ 'style', 'raw' ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
};

Let's say that my application is basing on some CSS framework like Semantic UI, Bootstrap or something like that. How can I easily incorporate that styles inside a story book so that my components will display correctly?

Just curious, cool to see express and webpack, just curious.

link: http://design.google.com/resizer/

React Storybook is awesome! I just integrated react storybook in one of my apps! I think one thing is missing is the ability to see my components on different devices. It would be awesome if there is a way toggle device like Google Resizer.

QuotaExceededError occurs when logging for events.

running npm run storybook inside a react project (called graph),

getting this:

> [email protected] storybook /Users/alexis/workspace/graph
> start-storybook -p 9001


React Storybook started on => http://localhost:9001/

webpack built 422a8a052280c45118d6 in 8576ms
Hash: 422a8a052280c45118d6
Version: webpack 1.12.14
Time: 8576ms
            Asset     Size  Chunks             Chunk Names
  admin.bundle.js  2.08 MB       0  [emitted]  admin
preview.bundle.js  2.06 MB       1  [emitted]  preview


[...]

ERROR in multi admin
Module not found: Error: Cannot resolve module 'stack-source-map/register' in /Users/alexis/workspace/graph
 @ multi admin

ERROR in multi preview
Module not found: Error: Cannot resolve module 'stack-source-map/register' in /Users/alexis/workspace/graph
 @ multi preview

ERROR in multi preview
Module not found: Error: Cannot resolve module 'webpack-hot-middleware/client' in /Users/alexis/workspace/graph
 @ multi preview

ERROR in ./.storybook/config.js
Module build failed: Error: Couldn't find preset "stage-2" relative to directory "/Users/alexis/workspace/graph/.storybook"
    at /Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/options/option-manager.js:372:17
    at Array.map (native)
    at OptionManager.resolvePresets (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/options/option-manager.js:364:20)
    at OptionManager.mergePresets (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/options/option-manager.js:348:10)
    at OptionManager.mergeOptions (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/options/option-manager.js:307:14)
    at OptionManager.init (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/options/option-manager.js:465:10)
    at File.initOptions (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/index.js:194:75)
    at new File (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/file/index.js:123:22)
    at Pipeline.transform (/Users/alexis/workspace/graph/node_modules/babel-core/lib/transformation/pipeline.js:45:16)
    at transpile (/Users/alexis/workspace/graph/node_modules/babel-loader/index.js:14:22)
 @ multi preview

^C
icecream:graph alexis$
icecream:graph alexis$ cat .babelrc
{
  "presets": [
    "es2015",
    "react",
    "survivejs-kanban"
  ],
  "env": {
    "start": {
      "presets": [
        "react-hmre"
      ]
    }
  }
}

Hello!

I've started using react-storybook on a component library I am authoring and so far I like it. The only thing I haven't found on the docs and I think it can be better is the ability to specify the config.js path.

Maybe an option like --config on the cli?

This is to support loading static files via a folder.

I would like to write some stories for React components based on some MaterializeCSS components. I'm using the materialize:materialize meteor package. Unfortunately they rely on extending jQuery. I know it is certainly not best practice to use jQuery with React, but some MaterializeCSS components are really handy. I tried to import MaterializeCSS from npm, but failed: Issue 1422.

So, how to work with react-storybook and imports from meteor packages?

My .babelrc:

{
    "presets": [
        "es2015",
        "stage-0",
        "react"
    ]
}

My project tree:

./
├── LICENSE
├── README.md
├── package.json
├── src
│   ├── index.js
│   └── stories
│       └── player.js
└── test
    ├── mocha.opts
    └── reactYoutubePlayer.js

6 directories, 11 files

(./node_modules is excluded).

When I run babel ./src/index.js program works as expected (compiles code using the presets defined in the ./babelrc).

When I run node ./node_modules/.bin/start-storybook -p 9001, I get an error:

React Storybook started on => http://localhost:9001/

webpack built eca07f0b3a93021ca496 in 1950ms
Hash: eca07f0b3a93021ca496
Version: webpack 1.12.14
Time: 1950ms
            Asset     Size  Chunks             Chunk Names
  admin.bundle.js  2.53 MB       0  [emitted]  admin
preview.bundle.js  2.69 MB       1  [emitted]  preview
chunk    {0} admin.bundle.js (admin) 900 kB [rendered]
    [0] multi admin 40 bytes {0} [built]
    (removed, not relevant)
  [312] (webpack)-hot-middleware/process-update.js 3.88 kB {1} [built]

ERROR in ./src/index.js
Module build failed: SyntaxError: /Users/gajus/Documents/dev/gajus/react-youtube-player/src/index.js: Missing class properties transform.
 */
class ReactYoutubePlayer extends React.Component {
    static stateNames = {
        '-1': 'unstarted',
        0: 'ended',
        1: 'playing',
    at File.buildCodeFrameError (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-core/lib/transformation/file/index.js:407:15)
    at NodePath.buildCodeFrameError (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/path/index.js:149:26)
    at pushBody (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:254:20)
    at buildBody (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:233:10)
    at run (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:151:10)
    at PluginPass.ClassExpression (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-plugin-transform-es2015-classes/lib/index.js:63:60)
    at newFn (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/visitors.js:262:19)
    at NodePath._call (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/path/context.js:63:18)
    at NodePath.call (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/path/context.js:47:17)
    at NodePath.visit (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/path/context.js:93:12)
    at TraversalContext.visitQueue (/Users/gajus/Documents/dev/gajus/react-youtube-player/node_modules/babel-traverse/lib/context.js:152:16)
 @ ./.storybook/config.js 6:4-32

It appears that start-storybook is not using ./.babelrc.

Most setups already use a webpack configuration and I wonder why do we use a separate one? Of course I could just symlink my config but that doesn't work because the server just uses the module loaders and plugins but ignores everything else. E.g. if I want to use stylus with the nib plugin there is a stylus option within the webpack configuration:

stylus: {
  use: [require('nib')()],
  import: ['~nib/lib/nib/index.styl']
}

Because that option is ignored I can't use the storybook for components that are using nib :(

Can't we go the other way around? Load the main webpack configuration an add/modify it for the server?

Specially to support CSS module loading.

At work we use typekit to load fonts for our components. They are loaded using the simple Typekit embed code (as seen here: https://helpx.adobe.com/typekit/using/embed-codes.html).

The embed code is two script tags like the following:

<script src="https://use.typekit.net/xxxyyy.js"></script>
<script>try{ Typekit.load(); }catch(e){}</script>

I'm not sure of the best route for adding these script tags in to React Storybook, and wondered if anyone had any ideas!

Would React Storybook be interested in supporting customising the HTML of the iframe to enable the script tags to be added. This would also be useful for loading some external CSS that our components currently depend on.