Questions tagged [nextjs-storybook]

27 questions
3
votes
1 answer

Do you use Storybook as a separate repository?

I'm a junior and I would like to start using Storybook in my Next.JS personal project. I have never used it before and all examples I found are basically design libraries that for example the whole company uses for multiple projects. My question is,…
Nessie
  • 31
  • 1
1
vote
1 answer

Disable Docs menu entry in Storybook

Prior to version 7, the "Docs" were available as a tab at the top after opening a story from sidebar like this: However in version 7, "Docs" were removed from the tab and are now available from the sidebar menu, which clutters the menu space. How…
Qwerty
  • 29,062
  • 22
  • 108
  • 136
1
vote
1 answer

how to implement components made using storybook and react in another real application using github repo link?

Importing storybook components to another project how to implement components made using storybook and react in another real application using github repo link ? by using github-repo link i need to import the storybook into another project
1
vote
1 answer

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 navbar logo is an image in png format I did this to…
Juicio
  • 11
  • 2
1
vote
1 answer

storybook v7 beta, viewports and other options disappear on startup

I'm trying to setup my storybook environment and while it mostly works fine, the viewport tab, and other options, disappear on build/start. I'm not sure what's going on here, I haven't seen any information regarding it and I've been removing…
kevin
  • 2,707
  • 4
  • 26
  • 58
1
vote
0 answers

Need to apply multiple themes to react story book

We have been using react storybook in my projects. As part of design upgradation, we are creating new components without disturbing the existing components. old stories are in mpg-component folder for new component stories we have created…
1
vote
0 answers

Storybook onClick event is not logged unless i add it to argTypes

For the onClick event to be logged in story book Actions tab I have to uncomment the argTypes: { onClick: {} } in the SimpleButton.stories.tsx file. My question is why do I have to do that? Can't it automatically infer that onClick is an action…
1
vote
0 answers

How to access custom helper/function on storybook?

js, I want to ask how to access some custom function that I use on my components ? Here my component Code : [see image here Currently my component have 2 helper, and load from "../app/helpers" Here my storiesbook for that component : see image…
1
vote
1 answer

How to add custom font using @fontface to Storybook? (Need updated answer for storybook version 6.5.5)?

I have tried all the solutions available online to add custom font in the Storybook but failed. Following are the files under .storybook folder that I have added as per this solution: webpack.config.js : const path =…
Anika
  • 11
  • 4
1
vote
0 answers

Storybook gives error on hotreload in Nextjs with Material ui 5

When I refresh the page, I get correct component loaded up. If the component is Typography and i edit a text. It works fine. The error occurs when i change Typography to Button component. Tried storybook-addon-next-material-ui. Same error there …
1
vote
1 answer

Couldn't find story matching - React + Storybook

I am unable to display a story using next.js. Other stories of the app work fine. This one doesn't. Please I have been banging my head against the wall for 3 hours. import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from…
Walter Monecke
  • 2,386
  • 1
  • 19
  • 52
0
votes
0 answers

Storybook js conditional controls breaking code preview?

I am using https://storybook.js.org/docs/react/essentials/controls#conditional-controls in a react component, but when I add if: to the default story, clicking on 'show code' shows me the args as an object, not the component…
0
votes
0 answers

how can i change an args control conditionally base on the value of an other arg in storybook react?

I hope you are fine. I have a react TS Button component. Its variant system is that it has main variants options. It gets main variant from variant prop. Each variant has its own color variants. To understand better, look at this interface, variants…
Saman
  • 171
  • 13
0
votes
0 answers

getInitalProps not working in nextjs page

I have created client side pages using getStaticProps on my Next js application. Now I am creating some server side pages on that using getInitialProps but this is not working , because I am using 'next export' in my package.json.Anyone worked on …
0
votes
0 answers

How can I add component with dot at storybook?

I want to add a component with dot like react component. For example like Button.Icon. If there is a doc exist at storybook's docs probably I miss it. When I added it manually its not working like react component.
Deniz Arli
  • 11
  • 3
1
2