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
Filter by
Sorted by
Tagged with
0 votes
0 answers
16 views

Upgrading Storybook from 7.5.3 to 8.x.x while keeping react version 16.x.x, storybook works but have issue with testing

Running unit test on the story throws following error Cannot find module 'react-dom/client' from '../../../common/temp/node_modules/.pnpm/@[email protected][email protected][email protected]....
0 votes
0 answers
15 views

Deploy Storybook to Github

Trying to deploy Storybook to Github pages, via https://dev.to/kouts/deploy-storybook-to-github-pages-3bij but try as I might, it doesn't seem to do anything. package.json "build-storybook": ...
5 votes
3 answers
3k views

Vuetify theme settings not working in Storybook

(Vue version - 2, Vuetify and Storybook - latest) Consider the following simple button component: <template> <v-btn round color="primary"> <slot></slot> </v-...
5 votes
3 answers
5k views

Empty documentation.json in Compodocs + Storybook + Angular 9

I started to use compodoc + storybook in a Angular 9 project. Installed all the dependencies and Storybook is working fine, but for some reason the documentation.json generated by compodoc is empty, ...
0 votes
1 answer
13 views

ThemeProvider from Styled-components not working in storybook (Next.js 13)

I'm currently working on a Next.js website and using styled-components along with Storybook. While I've configured everything to work well with Storybook, I've encountered an issue with the ...
2 votes
2 answers
550 views

Avoiding null value in Storybook controls

I'm using class-variance-authority to create button variants and then inferring types from it for button props: const variants = cva( { variants: { intent: { primary: [ .....
5 votes
3 answers
2k views

Storybook not calling angular component functions on event

I'm using Storybook to display a angular component. The angular component has a function that is called on click. But storybook doesn't call this function. It just logs an event in the actions tab and ...
27 votes
5 answers
41k views

How can hide storybook control per story arg

I have rails engine project using storybook and mdx files to specify the controls but i need to hide specific control per story <Meta title='Label Component' story='with_tooltip' args={{...
1 vote
1 answer
32 views

In Storybook 8.0.6, Vue 3.4, Typescript - How do I populate a Vue component slot with different subcomponents from a story?

I'm using Vue 3 and have a component which needs to show a variety of different sub-components, depending on context. Using a slot here is the correct answer in Vue3 to achieve this. I'm using ...
26 votes
10 answers
52k views

Error running storybook - sh: 1: start-storybook: not found

I am facing error running storybook.... even on a clean installation. npm run storybook > @ storybook /media/programmersedge/New_Volume/devs/demostorybook > start-storybook -p 9001 -c ....
-1 votes
0 answers
20 views

How to use beautiful soup to scrape storybook website

I am trying to use beautiful soup to scrape a website based on storybook. However, all I use the following code: requests.get(<storybookUrl>) I get a reply but it does not show the storybook ...
1 vote
1 answer
248 views

Using Compodoc for Storybook documentation?

When we create an Angular Storybook project it asks us if we want to use Compodoc for documentation. Does this add something to Storybook that's extra or is it just an alternate way of displaying ...
1 vote
1 answer
586 views

class-variance-authority variants allows "null" value but shouldn't

I use cva like this: export const checkboxVariants = cva('border ...', { variants: { size: { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', }, }, ...
1 vote
2 answers
2k views

how to set up run tests at ci pipeline with storybook and github actions

I have been learning to work with tests in storykook using interaction addon. But i don't know how to run tests before push at main branch(make deploy), A way i found is running all the tests using ...
0 votes
1 answer
59 views

Storybook 8 migration: `Missing "./dist/react-18" specifier in "@storybook/react-dom-shim"`

I'm getting the following error after running the Storybook 8 automigration : [ERROR] Missing "./dist/react-18" specifier in "@storybook/react-dom-shim" package [plugin vite:dep-...
0 votes
0 answers
16 views

how to display html component on executed stories angular

enter image description here enter image description here Good evening to you, I hope you are well, I have a small problem currently that I am working in the stories file of my component. I have two ...
0 votes
0 answers
13 views

Pre authentication with GitHub pages

I am attempting to use BackstopJS for visual regression testing for Storybook. The stories are published to private GitHub pages. When using Puppeteer as the engine I am just hitting the GitHub login ...
0 votes
0 answers
32 views

Tailwind class are not working in my storybook part in nuxt3

I have just launched a nuxt 3.11 project to which I added tailwindcss and when I launch my application my classes load without any problem. However, after installing storybook (and some problems due ...
4 votes
2 answers
524 views

Hide Storybook "new version is available" popup?

Whenever I start Storybook on localhost, I get this: "Storybook [version] is available!" popup This is particularly annoying on mobile as it takes up like 10% of the vertical space, and you ...
1 vote
1 answer
75 views

How to test React own component library without running project

I am creating a component library and now I would like to test my components with something like Jest. I would like my tests to be inside my library project meaning I don't have any access to a ...
0 votes
1 answer
27 views

angular ag-grid doesn't work with storybook

I want to create a storybook for my ag-grid component. I have tried the usual way that I follow for other angular components. But this doesn't seem to work. const meta: Meta<AgGridAngular> ={ ...
0 votes
1 answer
36 views

How do I set isOpen false in the following Storybook story?

I'm developing the following Modal in a Storybook story: import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import { Modal } from '@repo/ui/Modal'; import Title from '@...
0 votes
0 answers
15 views

storybook 7 does not recognize module declarations

I use storybook 7.6.7 for my project. I want to be able to use *.module.scss and *.jpeg files in my stories. however, when I import a module.scss file, I get this error. Cannot find module './*.module....
0 votes
1 answer
35 views

How to update arg in storybook with a function?

I am using a storybook version 8. I have a select component that takes in two arguments: number and function. Function is being called on select change event and should change number argument to a new ...
1 vote
0 answers
36 views

Debugging a NextJS/React application in Storybook through WebStorm

I have a NextJS app I'm working on developing. I'm currently trying out Storybook to develop the various components in isolation of each other. If I run the app via npm run dev then WebStorm will ...
1 vote
3 answers
770 views

"npm run build-storybook" returns error "TypeError: Cannot convert undefined or null to object"

I have a react project built with Vite. I just added a storybook by "npx storybook@latest init", so added "npm install @storybook/builder-vite --save-dev". I can run storybook ...
-1 votes
0 answers
8 views

where to add logic that would apply to the global type dropdown in storybook 8?

I posted the question in detail here: https://github.com/storybookjs/storybook/discussions/26687 But posting it here as well to get more eyes on it. The TL:DR; of it is that I made a new global type ...
0 votes
0 answers
39 views

Vanilla extract Next.js storybook: Can't resolve @vanilla-extract/css/recipe'

I use vanilla extract in next.js project. When i configure vanilla extract in storybook, i meet this error. Cannot find module '@vanilla-extract/css/recipe' at webpackMissingModule (vendors-...
0 votes
1 answer
20 views

Intellisense not working when importing custom npm package

I have a custom npm package i created using storybook. The components work fine in other projects when importing them however the intellisense is not working. When i import the same component within ...
0 votes
0 answers
49 views

Using Pinia store in Storybook

I am creating a app which allows multiple themes. The theme id is stored in a pinia store (app.store.ts) which is them accessed in multiple components using a getter. Im creating stories for these ...
0 votes
0 answers
23 views

Deploying Storybook components in an npm package

I'm currently setting up the design system for my company. We currently have 4 applications running in parallel and we'd like to have a single design system for all the applications. So we've created ...
-1 votes
0 answers
27 views

How to change control values based on selected controls in Storybook?

I have a story with a default component and a variant, when selecting the variant in storybook controls I want the value to update, for example: export const Default: Story = { args: { ...
1 vote
3 answers
2k views

Error: 'ForwardRef' is not exported by node_modules\@material-ui\utils\node_modules\react-is\index.js

I'm building React project with Material UI through storybook and facing this error (attached snap)
4 votes
2 answers
2k views

Storybook MDX: Dynamic Meta Title

How can I set a dynamic title property on a Storybook Meta component in a Markdown Extended *.stories.mdx file? import { Meta } from '@storybook/addon-docs/blocks'; // displays title as 'undefined' ...
0 votes
0 answers
14 views

Storybook for React project with error in Anycable lib

When running Storybook in my React project, the following log appears: ERROR in ./node_modules/nanoevents/index.js 10:23 Module parse failed: Unexpected token (10:23) You may need an appropriate ...
0 votes
0 answers
12 views

Element type is invalid: expected a string (for built-in components) or a class/function but got: undefined

I'm getting below error while trying to dynamically import a storybook root component. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite ...
1 vote
1 answer
59 views

How to provide service at the module level?

I am trying to create a provider for a library module, that when added triggers my factory provider. However, when I do so, the provider never executes the console.log so I know it isn't running... ...
0 votes
0 answers
15 views

How to change preview background color mode when user click the customized addon created by globalTypes

I am creating the following customized addon. export const globalTypes = { mode: { description: 'Select light or dark mode', defaultValue: 'light', toolbar: { title: 'Mode', ...
4 votes
3 answers
1k views

Edge Function middleware is referencing unsupported modules

Im trying to deploy a storybook on vercel and get the following message error: the project uses pnpm as package manager. Ive upgraded the last version of NextJs and Clerk, as well as downgrade NextJs,...
1 vote
0 answers
14 views

Storybook build with i18n not worked

On a nuxt3 project i have a library of components using storybook For example this component with a translation: <script setup lang="ts"> const { t } = useI18n() </script> <...
1 vote
2 answers
2k views

Storybook problem with inputs after upgrading angular to version 13

after upgrading angular to the latest version and stroybook, I have a problem with a component that worked fine before. TS file: const defaultConfig = { h1: "test", h2: "test&...
0 votes
2 answers
410 views

Switching Storybook from Webpack to Vite in Gatsby app

I work on a Gatsby project and I'm hoping to run our Storybook with Vita instead of our existing Webpack setup. I'm clearly not doing it right. I added the plugins: "@storybook/builder-vite":...
0 votes
0 answers
8 views

storybook7 argTypes select

I am trying visible size, variant to select but It wasn't working how to show select? // Button.tsx type ButtonSizeUnion = 's' | 'md' | 'l' | 'xl'; type ButtonVariantUnion = 'filled-primary' | '...
0 votes
0 answers
16 views

Storybook 7: Render different props value for only once component not working

I'm doing my personal project using Next 13, Storybook 7, TypeScript and TailwindCSS. I want to display different color for Button component in Storybook in one canvas but seemly it not apply ...
0 votes
0 answers
58 views

storybook web-components stencil static build

Building storybook stories for web components does not work. The stories are running only in development mode, but the built artifacts do not render. After running npm run build-storybook and python3 -...
10 votes
3 answers
5k views

Is it possible to hide stories in Storybook on the sidebar? But still be able to access them by URL?

I'm trying to do some stuff in Storybook. I have a component called Button and there are too many stories on the sidebar. Is there a way to be able to "hide" the stories on the sidebar but ...
8 votes
4 answers
12k views

Storybook does not render Stories, Error: "useContext(...) is undefined"

If I create a Story for the following Component I only get a couple of messages in a red frame, which do not contain any information I can gain any insight from: import React, { useState, useContext }...
2 votes
2 answers
853 views

Storybook v7 and v8 not displaying React component markup on "Show code"

I have looked around for quite a long time now, checking similar posts here, Storybook documentation, their GitHub posts, etc, to no avail. Since we upgraded first to v7 and then v8, the "Show ...
3 votes
1 answer
861 views

Storybook : How to inject Vue Custom Element styles

I have a Vue 3.2 Custom Elements project, perfectly running via -ce extension and webpack config `chainWebpack: config => { config.module .rule('vue') .use('vue-loader') .tap(...
1 vote
0 answers
38 views

How to install Storybook outside of a NextJS & Tailwind project

Init I have a project made with NextJS and TailwindCSS. Everything's working absolutely fine. The goal I want to install storybook next to my NextJS project, so the structure is as follow: my-project -...

1
2 3 4 5
44