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

package/src/common/components/barchart/Legend.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+
+import { Text, useTokens } from '@kyper/mui'
+
+interface BarChartLegendProps {
+  color: string
+  labelAverage: string
+  labelMain: string
+}
+
+const Legend: React.FC<BarChartLegendProps> = ({ color, labelAverage, labelMain }) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens, color)
+
+  return (
+    <div className={`mx-cmn-bar-chart-legend ${styles}`}>
+      <div aria-label={labelMain} className="mx-cmn-color-square" role="img" />
+      <Text variant="XSmall">{labelMain}</Text>
+
+      <div aria-label={labelAverage} className="mx-cmn-triple-dot" role="img">
+        <div className="mx-cmn-dot" />
+        <div className="mx-cmn-dot" />
+        <div className="mx-cmn-dot" />
+      </div>
+      <Text variant="XSmall">{labelAverage}</Text>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any, color: string) =>
+  css({
+    alignItems: 'center',
+    display: 'flex',
+    gap: tokens.Spacing.XSmall,
+    justifyContent: 'flex-end',
+    marginRight: tokens.Spacing.XLarge,
+    paddingBottom: tokens.Spacing.XSmall,
+    width: '100%',
+    '& .mx-cmn-color-square': {
+      backgroundColor: color,
+      height: 6,
+      width: 6,
+    },
+    '& .mx-cmn-triple-dot': {
+      display: 'flex',
+      gap: 1,
+    },
+    '& .mx-cmn-dot': {
+      backgroundColor: tokens.Color.Neutral500,
+      height: 3,
+      width: 3,
+      borderRadius: 1.5,
+    },
+    '& > .kyper-text': {
+      marginRight: tokens.Spacing.XSmall,
+    },
+  })
+
+export default Legend

package/src/common/components/barchart/Util.ts

@@ -0,0 +1,54 @@
+/**
+ * Returns a sum
+ *
+ * @param acc accumulator
+ * @param value current value
+ */
+export const sumReducer = (acc: number, value: number) => acc + value
+
+/**
+ * Returns the max range
+ *
+ * @param acc accumulator
+ * @param value current value
+ */
+export const rangeReducer = (acc: number, value: number) =>
+  Math.abs(value) > acc ? Math.abs(value) : acc
+
+/**
+ * Returns an array with the value of an object added
+ *
+ * @param acc accumulator
+ * @param value current value
+ */
+export const valueReducer = (acc: number[], value: { value: number }) => [...acc, value.value]
+
+/**
+ * Returns full height if only the first section is visible, half height if both sections
+ * are visible and 0 if the first section is not visible
+ *
+ * @param hasSection1 If the first section is visible
+ * @param hasSection2 If the second section is visible
+ * @param fullHeight The full height
+ */
+export const getSectionHeight = (
+  hasSection1: boolean,
+  hasSection2: boolean,
+  fullHeight: number,
+) => {
+  const height = hasSection1 && hasSection2 ? fullHeight / 2 : fullHeight
+  return !hasSection1 ? 0 : height
+}
+
+/**
+ * Returns the +/- pixel height of the average line.  This is calcluated using the percentange of average
+ * to max value multiplied by the height.  If the max value is less than 0, then we use negative min value.
+ *
+ * @param average The average value
+ * @param max The maximum value
+ * @param min The minimum value
+ * @param height The height of the container the average line displays in.
+ */
+export const getAverageLineHeight = (average: number, max: number, min: number, height: number) => {
+  return (average / (max < 0 ? -min : max)) * height || 0
+}

package/src/common/components/barchart/__tests__/BarChart.test.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { render, RenderResult } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import BarChart from '../BarChart'
+import { beforeEach, describe, expect, it } from 'vitest'
+
+const chartData = [
+  { ariaLabel: 'Label 1', label: 'Label 1', value: 10 },
+  { ariaLabel: 'Label 2', label: 'Label 2', value: 20 },
+  { ariaLabel: 'Label 3', label: 'Label 3', value: 30 },
+  { ariaLabel: 'Label 4', label: 'Label 4', value: 40 },
+]
+
+let docBody: RenderResult
+
+describe('Render a bar chart', () => {
+  beforeEach(() => {
+    docBody = render(
+      <BarChart
+        color="#dddddd"
+        data={chartData}
+        height={500}
+        legendLabelAverage={`Average: $25`}
+        legendLabelMain="Data"
+      />,
+    )
+  })
+
+  it('should contain each aria label', () => {
+    chartData.forEach((data) => {
+      expect(docBody.getByText(data.ariaLabel)).toBeInTheDocument()
+    })
+  })
+
+  it('should contain each label', () => {
+    chartData.forEach((data) => {
+      expect(docBody.getByText(data.label)).toBeInTheDocument()
+    })
+  })
+
+  it('should contain each value', () => {
+    chartData.forEach((data) => {
+      expect(docBody.getByText(data.value)).toBeInTheDocument()
+    })
+  })
+})

package/src/common/components/barchart/index.ts

@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart'

package/src/common/components/calendar/Calendar.tsx

@@ -0,0 +1,223 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+import { addDays } from 'date-fns/addDays'
+import { addMonths } from 'date-fns/addMonths'
+import { eachDayOfInterval } from 'date-fns/eachDayOfInterval'
+import { eachWeekOfInterval } from 'date-fns/eachWeekOfInterval'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { format } from 'date-fns/format'
+import { isBefore } from 'date-fns/isBefore'
+import { isSameMonth } from 'date-fns/isSameMonth'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subMonths } from 'date-fns/subMonths'
+
+import Button from '@mui/material/Button'
+import Paper from '@mui/material/Paper'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import Header from './Header'
+import Day from './Day'
+
+export const CALENDAR_WIDTH = 340
+export const DATE_SIZE = 44
+export const enum CalendarSelectionTypes {
+  None = 'None',
+  Single = 'Single',
+  Range = 'Range',
+}
+
+export type CalendarCopy = {
+  nextAria: string
+  prevAria: string
+  today: string
+}
+
+export interface CalendarProps {
+  copy: CalendarCopy
+  beginDate?: Date
+  endDate?: Date
+  onDateSelected?: (date: Date) => void
+  onRangeSelected?: (beginDate: Date, endDate: Date) => void
+  selectionType?: CalendarSelectionTypes
+}
+
+const Calendar: React.FC<CalendarProps> = ({
+  copy,
+  beginDate: beginDateProp = undefined,
+  endDate: endDateProp = undefined,
+  onDateSelected,
+  onRangeSelected,
+  selectionType = CalendarSelectionTypes.Single,
+}) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens)
+
+  const [date, setDate] = React.useState(startOfToday)
+
+  const [beginDate, setBeginDate] = React.useState<Date | undefined>(beginDateProp)
+  const [endDate, setEndDate] = React.useState<Date | undefined>(endDateProp)
+
+  React.useEffect(() => {
+    setBeginDate(beginDateProp)
+    setEndDate(endDateProp)
+    if (beginDateProp) {
+      setDate(beginDateProp)
+    }
+  }, [beginDateProp, endDateProp])
+
+  const weeks = React.useMemo(() => {
+    const weeksInInterval = eachWeekOfInterval({ start: startOfMonth(date), end: endOfMonth(date) })
+
+    const weeks = [] as Date[][]
+    for (let i = 0; i < weeksInInterval.length; i++) {
+      const weekStart = weeksInInterval[i]
+      const days = eachDayOfInterval({ start: weekStart, end: addDays(weekStart, 6) })
+
+      const week = [] as Date[]
+      for (let j = 0; j < days.length; j++) {
+        week.push(days[j])
+      }
+      weeks.push(week)
+    }
+
+    return weeks
+  }, [date])
+
+  const handleSelection = (date: Date) => {
+    if (selectionType === CalendarSelectionTypes.None) return
+
+    if (selectionType === CalendarSelectionTypes.Single) {
+      setBeginDate(date)
+      onDateSelected?.(date)
+      return
+    }
+
+    if (!beginDate || endDate) {
+      setBeginDate(date)
+      setEndDate(undefined)
+    } else if (isBefore(date, beginDate)) {
+      setEndDate(beginDate)
+      setBeginDate(date)
+      onRangeSelected?.(date, beginDate)
+    } else {
+      setEndDate(date)
+      onRangeSelected?.(beginDate, date)
+    }
+  }
+
+  const handleTodayClick = () => {
+    const today = startOfToday()
+    setDate(today)
+
+    if (selectionType === CalendarSelectionTypes.None) return
+
+    setBeginDate(today)
+
+    if (selectionType === CalendarSelectionTypes.Single) {
+      onDateSelected?.(today)
+    } else {
+      setEndDate(today)
+      onRangeSelected?.(today, today)
+    }
+  }
+
+  const handleNextMonthClick = () => {
+    setDate(addMonths(date, 1))
+  }
+
+  const handlePreviousMonthClick = () => {
+    setDate(subMonths(date, 1))
+  }
+
+  return (
+    <div className={`mx-cmn-calendar ${styles}`}>
+      <Paper sx={{ boxShadow: 'none' }}>
+        <Header
+          copy={copy}
+          date={date}
+          onNextClick={handleNextMonthClick}
+          onPreviousClick={handlePreviousMonthClick}
+        />
+
+        <div className="mx-cmn-calendar-header-row">
+          {weeks[0].map((day, index) => (
+            <div className="mx-cmn-calendar-header-cell" key={index}>
+              <Text bold={true} variant="Small">
+                {format(day, 'EEEEE')}
+              </Text>
+            </div>
+          ))}
+        </div>
+
+        {weeks.map((week, index) => (
+          <div className="mx-cmn-calendar-week" key={`w-${index}`}>
+            {week.map((day, index) => (
+              <Day
+                beginDate={beginDate}
+                date={day}
+                endDate={endDate}
+                isInMonth={isSameMonth(day, date)}
+                key={index}
+                onClick={handleSelection}
+              />
+            ))}
+          </div>
+        ))}
+
+        <div className="mx-cmn-calendar-today-container">
+          <Button onClick={handleTodayClick} size="small" variant="text">
+            {copy.today}
+          </Button>
+        </div>
+      </Paper>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any) =>
+  css({
+    width: CALENDAR_WIDTH,
+    '& .MuiPaper-root': {
+      paddingLeft: 24,
+      paddingRight: 24,
+      paddingTop: 4,
+      paddingBottom: 4,
+    },
+    '& .mx-cmn-calendar-header-row': {
+      display: 'flex',
+      justifyContent: 'center',
+      textAlign: 'center',
+      '& .mx-cmn-calendar-header-cell': {
+        height: DATE_SIZE,
+        width: DATE_SIZE,
+        minWidth: DATE_SIZE,
+        '& .kmui-text': {
+          alignItems: 'center',
+          display: 'flex',
+          height: '100%',
+          justifyContent: 'center',
+          width: '100%',
+        },
+      },
+    },
+    '& .mx-cmn-calendar-week': {
+      display: 'flex',
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+    '& .mx-cmn-calendar-today-container': {
+      display: 'block',
+      marginTop: tokens.Spacing.Medium,
+      textAlign: 'center',
+      width: '100%',
+      '& > .MuiButton-root': {
+        display: 'inline-block',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      },
+    },
+  })
+
+export default Calendar

package/src/common/components/calendar/Day.tsx

@@ -0,0 +1,127 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+import { format } from 'date-fns/format'
+import { isSameDay } from 'date-fns/isSameDay'
+import { isWithinInterval } from 'date-fns/isWithinInterval'
+import { startOfToday } from 'date-fns/startOfToday'
+
+import Button from '@mui/material/Button'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { Text, useTokens } from '@kyper/mui'
+
+import { DATE_SIZE } from './Calendar'
+
+interface DayProps {
+  beginDate: Date | undefined
+  date: Date
+  endDate: Date | undefined
+  isInMonth: boolean
+  onClick: (date: Date) => void
+}
+
+const Day: React.FC<DayProps> = ({ beginDate, date, endDate, isInMonth, onClick }) => {
+  const theme = useTheme()
+  const tokens = useTokens()
+  const styles = getStyles(tokens, theme)
+
+  const isInRange =
+    beginDate &&
+    endDate &&
+    isWithinInterval(date, { start: beginDate, end: endDate }) &&
+    !isSameDay(date, beginDate) &&
+    !isSameDay(date, endDate)
+
+  const isRangeStart =
+    beginDate && endDate && isSameDay(beginDate, date) && !isSameDay(beginDate, endDate)
+
+  const isRangeEnd =
+    endDate && beginDate && isSameDay(endDate, date) && !isSameDay(beginDate, endDate)
+
+  const isSelected =
+    (beginDate && isSameDay(beginDate, date)) || (endDate && isSameDay(endDate, date))
+
+  const isToday = isSameDay(date, startOfToday())
+
+  return (
+    <div
+      className={`
+        mx-cmn-calendar-day
+        ${styles}
+        ${!isInMonth ? 'mx-cmn-out-of-month' : ''}
+        ${isInRange ? 'mx-cmn-date-interval' : ''}
+      `}
+    >
+      <Button
+        className={`
+          mx-cmn-calendar-day-button
+          ${isRangeStart ? 'mx-cmn-range-start' : ''}
+          ${isRangeEnd ? 'mx-cmn-range-end' : ''}
+        `}
+        color={isSelected ? 'primary' : 'secondary'}
+        onClick={() => onClick(date)}
+        variant={isSelected ? 'contained' : 'text'}
+      >
+        <Text
+          className={`
+            mx-cmn-calendar-day-text
+            ${isSelected ? 'mx-cmn-day-selected' : ''}
+            ${isToday ? 'mx-cmn-today' : ''}`}
+          variant="Small"
+        >
+          {format(date, 'd')}
+        </Text>
+      </Button>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any, theme: any) =>
+  css({
+    height: DATE_SIZE,
+    width: DATE_SIZE,
+    display: 'flex',
+    justifyContent: 'center',
+    '&.mx-cmn-out-of-month': {
+      backgroundColor: theme.palette.background.default,
+    },
+    '&.mx-cmn-date-interval': {
+      backgroundColor: theme.palette.secondary.light,
+    },
+    '& .MuiButton-root': {
+      maxWidth: 44,
+      minWidth: 44,
+      height: 44,
+      padding: 0,
+      width: 44,
+      '&.mx-cmn-range-start': {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        '&:focus': {
+          boxShadow: 'none',
+        },
+      },
+      '&.mx-cmn-range-end': {
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        '&:focus': {
+          boxShadow: 'none',
+        },
+      },
+    },
+    '& .mx-cmn-calendar-day-text': {
+      '&.mx-cmn-day-selected': {
+        color: theme.palette.primary,
+        '&.mx-cmn-day-selected': {
+          borderColor: theme.palette.common.white,
+        },
+      },
+      '&.mx-cmn-today': {
+        borderBottom: `solid 2px ${tokens.Color.Brand300}`,
+        marginBottom: -6,
+        paddingBottom: 5,
+      },
+    },
+  })
+
+export default Day

package/src/common/components/calendar/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+
+import KeyboardArrowLeftRoundedIcon from '@mui/icons-material/KeyboardArrowLeftRounded'
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded'
+
+import Button from '@mui/material/Button'
+
+import { H2, useTokens } from '@kyper/mui'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../constants/DateFormats'
+import type { CalendarCopy } from './Calendar'
+
+interface HeaderProps {
+  copy: CalendarCopy
+  date: Date
+  onNextClick: () => void
+  onPreviousClick: () => void
+}
+
+const Header: React.FC<HeaderProps> = ({ copy, date, onNextClick, onPreviousClick }) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens)
+
+  return (
+    <div className={`mx-cmn-calendar-header ${styles}`}>
+      <H2 className="mx-cmn-calendar-header-title" variant="H3">
+        {formatDate(date, DATE_FORMATS_INTL.MONTH_YEAR)}
+      </H2>
+      <div className="mx-cmn-calendar-header-button-container">
+        <Button aria-label={copy.prevAria} onClick={onPreviousClick}>
+          <KeyboardArrowLeftRoundedIcon />
+        </Button>
+        <Button aria-label={copy.nextAria} onClick={onNextClick}>
+          <KeyboardArrowRightRoundedIcon />
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any) =>
+  css({
+    alignItems: 'center',
+    display: 'flex',
+    marginBottom: tokens.Spacing.Medium,
+    marginRight: -tokens.Spacing.Medium,
+    paddingLeft: tokens.Spacing.XSmall,
+    '& .mx-cmn-calendar-header-title': {
+      flexGrow: 1,
+    },
+    '& .mx-cmn-calendar-header-button-container': {
+      display: 'flex',
+      gap: 4,
+    },
+  })
+
+export default Header

package/src/common/components/calendar/__tests__/Calendar.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+
+import { addMonths } from 'date-fns/addMonths'
+import { startOfToday } from 'date-fns/startOfToday'
+import { subMonths } from 'date-fns/subMonths'
+
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../../constants'
+
+import Calendar from '../Calendar'
+
+describe('Calendar', () => {
+  beforeEach(() => {
+    render(
+      <Calendar
+        copy={{
+          nextAria: 'next month',
+          prevAria: 'previous month',
+          today: 'Today',
+        }}
+        onDateSelected={() => {}}
+        onRangeSelected={() => {}}
+      />,
+    )
+  })
+
+  it('handles next month click', async () => {
+    const user = userEvent.setup()
+    const buttons = screen.getAllByRole('button')
+
+    await user.click(buttons[1])
+
+    expect(screen.getByRole('heading')).toHaveTextContent(
+      formatDate(addMonths(startOfToday(), 1), DATE_FORMATS_INTL.MONTH_YEAR),
+    )
+  })
+
+  it('handles prev month click', async () => {
+    const user = userEvent.setup()
+    const buttons = screen.getAllByRole('button')
+
+    await user.click(buttons[0])
+    expect(screen.getByRole('heading')).toHaveTextContent(
+      formatDate(subMonths(startOfToday(), 1), DATE_FORMATS_INTL.MONTH_YEAR),
+    )
+  })
+})

package/src/common/components/calendar/index.ts

@@ -0,0 +1 @@
+export { default as Calendar, CalendarSelectionTypes } from './Calendar'

package/src/common/components/calendar/upcomingActivity/CalendarIcons.tsx

@@ -0,0 +1,40 @@
+import AccessTimeFilledIcon from '@mui/icons-material/AccessTimeFilled'
+import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'
+import CancelIcon from '@mui/icons-material/Cancel'
+import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+
+import IconBacking from '../../IconBacking'
+
+const iconStyle = {
+  gridRow: 1,
+  gridColumn: 1,
+  zIndex: 2,
+}
+
+const offsetStyle = (isOffset: boolean) => {
+  return isOffset ? { margin: '0 0 -4px -4px' } : undefined
+}
+
+export const UpcomingExpenseBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <AccessTimeFilledIcon color="primary" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const IncomeBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <MonetizationOnIcon sx={{ color: 'categories.income', fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const MissedBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <CancelIcon color="error" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)
+
+export const PaidBadge = ({ isOffset = false, size = 16 }) => (
+  <IconBacking size={size} sx={{ ...offsetStyle(isOffset) }}>
+    <CheckCircleIcon color="success" sx={{ fontSize: size, ...iconStyle }} />
+  </IconBacking>
+)