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

package/src/components/Icon.tsx

@@ -1,43 +0,0 @@
-import React            from "react"
-import MIcon, { Stack } from "@mdi/react"
-import { DO_NOTHING }   from "utils/functionHelpers"
-import { isArray }      from "utils/typeCheckers"
-
-const COMPONENT_NAME = "Icon"
-
-type Props = {
-  color?: string,
-  size?: number | string,
-  svg: string | Array<string>,
-  title?: string,
-  onClick?: () => void,
-}
-
-export type IconProps = Props
-
-export const Icon = ({
-                       color,
-                       size = 1,
-                       svg,
-                       title,
-                       onClick = DO_NOTHING,
-                     }: Props) => {
-  return isArray(svg)
-    // @ts-ignore
-         ? <Stack onClick={onClick}
-                  size={size}
-                  title={title}
-                  color={color || "currentColor"}
-                  data-component-name={COMPONENT_NAME}>
-           {(svg as string[]).map((s, i) => <MIcon key={i} path={s} />)}
-         </Stack>
-         : <MIcon path={svg as string}
-           // @ts-ignore
-                  onClick={onClick}
-                  size={size}
-                  title={title}
-                  color={color || "currentColor"}
-                  data-component-name={COMPONENT_NAME} />
-}
-
-Icon.COMPONENT_NAME = COMPONENT_NAME

package/src/components/Modal.tsx

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

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

package/src/components/StyledProps.type.ts

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

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

package/src/components/calendars/TinyCalendar.tsx

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

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

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

@@ -1,54 +0,0 @@
-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)}
-    />
-  )
-}