Add prettier plugin to sort imports in a consistent and automated way

README.md

@@ -63,9 +63,8 @@ import { Link } from '@hypothesis/frontend-shared';
 ### Icons (legacy)
 
 ```js
-import { profile, share, trash } from '@hypothesis/frontend-shared/lib/icons';
-
 import { registerIcons } from '@hypothesis/frontend-shared';
+import { profile, share, trash } from '@hypothesis/frontend-shared/lib/icons';
 
 registerIcons({ profile, shareAnnotation: share, trash });
 

package.json

@@ -15,6 +15,7 @@
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-virtual": "^3.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
     "autoprefixer": "^10.3.7",
@@ -75,7 +76,12 @@
   },
   "prettier": {
     "arrowParens": "avoid",
-    "singleQuote": true
+    "singleQuote": true,
+    "importOrder": [
+      "^.\\/components\\/patterns\\/(.*)Components$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true
   },
   "files": [
     "lib",

rollup-tests.config.js

@@ -1,8 +1,8 @@
 import { babel } from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { string } from 'rollup-plugin-string';
 import virtual from '@rollup/plugin-virtual';
+import { string } from 'rollup-plugin-string';
 
 export default {
   input: 'build/scripts/test-inputs.js', // Input file generated by gulp task

scripts/generate-icons.js

@@ -1,6 +1,5 @@
 import { readdirSync, readFileSync, writeFileSync } from 'node:fs';
 import * as path from 'node:path';
-
 import { format } from 'prettier';
 import { optimize } from 'svgo';
 

scripts/serve-pattern-library.js

@@ -1,9 +1,8 @@
-import * as path from 'path';
-import { fileURLToPath } from 'url';
-
 import express from 'express';
 import log from 'fancy-log';
 import mustacheExpress from 'mustache-express';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
 
 export function servePatternLibrary(port = 4001) {
   const dirname = path.dirname(fileURLToPath(import.meta.url));

src/components/Checkbox.js

@@ -1,7 +1,7 @@
-// @ts-ignore
-import checkboxSVG from '../../images/icons/checkbox.svg';
 import classnames from 'classnames';
 
+// @ts-ignore
+import checkboxSVG from '../../images/icons/checkbox.svg';
 import { registerIcon, SvgIcon } from './SvgIcon';
 
 // Register the checkbox icon for use

src/components/Dialog.js

@@ -3,8 +3,8 @@ import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
 
 // @ts-ignore
 import cancelSVG from '../../images/icons/cancel.svg';
-import { IconButton, LabeledButton } from './buttons';
 import { registerIcon, SvgIcon } from './SvgIcon';
+import { IconButton, LabeledButton } from './buttons';
 
 // Register the checkbox icon for use
 const cancelIcon = registerIcon('cancel', cancelSVG);

src/components/Panel.js

@@ -2,8 +2,8 @@ import classnames from 'classnames';
 
 // @ts-ignore
 import cancelSVG from '../../images/icons/cancel.svg';
-import { IconButton } from './buttons';
 import { registerIcon, SvgIcon } from './SvgIcon';
+import { IconButton } from './buttons';
 
 // Register the cancel icon for use
 const cancelIcon = registerIcon('cancel', cancelSVG);

src/components/data/DataTable.tsx

@@ -5,15 +5,14 @@ import { useArrowKeyNavigation } from '../../hooks/use-arrow-key-navigation';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
 import type { CompositeProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import { SpinnerSpokesIcon } from '../icons';
 import ScrollContext from './ScrollContext';
 import Table from './Table';
-import TableHead from './TableHead';
 import TableBody from './TableBody';
-import TableRow from './TableRow';
 import TableCell from './TableCell';
 import TableFoot from './TableFoot';
+import TableHead from './TableHead';
+import TableRow from './TableRow';
 
 export type TableColumn = {
   field: string;

src/components/data/Scroll.js

@@ -1,8 +1,7 @@
 import classnames from 'classnames';
 
-import { downcastRef } from '../../util/typing';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
-
+import { downcastRef } from '../../util/typing';
 import ScrollContext from './ScrollContext';
 
 /**

src/components/data/Table.js

@@ -2,7 +2,6 @@ import classnames from 'classnames';
 
 import { useSyncedRef } from '../../hooks/use-synced-ref';
 import { downcastRef } from '../../util/typing';
-
 import TableContext from './TableContext';
 
 /**

src/components/data/TableBody.js

@@ -2,9 +2,8 @@ import classnames from 'classnames';
 import { useContext } from 'preact/hooks';
 
 import { downcastRef } from '../../util/typing';
-
-import TableSectionContext from './TableSectionContext';
 import TableContext from './TableContext';
+import TableSectionContext from './TableSectionContext';
 
 /**
  * @typedef {import('../../types').PresentationalProps} CommonProps

src/components/data/TableCell.tsx

@@ -4,7 +4,6 @@ import { useContext } from 'preact/hooks';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import TableSectionContext from './TableSectionContext';
 
 export type TableCellProps = PresentationalProps &

src/components/data/TableFoot.tsx

@@ -3,7 +3,6 @@ import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import TableSectionContext from './TableSectionContext';
 import type { TableSection } from './TableSectionContext';
 

src/components/data/TableHead.js

@@ -2,7 +2,6 @@ import classnames from 'classnames';
 import { useContext } from 'preact/hooks';
 
 import { downcastRef } from '../../util/typing';
-
 import TableContext from './TableContext';
 import TableSectionContext from './TableSectionContext';
 

src/components/data/TableRow.tsx

@@ -5,9 +5,8 @@ import { useContext } from 'preact/hooks';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
-import TableSectionContext from './TableSectionContext';
 import TableContext from './TableContext';
+import TableSectionContext from './TableSectionContext';
 
 type ComponentProps = {
   selected?: boolean;

src/components/data/Thumbnail.js

@@ -1,10 +1,10 @@
 import classnames from 'classnames';
 import { toChildArray } from 'preact';
-import { downcastRef } from '../../util/typing';
 
-import AspectRatio from './AspectRatio';
-import { EllipsisIcon } from '../icons';
+import { downcastRef } from '../../util/typing';
 import Spinner from '../feedback/Spinner';
+import { EllipsisIcon } from '../icons';
+import AspectRatio from './AspectRatio';
 
 /**
  * @typedef {import('../../types').CompositeProps} CompositeProps

src/components/data/test/AspectRatio-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testSimpleComponent } from '../../test/common-tests';
-
 import AspectRatio from '../AspectRatio';
 
 const createComponent = (Component, props = {}) => {

src/components/data/test/DataTable-test.js

@@ -2,7 +2,6 @@ import { mount } from 'enzyme';
 import { useState } from 'preact/hooks';
 
 import { testCompositeComponent } from '../../test/common-tests';
-
 import DataTable from '../DataTable';
 import Scroll from '../Scroll';
 

src/components/data/test/Scroll-test.js

@@ -1,5 +1,4 @@
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import Scroll from '../Scroll';
 
 describe('Scroll', () => {

src/components/data/test/ScrollBox-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testCompositeComponent } from '../../test/common-tests';
-
 import ScrollBox from '../ScrollBox';
 
 const createComponent = (Component, props = {}) => {

src/components/data/test/ScrollContainer-test.js

@@ -1,5 +1,4 @@
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import ScrollContainer from '../ScrollContainer';
 
 describe('ScrollContainer', () => {

src/components/data/test/ScrollContent-test.js

@@ -1,5 +1,4 @@
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import ScrollContent from '../ScrollContent';
 
 describe('ScrollContent', () => {

src/components/data/test/Table-test.js

@@ -1,5 +1,4 @@
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import Table from '../Table';
 
 describe('Table', () => {

src/components/data/test/TableBody-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import TableBody from '../TableBody';
 import TableContext from '../TableContext';
 

src/components/data/test/TableCell-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import TableCell from '../TableCell';
 import TableSectionContext from '../TableSectionContext';
 

src/components/data/test/TableFoot-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import TableFoot from '../TableFoot';
 
 describe('TableFoot', () => {

src/components/data/test/TableHead-test.js

@@ -1,9 +1,8 @@
 import { mount } from 'enzyme';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
-import TableHead from '../TableHead';
 import TableContext from '../TableContext';
+import TableHead from '../TableHead';
 
 describe('TableHead', () => {
   let tableContextValue;

src/components/data/test/TableRow-test.js

@@ -1,9 +1,8 @@
 import { mount } from 'enzyme';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
-import TableRow from '../TableRow';
 import TableContext from '../TableContext';
+import TableRow from '../TableRow';
 import TableSectionContext from '../TableSectionContext';
 
 describe('TableRow', () => {

src/components/data/test/Thumbnail-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testCompositeComponent } from '../../test/common-tests';
-
 import Thumbnail from '../Thumbnail';
 
 const createComponent = (Component, props = {}) => {

src/components/feedback/Modal.tsx

@@ -5,10 +5,8 @@ import { useEffect, useLayoutEffect } from 'preact/hooks';
 import { useElementShouldClose } from '../../hooks/use-element-should-close';
 import { useSyncedRef } from '../../hooks/use-synced-ref';
 import { useUniqueId } from '../../hooks/use-unique-id';
-
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import Overlay from '../layout/Overlay';
 import Panel from '../layout/Panel';
 import type { PanelProps } from '../layout/Panel';

src/components/feedback/test/Modal-test.js

@@ -2,7 +2,6 @@ import { mount } from 'enzyme';
 import { createRef } from 'preact';
 
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import Modal from '../Modal';
 
 const createComponent = (Component, props = {}) => {

src/components/feedback/test/Spinner-test.js

@@ -1,5 +1,4 @@
 import { testSimpleComponent } from '../../test/common-tests';
-
 import Spinner from '../Spinner';
 
 describe('Spinner', () => {

src/components/feedback/test/SpinnerOverlay-test.js

@@ -1,5 +1,4 @@
 import { testSimpleComponent } from '../../test/common-tests';
-
 import SpinnerOverlay from '../SpinnerOverlay';
 
 describe('SpinnerOverlay', () => {

src/components/input/Button.js

@@ -1,7 +1,6 @@
 import classnames from 'classnames';
 
 import { downcastRef } from '../../util/typing';
-
 import ButtonBase from './ButtonBase';
 
 /**

src/components/input/ButtonBase.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+
 import { downcastRef } from '../../util/typing';
 
 /**

src/components/input/Checkbox.js

@@ -2,7 +2,6 @@ import classnames from 'classnames';
 import { useState } from 'preact/hooks';
 
 import { downcastRef } from '../../util/typing';
-
 import { CheckboxOutlineIcon, CheckboxCheckedIcon } from '../icons';
 
 /**

src/components/input/IconButton.js

@@ -1,10 +1,8 @@
 import classnames from 'classnames';
 
 import { downcastRef } from '../../util/typing';
-
-import { inputGroupStyles } from './InputGroup';
-
 import ButtonBase from './ButtonBase';
+import { inputGroupStyles } from './InputGroup';
 
 /**
  * @typedef {import('../../types').IconComponent} IconComponent

src/components/input/Input.tsx

@@ -2,7 +2,6 @@ import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import InputRoot from './InputRoot';
 
 type ComponentProps = {

src/components/input/InputRoot.tsx

@@ -3,7 +3,6 @@ import type { JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
 import { downcastRef } from '../../util/typing';
-
 import { inputGroupStyles } from './InputGroup';
 
 type RootComponentProps = {

src/components/input/Select.tsx

@@ -2,7 +2,6 @@ import classnames from 'classnames';
 import type { ComponentChildren, JSX } from 'preact';
 
 import type { PresentationalProps } from '../../types';
-
 import InputRoot from './InputRoot';
 
 type ComponentProps = {

src/components/input/test/Button-test.js

@@ -1,9 +1,8 @@
 import { mount } from 'enzyme';
 
+import { CancelIcon } from '../../icons';
 import { testPresentationalComponent } from '../../test/common-tests';
-
 import Button from '../Button';
-import { CancelIcon } from '../../icons';
 
 describe('Button', () => {
   const createComponent = (props = {}) => {

src/components/input/test/ButtonBase-test.js

@@ -1,7 +1,6 @@
 import { mount } from 'enzyme';
 
 import { testBaseComponent } from '../../test/common-tests';
-
 import ButtonBase from '../ButtonBase';
 
 describe('ButtonBase', () => {