docs(website): Updated general documentation

Author: mlaursen

packages/documentation/src/guides/configuring-your-layout.md

@@ -46,22 +46,25 @@ render(
 
 This component will initialize:
 
+- `Dir` - see #utils
 - `AppSizeListener` - see #utils
-- `InteractionModeListener` - see #utils
-- `HoverModeProvider` - see #utils
-- `StatesConfig` - see #states
 - `NestedDialogContextProvider` - see #dialog
+- `UserInteractionModeListener` - see #utils
+- `StatesConfig` - see #utils
+- `HoverModeProvider` - see #utils
+- `IconProvider` - see #icons
+- `FormThemeProvider` - see #form
 
 The three most important Providers that are included are the `AppSizeListener`,
-`InteractionModeListener` and `StatesConfig`. The `AppSizeListener` is in the
-#utils package that helps determine how your app is being viewed based on media
-queries. The `InteractionModeListener` also comes from the #utils package and
-helps determine if your app is being interacted by touch, mouse, or keyboard to
-customize the styles for that experience. Finally, the `StatesConfig` is the
-general configuration for how different interactable elements gain different
-states based on the interaction mode. This also globally controls the "ripple"
-effect when elements are clicked so allows for a quick opt-out if you don't like
-that effect.
+`UserInteractionModeListener`, and `StatesConfig`. The `AppSizeListener` is in
+the #utils package that helps determine how your app is being viewed based on
+media queries. The `UserInteractionModeListener` also comes from the #utils
+package and helps determine if your app is being interacted by touch, mouse, or
+keyboard to customize the styles for that experience. Finally, the
+`StatesConfig` is the general configuration for how different interactable
+elements gain different states based on the interaction mode. This also globally
+controls the "ripple" effect when elements are clicked so allows for a quick
+opt-out if you don't like that effect.
 
 ## Creating a Layout
 

packages/documentation/src/guides/writing-tests.md

@@ -1,26 +1,27 @@
 ## Writing Tests
 
-Testing with `react-md` should not much more difficult than any other component
-testing you are used to for the majority of your tests. The only times you might
-encounter errors are when you use components that rely one one of the
-configuration providers and determining the current app size. Since I am the
-most familiar with [jest] as the test runner and [react-testing-library] as the
-test renderer, this guide will be targeted towards these two libraries
+Testing an app with `react-md` components should not require many changes to
+your normal testing flow. The only times weird issues might occur are when using
+components that rely on one of the providers included by the [Configuration
+component].
+
+This guide will provide a few suggestions for setting up an app with [jest] and
+[react-testing-library].
 
 ### Initializing window.matchMedia
 
-If one of your components or a component from `react-md` uses the `useAppSize`
-or `useMediaQuery` hooks, your tests might fail due to `window.matchMedia` being
+If a component from your app or `react-md` uses the `useAppSize` or
+`useMediaQuery` hooks, your tests might fail due to `window.matchMedia` being
 `undefined`. In this case, you'll want to create or update a `testSetup.ts` (or
 `testSetup.js`) to include a very simple polyfill.
 
 Edit `testSetup.ts`:
 
 ```diff
-+const {
++import {
 +  DEFAULT_DESKTOP_MIN_WIDTH,
 +  DEFAULT_DESKTOP_LARGE_MIN_WIDTH,
-+} = require('@react-md/utils/lib/sizing/constants');
++} from '@react-md/utils';
 +
 +if (typeof window.matchMedia !== 'function') {
 +  window.matchMedia = (query) => ({
@@ -49,7 +50,7 @@ Edit `jest.config.js`:
  }
 ```
 
-This default polyfill will make all your tests run in desktop mode by default.
+This polyfill will make all your tests run in desktop mode by default.
 
 ### Testing different app sizes
 
@@ -140,3 +141,4 @@ Edit `src/components/__tests__/Component.tsx`:
   https://testing-library.com/docs/react-testing-library/intro
 [custom renderer]:
   https://testing-library.com/docs/react-testing-library/setup#custom-render
+[configuration component]: /guides/configuring-your-app

packages/utils/README.md

@@ -8,39 +8,23 @@ generating styles for packages that have been installed.
 
 Check out the usage section below for more details.
 
-Exported components:
-
-- `AppSizeListener`
-- `ResizeListener`
-- `ResizeObserver`
-- `ScrollListener`
-- `MobileOnly`
-- `PhoneOnly`
-- `TabletOnly`
-- `DesktopOnly`
-- `FocusContainer`
-
-Export hooks:
-
-- `useAppSize`
-- `useMediaQuery`
-- `useOrientation`
-- `useResizeListener`
-- `useResizeObserver`
-- `useCloseOnEscape`
-- `useFocusOnMount`
-- `useKeyboardMovement`
-- `useKeyboardSearch`
-- `usePreviousFocus`
-- `useScrollLock`
-- `useTabFocusWrap`
-
 ## Installation
 
 ```sh
 npm install --save @react-md/utils
 ```
 
+<!-- DOCS_REMOVE -->
+
+## Documentation
+
+You should check out the
+[full documentation](https://react-md.dev/packages/utils/demos) for live
+examples and more customization information, but an example usage is shown
+below.
+
+<!-- DOCS_REMOVE_END -->
+
 ## Usage
 
 The main export for this package will mainly be the exposed mixins which can be