@mx-cartographer/experiences 4.0.14-alpha.JB1 → 4.0.14-alpha.JB2

package/src/common/constants/DateFormats.ts

@@ -1,122 +0,0 @@
-import { intlFormat } from 'date-fns/intlFormat'
-import { getLocale } from '../utils'
-
-export const ORDINAL_DATE_FORMAT = 'do'
-export const ORDINAL_MONTH_DAY_YEAR_FORMAT = 'MMM do, yyyy'
-
-// Documentation on the options for formatting int'l dates
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
-export const DATE_FORMATS_INTL = {
-  TIME_STAMP_HOUR_MINUTE: {
-    hour: 'numeric',
-    minute: 'numeric',
-  },
-  DAY: {
-    day: 'numeric',
-  },
-  DAY_OF_WEEK: {
-    weekday: 'long',
-  },
-  DAY_OF_WEEK_MONTH_DAY: {
-    day: 'numeric',
-    month: 'long',
-    weekday: 'long',
-  },
-  FULL_MONTH_DAY: {
-    day: 'numeric',
-    month: 'long',
-  },
-  MONTH: {
-    month: 'short',
-  },
-  MONTH_DAY: {
-    day: 'numeric',
-    month: 'short',
-  },
-  MONTH_LONG: {
-    month: 'long',
-  },
-  MONTH_SHORT: {
-    month: 'short',
-  },
-  MONTH_SHORT_YEAR: {
-    month: 'short',
-    year: 'numeric',
-  },
-  MONTH_YEAR: {
-    month: 'long',
-    year: 'numeric',
-  },
-  YEAR_MONTH_DAY: {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  },
-  MONTH_DAY_YEAR: {
-    month: 'short',
-    day: '2-digit',
-    year: 'numeric',
-  },
-  MED_MONTH_SHORT_DAY_FULL_YEAR: {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  },
-}
-
-export interface Day {
-  day: string
-}
-
-export interface DayOfWeek {
-  weekday: string
-}
-
-export interface DayOfWeekMonthDay {
-  day: string
-  month: string
-  weekday: string
-}
-
-export interface MonthDay {
-  day: string
-  month: string
-}
-
-export interface MonthLong {
-  month: string
-}
-
-export interface MonthShort {
-  month: string
-}
-
-export interface MonthYear {
-  month: string
-  year: string
-}
-
-export interface TimeStamp {
-  hour: string
-  minute: string
-}
-
-export interface YearMonthDay {
-  day: string
-  month: string
-  year: string
-}
-
-export const formatDate = (
-  date: string | Date,
-  dFormat:
-    | Day
-    | DayOfWeek
-    | DayOfWeekMonthDay
-    | MonthDay
-    | MonthLong
-    | MonthShort
-    | MonthYear
-    | TimeStamp
-    | YearMonthDay,
-) => intlFormat(new Date(date), Object.assign(dFormat), { locale: getLocale() })

package/src/common/constants/Donut.ts

@@ -1,2 +0,0 @@
-export const DEFAULT_DONUT_SIZE = 48
-export const DEFAULT_STROKE_WIDTH = 4

package/src/common/constants/Numbers.ts

@@ -1,6 +0,0 @@
-export const MAX_MONEY_INPUT = 99999999.99
-
-export enum CurrencyCodes {
-  CAD = 'CAD',
-  USD = 'USD',
-}

package/src/common/constants/ScheduledPayment.ts

@@ -1,21 +0,0 @@
-export enum RecurrenceTypes {
-  Unknown = 0,
-  EveryWeek = 1,
-  EveryOtherWeek = 2,
-  EveryMonth = 3,
-  EveryOtherMonth = 4,
-  EveryQuarter = 5,
-  EveryOtherQuarter = 6,
-  EveryYear = 7,
-}
-
-export const RECURRENCE_COPY = [
-  { id: RecurrenceTypes.Unknown, copy: 'frequency_unknown' },
-  { id: RecurrenceTypes.EveryWeek, copy: 'frequency_every_week' },
-  { id: RecurrenceTypes.EveryOtherWeek, copy: 'frequency_every_other_week' },
-  { id: RecurrenceTypes.EveryMonth, copy: 'frequency_every_month' },
-  { id: RecurrenceTypes.EveryOtherMonth, copy: 'frequency_every_other_month' },
-  { id: RecurrenceTypes.EveryQuarter, copy: 'frequency_every_quarter' },
-  { id: RecurrenceTypes.EveryOtherQuarter, copy: 'frequency_every_other_quarter' },
-  { id: RecurrenceTypes.EveryYear, copy: 'frequency_every_year' },
-]

package/src/common/constants/Sizes.ts

@@ -1,7 +0,0 @@
-export const enum Sizes {
-  Small = 'small',
-  Medium = 'medium',
-  Large = 'large',
-}
-
-export const TOUCH_TARGET = 44

package/src/common/constants/SpendingPlan.ts

@@ -1,17 +0,0 @@
-export const LOADING_STATUS = {
-  ERROR: 'ERROR',
-  LOADING: 'LOADING',
-  SUCCESS: 'SUCCESS',
-}
-
-export enum PlanTypes {
-  SpendingPlan = 0,
-  Budgets = 1,
-}
-
-export enum IterationItemTypes {
-  RecurringExpense = 0,
-  PlannedExpense = 1,
-  Other = 2,
-  Income = 3,
-}

package/src/common/constants/Table.ts

@@ -1,13 +0,0 @@
-export const TABLE_CONST = {
-  ASC: 'ASC',
-  DESC: 'DESC',
-  DIRECTION: {
-    ASC: 'ascending',
-    DESC: 'descending',
-  },
-  ALIGN: {
-    center: 'center',
-    left: 'flex-start',
-    right: 'flex-end',
-  },
-}

package/src/common/constants/index.ts

@@ -1,21 +0,0 @@
-export { ApiEndpoints } from './ApiEndpoints'
-export { ANALYTICS_EVENTS } from './Analytics'
-export {
-  DATE_FORMATS_INTL,
-  formatDate,
-  ORDINAL_DATE_FORMAT,
-  ORDINAL_MONTH_DAY_YEAR_FORMAT,
-} from './DateFormats'
-export { INCOME_ACCOUNT_TYPES, PAYMENT_ACCOUNT_TYPES, SPENDING_ACCOUNT_TYPES } from './Account'
-export {
-  CategoryColors,
-  CategoryGuids,
-  CategoryGuidToName,
-  CategoryIcon,
-  PaymentCategories,
-} from './Category'
-export { CurrencyCodes } from './Numbers'
-export { RecurrenceTypes, RECURRENCE_COPY } from './ScheduledPayment'
-export { IterationItemTypes, LOADING_STATUS, PlanTypes } from './SpendingPlan'
-export { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from './Donut'
-export { Sizes, TOUCH_TARGET } from './Sizes'

package/src/common/context/GlobalDataProvider.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-
-import { GlobalStore } from '..'
-
-export interface GlobalStoreContextTypes {
-  children: React.ReactNode
-  onEvent: (event: string, props?: object) => void
-  onPageView: (pageViewEvent: string) => void
-  globalStore: GlobalStore
-}
-export const GlobalDataContext = React.createContext<GlobalStoreContextTypes | null>(null)
-
-export const GlobalDataProvider: React.FC<React.PropsWithChildren<GlobalStoreContextTypes>> = ({
-  children,
-  globalStore,
-  onEvent,
-  onPageView,
-}) => {
-  return (
-    <GlobalDataContext.Provider
-      value={{
-        globalStore,
-        onEvent,
-        onPageView,
-        children,
-      }}
-    >
-      {children}
-    </GlobalDataContext.Provider>
-  )
-}

package/src/common/context/WidgetContainerProvider.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-
-export interface WidgetContainerContextTypes {
-  children: React.ReactNode
-  availableHeight: number
-  availableWidth: number
-}
-export const WidgetContainerContext = React.createContext<WidgetContainerContextTypes | null>(null)
-
-export const WidgetContainerProvider: React.FC<
-  React.PropsWithChildren<WidgetContainerContextTypes>
-> = ({ children, availableHeight, availableWidth }) => {
-  return (
-    <WidgetContainerContext.Provider
-      value={{
-        availableHeight,
-        availableWidth,
-        children,
-      }}
-    >
-      {children}
-    </WidgetContainerContext.Provider>
-  )
-}

package/src/common/context/__mocks__/GlobalDataProvider.tsx

@@ -1,25 +0,0 @@
-import React from 'react'
-
-import { ThemeProvider } from '@mui/material'
-
-import { createMXTheme } from '@kyper/mui'
-
-import { GlobalDataProvider } from '../index'
-import { GlobalStore } from '../../stores/GlobalStore'
-
-interface DataProviderProps {
-  globalStore: GlobalStore
-}
-
-const DataProvider: React.FC<React.PropsWithChildren<DataProviderProps>> = ({
-  children,
-  globalStore,
-}) => {
-  return (
-    <GlobalDataProvider globalStore={globalStore} onEvent={() => {}} onPageView={() => {}}>
-      <ThemeProvider theme={createMXTheme('light')}>{children}</ThemeProvider>
-    </GlobalDataProvider>
-  )
-}
-
-export default DataProvider

package/src/common/context/hooks.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { GlobalDataContext } from './GlobalDataProvider'
-import { WidgetContainerContext } from './WidgetContainerProvider'
-
-export const useGlobalDataContext = (providerName = 'useGlobalStore') => {
-  const context = React.useContext(GlobalDataContext)
-
-  if (!context) {
-    throw new Error(`${providerName}() must be used within the GlobalDataContext`)
-  }
-
-  return context
-}
-
-export const useAccountStore = () =>
-  useGlobalDataContext('useAccountStore').globalStore.accountStore
-export const useBudgetsStore = () =>
-  useGlobalDataContext('useBudgetsStore').globalStore.budgetsStore
-export const useCashflowStore = () =>
-  useGlobalDataContext('useCashflowStore').globalStore.cashflowStore
-export const useCategoryStore = () =>
-  useGlobalDataContext('useCategoryStore').globalStore.categoryStore
-export const useConnectStore = () =>
-  useGlobalDataContext('useConnectStore').globalStore.connectStore
-export const useDebtStore = () => useGlobalDataContext('useDebtsStore').globalStore.debtsStore
-export const useGlobalStore = () => useGlobalDataContext('useGlobalStore').globalStore
-export const useGlobalUiStore = () =>
-  useGlobalDataContext('useGlobalUiStore').globalStore.globalUiStore
-export const useGlobalCopyStore = () =>
-  useGlobalDataContext('globalCopyStore').globalStore.copyStore.copy
-export const useGoalStore = () => useGlobalDataContext('useGoalStore').globalStore.goalStore
-export const useMerchantStore = () =>
-  useGlobalDataContext('useMerchantStore').globalStore.merchantStore
-export const useNetWorthStore = () =>
-  useGlobalDataContext('useNetWorthStore').globalStore.netWorthStore
-export const useNotificationStore = () =>
-  useGlobalDataContext('useNotificationStore').globalStore.notificationStore
-export const useRecurringActivityStore = () =>
-  useGlobalDataContext('useRecurringActivityStore').globalStore.recurringActivityStore
-export const useTransactionStore = () =>
-  useGlobalDataContext('useTransactionStore').globalStore.transactionStore
-export const useUserStore = () => useGlobalDataContext('useUserStore').globalStore.userStore
-
-export const useEvent = () => ({ onEvent: useGlobalDataContext().onEvent })
-export const usePageView = () => ({ onPageView: useGlobalDataContext().onPageView })
-
-export const useWidgetContainerContext = (providerName = 'useWidgetContainerContext') => {
-  const context = React.useContext(WidgetContainerContext)
-
-  if (!context) {
-    throw new Error(`${providerName}() must be used within the WidgetContainerContext`)
-  }
-
-  return context
-}
-
-export const useWidgetContainerProvider = () => useWidgetContainerContext()

package/src/common/context/index.ts

@@ -1,22 +0,0 @@
-export {
-  useAccountStore,
-  useBudgetsStore,
-  useCashflowStore,
-  useCategoryStore,
-  useDebtStore,
-  useEvent,
-  useGlobalStore,
-  useGlobalUiStore,
-  useGlobalCopyStore,
-  useGoalStore,
-  useMerchantStore,
-  useNetWorthStore,
-  useNotificationStore,
-  usePageView,
-  useRecurringActivityStore,
-  useTransactionStore,
-  useUserStore,
-  useWidgetContainerProvider,
-} from './hooks'
-export { GlobalDataContext, GlobalDataProvider } from './GlobalDataProvider'
-export { WidgetContainerContext, WidgetContainerProvider } from './WidgetContainerProvider'

package/src/common/hooks/__tests__/useDimensions.test.tsx

@@ -1,190 +0,0 @@
-import { act } from 'react'
-import { renderHook } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { useDimensions } from '../useDimensions'
-
-describe('useDimensions', () => {
-  let resizeObserverMock: {
-    observe: ReturnType<typeof vi.fn>
-    disconnect: ReturnType<typeof vi.fn>
-    unobserve: ReturnType<typeof vi.fn>
-  }
-  let resizeObserverCallback: ResizeObserverCallback
-
-  beforeEach(() => {
-    resizeObserverMock = {
-      observe: vi.fn(),
-      disconnect: vi.fn(),
-      unobserve: vi.fn(),
-    }
-
-    vi.stubGlobal(
-      'ResizeObserver',
-      vi.fn((callback: ResizeObserverCallback) => {
-        resizeObserverCallback = callback
-        return resizeObserverMock
-      }),
-    )
-
-    vi.useFakeTimers()
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-    vi.restoreAllMocks()
-  })
-
-  it('should initialize with default dimensions', () => {
-    const { result } = renderHook(() => useDimensions())
-    const [, dimensions] = result.current
-
-    expect(dimensions).toEqual({ width: 0, height: 0 })
-  })
-
-  it('should create a ResizeObserver when ref is set', () => {
-    const { result } = renderHook(() => useDimensions())
-    const [ref] = result.current
-
-    const mockElement = document.createElement('div')
-    act(() => {
-      ref(mockElement)
-    })
-
-    expect(vi.mocked(ResizeObserver)).toHaveBeenCalledTimes(1)
-    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement)
-  })
-
-  it('should update dimensions after debounce delay', async () => {
-    const { result } = renderHook(() => useDimensions(50))
-    const [ref] = result.current
-
-    const mockElement = document.createElement('div')
-    act(() => {
-      ref(mockElement)
-    })
-
-    act(() => {
-      resizeObserverCallback(
-        [
-          {
-            target: mockElement,
-            borderBoxSize: [{ inlineSize: 100, blockSize: 200 }],
-            contentBoxSize: [],
-            contentRect: {} as DOMRectReadOnly,
-            devicePixelContentBoxSize: [],
-          },
-        ],
-        resizeObserverMock as ResizeObserver,
-      )
-    })
-
-    await act(async () => {
-      vi.advanceTimersByTime(50)
-    })
-
-    const [, dimensions] = result.current
-    expect(dimensions).toEqual({ width: 100, height: 200 })
-  })
-
-  it('should update dimensions only when size changes', async () => {
-    const { result } = renderHook(() => useDimensions(50))
-    const [ref] = result.current
-
-    const mockElement = document.createElement('div')
-    act(() => {
-      ref(mockElement)
-    })
-
-    // Initial size
-    act(() => {
-      resizeObserverCallback(
-        [
-          {
-            target: mockElement,
-            borderBoxSize: [{ inlineSize: 100, blockSize: 200 }],
-            contentBoxSize: [],
-            contentRect: {} as DOMRectReadOnly,
-            devicePixelContentBoxSize: [],
-          },
-        ],
-        global.resizeObserverMock as unknown as ResizeObserver,
-      )
-    })
-
-    await act(async () => {
-      vi.advanceTimersByTime(50)
-    })
-
-    const [, initialDimensions] = result.current
-    expect(initialDimensions).toEqual({ width: 100, height: 200 })
-
-    // Change size
-    act(() => {
-      resizeObserverCallback(
-        [
-          {
-            target: mockElement,
-            borderBoxSize: [{ inlineSize: 150, blockSize: 250 }],
-            contentBoxSize: [],
-            contentRect: {} as DOMRectReadOnly,
-            devicePixelContentBoxSize: [],
-          },
-        ],
-        global.resizeObserverMock as unknown as ResizeObserver,
-      )
-    })
-
-    await act(async () => {
-      vi.advanceTimersByTime(50)
-    })
-
-    const [, updatedDimensions] = result.current
-    expect(updatedDimensions).toEqual({ width: 150, height: 250 })
-  })
-
-  it('should disconnect observer when component unmounts', () => {
-    const { result, unmount } = renderHook(() => useDimensions())
-    const [ref] = result.current
-
-    const mockElement = document.createElement('div')
-    act(() => {
-      ref(mockElement)
-    })
-
-    unmount()
-
-    expect(resizeObserverMock.disconnect).toHaveBeenCalledTimes(1)
-  })
-
-  it('should handle null ref', () => {
-    const { result } = renderHook(() => useDimensions())
-    const [ref] = result.current
-
-    act(() => {
-      ref(null)
-    })
-
-    expect(global.ResizeObserver).not.toHaveBeenCalled()
-  })
-
-  it('should disconnect previous observer when ref changes', () => {
-    const { result } = renderHook(() => useDimensions())
-    const [ref] = result.current
-
-    const mockElement1 = document.createElement('div')
-    const mockElement2 = document.createElement('div')
-
-    act(() => {
-      ref(mockElement1)
-    })
-
-    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement1)
-
-    act(() => {
-      ref(mockElement2)
-    })
-
-    expect(resizeObserverMock.disconnect).toHaveBeenCalledTimes(1)
-    expect(resizeObserverMock.observe).toHaveBeenCalledWith(mockElement2)
-  })
-})

package/src/common/hooks/index.ts

@@ -1,3 +0,0 @@
-export { useCombineEvents, useCombinePageviews } from './useCombineEvents'
-export { useScreenSize } from './useScreenSize'
-export { usePrevious } from './usePrevious'

package/src/common/hooks/useCombineEvents.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-
-import { AnalyticEventFunction, AnalyticPageviewFunction } from '../types'
-
-export const useCombineEvents = (events: AnalyticEventFunction[], store: any) => {
-  const { session } = store
-
-  const storeEvents = Object.values(store).reduce((acc: AnalyticEventFunction[], curr: any) => {
-    if (session && curr?.onAnalyticEvent && typeof curr?.onAnalyticEvent === 'function') {
-      return [...acc, curr.onAnalyticEvent]
-    }
-
-    return acc
-  }, [])
-  const eventFunctions = [...events, ...storeEvents]
-
-  return React.useMemo(() => {
-    return (event: string) => {
-      eventFunctions.forEach((e) => {
-        if (!session) {
-          e(event)
-        } else {
-          e(event, session)
-        }
-      })
-    }
-  }, [events, session])
-}
-
-export const useCombinePageviews = (pages: AnalyticPageviewFunction[], store: any) => {
-  const { session } = store
-
-  const storeEvents = Object.values(store).reduce((acc: AnalyticPageviewFunction[], curr: any) => {
-    if (session && curr?.onAnalyticPageView && typeof curr?.onAnalyticPageView === 'function') {
-      return [...acc, curr.onAnalyticPageView]
-    }
-
-    return acc
-  }, [])
-  const eventFunctions = [...pages, ...storeEvents]
-
-  return React.useMemo(() => {
-    return (event: string) => {
-      eventFunctions.forEach((e) => {
-        if (!session) {
-          e(event)
-        } else {
-          e(event, session)
-        }
-      })
-    }
-  }, [pages, session])
-}