chore(deps): Update dependency & react-color => @uiw/react-color-sketch

package.json

@@ -19,18 +19,18 @@
     "@uiw/react-github-corners": "1.4.0",
     "@uiw/copy-to-clipboard": "1.0.11",
     "react": "17.0.2",
-    "react-color": "2.19.3",
+    "@uiw/react-color-circle": "0.0.21",
+    "@uiw/react-color-sketch": "0.0.21",
     "react-dom": "17.0.2",
-    "prismjs": "1.24.0"
+    "prismjs": "1.24.1"
   },
   "devDependencies": {
     "@kkt/less-modules": "6.10.4",
-    "@types/prismjs": "1.16.5",
-    "@types/react": "17.0.11",
-    "@types/react-color": "3.0.4",
-    "@types/react-dom": "17.0.8",
+    "@types/prismjs": "1.16.6",
+    "@types/react": "17.0.14",
+    "@types/react-dom": "17.0.9",
     "husky": "6.0.0",
-    "lint-staged": "11.0.0",
+    "lint-staged": "11.0.1",
     "kkt": "6.10.4",
     "prettier": "2.3.2"
   },

src/app/App.tsx

@@ -1,32 +1,34 @@
 import { useMemo, useState } from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
-import { SketchPicker, ColorResult, RGBColor, CirclePicker, CirclePickerProps } from 'react-color';
+import { rgbaToHsva, RgbaColor, ColorResult } from '@uiw/color-convert';
+import Circle, { CircleProps } from '@uiw/react-color-circle';
+import Sketch from '@uiw/react-color-sketch';
 import styles from './App.module.css';
 import Code from './Code';
 import colorsData from './colors.json';
 
-function CircleColors(props: CirclePickerProps & { title?: string; index: number }) {
+function CircleColors(props: CircleProps & { title?: string; index: number }) {
   const { index, ...other } = props;
   const color = (props.colors || []).join('');
   return useMemo(() => {
     return (
       <div className={styles.color}>
-        <CirclePicker {...other} />
+        <Circle {...other} />
         <label>{props.title}</label>
       </div>
     );
   }, [color, index]);
 }
 
 export default function App() {
-  const [color, setColor] = useState<RGBColor>({ r: 224, g: 224, b: 224, a: 0.61 });
+  const [color, setColor] = useState<RgbaColor>({ r: 224, g: 224, b: 224, a: 0.61 });
   const [hex, setHex] = useState('#E0E0E0');
   const handleColorChange = (data: ColorResult) => {
-    setColor(data.rgb);
+    setColor(data.rgba);
     setHex(data.hex);
   };
   const handleSwatchesPicker = (data: ColorResult) => {
-    setColor(data.rgb);
+    setColor(data.rgba);
     setHex(data.hex);
   };
 
@@ -53,7 +55,7 @@ export default function App() {
         </div>
         <div className={styles.pane}>
           <div>
-            <SketchPicker color={color} onChange={handleColorChange} />
+            <Sketch color={rgbaToHsva(color)} onChange={handleColorChange} />
             <div className={styles.footer}>
               <div>Copyright © uiwjs 2021.</div>
               <div>

src/app/Code.tsx

@@ -1,6 +1,6 @@
-import copyTextToClipboard from '@uiw/copy-to-clipboard';
 import { useEffect, useState } from 'react';
-import { RGBColor } from 'react-color';
+import { RgbaColor } from '@uiw/color-convert';
+import copyToClipboard from '@uiw/copy-to-clipboard';
 import Prism from 'prismjs';
 import 'prismjs/components/prism-csharp';
 import 'prismjs/components/prism-swift';
@@ -13,7 +13,7 @@ type CodeProps = {
   title: string;
   lang: string;
   code: string;
-  color?: RGBColor;
+  color?: RgbaColor;
 };
 
 export default function Code(props: CodeProps) {
@@ -22,7 +22,7 @@ export default function Code(props: CodeProps) {
   const [html, setHtml] = useState('');
   function copyHandle() {
     setIsCopy(true);
-    copyTextToClipboard(code || '', (isCopy) => {
+    copyToClipboard(code || '', (isCopy) => {
       let timer = setTimeout(() => {
         setIsCopy(false);
         clearTimeout(timer);