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

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

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

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

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

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

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

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

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

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

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