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.
1,923
questions
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 ...
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 ...
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 }...
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 ...
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 ...
-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
...
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": [
...
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 ...
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,
...
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 ...
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 ...
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'],
...
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 ...
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 ...
-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,
},
});
...
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 '...
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 ...
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-...
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)....
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 ...
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 ...
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 ...
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
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
...
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: ...
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:...
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 ...
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 ...
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 ...