hipstersmoothie / storybook-dark-mode

A storybook addon that lets your users toggle between dark and light mode.
MIT License
428 stars 56 forks source link

Storybook 8 #250

Closed dartess closed 3 months ago

dartess commented 4 months ago

Hi @hipstersmoothie !

Version 8 of Storybook is expected to be released soon, it would be great to know if your addon is ready for an update.

Additional Information:

https://github.com/storybookjs/storybook/discussions/25276

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800

https://github.com/storybookjs/storybook/issues/26031

joevaugh4n commented 4 months ago

Thanks for opening up the issue, @dartess!

vanessayuenn commented 4 months ago

Thank you @dartess @hipstersmoothie! I see you already opened a PR, but in case this is still helpful, I want to mention that we have an addon migration guide for 8 that summarizes changes relevant to addons specifically.

joevaugh4n commented 4 months ago

Also @hipstersmoothie – we have an addons channel in the Storybook Discord community, which we’d like to use to better communicate with addon authors in the future.

If you’re not part of the server, consider joining here and message me (@joevaugh4n) so that I can give you the addon creator role! If you’re already in the server, please just ping me and I’ll respond to you there.

Thanks for being a part of our addon community!

dartess commented 4 months ago

I'll recheck addon migration guide for 8 soon, thanks.

dartess commented 4 months ago

I checked and I think it's ready. I would be grateful for reviews.

hipstersmoothie commented 4 months ago

PR looks good. down to merge when v8 comes out

ItsWendell commented 4 months ago

@hipstersmoothie It would be great if we can publish this as a @next / beta flag like published beta of storybook?

asvae commented 4 months ago

Just my experience updating to storybook 8. May be useful for someone.

I tried to run npx storybook@next upgrade on existing project per docs recommendation.

I got warning like this:

│   Attention: The following dependencies are duplicated which might cause unexpected behavior:                                                               │
│                                                                                                                                                             │
│   @storybook/types:                                                                                                                                         │
│   8.0.0-beta.5, 7.6.17, 7.0.27                                                                                                                              │
│                                                                                                                                                             │
│   @storybook/channels:                                                                                                                                      │
│   8.0.0-beta.5, 7.6.17, 7.0.27

After I removed "storybook-dark-mode": "^3.0.3" - for both of these packages version settled on 8.0.0-beta.5

dartess commented 4 months ago

@ItsWendell @asvae this may be a little tricky but you can test your project now. I use npm, if you use another package manager, then installing the dependency from Github and updating it may be more difficult. But for npm:

  1. remove storybook-dark-mode: npm un storybook-dark-mode
  2. upgrade storybook: npx storybook@next upgrade
  3. install storybook-dark-mode from my branch: npm i -D dartess/storybook-dark-mode#storybook-8
  4. manually copy files .babelrc.js, tsconfig.json and tsconfig.build.json into node_modules/storybook-dark-mode/, go there cd node_modules/storybook-dark-mode/, install deps (npm i), run build (npm run build).
  5. test your app

I would like to update to version 8 as quickly as possible, so I did all this. Everything seems to be working well.

alkamin commented 4 months ago

@ItsWendell @asvae this may be a little tricky but you can test your project now. I use npm, if you use another package manager, then installing the dependency from Github and updating it may be more difficult. But for npm:

  1. remove storybook-dark-mode: npm un storybook-dark-mode
  2. upgrade storybook: npx storybook@next upgrade
  3. install storybook-dark-mode from my branch: npm i -D dartess/storybook-dark-mode#storybook-8
  4. manually copy files .babelrc.js, tsconfig.json and tsconfig.build.json into node_modules/storybook-dark-mode/, go there cd node_modules/storybook-dark-mode/, install deps (npm i), run build (npm run build).
  5. test your app

I would like to update to version 8 as quickly as possible, so I did all this. Everything seems to be working well.

Thanks for this. It worked perfectly in my app with SB8.

joevaugh4n commented 4 months ago

@hipstersmoothie @ItsWendell @dartess @alkamin @asvae thank you all for contributing and testing here! We’re targeting the full release of SB8 on March 11. When the release is live, I’ll write here to confirm!

C0ZEN commented 3 months ago

@hipstersmoothie it's out 👀

K3TH3R commented 3 months ago

@hipstersmoothie it's out 👀

With Storybook 8.0.0 and a Vue/Vite setup, I'm seeing the following error: Screenshot 2024-03-15 at 4 57 28 pm

I've tried just about every possibility I can think of, even completely removing the darkMode key from my parameters object and it always throws this error.

hipstersmoothie commented 3 months ago

It's shipped 🍾

hipstersmoothie commented 3 months ago

@K3TH3R if that's still an issue open another issue please