Merge pull request #171 from oanelson/165

165 - Edit "Building Your Application" section

Author: theangchen

docs/developer-documentation/building-your-application/available-scripts/index.mdx

@@ -17,15 +17,15 @@ import DocCardList from '@theme/DocCardList';
 
 **`npm start`**
 
-This script starts the Vite development server. It runs the app locally with hot module reloading, allowing for fast development and instant updates as you make changes. Open [http://localhost:3000](http://localhost:3000/) to view it in the browser.
+Starts the Vite development server. It runs the app locally with hot module reloading, allowing for fast development and instant updates as you make changes. Open [http://localhost:3000](http://localhost:3000/) to view it in the browser.
 
 **`npm run build`**
 
-Builds the project for production by using Vite’s build tool. It generates optimized static assets, such as HTML, CSS, and JavaScript, which are output to the dist directory.
+This script builds the project for production by using Vite’s build tool. It generates optimized static assets, such as HTML, CSS, and JavaScript, which are output to the `dist` directory.
 
 **`npm run prebuild`**
 
-Before the build process starts, this script ensures that the dist folder (which contains the previous build) is deleted. This helps prevent old build files from being included in the new build.
+Before the build process starts, this script deletes the `dist` folder (which contains the previous build). This helps prevent old build files from being included in the new build.
 
 **`npm test`**
 
@@ -37,15 +37,15 @@ Runs end-to-end (e2e) tests located in `./src/__tests__/e2e/integration.e2e.test
 
 **`npm run lint`**
 
-Runs ESLint with the `--fix` option, which automatically fixes certain linting issues in the code found in the src/ directory.
+Runs ESLint with the `--fix` option, which automatically fixes certain linting issues in the code found in the `src/` directory.
 
 **`npm run format`**
 
 Formats the code in the `src/` directory using Prettier according to the configuration specified in the `.prettierrc` file. This ensures consistent code formatting across the project.
 
 **`npm run serve`**
 
-This script starts a local server to preview the production build. It serves the files from the `dist/` folder, allowing you to check how the app will behave in a production environment.
+Starts a local server to preview the production build. It serves the files from the `dist/` folder, allowing you to check how the app will behave in a production environment.
 
 **`npm run lhci:mobile`**
 

docs/developer-documentation/building-your-application/available-scripts/installing-cli.md

@@ -4,11 +4,11 @@ sidebar_position: 1
 
 # Installing the CLI
 
-The RADFish CLI is available as an npm package, making the installation process much simpler. Follow these steps to install and use the CLI:
+The RADFish CLI is available as an `npm` package, making the installation process much simpler. Follow these steps to install and use the CLI:
 
 ## Install the CLI
 
-To install the RADFish CLI globally on your system, run the following command:
+To install the RADFish CLI globally on your system, run this command:
 
 ```bash
 npm install -g @nmfs-radfish/create-radfish-app
@@ -21,4 +21,3 @@ create-radfish-app --version
 ```
 
 This should display the version number of the installed CLI.
-

docs/developer-documentation/building-your-application/available-scripts/running-example.md

@@ -4,12 +4,12 @@ sidebar_position: 2
 
 # Running an Example
 
-RADFish ships with several different [boilerplate examples](../../examples-and-templates#examples) that demonstrate core pieces of functionality identified as critical for NOAA application development. You can use these examples as a reference point to build out your own implementation, or simply to get inspiration for your own design patterns with some pre-defined best practices.
+RADFish ships with several different [boilerplate examples](../../examples-and-templates#examples). These examples demonstrate core functions identified as critical for NOAA application development. You can use these examples as a reference point to build out your own implementation. Or, they may serve as inspiration for your own designs and best practices.
 
-For instance, there is an example that demonstrates how to build a multi-step form that caches each step within IndexedDB, so that it can be referenced without having network connection. In order to run this example, you can run the following command:
+For instance, there's an example that demonstrates how to build a multi-step form that caches each step within IndexedDB. Caching the form allows it to be referenced without a network connection. In order to run this example, you can run this command:
 
 `npx @nmfs-radfish/create-radfish-app my-app --example multistep-form`
 
-This will clone the code from the `multistep-form` onto your machine, and spawn a new web process on port `3000` or another port if that is already taken.
+This will clone the code from the `multistep-form` onto your machine. It also spawns a new web process on port `3000` or another port if that is already taken.
 
-Feel free to utilize this code and modify it for your needs!
+Feel free to use this code and modify it for your needs!

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

@@ -5,34 +5,35 @@ description: Setting up web projects with RADFish
 
 # Project Setup
 
-When setting up a web application within the NOAA ecosystem, it’s imperative that you setup your project properly in order to make life easier as development progresses. A strong setup includes proper development standards ie: File structure, linting, core frameworks, build tooling, etc.
+When creating a web application in the NOAA ecosystem, take time to carefully set up your project. This will make ongoing development easier and reduce maintenance overhead. A proper setup follows best practices around file structure, linting, core frameworks, and build tooling. 
 
-For NOAA applications, tooling that supports full-featured web forms is a must. There are also branding/style guidelines and compliance regulations that must be adhered too. All of this must be considered when setting up a new project.
+All new NOAA web applications 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.
+- support full-featured web forms. 
+- adhere to compliance regulations.
+- follow branding and style guidelines. 
+- use standard environments and 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](../getting-started) documentation.
+To setup a new NOAA web app project, we recommend following [Getting Started](../getting-started) documentation.
 
 ## React Components
 
-The following components are included by default with the RADFish Framework. The components build upon the ‣ component library, which adheres to [USWDS standards](https://designsystem.digital.gov/). For detailed information on the available components and what attributes they accept, please see the official storybook documentation: [https://trussworks.github.io/react-uswds/](https://trussworks.github.io/react-uswds/)
+Trussworks React components are included by default with the RADFish Framework. The components build upon the component library, which adheres to [USWDS standards](https://designsystem.digital.gov/). For detailed information on the available components and what attributes they accept, please see the official storybook documentation: [https://trussworks.github.io/react-uswds/](https://trussworks.github.io/react-uswds/)
 
-**Why Use It**
+### Why Use React?
 
-- **Responsive Design**: Automatically adjusts for different screen sizes with a collapsible menu.
-- **Customizable**: Allows for easy customization of navigation links.
-- **Integrated Search**: Includes a search bar for added functionality.
-- **Branding**: Supports branding elements like logos in the header.
+- **Responsive Design.** Automatically adjusts for different screen sizes with a collapsible menu.
+- **Customizable.** Allows for easy customization of navigation links.
+- **Integrated Search.** Includes a search bar for added functionality.
+- **Branding.** Supports branding elements like logos in the header.
 
 **Additional Notes**
 
-- The **`@trussworks/react-uswds`** package is a requirement for this component to ensure proper styling and functionality. This package is included by default.
+- The **`@trussworks/react-uswds`** package is required to ensure proper styling and functionality. This package is included by default, so you do not need to import it. 
 - Custom CSS can be applied for further customization.
 
-**Resources**
+## Resources
 
-- [https://trussworks.github.io/react-uswds/?path=/docs/components-header--basic-header](https://trussworks.github.io/react-uswds/?path=/docs/components-header--basic-header)
-
-By integrating these components into your React application, you can create a professional and responsive UI with minimal effort. The **`Layout`** and **`HeaderNav`** components work together to provide a structured and navigable interface, enhancing the overall user experience.
+By integrating the [header](https://trussworks.github.io/react-uswds/?path=/docs/components-header--basic-header) components into your React application, you can create a professional and responsive UI with minimal effort. The **`Layout`** and **`HeaderNav`** components work together to provide a structured and navigable interface, enhancing the overall user experience.
 
 ---

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

@@ -5,25 +5,23 @@ description: USWDS, NOAA branding and Styling, and 508 compliance
 
 # Development Standards
 
-**USWDS**
+## USWDS
 
-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.
+The U.S. Web Design System (USWDS) is a set of design and development principles and guidelines. It helps deveolpers create standardized, accessible, consistent, and user-friendly websites and applications. It helps developers adhere to 508 compliance guidelines.
 
-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.
+In most cases, RADFish uses standard components from the [`react-uswds`](https://github.com/trussworks/react-uswds) open source project. The RADFish project further extends the react-uswds library. These components maintain the functionality of react-uswds, but are branded with NOAA themes and styles. These components live in the [`react-radfish` directory](https://github.com/NMFS-RADFish/react-components). This allows modern React development with NOAA look and feel.
 
-For reference on the full `react-uswds` library, you can reference the deployed storybook:
+For information on the full `react-uswds` library, refer to their [storybook](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs).
 
-[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.
+Building applications with `react-radfish` leads to faster development, consistent design, and ensures compliance with government regulations. The [`react-uswds` storybook](https://trussworks.github.io/react-uswds/?path=/docs/welcome--docs) provides examples of compliant components that can be used to build apps for various use cases.
 
 <!--
 <aside>
 If you need another component for your application support, please see `CONTRIBUTING` section (In progress)
 </aside>
 -->
 
-**Example**
+### 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--docs) related to component props that are available.
 
@@ -47,14 +45,14 @@ import { TextInput, Label } from "@trussworks/react-uswds";
 
 ---
 
-### **NOAA Branding Guidelines and Style Guide**
+## NOAA Branding Guidelines and Style Guide
 
-Branding refers to the process of creating a distinct identity for a product or application. It involves defining and maintaining a set of visual elements, such as logos, colors, and typography, that represent the brand.
+Branding creates a distinct identity for a product or application. It defines and maintains a set of visual elements that represent the brand. Branding can include logos, colors, and typography standards.
 
-You will notice, that the components above do not have any `className` assigned, and you may be wondering how to style that component. To do this, there are a couple of things to keep in mind.
+You might have noticed that the components above do not have any `className` assigned. You may be wondering how to style that component. There are a few things to keep in mind when styling components:
 
-1. Each component in `react-radfish` has it’s own scoped css file, that modifies the existing `@trussworks` css in order to inject NOAA styles. This file should not be touched. If you notice a bug or issue, please see `CONTRIBUTING`
-2. You can modify the general theme of these components in the `styles/theme.css` file. You can change things like color variables, font-family, and line-height here, and they will be propagated throughout the application, as well as throughout `react-radfish` . RADFish utilizes css variables, and can be used like so:
+- Each component in `react-radfish` has it’s own scoped CSS file. This file modifies the existing `@trussworks` CSS to inject NOAA styles. This file should not be touched. If you notice a bug or issue, please consider [contributing to the project](https://nmfs-radfish.github.io/radfish/about/contribute).
+- You can modify the general theme of these components in the `styles/theme.css` file. You can change things like color variables, font-family, and line-height here. They will be propagated throughout the application, as well as throughout `react-radfish`. RADFish uses CSS variables, like this:
 
 ```css
 // styles/theme.js
@@ -68,7 +66,7 @@ You will notice, that the components above do not have any `className` assigned,
 }
 ```
 
-1. If you need to add additional styles to a particular component, you can do so by adding another `className` **after** the component has been imported from `react-radfish`
+- If you need to add additional styles to a particular component, you can add another `className` **after** the component has been imported from `react-radfish`:
 
 ```jsx
 import { Label } from "@nmfs-radfish/react-radfish";
@@ -78,15 +76,15 @@ import { Label } from "@nmfs-radfish/react-radfish";
 </Label>;
 ```
 
-By following this method, you can leverage the underlying `uswds` component, maintain the NOAA theme, and can extend if further to suit you needs as a developer.
+By following this method, you can use the `uswds` component, while still maintaining the NOAA themes. You can also extend it further to suit your needs as a developer.
 
-**_508 Compliance (Section 508 of the Rehabilitation Act)_**
+## 508 Compliance (Section 508 of the Rehabilitation Act)
 
-508 compliance, also known as Section 508 compliance, refers to the adherence to accessibility standards outlined in Section 508 of the Rehabilitation Act. In the context of web development, it signifies the design and development of websites and digital content in a manner that ensures accessibility for individuals with disabilities. In a nutshell, this ensures that website can be navigated and understood by users with various disabilities, such as those with visual or auditory impairments. Developers must follow these guidelines to ensure their websites are accessible and usable by everyone, promoting an inclusive and diverse online experience.
+Section 508 compliance refers to the adherence to accessibility standards outlined in [Section 508 of the Rehabilitation Act](https://www.section508.gov/). For web developers, it means designing and developing content that's accessible to individuals with disabilities. In other words, 508 compliant websites can be navigated and understood by users with various disabilities. For example, there are guidelines that aid those with visual or auditory impairments. Developers must follow these guidelines to ensure their websites are accessible and usable by everyone. This promotes an inclusive and diverse online experience.
 
-As NOAA is a governmental agency, Section 508 compliance is crucial for the development of frontend apps because it ensures that these applications are accessible to all users, including those with disabilities. NOAA provides vital information related to weather, oceans, and atmospheric conditions, and it is imperative that individuals with diverse abilities can access and utilize these resources.
+Because NOAA is a governmental agency, Section 508 compliance is required for the development of frontend apps. NOAA provides vital information related to weather, oceans, and atmospheric conditions. Individuals with diverse abilities need to access and use these resources.
 
-508 compliance has been a driving factor for many decisions we make in RADFish, from extending a compliant component library in `@trussworks/react-uswds` to our UX strategies.
+Section 508 compliance is a driving factor for many decisions we make in RADFish about our UX strategies. We have also extended a compliant component library in `@trussworks/react-uswds`.
 
-**Resources:**
+### Resources
 Read more about 508 compliance here: [https://www.section508.gov/](https://www.section508.gov/)