@unitedstatespowersquadrons/components 1.2.23 → 1.2.24

package/Readme.md

@@ -1,5 +1,6 @@
 # USPS React Components Library
 
+![NPM Version](https://img.shields.io/npm/v/@unitedstatespowersquadrons/components)
 [![Testing Status](https://github.com/unitedstatespowersquadrons/components/actions/workflows/main.yml/badge.svg)](https://github.com/unitedstatespowersquadrons/components/actions)
 
 ## Usage
@@ -46,12 +47,28 @@ More detailed information is available for [Toasts](Toasts/Readme.md) usage.
 
 ## Reducer
 
-To create a reducer, follow the following pattern, follow the pattern described
-in [Reducer/Example](Reducer/Example).
+To create a reducer, follow the pattern described in [Reducer/Example](Reducer/Example).
 
 There is also an example in `appstate.tsx` for if you only need access to app
 state, but do not have any dispatchable events.
 
+## Shared TSC Config
+
+To include the TSC config from this library, create `./tsconfig.json`:
+
+```json
+{
+  "extends": "./node_modules/@unitedstatespowersquadrons/components/tsconfig.json",
+  "exclude": [
+    "**/proto",
+    "node_modules",
+    "public",
+    "vendor",
+    "tmp"
+  ]
+}
+```
+
 ## Automated Testing
 
 GitHub Actions will automatically run `eslint` and `tsc` on branch pushes.

package/Styles.tsx

@@ -59,6 +59,11 @@ const Styles = {
     textDecoration: "none",
     width: "fit-content",
   },
+  flexColumn: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.5em",
+  },
   flexRow: {
     alignItems: "center",
     display: "flex",

package/Toasts/Readme.md

@@ -5,16 +5,15 @@ root components, while supporting app state and reducer dispatching.
 
 ```tsx
 // NewComponent.tsx
+import { Toasts } from "@unitedstatespowersquadrons/components";
 import { useAppState, useAppDispatch } from "./reducer";
-import { createDismissToast, Toasts } from "../shared";
 
 const NewComponent = () => {
   const { toasts } = useAppState();
   const dispatch = useAppDispatch();
-  const dismissToast = createDismissToast(dispatch);
 
   return (
-    <Toasts dismiss={dismissToast} toasts={toasts} />
+    <Toasts dispatch={dispatch} toasts={toasts} />
   );
 };
 
@@ -23,8 +22,7 @@ export default NewComponent;
 
 ```tsx
 // reducer.tsx
-import { Toast, ToastAppAction, ToastProps } from "../shared";
-import { addToast, handleToasts } from "./reducerHelpers";
+import { addToast, handleToasts, Toast, ToastAppAction, ToastProps } from "@unitedstatespowersquadrons/components";
 
 export type AppAction =
   // ...
@@ -73,38 +71,3 @@ function reducer(draft: Draft<AppState>, action: AppAction) {
   // ...
 };
 ```
-
-```tsx
-// reducerHelpers.tsx
-import { Draft } from "immer";
-import { AppState } from "./types";
-import { Toast, ToastProps } from "../shared";
-
-export const handleToasts = (draft: Draft<AppState>, toasts: Toast[]) => {
-  if (toasts.length > 0) {
-    toasts.forEach(toast => addToast(draft, toast));
-  }
-};
-
-export const addToast = (draft: Draft<AppState>, toastOptions: Proto.Shared.Toast) => {
-  const { body, status, timeout, title } = toastOptions;
-
-  const id = draft.toastId = draft.toastId ? draft.toastId + 1 : 1;
-
-  const toast = { body, id, status, timeout, title } as ToastProps;
-
-  if (!draft.toasts) draft.toasts = [];
-
-  // Do not store multiple identical toasts
-  if (draft.toasts.some(t => {
-    return (
-      toast.body === t.body &&
-        toast.status === t.status &&
-        toast.title === t.title
-    );
-  })) return;
-
-  draft.toasts.push(toast);
-};
-
-```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.2.23",
+  "version": "1.2.24",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {