feat(storybook): bump to v8 #12957

TylerAPfledderer · 2024-05-14T03:11:05Z

Description

Now that the project uses NextJS v14, this PR bumps Storybook to v8.

Introduces the Visual Testing Addon to check snapshots locally before committing.
Creates a chromatic config for the above addon.
Adds a package subscript build-storybook:chromatic specifically for Chromatic. This runs storybook build in test mode to cut down the build time of storybook by stripping down the build to only what's needed for Chromatic
Adds build-storybook.log to .gitignore as local builds with the Visual Test Addon will generate this log, which should not be committed.
Replaces @storybook/testing-library with @storybook/test per compatibility. (This change currently exists in feat: setup Storybook Interaction Testing #12444)

netlify · 2024-05-14T03:11:23Z

❌ Deploy Preview for ethereumorg failed. Why did it fail? →

Name	Link
🔨 Latest commit	`49ce864`
🔍 Latest deploy log	https://app.netlify.com/sites/ethereumorg/deploys/667189e2681864000829196a

pettinarip · 2024-05-15T16:41:57Z

@TylerAPfledderer weird error I see on the logs about sharp...I've triggered a new fresh build clearing cache just in case. https://app.netlify.com/sites/ethereumorg/deploys/6644e5a3feaff946f4f01742

TylerAPfledderer · 2024-05-15T16:55:19Z

@TylerAPfledderer weird error I see on the logs about sharp...I've triggered a new fresh build clearing cache just in case. https://app.netlify.com/sites/ethereumorg/deploys/6644e5a3feaff946f4f01742

@pettinarip Thanks! I have a couple of PRs that had unexpected build errors.

Looks like a new error here.

TylerAPfledderer · 2024-05-17T14:07:49Z

@pettinarip @corwintines leaving a note here:

Need to check the Visual Testing Addon to make sure it's going to function properly in other user locals, because of the generated projectId. The documentation for the Chromatic CLI states that this is also referred to as the appId but fails in my local when I actually use that id.

View the docs for Visual Testing Addon.

pettinarip · 2024-05-20T12:40:16Z

@TylerAPfledderer tested locally and it didn't work with the set projectId. I've changed it to ours 63b7ea99632763723c7f4d6b and it worked. Build example https://www.chromatic.com/build?appId=63b7ea99632763723c7f4d6b&number=2406

pettinarip · 2024-05-20T12:42:15Z

.gitignore

+
+# Storybook
+build-storybook.log


We might also need to ignore /storybook-static since it is generated when you run the tests locally.

.storybook/main.ts

TylerAPfledderer · 2024-05-20T15:23:06Z

@TylerAPfledderer tested locally and it didn't work with the set projectId. I've changed it to ours 63b7ea99632763723c7f4d6b and it worked. Build example https://www.chromatic.com/build?appId=63b7ea99632763723c7f4d6b&number=2406

@pettinarip Ok! Thank you for checking. I'll try to set it again in my local and see if anything changes, and clarify the errors I see.

To clarify, I think this visual testing addon is only useful for those who have access to the project in Chromatic in approving changes, but still might be helpful in its convenience for review.

pettinarip · 2024-05-21T11:33:33Z

@TylerAPfledderer tested locally and it didn't work with the set projectId. I've changed it to ours 63b7ea99632763723c7f4d6b and it worked. Build example https://www.chromatic.com/build?appId=63b7ea99632763723c7f4d6b&number=2406

@pettinarip Ok! Thank you for checking. I'll try to set it again in my local and see if anything changes, and clarify the errors I see.

To clarify, I think this visual testing addon is only useful for those who have access to the project in Chromatic in approving changes, but still might be helpful in its convenience for review.

Got it, good to know. Ok, I've updated the branch with dev to fix the issue we had on the build. Once that finish, I think we should be good to go.

TylerAPfledderer · 2024-05-21T13:36:56Z

@pettinarip Updating the projectId: When I go to take a snapshot in the addon, I see this console error:

Chromatic CLI v11.3.2
https://www.chromatic.com/docs/cli

Skipping update check
Authenticating with Chromatic
    → Connecting to https://index.chromatic.com
    → No Access

✖ Failed to authenticate

Error communicating with the Chromatic API. Check if your Chromatic client is up-to-date.
Service status updates are provided at https://status.chromatic.com

→ FORBIDDEN: No Access

If you need help, please chat with us at https://www.chromatic.com/docs/cli for the fastest response.
You can also email the team at support@chromatic.com if chat is not an option.

Please provide us with the above CLI output and the following info:
{
  "timestamp": "2024-05-21T13:35:13.244Z",
  "sessionId": "28c5271b-37af-488b-9a6e-e98cc885786a",
  "nodePlatform": "linux",
  "nodeVersion": "21.7.3",
  "packageName": "chromatic",
  "packageVersion": "11.3.2",
  "flags": {
    "interactive": false
  },
  "extraOptions": {
    "projectId": "Project:63b7ea99632763723c7f4d6b",
    "autoAcceptChanges": false,
    "exitOnceUploaded": false,
    "exitZeroOnChanges": true,
    "forceRebuild": true,
    "fromCI": false,
    "interactive": false,
    "isLocalBuild": true,
    "skip": false,
    "skipUpdateCheck": true,
    "experimental_abortSignal": {}
  },
  "configuration": {
    "configFile": "chromatic.config.json",
    "projectId": "Project:63b7ea99632763723c7f4d6b",
    "zip": true,
    "buildScriptName": "build-storybook:chromatic"
  },
  "isLocalBuild": true,
  "buildScript": "storybook build --test",
  "exitCode": 202,
  "exitCodeKey": "GRAPHQL_ERROR",
  "errorType": "GraphQLError",
  "errorMessage": "✖ Failed to authenticate"
}

And the config:

{
  "projectId": "Project:63b7ea99632763723c7f4d6b",
  "zip": true,
  "buildScriptName": "build-storybook:chromatic"
}

Am I missing a permission?

pettinarip · 2024-05-21T15:27:07Z

@TylerAPfledderer Yeah, I think only people who have permissions to the project will be able to run those tests locally. I had to authorize it before I could run it.

pettinarip · 2024-05-21T15:27:44Z

@TylerAPfledderer pushed a commit to regenerate the yarn.lock file to see if that fix the issue with sharp.

pettinarip · 2024-05-31T13:03:14Z

Hey @TylerAPfledderer can't remember what we were going to do here. There is a type issue breaking the build. I remember that for some reason, it seems that SB is using a different TS settings than the project, right?

TylerAPfledderer · 2024-05-31T23:17:22Z

Hey @TylerAPfledderer can't remember what we were going to do here. There is a type issue breaking the build. I remember that for some reason, it seems that SB is using a different TS settings than the project, right?

Storybook does not work with a different config from the one in the project. There is the eslint plugin for storybook, but that only covers rules for the API usage, not linting or type errors coming from the component being used.

This is new, and it is expected. The Modal component requires onClose and this error would throw for a production build. Not sure how it bypassed the PR it was created from.

I'll update that story file to pass a noop to onClose.

TylerAPfledderer · 2024-05-31T23:27:21Z

Annnd now we are back to the issue with sharp! 😅

pettinarip · 2024-06-14T17:24:18Z

@TylerAPfledderer

Ok, downgrading sharp to 0.32.6 worked. I don't have a better solution at the moment. We could investigate further and add a better fix later.

I'll do some testing to make sure nothing breaks, and then I'd call this done. LMK if you see any blockers or issues with this version.

TylerAPfledderer · 2024-06-18T00:30:17Z

@pettinarip welp.... bumping SB did nothing, even though the build worked in my local!

Other possible solutions point to Netlify being the culprit:

pettinarip · 2024-06-18T13:44:35Z

@pettinarip welp.... bumping SB did nothing, even though the build worked in my local!

Other possible solutions point to Netlify being the culprit:

Add to the build command in netlify.toml

Include an env path

Testing the first suggestion, I tested it and worked on a different branch. Lets see

pettinarip · 2024-06-19T07:42:52Z

@TylerAPfledderer

Ok, this one is working (atm the build is going well) with latest version. However, I don't love it because I see these warnings now:

9:30:07 AM: warning sharp@0.33.4: The engine "libvips" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-arm64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-x64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-arm64@1.0.2: The engine "macos" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-x64@1.0.2: The engine "macos" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm64@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-s390x@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-s390x@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-x64@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-arm64@1.0.2: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-x64@1.0.2: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-s390x@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-s390x@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-x64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-arm64@0.33.4: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-x64@0.33.4: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-wasm32@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-win32-ia32@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-win32-x64@0.33.4: The engine "pnpm" appears to be invalid.

it seems that the problem comes from @netlify/plugin-nextjs since it is installing sharp for us, and we can't control that. Would be nice to skip this install using the --ignore-optional flag but when I tried, the installation failed for some issue related to esbuild.

So...I think we can live with it, not a big deal since it looks like everything is working fine + we have now sharp installed that is also a bonus for netlify/next performance.

LMK if you think there is something else we should pay attention.

TylerAPfledderer · 2024-06-20T15:05:41Z

@TylerAPfledderer

Ok, this one is working (atm the build is going well) with latest version. However, I don't love it because I see these warnings now:

9:30:07 AM: warning sharp@0.33.4: The engine "libvips" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-arm64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-darwin-x64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-arm64@1.0.2: The engine "macos" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-darwin-x64@1.0.2: The engine "macos" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-arm64@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-s390x@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-s390x@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linux-x64@1.0.2: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-arm64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-arm64@1.0.2: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-x64@1.0.2: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-libvips-linuxmusl-x64@1.0.2: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-arm64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-s390x@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-s390x@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linux-x64@0.33.4: The engine "glibc" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-arm64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-arm64@0.33.4: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-x64@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-linuxmusl-x64@0.33.4: The engine "musl" appears to be invalid.
9:30:07 AM: warning @img/sharp-wasm32@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-win32-ia32@0.33.4: The engine "pnpm" appears to be invalid.
9:30:07 AM: warning @img/sharp-win32-x64@0.33.4: The engine "pnpm" appears to be invalid.

it seems that the problem comes from @netlify/plugin-nextjs since it is installing sharp for us, and we can't control that. Would be nice to skip this install using the --ignore-optional flag but when I tried, the installation failed for some issue related to esbuild.

So...I think we can live with it, not a big deal since it looks like everything is working fine + we have now sharp installed that is also a bonus for netlify/next performance.

LMK if you think there is something else we should pay attention.

@pettinarip Ok! I don't have anything else to add here.

pettinarip

Ok! lets goo

feat(storybook): bump to v8

22f2ad7

github-actions bot added the dependencies 📦 Changes related to project dependencies label May 14, 2024

fix(Alert.stories): fix TS error

8408f10

github-actions bot added the needs review 👀 label May 14, 2024

TylerAPfledderer marked this pull request as ready for review May 14, 2024 03:27

TylerAPfledderer requested review from wackerow, corwintines, pettinarip, minimalsm and nhsz as code owners May 14, 2024 03:27

pettinarip reviewed May 20, 2024

View reviewed changes

.storybook/main.ts Show resolved Hide resolved

Merge branch 'dev' into feat/bump-storybook-to-v8

f910a11

chore(.gitignore): ignore static storybook build

90a6a2f

regenerate yarn.lock to fix build issues

6f7a35d

wackerow removed the needs review 👀 label May 22, 2024

Merge branch 'dev' into pr/12957

eb67f1d

github-actions bot added the tooling 🔧 Changes related to tooling of the project label May 30, 2024

fix(Modal.stories.tsx): include required onClose prop

4070a1e

pettinarip added 3 commits June 14, 2024 16:14

Merge branch 'dev' into feat/bump-storybook-to-v8

8e76217

install sharp separately with --ignore-engines

c6e0c83

test previous not failing sharp version

008f0cd

TylerAPfledderer added 2 commits June 17, 2024 16:28

fix: bump storybook to 8.1.10

4e26703

fix(ButtonTwoLines): fix cyclical component imports

de049df

github-actions bot added the config ⚙️ Changes to configuration files label Jun 18, 2024

TylerAPfledderer force-pushed the feat/bump-storybook-to-v8 branch from be35a42 to de049df Compare June 18, 2024 00:29

remove sharp from deps list and install it in the build command

49ce864

Merge branch 'dev' into feat/bump-storybook-to-v8

1637649

pettinarip approved these changes Jun 20, 2024

View reviewed changes

pettinarip merged commit 5043cf6 into ethereum:dev Jun 20, 2024
10 checks passed

TylerAPfledderer deleted the feat/bump-storybook-to-v8 branch June 20, 2024 17:54

pettinarip mentioned this pull request Jun 21, 2024

Force to use sharp v0.32 #13221

Merged

This was referenced Jul 10, 2024

Release candidate 8.7.1 #13366

Merged

Deploy v8.7.1 #13368

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(storybook): bump to v8 #12957

feat(storybook): bump to v8 #12957

TylerAPfledderer commented May 14, 2024

netlify bot commented May 14, 2024 •

edited

Loading

pettinarip commented May 15, 2024

TylerAPfledderer commented May 15, 2024 •

edited

Loading

TylerAPfledderer commented May 17, 2024 •

edited

Loading

pettinarip commented May 20, 2024

pettinarip May 20, 2024

TylerAPfledderer commented May 20, 2024

pettinarip commented May 21, 2024

TylerAPfledderer commented May 21, 2024 •

edited

Loading

pettinarip commented May 21, 2024

pettinarip commented May 21, 2024

pettinarip commented May 31, 2024

TylerAPfledderer commented May 31, 2024 •

edited

Loading

TylerAPfledderer commented May 31, 2024

pettinarip commented Jun 14, 2024

TylerAPfledderer commented Jun 18, 2024 •

edited

Loading

pettinarip commented Jun 18, 2024

pettinarip commented Jun 19, 2024

TylerAPfledderer commented Jun 20, 2024

pettinarip left a comment


		# Storybook
		build-storybook.log

feat(storybook): bump to v8 #12957

feat(storybook): bump to v8 #12957

Conversation

TylerAPfledderer commented May 14, 2024

Description

netlify bot commented May 14, 2024 • edited Loading

❌ Deploy Preview for ethereumorg failed. Why did it fail? →

pettinarip commented May 15, 2024

TylerAPfledderer commented May 15, 2024 • edited Loading

TylerAPfledderer commented May 17, 2024 • edited Loading

pettinarip commented May 20, 2024

pettinarip May 20, 2024

Choose a reason for hiding this comment

TylerAPfledderer commented May 20, 2024

pettinarip commented May 21, 2024

TylerAPfledderer commented May 21, 2024 • edited Loading

pettinarip commented May 21, 2024

pettinarip commented May 21, 2024

pettinarip commented May 31, 2024

TylerAPfledderer commented May 31, 2024 • edited Loading

TylerAPfledderer commented May 31, 2024

pettinarip commented Jun 14, 2024

TylerAPfledderer commented Jun 18, 2024 • edited Loading

pettinarip commented Jun 18, 2024

pettinarip commented Jun 19, 2024

TylerAPfledderer commented Jun 20, 2024

pettinarip left a comment

Choose a reason for hiding this comment

netlify bot commented May 14, 2024 •

edited

Loading

TylerAPfledderer commented May 15, 2024 •

edited

Loading

TylerAPfledderer commented May 17, 2024 •

edited

Loading

TylerAPfledderer commented May 21, 2024 •

edited

Loading

TylerAPfledderer commented May 31, 2024 •

edited

Loading

TylerAPfledderer commented Jun 18, 2024 •

edited

Loading