Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update storybook monorepo to v8 (major) #4792

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

Update storybook monorepo to v8 (major) #4792

wants to merge 8 commits into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Aug 6, 2024 •
edited by vilkinsons
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@storybook/addon-essentials (source) 7.0.5 -> 8.2.7 age adoption passing confidence
@storybook/addon-interactions (source) 7.0.5 -> 8.2.7 age adoption passing confidence
@storybook/addon-links (source) 7.0.5 -> 8.2.7 age adoption passing confidence
@storybook/blocks (source) 7.0.5 -> 8.2.7 age adoption passing confidence
@storybook/react (source) 7.0.5 -> 8.2.7 age adoption passing confidence
@storybook/react-webpack5 (source) 7.0.5 -> 8.2.7 age adoption passing confidence
storybook (source) 7.0.5 -> 8.2.7 age adoption passing confidence

Release Notes

storybookjs/storybook (@​storybook/addon-essentials)

v8.2.7

Compare Source

v8.2.6

Compare Source

v8.2.5

Compare Source

v8.2.4

Compare Source

v8.2.3

Compare Source

v8.2.2

Compare Source

v8.2.1

Compare Source

v8.2.0

Compare Source

Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:

  • 🪝 New test hook beforeAll
  • 🕹️ Enhanced play function
  • 📦 Portable stories that let you use your stories in other testing tools
  • 🎁 Consolidated dependency to bring you better performance in a smaller package
  • ✨ Brand new onboarding experience to get you up to speed quicker
  • 💯 Hundreds more improvements
List of all updates

v8.1.11

Compare Source

v8.1.10

Compare Source

v8.1.9

Compare Source

v8.1.8

Compare Source

v8.1.7

Compare Source

v8.1.6

Compare Source

v8.1.5

Compare Source

v8.1.4

Compare Source

v8.1.3

Compare Source

v8.1.2

Compare Source

v8.1.1

Compare Source

v8.1.0

Compare Source

Storybook 8.1 is here with a tone of new features and bug fixes:

  • 🏷️ Static tag-based filtering
  • 🦺 Type-safe, standards-based module mocking
  • 🐣 New beforeEach test hook
  • 🧳 Portable Stories API for Playwright Component Testing
  • 🐕‍🦺 Support the new signal-based input & output functions in Angular
  • 2️⃣ Two new ways to create stories: generating them from story controls or from your components directly!
List of all updates

v8.0.10

Compare Source

v8.0.9

Compare Source

v8.0.8

Compare Source

v8.0.7

Compare Source

v8.0.6

Compare Source

v8.0.5

Compare Source

v8.0.4

Compare Source

v8.0.3

Compare Source

v8.0.2

Compare Source

v8.0.1

Compare Source

v8.0.0

Compare Source

Storybook 8.0 is here

It brings major improvements to Storybook's feature set for testing and documentation, with

Configuration

📅 Schedule: Branch creation - "before 4am every weekday,every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

@renovate renovate bot enabled auto-merge August 6, 2024 21:10
renovate-approve[bot]
renovate-approve bot previously approved these changes Aug 6, 2024
View reviewed changes
@vilkinsons vilkinsons self-assigned this Aug 6, 2024
@github-actions github-actions bot added area/deps Relates to third-party dependencies (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps area/apps > hash.design Affects the `hash.design` design site (app) labels Aug 6, 2024
@vilkinsons vilkinsons disabled auto-merge August 6, 2024 21:11
@vilkinsons
Copy link
Member

vilkinsons commented Aug 6, 2024 •
edited
Loading

v7 to v8 migration guide: https://storybook.js.org/docs/migration-guide

Note:

  • As of the Storybook v8 update, yarn 1 is no longer officially supported. This does not mean that it does not work... only that new fixes are not guaranteed.

@renovate renovate bot force-pushed the deps/js/major-storybook-monorepo branch from d78c361 to a95f18e Compare August 6, 2024 21:25
@renovate renovate bot enabled auto-merge August 6, 2024 21:25
renovate-approve[bot]
renovate-approve bot previously approved these changes Aug 6, 2024
View reviewed changes
semgrep-app[bot]
semgrep-app bot reviewed Aug 6, 2024
View reviewed changes
apps/hashdotdesign/.storybook/main.js
};

function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.

View Dataflow Graph 
flowchart LR
    classDef invis fill:white, stroke: none
    classDef default fill:#e7f5ff, color:#1c7fd6, stroke: none

    subgraph File0["<b>apps/hashdotdesign/.storybook/main.js</b>"]
        direction LR
        %% Source

        subgraph Source
            direction LR

            v0["<a href=https://github.com/hashintel/hash/blob/726e5712a27dc56fc57d382121f14fd5e1715e74/apps/hashdotdesign/.storybook/main.js#L35 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 35] value</a>"]
        end
        %% Intermediate

        subgraph Traces0[Traces]
            direction TB

            v2["<a href=https://github.com/hashintel/hash/blob/726e5712a27dc56fc57d382121f14fd5e1715e74/apps/hashdotdesign/.storybook/main.js#L35 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 35] value</a>"]
        end
        %% Sink

        subgraph Sink
            direction LR

            v1["<a href=https://github.com/hashintel/hash/blob/726e5712a27dc56fc57d382121f14fd5e1715e74/apps/hashdotdesign/.storybook/main.js#L36 target=_blank style='text-decoration:none; color:#1c7fd6'>[Line: 36] value</a>"]
        end
    end
    %% Class Assignment
    Source:::invis
    Sink:::invis

    Traces0:::invis
    File0:::invis

    %% Connections

    Source --> Traces0
    Traces0 --> Sink
Loading
Ignore this finding from path-join-resolve-traversal.

@renovate Renovate
Copy link
Contributor Author

renovate bot commented Aug 6, 2024

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

github-advanced-security[bot]
github-advanced-security bot found potential problems Aug 6, 2024
View reviewed changes
apps/hashdotdesign/.storybook/main.js
};

function getAbsolutePath(value) {
return dirname(require.resolve(join(value, "package.json")));

Check warning

Code scanning / Semgrep PRO

Semgrep Finding: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal Warning

Detected possible user input going into a path.join or path.resolve function. This could possibly lead to a path traversal vulnerability, where the attacker can access arbitrary files stored in the file system. Instead, be sure to sanitize or validate user input first.
@github-actions github-actions bot added the type/eng > backend Owned by the @backend team label Aug 7, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Aug 7, 2024

Benchmark results

@rust/graph-benches – Integrations

representative_read_entity_type

Function Value Mean Flame graphs
get_entity_type_by_id Account ID: d4e16033-c281-4cde-aa35-9085bf2e7579 $$1.43 \mathrm{ms} \pm 5.29 \mathrm{μs}\left({\color{gray}0.540 \mathrm{\%}}\right) $$ Flame Graph

scaling_read_entity_linkless

Function Value Mean Flame graphs
entity_by_id 1000 entities $$2.85 \mathrm{ms} \pm 15.7 \mathrm{μs}\left({\color{gray}-1.385 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10000 entities $$13.8 \mathrm{ms} \pm 148 \mathrm{μs}\left({\color{red}7.51 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10 entities $$1.87 \mathrm{ms} \pm 6.57 \mathrm{μs}\left({\color{gray}1.41 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 1 entities $$1.86 \mathrm{ms} \pm 7.22 \mathrm{μs}\left({\color{gray}0.963 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 100 entities $$2.07 \mathrm{ms} \pm 9.49 \mathrm{μs}\left({\color{gray}1.38 \mathrm{\%}}\right) $$ Flame Graph

scaling_read_entity_complete_one_depth

Function Value Mean Flame graphs
entity_by_id 50 entities $$281 \mathrm{ms} \pm 2.70 \mathrm{ms}\left({\color{gray}2.94 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 5 entities $$24.6 \mathrm{ms} \pm 139 \mathrm{μs}\left({\color{gray}1.93 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10 entities $$51.3 \mathrm{ms} \pm 228 \mathrm{μs}\left({\color{gray}3.22 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 1 entities $$20.0 \mathrm{ms} \pm 108 \mathrm{μs}\left({\color{gray}1.09 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 25 entities $$74.3 \mathrm{ms} \pm 434 \mathrm{μs}\left({\color{gray}-3.667 \mathrm{\%}}\right) $$ Flame Graph

scaling_read_entity_complete_zero_depth

Function Value Mean Flame graphs
entity_by_id 50 entities $$4.35 \mathrm{ms} \pm 29.4 \mathrm{μs}\left({\color{red}8.26 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 5 entities $$1.93 \mathrm{ms} \pm 9.05 \mathrm{μs}\left({\color{gray}0.971 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 10 entities $$2.14 \mathrm{ms} \pm 10.5 \mathrm{μs}\left({\color{gray}1.51 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 1 entities $$1.91 \mathrm{ms} \pm 12.8 \mathrm{μs}\left({\color{gray}2.50 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id 25 entities $$2.68 \mathrm{ms} \pm 14.3 \mathrm{μs}\left({\color{gray}-3.810 \mathrm{\%}}\right) $$ Flame Graph

representative_read_multiple_entities

Function Value Mean Flame graphs
entity_by_property depths: DT=0, PT=0, ET=2, E=2 $$49.9 \mathrm{ms} \pm 213 \mathrm{μs}\left({\color{red}7.26 \mathrm{\%}}\right) $$ Flame Graph
entity_by_property depths: DT=255, PT=255, ET=255, E=255 $$66.8 \mathrm{ms} \pm 264 \mathrm{μs}\left({\color{red}5.62 \mathrm{\%}}\right) $$ Flame Graph
entity_by_property depths: DT=0, PT=2, ET=2, E=2 $$54.2 \mathrm{ms} \pm 236 \mathrm{μs}\left({\color{red}5.91 \mathrm{\%}}\right) $$ Flame Graph
entity_by_property depths: DT=0, PT=0, ET=0, E=2 $$43.1 \mathrm{ms} \pm 197 \mathrm{μs}\left({\color{red}6.47 \mathrm{\%}}\right) $$ Flame Graph
entity_by_property depths: DT=0, PT=0, ET=0, E=0 $$39.0 \mathrm{ms} \pm 193 \mathrm{μs}\left({\color{gray}4.57 \mathrm{\%}}\right) $$ Flame Graph
entity_by_property depths: DT=2, PT=2, ET=2, E=2 $$58.5 \mathrm{ms} \pm 257 \mathrm{μs}\left({\color{red}6.32 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=0, PT=0, ET=2, E=2 $$92.4 \mathrm{ms} \pm 414 \mathrm{μs}\left({\color{red}6.77 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=255, PT=255, ET=255, E=255 $$105 \mathrm{ms} \pm 490 \mathrm{μs}\left({\color{gray}2.63 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=0, PT=2, ET=2, E=2 $$97.2 \mathrm{ms} \pm 565 \mathrm{μs}\left({\color{red}7.31 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=0, PT=0, ET=0, E=2 $$82.0 \mathrm{ms} \pm 479 \mathrm{μs}\left({\color{red}8.69 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=0, PT=0, ET=0, E=0 $$41.7 \mathrm{ms} \pm 225 \mathrm{μs}\left({\color{red}7.47 \mathrm{\%}}\right) $$ Flame Graph
link_by_source_by_property depths: DT=2, PT=2, ET=2, E=2 $$99.3 \mathrm{ms} \pm 524 \mathrm{μs}\left({\color{gray}4.69 \mathrm{\%}}\right) $$ Flame Graph

representative_read_entity

Function Value Mean Flame graphs
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/book/v/1 $$17.7 \mathrm{ms} \pm 200 \mathrm{μs}\left({\color{lightgreen}-27.389 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/person/v/1 $$17.2 \mathrm{ms} \pm 209 \mathrm{μs}\left({\color{red}7.69 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/block/v/1 $$17.0 \mathrm{ms} \pm 271 \mathrm{μs}\left({\color{red}10.3 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/building/v/1 $$17.6 \mathrm{ms} \pm 218 \mathrm{μs}\left({\color{red}8.37 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/uk-address/v/1 $$18.0 \mathrm{ms} \pm 223 \mathrm{μs}\left({\color{red}13.6 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/playlist/v/1 $$17.5 \mathrm{ms} \pm 311 \mathrm{μs}\left({\color{gray}4.44 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/song/v/1 $$17.9 \mathrm{ms} \pm 168 \mathrm{μs}\left({\color{red}8.75 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/page/v/2 $$17.1 \mathrm{ms} \pm 235 \mathrm{μs}\left({\color{red}7.09 \mathrm{\%}}\right) $$ Flame Graph
entity_by_id entity type ID: https://blockprotocol.org/@alice/types/entity-type/organization/v/1 $$18.3 \mathrm{ms} \pm 256 \mathrm{μs}\left({\color{red}12.5 \mathrm{\%}}\right) $$ Flame Graph

@vilkinsons vilkinsons marked this pull request as draft August 8, 2024 07:26
auto-merge was automatically disabled August 8, 2024 07:26

Pull request was converted to draft

@vilkinsons vilkinsons marked this pull request as ready for review August 8, 2024 20:18
@vilkinsons vilkinsons enabled auto-merge August 8, 2024 20:18
@vilkinsons vilkinsons marked this pull request as draft October 20, 2024 13:25
auto-merge was automatically disabled October 20, 2024 13:25

Pull request was converted to draft

@vilkinsons
Copy link
Member

vilkinsons commented Dec 5, 2024 •
edited
Loading

We have now upgraded from Yarn 1, which Storybook 8 did not support, to Yarn 4.

As such, we might now consider this PR unblocked and worth revisiting, with a view to picking up our use of Storybook again alongside future work (and for improved frontend component testing).

After using Renovate to rebase, run yarn dlx storybook@latest upgrade to proceed with migration steps. The glob we want to use to find our stories is **/*.stories.*

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@semgrep-app semgrep-app[bot] semgrep-app[bot] left review comments

@renovate-approve renovate-approve[bot] renovate-approve[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees

@vilkinsons vilkinsons

Labels
area/apps > hash.design Affects the `hash.design` design site (app) area/apps area/deps Relates to third-party dependencies (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > backend Owned by the @backend team type/eng > frontend Owned by the @frontend team
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@vilkinsons @TimDiekmann