@unitedstatespowersquadrons/components 1.4.8 → 1.4.10

package/ActionButton.tsx

@@ -14,6 +14,10 @@ const useStyles = createUseStyles({
   button: { ...Styles.button },
   darkGrayColored: { ...Styles.colorizeButton("darkGray") },
   darkGrayGray: { ...Styles.darkGray },
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: "none",
+  },
   grayColored: { ...Styles.colorizeButton("gray") },
   grayGray: { ...Styles.gray },
   greenColored: { ...Styles.colorizeButton("green") },
@@ -54,6 +58,7 @@ const useStyles = createUseStyles({
 interface CoreActionButtonBaseProps extends FontAwesomeProps {
   className?: string | undefined;
   color: ButtonColorName;
+  disabled?: boolean | undefined;
   grayMode?: boolean | undefined;
   id?: string;
   rightIcon?: boolean;
@@ -99,7 +104,22 @@ export type ActionButtonProps =
 
 const ActionButton = (props: ActionButtonProps) => {
   const {
-    className, color, fa, fontSize, grayMode, icon, id, margin, mode, rightIcon, size, style, subtext, text, title,
+    className,
+    color,
+    disabled,
+    fa,
+    fontSize,
+    grayMode,
+    icon,
+    id,
+    margin,
+    mode,
+    rightIcon,
+    size,
+    style,
+    subtext,
+    text,
+    title,
   } = props;
   const classes = useStyles({
     ...(fontSize !== undefined && { fontSize }),
@@ -107,6 +127,7 @@ const ActionButton = (props: ActionButtonProps) => {
   });
 
   const colorClassName = classes[`${color}${grayMode ? "Gray" : "Colored"}`];
+  const disabledClassName = disabled ? classes.disabled : "";
 
   const sizeClassName = () => {
     switch (size) {
@@ -144,7 +165,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         id={id}
@@ -160,7 +187,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         href={href}
@@ -181,6 +214,7 @@ const ActionButton = (props: ActionButtonProps) => {
       classes.sizing,
       rightIcon ? classes.rightIcon : "",
       inline && classes.inline,
+      disabledClassName,
       className
     );
 
@@ -210,7 +244,13 @@ const ActionButton = (props: ActionButtonProps) => {
     return(
       <BaseActionButton
         className={classNames(
-          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+          classes.button,
+          colorClassName,
+          sizeClassName(),
+          classes.sizing,
+          inline && classes.inline,
+          disabledClassName,
+          className
         )}
         confirm={confirm}
         id={id}

package/Badges/Checks/Suite.tsx

@@ -13,9 +13,9 @@ const SuiteBadge = (props: Props) => {
 
   if (!suite || !suite.status) return null;
 
-  const { headBranch, conclusion, skipCi, status } = suite;
+  const { headBranch, conclusion, skipCi, status, workflowName } = suite;
 
-  const badge = <Check conclusion={conclusion} label={headBranch} skipCi={skipCi} status={status} />;
+  const badge = <Check conclusion={conclusion} label={workflowName || headBranch} skipCi={skipCi} status={status} />;
 
   if (!repo || conclusion === "success") return badge;
 

package/Badges/types.ts

@@ -27,6 +27,7 @@ export interface CheckSuite {
   skipCi: boolean;
   latestCheckRunsCount: number;
   checkRuns?: CheckRun[];
+  workflowName?: string;
 }
 
 interface Commit {

package/eslint.config.mjs

@@ -1,270 +1,22 @@
-import globals from "globals";
-import eslint from "@eslint/js";
-import stylisticJs from "@stylistic/eslint-plugin";
-import perfectionist from "eslint-plugin-perfectionist";
-import react from "eslint-plugin-react";
-import reactHooks from "eslint-plugin-react-hooks";
-import importPlugin from "eslint-plugin-import";
-import importNewlines from "eslint-plugin-import-newlines";
 import tseslint from "typescript-eslint";
+import { eslintConfig } from "@unitedstatespowersquadrons/eslint-config";
 
 export default tseslint.config(
-  eslint.configs.recommended,
-  tseslint.configs.recommendedTypeChecked,
   {
-    languageOptions: {
-      globals: globals.browser,
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
+    files: ["**/*.js", "**/*.ts", "**/*.tsx"],
+    extends: [eslintConfig],
   },
   {
     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 }],
-      "sort-imports": [
-        "error",
-        {
-          "ignoreCase": true,
-          "ignoreDeclarationSort": true,
-        }
-      ],
-      "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",
-      "perfectionist/sort-jsx-props": "error",
-      "stylistic/eol-last": "error",
-      "stylistic/array-element-newline": [
-        "error",
-        {
-          "ArrayExpression": "consistent",
-          "ArrayPattern": { "minItems": 5 },
-        }
-      ],
-      "stylistic/object-property-newline": [
-        "error",
-        {
-          // "ArrayExpression": "consistent",
-          "allowAllPropertiesOnSameLine": true,
-        }
-      ],
-
-      "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",
-
-      "import/order": [
-        "error",
-        {
-          "groups": [
-            "builtin",
-            "external", // "package"
-            "object",
-            "internal",
-            "index",    // "./"
-            "sibling",  // "./directory"
-            "parent",   // "../directory"
-            // Then the omitted imports: type, unknown
-          ],
-        }
-      ],
-
-      "import-newlines/enforce": [
-        "error",
-        {
-          "items": 5,
-          "max-len": 120,
-          "semi": false
-        }
-      ],
-    },
-    settings: {
-      react: {
-        createClass: "createReactClass",
-        pragma: "React",
-        version: "detect",
-      },
+      indent: ["error", 2],
     },
   },
   {
     ignores: [
-      "tmp/*",
-      "coverage/*",
-      "public/*",
-      "vendor/*",
-      "app/assets/*",
-      "app/javascript/controllers/*",
-      "app/javascript/application.js",
-      "app/javascript/mount.tsx",
-      "eslint.config.mjs",
       "vitest.config.ts",
       "vitest.setup.ts",
       "**/*.test.ts",
       "**/*.test.tsx",
     ],
   },
-  {
-    plugins: {
-      "stylistic": stylisticJs,
-      "perfectionist": perfectionist,
-      "react": react,
-      "react-hooks": reactHooks,
-      "import": importPlugin,
-      "import-newlines": importNewlines,
-    },
-  },
 );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.8",
+  "version": "1.4.10",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {
@@ -21,7 +21,6 @@
     "@rails/actioncable": "^8.0.200",
     "@types/rails__actioncable": "^6.1.11",
     "classnames": "^2.5.1",
-    "eslint-plugin-perfectionist": "^5.9.0",
     "immer": "^10.1.1",
     "javascript-time-ago": "^2.6.4",
     "react": "^19.1.0",
@@ -30,17 +29,13 @@
     "use-immer": "^0.11.0"
   },
   "devDependencies": {
-    "@stylistic/eslint-plugin": "^5.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "@unitedstatespowersquadrons/eslint-config": "^1.0.8",
     "eslint": "^9.30.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-import-newlines": "^1.4.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.36.0",