From fccd377df33a84da4f6ee9c3e0eae7bf163b014f Mon Sep 17 00:00:00 2001
From: Wondermarin <33459274+Wondermarin@users.noreply.github.com>
Date: Wed, 28 Apr 2021 17:06:44 +0300
Subject: [PATCH] fix: Add `React 16` support

---
 .babelrc                                 | 4 +---
 .eslintrc                                | 5 +----
 demo/index.tsx                           | 2 +-
 package.json                             | 4 ++--
 rollup.config.ts                         | 2 +-
 src/components/ColorPicker.component.tsx | 1 +
 src/components/Fields.component.tsx      | 2 +-
 src/components/Hue.component.tsx         | 2 +-
 src/components/Interactive.component.tsx | 2 +-
 src/components/Saturation.component.tsx  | 2 +-
 tsconfig.json                            | 8 ++------
 11 files changed, 13 insertions(+), 21 deletions(-)

diff --git a/.babelrc b/.babelrc
index 817d545..e618e51 100644
--- a/.babelrc
+++ b/.babelrc
@@ -8,9 +8,7 @@
       "modules": false,
       "bugfixes": true
     }],
-    ["@babel/preset-react", {
-      "runtime": "automatic"
-    }],
+    ["@babel/preset-react"],
     ["@babel/preset-typescript", {
       "isTSX": true,
       "allExtensions": true
diff --git a/.eslintrc b/.eslintrc
index 5e3a5ab..0851040 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -46,9 +46,6 @@
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/explicit-function-return-type": "error",
     "@typescript-eslint/no-unused-expressions": "error",
-    "prettier/prettier": "error",
-    "react/display-name": "off",
-    "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off"
+    "prettier/prettier": "error"
   }
 }
diff --git a/demo/index.tsx b/demo/index.tsx
index 365399e..2d0589a 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -1,4 +1,4 @@
-import { StrictMode } from "react";
+import React, { StrictMode } from "react";
 import { render } from "react-dom";
 import { ColorPicker, useColor } from "../src";
 import "../src/css/styles.css";
diff --git a/package.json b/package.json
index 2fd7c55..ca19f1e 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "test": "yarn test:lint && yarn test:typescript",
     "build:js": "rollup --config rollup.config.ts",
     "build:types": "tsc --emitDeclarationOnly",
-    "prebuild": "del-cli lib",
+    "prebuild": "yarn test && del-cli lib",
     "build": "yarn build:js && yarn build:types",
     "predemo:build": "del-cli demo/build",
     "demo:build": "parcel build demo/index.html --dist-dir demo/build --target demo --public-url . --no-source-maps",
@@ -72,7 +72,7 @@
     "release": "git push --follow-tags origin master"
   },
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": ">=16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",
diff --git a/rollup.config.ts b/rollup.config.ts
index cac2dcf..daaf268 100644
--- a/rollup.config.ts
+++ b/rollup.config.ts
@@ -23,7 +23,7 @@ const config = {
       format: "es",
     },
   ],
-  external: ["react", "react/jsx-runtime"],
+  external: ["react"],
   plugins: [
     nodeResolve({
       extensions,
diff --git a/src/components/ColorPicker.component.tsx b/src/components/ColorPicker.component.tsx
index eb8db29..bcfb286 100644
--- a/src/components/ColorPicker.component.tsx
+++ b/src/components/ColorPicker.component.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { ColorPickerProps } from "../interfaces/ColorPicker.interface";
 import { Saturation } from "./Saturation.component";
 import { Hue } from "./Hue.component";
diff --git a/src/components/Fields.component.tsx b/src/components/Fields.component.tsx
index 4c603ed..24cda96 100644
--- a/src/components/Fields.component.tsx
+++ b/src/components/Fields.component.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState, useEffect } from "react";
+import React, { useCallback, useState, useEffect } from "react";
 import { UpperFloorProps, LowerFloorProps, FieldsProps } from "../interfaces/Fields.interface";
 import { toHsv, toRgb } from "../utils/convert.util";
 import { toColor } from "../utils/toColor.util";
diff --git a/src/components/Hue.component.tsx b/src/components/Hue.component.tsx
index f2def50..7595247 100644
--- a/src/components/Hue.component.tsx
+++ b/src/components/Hue.component.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { HueProps } from "../interfaces/Hue.interface";
 import { getHueCoordinates } from "../utils/coordinates.util";
 import { toColor } from "../utils/toColor.util";
diff --git a/src/components/Interactive.component.tsx b/src/components/Interactive.component.tsx
index ddf3b6e..140b5ea 100644
--- a/src/components/Interactive.component.tsx
+++ b/src/components/Interactive.component.tsx
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { InteractiveProps } from "../interfaces/Interactive.interface";
 import { clamp } from "../utils/clamp.util";
 
diff --git a/src/components/Saturation.component.tsx b/src/components/Saturation.component.tsx
index 4183ee1..4109a8d 100644
--- a/src/components/Saturation.component.tsx
+++ b/src/components/Saturation.component.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { SaturationProps } from "../interfaces/Saturation.interface";
 import { getColorCoordinates } from "../utils/coordinates.util";
 import { toColor } from "../utils/toColor.util";
diff --git a/tsconfig.json b/tsconfig.json
index 9a83100..ceb0659 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,12 +4,8 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "outDir": "lib",
-    "jsx": "react-jsx",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "jsx": "react",
+    "lib": ["ESNext", "DOM"],
     "allowJs": true,
     "strict": true,
     "declaration": true,