Merge pull request #61 from NMFS-RADFish/polish-part-2

Polish part 2

docs/building-your-application/development-life-cycle.md

@@ -10,7 +10,7 @@ For NOAA applications, tooling that supports full-featured web forms is a must.
 
 Setting up a project properly will improve developer velocity over the course of the project. In addition to this, it will limit maintenance overhead, especially if the project is setup using a standard environment and set of tools that are familiar to other NOAA developers.
 
-To setup a new NOAA web app project, we recommend following the instructions outlined in our [“Getting Started”](https://github.com/NMFS-RADFish/cli) documentation.
+To setup a new NOAA web app project, we recommend following the instructions outlined in our [Getting Started](../getting-started) documentation.
 
 ## React Components
 

docs/building-your-application/development-standards.md

@@ -10,11 +10,11 @@ sidebar_position: 4
 
 USWDS (United States Web Design System) is a web design system that specifies coding patterns, components, and design tokens that outline how government applications should be built while adhering to 508 compliance guidelines.
 
-More specifically, when building applications with React, there is an existing component library, [react-uswds](https://trussworks.github.io/react-uswds/?path=/story/welcome--welcome) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel.
+More specifically, when building applications with React, there is an existing component library, [react-uswds](https://github.com/trussworks/react-uswds) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel.
 
 For reference on the full `react-uswds` library, you can reference the deployed storybook:
 
-[https://trussworks.github.io/react-uswds/](https://trussworks.github.io/react-uswds/?path=/story/welcome--welcome)
+[https://trussworks.github.io/react-uswds/](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs)
 
 The benefit of referencing and leveraging `react-radfish` when building applications is to increase developer velocity, design consistency, and ensures that front-end development is happening in compliance with government regulation. The storybook above provides examples of a wide variety of compliant components that can be used to build apps for a wide variety of use cases.
 
@@ -26,7 +26,7 @@ If you need another component for your application support, please see `CONTRIBU
 
 **Example**
 
-If you wanted to build a `TextInput` component into an existing form, you can use the `@trussworks` [storybook reference](https://trussworks.github.io/react-uswds/?path=/docs/components-text-input--default-text-input) related to component props that are available.
+If you wanted to build a `TextInput` component into an existing form, you can use the `@trussworks` [storybook reference](https://trussworks.github.io/react-uswds/?path=/docs/components-text-input--docs) related to component props that are available.
 
 ```jsx
 

docs/building-your-application/patterns/apiservice.md

@@ -211,4 +211,4 @@ useEffect(() => {
 
 # React Query
 
-TODO
+In Progress

docs/building-your-application/patterns/components.md

@@ -6,7 +6,7 @@ sidebar_position: 5
 
 ## Building your first page and form
 
-When building applications with React, there is an existing component library, [react-uswds](https://trussworks.github.io/react-uswds/?path=/story/welcome--welcome) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel.
+When building applications with React, there is an existing component library, [react-uswds](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs) that our project extends for the purposes of building any Radfish application. These components maintain all functionality of `react-uswds` components, but are branded with NOAA themes and styles. These components live in `react-radfish` directory, and allow for development in a modern React environment with NOAA look and feel.
 
 For reference on the full `react-uswds` library, you can reference the deployed storybook:
 
@@ -16,7 +16,7 @@ For reference on the full `react-uswds` library, you can reference the deployed
 
 **Example**
 
-If you wanted to build a `TextInput` component into an existing form, you can use the `@trussworks` [storybook reference](https://trussworks.github.io/react-uswds/?path=/docs/components-text-input--default-text-input) related to component props that are available.
+If you wanted to build a `TextInput` component into an existing form, you can use the `@trussworks` [storybook reference](https://trussworks.github.io/react-uswds/?path=/docs/components-text-input--docs) related to component props that are available.
 
 ```jsx
 

docs/building-your-application/patterns/offline-storage.md

@@ -5,4 +5,4 @@ title: "Offline Storage"
 
 # Offline Storage
 
-TODO
+In Progress

docs/building-your-application/patterns/state-management.md

@@ -29,7 +29,7 @@ The potential downside of this approach is that each form will have it's own sta
 
 For an example on best practices for implementing this type of form state management, you can run any of several example implementations with the RADFish CLI:
 
-`npx @nmfs-radfish/create-radfish-app my-app --template examples/computed-form-fields`
+`npx @nmfs-radfish/create-radfish-app my-app --example computed-form-fields`
 
 Below is a simplified code snippet on how to set this form state management up in a React component:
 
@@ -175,7 +175,7 @@ This underlying code listens for changes surfaced from the `navigator` API, and
 
 It is important to fetch and cache required data needed to basic app functionality while the application is online. This can be done by fetching the required data from an API, and storing that data into IndexedDB. To see a basic example of how this can be done, you can run the `server-sync` example from the CLI:
 
-`npx @nmfs-radfish/create-radfish-app my-app --template examples/server-sync`
+`npx @nmfs-radfish/create-radfish-app my-app --example server-sync`
 
 This example fetches several JSON arrays from our Mock API, then stores and caches it in IndexedDB. The application then can reference the data in IndexedDB without needing to have any network connection. Keep in mind that it is up to the developer to decide when and how to invalidate this IndexedDB cache in according to their application's needs.
 
@@ -197,15 +197,15 @@ Step-by-step instructions to configure offline storage:
       4. `VITE_INDEXED_DB_SCHEMA`
 2. **In the `src/hooks/useOfflineStorage.js` file, initialize one of the following Storage Method instances, and pass the appropriate environment variables using `import.meta.env.REPLACE_WITH_KEY_NAME` as parameters:**
 
-   1. `**LocalStorageMethod**` — Requires one parameter, the key name for localStorage.
+   1. `LocalStorageMethod` — Requires one parameter, the key name for localStorage.
 
       ```jsx
       const storageMethod = new LocalStorageMethod(
         import.meta.env.VITE_LOCAL_STORAGE_KEY
       );
       ```
 
-   2. `**IndexedDBStorageMethod**` — Requires four parameters, the db name, db version, db table name, db schema.
+   2. `IndexedDBStorageMethod` — Requires four parameters, the db name, db version, db table name, db schema.
 
       ```jsx
       const storageMethod = new IndexedDBStorageMethod(

docs/building-your-application/templates_examples.md

@@ -32,6 +32,8 @@ Templates are meant to be a clean starting point for a new RADFish project. Thes
 
 The template will come pre-configured with everything you need to get up and running to start coding your new project as quickly as possible. This will include the core modules of RADFish, including service-worker configuration, application routing, and offline storage.
 
-If you want to create a new project based from the `react-javascript` library, you can execute the following RADFish CLI command, similar to how you run examples: `npx @nmfs-radfish/create-radfish-app my-app --template templates/react-javascript`
+If you want to create a new project based from the `react-javascript` library, you can execute the following RADFish CLI command, similar to how you run examples: `npx @nmfs-radfish/create-radfish-app my-app --template react-javascript`
 
 This will create a new RADFish project named `my-app` in your current working directory. Happy hacking!
+
+Note: The `react-javascript` template is the default, so running `npx @nmfs-radfish/create-radfish-app my-app` will create the same project without needing to specify the template.

docs/concepts/on-device-storage.md

@@ -31,7 +31,6 @@ Limitations of LocalStorage:
 - **Storage Capacity:** Typically limited to around 5MB, which may not be sufficient for all applications.
 String-Only Storage: Only string data types can be stored, necessitating the serialization of more complex data structures.
 Synchronous Nature: Operations are blocking, which can impact performance for larger datasets.
-IndexedDB
 
 ### IndexedDB
 

docs/getting-started.md

@@ -6,6 +6,14 @@ sidebar_position: 1
 
 Create RadFish App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
 
+### Prerequisites
+
+Before you start, make sure you have the following installed:
+
+- [x] Node.js (v20.17.0 or later)
+- [x] npm (v10.8.2 or later)
+- [x] git (v2.0 or later)
+
 # Quick Start
 
 **Option 1:** To scaffold an app, run the commands:
@@ -15,44 +23,9 @@ npx @nmfs-radfish/create-radfish-app my-app
 cd my-app
 npm start
 ```
-
 Then open [http://localhost:3000/](http://localhost:3000/) to see your app.
 
-**Option 2:** If you would like to scaffold from 1 example, please see [Running an Example](./building-your-application/available-scripts/running-example.md)
-
-**Option 3:** You can also clone the [boilerplate repo](https://github.com/NMFS-RADFish/boilerplate) to get all the examples.
-
-Then:
-
-```bash
-cd boilerplate/examples/[example you want to run]
-npm i
-npm start
-```
-
-**To show help:**
-
-```bash
-npx @nmfs-radfish/create-radfish-app my-app --help
-```
-
-# Creating a PWA
-
-### Prerequisites
-
-Before you start, make sure you have the following installed:
-
-- [ ] Node.js (v20.17.0 or later)
-- [ ] npm (v10.8.2 or later)
-- [ ] git (v2.0 or later)
-
-### npx
-
-```json
-npx @nmfs-radfish/create-radfish-app my-pwa
-```
-
-## Output
+### Output
 
 ```bash
 my-app
@@ -80,6 +53,24 @@ my-app
 └── vite.config.js
 ```
 
+**Option 2:** If you would like to scaffold from 1 example, please see [Running an Example](./building-your-application/available-scripts/running-example.md). The list of examples can be found at [Starting from a boilerplate](./building-your-application/templates_examples/#examples)
+
+**Option 3:** You can also clone the [boilerplate repo](https://github.com/NMFS-RADFish/boilerplate) to get all the examples.
+
+Then:
+
+```bash
+cd boilerplate/examples/[example you want to run]
+npm i
+npm start
+```
+
+**To show help:**
+
+```bash
+npx @nmfs-radfish/create-radfish-app --help
+```
+
 ## Folder Structure Explanation
 
 ### `node_modules/`