Skip to content

Commit

Permalink
Merge pull request #13 from NMFS-RADFish/remove-edit-links
Browse files Browse the repository at this point in the history
Update RADFish references
  • Loading branch information
thgaskell authored Sep 12, 2024
2 parents 0833af8 + b6cbc41 commit c83ddbc
Show file tree
Hide file tree
Showing 5 changed files with 11 additions and 11 deletions.
6 changes: 3 additions & 3 deletions docs/building-your-application/development-standards.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ 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://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.
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:

Expand Down Expand Up @@ -55,7 +55,7 @@ Branding refers to the process of creating a distinct identity for a product or
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.

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:
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:

```css
// styles/theme.js
Expand Down Expand Up @@ -87,7 +87,7 @@ By following this method, you can leverage the underlying `uswds` component, mai

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.

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.
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.

**Resources:**
Read more about 508 compliance here: [https://www.section508.gov/](https://www.section508.gov/)
2 changes: 1 addition & 1 deletion docs/building-your-application/patterns/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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=/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.
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:

Expand Down
4 changes: 2 additions & 2 deletions docs/building-your-application/patterns/mock-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ sidebar_position: 4

# Mock API

As a frontend developer, it can sometimes be a blocker when you are developing a feature that has a dependency on an external API. Often times, you can be waiting for a backend developer to finish building our their API endpoints before you can continue building your feature. RadfishApp ships with a built-in mock server that allows the frontend developer to “stub out” and mock API requests/responses without this hard dependency during development.
As a frontend developer, it can sometimes be a blocker when you are developing a feature that has a dependency on an external API. Often times, you can be waiting for a backend developer to finish building our their API endpoints before you can continue building your feature. RADFishApp ships with a built-in mock server that allows the frontend developer to “stub out” and mock API requests/responses without this hard dependency during development.

More specifically, RadfishApp ships with [mock service worker](https://mswjs.io/) and is preconfigured in the boilerplate application.
More specifically, RADFishApp ships with [mock service worker](https://mswjs.io/) and is preconfigured in the boilerplate application.

At the entrypoint of the React application, we enable API mocking with the `enableMocking` function:

Expand Down
6 changes: 3 additions & 3 deletions docs/building-your-application/patterns/state-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ At a high level, we handle state management for tables in a similar way, althoug

By doing this, `DemoTable` can now utilize the `useTableState` hook, that provides the component with all of the state, event handlers, sorting functionality, as well as other pieces of functionality that may be needed for the application’s needs.

More specifically, Radfish leverages a React Library called [Tanstack Table](https://tanstack.com/table/latest/docs/framework/react/react-table) which makes it simple to handle traditionally tricky table interactions like sorting, filtering, and data fetching. Tanstack Table manages a lot of the heavy lifting with regards to re-rendering, and provides an easy to use interface to make static tables dynamic and interactive.
More specifically, RADFish leverages a React Library called [Tanstack Table](https://tanstack.com/table/latest/docs/framework/react/react-table) which makes it simple to handle traditionally tricky table interactions like sorting, filtering, and data fetching. Tanstack Table manages a lot of the heavy lifting with regards to re-rendering, and provides an easy to use interface to make static tables dynamic and interactive.

We suggest looking closely at the official Tanstack Table documentation to get familiar with how the library works. But, in the context of the boilerplate repo, we’ve provided a simple interface in `TableWrapper` that leverages the `useReactTable` hook.

Expand Down Expand Up @@ -128,7 +128,7 @@ PWAs leverage service workers, which are scripts that run in the background inde

**See more about service workers [here](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)**

Service workers are integrated into the Radfish application by default. After scaffolding the application you will notice the following files:
Service workers are integrated into the RADFish application by default. After scaffolding the application you will notice the following files:

`service-worker.js`

Expand All @@ -145,7 +145,7 @@ serviceWorkerRegistration.register();

This will register the React application as a PWA, which can be downloaded from the browser. For more information on how to download the PWA onto your device, see [this blog article](https://aureatelabs.com/blog/install-pwa-to-device/)

Additionally, you can query for whether or not the Radfish application is online or offline by leveraging the [navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)
Additionally, you can query for whether or not the RADFish application is online or offline by leveraging the [navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)

> Note, that this service worker is preconfigured when using the boilerplate `react-javascript` template
Expand Down
4 changes: 2 additions & 2 deletions docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { themes as prismThemes } from "prism-react-renderer";

/** @type {import('@docusaurus/types').Config} */
const config = {
title: "Radfish Documentation",
title: "RADFish Documentation",
tagline: "Frontend Development Tooling for NOAA Developers",
favicon: "img/favicon.ico",

Expand Down Expand Up @@ -53,7 +53,7 @@ const config = {
({
image: "img/radfish-logo.png",
navbar: {
title: "RADfish Docs",
title: "RADFish Docs",
logo: {
alt: "RADFish Logo",
src: "img/radfish-logo.png",
Expand Down

0 comments on commit c83ddbc

Please sign in to comment.