@unitedstatespowersquadrons/components 1.0.8 → 1.0.10

package/ActionButton.tsx

@@ -76,7 +76,7 @@ const ActionButton = (props: ActionButtonProps) => {
   const buttonContents = () => {
     return(
       <>
-        <FontAwesomeIcon icon={icon} fa={fa} mode={mode} style={style} />
+        <FontAwesomeIcon fa={fa} icon={icon} mode={mode} style={style} />
         <span>{text}</span>
         {subtext && <small className={classes.subText}>({subtext})</small>}
       </>
@@ -89,10 +89,10 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>
@@ -103,11 +103,11 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         href={href}
         id={id}
         method={method}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>
@@ -139,10 +139,10 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(classes.button, colorClassName, sizeClassName(), className)}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {buttonContents()}
       </BaseActionButton>

package/BaseActionButton.tsx

@@ -47,11 +47,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
     return(
       <button
-        type="button"
-        id={id}
         className={classNames("action-button", classes.button, className)}
+        id={id}
         onClick={wrappedOnClick}
         title={title}
+        type="button"
       >
         {children}
       </button>
@@ -66,8 +66,8 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
       return(
         <form action={href} method="POST" ref={formRef}>
-          <input type="hidden" name="authenticity_token" value={getCsrfTokenHeader()} />
-          <input type="hidden" name="_method" value={method.toUpperCase()} />
+          <input name="authenticity_token" type="hidden" value={getCsrfTokenHeader()} />
+          <input name="_method" type="hidden" value={method.toUpperCase()} />
         </form>
       );
     };
@@ -86,11 +86,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
       <>
         {form()}
         <button
-          type="button"
-          id={id}
           className={classNames("action-button", classes.button, className)}
+          id={id}
           onClick={submitForm}
           title={title}
+          type="button"
         >
           {children}
         </button>
@@ -109,11 +109,11 @@ const BaseActionButton = (props: BaseActionButtonProps) => {
 
     return(
       <button
-        type="button"
-        onClick={onClick}
-        id={id}
         className={classNames("action-button", classes.button, className)}
+        id={id}
+        onClick={onClick}
         title={title}
+        type="button"
       >
         {children}
       </button>

package/Flags/Officer.tsx

@@ -80,7 +80,7 @@ const OfficerFlag = (props: Props) => {
 
   const combinedPath = `${flagBaseUrl}/${formatDir}/${subDirectory()}${displayRank}${sizeExtension}.${extension}`;
 
-  return <img className={className} src={combinedPath} alt={displayRank} />;
+  return <img alt={displayRank} className={className} src={combinedPath} />;
 };
 
 export default OfficerFlag;

package/Flags/Signal.tsx

@@ -52,7 +52,7 @@ const SignalFlag = (props: Props) => {
   const combinedUrl = `${signalBaseUrl}/${formatDir}/${dir()}/${flagValue()}.${extension}`;
 
   return (
-    <img className={className}  src={combinedUrl} alt={alt || flag} />
+    <img alt={alt || flag}  className={className} src={combinedUrl} />
   );
 };
 

package/IconButton.tsx

@@ -33,7 +33,7 @@ const IconButton = (props: IconButtonProps) => {
   const { className, fa, icon, id, mode, style, title } = props;
   const classes = useStyles();
 
-  const configuredIcon = <FontAwesomeIcon icon={icon} fa={fa} mode={mode} style={style} css={className} />;
+  const configuredIcon = <FontAwesomeIcon css={className} fa={fa} icon={icon} mode={mode} style={style} />;
 
   const combinedClassName = classNames(classes.icon, className);
 
@@ -43,10 +43,10 @@ const IconButton = (props: IconButtonProps) => {
     return(
       <BaseActionButton
         className={combinedClassName}
+        confirm={confirm}
         id={id}
         onClick={onClick}
         title={title}
-        confirm={confirm}
       >
         {configuredIcon}
       </BaseActionButton>
@@ -57,11 +57,11 @@ const IconButton = (props: IconButtonProps) => {
     return(
       <BaseActionButton
         className={combinedClassName}
+        confirm={confirm}
         href={href}
         id={id}
         method={method}
         title={title}
-        confirm={confirm}
       >
         {configuredIcon}
       </BaseActionButton>

package/Reducer/Example/reducer.tsx

@@ -0,0 +1,64 @@
+import { createContext } from "react";
+import { Draft } from "immer";
+import { AppState, ServerResponse } from "./types";
+import {
+  buildReducer,
+  DispatchFunc,
+  DispatchHandler,
+  RailsAppAction,
+  ReducerHandler,
+  wrapDispatch,
+} from "../";
+
+// If you want to add additional data to the server response, use type `RailsAppAction<ExampleServerResponse>`.
+// Otherwise, just use type `RailsAppAction`.
+//
+// If you need to access the available `type`s for your defined AppAction, use `AppActionType<AppAction>`
+//
+type AppAction =
+  | RailsAppAction<ServerResponse>
+  | { type: "doSomething"; something: string };
+
+export const exampleReducer = (draft: Draft<AppState>, action: AppAction): void => {
+  const { type } = action;
+
+  switch (type) {
+  case "doSomething":
+    draft.something = "changed";
+
+    break;
+  case "saveComplete": break;
+  case "saveFailed": break;
+  default: return type satisfies never;
+  }
+};
+
+export const doSomething: ReducerHandler<AppAction> = (
+  dispatch: DispatchFunc<AppAction>
+): DispatchFunc<AppAction> => {
+  const actionType = "doSomething";
+
+  const handler: DispatchHandler<AppAction> = (action: AppAction) => {
+    if (action.type !== actionType) return {};
+
+    const { something } = action;
+
+    const bodyJson = { something };
+    const href = "/do_something";
+
+    return { bodyJson, href };
+  };
+
+  // If you want to add additional data to the server response, pass in type `ServerResponse`.
+  // Otherwise, just leave the second type parameter unspecified.
+  return wrapDispatch<AppAction, ServerResponse>(dispatch, [actionType], handler);
+};
+
+export const { AppProvider, useAppDispatch, useAppState } = buildReducer(
+  exampleReducer,
+  createContext<AppState | null>(null),
+  createContext<React.Dispatch<AppAction> | null>(null),
+  [
+    doSomething,
+  ]
+);

package/Reducer/Example/types.ts

@@ -0,0 +1,9 @@
+import { RailsResponse } from "../types";
+
+export interface AppState {
+  something: string;
+}
+
+export interface ServerResponse extends RailsResponse {
+  update: AppState;
+}

package/Reducer/buildReducer.tsx

@@ -0,0 +1,60 @@
+import React, { useContext, useMemo } from "react";
+import { Draft, produce } from "immer";
+import { useImmerReducer } from "use-immer";
+import { ReducerHandler } from "./types";
+
+interface InitialAppProps<AppState> {
+  initialState: AppState;
+  children: React.ReactNode;
+}
+
+export default function buildReducer<AppState, AppAction>(
+  reducer: (draft: Draft<AppState>, action: AppAction) => void,
+  StateContext: React.Context<AppState | null>,
+  DispatchContext: React.Context<React.Dispatch<AppAction> | null>,
+  handlers: ReducerHandler<AppAction>[] = []
+) {
+  function AppProvider(props: InitialAppProps<AppState>) {
+    const [providerState, dispatch] = useImmerReducer(reducer, props.initialState, (state: AppState) => {
+      return produce(state, draft => draft);
+    });
+
+    const wrappedDispatch = useMemo(() => {
+      let d = dispatch;
+
+      handlers.forEach(handler => d = handler(d));
+
+      return d;
+    }, [dispatch]);
+
+    return (
+      <StateContext.Provider value={providerState}>
+        <DispatchContext.Provider value={wrappedDispatch}>
+          {props.children}
+        </DispatchContext.Provider>
+      </StateContext.Provider>
+    );
+  }
+
+  function useAppState() {
+    const context = useContext(StateContext);
+    if (!context) {
+      throw new Error("useAppState has to be used within AppProvider");
+    }
+    return context;
+  }
+
+  function useAppDispatch() {
+    const context = useContext(DispatchContext);
+    if (!context) {
+      throw new Error("useAppDispatch has to be used within AppProvider");
+    }
+    return context;
+  }
+
+  return {
+    AppProvider,
+    useAppDispatch,
+    useAppState,
+  };
+}

package/Reducer/index.tsx

@@ -0,0 +1,3 @@
+export { default as wrapDispatch } from "./wrapDispatch";
+export { default as buildReducer } from "./buildReducer";
+export type * from "./types";

package/Reducer/types.ts

@@ -0,0 +1,34 @@
+import { Toast } from "../Toasts";
+
+export interface RailsResponse {
+  reload?: boolean;
+  status: "OK" | "ERROR";
+  toasts: Toast[];
+}
+
+export type DispatchFunc<T> = (action: T) => void;
+export type DispatchHandler<T> = (action: T) => {
+  body?: string;
+  bodyJson?: object;
+  headers?: { [key: string]: string };
+  href?: string;
+  method?: string;
+};
+
+export type ReducerHandler<AppAction> = (dispatch: DispatchFunc<AppAction>) => DispatchFunc<AppAction>;
+
+export interface GenericAppAction {
+  type: string;
+}
+
+export type RailsAppAction<R extends RailsResponse = RailsResponse> =
+  | { type: "saveComplete"; res: R }
+  | { type: "saveFailed" };
+
+type ExtractField<T, K extends string> = T extends { [key in K]: infer U } ? U : never;
+export type AppActionType<
+  A extends GenericAppAction,
+  Res extends RailsResponse = RailsResponse
+> =
+  | ExtractField<A, "type">
+  | ExtractField<RailsAppAction<Res>, "type">;

package/Reducer/wrapDispatch.tsx

@@ -0,0 +1,74 @@
+import {
+  AppActionType,
+  DispatchFunc,
+  DispatchHandler,
+  GenericAppAction,
+  RailsAppAction,
+  RailsResponse,
+} from "./types";
+import railsFetchJson from "../railsFetchJson";
+
+type AppAction<Res extends RailsResponse = RailsResponse> =
+  | GenericAppAction
+  | RailsAppAction<Res>;
+
+export default function wrapDispatch<
+  A extends AppAction<ServerResponse>,
+  ServerResponse extends RailsResponse = RailsResponse
+>(
+  dispatch: DispatchFunc<A>,
+  appActionTypes: AppActionType<A>[],
+  handler: DispatchHandler<A>
+): DispatchFunc<A> {
+  const updateDebounceTime = (("testEnv" in window) && window.testEnv) ? 50 : 250;
+
+  const updateHandler = async (action: A, signal: AbortSignal) => {
+    const { bodyJson, headers, href, method } = handler(action);
+
+    if (!href || !bodyJson) return;
+
+    const requestHeaders = headers || {};
+
+    try {
+      const res = await railsFetchJson<ServerResponse>(
+        href,
+        { bodyJson, headers: requestHeaders, method: method || "POST", signal }
+      );
+
+      dispatch({ res, type: "saveComplete" } as A);
+    } catch(e) {
+      // Ignore request aborts
+      if (e instanceof DOMException) return;
+
+      dispatch({ type: "saveFailed" } as A);
+    }
+  };
+
+  const timers: { [id: string]: number } = {};
+  const abortControllers: { [id: string]: AbortController } = {};
+
+  return (action: A) => {
+    // Run it like normal
+    dispatch(action);
+
+    // Skip if it's not one of the appActionTypes we care about
+    if (!appActionTypes.includes(action.type as AppActionType<A>)) return;
+
+    const timeoutKey = "userTimeout";
+
+    // Stop previous request
+    const timer = timers[timeoutKey];
+    if (timer) clearTimeout(timer);
+    delete timers[timeoutKey];
+    const oldAbortController = abortControllers[timeoutKey];
+    if (oldAbortController) oldAbortController.abort();
+    delete abortControllers[timeoutKey];
+
+    // Make request
+    const abortController = abortControllers[timeoutKey] = new AbortController();
+    const signal = abortController.signal;
+    timers[timeoutKey] = setTimeout(() => {
+      void updateHandler(action, signal);
+    }, updateDebounceTime);
+  };
+}

package/SelectionIconButton.tsx

@@ -22,12 +22,12 @@ const SelectionIconButton = (props: Props) => {
 
   return(
     <IconButton
+      className={classNames(classes.icon, className)}
       icon={icon}
       id={id}
+      mode="duotone"
       onClick={onClick}
       title={title}
-      className={classNames(classes.icon, className)}
-      mode="duotone"
     />
   );
 };

package/StripedTable/Table.tsx

@@ -18,7 +18,7 @@ const Table = (props: Props) => {
   const classes = useStyles();
 
   return(
-    <table id={id} className={classNames(className, classes.table)}>
+    <table className={classNames(className, classes.table)} id={id}>
       {children}
     </table>
   );

package/Toasts/Toast.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
-import { DismissFunc, ToastProps, Toast_Status } from "./types";
+import { DismissFunc, Toast_Status, ToastProps } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
 
 interface Props {
@@ -122,12 +122,12 @@ const Toast = (props: Props) => {
   return (
     <div className={classNames(classes.toast, statusClassName, opacityClass)} key={`toast-${id}`}>
       <div className={classes.toastTitle}>
-        <FontAwesomeIcon icon={icon} mode="duotone" fa="fw" />
+        <FontAwesomeIcon fa="fw" icon={icon} mode="duotone" />
         <span>{title}</span>
       </div>
       <div className={classes.toastBody}>{renderBody()}</div>
-      <a className={classes.toastDismiss} title="Dismiss this message" onClick={handleDismiss}>
-        <FontAwesomeIcon icon="times" mode="duotone" fa="fw" css={classes.toastDismissIcon} />
+      <a className={classes.toastDismiss} onClick={handleDismiss} title="Dismiss this message">
+        <FontAwesomeIcon css={classes.toastDismissIcon} fa="fw" icon="times" mode="duotone" />
       </a>
     </div>
   );

package/Toasts/Toasts.tsx

@@ -2,9 +2,9 @@ import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
 import Toast from "./Toast";
-import createDismissToast from "./createDismissToast";
+import { createDismissToast } from "./toastHelpers";
 import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
-import { DispatchFunc } from "../types";
+import { DispatchFunc } from "../";
 
 interface BaseProps {
   toasts?: ToastProps[];
@@ -50,7 +50,7 @@ const Toasts = (props: Props) => {
 
   return (
     <div className={classNames("toastsContainer", classes.toastsContainer)}>
-      {toasts?.map(toast => <Toast dismiss={dismissFunc()} toast={toast} key={toast.id} />)}
+      {toasts?.map(toast => <Toast dismiss={dismissFunc()} key={toast.id} toast={toast} />)}
     </div>
   );
 };

package/Toasts/index.tsx

@@ -1,5 +1,8 @@
 export { default as Toasts } from "./Toasts";
-export { default as createDismissToast } from "./createDismissToast";
+export * from "./toastHelpers";
 
-export { Toast_Status } from "./types";
-export type { Toast, ToastAppAction, ToastProps } from "./types";
+export * from "./types";
+export type * from "./types";
+
+// Legacy exports for compatibility
+export { createDismissToast } from "./toastHelpers";

package/Toasts/toastHelpers.ts

@@ -0,0 +1,47 @@
+import { Draft } from "immer";
+import { Toast, ToastProps, ToastRemoveAppAction } from "./types";
+import { AppStateWithToasts, DispatchFunc } from "../";
+
+export function createDismissToast(dispatch: DispatchFunc<ToastRemoveAppAction>) {
+  const dismissToast = (toastId: number) => {
+    dispatch({ toastId, type: "dismissToast" });
+
+    setTimeout(() => dispatch({ toastId, type: "removeToast" }), 2000);
+  };
+
+  return dismissToast;
+}
+
+export function handleToasts<T extends AppStateWithToasts>(draft: Draft<T>, toasts: Toast[]) {
+  const handleToastsFunc = () => {
+    if (toasts.length > 0) {
+      toasts.forEach(toast => addToast(draft, toast));
+    }
+  };
+
+  return handleToastsFunc;
+}
+
+export function addToast<T extends AppStateWithToasts>(draft: Draft<T>, toastOptions: Toast) {
+  const { body, status, timeout, title } = toastOptions;
+
+  // Increment current toastId to prevent collisions
+  const id = draft.toastId ? draft.toastId + 1 : 1;
+  draft.toastId = id;
+
+  const toast = { body, id, status, timeout, title } as ToastProps;
+
+  // Initialize toasts array if not provided by the server
+  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/eslint.config.mjs

@@ -30,6 +30,13 @@ export default tseslint.config(
       "quotes": ["error", "double"],
       "semi": ["error", "always"],
       "sort-keys": ["error", "asc", { caseSensitive: true, minKeys: 2, natural: false }],
+      "sort-imports": [
+        "error",
+        {
+          "ignoreCase": true,
+          "ignoreDeclarationSort": true,
+        }
+      ],
       "arrow-parens": ["error", "as-needed"],
       "comma-dangle": [
         "error",
@@ -145,11 +152,12 @@ export default tseslint.config(
       "stylistic/no-extra-semi": "error",
       "stylistic/semi": ["error", "always"],
       "stylistic/no-multiple-empty-lines": "error",
+      "stylistic/jsx-sort-props": "error",
       "stylistic/array-element-newline": [
         "error",
         {
           "ArrayExpression": "consistent",
-          "ArrayPattern": { "minItems": 3 },
+          "ArrayPattern": { "minItems": 5 },
         }
       ],
       "stylistic/object-property-newline": [

package/index.tsx

@@ -1,3 +1,5 @@
+export * from "./Reducer";
+
 export { default as FontAwesomeIcon } from "./FontAwesomeIcon";
 
 export { default as railsFetchJson } from "./railsFetchJson";
@@ -17,6 +19,7 @@ export { default as Colors } from "./Colors";
 export { default as Styles } from "./Styles";
 
 export type * from "./types";
+export type * from "./Reducer";
 export type * from "./Colors";
 export type * from "./FontAwesomeIcon";
 export type * from "./ActionButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -18,9 +18,11 @@
   "homepage": "https://github.com/unitedstatespowersquadrons/components#readme",
   "dependencies": {
     "classnames": "^2.5.1",
+    "immer": "^10.1.1",
     "react": "^19.1.0",
     "react-jss": "^10.10.0",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "use-immer": "^0.11.0"
   },
   "devDependencies": {
     "@stylistic/eslint-plugin": "^5.1.0",

package/types.ts

@@ -1,20 +1,11 @@
 import React from "react";
-import { Toast, ToastProps } from "./Toasts";
+import { ToastProps } from "./Toasts";
 
 export interface AppStateWithToasts {
   toasts: ToastProps[];
   toastId?: number;
 }
 
-export type DispatchFunc<T> = (action: T) => void;
-export type DispatchHandler<T> = (action: T) => {
-  body?: string;
-  bodyJson?: object;
-  headers?: { [key: string]: string };
-  href?: string;
-  method?: string;
-};
-
 export type OnClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;
 export type OnInputChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
 export type OnClickOrKeyboardHandler = (event: OnClickOrKeyboardEvent) => void;
@@ -44,9 +35,3 @@ export interface OnClickProps {
   confirm?: string | undefined;
   onClick: OnClickHandler;
 }
-
-export interface RailsResponse {
-  reload?: boolean;
-  status: "OK" | "ERROR";
-  toasts: Toast[];
-}

package/Toasts/createDismissToast.ts

@@ -1,16 +0,0 @@
-import { ToastRemoveAppAction } from "./types";
-import { DispatchFunc } from "../types";
-
-const createDismissToast = (dispatch: DispatchFunc<ToastRemoveAppAction>) => {
-  const dismissToast = (toastId: number) => {
-    dispatch({ toastId, type: "dismissToast" });
-
-    setTimeout(() => {
-      dispatch({ toastId, type: "removeToast" });
-    }, 2000);
-  };
-
-  return dismissToast;
-};
-
-export default createDismissToast;