@unitedstatespowersquadrons/components 1.0.0

package/index.tsx

@@ -0,0 +1,30 @@
+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 ActionButton } from "./ActionButton";
+export { default as IconButton } from "./IconButton";
+export { default as SelectionIconButton } from "./SelectionIconButton";
+export { Toasts, createDismissToast, Toast_Status } 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";

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@unitedstatespowersquadrons/components",
+  "version": "1.0.0",
+  "description": "USPS shared React components library",
+  "main": "index.tsx",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/unitedstatespowersquadrons/components.git"
+  },
+  "author": "Julian Fiander",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/unitedstatespowersquadrons/components/issues"
+  },
+  "homepage": "https://github.com/unitedstatespowersquadrons/components#readme",
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "react": "^19.1.0",
+    "react-jss": "^10.10.0",
+    "typescript": "^5.8.3"
+  },
+  "devDependencies": {
+    "@stylistic/eslint-plugin": "^5.1.0",
+    "@types/react": "^19.1.8",
+    "eslint": "^9.30.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "typescript-eslint": "^8.36.0"
+  }
+}

package/railsFetchJson.tsx

@@ -0,0 +1,37 @@
+const oldFetch = window.fetch;
+
+interface FetchJsonOptions extends RequestInit {
+  bodyJson?: object;
+}
+
+export const getCsrfTokenHeader = () => {
+  const token = document.querySelector("meta[name='csrf-token']");
+  return token ? token.getAttribute("content")! : "";
+};
+
+const railsFetchJson = <T = object>(url: RequestInfo, options?: FetchJsonOptions) => {
+  options ||= {};
+  const optionHeaders = options.headers;
+  delete(options.headers);
+  const baseheaders = {
+    ...optionHeaders,
+    Credentials: "same-origin",
+    "X-CSRF-Token": getCsrfTokenHeader(),
+    "X-Exams-Client": "React-2025",
+    "X-Requested-With": "XMLHttpRequest",
+  };
+
+  const jsonPost = options.method !== "GET" && options?.bodyJson;
+  const jsonHeaders = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+
+  const headers = new Headers(jsonPost ? { ...baseheaders, ...jsonHeaders } : { ...baseheaders });
+
+  if (jsonPost) options.body = JSON.stringify(options.bodyJson);
+
+  return oldFetch(url, { headers, ...options }).then(res => res.json() as Promise<T>);
+};
+
+export default railsFetchJson;

package/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "allowUnreachableCode": false,
+    "emitDecoratorMetadata": false,
+    "esModuleInterop": true,
+    "exactOptionalPropertyTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "module": "commonjs",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "target": "ES2019",
+  },
+  "exclude": [
+    "app/javascript/mount.tsx",
+    "node_modules",
+    "public",
+    "vendor",
+    "tmp"
+  ]
+}

package/types.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import { Toast, ToastProps } from "./Toasts";
+
+export interface AppStateWithToasts {
+  toasts: ToastProps[];
+  toastId?: number;
+}
+
+export type DispatchFunc<T> = (action: T) => void;
+export type DispatchHandler<T> = (action: T) => {
+  body?: string;
+  bodyJson?: object;
+  headers?: { [key: string]: string };
+  href?: string;
+  method?: string;
+};
+
+export type OnClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => void;
+export type OnInputChangeHandler = (event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => void;
+export type OnClickOrKeyboardHandler = (event: OnClickOrKeyboardEvent) => void;
+
+type OnClickOrKeyboardEvent =
+  | React.MouseEvent<HTMLButtonElement>
+  | React.KeyboardEvent<HTMLInputElement>;
+
+export interface HrefProps {
+  href: string;
+  newTab?: boolean | undefined;
+}
+
+type HttpMethod =
+  | "POST" | "post"
+  | "PUT" | "put "
+  | "PATCH" | "patch"
+  | "DELETE" | "delete";
+
+export interface MethodProps extends HrefProps {
+  confirm?: string | undefined;
+  method: HttpMethod;
+}
+
+export interface OnClickProps {
+  confirm?: string | undefined;
+  onClick: OnClickHandler;
+}
+
+export interface RailsResponse {
+  reload?: boolean;
+  status: "OK" | "ERROR";
+  toasts: Toast[];
+}