Stack Overflow
Stack Overflow

Questions tagged [storybook]

Storybook is a development environment for JavaScript UI components. It allows you to browse a component library, view the different states of each component (isolated from the rest of your application), and interactively develop and test components.

Storybook an be used with the following types of JavaScript projects:

More information is available here:

2112 questions
81
votes
7 answers

Storybook-tailwind. How should I add tailwind to storybook

I want to add tailwind to storybook. So that Stories will render just like it will render on web. I used create-react-app project-name --template typescript to create the project. Then to install the tailwind I followed this…
Nivekithan
  • 953
  • 1
  • 6
  • 10
52
votes
9 answers

How to troubleshoot storybook not loading stories?

I'm trying to load up the demo storybook stories (withText, withIcon), using this react guide, but I cannot get any of the example stories to run. For the avoidance of doubt, here's the code file (Histogram.stories.js): import React from…
AncientSwordRage
  • 7,086
  • 19
  • 90
  • 173
44
votes
8 answers

Storybook w/ react-router - You should not use outside

Posting the solution to a problem I had a hard time finding albeit Sensei Googling skills. Although my app with react-router worked without any problem Storybook threw the error "Invariant failed: You should not use outside ". Error:…
Natan Williams
  • 1,447
  • 1
  • 8
  • 13
42
votes
1 answer

TypeError: require.requireActual is not a function

I'm getting an error on my Jest tests: FAIL test/storyshots.test.ts ● Test suite failed to run TypeError: require.requireActual is not a function 1 | import initStoryshots from "@storybook/addon-storyshots" 2 | > 3 |…
Jamon Holmgren
  • 23,738
  • 6
  • 59
  • 75
40
votes
6 answers

Type Error: this.getOptions is not a function For style-loader

Problem While using Storybook, I am running npm run storybook and getting the error below. ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js): TypeError: this.getOptions is not a function Background/Context My goal…
Bryan Guillen
  • 1,149
  • 1
  • 7
  • 9
37
votes
10 answers

Panels not visible in React Storybook

I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6. On running storybook, I see 'No panels Available' message in the bottom of the page where actions panels are rendered. I have imported addon-actions…
darKnight
  • 5,651
  • 13
  • 47
  • 87
31
votes
3 answers

Yarn Build - Babel-loader issues with Storybook

I have a new create react app project, using the typescript template: yarn create react-app my-app --template typescript To this, I have added Storybook with: npx sb init This has given me a working storybook instance, however, yarn build now…
THEMike
  • 1,701
  • 2
  • 17
  • 28
25
votes
2 answers

How to dynamically mutate "args" in Storybook v6 from the component's action?

Let's see we have the simple component ToggleButton: const ButtonComponent = Vue.component('ButtonComponent', { props: { value: Boolean }, methods: { handleClick() { this.$emit('toggle'); } }, template: `
24
votes
5 answers

How to update components props in storybook

I am using storybook (this) to play with my components in isolation. I want to mock all the flux cycle (that in the full app it is done with the help of redux) and update a property using a simple object in the story, but I am missing something. …
ciaoben
  • 3,138
  • 4
  • 27
  • 42
23
votes
4 answers

Storybook: Failed to execute 'createElement' on svg files using @svgr/webpack

My error in the first place is exactly the same as the one described here. I'm using the @svgr/webpack package to import my .svg files as a React component like that: import Shop from './icons/shop.svg' return It works fine on my app but…
johannchopin
  • 13,720
  • 10
  • 55
  • 101
23
votes
1 answer

How to best include assets (images and fonts) referenced in scss files in rollup bundle

I am writing a react component library with typescript, sass and rollup, and I want it to be as standalone as possible. Does anyone have a suggestion on how to best include assets (images and fonts) referenced in scss files? One solution could be…
Mahus
  • 595
  • 1
  • 6
  • 16
21
votes
9 answers

How to resolve aliases in Storybook?

I have a React/Typescript project with Storybook. Storybook works great, but as soon as I start importing files with aliases, it crashes. Example: import Foo from "@components/foo" => crash import Foo from "../../components/foo" => ok The app…
DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
21
votes
2 answers

How to load Global scss files in storybook for angular app?

I am trying to load a custom global style file, theme-default.scss in storybook. Although my components are loading in storybook but styles are not being applied.I followed this tutorial Storybook official docs of custom webpack config. (I am not…
ot954
  • 425
  • 5
  • 19
21
votes
4 answers

import scss file with Storybook

I'm currently facing an issue with Storybook. Everything is working great in my app, with webpack. Storybook seems to have issue with my configuration. Here's my webpack.config.js : module.exports = { entry: './index.js', output: { path:…
awzx
  • 1,023
  • 2
  • 12
  • 31
20
votes
1 answer

Storybook: How to define argTypes for properties that are objects?

I have an input web component that has a very simple API - it has both a get state() and a set state(model). This web component also handles the label which is being used for the input, thus a simple model looks like this: { "value": "Foobar", …
connexo
  • 53,704
  • 14
  • 91
  • 128
1
2 3
…
99 100