Fix build errors

synzen · synzen · commit 6351713c92b9 · 2025-12-20T17:25:56.000-05:00
diff --git a/services/backend-api/client/package-lock.json b/services/backend-api/client/package-lock.json
diff --git a/services/backend-api/client/package.json b/services/backend-api/client/package.json
@@ -28,10 +28,10 @@
     "@tanstack/react-table": "^8.9.3",
     "dayjs": "^1.11.11",
     "eslint-config-airbnb-typescript": "^18.0.0",
-    "framer-motion": "^5.5.6",
     "highlight.js": "^11.7.0",
     "i18next": "^21.6.12",
     "lodash": "^4.17.21",
+    "motion": "^12.23.26",
     "react": "^18.2.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
@@ -49,6 +49,12 @@
     "yup": "^1.4.0"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
+    "@storybook/addon-a11y": "^10.1.10",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-onboarding": "^10.1.10",
+    "@storybook/addon-vitest": "^10.1.10",
+    "@storybook/react-vite": "^10.1.10",
     "@tanstack/react-query-devtools": "^4.32.0",
     "@testing-library/dom": "^8.18.1",
     "@testing-library/jest-dom": "^5.16.5",
@@ -63,6 +69,8 @@
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "@vitest/browser-playwright": "^4.0.16",
+    "@vitest/coverage-v8": "^4.0.16",
     "cross-env": "^7.0.3",
     "eslint": "^8.2.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -71,24 +79,16 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^10.1.10",
     "eslint-plugin-unused-imports": "^3.2.0",
     "happy-dom": "^17.1.4",
     "msw": "^2.7.1",
+    "playwright": "^1.57.0",
     "prettier": "2.8.2",
+    "storybook": "^10.1.10",
     "typescript": "^5.4.5",
     "vite": "^7.3.0",
-    "vitest": "^4.0.16",
-    "storybook": "^10.1.10",
-    "@storybook/react-vite": "^10.1.10",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@storybook/addon-vitest": "^10.1.10",
-    "@storybook/addon-a11y": "^10.1.10",
-    "@storybook/addon-docs": "^10.1.10",
-    "@storybook/addon-onboarding": "^10.1.10",
-    "eslint-plugin-storybook": "^10.1.10",
-    "playwright": "^1.57.0",
-    "@vitest/browser-playwright": "^4.0.16",
-    "@vitest/coverage-v8": "^4.0.16"
+    "vitest": "^4.0.16"
   },
   "msw": {
     "workerDirectory": "public"
diff --git a/services/backend-api/client/src/components/AnimatedComponent/index.tsx b/services/backend-api/client/src/components/AnimatedComponent/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { AnimatePresence, AnimatePresenceProps } from "framer-motion";
+import { AnimatePresence, AnimatePresenceProps } from "motion/react";
 
 interface NewAnimatePresenceProps extends Omit<AnimatePresenceProps, "children"> {
   children: React.ReactNode;
diff --git a/services/backend-api/client/src/components/MessageBuilderTour/index.tsx b/services/backend-api/client/src/components/MessageBuilderTour/index.tsx
@@ -17,7 +17,7 @@ import {
   ModalFooter,
   ModalCloseButton,
 } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { FaArrowRight, FaArrowLeft, FaTimes } from "react-icons/fa";
 import { FaScrewdriverWrench } from "react-icons/fa6";
 import { useIsMessageBuilderMobile } from "../../hooks";
@@ -433,7 +433,10 @@ interface MessageBuilderTourProps {
   resetTrigger?: number;
 }
 
-export const MessageBuilderTour: React.FC<MessageBuilderTourProps> = ({ onComplete, resetTrigger }) => {
+export const MessageBuilderTour: React.FC<MessageBuilderTourProps> = ({
+  onComplete,
+  resetTrigger,
+}) => {
   const [tourState, setTourState] = useState<TourState | null>(null);
   const [isActive, setIsActive] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
diff --git a/services/backend-api/client/src/components/SaveUnsavedChangesPopupBar/index.tsx b/services/backend-api/client/src/components/SaveUnsavedChangesPopupBar/index.tsx
@@ -1,6 +1,6 @@
 import { useFormContext } from "react-hook-form";
 import { Button, Flex, HStack, Text } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { isEqual } from "lodash";
 import { AnimatedComponent } from "../AnimatedComponent";
 
diff --git a/services/backend-api/client/src/components/SearchFeedsModal/index.tsx b/services/backend-api/client/src/components/SearchFeedsModal/index.tsx
@@ -89,7 +89,7 @@ const SearchResultItem = ({
 };
 
 function debounce(func: Function, delay: number) {
-  let timeoutId: number;
+  let timeoutId: NodeJS.Timeout;
 
   return function cb(...args: any[]) {
     if (timeoutId) {
diff --git a/services/backend-api/client/src/components/SelectFeedModal/index.tsx b/services/backend-api/client/src/components/SelectFeedModal/index.tsx
@@ -94,7 +94,7 @@ const FeedRadioItem = ({
 };
 
 function debounce(func: Function, delay: number) {
-  let timeoutId: number;
+  let timeoutId: NodeJS.Timeout;
 
   return function cb(...args: any[]) {
     if (timeoutId) {
diff --git a/services/backend-api/client/src/components/ThemedSelect/index.tsx b/services/backend-api/client/src/components/ThemedSelect/index.tsx
@@ -2,7 +2,6 @@
 import { Avatar, HStack, Text, useColorModeValue } from "@chakra-ui/react";
 import Select, { AriaOnFocusProps, GroupBase, StylesConfig, components } from "react-select";
 import { ChevronDownIcon } from "@chakra-ui/icons";
-import StateManagedSelect from "react-select/dist/declarations/src/stateManager";
 import { REACT_SELECT_STYLES } from "@/constants/reactSelectStyles";
 
 const { Option, DropdownIndicator } = components;
@@ -27,7 +26,7 @@ interface Props<T> {
   isClearable?: boolean;
   onInputChange?: (value: string) => void;
   placeholder?: string | React.ReactNode;
-  selectProps?: React.ComponentProps<typeof StateManagedSelect>;
+  selectProps?: React.ComponentProps<typeof Select>;
   inputRef?: React.ComponentProps<typeof Select>["ref"];
   isInvalid: boolean;
   invertBg?: boolean;
diff --git a/services/backend-api/client/src/features/feed/components/BulkLegacyFeedConversionDialog/index.tsx b/services/backend-api/client/src/features/feed/components/BulkLegacyFeedConversionDialog/index.tsx
@@ -28,7 +28,7 @@ import {
   Tr,
   useDisclosure,
 } from "@chakra-ui/react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { WarningIcon } from "@chakra-ui/icons";
 import { cloneElement } from "react";
 import { useNavigate } from "react-router-dom";
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/DeliveryPreviewAccordion.tsx b/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/DeliveryPreviewAccordion.tsx
@@ -10,10 +10,7 @@ import {
   Skeleton,
   Text,
 } from "@chakra-ui/react";
-import {
-  ArticleDeliveryResult,
-  ArticleDeliveryOutcome,
-} from "../../../types/DeliveryPreview";
+import { ArticleDeliveryResult, ArticleDeliveryOutcome } from "../../../types/DeliveryPreview";
 import { ArticleDeliveryDetails } from "./ArticleDeliveryDetails";
 import { getOutcomeLabel, getOutcomeColorScheme, StatusBadgeContent } from "./deliveryPreviewUtils";
 import {
@@ -98,7 +95,11 @@ export const DeliveryPreviewAccordion = ({ results }: DeliveryPreviewAccordionPr
   <Box {...ARTICLE_LIST_CONTAINER_PROPS}>
     <Accordion allowMultiple>
       {results.map((result, index) => (
-        <DeliveryPreviewAccordionItem key={result.articleId} result={result} isFirst={index === 0} />
+        <DeliveryPreviewAccordionItem
+          key={result.articleId}
+          result={result}
+          isFirst={index === 0}
+        />
       ))}
     </Accordion>
   </Box>
diff --git a/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/deliveryPreviewStyles.ts b/services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/deliveryPreviewStyles.ts
@@ -7,10 +7,10 @@ export const ARTICLE_LIST_CONTAINER_PROPS: BoxProps = {
   overflow: "hidden",
 };
 
-export const ARTICLE_LIST_ITEM_PADDING: BoxProps = {
+export const ARTICLE_LIST_ITEM_PADDING = {
   px: 3,
   py: 2,
-};
+} as const;
 
 export const getArticleListItemBorderProps = (
   isFirst: boolean,
diff --git a/services/backend-api/client/src/features/feedConnections/components/CustomPlaceholdersTabSection/CustomPlaceholderForm.tsx b/services/backend-api/client/src/features/feedConnections/components/CustomPlaceholdersTabSection/CustomPlaceholderForm.tsx
@@ -28,7 +28,7 @@ import {
 } from "@chakra-ui/react";
 import { AddIcon, ChevronDownIcon } from "@chakra-ui/icons";
 import { useEffect, useState } from "react";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { v4 as uuidv4 } from "uuid";
 import { useTranslation } from "react-i18next";
 import dayjs from "dayjs";
diff --git a/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/DiscordMessageComponentsForm.tsx b/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/DiscordMessageComponentsForm.tsx
@@ -19,7 +19,7 @@ import {
 } from "@chakra-ui/react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { AddIcon, DeleteIcon } from "@chakra-ui/icons";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { v4 } from "uuid";
 import { useRef } from "react";
 import { DiscordMessageFormData } from "@/types/discord";
diff --git a/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/DiscordMessageEmbedForm.tsx b/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/DiscordMessageEmbedForm.tsx
@@ -31,7 +31,7 @@ import { Controller, FieldError, useFieldArray, useFormContext, useWatch } from
 import { useTranslation } from "react-i18next";
 import { ChevronDownIcon, ChevronUpIcon, CloseIcon, DeleteIcon } from "@chakra-ui/icons";
 import { SketchPicker } from "react-color";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { uniqueId } from "lodash";
 import { DiscordMessageFormData } from "@/types/discord";
 import { getNestedField } from "@/utils/getNestedField";
diff --git a/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/index.tsx b/services/backend-api/client/src/features/feedConnections/components/DiscordMessageForm/index.tsx
@@ -20,7 +20,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Suspense, useContext, useState } from "react";
 import { FormProvider, useFieldArray, useForm, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { FaDiscord } from "react-icons/fa";
 import {
   DiscordMessageEmbedFormData,
diff --git a/services/backend-api/client/src/features/feedConnections/components/ExternalPropertiesTabSection/index.tsx b/services/backend-api/client/src/features/feedConnections/components/ExternalPropertiesTabSection/index.tsx
@@ -35,7 +35,7 @@ import { v4 } from "uuid";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FiHelpCircle } from "react-icons/fi";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import CreatableSelect from "react-select/creatable";
 import { useUserFeedContext } from "../../../../contexts/UserFeedContext";
 import CreateExternalPropertyModal from "./CreateExternalPropertyModal";
diff --git a/services/backend-api/client/src/mocks/data/userFeeds.ts b/services/backend-api/client/src/mocks/data/userFeeds.ts
@@ -582,7 +582,7 @@ const mockUserFeeds: UserFeed[] = [
 // }
 
 export const getMockUserFeeds = (): UserFeed[] => {
-  if (MOCK_CONNECTIONS_STATE === "no-connections") {
+  if ((MOCK_CONNECTIONS_STATE as MockConnectionsState) === "no-connections") {
     return mockUserFeeds.map((feed) => ({
       ...feed,
       connections: [],
diff --git a/services/backend-api/client/tsconfig.json b/services/backend-api/client/tsconfig.json
@@ -12,7 +12,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
diff --git a/services/backend-api/src/features/user-feeds/user-feeds.service.ts b/services/backend-api/src/features/user-feeds/user-feeds.service.ts
@@ -2303,12 +2303,16 @@ export class UserFeedsService {
     const SKIP_CONNECTION_TYPES = [FeedConnectionTypeEntityKey.DiscordWebhooks];
 
     for (const connectionType of Object.values(FeedConnectionTypeEntityKey)) {
-      if (SKIP_CONNECTION_TYPES.includes(connectionType)) continue;
+      if (SKIP_CONNECTION_TYPES.includes(connectionType)) {
+        continue;
+      }
 
       const connections = feed.connections?.[connectionType] || [];
 
       for (const conn of connections) {
-        if (conn.disabledCode) continue;
+        if (conn.disabledCode) {
+          continue;
+        }
 
         mediums.push({
           id: conn.id.toHexString(),
diff --git a/services/backend-api/src/features/user-feeds/utils/get-effective-refresh-rate.ts b/services/backend-api/src/features/user-feeds/utils/get-effective-refresh-rate.ts
@@ -1,11 +1,11 @@
-import { UserFeed } from '../entities/user-feed.entity';
+import { UserFeed } from "../entities/user-feed.entity";
 
 /**
  * Gets the effective refresh rate for a user feed.
  * Priority: userRefreshRateSeconds (user override) > refreshRateSeconds (system default)
  */
 export function getEffectiveRefreshRateSeconds(
-  feed: Pick<UserFeed, 'userRefreshRateSeconds' | 'refreshRateSeconds'>,
+  feed: Pick<UserFeed, "userRefreshRateSeconds" | "refreshRateSeconds">,
   fallback?: number
 ): number | undefined {
   return feed.userRefreshRateSeconds ?? feed.refreshRateSeconds ?? fallback;
