working in progress

app/package.json

@@ -13,6 +13,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "little-state-machine": "^2.11.3",
     "lodash": "^4.17.15",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

app/src/devTool/devTool.tsx

@@ -1,76 +1,26 @@
 import * as React from 'react';
+import {
+  StateMachineProvider,
+  createStore,
+  setStorageType,
+} from 'little-state-machine';
 import { Control } from 'react-hook-form';
-import { Animate } from 'react-simple-animate';
-import Header from './header';
-import Panel from './panel';
-import colors from './colors';
-import Logo from './logo';
-import { PanelShadow } from './panelShadow';
-import { Button } from './styled';
+import { DevToolUI } from './devToolUI';
 
-export const DevTool = ({ control }: { control: Control }) => {
-  const [visible, setVisible] = React.useState(true);
+setStorageType(window.localStorage);
 
-  return (
-    <>
-      <Animate
-        play={!visible}
-        duration={0.2}
-        start={{
-          position: 'fixed',
-          top: 0,
-          right: 0,
-          transform: 'translateX(0)',
-          zIndex: 99999,
-        }}
-        end={{
-          top: 0,
-          right: 0,
-          position: 'fixed',
-          transform: 'translateX(280px)',
-          zIndex: 99999,
-        }}
-      >
-        <div
-          style={{
-            position: 'fixed',
-            height: '100vh',
-            width: 250,
-            zIndex: 99999,
-            background: colors.buttonBlue,
-            top: 0,
-            right: 0,
-            display: 'grid',
-            textAlign: 'left',
-            color: 'white',
-            fontSize: 14,
-            gridTemplateRows: '40px auto',
-            fontFamily:
-              "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
-          }}
-        >
-          <Header setVisible={setVisible} control={control} />
-          <Panel control={control} />
-        </div>
-        <PanelShadow visible={visible} />
-      </Animate>
+createStore({
+  visible: true,
+  isCollapse: false,
+  filterName: '',
+}, {
+  name: "__REACT_HOOK_FORM_DEVTOOLS__"
+});
 
-      {!visible && (
-        <Button
-          title="Show dev panel"
-          style={{
-            position: 'fixed',
-            zIndex: 99999,
-            top: 3,
-            right: 3,
-            padding: 3,
-            margin: 0,
-            background: 'none',
-          }}
-        >
-          <Logo setVisible={setVisible} />
-        </Button>
-      )}
-    </>
+export const DevTool = ({ control }: { control: Control }) => {
+  return (
+    <StateMachineProvider>
+      <DevToolUI control={control} />
+    </StateMachineProvider>
   );
 };

app/src/devTool/devToolUI.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Control } from 'react-hook-form';
+import { Animate } from 'react-simple-animate';
+import Header from './header';
+import Panel from './panel';
+import colors from './colors';
+import Logo from './logo';
+import { PanelShadow } from './panelShadow';
+import { Button } from './styled';
+import { useStateMachine } from 'little-state-machine';
+import { setVisible } from './settingAction';
+
+export const DevToolUI = ({ control }: { control: Control }) => {
+  const { state, action } = useStateMachine(setVisible);
+
+  return (
+    <>
+      <Animate
+        play={!state.visible}
+        duration={0.2}
+        start={{
+          position: 'fixed',
+          top: 0,
+          right: 0,
+          transform: 'translateX(0)',
+          zIndex: 99999,
+        }}
+        end={{
+          top: 0,
+          right: 0,
+          position: 'fixed',
+          transform: 'translateX(280px)',
+          zIndex: 99999,
+        }}
+      >
+        <div
+          style={{
+            position: 'fixed',
+            height: '100vh',
+            width: 250,
+            zIndex: 99999,
+            background: colors.buttonBlue,
+            top: 0,
+            right: 0,
+            display: 'grid',
+            textAlign: 'left',
+            color: 'white',
+            fontSize: 14,
+            gridTemplateRows: '40px auto',
+            fontFamily:
+              "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
+          }}
+        >
+          <Header setVisible={action} control={control} />
+          <Panel control={control} />
+        </div>
+        <PanelShadow visible={state.visible} />
+      </Animate>
+
+      {!state.visible && (
+        <Button
+          title="Show dev panel"
+          style={{
+            position: 'fixed',
+            zIndex: 99999,
+            top: 3,
+            right: 3,
+            padding: 3,
+            margin: 0,
+            background: 'none',
+          }}
+        >
+          <Logo setVisible={action} />
+        </Button>
+      )}
+    </>
+  );
+};

app/src/devTool/header.tsx

@@ -4,7 +4,7 @@ import { Control } from 'react-hook-form';
 import { CircleButton, paraGraphDefaultStyle } from './styled';
 
 type Props = {
-  setVisible: (visible: boolean) => void;
+  setVisible: any;
   control: Control;
 };
 

app/src/devTool/logo.tsx

@@ -6,7 +6,7 @@ const Logo = ({
   setVisible,
 }: {
   style?: Record<string, any>;
-  setVisible: (visible: boolean) => void;
+  setVisible: any;
 }) => {
   return (
     <svg

app/src/devTool/panel.tsx

@@ -1,24 +1,28 @@
 import * as React from 'react';
 import get from 'lodash/get';
 import { Control, useForm } from 'react-hook-form';
+import { useStateMachine } from 'little-state-machine';
 import { useEffect } from 'react';
 import colors from './colors';
 import PanelTable from './panelTable';
 import FormStateTable from './formStateTable';
 import { Button, Input } from './styled';
+import { setCollapse } from './settingAction';
 
 export default ({
   control: { fieldsRef, getValues, formState, errorsRef, readFormStateRef },
 }: {
   control: Control;
 }) => {
+  const { state, action } = useStateMachine(setCollapse);
   const [, setData] = React.useState({});
-  const [collapseAll, setCollapseAll] = React.useState(true);
   const [showFormState, setShowFormState] = React.useState(false);
   const fieldsValues = getValues();
   const { register, watch } = useForm();
   const searchTerm = watch('search', '');
 
+  console.log(state)
+
   useEffect(() => {
     setData({});
   }, []);
@@ -58,9 +62,12 @@ export default ({
             lineHeight: 1,
           }}
           title="Toggle entire fields"
-          onClick={() => setCollapseAll(!collapseAll)}
+          onClick={() => {
+            // @ts-ignore
+            action(!state.isCollapse);
+          }}
         >
-          {collapseAll ? '[-] COLLAPSE' : '[+] EXPAND'}
+          {state.isCollapse ? '[-] COLLAPSE' : '[+] EXPAND'}
         </Button>
 
         <Input
@@ -123,7 +130,7 @@ export default ({
                 <PanelTable
                   refObject={ref}
                   index={index}
-                  collapseAll={collapseAll}
+                  collapseAll={state.isCollapse}
                   name={name}
                   isTouched={isTouched}
                   type={type}

app/src/devTool/settingAction.ts

@@ -0,0 +1,14 @@
+export function setVisible(state: any, payload: any) {
+  return {
+    ...state,
+    visible: payload,
+  };
+}
+
+export function setCollapse(state: any, payload: any) {
+  return {
+    ...state,
+    isCollapse: payload,
+  };
+}
+