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

package/src/common/components/daterangeselector/DateRangeSelector.tsx

@@ -0,0 +1,383 @@
+import React from 'react'
+import { addMonths } from 'date-fns/addMonths'
+import { addDays } from 'date-fns/addDays'
+import { addYears } from 'date-fns/addYears'
+import { differenceInCalendarDays } from 'date-fns/differenceInCalendarDays'
+import { endOfMonth } from 'date-fns/endOfMonth'
+import { endOfToday } from 'date-fns/endOfToday'
+import { endOfYear } from 'date-fns/endOfYear'
+import { startOfMonth } from 'date-fns/startOfMonth'
+import { startOfToday } from 'date-fns/startOfToday'
+import { startOfYear } from 'date-fns/startOfYear'
+import { subMonths } from 'date-fns/subMonths'
+import { subDays } from 'date-fns/subDays'
+import { subYears } from 'date-fns/subYears'
+
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import IconButton from '@mui/material/IconButton'
+import Stack from '@mui/material/Stack'
+import Tab from '@mui/material/Tab'
+import Tabs from '@mui/material/Tabs'
+import ToggleButton from '@mui/material/ToggleButton'
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
+import Tooltip from '@mui/material/Tooltip'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { DateRange } from '@mui/x-date-pickers-pro'
+
+import { DateRangePicker, DateRangePickerCopy, Icon, Text } from '@kyper/mui'
+
+import { DATE_FORMATS_INTL, formatDate } from '../../constants'
+import { useScreenSize } from '../../hooks'
+import Dialog from '../dialog/Dialog'
+import Drawer from '../drawer/Drawer'
+
+export type DateRangeSelectorCopy = {
+  dateRangePickerCopy: DateRangePickerCopy
+  dateRangeEditApply: string
+  dateRangeEditTitle: string
+  dateRangeNextAria: string
+  dateRangePreviousAria: string
+  dateRangeCloseAria: string
+}
+
+export type CalendarActions = {
+  shouldDisableNext?: boolean
+  shouldDisablePrevious?: boolean
+  shouldDisablePicker?: boolean
+  onRangeChanged: (dateRange: DateRange<Date>) => void
+}
+
+export interface DateRangeSelectorProps {
+  calendarActions: CalendarActions
+  color?: 'primary' | 'secondary'
+  copy: DateRangeSelectorCopy
+  range?: DateRange<Date>
+  shouldShrinkToIcon?: boolean
+  toolTipContent?: string
+  variant?: 'outlined' | 'text' | 'readonly' | 'timeframebuttons' | 'timeframetabs'
+}
+
+export type Timeframe = {
+  label: string
+  value: number
+}
+
+const DateRangeSelector: React.FC<DateRangeSelectorProps> = ({
+  calendarActions,
+  color = 'primary',
+  copy,
+  range = [startOfMonth(startOfToday()), endOfMonth(endOfToday())],
+  shouldShrinkToIcon = true,
+  toolTipContent = '',
+  variant = 'outlined',
+}) => {
+  const theme = useTheme()
+  const isDark = theme.palette.mode === 'dark'
+  const { isDesktop, isMobile } = useScreenSize()
+
+  const [dateRange, setDateRange] = React.useState<DateRange<Date>>(range)
+  const [shortcut, setShortcut] = React.useState(copy.dateRangePickerCopy.dateRangeThisMonth)
+  const [pickerDateRange, setPickerDateRange] = React.useState(dateRange)
+  const [isPickerOpen, setIsPickerOpen] = React.useState(false)
+  const [isMonthFormat, setIsMonthFormat] = React.useState(true)
+  const [timeframe, setTimeframe] = React.useState(6)
+
+  // TODO: put labels in mrs content and use as copy
+  const timeframes = {
+    buttons: [
+      { label: '3M', value: 3 },
+      { label: '6M', value: 6 },
+      { label: '9M', value: 9 },
+      { label: '1Y', value: 12 },
+    ],
+    tabs: [
+      { label: '3 Months', value: 3 },
+      { label: '6 Months', value: 6 },
+      { label: '9 Months', value: 9 },
+      { label: '1 Year', value: 12 },
+    ],
+  }
+
+  React.useEffect(() => {
+    setPickerDateRange(range)
+  }, [range])
+
+  // dates for timeframe buttons
+  // using today's date as the end date, looks back 3, 6, 9, or 12 months
+  React.useEffect(() => {
+    if (variant === 'timeframebuttons' || variant === 'timeframetabs') {
+      calendarActions.onRangeChanged(getTimeFrameDates())
+    }
+  }, [timeframe])
+
+  const getTimeFrameDates = () => {
+    const timeframeEndDate = endOfMonth(endOfToday()) as Date
+    const timeframeBeginDate = endOfMonth(subMonths(timeframeEndDate, timeframe))
+    return [timeframeBeginDate, timeframeEndDate] as DateRange<Date>
+  }
+
+  const handlePrevNextClick = (direction: 'previous' | 'next') => {
+    const newRange = [...dateRange] as DateRange<Date>
+    const beginDate = dateRange[0] as Date
+    const endDate = dateRange[1] as Date
+    const isPrev = direction === 'previous'
+
+    if (shortcut === copy.dateRangePickerCopy.dateRangeThisMonth) {
+      newRange[0] = isPrev ? subMonths(beginDate, 1) : addMonths(beginDate, 1)
+      newRange[1] = endOfMonth(isPrev ? subMonths(endDate, 1) : addMonths(endDate, 1))
+    } else if (
+      shortcut === copy.dateRangePickerCopy.dateRangeYTD ||
+      shortcut === copy.dateRangePickerCopy.dateRangeLastYear
+    ) {
+      newRange[0] = isPrev
+        ? subYears(startOfYear(beginDate), 1)
+        : addYears(startOfYear(beginDate), 1)
+      newRange[1] = isPrev ? subYears(endOfYear(beginDate), 1) : addYears(endOfYear(beginDate), 1)
+    } else {
+      const numDays = differenceInCalendarDays(endDate, beginDate)
+      newRange[0] =
+        direction === 'previous' ? subDays(beginDate, numDays) : addDays(beginDate, numDays)
+      newRange[1] = direction === 'previous' ? subDays(endDate, numDays) : addDays(endDate, numDays)
+    }
+
+    setDateRange(newRange)
+    calendarActions.onRangeChanged(newRange)
+  }
+
+  const handleRangeChanged = () => {
+    setDateRange(pickerDateRange)
+    setIsMonthFormat(
+      shortcut === copy.dateRangePickerCopy.dateRangeThisMonth ||
+        shortcut === copy.dateRangePickerCopy.dateRangeLastMonth,
+    )
+    calendarActions.onRangeChanged(pickerDateRange)
+  }
+
+  const handleTimeframeChanged = (timeframe: number) => {
+    setTimeframe(timeframe)
+  }
+
+  return (
+    <Box className="mx-cmn-date-range-selector" m={4}>
+      <Tooltip
+        id="select-date"
+        placement="bottom"
+        sx={{ display: { xs: shouldShrinkToIcon ? 'inline-flex' : 'none', sm: 'none' } }}
+        title={toolTipContent}
+      >
+        <IconButton
+          aria-describedby="select-date"
+          aria-label="Select a date"
+          onClick={() => setIsPickerOpen(true)}
+        >
+          <Icon name="calendar_month" />
+        </IconButton>
+      </Tooltip>
+
+      <Box
+        sx={{
+          [theme.breakpoints.down('sm')]: {
+            display: shouldShrinkToIcon ? 'none' : 'flex',
+            justifyContent: 'center',
+          },
+          [theme.breakpoints.up('sm')]: { display: 'inline-flex' },
+        }}
+      >
+        {variant === 'readonly' && (
+          <Stack alignItems="center" direction="row" gap={8}>
+            <Icon name="calendar_month" size={24} />
+            <Text bold={true}>
+              {formatDate(pickerDateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY)}
+            </Text>
+            <Icon name="remove" />
+            <Text bold={true}>
+              {formatDate(pickerDateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}
+            </Text>
+          </Stack>
+        )}
+
+        {variant !== 'readonly' &&
+          variant !== 'timeframebuttons' &&
+          variant !== 'timeframetabs' && (
+            <ButtonGroup
+              color={color}
+              sx={{
+                '& .MuiButtonGroup-grouped': {
+                  padding: isMobile ? 0 : 'inherit',
+                },
+                height: 44,
+              }}
+              variant={variant}
+            >
+              <Button
+                aria-disabled={calendarActions.shouldDisablePrevious}
+                aria-label={copy.dateRangePreviousAria}
+                color={calendarActions.shouldDisablePrevious ? 'secondary' : 'primary'}
+                onClick={() =>
+                  calendarActions.shouldDisablePrevious ? null : handlePrevNextClick('previous')
+                }
+              >
+                <Icon name="chevron_left" size={28} />
+              </Button>
+              <Button
+                aria-disabled={calendarActions.shouldDisablePicker}
+                color={color}
+                onClick={() => (calendarActions.shouldDisablePicker ? null : setIsPickerOpen(true))}
+                startIcon={<Icon name="calendar_month" size={20} />}
+                sx={{
+                  p: isMobile ? 0 : 8,
+                  width: isDesktop ? 280 : 232,
+                }}
+              >
+                {isMonthFormat ? (
+                  formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_YEAR)
+                ) : (
+                  <span>
+                    {formatDate(dateRange[0] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)} -{' '}
+                    {formatDate(dateRange[1] as Date, DATE_FORMATS_INTL.MONTH_DAY_YEAR)}
+                  </span>
+                )}
+              </Button>
+              <Button
+                aria-disabled={calendarActions.shouldDisableNext}
+                aria-label={copy.dateRangeNextAria}
+                color={calendarActions.shouldDisableNext ? 'secondary' : 'primary'}
+                onClick={() =>
+                  calendarActions.shouldDisableNext ? null : handlePrevNextClick('next')
+                }
+              >
+                <Icon name="chevron_right" size={28} />
+              </Button>
+            </ButtonGroup>
+          )}
+
+        {variant === 'timeframebuttons' && (
+          <ToggleButtonGroup
+            color={color}
+            exclusive={true}
+            orientation="horizontal"
+            value={timeframe}
+          >
+            {timeframes.buttons.map((timeframe: Timeframe) => (
+              <ToggleButton
+                key={timeframe.label}
+                onClick={() => handleTimeframeChanged(timeframe.value)}
+                sx={{
+                  fontSize: 15,
+                  fontWeight: 600,
+                  height: 44,
+                  width: 56,
+                  color: isDark ? theme.palette.grey[200] : theme.palette.grey[600],
+                  borderColor: isDark ? theme.palette.grey[600] : theme.palette.grey[400],
+                  '&:hover': {
+                    backgroundColor: isDark ? `${theme.palette.primary.darker}25` : 'inherit', // with 25% opacity
+                    borderColor: isDark ? theme.palette.grey[500] : theme.palette.primary.main,
+                    color: isDark ? theme.palette.primary.light : theme.palette.primary.dark,
+                  },
+                  '&.Mui-selected': {
+                    backgroundColor: isDark
+                      ? theme.palette.primary.darker
+                      : theme.palette.primary.lighter,
+                    borderColor: isDark ? theme.palette.primary.light : theme.palette.primary.main,
+                    color: isDark ? theme.palette.common.white : theme.palette.primary.dark,
+                  },
+                  '&.Mui-disabled': {
+                    borderColor: isDark ? theme.palette.grey[700] : theme.palette.grey[400],
+                    color: theme.palette.grey[500],
+                  },
+                }}
+                value={timeframe.value}
+              >
+                {timeframe.label}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        )}
+
+        {variant === 'timeframetabs' && (
+          <Tabs
+            indicatorColor="primary"
+            onChange={(_, newValue) => handleTimeframeChanged(newValue)}
+            textColor="primary"
+            value={timeframe}
+            variant="fullWidth"
+          >
+            {timeframes.tabs.map((timeframe: Timeframe) => (
+              <Tab
+                key={timeframe.label}
+                label={
+                  <Text bold={true} variant="Body">
+                    {timeframe.label}
+                  </Text>
+                }
+                sx={{ minWidth: 80 }}
+                value={timeframe.value}
+              />
+            ))}
+          </Tabs>
+        )}
+      </Box>
+
+      {isPickerOpen && isMobile && (
+        <Drawer
+          ariaLabelClose={copy.dateRangeCloseAria}
+          isOpen={isPickerOpen}
+          onClose={() => setIsPickerOpen(false)}
+          onPrimaryAction={() => {
+            handleRangeChanged()
+            setIsPickerOpen(false)
+          }}
+          primaryText={copy.dateRangeEditApply}
+          title={copy.dateRangeEditTitle}
+        >
+          <DateRangePicker
+            copy={copy.dateRangePickerCopy}
+            dateRange={pickerDateRange}
+            onRangeChanged={(range, shortcut) => {
+              setPickerDateRange(range)
+              setShortcut(shortcut)
+            }}
+            selectedShortcut={shortcut}
+            sx={{ p: 16 }}
+          />
+        </Drawer>
+      )}
+
+      {isPickerOpen && !isMobile && (
+        <Dialog
+          copy={{ title: copy.dateRangeEditTitle }}
+          isOpen={true}
+          onClose={() => setIsPickerOpen(false)}
+          onPrimaryAction={() => handleRangeChanged()}
+          primaryText={copy.dateRangeEditApply}
+          sx={{
+            '& .MuiDialogContent-root': {
+              padding: 0,
+            },
+          }}
+        >
+          <DateRangePicker
+            copy={copy.dateRangePickerCopy}
+            dateRange={pickerDateRange}
+            onRangeChanged={(range, shortcut) => {
+              setPickerDateRange(range)
+              setShortcut(shortcut)
+            }}
+            selectedShortcut={shortcut}
+            sx={{
+              pt: 0,
+              '& .MuiPickersLayout-toolbar': {
+                gridColumn: '1/4',
+              },
+            }}
+          />
+        </Dialog>
+      )}
+    </Box>
+  )
+}
+
+export default DateRangeSelector

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

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

package/src/common/components/dialog/Dialog.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import MuiDialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import { DialogFooter, DialogHeader } from '@kyper/mui'
+import { DialogProps as MuiDialogProps } from '@mui/material/Dialog'
+
+export type CopyObject = {
+  close_aria?: string
+  title: string
+}
+
+export interface DialogProps extends Omit<MuiDialogProps, 'open'> {
+  className?: string
+  copy: CopyObject
+  disablePrimaryButton?: boolean
+  isOpen: boolean
+  onClose: () => void
+  onPrimaryAction?: () => void
+  onSecondaryAction?: () => void
+  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+  primaryText?: string
+  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
+  secondaryText?: string
+}
+
+const Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({
+  className,
+  copy = {
+    title: '',
+    close_aria: 'Close',
+  },
+  disablePrimaryButton = false,
+  isOpen = false,
+  onClose,
+  onPrimaryAction,
+  primaryColor = 'primary',
+  primaryText = 'Confirm',
+  onSecondaryAction,
+  secondaryColor = 'primary',
+  secondaryText = 'Cancel',
+  children,
+  ...rest
+}) => {
+  const handlePrimaryAction = () => {
+    onPrimaryAction?.()
+    onClose()
+  }
+
+  const handleSecondaryAction = () => {
+    if (onSecondaryAction) {
+      onSecondaryAction()
+    }
+    onClose()
+  }
+
+  return (
+    <div className={`mx-cmn-dialog ${className}`}>
+      <MuiDialog
+        onClose={onClose}
+        open={isOpen}
+        sx={{
+          '& .MuiDialog-paperScrollPaper': {
+            backgroundColor: 'background.default',
+          },
+          height: '100%',
+        }}
+        {...rest}
+      >
+        <DialogHeader
+          copy={{ title: copy.title, close_aria: copy.close_aria }}
+          onClose={onClose}
+          style={{ boxSizing: 'border-box' }}
+        />
+
+        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>
+
+        <DialogFooter
+          isPrimaryDisabled={disablePrimaryButton}
+          onPrimaryAction={handlePrimaryAction}
+          onSecondaryAction={handleSecondaryAction}
+          primaryColor={primaryColor}
+          primaryText={primaryText}
+          secondaryColor={secondaryColor}
+          secondaryText={secondaryText}
+          style={{ boxSizing: 'border-box' }}
+        />
+      </MuiDialog>
+    </div>
+  )
+}
+
+export default Dialog

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

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

package/src/common/components/donuts/MultiSegmentDonut.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { css } from '@mxenabled/cssinjs'
+
+import { useTokens } from '@kyper/mui'
+
+import { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from '../../constants/Donut'
+
+export interface Segment {
+  percent: number
+  color: string
+}
+
+export interface MultiSegmentDonutProps {
+  children: React.ReactNode
+  hasGap?: boolean
+  segments: Segment[]
+  size?: number
+  strokeWidth?: number
+}
+
+const MultiSegmentDonut: React.FC<MultiSegmentDonutProps> = ({
+  hasGap = false,
+  segments,
+  size = DEFAULT_DONUT_SIZE,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  children,
+}) => {
+  const tokens = useTokens()
+  const styles = getStyles(tokens, size)
+
+  const radius = (size - strokeWidth) / 2
+  const halfSize = size / 2
+
+  let offset = -90 - (hasGap ? 1 : 0)
+
+  let length = 0
+
+  return (
+    <div className={`mx-cmn-multi-segment-donut ${styles}`}>
+      <svg height={size} width={size}>
+        <circle
+          cx={halfSize}
+          cy={halfSize}
+          fill="none"
+          r={radius}
+          stroke={tokens.Color.Neutral300}
+          strokeWidth={strokeWidth}
+        />
+        {segments.map((segment, index) => {
+          offset += 360 * length + (hasGap ? 1 : 0)
+          length = (segment.percent - (hasGap ? 0.3 : 0)) / 100
+
+          return (
+            <circle
+              cx={halfSize}
+              cy={halfSize}
+              fill="none"
+              key={index}
+              r={radius}
+              stroke={segment.color}
+              strokeDasharray={2 * Math.PI * radius}
+              strokeDashoffset={2 * Math.PI * radius * (1 - length)}
+              strokeWidth={strokeWidth}
+              transform={`rotate(${offset}, ${halfSize}, ${halfSize})`}
+            />
+          )
+        })}
+      </svg>
+      <div className="mx-cmn-multi-segment-donut-children">{children}</div>
+    </div>
+  )
+}
+
+const getStyles = (tokens: any, size: number) =>
+  css({
+    height: size,
+    marginTop: `-${tokens.Spacing.XSmall}px`,
+    position: 'relative',
+    width: size,
+    '& .mx-cmn-multi-segment-donut-children': {
+      left: '50%',
+      position: 'absolute',
+      textAlign: 'center',
+      top: '50%',
+      transform: 'translate(-50%, -50%)',
+    },
+  })
+
+export default MultiSegmentDonut

package/src/common/components/donuts/SingleSegmentDonut.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+
+import Box from '@mui/material/Box'
+import useTheme from '@mui/material/styles/useTheme'
+
+import { DEFAULT_DONUT_SIZE, DEFAULT_STROKE_WIDTH } from '../../constants'
+
+export interface SingleSegmentDonutProps {
+  children: React.ReactNode
+  color: string
+  percent: number
+  size?: number
+  strokeWidth?: number
+}
+
+const SingleSegmentDonut: React.FC<SingleSegmentDonutProps> = ({
+  color = '',
+  percent = 0,
+  size = DEFAULT_DONUT_SIZE,
+  strokeWidth = DEFAULT_STROKE_WIDTH,
+  children,
+}) => {
+  const theme = useTheme()
+
+  const radius = (size - strokeWidth) / 2
+  const offset = -90
+  const limitedPercent = percent > 100 ? 100 : percent
+  const length = 2 * Math.PI * radius * (1 - limitedPercent / 100)
+  const halfSize = size / 2
+
+  return (
+    <Box
+      className="mx-cmn-single-segment-donut"
+      height={size}
+      mt={-8}
+      position="relative"
+      width={size}
+    >
+      <svg height={size} width={size}>
+        <circle
+          cx={halfSize}
+          cy={halfSize}
+          fill="none"
+          r={radius}
+          stroke={theme.palette.grey[300]}
+          strokeWidth={strokeWidth}
+        />
+
+        <circle
+          cx={halfSize}
+          cy={halfSize}
+          fill="none"
+          r={radius}
+          stroke={color}
+          strokeDasharray={2 * Math.PI * radius}
+          strokeDashoffset={length}
+          strokeWidth={strokeWidth}
+          transform={`rotate(${offset}, ${halfSize}, ${halfSize})`}
+        />
+      </svg>
+      <Box
+        className="mx-cmn-single-segment-donut-children"
+        left="50%"
+        position="absolute"
+        sx={{ transform: 'translate(-50%, -50%)' }}
+        textAlign="center"
+        top="50%"
+      >
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+export default SingleSegmentDonut

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

@@ -0,0 +1,2 @@
+export { default as MultiSegmentDonut } from './MultiSegmentDonut'
+export { default as SingleSegmentDonut } from './SingleSegmentDonut'