storybook

How to dynamically mutate “args” in Storybook v6 from the component’s action?

by

I had the same exact issue, and kept looking for days, till I stumbled upon this github post: https://github.com/storybookjs/storybook/issues/12006 Currently in my React (am sure vue approach will be similar), I do following: import React from ‘react’; import CheckboxGroupElement from ‘../CheckboxGroup’; import { STORYBOOK_CATEGORIES } from ‘elements/storybook.categories’; import { useArgs } from ‘@storybook/preview-api’; export default … Read more

How to resolve aliases in Storybook?

by

Just add this in your .storybook/main.js const path = require(‘path’); module.exports = { “stories”: [ “../components/**/*.stories.mdx”, “../components/**/*.stories.@(js|jsx|ts|tsx)” ], “addons”: [ “@storybook/addon-links”, “@storybook/addon-essentials”, ‘@storybook/preset-scss’, ], webpackFinal: async (config) => { config.resolve.alias = { …config.resolve.alias, ‘@/interfaces’: path.resolve(__dirname, “../interfaces”), }; return config; } } here interface is folder at my project root It works For Me

Yarn Build – Babel-loader issues with Storybook

by

It is a known issue. If you are using yarn, you can easily get around it using resolutions. Add the following to your package.json to allow yarn to resolve babel-loader version 8.1.0 (the version required by CRA, not Storybook): “resolutions”: { “babel-loader”: “8.1.0” }, After that, make sure to run yarn install to refresh your … Read more

Type Error: this.getOptions is not a function For style-loader

by

Solution After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions. Steps Downgraded style-loader 1 major version to 2.0.0: npm i style-loader@2.0.0 Then, as luck would have it, I ran into the same issue with css-loader Downgraded css-loader 1 major version to … Read more

Storybook w/ react-router – You should not use outside

by

Here’s what worked for me: Create a preview.js file in your .storybook folder. Add the following global decorator in your preview.js file. import React from “react”; import { addDecorator } from “@storybook/react”; import { MemoryRouter } from “react-router”; addDecorator(story => <MemoryRouter initialEntries={[“https://stackoverflow.com/”]}>{story()}</MemoryRouter>); Notes Storybook version used: “@storybook/react”: “^5.3.13” Based on this solution here More about … Read more

How to troubleshoot storybook not loading stories?

by

The main.js in your ./storybook folder contains the line stories: [‘../src/**/*.stories.jsx?’], since your story is named Histogram.stories.js it should be like below. module.exports = { stories: [‘../src/**/*.stories.js’] }; I tried replicating this in my code by using your main.js and the exact same thing happened to me as well. Also adding the ? like this … Read more

Storybook-tailwind. How should I add tailwind to storybook

by

Storybook recommends using the @storybook/addon-postcss for customizing the postCSS config from now on (instead of relying on customizing the postcss-loader): Add the postCSS addon to your installation npm i -D @storybook/addon-postcss # or yarn add -D @storybook/addon-postcss Create the postcss.config.js in the project root // postcss.config.js module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)