Fix #153 (#155)

* refactor(example): use `react-router` instead of `@reach/router`

* fix(example): import devtools from folder instead of package

- Don't need to build and reinstall before run example
- Support hot update

* chore(pkg): upgrade rhf version to 7.33.1

* perf: set devtools not visible by default

- Just show a devtools icon by default
- The extension need time to initalize.
- If show the panel, it will flash and disapper

* fix(ui): storybook type error

example/package.json

@@ -1,18 +1,17 @@
 {
-  "name": "example",
-  "version": "0.2.0",
+  "name": "rhf-devtools-example",
+  "private": true,
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "serve": "vite preview"
   },
   "dependencies": {
-    "@hookform/devtools": "file:..",
-    "@reach/router": "^1.3.4",
     "loglevel": "^1.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hook-form": "^7.3.5"
+    "react-hook-form": "^7.33.1",
+    "react-router-dom": "6"
   },
   "devDependencies": {
     "@types/react": "^17.0.4",

example/src/App.tsx

@@ -1,15 +1,13 @@
+import type { PLACEMENT } from '../../src/devTool';
+import { DevTool } from '../../src/devTool';
 import React from 'react';
-import { Router, Link, RouteComponentProps } from '@reach/router';
 import { useForm } from 'react-hook-form';
-import { DevTool } from '@hookform/devtools';
-import type { PLACEMENT } from '@hookform/devtools';
+import { Link, Route, Routes, useParams } from 'react-router-dom';
 import './App.css';
 
-const Form = ({
-  placement = 'top-right',
-}: RouteComponentProps<{
-  placement: PLACEMENT;
-}>) => {
+const Form: React.FC = () => {
+  const params = useParams();
+
   const { register, control, handleSubmit } = useForm<{
     firstName: string;
     lastName: string;
@@ -54,7 +52,10 @@ const Form = ({
         <input style={{ fontWeight: 400 }} type="submit" />
       </form>
 
-      <DevTool control={control} placement={placement as PLACEMENT} />
+      <DevTool
+        control={control}
+        placement={(params?.placement as PLACEMENT) ?? 'top-right'}
+      />
     </>
   );
 };
@@ -68,10 +69,10 @@ const App = () => {
         <Link to="placement/bottom-left">Bottom Left</Link>
         <Link to="placement/bottom-right">Bottom Right</Link>
       </nav>
-      <Router>
-        <Form path="/" />
-        <Form path="placement/:placement" />
-      </Router>
+      <Routes>
+        <Route path="/" element={<Form />} />
+        <Route path="placement/:placement" element={<Form />} />
+      </Routes>
     </div>
   );
 };

example/src/main.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import './index.css';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
   document.getElementById('root'),
 );