Giter Site home page Giter Site logo

storybookjs / storybook Goto Github PK

View Code? Open in Web Editor NEW
82.5K 922.0 9.0K 802.32 MB

Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

Home Page: https://storybook.js.org

License: MIT License

JavaScript 27.87% Shell 0.01% TypeScript 70.01% HTML 0.22% Vue 0.32% CSS 0.22% Svelte 0.37% EJS 0.06% SCSS 0.01% Handlebars 0.03% Pug 0.04% MDX 0.85%
storybook styleguide testing components webpack ui react vue react-native design-systems

storybook's Introduction

Storybook

Build bulletproof UI components faster


Build Status on CircleCI codecov License
Storybook Community Backers on Open Collective Sponsors on Open Collective Official Twitter Handle OpenSSF Scorecard

Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at https://storybook.js.org!

View README for:
latest next

Table of contents

Getting Started

Visit Storybook's website to learn more about Storybook and to get started.

Documentation

Documentation can be found on Storybook's docs site.

Examples

View Component Encyclopedia to see how leading teams use Storybook.

Use storybook.new to quickly create an example project in Stackblitz.

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.

Community

For additional help, share your issue in the repo's GitHub Discussions.

Projects

Supported Frameworks

Renderer Demo
React Storybook demo React
Angular Storybook demo Angular
Vue 3 Storybook demo Vue 3
Web components Storybook demo Svelte
React Native React Native
HTML Storybook demo HTML
Ember Ember
Svelte Storybook demo Svelte
Preact Storybook demo Preact
Qwik Qwik
SolidJS SolidJS
Android, iOS, Flutter Native

Addons

Addons
a11y Test components for user accessibility in Storybook
actions Log actions as users interact with components in the Storybook UI
backgrounds Let users choose backgrounds in the Storybook UI
cssresources Dynamically add/remove CSS resources to the component iframe
design assets View images, videos, and weblinks alongside your story
docs Add high quality documentation to your components
events Interactively fire events to components that respond to EventEmitter
google-analytics Reports google analytics on stories
graphql Query a GraphQL server within Storybook stories
jest View the results of components' unit tests in Storybook
links Create links between stories
measure Visually inspect the layout and box model within the Storybook UI
outline Visually debug the CSS layout and alignment within the Storybook UI
query params Mock query params
storysource View the code of your stories within the Storybook UI
viewport Change display sizes and layouts for responsive components using Storybook

See Addon / Framework Support Table

Deprecated/Removed Addons

Addons
contexts Addon for driving your components under dynamic contexts
info Annotate stories with extra component usage information
knobs Interactively edit component prop data in the Storybook UI
notes Annotate Storybook stories with notes
options Customize the Storybook UI in code
storyshots Snapshot testing for components in Storybook

To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.

If you're using info/notes, we highly recommend you migrate to docs instead, and here is a guide to help you.

If you're using contexts, we highly recommend you migrate to toolbars and here is a guide to help you.

If you're using addon-storyshots, we highly recommend you migrate to the Storybook test-runner and here is a guide to help you.

Badges & Presentation materials

We have a badge! Link it to your live Storybook example.

Storybook

[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](link to site)

If you're looking for material to use in your Storybook presentation, such as logos, video material, and the colors we use, you can find it all on our brand repo.

Community

Contributing

Contributions to Storybook are always welcome!

  • ๐Ÿ“ฅ Pull requests and ๐ŸŒŸ Stars are always welcome.
  • Read our contributing guide to get started, or find us on Discord, we will take the time to guide you.

Looking for a first issue to tackle?

  • We tag issues with Good First Issue when we think they are well suited for people who are new to the codebase or OSS in general.
  • Talk to us, we'll find something that suits your skills and learning interest.

Development scripts

Storybook is organized as a monorepo. Useful scripts include:

yarn start

Runs a sandbox template storybook with test stories

yarn task

As above, but gives you options to customize the sandbox (e.g. selecting other frameworks)

yarn lint

boolean check if code conforms to linting rules - uses remark & eslint

  • yarn lint:js - will check js
  • yarn lint:md - will check markdown + code samples
  • yarn lint:js --fix - will automatically fix js

yarn test

boolean check if unit tests all pass - uses jest

  • yarn run test --core --watch - will run core tests in watch-mode

Sponsors

Become a sponsor to have your logo and website URL on our README on Github. [Become a sponsor]

Backers

By making a recurring donation, you can support us and our work. [Become a backer]

License

MIT

-the end-

storybook's People

Contributors

arunoda avatar cdedreuille avatar chakas3 avatar codebyalex avatar danielduan avatar dependabot-preview[bot] avatar dependabot-support avatar dependencies-bot avatar domyen avatar gaetanmaisse avatar ghengeveld avatar hypnosphi avatar ianvs avatar igor-dv avatar jonniebigodes avatar jreinhold avatar kasperpeulen avatar kroeder avatar kylegach avatar michaelarestad avatar ndelangen avatar shaunevening avatar shilman avatar storybook-bot avatar thani-sh avatar thibaudav avatar tmeasday avatar tooppaaa avatar valentinpalkovic avatar yannbf avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

storybook's Issues

Center the story within the iFrame ?

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

image

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

Custom webpack Configurations: postcss

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];
  }
}

Packing CSS images

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

Why not Meteor?

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

Getting 404 Registry returned when trying to run `npm install`

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.

Toggle global settings (like a multi-component props addon)

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!

logic as standalone npm module

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?

Example directly within this repo?

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?

Unknown option: direct.presets

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?

Left menu goes blank when switching items

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.

Screen recording

How to work with imports from meteor packages

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?

Can't run the example in my project. Babel problem

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 ๐Ÿ‘

Show some transition while new action trigger is logged

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.

Get some features from ClojureScript devcards

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)

Components with containers

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>

JSX files not resolved

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, '../')
      }
    ]
  }
};

why do we use separate webpack configurations?

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?

Steps for development

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

Module parse failed - Babel loader issue?

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?

Use Mantra?

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.

Add visual/css diffing

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.

parse failed

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"
      ]
    }
  }
}

Show all stories from one component on the same page

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!

Keyboard Shortcuts

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

Configure actions to transition to a different story?

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')} />
  });

Some early reviews

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.

CLI option to specify Storybook configuration

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?

Custom HTML for iframe (was 'Using Typekit')

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.

Support for custom webpackDevMiddleware options?

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)

Allow to create a production build

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.

Specific Webpack Loader is Required for React?

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 />
  ));

Does not use .babelrc

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.

CSS not resolved

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, '../')
      }
    ]
  }
};

How can I use CSS framework styles inside a storybook

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.