@unitedstatespowersquadrons/components 1.0.3 → 1.0.5

package/Flags/Officer.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+
+type ExactJobcodeRank = "CDR" | "LTC" | "LT" | "DC" | "DLTC" | "DLT" | "CC";
+type PatternJobcodeRank = "STFC" | "RC" | "VC";
+type FlagRank =
+  | ExactJobcodeRank
+  | PatternJobcodeRank
+  | "PLTC" | "PC" | "FLT" | "1LT"
+  | "PDLTC" | "PDC" | "DAIDE" | "DFLT" | "D1LT"
+  | "PNFLT" | "PSTFC" | "PRC" | "PVC" | "PCC" | "NAIDE" | "NFLT";
+
+interface Props {
+  className?: string;
+  flag?: string; // FlagRank | jobcode
+  format?: "svg" | "png";
+  jobcode?: string;
+  insignia?: "flag" | "gold" | "silver";
+  rank?: FlagRank;
+  size?: number | "thumb";
+}
+
+const OfficerFlag = (props: Props) => {
+  const { className, flag, format, jobcode, insignia, rank, size } = props;
+
+  if (!flag && !jobcode && !rank) {
+    throw new TypeError("Missing required prop: one of `flag`, `jobcode`, or `rank` must be provided.");
+  }
+
+  const flagBaseUrl = "https://flags.aws.usps.org";
+
+  const rankFromJobcode = () => {
+    if (!jobcode && !flag) return "";
+
+    const search = (flag || jobcode)!;
+
+    /* eslint-disable sort-keys */
+    const ranks: { [key: string]: ExactJobcodeRank } = {
+      31000: "CDR",
+      32000: "LTC",
+      31010: "LT",
+      21000: "DC",
+      22000: "DLTC",
+      21010: "DLT",
+      11000: "CC",
+    };
+    const rankPatterns = {
+      VC: /1\d000/,
+      RC: /1\d{3}0/,
+      STFC: /1\d{3}1/,
+    };
+    /* eslint-enable sort-keys */
+
+    const matchRankPattern = () => {
+      for (const [r, pattern] of Object.entries(rankPatterns)) {
+        const regexp = new RegExp(pattern);
+
+        if (search.match(regexp)) return r;
+      }
+
+      return "";
+    };
+
+    return (search in ranks) ? ranks[search] : matchRankPattern();
+  };
+
+  const displayRank = rank || rankFromJobcode() || flag;
+  const formatDir = format ? format.toUpperCase() : "PNG";
+  const extension = format ? format.toLowerCase() : "png";
+  const sizeExtension = extension === "png" && size ? `.${size}` : "";
+
+  const subDirectory = () => {
+    if (insignia === "flag") {
+      return "insignia/";
+    } else if (insignia) {
+      return `insignia/${insignia}/`;
+    } else {
+      return "";
+    }
+  };
+
+  const combinedPath = `${flagBaseUrl}/${formatDir}/${subDirectory()}${displayRank}${sizeExtension}.${extension}`;
+
+  return <img className={className} src={combinedPath} alt={displayRank} />;
+};
+
+export default OfficerFlag;

package/Flags/Readme.md

@@ -0,0 +1,171 @@
+# Flag Components
+
+## Importing
+
+You can import individual components, or the entire namespace:
+
+```tsx
+import { OfficerFlag } from "../Flags";
+
+const NewComponent = () => {
+  return (
+    <OfficerFlag {...flagProps} />
+  );
+};
+```
+
+```tsx
+import Flags from "../Flags";
+
+const NewComponent = () => {
+  return (
+    <Flags.Officer {...flagProps} />
+  );
+};
+```
+
+## Officer Flags
+
+All props are individually optional, however one of `flag`, `jobcode`, or `rank` must be provided.
+
+- `flag`: generic input for either of the two other options
+- `jobcode`: a jobcode, to be converted into the corresponding rank
+- `rank`: a specific rank
+  - exclude all slashes, and `st` for e.g. 1st/Lt
+  - See `FlagRank` from [Officer.tsx](Officer.tsx) for the complete list of supported ranks
+
+```tsx
+  // All of these are equivalent
+  <Flags.Officer flag="CC" />
+  <Flags.Officer flag="11000" />
+  <Flags.Officer rank="CC" />
+  <Flags.Officer jobcode="11000" />
+```
+
+### Supported Ranks from Jobcodes
+
+| Rank | Jobcode | Details           |
+|------|---------|-------------------|
+| CDR  | 31000   |                   |
+| LTC  | 32000   |                   |
+| LT   | 31010   | Merit Marks Chair |
+| DC   | 21000   |                   |
+| DLTC | 22000   |                   |
+| DLT  | 21010   | Merit Marks Chair |
+| CC   | 11000   |                   |
+| VC   | 1*000   |                   |
+| RC   | 1***0   |                   |
+| STFC | 1***1   |                   |
+
+### Format
+
+Officer flags can be used in either PNG or SVG format.
+
+### Sizes
+
+Officer flags support the following sizes for PNG format:
+
+- `undefined` -> full size (3072x2048)
+- `1500`
+- `1000`
+- `500`
+- `"thumb"`
+
+Sizes refer to the width of the resulting image.
+
+### Insignia Mode
+
+Instead of displaying officer flags, the corresponding insignia can be displayed with the prop `insignia`.
+
+Insignia support three colors:
+
+- `"flag"` -> flag color
+  - inverted with background color if background is blue/red
+  - standard flag insignia color if background is white
+- `"gold"`
+- `"silver"`
+
+Some insignia are narrow enough that they do not support all size options. In such cases, size `"thumb"` is
+usually sufficient.
+
+## Signal Flags
+
+You can import either the individual signal flag component or the automatic text group converter component.
+
+### Special Characters
+
+Because individual character parsing of text cannot render all possible signal flags, there are four custom
+Unicode codepoints that have special handling when using single-character input (which is always used by
+the automatic text group component):
+
+- `\uE000` -> `"code"`
+- `\uE001` -> `"repeat_1"`
+- `\uE002` -> `"repeat_2"`
+- `\uE003` -> `"repeat_3"`
+
+### Individual Signal
+
+```tsx
+import { SignalFlag } from "../Flags";
+
+const NewComponent = () => {
+  return (
+    <SignalFlag flag="alpha" />
+  );
+};
+```
+
+```html
+<img alt="alpha" src="https://flags.aws.usps.org/signals/PNG/letters/alpha.png">
+```
+
+### Automatic Words
+
+```tsx
+import { SignalFlags } from "../Flags";
+
+const NewComponent = () => {
+  return (
+    <SignalFlags text="United States Power Squadrons" />
+  );
+};
+```
+
+```html
+<div title="United States Power Squadrons">
+  <div>
+    <img alt="U" src="https://flags.aws.usps.org/signals/PNG/short/u.png">
+    <img alt="n" src="https://flags.aws.usps.org/signals/PNG/short/n.png">
+    <img alt="i" src="https://flags.aws.usps.org/signals/PNG/short/i.png">
+    <img alt="t" src="https://flags.aws.usps.org/signals/PNG/short/t.png">
+    <img alt="e" src="https://flags.aws.usps.org/signals/PNG/short/e.png">
+    <img alt="d" src="https://flags.aws.usps.org/signals/PNG/short/d.png">
+  </div>
+  <div>
+    <img alt="S" src="https://flags.aws.usps.org/signals/PNG/short/s.png">
+    <img alt="t" src="https://flags.aws.usps.org/signals/PNG/short/t.png">
+    <img alt="a" src="https://flags.aws.usps.org/signals/PNG/short/a.png">
+    <img alt="t" src="https://flags.aws.usps.org/signals/PNG/short/t.png">
+    <img alt="e" src="https://flags.aws.usps.org/signals/PNG/short/e.png">
+    <img alt="s" src="https://flags.aws.usps.org/signals/PNG/short/s.png">
+  </div>
+  <div>
+    <img alt="P" src="https://flags.aws.usps.org/signals/PNG/short/p.png">
+    <img alt="o" src="https://flags.aws.usps.org/signals/PNG/short/o.png">
+    <img alt="w" src="https://flags.aws.usps.org/signals/PNG/short/w.png">
+    <img alt="e" src="https://flags.aws.usps.org/signals/PNG/short/e.png">
+    <img alt="r" src="https://flags.aws.usps.org/signals/PNG/short/r.png">
+  </div>
+  <div>
+    <img alt="S" src="https://flags.aws.usps.org/signals/PNG/short/s.png">
+    <img alt="q" src="https://flags.aws.usps.org/signals/PNG/short/q.png">
+    <img alt="u" src="https://flags.aws.usps.org/signals/PNG/short/u.png">
+    <img alt="a" src="https://flags.aws.usps.org/signals/PNG/short/a.png">
+    <img alt="d" src="https://flags.aws.usps.org/signals/PNG/short/d.png">
+    <img alt="r" src="https://flags.aws.usps.org/signals/PNG/short/r.png">
+    <img alt="o" src="https://flags.aws.usps.org/signals/PNG/short/o.png">
+    <img alt="n" src="https://flags.aws.usps.org/signals/PNG/short/n.png">
+    <img alt="s" src="https://flags.aws.usps.org/signals/PNG/short/s.png">
+  </div>
+</div>
+```

package/Flags/Signal.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+interface Props {
+  alt?: string;
+  className?: string;
+  flag: string;
+  format?: "svg" | "png" | undefined;
+}
+
+const SignalFlag = (props: Props) => {
+  const { alt, className, flag, format } = props;
+
+  const special = ["\uE000", "\uE001",   "\uE002",   "\uE003"];
+  const codes =   ["code",   "repeat_1", "repeat_2", "repeat_3"];
+
+  /* eslint-disable stylistic/array-element-newline */
+  const letters = [
+    "alpha",
+    "alfa", "bravo", "charlie", "delta", "echo", "foxtrot", "golf",
+    "hotel", "india", "juliet", "kilo", "lima", "mike", "november",
+    "oscar", "papa", "quebec", "romeo", "sierra", "tango", "uniform",
+    "victor", "whiskey", "xray", "yankee", "zulu",
+  ];
+  const numbers = [
+    "one", "two", "three", "four", "five",
+    "six", "seven", "eight", "nine", "zero",
+  ];
+  /* eslint-enable stylistic/array-element-newline */
+
+  const dir = () => {
+    if (special.includes(flag) || codes.includes(flag)) return "codes";
+    if (letters.includes(flag)) return "letters";
+    if (numbers.includes(flag)) return "numbers";
+
+    return "short";
+  };
+
+  const flagValue = () => {
+    if (special.includes(flag)) {
+      const index = special.indexOf(flag);
+      return codes[index];
+    } else {
+      return flag.toLowerCase();
+    }
+  };
+
+  const formatDir = format ? format.toUpperCase() : "PNG";
+  const extension = format ? format.toLowerCase() : "png";
+
+  const signalBaseUrl = "https://flags.aws.usps.org/signals";
+
+  const combinedUrl = `${signalBaseUrl}/${formatDir}/${dir()}/${flagValue()}.${extension}`;
+
+  return (
+    <img className={className}  src={combinedUrl} alt={alt || flag} />
+  );
+};
+
+export default SignalFlag;

package/Flags/Signals.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import { createUseStyles } from "react-jss";
+import classNames from "classnames";
+import SignalFlag from "./Signal";
+
+type Orientation = "center" | "centerVertical" | "vertical";
+
+type Size =
+  | "double"
+  | "triple"
+  | "quadruple"
+  | "half"
+  | "tall"
+  | "vertical"
+  | "center";
+
+interface Props {
+  className?: string;
+  format?: "svg" | "png";
+  orientation?: Orientation;
+  size?: Size;
+  text: string;
+  title?: string;
+}
+
+const useStyles = createUseStyles({
+  center: { alignItems: "center" },
+  centerVertical: {
+    "& div": { flexDirection: "column" },
+    alignItems: "center",
+    flexDirection: "column",
+  },
+  double: {
+    "& div": { gap: "7px" },
+    "& img": { width: "40px" },
+  },
+  half: {
+    "& div": { gap: "3px" },
+    "& img": { width: "10px" },
+  },
+  quadruple: {
+    "& div": { gap: "11px" },
+    "& img": { width: "80px" },
+  },
+  signals: {
+    "& img": { width: "20px" },
+    display: "flex",
+    gap: "20px",
+    justifyContent: "center",
+    width: "100%",
+  },
+  tall: {
+    "& div": { gap: "10px" },
+    "& img": {
+      height: "50px",
+      width: "auto",
+    },
+  },
+  triple: {
+    "& div": { gap: "9px" },
+    "& img": { width: "60px" },
+  },
+  vertical: {
+    "& div": { flexDirection: "column" },
+    flexDirection: "column",
+  },
+  word: {
+    display: "flex",
+    gap: "5px",
+  },
+});
+
+const SignalFlags = (props: Props) => {
+  const { className, format, orientation, size, text, title } = props;
+  const classes = useStyles();
+
+  const regexp = /[a-z0-9\s\uE000\uE001\uE002\uE003]/ig;
+  const matches = text.match(regexp);
+
+  if (!matches) return "";
+
+  const words: string[][] = [[]];
+
+  const specialClassNames = () => {
+    const selectedOrientation = orientation ? classes[orientation] : "";
+    const selectedSize = size ? classes[size] : "";
+    return [selectedOrientation, selectedSize];
+  };
+
+  // Build words array by splitting on spaces
+  matches.forEach(match => match === " " ? words.push([]) : words.at(-1)!.push(match));
+
+  return (
+    <div className={classNames(className, classes.signals, ...specialClassNames())} title={title || text}>
+      {words.map((word, wordIndex) => (
+        <div className={classes.word} key={wordIndex}>{word.map((flag, flagIndex) =>
+          <SignalFlag flag={flag} format={format} key={flagIndex} />
+        )}</div>))}
+    </div>
+  );
+};
+
+export default SignalFlags;

package/Flags/index.ts

@@ -0,0 +1,9 @@
+import Officer from "./Officer";
+import Signal from "./Signal";
+import Signals from "./Signals";
+
+export { default as OfficerFlag } from "./Officer";
+export { default as SignalFlag } from "./Signal";
+export { default as SignalFlags } from "./Signals";
+
+export default { Officer, Signal, Signals };

package/index.tsx

@@ -1,30 +1,24 @@
 export { default as FontAwesomeIcon } from "./FontAwesomeIcon";
-export { default as railsFetchJson, getCsrfTokenHeader } from "./railsFetchJson";
-export { default as Striped, StripedTable, StripedHead, StripedBody } from "./StripedTable";
+
+export { default as railsFetchJson } from "./railsFetchJson";
+export * from "./railsFetchJson";
+
+export { default as Striped } from "./StripedTable";
+export * from "./StripedTable";
+
+export { default as Flags } from "./Flags";
+export * from "./Flags";
+
 export { default as ActionButton } from "./ActionButton";
 export { default as IconButton } from "./IconButton";
 export { default as SelectionIconButton } from "./SelectionIconButton";
-export { Toasts, createDismissToast, Toast_Status } from "./Toasts";
+export * from "./Toasts";
 export { default as Colors } from "./Colors";
 export { default as Styles } from "./Styles";
 
-export type {
-  AppStateWithToasts,
-  DispatchFunc,
-  DispatchHandler,
-  OnClickHandler,
-  OnClickOrKeyboardHandler,
-  OnInputChangeHandler,
-  RailsResponse,
-} from "./types";
-export type { ButtonColorName } from "./Colors";
-export type { FontAwesomeProps } from "./FontAwesomeIcon";
-export type {
-  ActionButtonProps,
-  ActionButtonHrefProps,
-  ActionButtonMethodProps,
-  ActionButtonOnClickProps,
-  CoreActionButtonProps,
-} from "./ActionButton";
-export type { IconButtonProps, IconButtonHrefProps, IconButtonOnClickProps } from "./IconButton";
-export type { Toast, ToastAppAction, ToastProps } from "./Toasts";
+export type * from "./types";
+export type * from "./Colors";
+export type * from "./FontAwesomeIcon";
+export type * from "./ActionButton";
+export type * from "./IconButton";
+export type * from "./Toasts";

package/package.json

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

package/tsconfig.json

@@ -18,7 +18,7 @@
     "noUnusedParameters": true,
     "strict": true,
     "skipLibCheck": true,
-    "target": "ES2019",
+    "target": "ES2022",
   },
   "exclude": [
     "app/javascript/mount.tsx",