add localPlugin Form state fix

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -97,7 +97,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setName(e.target.value)}
-            value={ name }
+            value={ name || defaultPlugin.name }
             id="plugin-name"
             data-id="localPluginName"
             placeholder="Should be camelCase" />
@@ -107,7 +107,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setDisplayName(e.target.value)}
-            value={ displayName }
+            value={ displayName || defaultPlugin.displayName }
             id="plugin-displayname"
             data-id="localPluginDisplayName"
             placeholder="Name in the header" />
@@ -117,7 +117,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setMethods(e.target.value)}
-            value={ methods }
+            value={ methods || defaultPlugin.methods }
             id="plugin-methods"
             data-id="localPluginMethods"
             placeholder="Name in the header" />
@@ -128,7 +128,7 @@ function LocalPluginForm ({ closeModal, visible, pluginManager }: LocalPluginFor
           <input
             className="form-control"
             onChange={e => setUrl(e.target.value)}
-            value={ url }
+            value={ url || defaultPlugin.url }
             id="plugin-url"
             data-id="localPluginUrl"
             placeholder="ex: https://localhost:8000" />

libs/remix-ui/plugin-manager/src/lib/custom-hooks/useLocalStorage.ts

+import { useState } from 'react'
+
+// Hook
+export const useLocalStorage = (key: string, initialValue: any) => {
+  // State to store our value
+  // Pass initial state function to useState so logic is only executed once
+  const [storedValue, setStoredValue] = useState<any>(() => {
+    try {
+      // Get from local storage by key
+      const item = window.localStorage.getItem(key)
+      // Parse stored json or if none return initialValue
+      return item ? JSON.parse(item) : initialValue
+    } catch (error) {
+      // If error also return initialValue
+      console.log(error)
+      return initialValue
+    }
+  })
+  // Return a wrapped version of useState's setter function that ...
+  // ... persists the new value to localStorage.
+  const setValue = (value: any | ((val: any) => any)) => {
+    try {
+      // Allow value to be a function so we have same API as useState
+      const valueToStore =
+        value instanceof Function ? value(storedValue) : value
+      // Save state
+      setStoredValue(valueToStore)
+      // Save to local storage
+      window.localStorage.setItem(key, JSON.stringify(valueToStore))
+    } catch (error) {
+      // A more advanced implementation would handle the error case
+      console.log(error)
+    }
+  }
+  return [storedValue, setValue] as const
+}

libs/remix-ui/plugin-manager/tsconfig.lib.json

 {
   "extends": "../../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react",
+    "composite": true,
     "outDir": "../../../dist/out-tsc",
     "types": ["node"]
   },
   "files": [],
+  "composite": true,
   "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"],
   "references": [