Sort all imports with the prettier plugin

.eslintrc

@@ -7,13 +7,7 @@
       "jsx": true
     }
   },
-  "plugins": [
-    "testing-library",
-    "@typescript-eslint",
-    "react",
-    "jest",
-    "jest-dom"
-  ],
+  "plugins": ["testing-library", "@typescript-eslint", "react", "jest", "jest-dom"],
   "extends": [
     "eslint:recommended",
     "plugin:jest/recommended",

.storybook/preview.ts

@@ -1,6 +1,6 @@
+import { withConsole } from '@storybook/addon-console';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { addDecorator, addParameters } from '@storybook/react';
-import { withConsole } from '@storybook/addon-console';
 
 import { theme } from './theme';
 

docs/demos/00-props.story.tsx

@@ -1,7 +1,6 @@
 /* eslint no-console: 0 */
-import React from 'react';
 import { Story } from '@storybook/react';
-
+import React from 'react';
 import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';
 
 import * as config from './config';

docs/demos/02-handles.story.tsx

@@ -1,6 +1,5 @@
 /* eslint no-console: 0 */
 import React from 'react';
-
 import {
   ReactCompareSlider,
   ReactCompareSliderHandle,

docs/demos/03-custom-components.story.tsx

@@ -1,7 +1,6 @@
 /* eslint no-console: 0 */
+import { GoogleApiWrapper, Map } from 'google-maps-react';
 import React from 'react';
-import { Map, GoogleApiWrapper } from 'google-maps-react';
-
 import { ReactCompareSlider } from 'react-compare-slider';
 
 import * as config from './config';

example/demo-blocks.tsx

@@ -13,10 +13,7 @@ export const DemoSection: React.FC<DemoSectionProps> = ({
 }) => (
   <section className="c-demo-section" {...props}>
     <div className="c-demo-section__info">
-      <h1
-        className="c-demo-section__title"
-        dangerouslySetInnerHTML={{ __html: title }}
-      />
+      <h1 className="c-demo-section__title" dangerouslySetInnerHTML={{ __html: title }} />
       <p
         className="c-demo-section__description"
         dangerouslySetInnerHTML={{ __html: description }}

example/index.tsx

@@ -1,9 +1,8 @@
 /* eslint no-console: 0 */
-
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ReactCompareSlider, ReactCompareSliderImage, styleFitContainer } from '../src';
 
+import { ReactCompareSlider, ReactCompareSliderImage, styleFitContainer } from '../src';
 import { DemoSection } from './demo-blocks';
 
 const App = () => {

src/ReactCompareSlider.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { ContainerClip, ContainerHandle } from './Container';
 import { ReactCompareSliderHandle } from './ReactCompareSliderHandle';
 import { ReactCompareSliderCommonProps, ReactCompareSliderPropPosition } from './types';
 import {
   useEventListener,
   usePrevious,
-  UseResizeObserverHandlerParams,
   useResizeObserver,
+  UseResizeObserverHandlerParams,
 } from './utils';
 
 /** Comparison slider properties. */
@@ -93,9 +93,12 @@ export const ReactCompareSlider: React.FC<
       portrait: _portrait,
       boundsPadding: _boundsPadding,
     }: UpdateInternalPositionProps) {
-      const { top, left, width, height } = (
-        rootContainerRef.current as HTMLDivElement
-      ).getBoundingClientRect();
+      const {
+        top,
+        left,
+        width,
+        height,
+      } = (rootContainerRef.current as HTMLDivElement).getBoundingClientRect();
 
       // Early out if width or height are zero, can't calculate values
       // from zeros.
@@ -184,9 +187,10 @@ export const ReactCompareSlider: React.FC<
 
   // Update internal position when other user controllable props change.
   useEffect(() => {
-    const { width, height } = (
-      rootContainerRef.current as HTMLDivElement
-    ).getBoundingClientRect();
+    const {
+      width,
+      height,
+    } = (rootContainerRef.current as HTMLDivElement).getBoundingClientRect();
 
     // Use current internal position if `position` hasn't changed.
     const nextPosition =
@@ -240,9 +244,10 @@ export const ReactCompareSlider: React.FC<
   /** Resync internal position on resize. */
   const handleResize: (resizeProps: UseResizeObserverHandlerParams) => void = useCallback(
     ({ width, height }) => {
-      const { width: scaledWidth, height: scaledHeight } = (
-        rootContainerRef.current as HTMLDivElement
-      ).getBoundingClientRect();
+      const {
+        width: scaledWidth,
+        height: scaledHeight,
+      } = (rootContainerRef.current as HTMLDivElement).getBoundingClientRect();
 
       updateInternalPosition({
         portrait,

test/ReactCompareSlider.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { cleanup, fireEvent, render } from '@testing-library/react';
+import React from 'react';
 
 import { ReactCompareSlider, ReactCompareSliderHandle } from '../src';
 

test/ReactCompareSliderImage.test.tsx

@@ -1,5 +1,5 @@
+import { cleanup, render } from '@testing-library/react';
 import React from 'react';
-import { render, cleanup } from '@testing-library/react';
 
 import { ReactCompareSliderImage } from '../src';
 

test/utils.test.ts

@@ -1,9 +1,8 @@
 /**
  * @jest-environment node
  */
-
-import React from 'react';
 import { cleanup } from '@testing-library/react';
+import React from 'react';
 
 import { styleFitContainer } from '../src/';
 import { useIsomorphicLayoutEffect } from '../src/utils';