@unitedstatespowersquadrons/components 1.0.7 → 1.0.9

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/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,25 +1,14 @@
 import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
-import { DismissFunc, ToastProps, ToastRemoveAppAction, Toast_Status } from "./types";
-import createDismissToast from "./createDismissToast";
+import { DismissFunc, ToastProps, Toast_Status } from "./types";
 import FontAwesomeIcon from "../FontAwesomeIcon";
-import { DispatchFunc } from "../types";
 
-interface BaseProps {
+interface Props {
+  dismiss: DismissFunc;
   toast: ToastProps;
 }
 
-interface DismissProps extends BaseProps {
-  dismiss?: DismissFunc;
-}
-
-interface DispatchProps extends BaseProps {
-  dispatch?: DispatchFunc<ToastRemoveAppAction>;
-}
-
-type Props = DismissProps | DispatchProps;
-
 const useStyles = createUseStyles({
   dismissed: { opacity: "0" },
   error: {
@@ -79,25 +68,10 @@ const useStyles = createUseStyles({
 const Toast = (props: Props) => {
   const classes = useStyles();
 
-  const { toast } = props;
+  const { dismiss, toast } = props;
   const { body, dismissed, id, status, timeout, title } = toast;
 
-  const dismissFunc = (): DismissFunc => {
-    let dismiss;
-
-    if ("dismiss" in props) {
-      dismiss = props.dismiss;
-    } else if ("dispatch" in props) {
-      const { dispatch } = props;
-      dismiss = createDismissToast(dispatch);
-    } else {
-      throw new Error("Invalid Toast dismiss configuration");
-    }
-
-    return dismiss;
-  };
-
-  const handleDismiss = () => dismissFunc()(id);
+  const handleDismiss = () => dismiss(id);
 
   if (timeout > 0) setTimeout(handleDismiss, 2000 + timeout);
 
@@ -148,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,13 +2,24 @@ import React from "react";
 import classNames from "classnames";
 import { createUseStyles } from "react-jss";
 import Toast from "./Toast";
-import { ToastProps } from "./types";
+import createDismissToast from "./createDismissToast";
+import { DismissFunc, ToastProps, ToastRemoveAppAction } from "./types";
+import { DispatchFunc } from "../types";
 
-interface Props {
-  dismiss: (id: number) => void;
+interface BaseProps {
   toasts?: ToastProps[];
 }
 
+interface DismissProps extends BaseProps {
+  dismiss?: DismissFunc;
+}
+
+interface DispatchProps extends BaseProps {
+  dispatch?: DispatchFunc<ToastRemoveAppAction>;
+}
+
+type Props = DismissProps | DispatchProps;
+
 const useStyles = createUseStyles({
   toastsContainer: {
     display: "flex",
@@ -23,12 +34,23 @@ const useStyles = createUseStyles({
 });
 
 const Toasts = (props: Props) => {
-  const { dismiss, toasts } = props;
+  const { toasts } = props;
   const classes = useStyles();
 
+  const dismissFunc = (): DismissFunc => {
+    if ("dismiss" in props) {
+      return props.dismiss;
+    } else if ("dispatch" in props) {
+      const { dispatch } = props;
+      return createDismissToast(dispatch);
+    } else {
+      throw new Error("Invalid Toast dismiss configuration");
+    }
+  };
+
   return (
     <div className={classNames("toastsContainer", classes.toastsContainer)}>
-      {toasts?.map(toast => <Toast dismiss={dismiss} toast={toast} key={toast.id} />)}
+      {toasts?.map(toast => <Toast dismiss={dismissFunc()} key={toast.id} toast={toast} />)}
     </div>
   );
 };

package/eslint.config.mjs

@@ -145,11 +145,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/package.json

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