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.

Filter by
Sorted by
Tagged with
0 votes
0 answers
4 views

Storybook manager.ts file triggers compilation errors

I do not understand why it happens but if I have simple manager.ts file like import { addons } from "@storybook/addons"; import { create } from "@storybook/theming"; import { ...
0 votes
0 answers
14 views

Storybook controls disapers when wrapping component in HOC

I have a Component in my storybook that have some controls and looks like this in the UI But when i wrap my component in a HOC export default withAlign(Avatar) it breaks and does not display any ...
  • 2,174
0 votes
0 answers
6 views

How to exclude stories files from building a component

We have a component library with multiple components. We have created stories for each component. if we use some other component in the stories while npm run build it is added as a dependency of the ...
  • 1,371
0 votes
0 answers
10 views

How to rid of linting error with Storybook's Story when using a function instead of object?

Using Windows 11, VSCode, VueJS 3, Vite, TypeScript, Storybook My Button.stories.ts: // Components import ButtonComponent from '../components/basic/Button.vue'; // Types import type { Meta, StoryObj }...
  • 1,417
0 votes
0 answers
12 views

Linking to Story and Passing Args Not Working in Storybook 6.5.16

The link from the Icon Library documentation to the Icon story Example is not keeping the args passed to it via the URL. Reading the documentation, it seems I should be able to pass this value; ...
0 votes
0 answers
15 views

Storybook and Bootstrap Icons

I have my Storybook running nicely, but on our Frontend we use Bootstrap icons Icons. I actually put them all in a JS file, called iconNames.js and I use it in my story options. But as you can see, it ...
  • 434
0 votes
1 answer
20 views

Gitlab pipeline - deploy subfolders to gitlab pages

I have a small Storybook project that is hosted on Gitlab. I use Gitlab pages to host the storybook. The project builds at folder called storybook-static and then the files from this folder are served ...
0 votes
0 answers
27 views

Global styles not working in Storybook (v6.5) with Next.js v13.1.6

I am facing an issue with global styles in Storybook(v6.5) not working on Next.js version 13.1.6. I have set up the same configuration on ReactJS and it's working perfectly fine. In my Next.js project,...
0 votes
0 answers
15 views

Storybook react-native error in while running on windows not able to make proper stories.require.js file

I have implemented the storybook(v 6.5) in react-native in my root project when i run the script to run storybook on my device which is andriod and ios the file which is created IN .ondevice folder is ...
0 votes
0 answers
57 views

Vue.js / Vite - How to export components from one project and consume in another via NPM packages

I am trying to create a UI library which stores components and exports them to be used in multiple projects. Some components render without any issues, however, some components will not render and ...
  • 49
-1 votes
1 answer
60 views

Error: error:0308010C:digital envelope routines::unsupported when trying npm run storybook

when i try npm run storybook I am getting following error in terminal Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object....
0 votes
0 answers
15 views

Svg is not showing in Storybook

tried multiple solutions, but it goes nowhere. Svg icons are not displayed in storybook, but works everywhere except this case. There're multiple warnings related to icons in storybook screenshot ...
  • 1
0 votes
0 answers
16 views

React Fluent UI integration with Storybook

The fluent UI components are breaking inside storybook view. Do we need to add any specific addons inside storybook main.js ? Please find below the details: .storybook/main.js "addons": [ ...
  • 35
0 votes
0 answers
12 views

Toggle Storybook's UI Dark/Light mode

I'm trying to use the storybook-dark-mode plugin with storybook 7, but unfortunately the light/dark theme mode is not applied on the first load. Even if I refresh the page, the light theme is not ...
  • 312
0 votes
0 answers
10 views

Unable to abstract the CSF Default Export with a function

I want to abstract the CSF default export object for Storybook, like below: metaFunction.js export const getMeta = (title, component) => ({ title: `Example/${title}`, component: component, ...
  • 2,790
0 votes
0 answers
37 views

SVG into a button | Typescript & React

I want to put an SVG element on a button and when the mouse is over it it changes color along with the background. However, I have not been able to achieve it. Do you think you can help me? I'm using ...
0 votes
0 answers
32 views

react component library and storybook Error: Cannot find module 'react/package.json'

i have a component library built with react, and i have storybook for documentation. I dont want to add react and react-dom to package.json because in my webpack i configured these as external ...
0 votes
2 answers
57 views

How do we configure the loading of global Angular Material theme stylesheets for Storybook?

How do we configure Angular Themes for Storybook such that the Storybook rendered components can load all the classes provided by the Angular theme? There's a Styling and CSS "Hint" in the ...
  • 39.9k
0 votes
0 answers
13 views

In Storybook using addon-controls, how do I make one control dependent on the value of another?

I have a data structure { domains: [ { id: 'd1', text: 'd1 text', questions: [ { id: 'q1', text: 'foo' } ] }, { id: '...
2 votes
0 answers
48 views

How to use emotion with storybook and vite?

I already spent some 5+ hours and can't solve the problem I am using in my project vite, storybook, react, typescript and emotion for styles(css in js) when i started storybook i got error message ...
1 vote
0 answers
12 views

StorybookJS - Is there a way to export multiple stories at once in an array, rather than named exports?

So the typical way to export stories from a file is named exports: export const Basic = Template.bind({}); export const Another = Template.bind({}); My use case is that I would like to be able to ...
  • 1,885
2 votes
1 answer
100 views

Creating a separate files for just CSF Stories

My current storybook file looks like the following: Button.stories.js: import { Button } from './Button'; export default { title: 'Example/Button', component: Button, tags: ['autodocs'], ...
  • 2,790
0 votes
0 answers
8 views

Chartworks builder doesn't work locally on react

I'm trying to use Chartworks (https://www.chartworks.io/Documentation/html5) on my Storybook (using React.js), but It doesn't work properly as I see some files don't download. I assume, according to ...
  • 129
0 votes
0 answers
8 views

"ReferenceError: Messages is not defined" in the storyBook

I'm trying to incorporate storyBook into my react project. When I created a new story for my component, I get an error ReferenceError: Messages is not defined . In the actual Component, Messages is ...
  • 131
-1 votes
0 answers
24 views

Storybook Story: Typescript story function function template wrapped in parenthesis? [duplicate]

Storybook creates story templates like this: const Template: Story = args => ({ props: { ...args, onPinTask: actionsData.onPinTask, onArchiveTask: actionsData.onArchiveTask, }, }); ...
  • 39.9k
0 votes
0 answers
43 views

"Field 'browser' doesn't contain a valid alias configuration error" in storybook

I have an alias in paths in main tsconfig.json but it does not work with "@nrwl/storybook": "^13.1.4" and webpack 5.37.0. I got an error when I try to import module: ERROR in ./...
1 vote
0 answers
39 views

TypeError: Cannot read properties of undefined (reading 'options') storybook, nextjs [closed]

I encountered this error while trying to integrate storybook with my Nextjs project info @storybook/react v6.5.16 info => Loading presets ERR! TypeError: Cannot read properties of undefined(reading'...
1 vote
1 answer
36 views

Storybook: Type Errors with Angular project and fullcalendar lib

When configure the Storybook(6.5) with Angular (15) I got the next errors: Error: node_modules/@storybook/theming/dist/ts3.9/index.d.ts:18:13 - error TS2724: 'React' has no exported member named '...
  • 991
0 votes
0 answers
7 views

Composed components in Storybook

How to deal with composed components in storybook like below? I have components inside component so argTypes in story will be taken only for Alert one. I can create separate stories for each children, ...
0 votes
0 answers
70 views

How to handle slots in Vue3 & Storybook 7

I am trying to pass in a component (UIButton) as a slot in another component (UICard) in ButtonAsSlot story. In the ButtonAsSlot story, I am passing default: '<UIButton v-bind="{type: \'button\...
0 votes
0 answers
11 views

Data-driven creation of stories in Component Story Format for Storybook without using storiesOf() and supporting actions

The following code reads an array and successfully creates Storybook stories. I am trying to solve two problems: The storiesOf() function is not expected to be available in the future. The ...
  • 1,312
0 votes
0 answers
20 views

A storybook error related to 'emotion' occurred in an environment using swc

I am using the existing babel and switching to swc. But the following error occurred. Error: Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or ...
0 votes
0 answers
19 views

Trouble using @aws-sdk/client-transcribe-streaming in storybook

I'm new to aws transcribe and can only build simple UI components in storybook. When I tried to use aws transcribe, I'm getting a weird compiling error ERROR in ./node_modules/@aws-sdk/middleware-...
  • 140
0 votes
0 answers
25 views

How to ignore all private member using compodoc?

I've set up compodoc and it's successfully generating a documentation.json file, however, it's documenting all private members of my components and cluttering the UI (in my case it's the storybook UI)....
  • 3,784
0 votes
1 answer
70 views

Storybook with React Context, decorator causing story not to show up in Storybook

I'm trying out Storybook with React, and I have a component (Header) which is wrapped by AuthContext. Following the docs, I've added this context provider as a decorator, but that causes the story to ...
  • 142
0 votes
1 answer
52 views

Can a destructed assignment return any number of objects?

I have a series of Storybook stories, and a function that returns a ComponentStory object. I'm trying to think of a succinct way to clone a bunch of stories, without having something like this: export ...
  • 1,885
0 votes
0 answers
20 views

Nuxt storybook - add scripts such as google maps

I'm adding a Google Maps component to my Nuxt storybook project but I'm struggling to register the maps API. I have tried adding it to the 'head' in nuxt.config.js as well as loading it directly in my ...
  • 367
1 vote
0 answers
20 views

Storybook customization

There is a way to customize my Storybook UI? I want to change all the default icons with my custom icons. I know that is possible to add some custom themes but I want to know if is possible to change, ...
2 votes
0 answers
73 views

string interpolation for dynamic html attributes in template literals

I am currently working on a project using the storybook. This is what I have in mdx file now: export const Template = ({dark, width, height, theme}) => { return html` <my-button @...
0 votes
0 answers
17 views

Integrate figma inside storybook

I try to integrate figma inside my storybook I have installed the addon pnpm add -D storybook-addon-designs In my main.ts i add new addon import { join } from 'path' import { Configuration } from '...
  • 1
-1 votes
1 answer
60 views

Caprover nginx host mjs files

I have a caprover application with this nginx code: <% if (s.forceSsl) { %> server { listen 80; server_name <%-s.publicDomain%>; # Used by Lets Encrypt ...
0 votes
0 answers
68 views

Styles not showing up with bundles up Chakra UI Components using Rollup (with typescript React and Chakra UI)

I am trying to build a Chakra UI Component Library using Typescript, React and Chakra UI. However after bundling the folder and using npm link to test my library out, none of the CSS styling is ...
0 votes
0 answers
40 views

Storybook not rendering images in png and jpeg format

I'm using Nextjs and storybook , storybook isn't displaying images that are in png and jpg format. It only displays images that are in svg format I expected to get an image but got a broken image ...
  • 1
0 votes
0 answers
15 views

Interface imported from another file not show as control storybook

Im starting to explore storybook recently and had a problem with controls. At first this way is work with storybook to get the component props show up as control interface IInput { type?: 'text' | '...
0 votes
0 answers
22 views

Storybook install failed caused by fsevents

I'm trying to install storybook on my project. I've got the next error : npm install @storybook/vue3 --save-dev npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for fsevents@2.1.3: ...
  • 580
0 votes
0 answers
12 views

Storybook and support for type modifiers on Import Names

My storybook seems to crash on launch since implementing type Modifiers on Import Names in my codebase a while back. When running storybook, it throws this type of error on multiple files: SyntaxError:...
  • 626
0 votes
0 answers
11 views

My react component doesn't render normally in storybook

I'm using Storybook for React for the first time. I'm using a React template called "CoreUI". i'm using a premade component but the thing is that when i try to render this component in ...
  • 11
0 votes
1 answer
77 views

Storybook with Actions Angular component

I am trying to connect the eventemitter of an Angular button to Storybook actions but the action is not triggering. I can see in the console that the button is being clicked. But its not shwing up in ...
  • 638
0 votes
0 answers
17 views

How to hide "label!" on Storybook project

I have a Storybook project with Nuxt (Vue) set up. In the button component, a "label!" alert is shown. Where is this coming from? How can I change the settings to make it disappear?
0 votes
0 answers
26 views

Storybook: how do I add controls for subcomponent?

I building a FE library using Storybook, and I need to know how to use controls for subcomponent. I even read this article without success. As you can see from my screenshow, the DrawerHeader doesn't ...

1
2 3 4 5
39