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

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

@@ -1,263 +0,0 @@
-import React, { useMemo } from 'react'
-
-import Button from '@mui/material/Button'
-import FormControlLabel from '@mui/material/FormControlLabel'
-import List from '@mui/material/List'
-import ListItem from '@mui/material/ListItem'
-import ListItemButton from '@mui/material/ListItemButton'
-import ListSubheader from '@mui/material/ListSubheader'
-import ListItemText from '@mui/material/ListItemText'
-import Popover from '@mui/material/Popover'
-import Stack from '@mui/material/Stack'
-import CheckBox from '@mui/material/Checkbox'
-import { AccountsIcon, P } from '@kyper/mui'
-import { setupMappedAccounts } from '../../utils/AccountFilter'
-import type { Account } from '../../types/Account'
-import type { MappedAccount, MappedAccounts, MappedOptions } from '../../utils/AccountFilter'
-import { buildDynamicCopy } from '../../utils'
-
-export type AccountFilterOptionsCopy = {
-  accountTypeAccounts: string
-  cancelButton: string
-  filterButton: string
-  filterButtonAria: string
-  selectAllAccounts: string
-  toggleAccountTypeAccounts: string
-  unselectAllAccounts: string
-  zeroStateButton: string
-  zeroStateDescription: string
-  zeroStateTitle: string
-}
-
-interface AccountFilterOptionsProps {
-  accounts: Account[]
-  copy: AccountFilterOptionsCopy
-  accountFilterButtonEl: HTMLButtonElement | null
-  onAccountClick: (account: MappedAccount) => void
-  onAccountGroupClick: (
-    accountType: string,
-    mappedAccounts: MappedAccounts,
-    allGroupedAccountsSelected: boolean,
-  ) => void
-  onCancelClick: () => void
-  onConnectAccountClick: () => void
-  onFilterClick: () => void
-  selectedOptions: MappedOptions
-  setSelectedOptions: (value: React.SetStateAction<MappedOptions>) => void
-  handleClose: () => void
-  showAccountNumbers: boolean
-}
-
-export const AccountFilterOptions: React.FC<AccountFilterOptionsProps> = ({
-  accounts,
-  accountFilterButtonEl,
-  copy,
-  onAccountClick,
-  onAccountGroupClick,
-  onCancelClick,
-  onConnectAccountClick,
-  onFilterClick,
-  selectedOptions,
-  setSelectedOptions,
-  handleClose,
-  showAccountNumbers,
-}) => {
-  const mappedAccounts = useMemo(() => setupMappedAccounts(accounts), [accounts])
-  const shouldShowZeroState = accounts.length < 1
-  const isOpen = Boolean(accountFilterButtonEl)
-
-  const isAllChecked = Object.values(selectedOptions).every((value) => Boolean(value))
-
-  return (
-    <Popover
-      anchorEl={accountFilterButtonEl}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'left',
-      }}
-      onClose={handleClose}
-      open={isOpen}
-      sx={{ maxHeight: 400, maxWidth: shouldShowZeroState ? '100%' : 300 }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'left',
-      }}
-    >
-      {shouldShowZeroState ? (
-        <Stack
-          sx={{
-            alignItems: 'center',
-            flexDirection: 'column',
-            padding: 16,
-            textAlign: 'center',
-            width: 320,
-            maxWidth: '100%',
-          }}
-        >
-          <AccountsIcon size={32} />
-          <P bold={true} mt={12}>
-            {copy.zeroStateTitle}
-          </P>
-          <P mt={12}>{copy.zeroStateDescription}</P>
-          <Button onClick={onConnectAccountClick}>{copy.zeroStateButton}</Button>
-        </Stack>
-      ) : (
-        <form onSubmit={handleClose}>
-          <List
-            className="mx-cmn-account-options"
-            dense={true}
-            id="filter_accounts"
-            sx={{
-              overflow: 'auto',
-              maxHeight: 300,
-              minWidth: 268,
-              '& .MuiFormControlLabel-root': {
-                m: 4,
-                borderRadius: 1,
-                width: '100%',
-                '&:hover': {
-                  bgcolor: 'background.default',
-                },
-                '&:focus-within': {
-                  outline: '2px solid rgba(82, 138, 224, 0.8)',
-                  outlineOffset: '2px',
-                },
-                '& .MuiFormControlLabel-label': {
-                  fontSize: 13,
-                },
-              },
-            }}
-          >
-            <ListItem disableGutters={true} disablePadding={true}>
-              <FormControlLabel
-                control={
-                  <CheckBox
-                    checked={isAllChecked}
-                    data-ui-test={`checked-${isAllChecked}`}
-                    disableRipple={true}
-                    onChange={() => {
-                      const updatedOptions: MappedOptions = {}
-
-                      Object.keys(selectedOptions).forEach((key) => {
-                        updatedOptions[key] = !isAllChecked
-                      })
-                      setSelectedOptions(updatedOptions)
-                    }}
-                    size="small"
-                    sx={{
-                      '&.Mui-focusVisible': {
-                        outline: 'none',
-                        boxShadow: 'none',
-                      },
-                    }}
-                  />
-                }
-                label={isAllChecked ? copy.unselectAllAccounts : copy.selectAllAccounts}
-              />
-            </ListItem>
-            {Object.keys(mappedAccounts).map((accountType) => {
-              const groupedAccounts = mappedAccounts[accountType]
-              const allGroupedAccountsSelected = groupedAccounts.every(
-                (account: MappedAccount) => selectedOptions[account.guid],
-              )
-
-              return (
-                <ListItem disableGutters={true} disablePadding={true} key={accountType}>
-                  <List
-                    aria-label={buildDynamicCopy(copy.accountTypeAccounts, accountType) as string}
-                    className="mx-cmn-account-options-group"
-                    dense={true}
-                    subheader={
-                      <ListSubheader disableGutters={true}>
-                        <ListItemButton
-                          aria-label={
-                            buildDynamicCopy(copy.toggleAccountTypeAccounts, accountType) as string
-                          }
-                          aria-pressed={allGroupedAccountsSelected}
-                          disableGutters={true}
-                          onClick={() =>
-                            onAccountGroupClick(
-                              accountType,
-                              mappedAccounts,
-                              allGroupedAccountsSelected,
-                            )
-                          }
-                          sx={{
-                            paddingLeft: 12,
-                            minHeight: 40,
-                            justifyContent: 'left',
-                          }}
-                        >
-                          <ListItemText
-                            primary={accountType}
-                            primaryTypographyProps={{ variant: 'XSmall', fontWeight: 'bold' }}
-                          />
-                        </ListItemButton>
-                      </ListSubheader>
-                    }
-                    sx={{ overflow: 'auto', width: '100%' }}
-                  >
-                    {groupedAccounts.map((account: MappedAccount) => {
-                      const isSelected = selectedOptions[account.guid]
-                      const label = `${account.name}${
-                        showAccountNumbers && account.accountNumber
-                          ? ` *${account.accountNumber.slice(-4)}`
-                          : ''
-                      }`
-
-                      return (
-                        <ListItem
-                          className="mx-cmn-account-options-container"
-                          disableGutters={true}
-                          disablePadding={true}
-                          key={account.guid}
-                        >
-                          <FormControlLabel
-                            control={
-                              <CheckBox
-                                checked={isSelected}
-                                data-ui-test={`checked-${isSelected}`}
-                                disableRipple={true}
-                                id={account.guid}
-                                onChange={() => {
-                                  onAccountClick(account)
-                                }}
-                                size="small"
-                                sx={{
-                                  '&.Mui-focusVisible': {
-                                    outline: 'none',
-                                    boxShadow: 'none',
-                                  },
-                                }}
-                              />
-                            }
-                            label={label}
-                          />
-                        </ListItem>
-                      )
-                    })}
-                  </List>
-                </ListItem>
-              )
-            })}
-          </List>
-          <Stack direction="row" justifyContent="flex-end" padding={12} spacing={16} width="100%">
-            <Button onClick={onCancelClick} variant="outlined">
-              {copy.cancelButton}
-            </Button>
-            <Button
-              aria-label={copy.filterButtonAria}
-              color="primary"
-              onClick={onFilterClick}
-              variant="contained"
-            >
-              {copy.filterButton}
-            </Button>
-          </Stack>
-        </form>
-      )}
-    </Popover>
-  )
-}
-
-AccountFilterOptions.displayName = 'AccountFilterOptions'

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

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

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

@@ -1,123 +0,0 @@
-import React from 'react'
-import { css, keyframes } from '@mxenabled/cssinjs'
-
-import { Text, useTokens } from '@kyper/mui'
-
-interface BarProps {
-  ariaLabel?: string
-  color: string
-  height: number
-  index: number
-  label: string
-  onClick?: (index: number) => void
-  selectedIndex?: number
-  value: number
-}
-
-/**
- * The Bar component is what displays the colored (optionally clickable) bar
- *
- * @param ariaLabel OPTIONAL aria label used on the bar
- * @param color The color of the bar
- * @param height The pixel height of the bar
- * @param index The index of the bar
- * @param label The label to use above (on positive bars) or below (on negative bars)
- * @param onClick OPTIONAL function to call if the bar is clicked
- * @param selectedIndex OPTIONAL indicates the selected bar
- * @param value Value representing the bar
- */
-const Bar: React.FC<BarProps> = ({
-  ariaLabel,
-  color,
-  height,
-  index,
-  label,
-  onClick,
-  selectedIndex,
-  value,
-}) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens, color, height)
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (onClick && (event.key === ' ' || event.key === 'Enter')) {
-      onClick(index)
-    }
-  }
-
-  const labelColor =
-    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'
-
-  const BarLabel = () => (
-    <Text
-      aria-hidden={true}
-      bold={selectedIndex === index}
-      className="mx-cmn-bar-text"
-      color={labelColor}
-      component="div"
-      variant="Small"
-    >
-      {label}
-    </Text>
-  )
-
-  return (
-    <div className={`mx-cmn-bar-container ${styles} ${value < 0 ? 'mx-cmn-negative' : ''}`}>
-      {/* Display the value on top for positive values */}
-      {value >= 0 && <BarLabel />}
-
-      <div
-        aria-label={ariaLabel}
-        className={`mx-cmn-bar ${onClick ? 'mx-cmn-clickable' : ''} ${
-          value < 0 ? 'mx-cmn-bar-negative' : ''
-        }`}
-        onClick={onClick ? () => onClick?.(index) : undefined}
-        onKeyDown={handleKeyDown}
-        role={ariaLabel ? 'button' : undefined}
-        tabIndex={ariaLabel ? 0 : undefined}
-      />
-
-      {/* Display the value on bottom for negative values */}
-      {value < 0 && <BarLabel />}
-    </div>
-  )
-}
-
-const getStyles = (tokens: any, color: string, height: number) => {
-  const frameName = `expandBar-${Math.round(height)}`
-  const expandAnimation = keyframes(frameName, { from: { height: 0 }, to: { height } })
-
-  return css({
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-end',
-    height: '100%',
-    '&.mx-cmn-negative': {
-      justifyContent: 'flex-start',
-    },
-    '& .mx-cmn-bar': {
-      animationDelay: '.5s',
-      animationDuration: '1s',
-      animationFillMode: 'forwards',
-      animationName: expandAnimation,
-      animationTimingFunction: tokens.Easing.Default,
-      backgroundColor: color,
-      borderRadius: `${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px 0 0`,
-      maxHeight: height,
-    },
-    '& .mx-cmn-bar-negative': {
-      borderRadius: `0 0 ${tokens.BorderRadius.Medium}px ${tokens.BorderRadius.Medium}px`,
-      marginTop: -tokens.Spacing.XTiny,
-    },
-    '& .mx-cmn-bar-text': {
-      display: 'flex',
-      justifyContent: 'center',
-      marginBottom: tokens.Spacing.Tiny,
-      marginTop: tokens.Spacing.Tiny,
-      whiteSpace: 'nowrap',
-      width: '100%',
-    },
-  })
-}
-
-export default Bar

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

@@ -1,136 +0,0 @@
-import React from 'react'
-import { css } from '@mxenabled/cssinjs'
-
-import { useTokens } from '@kyper/mui'
-
-import Legend from './Legend'
-import BarColumn from './BarColumn'
-import {
-  getAverageLineHeight,
-  getSectionHeight,
-  rangeReducer,
-  sumReducer,
-  valueReducer,
-} from './Util'
-
-export type BarChartData = {
-  ariaLabel: string
-  label: string
-  value: number
-}
-
-export interface BarChartProps {
-  average?: number
-  barWidth?: number | string
-  color: string
-  data: BarChartData[]
-  height: number
-  legendLabelAverage: string
-  legendLabelMain: string
-  onBarClick?: (index: number) => void
-  selectedIndex?: number
-  valueFormatter?: (value: number) => string
-}
-
-/**
- * BarChart component to display a vertical bar chart given an array of data
- *
- * @param average OPTIONAL custom average not based on average or all value
- * @param barWidth OPTIONAL pixel or percentage width of bars
- * @param color Color of the bars
- * @param data An array of chart data. Chart data must contain and aria label, label and value.
- * @param height Height in pixels of the chart
- * @param legendLabelAverage Label to use on legend for the average value
- * @param legendLabelMain Label to use on the legend for the data
- * @param onBarClick OPTIONAL function to call if bar is clicked
- * @param selectedIndex OPTIONAL indicates the selected bar
- * @param valueFormatter OPTIONAL function to call to format the value displayed with the bars
- */
-const BarChart: React.FC<BarChartProps> = ({
-  average,
-  barWidth = '8%',
-  color,
-  data,
-  height,
-  legendLabelAverage,
-  legendLabelMain,
-  onBarClick,
-  selectedIndex,
-  valueFormatter = (value: number) => `${value}`,
-}) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens)
-
-  const values = data.reduce(valueReducer, [])
-  const avg = average !== undefined ? average : values.reduce(sumReducer, 0) / values.length
-  const max = Math.max(...values)
-  const min = Math.min(...values)
-  const range = values.reduce(rangeReducer, 0)
-
-  const hasTop = max >= 0
-  const hasBottom = min < 0
-  const topHeight = getSectionHeight(hasTop, hasBottom, height)
-  const bottomHeight = getSectionHeight(hasBottom, hasTop, height)
-  const averageLineHeight = getAverageLineHeight(avg, max, min, topHeight || bottomHeight)
-
-  const getBarColor = (index: number) => {
-    if (selectedIndex === undefined || index === selectedIndex) {
-      return color
-    }
-    return `${color}80`
-  }
-
-  const EmptyColumn = () => (
-    <BarColumn
-      averageLineHeight={averageLineHeight}
-      bottomHeight={bottomHeight}
-      color={''}
-      range={range}
-      topHeight={topHeight}
-      value={0}
-      width={undefined}
-    />
-  )
-
-  return (
-    <div className={`mx-cmn-bar-chart ${styles}`}>
-      <div className="mx-cmn-chart-container">
-        <EmptyColumn />
-        {data.map((d, index) => (
-          <React.Fragment key={`column-${index}`}>
-            <BarColumn
-              ariaLabel={d.ariaLabel}
-              averageLineHeight={averageLineHeight}
-              bottomHeight={bottomHeight}
-              color={getBarColor(index)}
-              index={index}
-              onClick={onBarClick}
-              range={range}
-              selectedIndex={selectedIndex}
-              topHeight={topHeight}
-              value={d.value}
-              valueLabel={valueFormatter(d.value)}
-              width={barWidth}
-              xAxisLabel={d.label}
-            />
-            <EmptyColumn />
-          </React.Fragment>
-        ))}
-      </div>
-      <Legend color={color} labelAverage={legendLabelAverage} labelMain={legendLabelMain} />
-    </div>
-  )
-}
-
-const getStyles = (tokens: any) =>
-  css({
-    '& .mx-cmn-chart-container': {
-      alignItems: 'flex-end',
-      display: 'flex',
-      justifyContent: 'space-evenly',
-      marginTop: tokens.Spacing.Large,
-      marginBottom: tokens.Spacing.Medium,
-    },
-  })
-
-export default BarChart

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

@@ -1,150 +0,0 @@
-import React from 'react'
-import { css } from '@mxenabled/cssinjs'
-
-import { Text, useTokens } from '@kyper/mui'
-
-import Bar from './Bar'
-
-interface BarColumnProps {
-  ariaLabel?: string
-  averageLineHeight: number
-  bottomHeight: number
-  color: string
-  index?: number
-  onClick?: (index: number) => void
-  range: number
-  selectedIndex?: number
-  topHeight: number
-  value: number
-  valueLabel?: string
-  width?: number | string
-  xAxisLabel?: string
-}
-
-/**
- * The BarColumn component represents a single vertical slice of the bar chart.  It contains from top to bottom
- * the positive section, which will only display a bar if value > 0, the zero line, the average line, negative
- * section, which will only display a bar if value < 0 and the X-Axis label.
- *
- * @param ariaLabel OPTIONAL aria label used to label the bar
- * @param averageLineHeight the pixel height above/below the zero line for the dashed average line
- * @param bottomHeight the height of the bottom (negative) section
- * @param color the color of the bar
- * @param index OPTIONAL index of the bar (Only used when bar is clickable)
- * @param onClick OPTIONAL function to call if the bar is clicked
- * @param range
- * @param selectedIndex OPTIONAL indicates the selected bar
- * @param topHeight the pixel height of the top (positvie section)
- * @param value the value for the bar
- * @param valueLabel OPTIONAL string value to use for the bar
- * @param width OPTIONAL pixel or percentage width of the bar
- * @param xAxisLabel label for the X-Axis
- */
-const BarColumn: React.FC<BarColumnProps> = ({
-  ariaLabel,
-  averageLineHeight,
-  bottomHeight,
-  color,
-  index = -1,
-  onClick,
-  range,
-  selectedIndex,
-  topHeight,
-  value,
-  valueLabel = '',
-  width,
-  xAxisLabel = '',
-}) => {
-  const tokens = useTokens()
-  const styles = getStyles(tokens, width)
-
-  const topBarHeight = (value / range) * topHeight
-  const bottomBarHeight = (Math.abs(value) / range) * bottomHeight
-  const xAxisColor =
-    selectedIndex === undefined || selectedIndex === index ? 'primary' : 'secondary'
-
-  return (
-    <div className={`mx-cmn-barchart-bar-column ${styles}`}>
-      {/* Top (Positive) Chart Area */}
-      <div style={{ height: topHeight }}>
-        {/* Only display the bar here if it has a positive value */}
-        {value >= 0 && (
-          <Bar
-            ariaLabel={ariaLabel}
-            color={color}
-            height={topBarHeight}
-            index={index}
-            label={valueLabel}
-            onClick={onClick}
-            selectedIndex={selectedIndex}
-            value={value}
-          />
-        )}
-      </div>
-
-      {/* Zero Line */}
-      <div className="mx-cmn-zero-line" />
-
-      {/* Average Line - Only display if average is not 0 */}
-      {averageLineHeight !== 0 && (
-        <div className="mx-cmn-chart-average" style={{ bottom: averageLineHeight }} />
-      )}
-
-      {/* Bottom (Negative) Chart Area */}
-      <div style={{ height: bottomHeight }}>
-        {/* Only display the bar here if it has a negative value */}
-        {value < 0 && (
-          <Bar
-            ariaLabel={ariaLabel}
-            color={color}
-            height={bottomBarHeight}
-            index={index}
-            label={valueLabel}
-            onClick={onClick}
-            value={value}
-          />
-        )}
-      </div>
-
-      {/* X-Axis label */}
-      <div
-        className={`mx-cmn-bar-label ${onClick ? 'mx-cmn-clickable' : ''}`}
-        onClick={onClick ? () => onClick(index) : undefined}
-      >
-        <Text bold={selectedIndex === index} color={xAxisColor} variant="Small">
-          {xAxisLabel}
-        </Text>
-      </div>
-    </div>
-  )
-}
-
-const getStyles = (tokens: any, width: number | string | undefined) =>
-  css({
-    display: 'flex',
-    flexDirection: 'column',
-    flexGrow: width === undefined ? 1 : 0,
-    width,
-    '& .mx-cmn-chart-average': {
-      borderTop: `${tokens.Spacing.XTiny}px dotted ${tokens.Color.Neutral500}`,
-      position: 'relative',
-      marginRight: tokens.Spacing.XTiny,
-    },
-    '& .mx-cmn-zero-line': {
-      borderBottom: '1px solid text.primary',
-      width: '100%',
-    },
-    '& .mx-cmn-bar-label': {
-      minHeight: tokens.Spacing.Medium,
-      maxHeight: tokens.Spacing.Medium,
-      marginBottom: tokens.Spacing.XSmall,
-      marginTop: tokens.Spacing.XSmall,
-      textAlign: 'center',
-      width: '100%',
-    },
-    '& .mx-cmn-clickable': {
-      cursor: 'pointer',
-    },
-  })
-
-export default BarColumn