I created an UI library with several components. These components must not be changed in the frontend, and all their variations must be defined in the library, so they only need to pass props to the component. For the library I’m using React + Storybook + TypeScript + Rol lup. I don’t want to use styled-components because the project must
Tag: storybook
“ being surrounded with quotes when sending to “, causing SVG to not render
When attempting to use Material-UI’s SvgIcon component the <path> is being surrounded by quotes, causing the SVG to not render. I am working out of Storybook in an MDX file. To render the SVG I’ve tried a few methods, but they all result in the same output. The most straightforward of these attempts is: The reference going into <SvgIcon> is
Typescript in storybook with props type using parameter
I have a component: I am writing the corresponding storybook I get error from storybook: How can I specify? write? declare? the argument in storybook with this way? Thx Answer TableProps is a generic type itself so you need to pass its generic type for example, the code below specifies any as TableProps’s generic type
How to preview component with react portal using storybook.js
I implemented a Popper component using popper.js, and I used React’s Portal to render popper element. And now I want to preview my popper component, but It fails to create portal on storybook.js Here’s my approach. .storybook/preview.js Portal.tsx Capture of Error Message Is there any way to show component using react portal on storybook? If not, is there other way
Storybook does not start
I have created react app with and create-react-app (and not made any changes in the app ) and initialized storybook by running npx sb init but running yarn storybook gives the following error. I have also tried this with nextjs but storybook gives the same error. Running npx sb info give the following info. Answer It seems that my Windows
Storybook not showing styles
I have a dialog component which is using the Primereact dialog internally. When I make a storybook for the same, the custom css for button is being imported as it is imported inside dialog.jsx. But the default css of Primereact dialog is not loading and reflecting in the storybook. Although it is being loaded in my React app. dialogComp.jsx dialog.storybook.js
VSCODE Javascript template string become white and lost highlight in a non deterministic way
I don’t know exactly how to express it in words to find related problems. In some cases, apparently random, when using JavaScript string templates, the text editor loses becomes white, with bold text and makes editing the code very difficult. First appearance of the problem was when I started working with javascript string for GraphQL query, then it started showing
Storybook with absolute paths
In our app we use absolute paths for importing. As an example if we have a path which is relative to the src folder, we can just write import module from “components/myComponent”. The issue is that this is not working in storybook. After some digging it turns out you can take the default webpack config and extend it as needed