Storybook v7 #154

fooloomanzoo · 2022-12-24T09:28:46Z

update dependencies
adjust to new addons setup configuration
adjust run scripts for new storybook-cli
add @storybook/blocks dependency
import controls from new location (@storybook/blocks)
apply styles for auto dark mode mode in preview
responsive flex box style fixes for controls

vercel · 2022-12-24T09:28:51Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
storybook-addon-mock	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 3, 2023 6:25am

nutboltu · 2023-01-19T07:07:01Z

@fooloomanzoo, thanks for your contribution. Can you please specify if there are any breaking changes and if it's backward compatible?

fooloomanzoo

@nutboltu
Additionally to the changes regarding the different locations and export declarations in storybook v7, there are some issues fixed in styling, so the controls better adjust to panel position changes and take over the provided theming by storybook. Storybook also changed something about the peer dependencies, what could be the reason for the integration tests failing (not sure).
also: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#addon-authors

fooloomanzoo · 2023-01-24T09:37:14Z

packages/mock-addon/preset.js

@@ -8,5 +8,5 @@ function managerEntries(entry = []) {

 module.exports = {
    managerEntries,
-    config,
+    previewAnnotations,


This would be a breaking change for older storybook version, since the entry has or will change

fooloomanzoo · 2023-01-24T09:37:21Z

packages/mock-addon/src/components/MockItem/index.js

-    RangeControl,
-    TabsState,
-} from '@storybook/components';
+import { ObjectControl, RangeControl } from '@storybook/blocks';


The components for the controls distributed by storybook have been restructured also.

fooloomanzoo · 2023-01-24T09:37:30Z

packages/mock-addon/src/components/MockItem/index.js

+    border: ${({ theme }) => theme.input.border};
+    background: ${({ theme }) => theme.input.background};
+    border-radius: ${({ theme }) => theme.input.borderRadius};


Color-theme-style changes are necessary since auto dark mode is also now integrated by storybook v7

fooloomanzoo · 2023-01-24T09:38:13Z

packages/mock-addon/src/withRoundTrip.js

@@ -1,5 +1,5 @@
 import { FORCE_RE_RENDER, STORY_CHANGED } from '@storybook/core-events';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/addons';


Also changed, addons is not the default export of storybook-addon anymore

fooloomanzoo · 2023-01-28T14:09:51Z

@nutboltu
storybook v7 also requires node 16 at least, which is also breaking currently the CI tests https://github.com/storybookjs/storybook/blob/next/code/package.json#L286

- update dependencies - adjust to new addons setup configuration - adjust run scripts for new storybook-cli - add @storybook/blocks dependency - import controls from new location (@storybook/blocks) - apply styles for auto dark mode mode in preview - responsive flex box style fixes

lessless · 2023-02-22T15:30:12Z

@nutboltu @fooloomanzoo thanks for taking a stab on this

offbeat-dev · 2023-03-21T18:31:02Z

hi @nutboltu,

thank you for your work on this addon.
Just wanted to know if there are any plans of merging this PR soon.
Would love to keep using in my Storybook V7 projects

thanks in advance for your help

nutboltu · 2023-03-22T01:42:15Z

hello everyone! I'm sorry for not being active in this project for a while. Due to my current workload, I couldn't spend time on this PR. I may have some time in early April to make it a stable release.

However, I am considering if there's a way to give this project an alpha release.

nutboltu · 2023-03-22T01:54:03Z

@nutboltu storybook v7 also requires node 16 at least, which is also breaking currently the CI tests https://github.com/storybookjs/storybook/blob/next/code/package.json#L286

@fooloomanzoo this project supports node 16. The build is failing due to some missing packages.

Can you please take a look into these fixes? I want to release an alpha version with your changes to unblock others.

fooloomanzoo · 2023-03-22T08:17:32Z

@nutboltu added the release candidate version. there is not yet a 7.0.0 storybook release. this was the reason
ready to be used for an alpha version

JReinhold · 2023-04-01T20:24:49Z

Hi @fooloomanzoo and @nutboltu, I just wanted to drop in and let you know that, Storybook v7.0.0 is out. It's only on the next tag for now, but it's still targetable with the ^7.0.0 semver range, so you should be able to develop against it with no dependency issues.

If you hit any issues with v7, we've written a migration guide for addon authors here and here.

You're also free to reach out to us in the #prerelease channel on our Discord Server and we'll happily help you out!

cc @ndelangen

ndelangen · 2023-04-03T14:13:35Z

packages/mock-addon/src/withRoundTrip.js

@@ -1,5 +1,5 @@
 import { FORCE_RE_RENDER, STORY_CHANGED } from '@storybook/core-events';
-import addons from '@storybook/addons';
+import { addons } from '@storybook/addons';


Suggested change

import { addons } from '@storybook/addons';

import { addons } from '@storybook/preview-api';

ndelangen · 2023-04-03T14:13:56Z

packages/mock-addon/package.json

-    "@storybook/api": "^6.4.0",
-    "@storybook/components": "^6.4.0",
-    "@storybook/theming": "^6.4.0",
+    "@storybook/addons": "^7.0.0",


Suggested change

"@storybook/addons": "^7.0.0",

"@storybook/preview-api": "^7.0.0",

nutboltu · 2023-04-09T02:45:46Z

@fooloomanzoo, thanks for the awesome contribution. However, the build is failing, and to accelerate the feature (storybook v7 support), I will merge the PR and fix the builds.

vercel bot deployed to Preview December 24, 2022 09:30 View deployment

fooloomanzoo mentioned this pull request Dec 24, 2022

Storybook v7 support? #148

Closed

fooloomanzoo force-pushed the storybook-v7 branch from 649c013 to dbb3f48 Compare December 24, 2022 14:11

vercel bot deployed to Preview December 24, 2022 14:12 View deployment

nutboltu self-requested a review January 19, 2023 07:06

fooloomanzoo commented Jan 24, 2023

View reviewed changes

fooloomanzoo force-pushed the storybook-v7 branch from dbb3f48 to caef7cb Compare January 28, 2023 19:13

vercel bot deployed to Preview January 28, 2023 19:14 View deployment

fooloomanzoo force-pushed the storybook-v7 branch from caef7cb to 98d76a8 Compare February 2, 2023 11:56

vercel bot had a problem deploying to Preview February 2, 2023 11:56 Failure

fooloomanzoo force-pushed the storybook-v7 branch from 98d76a8 to 71628d8 Compare February 2, 2023 12:08

vercel bot had a problem deploying to Preview February 2, 2023 12:08 Failure

fooloomanzoo force-pushed the storybook-v7 branch from 71628d8 to 31f354f Compare February 2, 2023 12:16

vercel bot had a problem deploying to Preview February 2, 2023 12:16 Failure

fooloomanzoo force-pushed the storybook-v7 branch from 31f354f to 84e7d38 Compare February 2, 2023 12:53

vercel bot had a problem deploying to Preview February 2, 2023 12:53 Failure

fooloomanzoo force-pushed the storybook-v7 branch from 84e7d38 to c6ea8ac Compare February 2, 2023 13:13

vercel bot had a problem deploying to Preview February 2, 2023 13:13 Failure

fooloomanzoo force-pushed the storybook-v7 branch from c6ea8ac to 420aa99 Compare February 2, 2023 13:56

vercel bot had a problem deploying to Preview February 2, 2023 13:56 Failure

nutboltu added the feature request New feature or request label Mar 22, 2023

Update dependencies

288b444

vercel bot deployed to Preview March 22, 2023 08:17 View deployment

Update dependencies

b2ab435

vercel bot deployed to Preview March 23, 2023 08:17 View deployment

JReinhold mentioned this pull request Apr 1, 2023

Community outreach to upgrade addons to 7.0 storybookjs/storybook#20529

Open

32 tasks

update dependencies

212379a

vercel bot deployed to Preview April 3, 2023 06:25 View deployment

ndelangen reviewed Apr 3, 2023

View reviewed changes

ndelangen approved these changes Apr 3, 2023

View reviewed changes

pinguet62 approved these changes Apr 7, 2023

View reviewed changes

nutboltu changed the base branch from master to storybook-v7-support April 9, 2023 02:42

nutboltu approved these changes Apr 9, 2023

View reviewed changes

nutboltu changed the base branch from storybook-v7-support to master April 9, 2023 02:47

nutboltu merged commit 1970bec into linearlabs-workspace:master Apr 9, 2023
1 of 4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook v7 #154

Storybook v7 #154

fooloomanzoo commented Dec 24, 2022 •

edited

vercel bot commented Dec 24, 2022 •

edited

nutboltu commented Jan 19, 2023

fooloomanzoo left a comment •

edited

fooloomanzoo Jan 24, 2023

fooloomanzoo Jan 24, 2023 •

edited

fooloomanzoo Jan 24, 2023

fooloomanzoo Jan 24, 2023

fooloomanzoo commented Jan 28, 2023 •

edited

lessless commented Feb 22, 2023

offbeat-dev commented Mar 21, 2023

nutboltu commented Mar 22, 2023

nutboltu commented Mar 22, 2023

fooloomanzoo commented Mar 22, 2023 •

edited

JReinhold commented Apr 1, 2023

ndelangen Apr 3, 2023

ndelangen Apr 3, 2023

nutboltu commented Apr 9, 2023 •

edited

	import { addons } from '@storybook/addons';
	import { addons } from '@storybook/preview-api';

	"@storybook/addons": "^7.0.0",
	"@storybook/preview-api": "^7.0.0",

Storybook v7 #154

Storybook v7 #154

Conversation

fooloomanzoo commented Dec 24, 2022 • edited

vercel bot commented Dec 24, 2022 • edited

nutboltu commented Jan 19, 2023

fooloomanzoo left a comment • edited

Choose a reason for hiding this comment

fooloomanzoo Jan 24, 2023

Choose a reason for hiding this comment

fooloomanzoo Jan 24, 2023 • edited

Choose a reason for hiding this comment

fooloomanzoo Jan 24, 2023

Choose a reason for hiding this comment

fooloomanzoo Jan 24, 2023

Choose a reason for hiding this comment

fooloomanzoo commented Jan 28, 2023 • edited

lessless commented Feb 22, 2023

offbeat-dev commented Mar 21, 2023

nutboltu commented Mar 22, 2023

nutboltu commented Mar 22, 2023

fooloomanzoo commented Mar 22, 2023 • edited

JReinhold commented Apr 1, 2023

ndelangen Apr 3, 2023

Choose a reason for hiding this comment

ndelangen Apr 3, 2023

Choose a reason for hiding this comment

nutboltu commented Apr 9, 2023 • edited

fooloomanzoo commented Dec 24, 2022 •

edited

vercel bot commented Dec 24, 2022 •

edited

fooloomanzoo left a comment •

edited

fooloomanzoo Jan 24, 2023 •

edited

fooloomanzoo commented Jan 28, 2023 •

edited

fooloomanzoo commented Mar 22, 2023 •

edited

nutboltu commented Apr 9, 2023 •

edited