@unitedstatespowersquadrons/components 1.3.11 → 1.3.12

package/.github/workflows/main.yml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Install Packages
         run: yarn
       - name: Run Eslint
@@ -26,7 +26,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Install Packages
         run: yarn
       - name: Run TSC
@@ -35,7 +35,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
       - name: Install Packages
         run: yarn
       - name: Run Tests

package/Admin/AdminItem.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { createUseStyles } from "react-jss";
+import classNames from "classnames";
+import { OnMouseMoveHandler } from "../types";
+import Styles from "../Styles";
+
+const useStyles = createUseStyles({
+  adminMenuItem: {
+    "&:not(:last-child)": {
+      padding: "0.5em 0.1em",
+    },
+    ...Styles.flexRow,
+    borderRadius: "0.5em",
+    justifyContent: "left",
+    width: "100%",
+  },
+});
+
+interface Props {
+  children: React.ReactNode;
+  className?: string;
+  onClick?: OnMouseMoveHandler;
+  onMouseEnter?: OnMouseMoveHandler;
+  onMouseLeave?: OnMouseMoveHandler;
+}
+
+const AdminItem = (props: Props) => {
+  const { children, className, onClick, onMouseEnter, onMouseLeave } = props;
+  const classes = useStyles();
+
+  return(
+    <div
+      className={classNames(classes.adminMenuItem, className)}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default AdminItem;

package/Admin/Impersonation.tsx

@@ -0,0 +1,141 @@
+import React, { useRef } from "react";
+import { createUseStyles } from "react-jss";
+import classNames from "classnames";
+import AdminItem from "./AdminItem";
+import { AdminAction, Impersonation as ImpersonationType } from "./types";
+import ActionButton from "../ActionButton";
+import FontAwesomeIcon from "../FontAwesomeIcon";
+import IconButton from "../IconButton";
+import Styles from "../Styles";
+import { OnClickHandler, OnClickOrKeyboardHandler } from "../types";
+
+const useStyles = createUseStyles({
+  button: { paddingRight: "0.75em !important" },
+  center: {
+    "& svg": { margin: "0 auto" },
+    justifyContent: "center",
+  },
+  gray: { ...Styles.gray },
+  impersonation: {
+    animation: "300ms ease-in",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25em",
+    paddingBottom: "0.5em",
+  },
+  inactive: {
+    "& > div": {
+      display: "none",
+      opacity: "0",
+      transition: "opacity 0.5s ease-in-out",
+    },
+    "& > svg": { display: "block" },
+    "&:hover > div": {
+      display: "flex",
+      opacity: "1",
+    },
+    "&:hover > svg": { display: "none" },
+  },
+  left: { textAlign: "left" },
+  viewAsIcon: {
+    ...Styles.purple,
+    fontSize: "2em",
+  },
+  viewingAsIcon: {
+    "&:hover": { ...Styles.hover.red },
+    ...Styles.red,
+    fontSize: "1.5em",
+  },
+});
+
+interface Hooks {
+  useImpersonation: () => { impersonation?: ImpersonationType | null };
+  useDispatch: () => (action: AdminAction) => void;
+}
+
+const buildImpersonation = (hooks: Hooks) => {
+  const { useImpersonation, useDispatch } = hooks;
+
+  const Impersonation = () => {
+    const { impersonation } = useImpersonation();
+    const dispatch = useDispatch();
+    const classes = useStyles();
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const handleImpersonate: OnClickOrKeyboardHandler = event => {
+      if ("key" in event && event.key !== "Enter") { return; }
+
+      if (!inputRef.current) return;
+
+      const certificate = inputRef.current.value;
+
+      dispatch({ certificate, type: "impersonate" });
+    };
+
+    const handleCancel: OnClickHandler = () => {
+      dispatch({ type: "cancelImpersonation" });
+    };
+
+    if (impersonation) {
+      const { certificate, name } = impersonation;
+
+      return(
+        <AdminItem className={classes.impersonation} key="impersonating">
+          <div className="bold">Viewing As:</div>
+          <IconButton
+            className={classes.viewingAsIcon}
+            icon="user-group"
+            mode="duotone"
+            onClick={handleCancel}
+            title="Cancel Impersonation"
+          />
+          <div>{name}</div>
+          <div className={classes.gray}>{certificate}</div>
+        </AdminItem>
+      );
+    }
+
+    const collapsed = (
+      <FontAwesomeIcon
+        css={classes.viewAsIcon}
+        icon="user-group"
+        mode="duotone"
+      />
+    );
+
+    const expanded = (
+      <div className={classNames(classes.impersonation, classes.center)}>
+        <div className="bold">View As:</div>
+        <FontAwesomeIcon css={classes.viewAsIcon} icon="user-group" mode="duotone" />
+        <input
+          maxLength={7}
+          onKeyDown={handleImpersonate}
+          placeholder="Certificate"
+          ref={inputRef}
+          type="text"
+        />
+        <ActionButton
+          className={classes.button}
+          color="purple"
+          icon="shuffle"
+          mode="duotone"
+          onClick={handleImpersonate}
+          size="small"
+          text="Impersonate"
+        />
+      </div>
+    );
+
+    return(
+      <AdminItem className={classes.inactive}>
+        {collapsed}
+        {expanded}
+      </AdminItem>
+    );
+  };
+
+  return Impersonation;
+};
+
+export default buildImpersonation;

package/Admin/handlers.tsx

@@ -0,0 +1,67 @@
+import { AdminAction } from "./types";
+import { AppActionType, DispatchFunc, DispatchHandler, GenericAppAction, wrapDispatch } from "../Reducer";
+
+// Callers' AppAction union must include AdminAction members. We don't encode
+// that in the generic (TS can't express "A is a supertype of AdminAction"
+// without distribution headaches), so we narrow via type predicates at
+// runtime instead of casting.
+
+const isImpersonate = (action: GenericAppAction): action is Extract<AdminAction, { type: "impersonate" }> =>
+  action.type === "impersonate";
+
+export const wrapImpersonate = <A extends GenericAppAction>(dispatch: DispatchFunc<A>): DispatchFunc<A> => {
+  const actionType = "impersonate" as AppActionType<A>;
+
+  const handler: DispatchHandler<A> = action => {
+    if (!isImpersonate(action)) return;
+
+    const { certificate } = action;
+
+    return { bodyJson: { certificate }, href: "/admin/impersonate" };
+  };
+
+  return wrapDispatch(dispatch, [actionType], handler);
+};
+
+export const wrapCancelImpersonation = <A extends GenericAppAction>(dispatch: DispatchFunc<A>): DispatchFunc<A> => {
+  const actionType = "cancelImpersonation" as AppActionType<A>;
+
+  const handler: DispatchHandler<A> = action => {
+    if (action.type !== actionType) return;
+
+    return { href: "/admin/cancel", method: "DELETE" };
+  };
+
+  return wrapDispatch(dispatch, [actionType], handler);
+};
+
+export const wrapExpand = <A extends GenericAppAction>(dispatch: DispatchFunc<A>): DispatchFunc<A> => {
+  const actionType = "expand" as AppActionType<A>;
+
+  const handler: DispatchHandler<A> = action => {
+    if (action.type !== actionType) return;
+
+    return { href: "/admin/expand" };
+  };
+
+  return wrapDispatch(dispatch, [actionType], handler);
+};
+
+export const wrapCollapse = <A extends GenericAppAction>(dispatch: DispatchFunc<A>): DispatchFunc<A> => {
+  const actionType = "collapse" as AppActionType<A>;
+
+  const handler: DispatchHandler<A> = action => {
+    if (action.type !== actionType) return;
+
+    return { href: "/admin/collapse" };
+  };
+
+  return wrapDispatch(dispatch, [actionType], handler);
+};
+
+export const adminMenuHandlers = {
+  wrapCancelImpersonation,
+  wrapCollapse,
+  wrapExpand,
+  wrapImpersonate,
+};

package/Admin/index.tsx

@@ -0,0 +1,4 @@
+export { default as AdminItem } from "./AdminItem";
+export { default as buildImpersonation } from "./Impersonation";
+export * from "./handlers";
+export type * from "./types";

package/Admin/types.ts

@@ -0,0 +1,10 @@
+export interface Impersonation {
+  certificate: string;
+  name: string;
+}
+
+export type AdminAction =
+  | { type: "expand" }
+  | { type: "collapse" }
+  | { type: "impersonate"; certificate: string }
+  | { type: "cancelImpersonation" };

package/index.tsx

@@ -24,6 +24,8 @@ export * from "./Toasts";
 export { default as Colors } from "./Colors";
 export { default as Styles } from "./Styles";
 
+export * from "./Admin";
+
 export type * from "./types";
 export type * from "./Reducer";
 export type * from "./Colors";

package/package.json

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