chore: update-all-packages (#631)

davidhu2000 · web-flow · commit 651ae8dea8c1 · 2025-04-14T19:59:29.000Z
update-all-packages
diff --git a/package.json b/package.json
@@ -63,33 +63,33 @@
     "@storybook/react-vite": "^8.6.12",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/react": "^19.1.2",
     "@types/react-click-outside": "^3.0.7",
     "@types/react-dom": "^19.1.2",
     "@typescript-eslint/eslint-plugin": "^8.30.0",
     "@typescript-eslint/parser": "^8.30.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.4",
     "coveralls": "^3.1.1",
-    "eslint": "^9.5.0",
+    "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-jest-dom": "^5.5.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-storybook": "^0.12.0",
     "eslint-plugin-testing-library": "^7.1.1",
     "eslint-plugin-unicorn": "^58.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-click-outside": "^3.0.1",
     "react-colorful": "^5.6.1",
     "react-dom": "^19.1.0",
     "react-ga4": "^2.1.0",
     "storybook": "^8.6.12",
     "storybook-dark-mode": "^4.0.2",
-    "ts-jest": "^29.1.5",
-    "typescript": "^5.5.2",
+    "ts-jest": "^29.3.2",
+    "typescript": "^5.8.3",
     "vite": "^6.2.6"
   },
   "peerDependencies": {
diff --git a/scripts/mod.rb b/scripts/mod.rb
@@ -41,7 +41,7 @@ def camelize(string)
    "  css = {},",
    "  #{props}",
    "  ...additionalprops",
-   "}: #{$1}): JSX.Element | null {"].join("\n")
+   "}: #{$1}): React.JSX.Element | null  {"].join("\n")
 end
 
 content.sub!(/public static defaultProps = .+;/, "")
@@ -67,7 +67,7 @@ def camelize(string)
 content.gsub!("css=", "style=")
 content.gsub!("{this.", "{")
 
-content.gsub!("public render(): JSX.Element | null {", "")
+content.gsub!("public render(): React.JSX.Element | null  {", "")
 content.gsub!(/}\n\s+}/, "}")
 
 content.gsub!("return loading ? (", "if (!loading) { return null; }\n\n return (")
diff --git a/src/BarLoader.tsx b/src/BarLoader.tsx
@@ -25,7 +25,7 @@ function BarLoader({
   height = 4,
   width = 100,
   ...additionalprops
-}: LoaderHeightWidthProps): JSX.Element | null {
+}: LoaderHeightWidthProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     position: "relative",
diff --git a/src/BeatLoader.tsx b/src/BeatLoader.tsx
@@ -19,7 +19,7 @@ function BeatLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     ...cssOverride,
diff --git a/src/BounceLoader.tsx b/src/BounceLoader.tsx
@@ -17,7 +17,7 @@ function BounceLoader({
   cssOverride = {},
   size = 60,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const style = (i: number): React.CSSProperties => {
     const animationTiming = i === 1 ? `${1 / speedMultiplier}s` : "0s";
     return {
diff --git a/src/CircleLoader.tsx b/src/CircleLoader.tsx
@@ -17,7 +17,7 @@ function CircleLoader({
   cssOverride = {},
   size = 50,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     position: "relative",
diff --git a/src/ClimbingBoxLoader.tsx b/src/ClimbingBoxLoader.tsx
@@ -27,7 +27,7 @@ function ClimbingBoxLoader({
   cssOverride = {},
   size = 15,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const container: React.CSSProperties = {
     display: "inherit",
     position: "relative",
diff --git a/src/ClipLoader.tsx b/src/ClipLoader.tsx
@@ -17,7 +17,7 @@ function ClipLoader({
   cssOverride = {},
   size = 35,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const style: React.CSSProperties = {
     background: "transparent !important",
     width: cssValue(size),
diff --git a/src/ClockLoader.tsx b/src/ClockLoader.tsx
@@ -13,7 +13,7 @@ function ClockLoader({
   cssOverride = {},
   size = 50,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
 
   const wrapper: React.CSSProperties = {
diff --git a/src/DotLoader.tsx b/src/DotLoader.tsx
@@ -6,7 +6,11 @@ import { createAnimation } from "./helpers/animation";
 
 const rotate = createAnimation("DotLoader", "100% {transform: rotate(360deg)}", "rotate");
 
-const bounce = createAnimation("DotLoader", "0%, 100% {transform: scale(0)} 50% {transform: scale(1.0)}", "bounce");
+const bounce = createAnimation(
+  "DotLoader",
+  "0%, 100% {transform: scale(0)} 50% {transform: scale(1.0)}",
+  "bounce"
+);
 
 function DotLoader({
   loading = true,
@@ -15,7 +19,7 @@ function DotLoader({
   cssOverride = {},
   size = 60,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     position: "relative",
diff --git a/src/FadeLoader.tsx b/src/FadeLoader.tsx
@@ -16,7 +16,7 @@ function FadeLoader({
   radius = 2,
   margin = 2,
   ...additionalprops
-}: LoaderHeightWidthRadiusProps): JSX.Element | null {
+}: LoaderHeightWidthRadiusProps): React.JSX.Element | null {
   const { value } = parseLengthAndUnit(margin);
   const radiusValue = value + 18;
   const quarter = radiusValue / 2 + radiusValue / 5.5;
diff --git a/src/GridLoader.tsx b/src/GridLoader.tsx
@@ -20,11 +20,12 @@ function GridLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const sizeWithUnit = parseLengthAndUnit(size);
   const marginWithUnit = parseLengthAndUnit(margin);
 
-  const width = parseFloat(sizeWithUnit.value.toString()) * 3 + parseFloat(marginWithUnit.value.toString()) * 6;
+  const width =
+    parseFloat(sizeWithUnit.value.toString()) * 3 + parseFloat(marginWithUnit.value.toString()) * 6;
 
   const wrapper: React.CSSProperties = {
     width: `${width}${sizeWithUnit.unit}`,
diff --git a/src/HashLoader.tsx b/src/HashLoader.tsx
@@ -12,7 +12,7 @@ function HashLoader({
   cssOverride = {},
   size = 50,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
 
   const wrapper: React.CSSProperties = {
diff --git a/src/MoonLoader.tsx b/src/MoonLoader.tsx
@@ -13,7 +13,7 @@ function MoonLoader({
   cssOverride = {},
   size = 60,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
   const moonSize = Math.round(value / 7);
 
diff --git a/src/PacmanLoader.tsx b/src/PacmanLoader.tsx
@@ -5,8 +5,16 @@ import { LoaderSizeMarginProps } from "./helpers/props";
 import { createAnimation } from "./helpers/animation";
 
 const pacman = [
-  createAnimation("PacmanLoader", "0% {transform: rotate(0deg)} 50% {transform: rotate(-44deg)}", "pacman-1"),
-  createAnimation("PacmanLoader", "0% {transform: rotate(0deg)} 50% {transform: rotate(44deg)}", "pacman-2"),
+  createAnimation(
+    "PacmanLoader",
+    "0% {transform: rotate(0deg)} 50% {transform: rotate(-44deg)}",
+    "pacman-1"
+  ),
+  createAnimation(
+    "PacmanLoader",
+    "0% {transform: rotate(0deg)} 50% {transform: rotate(44deg)}",
+    "pacman-2"
+  ),
 ];
 
 function PacmanLoader({
@@ -17,7 +25,7 @@ function PacmanLoader({
   size = 25,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
 
   const wrapper: React.CSSProperties = {
diff --git a/src/PropagateLoader.tsx b/src/PropagateLoader.tsx
@@ -63,7 +63,7 @@ function PropagateLoader({
   cssOverride = {},
   size = 15,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
 
   const wrapper: React.CSSProperties = {
diff --git a/src/PuffLoader.tsx b/src/PuffLoader.tsx
@@ -16,7 +16,7 @@ function PuffLoader({
   cssOverride = {},
   size = 60,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     position: "relative",
@@ -39,7 +39,8 @@ function PuffLoader({
       animation: `${puff[0]}, ${puff[1]}`,
       animationDuration: `${2 / speedMultiplier}s`,
       animationIterationCount: "infinite",
-      animationTimingFunction: "cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1)",
+      animationTimingFunction:
+        "cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.3, 0.61, 0.355, 1)",
       animationDelay: i === 1 ? "-1s" : "0s",
     };
   };
diff --git a/src/PulseLoader.tsx b/src/PulseLoader.tsx
@@ -18,7 +18,7 @@ function PulseLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     ...cssOverride,
diff --git a/src/RingLoader.tsx b/src/RingLoader.tsx
@@ -23,7 +23,7 @@ function RingLoader({
   cssOverride = {},
   size = 60,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(size);
 
   const wrapper: React.CSSProperties = {
diff --git a/src/RiseLoader.tsx b/src/RiseLoader.tsx
@@ -12,7 +12,7 @@ function RiseLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     ...cssOverride,
diff --git a/src/RotateLoader.tsx b/src/RotateLoader.tsx
@@ -18,7 +18,7 @@ function RotateLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const { value, unit } = parseLengthAndUnit(margin);
 
   const ball: React.CSSProperties = {
diff --git a/src/ScaleLoader.tsx b/src/ScaleLoader.tsx
@@ -21,7 +21,7 @@ function ScaleLoader({
   margin = 2,
   barCount = 5,
   ...additionalprops
-}: LoaderHeightWidthRadiusProps & { barCount: number }): JSX.Element | null {
+}: LoaderHeightWidthRadiusProps & { barCount: number }): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     ...cssOverride,
diff --git a/src/SkewLoader.tsx b/src/SkewLoader.tsx
@@ -17,7 +17,7 @@ function SkewLoader({
   cssOverride = {},
   size = 20,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const style: React.CSSProperties = {
     width: "0",
     height: "0",
diff --git a/src/SquareLoader.tsx b/src/SquareLoader.tsx
@@ -20,7 +20,7 @@ function SquareLoader({
   cssOverride = {},
   size = 50,
   ...additionalprops
-}: LoaderSizeProps): JSX.Element | null {
+}: LoaderSizeProps): React.JSX.Element | null {
   const style: React.CSSProperties = {
     backgroundColor: color,
     width: cssValue(size),
diff --git a/src/SyncLoader.tsx b/src/SyncLoader.tsx
@@ -20,7 +20,7 @@ function SyncLoader({
   size = 15,
   margin = 2,
   ...additionalprops
-}: LoaderSizeMarginProps): JSX.Element | null {
+}: LoaderSizeMarginProps): React.JSX.Element | null {
   const wrapper: React.CSSProperties = {
     display: "inherit",
     ...cssOverride,
diff --git a/yarn.lock b/yarn.lock
