Backgrounds/Viewports: Make defaults overridable in StoryGlobals-mode

[JReinhold]

What I did

Changes the behavior of the Viewport and Backgrounds addons when in XStoryGlobals-mode. Previously the defaults where specified as default parameters. This meant that users couldn't override them or get rid of the default options, ever, because parameters deep merge.

Now the defaults are set internally, and only activated if the user hasn't specified the options parameters. Meaning that as soon as users adds their own viewports/backgrounds, the defaults disappear.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

1. Compile
2. Start a default dev sandbox
3. See the default viewports (phone/desktop) and backgrounds (light/dark) in the toolbar
4. Add the following properties to your sandbox's preview default export:

    backgrounds: {
      options: {
        twitter: { name: 'twitter', value: '#00aced' },
        facebook: { name: 'facebook', value: '#3b5998' },
      },
    },
    viewport: {
      options: {
        iphone5: {
          name: 'phone',
          styles: {
            width: '320px',
            height: '468px',
          },
        },
        ipad: {
          name: 'pad',
          styles: {
            width: '620px',
            height: '868px',
          },
        },

      },
    }

5. See that the viewports and backgrounds in the toolbar are now only the custom ones, with the defaults being removed.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.5 MB	76.5 MB	0 B	0.91	0%
initSize	161 MB	161 MB	-1.56 kB	0.2	0%
diffSize	84.7 MB	84.7 MB	-1.56 kB	0.19	0%
buildSize	7.48 MB	7.48 MB	-357 B	0.16	0%
buildSbAddonsSize	1.62 MB	1.62 MB	21 B	2.4	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.31 MB	2.31 MB	0 B	0.23	0%
buildSbPreviewSize	352 kB	352 kB	0 B	-	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.47 MB	4.47 MB	21 B	0.24	0%
buildPreviewSize	3.01 MB	3 MB	-378 B	0.05	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	18.2s	18.3s	93ms	0.54	0.5%
generateTime	25s	23.5s	-1s -492ms	0.29	-6.3%
initTime	19.9s	18.9s	-1s -26ms	0.11	-5.4%
buildTime	13s	11.6s	-1s -362ms	-0.64	-11.7%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.8s	6.4s	521ms	-0.69	8.1%
devManagerResponsive	3.8s	4.1s	315ms	-0.58	7.5%
devManagerHeaderVisible	652ms	800ms	148ms	0	18.5%
devManagerIndexVisible	682ms	837ms	155ms	-0.03	18.5%
devStoryVisibleUncached	802ms	1.2s	441ms	-0.39	35.5%
devStoryVisible	681ms	836ms	155ms	-0.03	18.5%
devAutodocsVisible	580ms	717ms	137ms	-0.05	19.1%
devMDXVisible	579ms	677ms	98ms	-0.28	14.5%
buildManagerHeaderVisible	676ms	938ms	262ms	2.39	🔺27.9%
buildManagerIndexVisible	713ms	947ms	234ms	2.35	🔺24.7%
buildStoryVisible	712ms	986ms	274ms	1.82	🔺27.8%
buildAutodocsVisible	580ms	986ms	406ms	3.68	🔺41.2%
buildMDXVisible	668ms	827ms	159ms	1.48	🔺19.2%

Greptile Summary

This pull request modifies the Viewport and Backgrounds addons in Storybook to make their default options overridable, allowing users to completely replace or remove the default viewports and backgrounds.

• Added DEFAULT_BACKGROUNDS in code/addons/backgrounds/src/defaults.ts for customizable background options
• Modified code/addons/viewport/src/components/Tool.tsx to use MINIMAL_VIEWPORTS as default, enabling user-defined viewport options
• Updated code/addons/backgrounds/src/preview.ts and code/addons/viewport/src/preview.ts to apply defaults only when custom options are not provided
• Removed emptyViewportMap from code/addons/viewport/src/utils.tsx to align with the new customization approach
• Adjusted code/addons/backgrounds/src/decorator.ts to use DEFAULT_BACKGROUNDS as the default value for options

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ec394c0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.

[greptile-apps]

_{7 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings}

[greptile-apps]

style: Consider using a more specific import instead of the entire 'types' file