feat: upgraded to storybook 8 and vite-framework #209

Jontii · 2024-04-07T09:11:45Z

This PR upgrades storybook to v8 and switched from webpack compiler to vite for storybook.

Docs needed to be changed to not have "stories" in the name.
Removed babel packages which was not needed since vite was used instead of webpack. This can be changed if we don't feel that vite is needed. But it was easier and faster than compared to webpack.
addon/types had been migrated to manager-api/preview-api
Upgraded all the needed packages
Added a global decorator for the addon panel in preview.jsx

netlify · 2024-04-07T09:12:02Z

✅ Deploy Preview for storybook-addon-mock ready!

Name	Link
🔨 Latest commit	`a156b3e`
🔍 Latest deploy log	https://app.netlify.com/sites/storybook-addon-mock/deploys/661be220a2c1f400085d43b7
😎 Deploy Preview	https://deploy-preview-209--storybook-addon-mock.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

pinguet62 · 2024-04-07T14:43:00Z

Hello 🖖
Node 16 is no longer supported: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropping-support-for-nodejs-16
I think you can replace node 16.x by 20.x in matrix

Jontii · 2024-04-07T15:36:15Z

Hello 🖖 Node 16 is no longer supported: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropping-support-for-nodejs-16 I think you can replace node 16.x by 20.x in matrix

Hi ! I updated it to 20 :)

castamir · 2024-04-08T08:27:57Z

packages/mock-addon-docs/.storybook/main.js

    stories: [
-        '../stories/**/*stories.mdx',
-        '../stories/**/*stories.@(js|jsx|ts|tsx)',
+        '../stories/**/*.mdx',


I believe this line can be removed as MDX files are no longer supported since Storybook v8.x

Are you sure ? I can see that they removed the support for .stories.mdx https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropping-support-for-storiesmdx-csf-in-mdx-format-and-mdx1-support

Checking their docs for V8 they still use mdx and show examples of it
https://storybook.js.org/docs/writing-docs/mdx

packages/mock-addon-docs/package.json

.github/workflows/nodejs.yml

castamir · 2024-04-08T08:32:29Z

@Jontii thanks for your PR. I left some comments in your PR. Hope you don't mind.

packages/mock-addon/package.json

jdehaan · 2024-04-08T15:10:07Z

Is it only for me or the Mock pane is missing in the storybook panel? Maybe something broke the automatic handling.

Screenshot for the previous version of the add-on

The tab is missing if I take the code from this PR (unless I did something wrong...)

Beside my local test, comparing current head:

https://storybook-addon-mock.netlify.app/?path=/story/examples-fetch--get

With the netlify preview for this PR:

https://deploy-preview-209--storybook-addon-mock.netlify.app/?path=/story/examples-fetch--get

You can see for the latter somehow the mock data is missing. ~~(locally however I've the tab completely missing)~~

Jontii · 2024-04-09T07:32:41Z

Is it only for me or the Mock pane is missing in the storybook panel? Maybe something broke the automatic handling.

Screenshot for the previous version of the add-on

The tab is missing if I take the code from this PR (unless I did something wrong...)

Beside my local test, comparing current head:
* https://storybook-addon-mock.netlify.app/?path=/story/examples-fetch--get
With the netlify preview for this PR:
* https://deploy-preview-209--storybook-addon-mock.netlify.app/?path=/story/examples-fetch--get
You can see for the latter somehow the mock data is missing. (locally however I've the tab completely missing)

Hmm yeah you're right. I'll check in the week if I can find something

jdehaan · 2024-04-09T15:36:59Z

I tried to debug that further by adding logs inside withRoundTrip. It seems to me that the decorator is not being called. Maybe something changed in the way this is added in the context of an addon? I tried to compare and see how other addons performed the upgrade but had to face only failures by trying to apply fixes.... Hopefully you'll make it with a better knowledge of what is going on in the addon internally. It's all new to me.

jdehaan · 2024-04-09T15:52:16Z

By using the info from here and changing preview.js to

import { withRoundTrip } from '../withRoundTrip';

const preview = {
    decorators: [withRoundTrip],
    globals: {
        mockData: [],
    },
};

export default preview;

and keeping the console logs, I can now see the decorator is being called

From withRoundTrip.js:

    const data = [...globalMockData, ...paramData];
    console.warn('withRoundTrip:');
    console.log(data);

The data being shown is the story args parameter data. Yet the state data is empty and thus the tab also remains empty. It almost works but in the end there is still no data shown inside the tab.

Two fixes were required. Use the correct addons import and withRoundTrip as a decorator for all stories.

Jontii · 2024-04-12T19:21:24Z

By using the info from here and changing preview.js to
import { withRoundTrip } from '../withRoundTrip';

const preview = {
    decorators: [withRoundTrip],
    globals: {
        mockData: [],
    },
};

export default preview;
and keeping the console logs, I can now see the decorator is being called

From withRoundTrip.js:
    const data = [...globalMockData, ...paramData];
    console.warn('withRoundTrip:');
    console.log(data);
The data being shown is the story args parameter data. Yet the state data is empty and thus the tab also remains empty. It almost works but in the end there is still no data shown inside the tab.

Hi ! I fixed it in my latest commit so everything should be working now. @jdehaan

packages/mock-addon-docs/package.json

packages/mock-addon/.github/workflows/release.yml

packages/mock-addon-docs/package.json

jdehaan · 2024-04-13T12:26:02Z

packages/mock-addon-docs/stories/docs/advanced-setup.mdx

@@ -16,7 +16,7 @@ import { Footer } from './footer';

 <h3 className="subheading">1. Global configuration</h3>

-You can set <strong>global configuration</strong> for the addon. Go to the `.storybook/preview.js` file and add `mockAddonConfigs` fields with the following properties.
+You can set <strong>global configuration</strong> for the addon. Go to the `.storybook/preview.jsxx` file and add `mockAddonConfigs` fields with the following properties.


A small typo here jsxx -> jsx, other than that LGTM! Thanks for the fix

Thanks, I'll fix it :)

janaagaard75 · 2024-04-14T18:11:17Z

packages/mock-addon/.github/workflows/release.yml

@@ -12,10 +12,10 @@ jobs:
      - name: Prepare repository
        run: git fetch --unshallow --tags

-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 18.x


Minor, but since we're updating things, I think we might as well choose the latest LTS version of Node.js, and that's version 20.

nutboltu

LGTM Huge kudos to @Jontii and other who contributes this PR. I'm going to merge the PR and publish the new version soon.

stof · 2024-04-15T12:23:06Z

packages/mock-addon-docs/package.json

-    "remark-gfm": "^3.0.1",
-    "superagent": "^8.0.9"
+    "superagent": "^8.0.9",
+    "vite": "^5.2.8"


is vite really a prod dependency of the addon ?

ah sorry. This is the docs package, not the addon

Jontii mentioned this pull request Apr 7, 2024

Storybook 8 compatibility #208

Closed

pinguet62 approved these changes Apr 7, 2024

View reviewed changes

Jontii force-pushed the master branch 2 times, most recently from aa8760c to 271191f Compare April 7, 2024 15:27

castamir reviewed Apr 8, 2024

View reviewed changes

packages/mock-addon-docs/package.json Outdated Show resolved Hide resolved

castamir reviewed Apr 8, 2024

View reviewed changes

.github/workflows/nodejs.yml Outdated Show resolved Hide resolved

Jontii force-pushed the master branch from 271191f to 90b4afd Compare April 8, 2024 08:31

kariwhitcomb reviewed Apr 8, 2024

View reviewed changes

packages/mock-addon/package.json Outdated Show resolved Hide resolved

feat: upgraded to storybook 8 and vite-framework

cecba60

Jontii force-pushed the master branch from 90b4afd to cecba60 Compare April 8, 2024 14:50

fix: Addon panel not working.

88f9908

Two fixes were required. Use the correct addons import and withRoundTrip as a decorator for all stories.

janaagaard75 approved these changes Apr 12, 2024

View reviewed changes

packages/mock-addon-docs/package.json Outdated Show resolved Hide resolved

packages/mock-addon/.github/workflows/release.yml Outdated Show resolved Hide resolved

packages/mock-addon-docs/package.json Outdated Show resolved Hide resolved

chore: update storybook to 8.0.8

3a9d305

Jontii force-pushed the master branch from cf85577 to 3a9d305 Compare April 12, 2024 21:15

Jontii requested review from pinguet62, castamir, janaagaard75 and kariwhitcomb April 12, 2024 21:26

jdehaan reviewed Apr 13, 2024

View reviewed changes

chore: typo fix

a156b3e

janaagaard75 approved these changes Apr 14, 2024

View reviewed changes

nutboltu approved these changes Apr 15, 2024

View reviewed changes

nutboltu merged commit 88b108a into linearlabs-workspace:master Apr 15, 2024
6 checks passed

nutboltu added the improvement label Apr 15, 2024

stof reviewed Apr 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: upgraded to storybook 8 and vite-framework #209

feat: upgraded to storybook 8 and vite-framework #209

Jontii commented Apr 7, 2024 •

edited

Loading

netlify bot commented Apr 7, 2024 •

edited

Loading

pinguet62 commented Apr 7, 2024

Jontii commented Apr 7, 2024

castamir Apr 8, 2024

Jontii Apr 8, 2024

castamir commented Apr 8, 2024

jdehaan commented Apr 8, 2024 •

edited

Loading

Jontii commented Apr 9, 2024

jdehaan commented Apr 9, 2024

jdehaan commented Apr 9, 2024 •

edited

Loading

Jontii commented Apr 12, 2024

jdehaan Apr 13, 2024 •

edited

Loading

Jontii Apr 14, 2024

janaagaard75 Apr 14, 2024 •

edited

Loading

nutboltu left a comment

stof Apr 15, 2024

stof Apr 15, 2024

feat: upgraded to storybook 8 and vite-framework #209

feat: upgraded to storybook 8 and vite-framework #209

Conversation

Jontii commented Apr 7, 2024 • edited Loading

netlify bot commented Apr 7, 2024 • edited Loading

✅ Deploy Preview for storybook-addon-mock ready!

pinguet62 commented Apr 7, 2024

Jontii commented Apr 7, 2024

castamir Apr 8, 2024

Choose a reason for hiding this comment

Jontii Apr 8, 2024

Choose a reason for hiding this comment

castamir commented Apr 8, 2024

jdehaan commented Apr 8, 2024 • edited Loading

Jontii commented Apr 9, 2024

jdehaan commented Apr 9, 2024

jdehaan commented Apr 9, 2024 • edited Loading

Jontii commented Apr 12, 2024

jdehaan Apr 13, 2024 • edited Loading

Choose a reason for hiding this comment

Jontii Apr 14, 2024

Choose a reason for hiding this comment

janaagaard75 Apr 14, 2024 • edited Loading

Choose a reason for hiding this comment

nutboltu left a comment

Choose a reason for hiding this comment

stof Apr 15, 2024

Choose a reason for hiding this comment

stof Apr 15, 2024

Choose a reason for hiding this comment

Jontii commented Apr 7, 2024 •

edited

Loading

netlify bot commented Apr 7, 2024 •

edited

Loading

jdehaan commented Apr 8, 2024 •

edited

Loading

jdehaan commented Apr 9, 2024 •

edited

Loading

jdehaan Apr 13, 2024 •

edited

Loading

janaagaard75 Apr 14, 2024 •

edited

Loading