Linting: Sort imports

[ndelangen]

What I did

I enhanced the prettier config so it also sorts imports in a way that makes the most sense for the storybook monorepo.

This PR touches a lot of files, so to make it easier: here's the new prettier config:

storybook/scripts/prettier.config.js

Lines 1 to 45 in faa0cd5

	export default {
	printWidth: 100,
	tabWidth: 2,
	bracketSpacing: true,
	trailingComma: 'es5',
	singleQuote: true,
	overrides: [
	{
	files: '*.html',
	options: { parser: 'babel' },
	},
	{
	files: '*.component.html',
	options: { parser: 'angular' },
	},
	{
	files: ['**/frameworks/angular/src/**/*.ts', '**/frameworks/angular/template/**/*.ts'],
	options: { parser: 'babel-ts' },
	},
	{
	files: ['**/docs/**/*.*', '*.md'],
	options: {
	importOrderSeparation: false,
	importOrderSortSpecifiers: false,
	},
	},
	],
	plugins: ['@trivago/prettier-plugin-sort-imports'],
	importOrder: [
	'^node:',
	'^(vitest|@testing-library)',
	'^react$',
	'^storybook/internal',
	'^@storybook/[^-]*$',
	'^@storybook/(?!addon-)(.*)$',
	'^@storybook/addon-(.*)$',
	'<THIRD_PARTY_MODULES>',
	'^[./]',
	],
	importOrderSeparation: true,
	importOrderSortSpecifiers: true,
	arrowParens: 'always',
	};

the '@trivago/prettier-plugin-sort-imports' plugin for prettier is what performs the magic, and it's configured with the importOrder, importOrderSeparation and importOrderSortSpecifiers properties.

The rest of the files touched in this PR are formatting changes, sorting the imports.

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!

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.3 MB	76.3 MB	0 B	-1.94	0%
initSize	167 MB	167 MB	22.3 kB	-1.23	0%
diffSize	91.1 MB	91.1 MB	22.3 kB	-1.23	0%
buildSize	7.42 MB	7.42 MB	9 B	-0.65	0%
buildSbAddonsSize	1.61 MB	1.61 MB	-11 B	-0.66	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.29 MB	2.29 MB	37 B	Infinity	0%
buildSbPreviewSize	351 kB	351 kB	-8 B	-Infinity	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.45 MB	4.45 MB	18 B	-0.65	0%
buildPreviewSize	2.97 MB	2.97 MB	-9 B	-0.65	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	23s	6.5s	-16s -479ms	-2.19	🔰-251.8%
generateTime	20s	19.6s	-451ms	-0.84	-2.3%
initTime	17.2s	17.1s	-96ms	-1.2	-0.6%
buildTime	11.6s	13.8s	2.1s	0.59	15.8%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	10.6s	8.6s	-1s -975ms	0.03	-22.7%
devManagerResponsive	6.2s	5.4s	-829ms	0.25	-15.2%
devManagerHeaderVisible	844ms	858ms	14ms	0.02	1.6%
devManagerIndexVisible	871ms	895ms	24ms	0.04	2.7%
devStoryVisibleUncached	1.4s	1.4s	-39ms	0.78	-2.7%
devStoryVisible	885ms	906ms	21ms	-0.04	2.3%
devAutodocsVisible	737ms	759ms	22ms	0.01	2.9%
devMDXVisible	827ms	643ms	-184ms	-0.92	-28.6%
buildManagerHeaderVisible	897ms	841ms	-56ms	0.5	-6.7%
buildManagerIndexVisible	902ms	854ms	-48ms	0.53	-5.6%
buildStoryVisible	953ms	903ms	-50ms	0.56	-5.5%
buildAutodocsVisible	725ms	707ms	-18ms	-0.2	-2.5%
buildMDXVisible	768ms	704ms	-64ms	0.08	-9.1%

Greptile Summary

Enhanced the prettier configuration to sort imports using the '@trivago/prettier-plugin-sort-imports' plugin, resulting in reordering import statements across various files for improved readability and maintainability.

• /scripts/prettier.config.js: Added @trivago/prettier-plugin-sort-imports and configured importOrder, importOrderSeparation, and importOrderSortSpecifiers.
• /code/.eslintrc.js: Expanded file patterns and added import/no-extraneous-dependencies rule.
• /code/.storybook/main.ts: Added a blank line after import statements.
• /code/.storybook/preview-head.html: Removed file containing commented-out script tag.
• /code/addons/a11y/src/a11yRunner.ts: Reordered import statements to comply with new prettier configuration.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2e2d4f3. 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]

LGTM

_{29 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[shilman]

Why is there a blank line here and not between the previous two lines?

[ndelangen]

So what I truly wanted was to provide a bit more order to storybook package import, by separating having them in a fixed order.

I think this improved readability a little.

I can't order packages in a certain way and NOT include the whitespace-line.
(well I CAN, but it's an all or nothing kinda of setting)

This is the setting I landed on:

storybook/scripts/prettier.config.js

Lines 31 to 39 in d8554e3

	'^node:',
	'^(vitest|@testing-library)',
	'^react(-dom(/client)?(/server)?)?$',
	'^storybook/internal',
	'^@storybook/[^-]*$',
	'^@storybook/(?!addon-)(.*)$',
	'^@storybook/addon-(.*)$',
	'<THIRD_PARTY_MODULES>',
	'^[./]',

And so imports are "bucketed" according to these regexes. And then each bucket is sorted, and placed with a whitespace-line.

This line: '^@storybook/[^-]*$',, means: any package that starts with @storybook/ and then has no - in it, is a bucket.

[ndelangen]

My main goal was to ensure the renderer (e.g. @storybook/react) in stories files are hoisted above deprecated packages (@storybook/preview-api, etc).