Merge pull request #28839 from storybookjs/norbert/sort-imports

Linting: Sort imports

.git-blame-ignore-revs

@@ -2,4 +2,6 @@
 c0896915fb7fb9a8dd416b9aebca17abd909d1c1
 a41c227037e7e7249b8b376f838f4f8bcc3e3e59
 13c46e6c0b7f3dd8cf4ba42d1cfd6714f4777d54
-0a4522a3f84773f39daec4820c49b8a92e9f9d11
+0a4522a3f84773f39daec4820c49b8a92e9f9d11
+e12039c0593ba021ce27cb7245b6067677f27625
+513bb66bb9729ece57581b6eb50e5b338c47c0b9

code/.eslintrc.js

@@ -19,6 +19,10 @@ module.exports = {
   },
   plugins: ['local-rules'],
   rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: true, peerDependencies: true },
+    ],
     'import/no-unresolved': 'off', // covered by typescript
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
     'eslint-comments/no-unused-disable': 'error',
@@ -55,7 +59,13 @@ module.exports = {
       },
     },
     {
-      files: ['**/template/**/*', '**/vitest.config.ts', '**/addons/docs/**/*'],
+      files: [
+        '*.test.*',
+        '*.spec.*',
+        '**/template/**/*',
+        '**/vitest.config.ts',
+        '**/addons/docs/**/*',
+      ],
       rules: {
         'import/no-extraneous-dependencies': 'off',
       },

code/.storybook/main.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { mergeConfig } from 'vite';
+
 import type { StorybookConfig } from '../frameworks/react-vite';
 
 const componentsPath = path.join(__dirname, '../core/src/components');

code/.storybook/manager.tsx

@@ -1,4 +1,5 @@
 import { addons } from 'storybook/internal/manager-api';
+
 import startCase from 'lodash/startCase.js';
 
 addons.setConfig({

code/.storybook/preview.tsx

@@ -1,24 +1,26 @@
-import { global } from '@storybook/global';
 import React, { Fragment, useEffect } from 'react';
-import { isChromatic } from './isChromatic';
+
+import type { Channel } from 'storybook/internal/channels';
+import { DocsContext as DocsContextProps, useArgs } from 'storybook/internal/preview-api';
+import type { PreviewWeb } from 'storybook/internal/preview-api';
 import {
   Global,
   ThemeProvider,
-  themes,
-  createReset,
   convert,
+  createReset,
   styled,
+  themes,
   useTheme,
 } from 'storybook/internal/theming';
-import { useArgs, DocsContext as DocsContextProps } from 'storybook/internal/preview-api';
-import type { PreviewWeb } from 'storybook/internal/preview-api';
-import type { ReactRenderer, Decorator } from '@storybook/react';
-import type { Channel } from 'storybook/internal/channels';
 
 import { DocsContext } from '@storybook/blocks';
+import { global } from '@storybook/global';
+import type { Decorator, ReactRenderer } from '@storybook/react';
+
 import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
 
 import { DocsPageWrapper } from '../lib/blocks/src/components';
+import { isChromatic } from './isChromatic';
 
 const { document } = global;
 

code/addons/a11y/README.md

@@ -168,7 +168,7 @@ You can override these options [at story level too](https://storybook.js.org/doc
 
 ```js
 import React from 'react';
-import { storiesOf, addDecorator, addParameters } from '@storybook/react';
+import { addDecorator, addParameters, storiesOf } from '@storybook/react';
 
 export default {
   title: 'button',

code/addons/a11y/src/a11yRunner.test.ts

@@ -1,6 +1,8 @@
 import type { Mock } from 'vitest';
-import { describe, beforeEach, it, expect, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
 import { addons } from 'storybook/internal/preview-api';
+
 import { EVENTS } from './constants';
 
 vi.mock('storybook/internal/preview-api');

code/addons/a11y/src/a11yRunner.ts

@@ -1,5 +1,7 @@
-import { global } from '@storybook/global';
 import { addons } from 'storybook/internal/preview-api';
+
+import { global } from '@storybook/global';
+
 import { EVENTS } from './constants';
 import type { A11yParameters } from './params';
 

code/addons/a11y/src/components/A11YPanel.test.tsx

@@ -1,14 +1,14 @@
 // @vitest-environment happy-dom
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import React from 'react';
-import { render, waitFor, fireEvent, act, cleanup } from '@testing-library/react';
 
-import { ThemeProvider, themes, convert } from 'storybook/internal/theming';
 import * as api from 'storybook/internal/manager-api';
+import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
 
-import { A11YPanel } from './A11YPanel';
 import { EVENTS } from '../constants';
+import { A11YPanel } from './A11YPanel';
 
 vi.mock('storybook/internal/manager-api');
 

code/addons/a11y/src/components/A11YPanel.tsx

@@ -1,25 +1,23 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { styled } from 'storybook/internal/theming';
-
 import { ActionBar, ScrollArea } from 'storybook/internal/components';
-import { SyncIcon, CheckIcon } from '@storybook/icons';
-
-import type { AxeResults } from 'axe-core';
 import {
   useChannel,
   useParameter,
   useStorybookApi,
   useStorybookState,
 } from 'storybook/internal/manager-api';
+import { styled } from 'storybook/internal/theming';
 
-import { Report } from './Report';
+import { CheckIcon, SyncIcon } from '@storybook/icons';
 
-import { Tabs } from './Tabs';
+import type { AxeResults } from 'axe-core';
 
-import { useA11yContext } from './A11yContext';
 import { EVENTS } from '../constants';
 import type { A11yParameters } from '../params';
+import { useA11yContext } from './A11yContext';
+import { Report } from './Report';
+import { Tabs } from './Tabs';
 
 export enum RuleType {
   VIOLATION,

code/addons/a11y/src/components/A11yContext.test.tsx

@@ -1,15 +1,18 @@
 // @vitest-environment happy-dom
+import { act, cleanup, render } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import * as React from 'react';
-import type { AxeResults } from 'axe-core';
-import { render, act, cleanup } from '@testing-library/react';
-import * as api from 'storybook/internal/manager-api';
+
 import { STORY_CHANGED } from 'storybook/internal/core-events';
+import * as api from 'storybook/internal/manager-api';
+
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-import { A11yContextProvider, useA11yContext } from './A11yContext';
+import type { AxeResults } from 'axe-core';
+
 import { EVENTS } from '../constants';
+import { A11yContextProvider, useA11yContext } from './A11yContext';
 
 vi.mock('storybook/internal/manager-api');
 const mockedApi = vi.mocked(api);

code/addons/a11y/src/components/A11yContext.tsx

@@ -1,9 +1,13 @@
 import * as React from 'react';
-import { themes, convert } from 'storybook/internal/theming';
-import type { Result } from 'axe-core';
-import { useChannel, useAddonState, useStorybookApi } from 'storybook/internal/manager-api';
+
 import { STORY_CHANGED, STORY_RENDERED } from 'storybook/internal/core-events';
+import { useAddonState, useChannel, useStorybookApi } from 'storybook/internal/manager-api';
+import { convert, themes } from 'storybook/internal/theming';
+
 import { HIGHLIGHT } from '@storybook/addon-highlight';
+
+import type { Result } from 'axe-core';
+
 import { ADDON_ID, EVENTS } from '../constants';
 
 export interface Results {

code/addons/a11y/src/components/Report/Elements.tsx

@@ -4,10 +4,10 @@ import React from 'react';
 import { styled } from 'storybook/internal/theming';
 
 import type { NodeResult } from 'axe-core';
-import { Rules } from './Rules';
 
 import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
+import { Rules } from './Rules';
 
 const Item = styled.li({
   fontWeight: 600,

code/addons/a11y/src/components/Report/HighlightToggle.test.tsx

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
+import { cleanup, fireEvent, render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { describe, it, expect, afterEach, vi } from 'vitest';
 import React from 'react';
-import { render, fireEvent, cleanup } from '@testing-library/react';
+
 import type { NodeResult } from 'axe-core';
-import HighlightToggle from './HighlightToggle';
+
 import { A11yContext } from '../A11yContext';
+import HighlightToggle from './HighlightToggle';
 
 const nodeResult = (target: string): NodeResult => ({
   html: '',

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+
 import { styled } from 'storybook/internal/theming';
 
 import type { NodeResult } from 'axe-core';
+
 import { useA11yContext } from '../A11yContext';
 
 interface ToggleProps {

code/addons/a11y/src/components/Report/Info.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Report/Item.tsx

@@ -2,15 +2,15 @@ import React, { Fragment, useState } from 'react';
 
 import { styled } from 'storybook/internal/theming';
 
-import type { Result } from 'axe-core';
-import { Info } from './Info';
+import { ChevronSmallDownIcon } from '@storybook/icons';
 
-import { Elements } from './Elements';
-import { Tags } from './Tags';
+import type { Result } from 'axe-core';
 
 import type { RuleType } from '../A11YPanel';
+import { Elements } from './Elements';
 import HighlightToggle from './HighlightToggle';
-import { ChevronSmallDownIcon } from '@storybook/icons';
+import { Info } from './Info';
+import { Tags } from './Tags';
 
 const Wrapper = styled.div(({ theme }) => ({
   display: 'flex',

code/addons/a11y/src/components/Report/Rules.tsx

@@ -1,7 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from 'storybook/internal/theming';
+
 import { Badge } from 'storybook/internal/components';
+import { styled } from 'storybook/internal/theming';
+
 import type { CheckResult } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
 

code/addons/a11y/src/components/Report/Tags.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { TagValue } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Report/index.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
+
 import { EmptyTabContent } from 'storybook/internal/components';
-import type { Result } from 'axe-core';
 
-import { Item } from './Item';
+import type { Result } from 'axe-core';
 
 import type { RuleType } from '../A11YPanel';
+import { Item } from './Item';
 
 export interface ReportProps {
   items: Result[];

code/addons/a11y/src/components/Tabs.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 
 import { styled } from 'storybook/internal/theming';
+
 import type { NodeResult, Result } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
-import HighlightToggle from './Report/HighlightToggle';
 
 import type { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';
+import HighlightToggle from './Report/HighlightToggle';
 
 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
 

code/addons/a11y/src/components/VisionSimulator.test.tsx

@@ -1,11 +1,13 @@
 // @vitest-environment happy-dom
-
 /// <reference types="@testing-library/jest-dom" />;
-import { describe, it, expect } from 'vitest';
-import React from 'react';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { ThemeProvider, themes, convert } from 'storybook/internal/theming';
+import { describe, expect, it } from 'vitest';
+
+import React from 'react';
+
+import { ThemeProvider, convert, themes } from 'storybook/internal/theming';
+
 import { VisionSimulator, baseList } from './VisionSimulator';
 
 const getOptionByNameAndPercentage = (option: string, percentage?: number) =>

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -1,9 +1,11 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
+
+import { IconButton, TooltipLinkList, WithTooltip } from 'storybook/internal/components';
 import { Global, styled } from 'storybook/internal/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
 
 import { AccessibilityIcon } from '@storybook/icons';
+
 import { Filters } from './ColorFilters';
 
 const iframeId = 'storybook-preview-iframe';

code/addons/a11y/src/manager.test.tsx

@@ -1,8 +1,9 @@
 // @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest';
 
-import { describe, it, expect, vi } from 'vitest';
 import * as api from 'storybook/internal/manager-api';
 import type { Addon_BaseType } from 'storybook/internal/types';
+
 import { PANEL_ID } from './constants';
 import './manager';
 

code/addons/a11y/src/manager.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
-import { addons, types, useAddonState } from 'storybook/internal/manager-api';
+
 import { Badge, Spaced } from 'storybook/internal/components';
-import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
-import { VisionSimulator } from './components/VisionSimulator';
+import { addons, types, useAddonState } from 'storybook/internal/manager-api';
+
 import { A11YPanel } from './components/A11YPanel';
 import type { Results } from './components/A11yContext';
 import { A11yContextProvider } from './components/A11yContext';
+import { VisionSimulator } from './components/VisionSimulator';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 const Title = () => {
   const [addonState] = useAddonState<Results>(ADDON_ID);

code/addons/a11y/src/params.ts

@@ -1,4 +1,4 @@
-import type { ElementContext, Spec, RunOptions } from 'axe-core';
+import type { ElementContext, RunOptions, Spec } from 'axe-core';
 
 export interface Setup {
   element?: ElementContext;

code/addons/a11y/vitest.config.ts

@@ -1,4 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
+
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(