[FEEDBACK] Auto configuration scripts #49
Comments
|
Tried it with the following stack without success: build system: NX @storybook: ^7.0.9
|
|
Sup @integrayshaun 😄 I just gave this a whirl on a new project.
import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-styling',
],
framework: {
name: '@storybook/nextjs',
options: {},
},
docs: {
autodocs: 'tag',
},
staticDirs: ['../public'],
};
export default config;
import type { Preview } from '@storybook/react';
import '../src/styles/globals.scss';
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
hideNoControlsWarning: true,
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
export default preview;
Here's the error I see: TypeError: Cannot read properties of undefined (reading 'tailwindcss')
at zy (/Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:950:43083)
at EFr (/Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:950:43456)
at /Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:1060:205
at Array.find (<anonymous>)
at wFr (/Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:1060:183)
at kFr (/Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:1066:18)
at Object.<anonymous> (/Users/kyle/Code/app/node_modules/@storybook/addon-styling/bin/postinstall.js:1069:1091)
at Module._compile (node:internal/modules/cjs/loader:1275:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
at Module.load (node:internal/modules/cjs/loader:1133:32)I should note that I am using a Yarn workspace & running the script from the project root. That's where the node module is stored so that seemed to make sense. Let me know if you need any other details to troubleshoot. Cheers ✌️ |
|
Hey @TroyMorvant 👋 What tool were you hoping to get configured? Right now we only support Tailwind, material UI, styled-components, and Emotion. |
|
Hey @kylesuss 👋 This checks out as I haven't had a ton of time to work through the monorepos or yarn workspaces 😅 Any chance you can share the repo or a barebones reproduction of it for me to test with? The error you're getting for tailwind here is that it can't find a dependencies or devDependencies map in the package.json it found which i'll make sure to catch in a patch 🥳 |
|
@integrayshaun no sweat, I know it's not the first use case to consider 😄 Anyways, here's a repro: https://github.com/kylesuss/sb-addon-styling-repro Some of the packages that the script adds are still in there as I added them manually but the issue remains with the postinstall script from the docs! |
|
Tried this out as well today. And received an error
|
|
Hey @eilinora Can you give me a little more information about your project? it looks like you're using NX to manage a monorepo? Also, what tool are you trying to configure? |
|
Tried it, but it failed. |
|
Hey @oliviervanbulck Can you please share more information about the project?
|
|
Error 
Storybook version
Content of import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'@storybook/addon-styling',
],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: 'tag',
},
}
export default configContent of import type { Preview } from '@storybook/react'
const preview: Preview = {
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
}
export default previewThe tool you wanted to auto-configure build system: Lerna NX |
|
Hey @Crsk 👋 I just published |
|
Does not seem to work with Astro |
|
Hi @ollebergkvist, Astro is not currently supported by Storybook. This auto-configuration script is to configure styling in Storybook for tailwind, material UI, styled components, and Emotion |
|
When I run the codemod mentioned here, it has broken my project in ways I can't figure out how to revert. At first I wasn't sure what the origin of the issue was, but as I stepped through creating a second Vite/React/TS/Storybook/TailwindCSS project from scratch, I got to this codemod again, and it produced the same error I had gotten stuck on previously. After running the codemod, suddenly every story in the Storybook produces messages like this: For the record I was mostly following this guide, up until the point I needed to get TailwindCSS styles to apply. I am trying to remove MUI from my dependencies in favor of Mantine, so not sure if this Tailwind doc should specify any concerns over running the codemod if MUI is not in the project. I did notice it re-formatted and added a theme switcher to my Restarting the Which is strange to me as I was seeing components render before running the codemod. I have and here is my The codemod says it's to configure Storybook with Tailwind, but it's not immediately clear that the script run via the following command is related to Tailwind at all: At the very least, there should be clarity in the doc stating there are two paths to take (auto or manual), and a note warning the user that the auto codemod approach could cause potential issues with the project, and should clearly state what the purpose of that script is and what files it changes. I'm going to attempt running only down the "Manual" path after starting from scratch again to see if I can bypass this strange issue. |
|
Hey there, @forgo 👋 Woah! Looks like you've got a lot of moving parts to your problem here. First of all, I'm sorry for all the hassle. I'm happy to help you figure this out but I need to know a few more things about your project first. What version of Storybook are you using? What version of What styling library/libraries do you intend on using? Can you share the new repo you started from scratch with me so that I can debug it as well? Now, a little bit of clarification on the codemod script...
I'd strongly recommend that you run this codemod, or any other codemod for that matter on a clean branch without other changes. That way you can see the code diff and revert it if it's a problem. However, this script only makes adjustments to two files. in your
I can certainly do that. I thought that the two sections auto-migrate and manual would have been sufficient but i'm more than happy to adjust it if you have recommendations on how to better structure the document. |
|
|
Hey @unional, is it a hard requirement for you to use |
|
It's not a hard requirement. While it can be converted to ESM or TypeScript, |
|
Hi, I'm trying to use the config without success. I have a monorepo with a Remix app (where I installed SB). When running the script I'm getting:
|
|
Hey @Chompas 👋 Sorry about the trouble there, the codemod doesn't account for a function call like However, I have some good news for you. Since you're using vite, tailwind should already work for your storybook project. just import your global css file into your |
|
Hello, I encountered the same error, but I used webpack5. undefined:2 ReferenceError: getAbsolutePath is not defined |
Yes. this is exactly what I did and got it running. Thanks. |
What?
As of version
1.1.0, I have introduced codemod scripts to auto-configure the styling addon for users of the following styling tools:The codemod didn't work for me! Now what?
Apologies for not being able to get it right for your project, I'm working on it 🙏
Please leave me the following details about your project:
@storybook/addon-stylingversionmain.tsormain.jsfilepreview.tsorpreview.jsfileThe text was updated successfully, but these errors were encountered: