@idea-fragments/react-components-zendesk 0.1.0 → 0.1.1

package/src/components/Modal.tsx

@@ -0,0 +1,206 @@
+import {
+  Body,
+  Close,
+  Footer,
+  FooterItem,
+  Header as ZenHeader,
+  Modal as ZenModal,
+  /* @ts-ignore */
+}                                                    from "@zendeskgarden/react-modals"
+import {
+  Button,
+  Props as ButtonProps
+}                                                    from "components/forms/Button"
+import { StyledComponentProps }                 from "components/StyledComponentProps.type"
+import React, { MouseEvent, ReactElement, useState } from "react"
+import styled, { css }                               from "styled-components"
+import { textWithColor }                             from "styles/mixins"
+
+type ButtonType =
+  ReactElement
+  & { props: { disableable: boolean } & ButtonProps }
+
+export type ModalContent = {
+  autoClose?: boolean,
+  blocking?: boolean,
+  body: any,
+  buttons?: ButtonType[],
+  isDanger?: boolean,
+  isNotDismissible?: boolean,
+  isSuccess?: boolean,
+  isWarning?: boolean,
+  title?: string,
+  withCancelButton?: boolean,
+  withNoActions?: boolean,
+  onClose?: () => void,
+}
+
+const Header = styled(ZenHeader).attrs(({
+                                          danger,
+                                          success,
+                                          warning,
+                                          theme,
+                                        }) => {
+  // Color is overwritten by a class style from zendesk :(
+  let color = theme.styles.textColorPrimary
+  if (danger) color = theme.styles.colorDanger
+  if (success) color = theme.styles.colorSuccess
+  if (warning) color = theme.styles.colorWarning
+
+  return { color }
+})`
+  ${textWithColor}
+`
+
+const createButtons = (
+  buttons: ButtonType[],
+  closeModal: () => void,
+  shouldDisable: boolean,
+  autoClose: boolean,
+  adjustModalState: () => void,
+) => (
+  buttons.map((b: ButtonType) => {
+    const { onClick, disabled, disableable } = b.props
+    return (
+      <FooterItem key={b.key}>
+        {React.cloneElement(
+          b,
+          {
+            onClick:  async () => {
+              adjustModalState()
+              await onClick()
+              if (autoClose) closeModal()
+            },
+            disabled: disableable ? shouldDisable : disabled,
+          },
+        )}
+      </FooterItem>
+    )
+  })
+)
+
+type Props = {
+  isVisible: boolean,
+  closeModal: () => void,
+  disableActions: boolean,
+  modalContent: ModalContent | null | undefined,
+} & StyledComponentProps
+
+export let Modal = ({
+                      isVisible,
+                      closeModal,
+                      disableActions,
+                      modalContent,
+                      className,
+                    }: Props) => {
+
+  const [isProcessing, setIsProcessingTo] = useState(false)
+  if (!isVisible) return null
+  if (!modalContent) throw new Error("Modal found null modal content")
+
+  const {
+          autoClose = true,
+          body,
+          buttons,
+          isDanger,
+          isSuccess,
+          isWarning,
+          title,
+          withCancelButton,
+          withNoActions,
+          onClose,
+        }: ModalContent = modalContent
+
+  const handleClose = () => {
+    closeModal()
+    setIsProcessingTo(false)
+    if (onClose) onClose()
+  }
+
+  const setProcessingState = () => setIsProcessingTo(true)
+
+  const footerItems = () => (
+    buttons
+    ? createButtons(
+      buttons,
+      handleClose,
+      disableActions,
+      autoClose,
+      setProcessingState
+    )
+    : <FooterItem>
+      <Button onClick={handleClose}
+              primary
+              disabled={disableActions}
+              success={isSuccess}
+              danger={isDanger}
+              warning={isWarning}>
+        OK
+      </Button>
+    </FooterItem>
+  )
+
+  return (
+    <ZenModal onClose={handleClose}
+              className={className}
+              animate
+              backdropProps={{
+                onClick: (e: MouseEvent<HTMLElement>) => {
+                  e.preventDefault()
+                },
+              }}>
+      {
+        title
+        ? <Header danger={isDanger} success={isSuccess} warning={isWarning}>
+          {title}
+        </Header>
+        : null
+      }
+
+      <Body>{body}</Body>
+      {
+        withNoActions
+        ? null
+        : <Footer>
+          {withCancelButton
+           ? <FooterItem>
+             <Button onClick={handleClose}
+                     flat
+                     loading={isProcessing}
+                     success={isSuccess}
+                     danger={isDanger}
+                     warning={isWarning}>
+               Cancel
+             </Button>
+           </FooterItem>
+           : null}
+
+          {footerItems()}
+        </Footer>
+      }
+      <Close aria-label="Close modal" />
+    </ZenModal>
+  )
+}
+
+const hideCloseButton = css`
+  button[data-garden-id="modals.close"] {
+    display: none;
+  }
+`
+
+Modal = styled(Modal)<Props>`
+  &&&& {
+    color: ${({ theme }) => theme.styles.textColorPrimary};
+
+    ${({ modalContent }) => modalContent?.isNotDismissible
+                            ? hideCloseButton
+                            : ""}
+    ${Body} {
+      font-size: inherit;
+    }
+  }
+`
+
+// @ts-ignore
+Modal.COMPONENT_NAME = "Modal"

package/src/components/StyledComponentProps.type.ts

@@ -0,0 +1,3 @@
+export type StyledComponentProps = {
+    className?: string, /* Ignore. Passed in by Styled Components*/
+}

package/src/components/StyledProps.type.ts

@@ -0,0 +1,4 @@
+import { Theme }        from "styles/theme/Theme.type"
+import { ThemedStyledProps } from "styled-components"
+
+export type StyledProps<Props = {}> = ThemedStyledProps<Props, Theme>

package/src/components/calendars/Legendable.type.tsx

@@ -0,0 +1,4 @@
+export type Legendable = {
+    color? :string,
+    label :string,
+} & any

package/src/components/calendars/TinyCalendar.tsx

@@ -0,0 +1,185 @@
+import { Legend }                                from "components/calendars/blocks/Legend"
+import { MonthYearPickerChange }            from "components/calendars/blocks/MonthYearPicker"
+import { MonthYearPicker }                       from "components/calendars/blocks/MonthYearPicker"
+import { Legendable }                       from "components/calendars/Legendable.type"
+import { PaddedFlexBlock }                       from "components/layout/FlexBlock"
+import moment, { Moment }                        from "moment"
+import React, { useEffect, useRef, useState }    from "react"
+import { Calendar, Range }                       from "react-date-range"
+import styled                                    from "styled-components"
+import { COLORS, fade }                          from "styles/colors"
+import { SPACINGS }                              from "styles/spacings"
+import { useTheme }                              from "styles/theme/useTheme"
+import { FONT_WEIGHTS }                          from "styles/typography"
+import { flatten }                               from "utils/arrayHelpers"
+import { DateRange }                             from "utils/dateTime/DateRange.type"
+import { maxDateBetween, momentListToDateList, } from "utils/dateTimeHelpers"
+import { DO_NOTHING }                            from "utils/functionHelpers"
+
+export type LabeledRangeList = {
+  color?: string,
+  label: string,
+  ranges: Array<DateRange>,
+}
+
+type ColoredDateRange = DateRange & { color?: string }
+
+type Props = {
+  disabledDates: Array<Moment>,
+  displayMode?: "dateRange" | "date",
+  fluid?: boolean,
+  initialDate?: Moment,
+  labeledRanges?: Array<LabeledRangeList>,
+  minDate?: Moment,
+  ranges?: Array<ColoredDateRange>,
+  showLegend?: boolean,
+  onChange: (d: Date) => void,
+}
+
+export let TinyCalendar = ({
+                             disabledDates = [],
+                             displayMode,
+                             fluid = false,
+                             initialDate = moment(),
+                             labeledRanges,
+                             minDate,
+                             ranges,
+                             showLegend = false,
+                             onChange = DO_NOTHING,
+                           }: Props) => {
+  const [date, setDate]    = useState<Moment>(minDate || initialDate)
+  const theme              = useTheme()
+  const outOfMinRange      = minDate && date.isBefore(minDate)
+  const usableDate: Moment = outOfMinRange ? minDate : date
+  const changeShownDate    = useRef<(d: Date) => void>()
+
+  useEffect(() => {
+    if (changeShownDate.current != null) {
+      changeShownDate.current(usableDate.toDate())
+    }
+  }, [usableDate])
+
+  const changeDateState = ({ month, year }: MonthYearPickerChange) => {
+    const newDate       = moment(usableDate).month(month).year(year)
+    const newUsableDate = maxDateBetween(
+      newDate, (minDate || moment().year(Number.MIN_VALUE)),
+    )
+    setDate(newUsableDate)
+  }
+
+  const rangeColors = [
+    COLORS.PURPLE,
+    COLORS.GREEN,
+    COLORS.YELLOW,
+  ].map((color: string) => fade(color))
+
+  let numUsedColors                                = 0
+  const labelColors: { [key: string]: Legendable } = {}
+  if (labeledRanges) {
+    labeledRanges.forEach((l: LabeledRangeList) => {
+      labelColors[l.label] = {
+        label: l.label,
+        color: l.color || rangeColors[numUsedColors++],
+      }
+    })
+
+    ranges = flatten<ColoredDateRange>(labeledRanges.map(
+      (l: LabeledRangeList) => (
+        l.ranges.map((r: DateRange) => ({
+          ...r,
+          color: labelColors[l.label].color,
+        }))
+      ),
+    ))
+  }
+
+  displayMode = displayMode || (ranges ? "dateRange" : "date")
+
+  return <Container fluid={fluid}
+                    withRows
+                    spacing={SPACINGS.SM}>
+    <Calendar
+      color={theme.styles.colorPrimary}
+      // date={usableDate.toDate()}
+      displayMode={displayMode}
+      disabledDates={momentListToDateList(disabledDates)}
+      dragSelectionEnabled={false}
+      minDate={minDate ? minDate.toDate() : undefined}
+      /*
+       navigatorRenderer causes library's month and year pickers to be hidden.
+       showMonthAndYearPickers prop doesnt need to be set to false at the moment
+       but will be done anyway just in case.
+       */
+      navigatorRenderer={(_, changeShownDateFunc) => {
+        changeShownDate.current = changeShownDateFunc
+        return <MonthYearPicker
+          month={usableDate.month()}
+          year={usableDate.year()}
+          minDate={minDate}
+          pastFutureYearRangeSize={3}
+          onChange={({ month, year }: MonthYearPickerChange) => {
+            // changeShownDate(
+            //     moment(usableDate).month(month).year(year).toDate(),
+            // )
+            changeDateState({ month, year })
+          }}
+        />
+      }}
+      ranges={ranges as any as Range[]}
+      rangeColors={rangeColors}
+      shownDate={usableDate.toDate()}
+      showMonthAndYearPickers={false}
+      showMonthArrow={false}
+      showPreview={true}
+      showDateDisplay={false}
+      onChange={onChange}
+      onShownDateChange={DO_NOTHING}
+      onPreviewChange={DO_NOTHING}
+    />
+    {
+      showLegend && labeledRanges
+      ?
+      <Legend legendables={Object.values(labelColors)}
+              defaultColor={theme.styles.colorPrimary} />
+      :
+      null
+    }
+  </Container>
+}
+
+const Container = styled(PaddedFlexBlock)`
+  width: ${({ fluid }) => fluid ? "100%" : "24.5rem"};
+
+  .rdrMonth {
+    width: 100%;
+  }
+
+  .rdrDay.rdrDayToday .rdrDayNumber span:after {
+    background: ${({ theme }) => theme.styles.colorPrimary};
+  }
+
+  .rdrDay.rdrDayHovered {
+    .rdrDayNumber {
+      background: ${({ theme }) => theme.styles.colorPrimary};
+      border-radius: 2em;
+
+      span {
+        color: ${({ theme }) => theme.styles.textColorOverPrimaryBg};
+      }
+
+      ::after {
+        display: none;
+      }
+    }
+  }
+
+  .rdrDayNumber {
+    font-weight: ${FONT_WEIGHTS.REGULAR};
+    top: 2px;
+    bottom: 2px;
+  }
+
+  .rdrMonthAndYearWrapper {
+    display: none;
+  }
+`

package/src/components/calendars/TinyMonthYearCalendar.tsx

@@ -0,0 +1,57 @@
+import { YearPicker }                 from "components/calendars/blocks/YearPicker"
+import { FlexBlock, PaddedFlexBlock } from "components/layout/FlexBlock"
+import moment, { Moment }             from "moment"
+import * as React                     from "react"
+import { useState }                   from "react"
+import styled                         from "styled-components"
+import { SPACINGS }                   from "styles/spacings"
+import { useTheme }                   from "styles/theme/useTheme"
+import { maxDateBetween, }            from "utils/dateTimeHelpers"
+import { DO_NOTHING }                 from "utils/functionHelpers"
+import { maxNumberBetween }           from "utils/numberHelpers"
+
+type Props = {
+  fluid: boolean,
+  initialDate: Moment,
+  minDate?: Moment,
+  onChange: () => void,
+}
+
+export let TinyMonthYearCalendar = ({
+                                      fluid = false,
+                                      initialDate = moment(),
+                                      minDate = moment().year(Number.MIN_VALUE),
+                                      onChange = DO_NOTHING,
+                                    }: Props) => {
+  const [date, setDate] = useState<Moment>(initialDate)
+  const theme           = useTheme()
+
+  const currentYear = moment().year()
+  const maxYear     = currentYear + 10
+  const minYear     = maxNumberBetween(
+    currentYear - 5,
+    minDate ? minDate.year() : Number.NEGATIVE_INFINITY,
+  )
+
+  const changeDateState = (year: string) => {
+    const newDate = moment(date).year(Number(year))
+    setDate(maxDateBetween(newDate, minDate))
+  }
+
+  return <Container fluid={fluid}
+                    withRows
+                    spacing={SPACINGS.SM}>
+    <YearPicker minYear={minYear}
+                maxYear={maxYear}
+                year={date.year()}
+                onYearSelected={changeDateState}
+    />
+    <FlexBlock>
+
+    </FlexBlock>
+  </Container>
+}
+
+const Container = styled(PaddedFlexBlock)`
+  width: ${({ fluid }) => fluid ? "100%" : "24.5rem"};
+`

package/src/components/calendars/blocks/Legend.tsx

@@ -0,0 +1,44 @@
+// @flow
+
+import { Legendable } from "components/calendars/Legendable.type"
+import { FlexBlock }       from "components/layout/FlexBlock"
+import { Text }            from "components/text/Text"
+import * as React          from "react"
+import styled              from "styled-components"
+import { SPACINGS }        from "styles/spacings"
+import { FONT_SIZES }      from "styles/typography"
+
+type Props = {
+    legendables :Array<Legendable>,
+    defaultColor :string,
+}
+
+export const Legend = ({ legendables, defaultColor } :Props) => {
+    const foundLabels = new Set()
+
+    return <LegendContainer withRows spacing={SPACINGS.XS}>
+        {legendables.map(({ color, label } :Legendable) => {
+            if (foundLabels.has(label)) return null
+            foundLabels.add(label)
+
+            return <FlexBlock key={label}
+                              alignItems={"center"}
+                              spacing={SPACINGS.SM}>
+                <ColorBlock color={color || defaultColor} />
+                <Text>{label}</Text>
+            </FlexBlock>
+        })}
+    </LegendContainer>
+}
+
+Legend.COMPONENT_NAME = "Legend"
+
+const LegendContainer = styled(FlexBlock)`
+  font-size: ${FONT_SIZES.XS};
+`
+
+const ColorBlock = styled.div`
+  background: ${({ color }) => color};
+  height: .75rem;
+  width: .75rem;
+`

package/src/components/calendars/blocks/MonthPicker.tsx

@@ -0,0 +1,54 @@
+import { SearchableSelector } from "components/forms/selectors/SearchableSelector"
+import React                  from "react"
+import { Month, MONTH_MAP }   from "utils/dateTime/calendar"
+
+const parseNumberAndCall = (action: (n: number) => void) => (s: string) => {
+  action(Number(s))
+}
+
+const toTitleCase = (s: string) => (
+  s.toLowerCase()
+   .split(" ")
+   .map((str: string) => str.charAt(0).toUpperCase() + str.substring(1))
+   .join(" ")
+)
+
+const keyField                         = "monthNum"
+const valueField                       = "monthName"
+const [MONTH_OPTIONS, OPTIONS_KEY_MAP] = Object.keys(MONTH_MAP).reduce(
+  ([monthOptions, optionsKeyMap], m: string) => {
+    const op = {
+      [keyField]:   MONTH_MAP[m as Month],
+      [valueField]: toTitleCase(m),
+    }
+    // @ts-ignore
+    monthOptions.push(op)
+    // @ts-ignore
+    optionsKeyMap[MONTH_MAP[m as Month]] = op
+
+    return [monthOptions, optionsKeyMap]
+  },
+  [[], {}],
+)
+
+type Props = {
+  month: number,
+  onMonthSelected: (n: number) => void
+}
+
+export const MonthPicker = ({ month, onMonthSelected }: Props) => {
+  return (
+    <SearchableSelector compact
+                        flat
+                        maxMenuHeight={"10rem"}
+                        options={MONTH_OPTIONS}
+                        optionsKeyMap={OPTIONS_KEY_MAP}
+                        keyField={keyField}
+                        valueField={valueField}
+                        selectedKey={month.toString()}
+                        emptyState={"Type or Select Month"}
+      // @ts-ignore
+                        onChange={parseNumberAndCall(onMonthSelected)}
+    />
+  )
+}

package/src/components/calendars/blocks/MonthYearPicker.tsx

@@ -0,0 +1,101 @@
+import { mdiArrowLeft, mdiArrowRight }           from "@mdi/js"
+import { MonthPicker }                           from "components/calendars/blocks/MonthPicker"
+import { YearPicker }                            from "components/calendars/blocks/YearPicker"
+import { IconButton }                            from "components/forms/IconButton"
+import { FlexBlock }                             from "components/layout/FlexBlock"
+import moment, { Moment }                        from "moment"
+import React                                     from "react"
+import styled                                    from "styled-components"
+import { SPACINGS }                              from "styles/spacings"
+import { getNextMonth, getPrevMonth, MONTH_MAP } from "utils/dateTime/calendar"
+import { maxNumberBetween }                      from "utils/numberHelpers"
+
+export type MonthYearPickerChange = { month: number, year: number }
+
+type Props = {
+  month: number,
+  year: number,
+  minDate?: Moment,
+  pastFutureYearRangeSize: number,
+  onChange: (c: MonthYearPickerChange) => void,
+}
+
+export const MonthYearPicker = ({
+                                  month,
+                                  year,
+                                  minDate,
+                                  pastFutureYearRangeSize,
+                                  onChange,
+                                }: Props) => {
+
+  const currentYear = moment().year()
+  const maxYear     = currentYear + pastFutureYearRangeSize
+  const minYear     = maxNumberBetween(
+    currentYear - pastFutureYearRangeSize,
+    minDate ? minDate.year() : Number.NEGATIVE_INFINITY,
+  )
+
+  const sendPreviousMonth = () => {
+    const changes = {
+      month: getPrevMonth(month),
+      year:  month === MONTH_MAP.JANUARY ? year - 1 : year,
+    }
+
+    if (changes.year < minYear) return
+
+    // @ts-ignore
+    onChange(changes)
+  }
+
+  const sendNextMonth = () => {
+    const changes = {
+      month: getNextMonth(month),
+      year:  month === MONTH_MAP.DECEMBER ? year + 1 : year,
+    }
+
+    if (changes.year > maxYear) return
+
+    // @ts-ignore
+    onChange(changes)
+  }
+
+  const sendSelectedMonth = (m: string) => {
+    onChange({ month: Number(m), year })
+  }
+
+  const sendSelectedYear = (y: string) => {
+    onChange({ month, year: Number(y) })
+  }
+
+  return <Container alignItems={"center"}>
+    <NavButton icon={mdiArrowLeft}
+               onClick={sendPreviousMonth} />
+    <PickersContainer>
+      {/*@ts-ignore*/}
+      <MonthPicker month={month} onMonthSelected={sendSelectedMonth} />
+      <YearPicker year={year}
+                  minYear={minYear}
+                  maxYear={maxYear}
+                  onYearSelected={sendSelectedYear} />
+    </PickersContainer>
+    <NavButton icon={mdiArrowRight}
+               onClick={sendNextMonth} />
+  </Container>
+}
+
+const NavButton = styled(IconButton).attrs({
+  flat: true,
+})``
+
+const Container = styled(FlexBlock)`
+  margin-bottom: ${SPACINGS.XS};
+  align-items: center;
+`
+
+const PickersContainer = styled(FlexBlock).attrs({
+  spacing: SPACINGS.XS,
+})`
+  margin-left: ${SPACINGS.XS};
+  flex: 1;
+  justify-content: center;
+`