Update examples to use new RADFish storage architecture (#697)

* Adjust indentation in the TextInput component example.

* Adjust indentation and formatting in various examples across multiple README.md files to enhance clarity and maintainability.

* Update storage using new version connectors.

* Updated README.md to clarify the use of RADFish's storage system for persistent state management.

* Update on-device storage example to utilize RADFish's schema-based storage with IndexedDB integration.

* Update persisted form example to utilize RADFish's schema-based storage with IndexedDB integration.

* Update server sync example to utilize RADFish's schema-based storage with IndexedDB integration.

* Remove deprecated storage methods and related classes from the mock API package.

* Update @nmfs-radfish/radfish dependency to version 1.1.1 across multiple example packages.

Author: jaygiang

examples/computed-form-fields/package.json

@@ -3,7 +3,7 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/radfish": "^1.1.1",
     "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",

examples/conditional-form-fields/README.md

@@ -48,7 +48,7 @@ return (
     <Form
         onSubmit={handleSubmit}
         className="maxw-full margin-205 padding-205 bg-white radius-8px shadow-2"
-        >
+    >
         <FormGroup>
             <Label className="text-bold" htmlFor={FULL_NAME}>
                 Full Name
@@ -59,7 +59,7 @@ return (
                 type="text"
                 placeholder="Full Name"
                 value={formData[FULL_NAME] || ""}
-/>
+            />
 ```
 
 ### 4. Adding Input Handlers for Form Fields
@@ -95,19 +95,19 @@ Next, we want to conditionally render the `nickname` component. The condition de
 
 ```jsx
 {
-  formData[FULL_NAME] && (
-    <>
-      <Label htmlFor={NICKNAME}>Nickname</Label>
-      <TextInput
-        id={NICKNAME}
-        name={NICKNAME}
-        type="text"
-        placeholder="Nickname"
-        value={formData[NICKNAME] || ""}
-        onChange={(event) => handleNickNameChange(event, formData)}
-      />
-    </>
-  );
+    formData[FULL_NAME] && (
+        <>
+            <Label htmlFor={NICKNAME}>Nickname</Label>
+            <TextInput
+                id={NICKNAME}
+                name={NICKNAME}
+                type="text"
+                placeholder="Nickname"
+                value={formData[NICKNAME] || ""}
+                onChange={(event) => handleNickNameChange(event, formData)}
+            />
+        </>
+    )
 }
 ```
 

examples/conditional-form-fields/package.json

@@ -3,7 +3,7 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/radfish": "^1.1.1",
     "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",

examples/field-validators/README.md

@@ -17,25 +17,25 @@ In this step, we add validation logic to our form inputs using an `onBlur` handl
 This function validates the input value. It uses the validation rules and updates the state with any validation errors:
 ```jsx
 const handleBlur = (event, validators) => {
-  const { name, value } = event.target;
-  setValidationErrors((prev) => ({
-    ...prev,
-    ...handleInputValidationLogic(name, value, validators),
-  }));
+    const { name, value } = event.target;
+    setValidationErrors((prev) => ({
+        ...prev,
+        ...handleInputValidationLogic(name, value, validators),
+    }));
 };
 ```
 
 This helper function loops through the provided validators and checks if the input value passes the validation criteria. If not, it returns the appropriate error message:
 ```jsx
 const handleInputValidationLogic = (name, value, validators) => {
-  if (validators && validators.length > 0) {
-    for (let validator of validators) {
-      if (!validator.test(value)) {
-        return { [name]: validator.message };
-      }
+    if (validators && validators.length > 0) {
+        for (let validator of validators) {
+            if (!validator.test(value)) {
+                return { [name]: validator.message };
+            }
+        }
     }
-  }
-  return { [name]: null }; // Clear error if value is valid
+    return { [name]: null }; // Clear error if value is valid
 };
 ```
 
@@ -50,7 +50,7 @@ Here’s how to use the onBlur handler in the TextInput component. The input dyn
     aria-invalid={validationErrors[FULL_NAME] ? "true" : "false"}
     validationStatus={validationErrors[FULL_NAME] ? "error" : undefined}
     onChange={handleChange}
-  onBlur={(e) => handleBlur(e, fullNameValidators)}
+    onBlur={(e) => handleBlur(e, fullNameValidators)}
 />
 ```
 
@@ -60,10 +60,10 @@ We include the validator needed to check the contents of the field input. In thi
 ```jsx
 // utilities/fieldValidators.js
 const fullNameValidators = [
-  {
-    test: (value) => !/\d/.test(value) || value === "",
-    message: "Full Name should not contain numbers.",
-  },
+    {
+        test: (value) => !/\d/.test(value) || value === "",
+        message: "Full Name should not contain numbers.",
+    },
 ];
 
 export { fullNameValidators };
@@ -77,17 +77,17 @@ We can update the properties on our input so the validation logic gets triggered
 
 ```jsx
 <TextInput
-  id={FULL_NAME}
-  name={FULL_NAME}
-  type="text"
-  placeholder="Full Name"
-  value={formData[FULL_NAME] || ""}
-  aria-invalid={validationErrors[FULL_NAME] ? "true" : "false"}
-  validationStatus={validationErrors[FULL_NAME] ? "error" : undefined}
-  onChange={handleChange}
-  onBlur={(e) => handleBlur(e, fullNameValidators)}
-/>;
+    id={FULL_NAME}
+    name={FULL_NAME}
+    type="text"
+    placeholder="Full Name"
+    value={formData[FULL_NAME] || ""}
+    aria-invalid={validationErrors[FULL_NAME] ? "true" : "false"}
+    validationStatus={validationErrors[FULL_NAME] ? "error" : undefined}
+    onChange={handleChange}
+    onBlur={(e) => handleBlur(e, fullNameValidators)}
+/>
 {
-  validationErrors[FULL_NAME] && <ErrorMessage>{validationErrors[FULL_NAME]}</ErrorMessage>;
+    validationErrors[FULL_NAME] && <ErrorMessage>{validationErrors[FULL_NAME]}</ErrorMessage>
 }
 ```

examples/field-validators/package.json

@@ -3,7 +3,7 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/radfish": "^1.1.1",
     "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",

examples/form-structure/README.md

@@ -21,7 +21,7 @@ Use Trussworks `Grid` components to define the layout of your page in `src/pages
     <Grid row>
         <Grid col>
             <p className="text-bold text-center">
-            Private Recreational Tilefish
+                Private Recreational Tilefish
             </p>
         </Grid>
     </Grid>
@@ -83,7 +83,7 @@ const inputFocus = useRef(null);
 useEffect(() => {
     if (inputFocus.current) {
         inputFocus.current.focus(); // Set focus on the input field
-    };
+    }
     setResetToggle(false); // Reset the toggle state
 }, [resetToggle]);
 
@@ -114,6 +114,6 @@ const handleSubmit = (event) => {
     // Reset for after triggering Submit
     event.target.reset();
     // Set focus on first input after form is submitted.
-    setResetToggle(true)
-}
+    setResetToggle(true);
+};
 ```

examples/form-structure/package.json

@@ -2,7 +2,7 @@
   "name": "form-structure-example",
   "version": "0.11.0",
   "dependencies": {
-    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/radfish": "^1.1.1",
     "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",