refactor: merge with master, fix conflicts

.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';
 

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

CONTRIBUTING.md

@@ -0,0 +1,43 @@
+# Contributing
+
+Thanks for contributing!
+
+## Getting Started
+
+Ensure you're using the Node version specified in [.nvmrc](./.nvmrc) and run the following to
+bootstrap the project:
+
+```sh
+yarn
+```
+
+To start the library build and `example` project, run the following commands in separate terminals:
+
+```sh
+# Start the library build
+yarn start
+
+# Start the example build
+cd ./example
+yarn
+yarn start
+```
+
+To start Storybook run the following command:
+
+```sh
+yarn storybook
+```
+
+## Standards
+
+- Commits use the [Conventional Commits](https://conventionalcommits.org/) standard
+- yarn to manage dependencies
+- Use a tool (e.g. nvm or fnm) to use the correct Node.js version
+- Prettier & EditorConfig for code style
+- ESLint for quality
+- Husky for Git hooks
+
+## VS Code
+
+If you're using VS Code please make sure you install the [recommended extensions](./.vscode/extensions.json).

docs/stories/00-props.stories.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/stories/02-handles.stories.tsx

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

docs/stories/03-custom-components.stories.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 = () => {

package.json

@@ -80,7 +80,19 @@
     "printWidth": 90,
     "semi": true,
     "singleQuote": true,
-    "trailingComma": "es5"
+    "trailingComma": "es5",
+    "importOrder": [
+      "^[./]"
+    ],
+    "importOrderBuiltinModulesToTop": true,
+    "importOrderCaseInsensitive": true,
+    "importOrderParserPlugins": [
+      "typescript",
+      "jsx",
+      "decorators-legacy"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
   },
   "peerDependencies": {
     "react": ">=16.8",

src/ReactCompareSlider.tsx

@@ -1,4 +1,4 @@
-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';