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

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

@@ -1,60 +0,0 @@
-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

@@ -1,54 +0,0 @@
-/**
- * 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

@@ -1,46 +0,0 @@
-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

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

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

@@ -1,223 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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

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

@@ -1,40 +0,0 @@
-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>
-)