@unitedstatespowersquadrons/components 1.0.0

package/StripedTable/TableStyles.ts

@@ -0,0 +1,46 @@
+import Colors from "../Colors";
+
+const thead = {
+  "& > tr" : {
+    "& > td, & > th": {
+      backgroundColor: Colors.shades._b,
+      height: "2em",
+    },
+  },
+};
+
+const tbody = {
+  "& > tr" : {
+    "&:nth-child(even)": {
+      "& > td, & > th": {
+        backgroundColor: Colors.shades._e,
+        height: "1.75em",
+      },
+    },
+    "&:nth-child(odd)": {
+      "& > td, & > th": {
+        backgroundColor: Colors.shades._d,
+        height: "1.75em",
+      },
+    },
+  },
+};
+
+const tfoot = {
+  "& > tr" : {
+    "& > td": {
+      backgroundColor: Colors.shades._c,
+      height: "1.75em",
+    },
+  },
+};
+
+const table = {
+  "& > tbody": tbody,
+  "& > tfoot": tfoot,
+  "& > thead": thead,
+};
+
+const TableStyles = { table, tbody, tfoot, thead };
+
+export default TableStyles;

package/StripedTable/index.tsx

@@ -0,0 +1,9 @@
+import Table from "./Table";
+import Head from "./Head";
+import Body from "./Body";
+
+export { default as StripedTable } from "./Table";
+export { default as StripedHead } from "./Head";
+export { default as StripedBody } from "./Body";
+
+export default { Body, Head, Table };

package/Styles.tsx

@@ -0,0 +1,67 @@
+import Colors, { ButtonColorName } from "./Colors";
+
+const colorStyles = {
+  black: { color: Colors.black },
+  blue: { color: Colors.blue },
+  darkGray: { color: Colors.darkGray },
+  gray: { color: Colors.gray },
+  green: { color: Colors.green },
+  orange: { color: Colors.orange },
+  purple: { color: Colors.purple },
+  red: { color: Colors.red },
+};
+
+const hoverColorStyles = {
+  black: { color: Colors.darkGray },
+  blue: { color: Colors.hover.blue },
+  darkGray: { color: Colors.black },
+  gray: { color: Colors.darkGray },
+  green: { color: Colors.hover.green },
+  orange: { color: Colors.hover.orange },
+  purple: { color: Colors.hover.purple },
+  red: { color: Colors.hover.red },
+};
+
+const colorizeButton = (color: ButtonColorName) => {
+  return({
+    "&:hover": {
+      backgroundColor: `${Colors.button.background.hover[color]} !important`,
+      fontWeight: "normal",
+    },
+    backgroundColor: `${Colors.button.background.normal[color]} !important`,
+    color: `${Colors.black} !important`,
+  });
+};
+
+const Styles = {
+  bigText: { fontSize: "1.5em" },
+  button: {
+    "&:hover": {
+      backgroundColor: Colors.button.background.hover.gray,
+      fontWeight: "normal",
+    },
+    alignItems: "center",
+    backgroundColor: Colors.button.background.normal.gray,
+    border: `thin solid ${Colors.button.border}`,
+    borderRadius: "0.25em",
+    boxShadow: `2px 2px 2px ${Colors.button.shadow}`,
+    cursor: "pointer",
+    display: "flex !important",
+    margin: "0.5em auto 0 auto",
+    padding: "0 0.7em 0 0.3em",
+    textDecoration: "none",
+    width: "fit-content",
+  },
+  flexRow: {
+    alignItems: "center",
+    display: "flex",
+    flexDirection: "row",
+    gap: "0.5em",
+    justifyContent: "center",
+  },
+  ...colorStyles,
+  colorizeButton,
+  hover: { ...hoverColorStyles },
+};
+
+export default Styles;

package/Toasts/Readme.md

@@ -0,0 +1,110 @@
+# Toasts Component
+
+The shared toasts component allows for rendering consistent toasts across any
+root components, while supporting app state and reducer dispatching.
+
+```tsx
+// NewComponent.tsx
+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} />
+  );
+};
+
+export default NewComponent;
+```
+
+```tsx
+// reducer.tsx
+import { Toast, ToastAppAction, ToastProps } from "../shared";
+import { addToast, handleToasts } from "./reducerHelpers";
+
+export type AppAction =
+  // ...
+  | ToastAppAction
+  | { type: "saveComplete"; toasts: Toast[] }
+  // ...
+  ;
+
+function reducer(draft: Draft<AppState>, action: AppAction) {
+  // ..
+  const toast = "toastId" in action ? draft.toasts.find(t => t.id === action.toastId) : null;
+  // ...
+  case "addToast":
+    addToast(draft, action);
+
+    break;
+    
+  case "dismissToast":
+    if (toast) toast.dismissed = true;
+
+    break;
+    
+  case "removeToast":
+    // draft.toasts.splice was removing toasts too quickly
+    const beforeToasts: ToastProps[] = [];
+    const afterToasts: ToastProps[] = [];
+    let beforeToast = true;
+    draft.toasts.forEach(t => {
+      if (t === toast) {
+        beforeToast = false;
+      } else if (beforeToast) {
+        beforeToasts.push(t);
+      } else {
+        afterToasts.push(t);
+      }
+
+      draft.toasts = beforeToasts.concat(afterToasts);
+    });
+
+    break;
+
+  case "saveComplete":
+    handleToasts(draft, action.toasts);
+
+    break;
+  // ...
+};
+```
+
+```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/Toasts/Toast.tsx

@@ -0,0 +1,162 @@
+import React from "react";
+import classNames from "classnames";
+import { createUseStyles } from "react-jss";
+import FontAwesomeIcon from "../FontAwesomeIcon";
+import { DismissFunc, ToastProps, ToastRemoveAppAction, Toast_Status } from "./types";
+import { DispatchFunc } from "../types";
+import createDismissToast from "./createDismissToast";
+
+interface BaseProps {
+  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: {
+    borderColor: "#CC0000",
+    color: "#CC0000",
+  },
+  italic: { fontStyle: "italic" },
+  notice: {
+    borderColor: "#000099",
+    color: "#000099",
+  },
+  success: {
+    borderColor: "#009900",
+    color: "#009900",
+  },
+  toast: {
+    animation: "fadeIn 1s",
+    backgroundColor: "#EEEEEE",
+    border: "thin solid white",
+    borderRadius: "0.5em",
+    boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.4), 0px 0px 1px rgba(0, 0, 0, 0.3)",
+    padding: "1em",
+    position: "relative",
+    transition: "opacity 2000ms linear",
+    width: "30em",
+  },
+  toastBody: {
+    "& > div": { marginTop: "0.75em" },
+    fontSize: "0.9em",
+    lineHeight: "1.3em",
+    marginLeft: "2.75em",
+    textAlign: "left",
+  },
+  toastDismiss: {
+    color: "#333333",
+    cursor: "pointer",
+    fontSize: "1.5em",
+    position: "absolute",
+    right: "10px",
+    top: "10px",
+  },
+  toastDismissIcon: {
+    fontSize: "1em",
+    width: "24px",
+  },
+  toastTitle: {
+    "& > span": {
+      fontSize: "1em",
+      fontWeight: "bold",
+    },
+    marginBottom: "1em",
+    textAlign: "left",
+  },
+  visible: { opacity: "1" },
+});
+
+const Toast = (props: Props) => {
+  const classes = useStyles();
+
+  const { 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);
+
+  if (timeout > 0) setTimeout(handleDismiss, 2000 + timeout);
+
+  const renderBodyLines = (bodyLines: string[]) => {
+    return(bodyLines.map((line, index) => {
+      if (/^https?:\/\//.exec(line)) {
+        return(
+          <div key={`line-${index}`}>
+            <a href={line}>{line}</a>
+          </div>
+        );
+      } else {
+        return(<div key={`line-${index}`}>{line}</div>);
+      }
+    }));
+  };
+
+  const renderBody = () => {
+    const lines = body.split("\n");
+    if (lines[0]?.match(/^{\w+}$/)) {
+      const [tag, ...rest] = lines;
+      const tagText = tag.substring(1, tag.length - 1); // e.g. {Development}
+
+      return (
+        <>
+          <div className={classes.italic}>{tagText}</div>
+          {renderBodyLines(rest)}
+        </>
+      );
+    } else {
+      return renderBodyLines(lines);
+    }
+  };
+
+  const statusDetails = (): [string, string] => {
+    switch (status) {
+    case Toast_Status.SUCCESS: return [classes.success, "check"];
+    case Toast_Status.NOTICE: return [classes.notice, "circle-info"];
+    case Toast_Status.ERROR: return [classes.error, "ban"];
+    default: return status satisfies never;
+    }
+  };
+
+  const [statusClassName, icon] = statusDetails();
+
+  const opacityClass = dismissed ? classes.dismissed : classes.visible;
+
+  return (
+    <div className={classNames(classes.toast, statusClassName, opacityClass)} key={`toast-${id}`}>
+      <div className={classes.toastTitle}>
+        <FontAwesomeIcon icon={icon} mode="duotone" fa="fw" />
+        <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>
+    </div>
+  );
+};
+
+export default Toast;

package/Toasts/Toasts.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import classNames from "classnames";
+import { createUseStyles } from "react-jss";
+import Toast from "./Toast";
+import { ToastProps } from "./types";
+
+interface Props {
+  dismiss: (id: number) => void;
+  toasts?: ToastProps[];
+}
+
+const useStyles = createUseStyles({
+  toastsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "1.5em",
+    justifyContent: "space-between",
+    position: "fixed",
+    right: "1.25em",
+    top: "1.25em",
+    zIndex: 9999,
+  },
+});
+
+const Toasts = (props: Props) => {
+  const { dismiss, toasts } = props;
+  const classes = useStyles();
+
+  return (
+    <div className={classNames("toastsContainer", classes.toastsContainer)}>
+      {toasts?.map(toast => <Toast dismiss={dismiss} toast={toast} key={toast.id} />)}
+    </div>
+  );
+};
+
+export default Toasts;

package/Toasts/createDismissToast.ts

@@ -0,0 +1,16 @@
+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;

package/Toasts/index.tsx

@@ -0,0 +1,5 @@
+export { default as Toasts } from "./Toasts";
+export { default as createDismissToast } from "./createDismissToast";
+
+export { Toast_Status } from "./types";
+export type { Toast, ToastAppAction, ToastProps } from "./types";

package/Toasts/types.ts

@@ -0,0 +1,28 @@
+export interface ToastProps extends Toast {
+  dismissed?: boolean;
+  id: number;
+}
+
+export type ToastRemoveAppAction =
+  | { type: "dismissToast"; toastId: number }
+  | { type: "removeToast"; toastId: number };
+
+export type ToastAppAction =
+  | { type: "addToast" } & Toast
+  | ToastRemoveAppAction;
+
+export interface Toast {
+  status: Toast_Status;
+  title: string;
+  body: string;
+  timeout: number;
+  toastId?: number | undefined;
+}
+
+export enum Toast_Status {
+  SUCCESS = "SUCCESS",
+  NOTICE = "NOTICE",
+  ERROR = "ERROR",
+}
+
+export type DismissFunc = (id: number) => void;

package/eslint.config.mjs

@@ -0,0 +1,212 @@
+import globals from "globals";
+import eslint from "@eslint/js";
+import stylisticJs from "@stylistic/eslint-plugin";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  tseslint.configs.recommendedTypeChecked,
+  {
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    rules: {
+      "indent": ["error", 2],
+      "linebreak-style": ["error", "unix"],
+      "max-len": ["error", 120],
+      "no-case-declarations": "error",
+      "no-var": "error",
+      "prefer-const": "error",
+      "quotes": ["error", "double"],
+      "semi": ["error", "always"],
+      "sort-keys": ["error", "asc", { caseSensitive: true, minKeys: 2, natural: false }],
+      "arrow-parens": ["error", "as-needed"],
+      "comma-dangle": [
+        "error",
+        {
+          "arrays": "always-multiline",
+          "exports": "always-multiline",
+          "functions": "never",
+          "imports": "always-multiline",
+          "objects": "always-multiline"
+        }
+      ],
+      "constructor-super": "error",
+      "curly": ["error", "multi-line"],
+      "dot-notation": "off", // This is superseded by @typescript-eslint/dot-notation
+      "eqeqeq": ["error", "smart"],
+      "guard-for-in": "error",
+      "id-blacklist": "error",
+      "id-match": "error",
+      "max-classes-per-file": ["error", 1],
+      "max-len": [
+        "error",
+        {
+          "code": 120,
+        }
+      ],
+      "new-parens": "error",
+      "no-bitwise": "error",
+      "no-caller": "error",
+      "no-cond-assign": "error",
+      "no-console": "error",
+      "no-debugger": "error",
+      "no-eval": "error",
+      "no-fallthrough": "error",
+      "no-new-wrappers": "error",
+      "no-shadow": "off", // This is superseded by @typescript-eslint/no-shadow
+      "no-throw-literal": "error",
+      "no-trailing-spaces": "error",
+      "no-undef-init": "error",
+      "no-unsafe-finally": "error",
+      "no-unused-expressions": [
+        "error",
+        {
+          "allowShortCircuit": true
+        }
+      ],
+      "no-unused-labels": "error",
+      "no-var": "error",
+      "object-curly-spacing": ["error", "always"],
+      "object-shorthand": "error",
+      "one-var": ["error", "never"],
+      "prefer-const": "error",
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      "quote-props": ["error", "as-needed"],
+      "quotes": ["error", "double", { "allowTemplateLiterals": true, "avoidEscape": true }],
+      "radix": "error",
+      "sort-keys": "error",
+      "spaced-comment": "error",
+      "use-isnan": "error",
+
+      "@typescript-eslint/adjacent-overload-signatures": "error",
+      "@typescript-eslint/array-type": "error",
+      "@typescript-eslint/await-thenable": "error",
+      "@typescript-eslint/ban-ts-comment": "error",
+      "@typescript-eslint/dot-notation": "error",
+      "@typescript-eslint/explicit-member-accessibility": "error",
+      "@typescript-eslint/no-array-constructor": "error",
+      "@typescript-eslint/no-extra-non-null-assertion": "error",
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/no-for-in-array": "error",
+      "@typescript-eslint/no-implied-eval": "error",
+      "@typescript-eslint/no-misused-new": "error",
+      "@typescript-eslint/no-misused-promises": "error",
+      "@typescript-eslint/no-namespace": "error",
+      "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
+      "@typescript-eslint/no-shadow": [
+        "error",
+        {
+          "hoist": "all"
+        }
+      ],
+      "@typescript-eslint/no-this-alias": "error",
+      "@typescript-eslint/no-unnecessary-type-assertion": "error",
+      "@typescript-eslint/no-unsafe-call": "error",
+      "@typescript-eslint/no-unsafe-return": "error",
+      "@typescript-eslint/no-var-requires": "error",
+      "@typescript-eslint/prefer-as-const": "error",
+      "@typescript-eslint/prefer-for-of": "error",
+      "@typescript-eslint/prefer-function-type": "error",
+      "@typescript-eslint/prefer-includes": "error",
+      "@typescript-eslint/prefer-namespace-keyword": "error",
+      "@typescript-eslint/prefer-regexp-exec": "error",
+      "@typescript-eslint/require-await": "error",
+      "@typescript-eslint/triple-slash-reference": "error",
+      "@typescript-eslint/unified-signatures": "error",
+      "@typescript-eslint/no-restricted-types": "error",
+      "@typescript-eslint/no-empty-object-type": "error",
+      "@typescript-eslint/no-wrapper-object-types": "error",
+
+      "stylistic/member-delimiter-style": [
+        "error",
+        {
+          "multiline": {
+            "delimiter": "semi",
+            "requireLast": true
+          },
+          "singleline": {
+            "delimiter": "semi",
+            "requireLast": false
+          }
+        }
+      ],
+      "stylistic/no-extra-semi": "error",
+      "stylistic/semi": ["error", "always"],
+      "stylistic/no-multiple-empty-lines": "error",
+
+      "react/display-name": "error",
+      "react/jsx-boolean-value": ["error", "always"],
+      "react/jsx-closing-bracket-location": "error",
+      "react/jsx-equals-spacing": ["error", "never"],
+      "react/jsx-key": ["error", { "checkFragmentShorthand": false }],
+      "react/jsx-no-comment-textnodes": "error",
+      "react/jsx-no-duplicate-props": "error",
+      "react/jsx-no-target-blank": "error",
+      "react/jsx-no-undef": "error",
+      "react/jsx-uses-react": "error",
+      "react/jsx-uses-vars": "error",
+      "react/jsx-wrap-multilines": "error",
+      "react/no-children-prop": "error",
+      "react/no-danger-with-children": "error",
+      "react/no-deprecated": "error",
+      "react/no-direct-mutation-state": "error",
+      "react/no-find-dom-node": "error",
+      "react/no-is-mounted": "error",
+      "react/no-render-return-value": "error",
+      "react/no-string-refs": ["error", { "noTemplateLiterals": true }],
+      "react/no-unescaped-entities": "error",
+      "react/no-unknown-property": "error",
+      "react/no-unsafe": 0,
+      "react/prop-types": "off", // Use typescript to validate types.
+      "react/react-in-jsx-scope": "error",
+      "react/require-render-return": "error",
+      "react/self-closing-comp": [
+        "error",
+        {
+          "component": true,
+          "html": true
+        }
+      ],
+
+      "react-hooks/exhaustive-deps": "error",
+      "react-hooks/rules-of-hooks": "error",
+    },
+    settings: {
+      react: {
+        createClass: "createReactClass",
+        pragma: "React",
+        version: "detect",
+      },
+    },
+  },
+  {
+    ignores: [
+      "tmp/*",
+      "coverage/*",
+      "public/*",
+      "vendor/*",
+      "app/assets/*",
+      "app/javascript/controllers/*",
+      "app/javascript/application.js",
+      "app/javascript/mount.tsx",
+      "eslint.config.mjs",
+    ],
+  },
+  {
+    plugins: {
+      "stylistic": stylisticJs,
+      "react": react,
+      "react-hooks": reactHooks,
+    },
+  },
+);