@unitedstatespowersquadrons/components 1.2.35 → 1.3.0-1

package/Badges/Badge.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { shields } from "./remotes";
+
+interface Props {
+  content: string;
+  label?: string;
+  color?: string;
+  logo?: string;
+  logoColor?: string;
+}
+
+const Badge = (props: Props) => {
+  const { content, label, color = "gray", logo, logoColor } = props;
+
+  const main = [label, content, color].filter(Boolean).join("-");
+  const params = new URLSearchParams();
+  if (logo) params.set("logo", logo);
+  if (logoColor) params.set("logoColor", logoColor);
+  const query = params.toString();
+  const src = `${shields}/badge/${main}${query ? `?${query}` : ""}`;
+
+  return <img src={src} />;
+};
+
+export default Badge;

package/Badges/Branch.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { github, shields } from "./remotes";
+import { badgeify } from "./helpers";
+
+interface Props {
+  branch: string;
+  primaryBranch?: "main" | "master";
+  repo?: string;
+}
+
+const BranchBadge = (props: Props) => {
+  const { branch, primaryBranch = "main", repo } = props;
+
+  const effectiveRepo = branch === primaryBranch ? undefined : repo;
+  const color = branch === primaryBranch ? "blue" : "orange";
+  const name = badgeify(branch)!;
+
+  const img = (
+    <img src={`${shields}/badge/${name}-${color}?logo=git&logoColor=white`} />
+  );
+  if (!effectiveRepo) return img;
+
+  return(
+    <a
+      href={`${github}/${effectiveRepo}/compare/${branch}?expand=1`}
+      rel="noreferrer" target="_blank"
+    >
+      {img}
+    </a>
+  );
+};
+
+export default BranchBadge;

package/Badges/Commit.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { github, shields } from "./remotes";
+
+interface Props {
+  commit: string;
+  repo?: string;
+}
+
+const CommitBadge = (props: Props) => {
+  const { commit, repo } = props;
+
+  const img = (
+    <img src={`${shields}/badge/sha-${commit.slice(0, 12)}-purple`} />
+  );
+  if (!repo) return img;
+
+  return(
+    <a
+      href={`${github}/${repo}/commit/${commit}`}
+      rel="noreferrer" target="_blank"
+    >
+      {img}
+    </a>
+  );
+};
+
+export default CommitBadge;

package/Badges/Date.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { shields } from "./remotes";
+
+interface Props {
+  timestamp: number;
+  label?: string;
+  logo?: string;
+}
+
+const DateBadge = (props: Props) => {
+  const { timestamp, label, logo } = props;
+
+  const now = Math.floor(Date.now() / 1000);
+  const diff = timestamp - now;
+
+  const color = () => {
+    // Age
+    if      (diff <= -60 * 60 * 24 * 14) return "63a2c7";
+    else if (diff <= -60 * 60 * 24) return "blue";
+    else if (diff <= -60 * 60) return "green";
+    else if (diff <= -60) return "yellowgreen";
+
+    // Expiration Time
+    else if (diff <= 60) return "orange";
+    else if (diff <= 60 * 10) return "yellowgreen";
+    else if (diff <= 60 * 60) return "green";
+    else return "brightgreen";
+  };
+
+  const params = new URLSearchParams();
+  params.set("color", color());
+  if (label) params.set("label", label);
+  if (logo) params.set("logo", logo);
+
+  return <img src={`${shields}/date/${timestamp}?${params.toString()}`} />;
+};
+
+export default DateBadge;

package/Badges/Dependency.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TagBadge from "./Tag";
+
+interface Props {
+  value: string;
+  label: string;
+  logo: string;
+}
+
+const DependencyBadge = (props: Props) => {
+  const { value, label, logo } = props;
+
+  return <TagBadge label={label} logo={logo} version={value} />;
+};
+
+export default DependencyBadge;

package/Badges/Gem.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { shields } from "./remotes";
+
+interface Props {
+  gem: string;
+  includePrereleases?: boolean;
+}
+
+const GemBadge = (props: Props) => {
+  const { gem, includePrereleases } = props;
+
+  const pre = includePrereleases ? "&include_prereleases" : "";
+
+  return(
+    <a href={`https://rubygems.org/gems/${gem}`} rel="noreferrer" target="_blank">
+      <img src={`${shields}/gem/v/${gem}?logo=rubygems&logoColor=white${pre}`} />
+    </a>
+  );
+};
+
+export default GemBadge;

package/Badges/Npm.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { shields } from "./remotes";
+
+interface Props {
+  npm: string;
+  includePrereleases?: boolean;
+}
+
+const NpmBadge = (props: Props) => {
+  const { npm, includePrereleases } = props;
+
+  const pre = includePrereleases ? "&include_prereleases" : "";
+  const pkg = `@unitedstatespowersquadrons/${npm}`;
+
+  return(
+    <a href={`https://www.npmjs.com/package/${pkg}`} rel="noreferrer" target="_blank">
+      <img src={`${shields}/npm/v/${pkg}?logo=typescript&logoColor=white${pre}`} />
+    </a>
+  );
+};
+
+export default NpmBadge;

package/Badges/PhpLibrary.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Badge from "./Badge";
+import { github } from "./remotes";
+import { versionColor } from "./helpers";
+
+interface Props {
+  php: string;
+  version: string;
+}
+
+const PhpLibraryBadge = (props: Props) => {
+  const { php, version } = props;
+
+  return(
+    <a href={`${github}/${php}`} rel="noreferrer" target="_blank">
+      <Badge
+        color={versionColor(version)} content={version}
+        label="library" logo="php" logoColor="white"
+      />
+    </a>
+  );
+};
+
+export default PhpLibraryBadge;

package/Badges/Reachable.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import Badge from "./Badge";
+import { ReachableStatus } from "./types";
+
+interface Props {
+  host: string;
+  reachable?: ReachableStatus;
+}
+
+const ReachableBadge = (props: Props) => {
+  const { host, reachable } = props;
+
+  const status = reachable?.status;
+  const reason = reachable?.reason || "Error";
+
+  const badge = status
+    ? <Badge color="brightgreen" content="Reachable" label={host} />
+    : <Badge color="red" content={reason} label={host} />;
+
+  return(
+    <a
+      href={`https://${host}.aws.usps.org`}
+      rel="noreferrer" target="_blank"
+    >
+      {badge}
+    </a>
+  );
+};
+
+export default ReachableBadge;

package/Badges/Repo.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { github, shields } from "./remotes";
+
+interface Props {
+  repo: string;
+}
+
+const RepoBadge = (props: Props) => {
+  const { repo } = props;
+
+  return(
+    <a href={`${github}/${repo}`} rel="noreferrer" target="_blank">
+      <img src={`${shields}/badge/repo-gray?logo=github`} />
+    </a>
+  );
+};
+
+export default RepoBadge;

package/Badges/Suite.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { github, shields } from "./remotes";
+import { badgeify } from "./helpers";
+import { CheckSuite } from "./types";
+
+interface Props {
+  suite?: CheckSuite;
+  repo?: string;
+}
+
+const SuiteBadge = (props: Props) => {
+  const { suite, repo } = props;
+
+  if (!suite || !suite.status) return null;
+
+  const suiteBadgeColor = () => {
+    if (suite.skip_ci) return "lightgray";
+
+    switch (suite.status) {
+    case "queued":
+    case "in_progress":
+    case "requested":
+    case "waiting":
+    case "pending":
+      return "yellow";
+    case "completed":
+      switch (suite.conclusion) {
+      case "success": return "brightgreen";
+      case "failure":
+      case "timed_out":
+      case "action_required": return "red";
+      case "cancelled": return "orange";
+      default: return "lightgray";
+      }
+    default:
+      return "lightgray";
+    }
+  };
+
+  const titleize = (text: string) =>
+    text.replace(/(^|\s)\S/g, t => t.toUpperCase());
+
+  const branch = badgeify(suite.head_branch);
+  const description = suite.skip_ci
+    ? "Skipped"
+    : suite.status === "completed"
+      ? badgeify(titleize(suite.conclusion || ""))
+      : badgeify(titleize(suite.status));
+  const color = suiteBadgeColor();
+
+  const img = (
+    <img
+      src={
+        `${shields}/badge/`
+        + `${branch}-${description || "Unknown"}-${color}`
+        + "?logo=github"
+      }
+    />
+  );
+  if (!repo || suite.conclusion === "success") return img;
+
+  return(
+    <a
+      href={`${github}/${repo}/actions/workflows/main.yml`}
+      rel="noreferrer" target="_blank"
+    >
+      {img}
+    </a>
+  );
+};
+
+export default SuiteBadge;

package/Badges/Tag.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Badge from "./Badge";
+import { badgeify, versionColor } from "./helpers";
+
+interface Props {
+  version: string;
+  label?: string;
+  logo?: string;
+}
+
+const TagBadge = (props: Props) => {
+  const { version, label, logo } = props;
+
+  const badgeLabel = label ? badgeify(label) : undefined;
+
+  return(
+    <Badge
+      content={version} {...badgeLabel ? { label: badgeLabel } : {}}
+      color={versionColor(version)} {...logo ? { logo } : {}}
+    />
+  );
+};
+
+export default TagBadge;

package/Badges/helpers.ts

@@ -0,0 +1,5 @@
+export const badgeify = (text?: string) =>
+  text?.replaceAll("-", "--")?.replaceAll("_", "__")?.replaceAll(" ", "_");
+
+export const versionColor = (version: string) =>
+  version.slice(0, 2) === "v0" ? "orange" : "blue";

package/Badges/index.ts

@@ -0,0 +1,40 @@
+import Badge from "./Badge";
+import Branch from "./Branch";
+import Commit from "./Commit";
+import Date from "./Date";
+import Dependency from "./Dependency";
+import Gem from "./Gem";
+import Npm from "./Npm";
+import PhpLibrary from "./PhpLibrary";
+import Reachable from "./Reachable";
+import Repo from "./Repo";
+import Suite from "./Suite";
+import Tag from "./Tag";
+
+export { default as Badge } from "./Badge";
+export { default as BranchBadge } from "./Branch";
+export { default as CommitBadge } from "./Commit";
+export { default as DateBadge } from "./Date";
+export { default as DependencyBadge } from "./Dependency";
+export { default as GemBadge } from "./Gem";
+export { default as NpmBadge } from "./Npm";
+export { default as PhpLibraryBadge } from "./PhpLibrary";
+export { default as ReachableBadge } from "./Reachable";
+export { default as RepoBadge } from "./Repo";
+export { default as SuiteBadge } from "./Suite";
+export { default as TagBadge } from "./Tag";
+
+export default {
+  Badge,
+  Branch,
+  Commit,
+  Date,
+  Dependency,
+  Gem,
+  Npm,
+  PhpLibrary,
+  Reachable,
+  Repo,
+  Suite,
+  Tag,
+};

package/Badges/remotes.ts

@@ -0,0 +1,2 @@
+export const shields = "https://img.shields.io";
+export const github = "https://github.com/unitedstatespowersquadrons";

package/Badges/types.ts

@@ -0,0 +1,13 @@
+export interface CheckSuite {
+  head_branch: string;
+  head_sha?: string;
+  status: string;
+  conclusion?: string;
+  updated_at?: string;
+  skip_ci: boolean;
+}
+
+export interface ReachableStatus {
+  status: boolean;
+  reason?: string;
+}

package/Toasts/toastHelpers.ts

@@ -43,22 +43,7 @@ export function addToast<T extends AppStateWithToasts>(draft: Draft<T>, toastOpt
 }
 
 export function removeToast<T extends AppStateWithToasts>(draft: Draft<T>, toast: ToastProps) {
-  const beforeToasts: ToastProps[] = [];
-  const afterToasts: ToastProps[] = [];
-  let beforeToast = true;
-
-  // draft.toasts.splice was removing toasts too quickly
-  draft.toasts.forEach(t => {
-    if (t === toast) {
-      beforeToast = false;
-    } else if (beforeToast) {
-      beforeToasts.push(t);
-    } else {
-      afterToasts.push(t);
-    }
-
-    draft.toasts = beforeToasts.concat(afterToasts);
-  });
+  draft.toasts = draft.toasts.filter(t => t !== toast);
 }
 
 export function removeToastById<T extends AppStateWithToasts>(draft: Draft<T>, toastId: number) {

package/package.json

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