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

package/src/common/components/ResponsiveButton.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import Button from '@mui/material/Button'
-import IconButton from '@mui/material/IconButton'
-import Tooltip from '@mui/material/Tooltip'
-import useTheme from '@mui/material/styles/useTheme'
-
-interface ResponsiveButtonProps {
-  icon: React.ReactElement
-  label: string
-  onClick?: () => void
-  placement?:
-    | 'bottom-end'
-    | 'bottom-start'
-    | 'bottom'
-    | 'left-end'
-    | 'left-start'
-    | 'left'
-    | 'right-end'
-    | 'right-start'
-    | 'right'
-    | 'top-end'
-    | 'top-start'
-    | 'top'
-  tooltipText: string
-  variant?: 'contained' | 'outlined' | 'text'
-}
-
-const ResponsiveButton: React.FC<ResponsiveButtonProps> = ({
-  icon,
-  label,
-  onClick,
-  placement = 'bottom',
-  tooltipText,
-  variant = 'text',
-}) => {
-  const theme = useTheme()
-
-  return (
-    <React.Fragment>
-      <Button
-        onClick={onClick}
-        startIcon={icon}
-        sx={{
-          [theme.breakpoints.down('lg')]: { display: 'none' },
-          [theme.breakpoints.up('lg')]: { display: 'inline-flex' },
-        }}
-        title={tooltipText}
-        variant={variant}
-      >
-        {label}
-      </Button>
-      <Tooltip
-        describeChild={true}
-        placement={placement}
-        sx={{ display: { xs: 'inline-flex', lg: 'none' } }}
-        title={tooltipText}
-      >
-        <IconButton onClick={onClick}>{icon}</IconButton>
-      </Tooltip>
-    </React.Fragment>
-  )
-}
-
-export default ResponsiveButton

package/src/common/components/SearchBox.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Box from '@mui/material/Box'
-import IconButton from '@mui/material/IconButton'
-import InputAdornment from '@mui/material/InputAdornment'
-
-import { Icon, TextField, useTokens } from '@kyper/mui'
-
-export interface SearchBoxProps {
-  ariaLabel?: string
-  cancelAriaLabel?: string
-  onChange: (value: string) => void
-  placeholder?: string
-  searchValue: string
-}
-
-const SearchBox: React.FC<SearchBoxProps> = ({
-  ariaLabel = 'Search',
-  cancelAriaLabel = 'Cancel Search',
-  onChange,
-  placeholder = 'Search',
-  searchValue,
-}) => {
-  const tokens = useTokens()
-
-  const cancelButton = (
-    <IconButton
-      aria-label={cancelAriaLabel}
-      className="mx-cat-cancel-search-button"
-      onClick={() => onChange('')}
-    >
-      <Icon name="cancel" size={24} />
-    </IconButton>
-  )
-
-  return (
-    <Box className="mx-cmn-search-box" px={tokens.Spacing.Large} py={tokens.Spacing.Medium}>
-      <TextField
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <Icon color="disabled" name="search" size={26} />
-            </InputAdornment>
-          ),
-          endAdornment: (
-            <InputAdornment position="end" sx={{ p: 0 }}>
-              {searchValue ? cancelButton : null}
-            </InputAdornment>
-          ),
-        }}
-        aria-label={ariaLabel}
-        name="search"
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-        placeholder={placeholder}
-        // TODO: Theme needs to have the background color defaulted to paper for TextField
-        sx={{ bgcolor: 'background.paper', width: '100%' }}
-        value={searchValue}
-      />
-    </Box>
-  )
-}
-
-export default observer(SearchBox)

package/src/common/components/SelectionBox.tsx

@@ -1,64 +0,0 @@
-import React from 'react'
-
-import Box from '@mui/material/Box'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import Radio from '@mui/material/Radio'
-import type { SxProps } from '@mui/material/styles'
-import useTheme from '@mui/material/styles/useTheme'
-import Tooltip from '@mui/material/Tooltip'
-
-interface SelectionBoxProps {
-  checked?: boolean
-  label: string
-  sx?: SxProps
-  tooltip?: string
-  value: string | number
-}
-
-/** TODO: Move this component to KyperMUI **/
-const SelectionBox: React.FC<SelectionBoxProps> = ({
-  checked = false,
-  label,
-  sx = {},
-  tooltip = '',
-  value,
-}) => {
-  const theme = useTheme()
-
-  /** TODO: Add new theme color to handle this color and remove the mode check **/
-  const greyColor =
-    theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]
-  const borderColor = checked ? theme.palette.action.active : greyColor
-  const borderSize = checked ? 3 : 1
-
-  return (
-    <Box
-      bgcolor="background.paper"
-      border={`${borderSize}px solid`}
-      borderColor={borderColor}
-      borderRadius={2}
-      mt={-2}
-      mx={8}
-      pr={8}
-      py={4}
-      sx={{ '&:hover': { borderColor: theme.palette.action.active }, ...sx }}
-    >
-      <Tooltip title={tooltip}>
-        <FormControlLabel
-          control={
-            <Radio
-              disableRipple={true}
-              sx={{ '&.Mui-checked': { color: theme.palette.action.active } }}
-            />
-          }
-          label={label}
-          labelPlacement="start"
-          sx={{ ml: 0, pl: 8 }}
-          value={value}
-        />
-      </Tooltip>
-    </Box>
-  )
-}
-
-export default SelectionBox

package/src/common/components/SubheaderRow.tsx

@@ -1,22 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-
-import Box from '@mui/material/Box'
-
-import { Text } from '@kyper/mui'
-
-interface SubheaderRowProps {
-  bgcolor?: string
-}
-
-const SubheaderRow: React.FC<PropsWithChildren<SubheaderRowProps>> = ({
-  bgcolor = 'background.default',
-  children,
-}) => (
-  <Box display="inline-block" pb={4} pl={24} pt={4} sx={{ bgcolor, width: '100%' }}>
-    <Text bold={true} variant="XSmall">
-      {children}
-    </Text>
-  </Box>
-)
-
-export default SubheaderRow

package/src/common/components/TabContentContainer.tsx

@@ -1,28 +0,0 @@
-interface TabContentProps {
-  children?: React.ReactNode
-  index: number
-  name: string
-  value: number
-}
-
-const TabContentContainer: React.FC<TabContentProps> = ({
-  children,
-  index,
-  name,
-  value,
-  ...rest
-}) => {
-  return (
-    <div
-      aria-labelledby={`${name}-tab-${index}`}
-      hidden={value !== index}
-      id={`${name}-tabpanel-${index}`}
-      role="tabpanel"
-      {...rest}
-    >
-      {value === index && children}
-    </div>
-  )
-}
-
-export default TabContentContainer

package/src/common/components/WidgetContainer.tsx

@@ -1,239 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import { observer } from 'mobx-react-lite'
-
-import Button from '@mui/material/Button'
-import Box from '@mui/material/Box'
-import Card from '@mui/material/Card'
-import CardHeader from '@mui/material/CardHeader'
-import CardContent from '@mui/material/CardContent'
-import Divider from '@mui/material/Divider'
-import IconButton from '@mui/material/IconButton'
-import Stack from '@mui/material/Stack'
-import type { SxProps } from '@mui/material/styles'
-
-import { H1, H3, Icon } from '@kyper/mui'
-
-import { AccountFilter } from './accountfilter'
-import { DateRangeSelector } from './daterangeselector'
-import { ANALYTICS_EVENTS, useEvent } from '../../common'
-import { useGlobalCopyStore, useGlobalUiStore } from '../context'
-import { useScreenSize } from '../hooks'
-import { Account } from '../types'
-import { CalendarActions, DateRangeSelectorCopy } from './daterangeselector/DateRangeSelector'
-
-import { WidgetContainerProvider } from '../context'
-import { useDimensions } from '../hooks/useDimensions'
-
-type Action = {
-  label: string
-  iconName: string
-  onClick: () => void
-}
-
-interface WidgetContainerProps {
-  accountOptions?: Account[]
-  actions?: Action[]
-  calendarActions?: CalendarActions
-  className?: string
-  dateRange?: { start: Date; end: Date }
-  dateRangeVariant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'
-  hasDivider?: boolean
-  onBackClick?: () => void
-  onAccountsFilterClick?: () => void
-  showDividerAboveDateSelector?: boolean
-  sx?: SxProps
-  title?: string
-}
-
-const WidgetContainer: React.FC<PropsWithChildren<WidgetContainerProps>> = ({
-  accountOptions,
-  actions = [],
-  calendarActions,
-  children,
-  dateRange,
-  dateRangeVariant,
-  className = 'mx-cmn-widget',
-  hasDivider = false,
-  onBackClick,
-  onAccountsFilterClick,
-  showDividerAboveDateSelector = true,
-  sx = {},
-  title = '',
-}) => {
-  const [containerRef, { height, width }] = useDimensions()
-  const { onEvent } = useEvent()
-
-  const { isDesktop, isMobile, isTablet } = useScreenSize()
-  const { displayedDateRange, selectedAccountGuids, setSelectedAccountGuids } = useGlobalUiStore()
-  const { common: commonCopy } = useGlobalCopyStore()
-
-  const handleBackClick = () => {
-    if (onBackClick) {
-      onBackClick()
-      onEvent(ANALYTICS_EVENTS.WIDGET_BACK_CLICK)
-    }
-  }
-
-  const accountFilterCopy = {
-    accountFilterOptionsCopy: {
-      accountTypeAccounts: commonCopy.account_filter.account_type_accounts,
-      cancelButton: commonCopy.cancel_button,
-      filterButton: commonCopy.filter_button,
-      filterButtonAria: commonCopy.account_filter.filter_button_generic_aria,
-      selectAllAccounts: commonCopy.account_filter.select_all_accounts,
-      toggleAccountTypeAccounts: commonCopy.account_filter.toggle_account_type_accounts,
-      unselectAllAccounts: commonCopy.account_filter.unselect_all_accounts,
-      zeroStateButton: commonCopy.account_filter.zero_state_button,
-      zeroStateDescription: commonCopy.account_filter.zero_state_description,
-      zeroStateTitle: commonCopy.account_filter.zero_state_title,
-    },
-    title: commonCopy.account_filter.title,
-  }
-
-  const dateRangeSelectorCopy = {
-    dateRangePickerCopy: {
-      dateRangeFrom: commonCopy.date_range_picker.from,
-      dateRangeTo: commonCopy.date_range_picker.to,
-      dateRangeCustom: commonCopy.date_range_picker.custom,
-      dateRangeSelectARange: commonCopy.date_range_picker.select_range,
-      dateRangeThisMonth: commonCopy.date_range_picker.this_month,
-      dateRangeLastMonth: commonCopy.date_range_picker.last_month,
-      dateRangeLast30Days: commonCopy.date_range_picker.last_30_days,
-      dateRangeLast90Days: commonCopy.date_range_picker.last_90_days,
-      dateRangeYTD: commonCopy.date_range_picker.ytd,
-      dateRangeLastYear: commonCopy.date_range_picker.last_year,
-      dateRangeSelect: commonCopy.date_range_picker.select,
-    },
-    dateRangeEditApply: commonCopy.date_range_picker.edit_apply,
-    dateRangeEditTitle: commonCopy.date_range_picker.edit_title,
-    dateRangeNextAria: commonCopy.date_range_picker.next_aria,
-    dateRangePreviousAria: commonCopy.date_range_picker.previous_aria,
-  } as DateRangeSelectorCopy
-
-  const startDate = dateRange ? dateRange.start : displayedDateRange.start
-  const endDate = dateRange ? dateRange.end : displayedDateRange.end
-
-  return (
-    <Card
-      className={className}
-      sx={{
-        borderRadius: '8px',
-        ...(isMobile && {
-          px: 4,
-        }),
-        '& .mx-cmn-date-range-selector': {
-          ...((isMobile || isTablet) && {
-            textAlign: 'center',
-          }),
-        },
-        ...sx,
-      }}
-    >
-      <CardHeader
-        action={
-          <Stack alignItems="center" flexDirection="row">
-            {isDesktop && calendarActions && (
-              <Box sx={{ flexGrow: 1 }}>
-                <DateRangeSelector
-                  calendarActions={calendarActions}
-                  copy={dateRangeSelectorCopy}
-                  range={[startDate, endDate]}
-                  shouldShrinkToIcon={false}
-                  variant={dateRangeVariant}
-                />
-              </Box>
-            )}
-            {accountOptions && (
-              <AccountFilter
-                accounts={accountOptions}
-                copy={accountFilterCopy}
-                onFilterClick={(guids) => {
-                  const selAcctGuids = accountOptions
-                    .filter((account) => guids.includes(account.guid))
-                    .map((account) => account.guid)
-
-                  setSelectedAccountGuids(selAcctGuids)
-                  onAccountsFilterClick?.()
-                }}
-                selectedAccountGuids={selectedAccountGuids}
-                showAccountNumbers={false}
-                sx={{ '& .mx-cmn-account-filter-title': { fontSize: 15 }, mx: 4 }}
-                variant="text"
-              />
-            )}
-            {actions.map((action) =>
-              isDesktop || isTablet ? (
-                <Button
-                  key={action.iconName}
-                  onClick={action.onClick}
-                  startIcon={<Icon name={action.iconName} />}
-                  sx={{ mx: 4 }}
-                >
-                  {action.label}
-                </Button>
-              ) : (
-                <IconButton
-                  aria-label={action.label}
-                  key={action.iconName}
-                  onClick={action.onClick}
-                >
-                  <Icon name={action.iconName} />
-                </IconButton>
-              ),
-            )}
-          </Stack>
-        }
-        sx={{
-          '& .MuiCardHeader-action': {
-            ...(calendarActions && isDesktop && { flexGrow: 1 }),
-            ...((isMobile || isTablet) && {
-              alignSelf: 'center',
-            }),
-          },
-          p: isDesktop ? 48 : 24,
-          pb: 0,
-        }}
-        title={
-          isDesktop || isTablet ? (
-            <H1>{title}</H1>
-          ) : (
-            <Stack alignItems="center" flexDirection="row">
-              {isMobile && onBackClick && (
-                <IconButton
-                  aria-label={commonCopy.back_to_dashboard}
-                  onClick={handleBackClick}
-                  sx={{ ml: -16, mr: 16 }}
-                >
-                  <Icon name="arrow_back" />
-                </IconButton>
-              )}
-              <H3>{title}</H3>
-            </Stack>
-          )
-        }
-      />
-
-      {hasDivider && <Divider sx={{ mt: isDesktop ? 48 : 24 }} />}
-
-      {calendarActions && (isMobile || isTablet) && (
-        <Stack gap={24} justifyContent="center" sx={{ mt: 16 }}>
-          {showDividerAboveDateSelector && <Divider />}
-          <DateRangeSelector
-            calendarActions={calendarActions}
-            copy={dateRangeSelectorCopy}
-            range={[startDate, endDate]}
-            shouldShrinkToIcon={false}
-            variant={dateRangeVariant}
-          />
-        </Stack>
-      )}
-      <CardContent ref={containerRef} sx={{ p: 0 }}>
-        <WidgetContainerProvider availableHeight={height} availableWidth={width}>
-          {children}
-        </WidgetContainerProvider>
-      </CardContent>
-    </Card>
-  )
-}
-
-export default observer(WidgetContainer)

package/src/common/components/accountfilter/AccountFilter.tsx

@@ -1,133 +0,0 @@
-import React, { FC } from 'react'
-
-import Button from '@mui/material/Button'
-import { Icon } from '@kyper/mui'
-import Tooltip from '@mui/material/Tooltip'
-import Box from '@mui/material/Box'
-import IconButton from '@mui/material/IconButton'
-import { type SxProps } from '@mui/material/styles'
-
-import { AccountFilterOptions } from './AccountFilterOptions'
-import { setupMappedSelectedOptions } from '../../utils/AccountFilter'
-
-import type { Account } from '../../types'
-import type { AccountFilterOptionsCopy } from './AccountFilterOptions'
-import type { MappedAccount, MappedOptions } from '../../utils/AccountFilter'
-import { useScreenSize } from '../../hooks'
-
-export type AccountFilterCopy = {
-  accountFilterOptionsCopy: AccountFilterOptionsCopy
-  title: string
-}
-
-// TODO: pass in copy to account filter like this when refactored
-// const accountFilterCopy = {
-//   ...copy.account_filter,
-//   accounts_type: copy.full_view.accounts_type,
-//   title: copy.full_view.account_filter_title,
-// }
-
-export interface AccountFilterProps {
-  accounts: Account[]
-  copy: AccountFilterCopy
-  onFilterClick: (selected: string[]) => void
-  onConnectAccountClick?: () => void
-  selectedAccountGuids: string[]
-  showAccountNumbers: boolean
-  sx?: SxProps
-  variant?: 'outlined' | 'text'
-}
-
-const AccountFilter: FC<AccountFilterProps> = ({
-  accounts,
-  copy,
-  onFilterClick,
-  onConnectAccountClick = () => {},
-  selectedAccountGuids,
-  showAccountNumbers,
-  sx = {},
-  variant = 'outlined',
-}) => {
-  const { isMobile } = useScreenSize()
-
-  const [accountFilterButtonEl, setAccountFilterButtonEl] =
-    React.useState<HTMLButtonElement | null>(null)
-
-  const [selectedOptions, setSelectedOptions] = React.useState<MappedOptions>(
-    setupMappedSelectedOptions(accounts, selectedAccountGuids),
-  )
-
-  React.useEffect(() => {
-    setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))
-  }, [accounts, selectedAccountGuids])
-
-  const onClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAccountFilterButtonEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAccountFilterButtonEl(null)
-  }
-
-  return (
-    <Box className="mx-cmn-account-filter" m={4} sx={{ ...sx }}>
-      {isMobile ? (
-        <Tooltip id="filter-accounts" placement="bottom" title={copy.title}>
-          <IconButton
-            aria-controls="filter_accounts"
-            aria-describedby="filter-accounts"
-            aria-haspopup={true}
-            aria-label={copy.title}
-            onClick={onClick}
-          >
-            <Icon name="filter_alt" />
-          </IconButton>
-        </Tooltip>
-      ) : (
-        <Button
-          aria-controls="filter_accounts"
-          aria-haspopup={true}
-          aria-label={copy.title}
-          onClick={onClick}
-          startIcon={<Icon name="filter_alt" />}
-          variant={variant}
-        >
-          {copy.title}
-        </Button>
-      )}
-
-      <AccountFilterOptions
-        accountFilterButtonEl={accountFilterButtonEl}
-        accounts={accounts}
-        copy={copy.accountFilterOptionsCopy}
-        handleClose={handleClose}
-        onAccountClick={(account) => {
-          setSelectedOptions({ ...selectedOptions, [account.guid]: !selectedOptions[account.guid] })
-        }}
-        onAccountGroupClick={(accountType, mappedAccounts, allSelected) => {
-          const selectedOptionsClone = { ...selectedOptions }
-
-          mappedAccounts[accountType].forEach((account: MappedAccount) => {
-            selectedOptionsClone[account.guid] = !allSelected
-          })
-
-          setSelectedOptions(selectedOptionsClone)
-        }}
-        onCancelClick={() => {
-          setSelectedOptions(setupMappedSelectedOptions(accounts, selectedAccountGuids))
-          handleClose()
-        }}
-        onConnectAccountClick={onConnectAccountClick}
-        onFilterClick={() => {
-          onFilterClick(Object.keys(selectedOptions).filter((guid) => selectedOptions[guid]))
-          handleClose()
-        }}
-        selectedOptions={selectedOptions}
-        setSelectedOptions={setSelectedOptions}
-        showAccountNumbers={showAccountNumbers}
-      />
-    </Box>
-  )
-}
-
-export default AccountFilter