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

package/src/budgets/components/BudgetList.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardHeader from '@mui/material/CardHeader'
-import Divider from '@mui/material/Divider'
-import List from '@mui/material/List'
-
-import { H3 } from '@kyper/mui'
-
-import {
-  type DetailedBudget,
-  ANALYTICS_EVENTS,
-  useBudgetsStore,
-  useEvent,
-  useGlobalCopyStore,
-} from '../../common'
-
-import { BudgetRow } from './budgetlist/BudgetRow'
-
-export const BudgetList = observer(() => {
-  const { onEvent } = useEvent()
-  const { budgets: copy } = useGlobalCopyStore()
-  const { detailedBudgets: budgets, setSelectedBudget } = useBudgetsStore()
-
-  const handleBudgetClick = (budget: DetailedBudget) => {
-    setSelectedBudget(budget)
-    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_BUDGET_CATEGORY, {
-      budget_category: budget.category.name,
-      click_type: 'list',
-    })
-  }
-
-  return (
-    <Card elevation={2} sx={{ borderRadius: 2 }}>
-      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.budget_categories_title}</H3>} />
-      <CardContent sx={{ p: 0, ':last-child': { p: 0 } }}>
-        <List>
-          {budgets.map((budget) => (
-            <React.Fragment key={budget.guid}>
-              <BudgetRow budget={budget} onClick={handleBudgetClick} />
-              <Divider />
-            </React.Fragment>
-          ))}
-        </List>
-      </CardContent>
-    </Card>
-  )
-})

package/src/budgets/components/Overview.tsx

@@ -1,156 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { subDays } from 'date-fns/subDays'
-
-import Card from '@mui/material/Card'
-import CardContent from '@mui/material/CardContent'
-import CardHeader from '@mui/material/CardHeader'
-import IconButton from '@mui/material/IconButton'
-import Stack from '@mui/material/Stack'
-import useTheme from '@mui/material/styles/useTheme'
-
-import { H3, Icon, Text } from '@kyper/mui'
-
-import {
-  type StatusBarData,
-  ANALYTICS_EVENTS,
-  buildDynamicCopy,
-  Drawer,
-  formatCurrency,
-  StatusBar,
-  useBudgetsStore,
-  useCategoryStore,
-  useGlobalCopyStore,
-  useRecurringActivityStore,
-  useTransactionStore,
-  useAccountStore,
-  useEvent,
-} from '../../common'
-
-import { ManageIncome } from '../../recurringactivity'
-
-export const Overview = observer(() => {
-  const theme = useTheme()
-
-  const { onEvent } = useEvent()
-  const { accounts } = useAccountStore()
-  const { budgets: copy, common: commonCopy, recurring: recurringCopy } = useGlobalCopyStore()
-  const { incomeCategories, spendCategories } = useCategoryStore()
-  const { detailedBudgets: budgets, totalBudgeted } = useBudgetsStore()
-  const { projectedIncome } = useRecurringActivityStore()
-  const { setFilter } = useTransactionStore()
-
-  const [isIncomeOpen, setIsIncomeOpen] = React.useState(false)
-
-  const [spentTotal, spendingStatus] = React.useMemo(() => {
-    const spentTotal = spendCategories.reduce((total, current) => total + current.totalAmount, 0)
-    let spendingPercentage = spentTotal / totalBudgeted
-    if (spendingPercentage > 1) spendingPercentage = 1
-    let color = theme.palette.success.main
-    if (spendingPercentage > 0.8 && spendingPercentage < 1) {
-      color = theme.palette.warning.main
-    } else if (spendingPercentage >= 1) {
-      color = theme.palette.error.main
-    }
-
-    const spendingStatus = [
-      {
-        color,
-        percentage: `${spendingPercentage}`,
-      },
-    ] as StatusBarData[]
-    return [spentTotal, spendingStatus]
-  }, [budgets, spendCategories])
-
-  const [incomePaid, incomeStatus] = React.useMemo(() => {
-    const incomePaid = Math.abs(
-      incomeCategories.reduce((total, current) => total + current.totalAmount, 0),
-    )
-    let incomePercentage = incomePaid / projectedIncome
-    if (incomePercentage > 1) incomePercentage = 1
-
-    const incomeStatus = [
-      {
-        color: theme.palette.secondary.main,
-        percentage: `${incomePercentage}`,
-      },
-    ]
-    return [incomePaid, incomeStatus]
-  }, [incomeCategories, projectedIncome])
-
-  const handleOpenIncome = () => {
-    setFilter({
-      accounts: accounts.map((account) => account.guid),
-      dateRange: {
-        start: subDays(new Date(), 90),
-        end: new Date(),
-      },
-    })
-    setIsIncomeOpen(true)
-    onEvent(ANALYTICS_EVENTS.BUDGETS_CLICK_EDIT_INCOME)
-  }
-
-  return (
-    <Card elevation={2} sx={{ overflow: 'visible', borderRadius: 2 }}>
-      <CardHeader sx={{ pb: 8, pl: 24 }} title={<H3>{copy.overview_title}</H3>} />
-      <CardContent sx={{ pt: 12, px: 24 }}>
-        <Stack gap={24}>
-          <Stack gap={8}>
-            <Text bold={true} sx={{ mb: 8 }} variant="Body">
-              {copy.spending_title}
-            </Text>
-            <StatusBar data={spendingStatus} height={16} />
-            <Text variant="Small">
-              {
-                buildDynamicCopy(
-                  copy.spending_description,
-                  formatCurrency(spentTotal, '0,0'),
-                  formatCurrency(totalBudgeted, '0,0'),
-                ) as string
-              }
-            </Text>
-          </Stack>
-
-          <Stack gap={8}>
-            <Stack alignItems="center" direction="row" gap={4} mb={-4}>
-              <Text bold={true} variant="Body">
-                {copy.income_title}
-              </Text>
-              <IconButton
-                aria-label={recurringCopy.manage_income}
-                onClick={handleOpenIncome}
-                sx={{ p: 0 }}
-              >
-                <Icon name="edit" />
-              </IconButton>
-            </Stack>
-            <StatusBar data={incomeStatus} height={16} />
-            <Text variant="Small">
-              {
-                buildDynamicCopy(
-                  copy.income_description,
-                  formatCurrency(incomePaid, '0,0'),
-                  formatCurrency(projectedIncome, '0,0'),
-                ) as string
-              }
-            </Text>
-          </Stack>
-        </Stack>
-      </CardContent>
-
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={isIncomeOpen}
-        onClose={() => setIsIncomeOpen(false)}
-        title={recurringCopy.manage_income}
-      >
-        <Stack gap={4}>
-          <Text bold={true} sx={{ mt: 12, mx: 24 }} variant="Small">
-            {copy.income_title}
-          </Text>
-          <ManageIncome />
-        </Stack>
-      </Drawer>
-    </Card>
-  )
-})

package/src/budgets/components/ZeroState.tsx

@@ -1,23 +0,0 @@
-import Stack from '@mui/material/Stack'
-
-import { Icon, Text } from '@kyper/mui'
-
-import { useGlobalCopyStore } from '../../common'
-
-const ZeroState = () => {
-  const { budgets: budgetsCopy } = useGlobalCopyStore()
-
-  return (
-    <Stack alignItems="center" gap={12} sx={{ mx: 24, textAlign: 'center' }}>
-      <Icon name="bubble_chart" size={48} />
-      <Text bold={true} variant="Paragraph">
-        {budgetsCopy.zero_state_title}
-      </Text>
-      <Text sx={{ whiteSpace: 'wrap' }} variant="Paragraph">
-        {budgetsCopy.zero_state_description}
-      </Text>
-    </Stack>
-  )
-}
-
-export default ZeroState

package/src/budgets/components/addbudget/Header.tsx

@@ -1,59 +0,0 @@
-import { observer } from 'mobx-react-lite'
-
-import Stack from '@mui/material/Stack'
-
-import { Text } from '@kyper/mui'
-
-import {
-  formatCurrency,
-  useBudgetsStore,
-  useGlobalCopyStore,
-  useRecurringActivityStore,
-} from '../../../common'
-
-export const Header = observer(() => {
-  const { budgets: copy } = useGlobalCopyStore()
-  const { totalBudgeted } = useBudgetsStore()
-  const { projectedIncome } = useRecurringActivityStore()
-
-  const remaining = projectedIncome - totalBudgeted
-
-  return (
-    <Stack direction="row" justifyContent="center" my={16} spacing={20}>
-      <Stack alignItems="center">
-        <Text bold={true} variant="Body">
-          {formatCurrency(projectedIncome, '0,0')}
-        </Text>
-        <Text color="secondary" variant="Small">
-          {copy.projected_income}
-        </Text>
-      </Stack>
-
-      <Text bold={true} justifyContent="center" variant="Body">
-        {'-'}
-      </Text>
-
-      <Stack alignItems="center">
-        <Text bold={true} variant="Body">
-          {formatCurrency(totalBudgeted, '0,0')}
-        </Text>
-        <Text color="secondary" variant="Small">
-          {copy.budgeted}
-        </Text>
-      </Stack>
-
-      <Text bold={true} justifyContent="center" variant="Body">
-        {'='}
-      </Text>
-
-      <Stack alignItems="center">
-        <Text bold={true} variant="Body">
-          {formatCurrency(remaining, '0,0')}
-        </Text>
-        <Text color="secondary" variant="Small">
-          {copy.remaining}
-        </Text>
-      </Stack>
-    </Stack>
-  )
-})

package/src/budgets/components/addbudget/RecalculateBudgetRow.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Divider from '@mui/material/Divider'
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemText from '@mui/material/ListItemText'
-
-import { CategoryIcon } from '@kyper/mui'
-
-import {
-  type DetailedCategory,
-  buildDynamicCopy,
-  formatCurrency,
-  useBudgetsStore,
-  useGlobalCopyStore,
-} from '../../../common'
-
-interface RecalculateBudgetRowProps {
-  category: DetailedCategory
-}
-
-export const RecalculateBudgetRow: React.FC<RecalculateBudgetRowProps> = observer(
-  ({ category }) => {
-    const { budgets: copy } = useGlobalCopyStore()
-    const { budgets } = useBudgetsStore()
-
-    const secondaryText = React.useMemo(() => {
-      const budget = budgets.find((b) => b.category_guid === category.guid)
-      const part1 = formatCurrency(category.totalAverageAmount, '0,0')
-      const part2 = budget
-        ? buildDynamicCopy(copy.recalculate_previous_budget, formatCurrency(budget.amount, '0,0'))
-        : copy.recalculate_new_budget
-
-      return `${part1} - ${part2}`
-    }, [copy, budgets])
-
-    return (
-      <React.Fragment key={category.guid}>
-        <ListItem>
-          <ListItemButton>
-            <ListItemAvatar>
-              <CategoryIcon categoryGuid={category.guid} variant="filled" />
-            </ListItemAvatar>
-            <ListItemText primary={category.name} secondary={secondaryText} />
-          </ListItemButton>
-        </ListItem>
-        <Divider />
-      </React.Fragment>
-    )
-  },
-)

package/src/budgets/components/addbudget/RecalculateBudgets.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-
-import Button from '@mui/material/Button'
-import List from '@mui/material/List'
-import Box from '@mui/material/Box'
-import Stack from '@mui/material/Stack'
-
-import { Text } from '@kyper/mui'
-
-import { Drawer, useBudgetsStore, useCategoryStore, useGlobalCopyStore } from '../../../common'
-
-import { RecalculateBudgetRow } from './RecalculateBudgetRow'
-
-interface RecalculateBudgetsProps {
-  onRecalculateBudgets?: () => void
-}
-
-export const RecalculateBudgets = ({ onRecalculateBudgets }: RecalculateBudgetsProps) => {
-  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
-  const { spendCategories } = useCategoryStore()
-  const { recalculateBudgets, setAlert } = useBudgetsStore()
-
-  const [isOpen, setIsOpen] = React.useState(false)
-
-  const newBudgetCategories = spendCategories.filter((category) => category.totalAverageAmount > 0)
-
-  const handlePrimaryClick = async () => {
-    await recalculateBudgets(newBudgetCategories)
-
-    setIsOpen(false)
-    setAlert(copy.alert_recalculated_budgets)
-    onRecalculateBudgets?.()
-  }
-
-  return (
-    <React.Fragment>
-      <Button onClick={() => setIsOpen(true)} sx={{ mt: 24, mx: 24 }} variant="text">
-        {copy.recalculate_button}
-      </Button>
-
-      <Text sx={{ mx: 24, my: 16, textAlign: 'center', whiteSpace: 'wrap' }} variant="Paragraph">
-        {copy.recalculate_help}
-      </Text>
-      <Drawer
-        ariaLabelClose={commonCopy.close_aria}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        onPrimaryAction={handlePrimaryClick}
-        title={copy.recalculate_title}
-      >
-        <Stack>
-          <Stack mx={24} my={16}>
-            <Text bold={true} variant="Body">
-              {copy.recalculate_description_top}
-            </Text>
-            <Text variant="ParagraphSmall">{copy.recalculate_description_bottom}</Text>
-          </Stack>
-          <Box bgcolor="background.paper">
-            <List>
-              {newBudgetCategories.map((category) => (
-                <RecalculateBudgetRow category={category} key={category.guid} />
-              ))}
-            </List>
-          </Box>
-        </Stack>
-      </Drawer>
-    </React.Fragment>
-  )
-}

package/src/budgets/components/addbudget/UnbudgetedRow.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import ListItem from '@mui/material/ListItem'
-import ListItemAvatar from '@mui/material/ListItemAvatar'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction'
-import ListItemText from '@mui/material/ListItemText'
-
-import { CategoryIcon, Icon } from '@kyper/mui'
-
-import { type DetailedCategory, Dialog, formatCurrency, useGlobalCopyStore } from '../../../common'
-
-import { BudgetAmount } from '../shared/BudgetAmount'
-
-interface UnbudgetedRowProps {
-  category: DetailedCategory
-  onAddBudget: (category: DetailedCategory, amount: number) => void
-}
-
-export const UnbudgetedRow: React.FC<UnbudgetedRowProps> = observer(({ category, onAddBudget }) => {
-  const { budgets: copy, common: commonCopy } = useGlobalCopyStore()
-
-  const [isAddBudgetOpen, setIsAddBudgetOpen] = React.useState(false)
-  const [amount, setAmount] = React.useState(
-    `${category.totalAmount === 0 ? '' : category.totalAmount}`,
-  )
-
-  return (
-    <React.Fragment>
-      <ListItem key={category.guid}>
-        <ListItemButton onClick={() => setIsAddBudgetOpen(true)}>
-          <ListItemAvatar>
-            <CategoryIcon categoryGuid={category.guid} />
-          </ListItemAvatar>
-          <ListItemText
-            primary={category.name}
-            secondary={formatCurrency(category.totalAmount, '0,0')}
-          />
-          <ListItemSecondaryAction>
-            <Icon name="add" size={20} />
-          </ListItemSecondaryAction>
-        </ListItemButton>
-      </ListItem>
-      <Dialog
-        copy={{ close_aria: commonCopy.close_aria, title: copy.add_title }}
-        disablePrimaryButton={Number(amount) <= 0}
-        isOpen={isAddBudgetOpen}
-        onClose={() => setIsAddBudgetOpen(false)}
-        onPrimaryAction={() => onAddBudget(category, Number(amount))}
-        primaryText={copy.add_save_button}
-      >
-        <BudgetAmount amount={amount} categoryName={category.name} onAmountChanged={setAmount} />
-      </Dialog>
-    </React.Fragment>
-  )
-})

package/src/budgets/components/bubblechart/Bubble.tsx

@@ -1,148 +0,0 @@
-import React from 'react'
-import * as d3 from 'd3'
-
-import Tooltip from '@mui/material/Tooltip'
-
-import { Icon, Text } from '@kyper/mui'
-
-import { Mercury } from './Mercury'
-
-import type { DetailedBudget } from '../../../common'
-import type { BubbleData } from '../BubbleChart'
-
-const LARGE_THRESHOLD = 75
-const MEDIUM_THRESHOLD = 50
-
-interface BubbleProps {
-  bubble: BubbleData
-  isDraggable: boolean
-  onClick?: (budget: DetailedBudget) => void
-}
-
-export function Bubble({ bubble, isDraggable, onClick = () => {} }: BubbleProps) {
-  const [showTooltip, setShowTooltip] = React.useState(false)
-
-  React.useEffect(() => {
-    document.fonts.ready.then(() => {
-      // Due to icon font location on Safari, we have determine x after the icon font has loaded
-      const iconText = d3.select(`.icon-${icon}`) as d3.Selection<
-        SVGTextElement,
-        BubbleData,
-        HTMLElement,
-        any
-      >
-      const textLength = iconText.node()?.getComputedTextLength()
-      iconText.attr('x', () => {
-        if (radius < LARGE_THRESHOLD) {
-          return textLength ? textLength / 2 - 12 : 12
-        }
-        return textLength ? textLength / 2 - 16 : 16
-      })
-    })
-  }, [])
-
-  if (!bubble) return undefined
-
-  const {
-    budgetColors: { background, text: textColor },
-    category: { icon, name },
-    guid,
-    description,
-    radius,
-    x,
-    y,
-  } = bubble
-
-  let iconY = 13
-  if (radius > 75) iconY = -20
-  else if (radius > 50) iconY = -6
-
-  const tooltipText = `${bubble.category.name}: ${description}`
-  const tooltipPopperSlot = {
-    modifiers: [
-      {
-        name: 'offset',
-        options: { offset: [0, 15] },
-      },
-    ],
-  }
-
-  return (
-    <g
-      className="bubble"
-      id={`bubble-${guid}`}
-      key={guid}
-      onClick={() => onClick(bubble)}
-      onMouseEnter={() => setShowTooltip(true)}
-      onMouseLeave={() => setShowTooltip(false)}
-      style={{ cursor: isDraggable ? 'pointer' : 'default' }}
-      textAnchor="middle"
-      x={x}
-      y={y}
-    >
-      <Tooltip
-        followCursor={true}
-        open={showTooltip}
-        slotProps={{ popper: tooltipPopperSlot }}
-        title={tooltipText}
-      >
-        <circle fill={background} id={`circle-${guid}`} r={radius} />
-      </Tooltip>
-
-      <Icon
-        className={`icon-${icon}`}
-        component="text"
-        name={icon}
-        size={radius <= LARGE_THRESHOLD ? 24 : 32}
-        sx={{
-          fill: textColor,
-        }}
-        /* @ts-expect-error Property doesn't exist on type */
-        y={iconY}
-      />
-
-      {radius > LARGE_THRESHOLD && (
-        <Text
-          bold={true}
-          component="text"
-          id={`budget-category-${guid}`}
-          sx={{ fill: textColor }}
-          variant="Small"
-          /* @ts-expect-error Property doesn't exist on type */
-          y={4}
-        >
-          {name}
-        </Text>
-      )}
-
-      {radius > MEDIUM_THRESHOLD && (
-        <Text
-          bold={true}
-          component="text"
-          id={`budget-description-${guid}-1`}
-          sx={{ fill: textColor }}
-          variant="Body"
-          /* @ts-expect-error Property doesn't exist on type */
-          y={radius <= LARGE_THRESHOLD ? 12 : 24}
-        >
-          {radius <= LARGE_THRESHOLD ? description.split(' ')[0] : description}
-        </Text>
-      )}
-
-      {radius <= LARGE_THRESHOLD && radius > MEDIUM_THRESHOLD && (
-        <Text
-          component="text"
-          id={`budget-description-${guid}-2`}
-          sx={{ fill: textColor }}
-          variant="XSmall"
-          /* @ts-expect-error Property doesn't exist on type */
-          y={28}
-        >
-          {description.split(' ')[1]}
-        </Text>
-      )}
-
-      <Mercury bubble={bubble} />
-    </g>
-  )
-}

package/src/budgets/components/bubblechart/Mercury.tsx

@@ -1,57 +0,0 @@
-import React from 'react'
-import * as d3 from 'd3'
-
-import useTheme from '@mui/material/styles/useTheme'
-
-import { arcTween } from '../../utils/BubblesSVG'
-
-import type { BubbleData } from '../BubbleChart'
-
-const PROGRESS_INDICATOR_SIZE = 5
-const PROGRESS_DURATION = 2000
-
-interface MercuryProps {
-  bubble: BubbleData
-}
-
-export function Mercury({ bubble }: MercuryProps) {
-  const theme = useTheme()
-  const {
-    guid,
-    budgetColors: { mercury },
-    radius,
-  } = bubble
-
-  const bubbleId = `mercury-${guid}`
-
-  React.useEffect(() => {
-    // Remove previous status arc
-    d3.select(`.${bubbleId}`).selectAll('.status').remove()
-
-    // Append updated status arc
-    d3.select(`.${bubbleId}`)
-      .append('path')
-      .transition()
-      .duration(PROGRESS_DURATION)
-      .delay(0)
-      .attr('class', 'status')
-      .attr('style', `fill: ${mercury}; fill-opacity: 1;`)
-      .attrTween('d', () => arcTween(bubble))
-  }, [bubble])
-
-  const trackArc = d3
-    .arc<number>()
-    .innerRadius((radius: number) => radius - 2 * PROGRESS_INDICATOR_SIZE)
-    .outerRadius((radius: number) => radius - PROGRESS_INDICATOR_SIZE)
-    .startAngle(0)
-    .endAngle(2 * Math.PI)
-
-  return (
-    <g className={bubbleId}>
-      <path
-        d={trackArc(radius) || ''}
-        style={{ fill: theme.palette.common.white, fillOpacity: 0.35 }}
-      />
-    </g>
-  )
-}