Add where and sortby criteria to find queries

examples/computed-form-fields/.env.development

@@ -3,6 +3,6 @@
 NODE_ENV=development
 
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_computed_form_fields_storage
 VITE_PUBLIC_URL=
 # VITE_PUBLIC_URL should always be blank

examples/computed-form-fields/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_computed_form_fields_storage
 VITE_PUBLIC_URL=

examples/computed-form-fields/package.json

@@ -3,8 +3,8 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/conditional-form-fields/.env.development

@@ -3,6 +3,6 @@
 NODE_ENV=development
 
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_conditional_form_fields_storage
 VITE_PUBLIC_URL=
 # VITE_PUBLIC_URL should always be blank

examples/conditional-form-fields/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_conditional_form_fields_storage
 VITE_PUBLIC_URL=

examples/conditional-form-fields/package.json

@@ -3,8 +3,8 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/field-validators/.env.development

@@ -3,6 +3,6 @@
 NODE_ENV=development
 
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_field_validators_storage
 VITE_PUBLIC_URL=
 # VITE_PUBLIC_URL should always be blank

examples/field-validators/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_field_validators_storage
 VITE_PUBLIC_URL=

examples/field-validators/package.json

@@ -3,8 +3,8 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/form-structure/.env.development

@@ -5,7 +5,4 @@ VITE_PUBLIC_URL=
 
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
-
-# localStorage
-VITE_LOCAL_STORAGE_KEY=formData
+VITE_INDEXED_DB_NAME=radfish_form_structure_storage

examples/form-structure/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_form_structure_storage
 VITE_PUBLIC_URL=

examples/form-structure/package.json

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

examples/mock-api/.env.development

@@ -7,7 +7,5 @@ VITE_PUBLIC_URL=
 
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_mock_api_storage
 
-# localStorage
-VITE_LOCAL_STORAGE_KEY=formData

examples/mock-api/package.json

@@ -3,8 +3,8 @@
   "version": "0.8.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/multistep-form/.env.development

@@ -7,7 +7,5 @@ VITE_PUBLIC_URL=
 
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_multistep_form_storage
 
-# localStorage
-VITE_LOCAL_STORAGE_KEY=formData

examples/multistep-form/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_multistep_form_storage
 VITE_PUBLIC_URL=

examples/multistep-form/README.md

@@ -28,7 +28,7 @@ We need to create an entry in IndexedDB so the form is properly initialized with
 
 ```jsx
 const handleInit = async () => {
-  const formId = await createOfflineData("formData", {
+  const formId = await storage.update("formData", {
     ...formData,
     currentStep: 1,
     totalSteps: TOTAL_STEPS,
@@ -51,7 +51,7 @@ const stepForward = () => {
   if (formData.currentStep < TOTAL_STEPS) {
     const nextStep = formData.currentStep + 1;
     setFormData({ ...formData, currentStep: nextStep });
-    updateOfflineData("formData", [{ ...formData, uuid: formData.uuid, currentStep: nextStep }]);
+    storage.update("formData", [{ ...formData, uuid: formData.uuid, currentStep: nextStep }]);
   }
 };
 
@@ -60,7 +60,7 @@ const stepBackward = () => {
   if (formData.currentStep > 1) {
     const prevStep = formData.currentStep - 1;
     setFormData({ ...formData, currentStep: prevStep });
-    updateOfflineData("formData", [{ ...formData, uuid: formData.uuid, currentStep: prevStep }]);
+    storage.update("formData", [{ ...formData, uuid: formData.uuid, currentStep: prevStep }]);
   }
 };
 ```
@@ -76,7 +76,7 @@ const { id } = useParams();
 useEffect(() => {
   const loadData = async () => {
     if (id) {
-      const [found] = await findOfflineData("formData", {
+      const [found] = await storage.find("formData", {
         uuid: id, // Query IndexedDB using the `uuid`
       });
 

examples/multistep-form/package.json

@@ -1,10 +1,10 @@
 {
   "name": "multi-step-form-example",
-  "version": "0.11s.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0-rc.1",
+    "@nmfs-radfish/react-radfish": "^1.0.0-rc.2",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/multistep-form/src/index.jsx

@@ -17,10 +17,12 @@ const app = new Application({
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
-root.render(
-  <ErrorBoundary>
-    <React.StrictMode>
-      <MultiStepFormApplication application={app} />
-    </React.StrictMode>
-  </ErrorBoundary>,
-);
+app.on("ready", async () => {
+  root.render(
+    <ErrorBoundary>
+      <React.StrictMode>
+        <MultiStepFormApplication application={app} />
+      </React.StrictMode>
+    </ErrorBoundary>,
+  );
+});

examples/multistep-form/src/pages/Home.jsx

@@ -21,7 +21,7 @@ const HomePage = () => {
     state: "",
     zipcode: "",
   });
-  const { createOfflineData, findOfflineData, updateOfflineData } = useOfflineStorage();
+  const storage = useOfflineStorage();
   const validateForm = () => {
     const newErrors = { email: "", fullName: "", city: "", state: "", zipcode: "" };
     // Check each field for content, add errors for empty required fields
@@ -39,7 +39,7 @@ const HomePage = () => {
   useEffect(() => {
     const loadData = async () => {
       if (id) {
-        const [found] = await findOfflineData("formData", {
+        const [found] = await storage.find("formData", {
           uuid: id,
         });
 
@@ -73,9 +73,7 @@ const HomePage = () => {
     event.preventDefault();
     try {
       if (validateForm()) {
-        await updateOfflineData("formData", [
-          { uuid: formData.uuid, ...formData, submitted: true },
-        ]);
+        await storage.update("formData", [{ uuid: formData.uuid, ...formData, submitted: true }]);
         navigate("/", { replace: true, state: { showToast: true } });
         showToast(TOAST_CONFIG.SUCCESS);
       }
@@ -102,7 +100,7 @@ const HomePage = () => {
   const saveOfflineData = async (tableName, data) => {
     try {
       if (id) {
-        await updateOfflineData(tableName, [{ uuid: id, ...data }]);
+        await storage.update(tableName, [{ uuid: id, ...data }]);
       }
     } catch (error) {
       return error;
@@ -114,7 +112,7 @@ const HomePage = () => {
     if (formData.currentStep < TOTAL_STEPS) {
       const nextStep = formData.currentStep + 1;
       setFormData({ ...formData, currentStep: nextStep });
-      updateOfflineData("formData", [{ ...formData, uuid: formData.uuid, currentStep: nextStep }]);
+      storage.update("formData", [{ ...formData, uuid: formData.uuid, currentStep: nextStep }]);
     }
   };
 
@@ -123,13 +121,13 @@ const HomePage = () => {
     if (formData.currentStep > 1) {
       const prevStep = formData.currentStep - 1;
       setFormData({ ...formData, currentStep: prevStep });
-      updateOfflineData("formData", [{ ...formData, uuid: formData.uuid, currentStep: prevStep }]);
+      storage.update("formData", [{ ...formData, uuid: formData.uuid, currentStep: prevStep }]);
     }
   };
 
   // initialize new multistep form in IndexedDB, and navigate to new form id
   const handleInit = async () => {
-    const formId = await createOfflineData("formData", {
+    const formId = await storage.create("formData", {
       ...formData,
       currentStep: 1,
       totalSteps: TOTAL_STEPS,

examples/network-status/.env.development

@@ -5,7 +5,5 @@ VITE_PUBLIC_URL=
 
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_network_status_storage
 
-# localStorage
-VITE_LOCAL_STORAGE_KEY=formData

examples/network-status/.env.test

@@ -1,4 +1,4 @@
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=example_db_name
+VITE_INDEXED_DB_NAME=radfish_network_status_storage
 VITE_PUBLIC_URL=

examples/network-status/package.json

@@ -3,8 +3,8 @@
   "version": "0.11.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0",
+    "@nmfs-radfish/react-radfish": "^1.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",

examples/on-device-storage/.env.development

@@ -7,7 +7,5 @@ VITE_PUBLIC_URL=
 
 # IndexedDB
 VITE_INDEXED_DB_VERSION=1
-VITE_INDEXED_DB_NAME=radfish_dev
+VITE_INDEXED_DB_NAME=radfish_on_device_storage
 
-# localStorage
-VITE_LOCAL_STORAGE_KEY=formData

examples/on-device-storage/README.md

@@ -14,40 +14,36 @@ This example will render as shown in this screenshot:
 
 ## Steps
 
-### 1. Configure Offline Storage 
-In the `index.jsx` file, import the `OfflineStorageWrapper`. Then, create a configuration object:
+### 1. Configure RADFish Application Storage
+In the `index.jsx` file, import the `Application`. Then, configure it with an instance of `IndexedDBMethod`:
 
 ```jsx
-import { OfflineStorageWrapper } from "@nmfs-radfish/react-radfish";
-
-const offlineStorageConfig = {
-  // Type is either `indexedDB` or `localStorage`
-  type: "indexedDB",
-  // Database name
-  name: import.meta.env.VITE_INDEXED_DB_NAME,
-  // Database version number
-  version: import.meta.env.VITE_INDEXED_DB_VERSION,
-  // Table schema object must include the table name as the object key and a comma-separated string as the value. Please note `uuid` must be the first value in `formData` table.
-  stores: {
-    formData:
-      "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft",
-    species: "name, price",
-    homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE",
-  },
-};
+import { Application, IndexedDBMethod } from "@nmfs-radfish/radfish";
+
+const app = new Application({
+  storage: new IndexedDBMethod(
+    import.meta.env.VITE_INDEXED_DB_NAME,
+    import.meta.env.VITE_INDEXED_DB_VERSION,
+    {
+      formData:
+        "uuid, fullName, email, phoneNumber, numberOfFish, species, computedPrice, isDraft",
+      species: "name, price",
+      homebaseData: "KEY, REPORT_TYPE, SORT_KEY, TRIP_TYPE, VALUE",
+    },
+  ),
+});
+
 ```
 
-### 2. Wrap the App Component 
+### 2. Provide the Application instance 
 In the `index.jsx` file, wrap the `App` component with `OfflineStorageWrapper` and pass the config object:
 
 ```jsx
 const root = ReactDOM.createRoot(document.getElementById("root"));
 
 root.render(
   <React.StrictMode>
-    <OfflineStorageWrapper config={offlineStorageConfig}>
-      <App />
-    </OfflineStorageWrapper>
+    <App application={app} />
   </React.StrictMode>
 );
 ```

examples/on-device-storage/package.json

@@ -1,10 +1,10 @@
 {
   "name": "on-device-storage-example",
-  "version": "0.8.0",
+  "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@nmfs-radfish/radfish": "0.x",
-    "@nmfs-radfish/react-radfish": "0.x",
+    "@nmfs-radfish/radfish": "^1.0.0-rc.1",
+    "@nmfs-radfish/react-radfish": "^1.0.0-rc.2",
     "@testing-library/user-event": "^14.5.2",
     "@trussworks/react-uswds": "^9.1.0",
     "react": "^18.2.0",
@@ -78,4 +78,4 @@
   "msw": {
     "workerDirectory": "public"
   }
-}
+}