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

package/src/styles/theme/Theme.type.ts

@@ -1,76 +0,0 @@
-import { StyledProps } from "components/StyledProps.type"
-import { Nullable }    from "global"
-
-export type ContainerStyles = {
-  background?: string,
-  borderRadius?: string,
-  height?: string,
-  margin?: string,
-  padding?: string,
-  shadow?: string,
-  zIndex?: number,
-}
-
-export type Styles = {
-  appBar: ContainerStyles,
-  border: {
-    color: string,
-  },
-  buttons: {
-    textTransform: Nullable<string>,
-  },
-  colorAccent: string,
-  colorSecondary: string,
-  colorPrimary: string,
-  colorPrimaryDark: string,
-  colorWarning: string,
-  colorDanger: string,
-  colorSuccess: string,
-  container: { horizontalPadding: string },
-  footer: {
-    background: string
-  },
-  infoPanel: {
-    background: string,
-  },
-  modal: {
-    backdrop: {
-      background: string,
-    }
-  },
-  nav: {
-    linkColor: string,
-  },
-  notifications: {
-    zIndex: number,
-  },
-  overlayBackground: string,
-  pageBackground: string,
-  scrollbar: {
-    thumbColor: string,
-    trackColor: string,
-  },
-  scrollbarColor: string,
-  section: ContainerStyles,
-  sidebar: {
-    background: string,
-    boxShadow: string,
-    zIndex: number
-  },
-  table: { borderSize: string, },
-  textColorDark: string,
-  textColorLight: string,
-  textColorOverPrimaryBg: string,
-  textColorPrimary: string,
-  textColorSecondary: string,
-  tooltip: {
-    darkBackground: string,
-  },
-
-  getTextColorForBackground: (p: StyledProps<{ color: string }>) => string
-}
-
-export type Theme = {
-  isDark: boolean,
-  styles: Styles,
-}

package/src/styles/theme/base.ts

@@ -1,47 +0,0 @@
-import { COLORS, hasGoodContrast } from "styles/colors"
-import { SPACINGS }                from "styles/spacings"
-import { Styles }                  from "styles/theme/Theme.type"
-
-export const base: Partial<Styles> = {
-  appBar:       {
-    height: "80px",
-    shadow: "unset",
-    zIndex: 399,
-  }, // modal backdrop zindex is 400
-  border:       {
-    color: "rgb(233, 235, 237)",
-  },
-  buttons:      { textTransform: null },
-  colorAccent:  COLORS.BLUE,
-  colorPrimary: COLORS.HUB_SPOT_ORANGE,
-  colorDanger:  COLORS.RED,
-  colorWarning: COLORS.YELLOW,
-  colorSuccess: COLORS.GREEN,
-  container:    { horizontalPadding: "1rem" },
-  modal:        {
-    backdrop: {
-      background: "rgba(47, 57, 65, 0.85)",
-    }
-  },
-  notifications: {
-    zIndex: 401,
-  },
-  section:      {
-    background: "transparent",
-    padding:    `${SPACINGS.XXXL} 0`,
-  },
-  sidebar:      {
-    background: "unset",
-    zIndex:     10000,
-    boxShadow:  "rgb(47 57 65 / 35%)",
-  },
-  table:        { borderSize: "1rem" },
-  tooltip:      { darkBackground: "#747183" },
-
-  getTextColorForBackground: ({ color, theme }) => {
-    if (hasGoodContrast(color, theme.styles.textColorLight)) {
-      return theme.styles.textColorLight
-    }
-    return theme.styles.textColorDark
-  },
-}

package/src/styles/theme/dark.ts

@@ -1,36 +0,0 @@
-import { COLORS, fade, light, lighter } from "styles/colors"
-import { base }                         from "styles/theme/base"
-import { Theme }                   from "styles/theme/Theme.type"
-
-const textColorPrimary = COLORS.LIGHT_GREY
-
-export const dark: Theme = {
-  isDark: true,
-  styles: {
-    ...base,
-    // deprecated
-    // @ts-ignore
-    navBackground:          "#1d1e21",
-    nav:                    {
-      linkColor: light(COLORS.GREY),
-    },
-    footer:                 {
-      background: lighter(COLORS.MIDNIGHT_BLUE),
-    },
-    overlayBackground:      fade(COLORS.LIGHT_GREY, .9),
-    pageBackground:         COLORS.MIDNIGHT_BLUE,
-    scrollbar:              {
-      thumbColor: "#ffffff55",
-      trackColor: "#ffffff33",
-    },
-    sidebar:                {
-      ...base.sidebar!!,
-      background: COLORS.MIDNIGHT_BLUE,
-    },
-    textColorDark:          COLORS.MIDNIGHT_PURPLE,
-    textColorLight:         textColorPrimary,
-    textColorOverPrimaryBg: COLORS.WHITE,
-    textColorPrimary,
-    textColorSecondary:     COLORS.GREY_NOT_QUITE_BLUE,
-  },
-}

package/src/styles/theme/light.ts

@@ -1,44 +0,0 @@
-import { COLORS, fade } from "styles/colors"
-import { base }         from "styles/theme/base"
-import { Theme }   from "styles/theme/Theme.type"
-
-const textColorPrimary = COLORS.JAZZ_MAN_BLUE
-
-
-export const light: Theme = {
-  isDark: false,
-  styles: {
-    ...base,
-    appBar:                 {
-      ...base.appBar,
-      background: "transparent",
-    },
-    // deprecated
-    // @ts-ignore
-    navBackground:          COLORS.GREY_NOT_QUITE_BLUE,
-    nav:                    {
-      linkColor: COLORS.MIDNIGHT_PURPLE,
-    },
-    footer:                 {
-      background: COLORS.MIDNIGHT_BLUE,
-    },
-    infoPanel:              {
-      background: COLORS.VERY_LIGHT_GREY,
-    },
-    pageBackground:         COLORS.WHITE,
-    overlayBackground:      fade(COLORS.LIGHT_GREY),
-    scrollbar:              {
-      thumbColor: "#00000033",
-      trackColor: "#00000022",
-    },
-    sidebar:                {
-      ...base.sidebar!!,
-      background: COLORS.WHITE,
-    },
-    textColorDark:          textColorPrimary,
-    textColorLight:         COLORS.WHITE,
-    textColorOverPrimaryBg: COLORS.WHITE,
-    textColorPrimary,
-    textColorSecondary:     COLORS.GREY_NOT_QUITE_BLUE,
-  },
-}

package/src/styles/theme/light2.ts

@@ -1,22 +0,0 @@
-import clone          from "lodash/cloneDeep"
-import { Theme } from "styles/theme/Theme.type"
-import { light }      from "styles/theme/light"
-import { SPACINGS }   from "styles/spacings"
-
-export const light2: Theme = clone<Theme>(light)
-light2.styles              = {
-  ...light2.styles,
-  appBar:         {
-    ...light2.styles.appBar,
-    shadow: "#0000000d 0 0 15px 0",
-  },
-  pageBackground: "#f7f7f7",
-  section:        {
-    ...light2.styles.section,
-    background:   "#fff",
-    borderRadius: "3px",
-    margin:       `${SPACINGS.XXXL} 0`,
-    padding:      "2rem",
-    shadow:       "#00000014 0 6px 14px 0",
-  },
-}

package/src/styles/theme/useTheme.ts

@@ -1,5 +0,0 @@
-import { useContext }   from "react"
-import { ThemeContext } from "styled-components"
-import { Theme }   from "styles/theme/Theme.type"
-
-export const useTheme = (): Theme => useContext<Theme>(ThemeContext)

package/src/styles/types.ts

@@ -1,18 +0,0 @@
-export type ColorProps = {
-    accent? :boolean,
-    color? :string,
-    danger? :boolean,
-    neutral? :boolean,
-    primary? :boolean,
-    // deprecated
-    secondary? :boolean,
-    success? :boolean,
-    warning? :boolean,
-}
-
-export type ContainerProps = {
-    color? :string,
-    compact? :boolean,
-    fluid? :boolean,
-    className? :any,
-}

package/src/styles/typography.ts

@@ -1,67 +0,0 @@
-import { ValueOf } from "utils/types"
-
-const XXS    = ".8rem"
-const XS     = ".9rem"
-const SM     = "1rem"
-const MD     = "1.3rem"
-const LG     = "1.7rem"
-const XL     = "2.3rem"
-const XXL    = "3.3rem" // h1
-const XXXL   = "4rem"
-const XXXXL  = "5rem"
-const XXXXXL = "6rem"
-
-const THIN    = "100"
-const LIGHT   = "300"
-const REGULAR = "400"
-const MEDIUM  = "500"
-const BOLD    = "700"
-const BLACK   = "800"
-
-const H1   = "h1"
-const H2   = "h2"
-const H3   = "h3"
-const H4   = "h4"
-const H5   = "h5"
-const H6   = "h6"
-const P    = "p"
-const SPAN = "span"
-const DIV  = "div"
-
-export const FONT_TAGS = {
-  H1, H2, H3, H4, H5, H6, P, SPAN, DIV,
-} as const
-
-export const FONT_SIZES = {
-  XXS, XS, SM, MD, LG, XL, XXL, XXXL, XXXXL, XXXXXL,
-} as const
-
-export const FONT_SIZES_EM = Object.freeze({
-  XXS:    XXS.replace("r", ""),
-  XS:     XS.replace("r", ""),
-  SM:     SM.replace("r", ""),
-  MD:     MD.replace("r", ""),
-  LG:     LG.replace("r", ""),
-  XL:     XL.replace("r", ""),
-  XXL:    XXL.replace("r", ""),
-  XXXL:   XXXL.replace("r", ""),
-  XXXXL:  XXXXL.replace("r", ""),
-  XXXXXL: XXXXXL.replace("r", ""),
-})
-
-export const FONT_WEIGHTS = {
-  THIN, LIGHT, REGULAR, MEDIUM, BOLD, BLACK,
-} as const
-
-export type FontSize = ValueOf<typeof FONT_SIZES>
-export type FontWeight = ValueOf<typeof FONT_WEIGHTS>
-export type FontTag = ValueOf<typeof FONT_TAGS>
-export type TextAlignment = "center" | "left" | "right"
-
-export type TextProps = {
-  align?: TextAlignment,
-  as?: FontTag,
-  hasSubText?: boolean,
-  size?: FontSize,
-  weight?: FontWeight,
-}

package/src/utils/NavBarScrollWatcher.ts

@@ -1,59 +0,0 @@
-// @flow
-
-
-import { Logger } from "utils/logging/Logger"
-
-export type ScrollPassedNavBarListener = (b :boolean) => void
-
-const listeners = new Set<ScrollPassedNavBarListener>()
-let navBar :HTMLDivElement
-let scrolledPassedNavBar :boolean
-const logger = new Logger("NavBarScrollWatcher")
-
-const checkNavPosition = () => {
-    if (!navBar) return
-
-    const { height: bottomPixel } = navBar.getBoundingClientRect()
-    const isCurrentlyPassedBar    = window.scrollY > bottomPixel
-
-    logger.writeInfo(
-        "window.scrollY",
-        window.scrollY,
-        "bottomPixel",
-        bottomPixel,
-        "scrolledPassedNavBar",
-        scrolledPassedNavBar,
-    )
-
-    if ((scrolledPassedNavBar == null) ||
-        (!scrolledPassedNavBar && isCurrentlyPassedBar) ||
-        (scrolledPassedNavBar && !isCurrentlyPassedBar)) {
-        notifyListeners(isCurrentlyPassedBar)
-    }
-
-    scrolledPassedNavBar = isCurrentlyPassedBar
-}
-
-const notifyListeners = (b :boolean) => {
-    listeners.forEach((f :ScrollPassedNavBarListener) => { f(b) })
-}
-
-export class NavBarScrollWatcher {
-    static onScrollPassedNavBar = (f :ScrollPassedNavBarListener) => {
-        listeners.add(f)
-        if (listeners.size === 1) {
-            window.addEventListener("scroll", checkNavPosition)
-        }
-
-        return () => {
-            listeners.delete(f)
-            if (listeners.size === 0) {
-                window.removeEventListener("scroll", checkNavPosition)
-            }
-        }
-    }
-
-    static setNavBar = (n :HTMLDivElement) => { navBar = n }
-
-    static setInitialState = () => { checkNavPosition() }
-}

package/src/utils/arrayHelpers.ts

@@ -1,56 +0,0 @@
-import { flatten as ldFlatten } from "lodash"
-
-type IndexedMap<T> = ({ [key in string | number]: T })
-export type Matrix<T> = Array<Array<T>>
-export type NullableArray<T = any> = ArrayLike<T> | null | undefined
-type ObjectWithProperty<Prop extends string> = { [key in Prop]: any }
-
-export const arrayOfSizeN = (n: number): Array<any> => {
-  // return Array.from({length: n})
-  const arr: 0[] = []
-  for (let i = 0; i < n; i++) {
-    arr.push(0)
-  }
-  return arr
-}
-
-export const excludeBlanks = <T = any>(a: T[]): NonNullable<T>[] => (
-  a.filter((o: T) => o != null) as NonNullable<T>[]
-)
-
-export const flatten = <T>(m: Matrix<T>): Array<T> => ldFlatten(m)
-
-export const indexBy = <FieldName extends string, T extends ObjectWithProperty<FieldName>>(
-  a: T[],
-  fieldName: FieldName
-): IndexedMap<T> => {
-  const index: IndexedMap<T> = {}
-
-  a.forEach((item) => {
-    const key  = item[fieldName]
-    index[key] = item
-  })
-
-  return index
-}
-
-export const isEmpty        = (a: NullableArray): boolean => (!a?.length)
-export const isLastIndex    = (a: any[], i: number) => i === a.length - 1
-export const isLastItem     = <E>(a: ArrayLike<E>, item: E): boolean =>
-  (lastItem(a) === item)
-export const isNotEmpty     = (a: NullableArray): boolean => !isEmpty(a)
-export const isNotLastIndex = (a: any[], i: number) => !isLastIndex(a, i)
-export const isNotLastItem  = <E>(a: ArrayLike<E>, item: E): boolean =>
-  (!isLastItem(a, item))
-export const lastItem       = <E>(a: ArrayLike<E>): E => a[a.length - 1]
-
-export const splitArray = (arr: any[], index: number,): any[][] => {
-  const preSplit  = [...arr]
-  const postSplit = preSplit.splice(index)
-  return [preSplit, postSplit]
-}
-
-export const takeOutItem = <T>(arr: Array<T>, index: number): Array<T> => {
-  const [preSplit, [, ...postSplit]] = splitArray(arr, index)
-  return [...preSplit, ...postSplit]
-}

package/src/utils/dateTime/DateRange.type.ts

@@ -1,6 +0,0 @@
-import { Moment } from "moment"
-
-export type DateRange = {
-    startDate :Moment,
-    endDate :Moment
-}

package/src/utils/dateTime/calendar.ts

@@ -1,23 +0,0 @@
-export const MONTH_MAP = {
-    JANUARY  : 0,
-    FEBRUARY : 1,
-    MARCH    : 2,
-    APRIL    : 3,
-    MAY      : 4,
-    JUNE     : 5,
-    JULY     : 6,
-    AUGUST   : 7,
-    SEPTEMBER: 8,
-    OCTOBER  : 9,
-    NOVEMBER : 10,
-    DECEMBER : 11,
-} as const
-
-export type Month = keyof typeof MONTH_MAP
-
-export const getNextMonth = (currMon :number) :number => (
-    currMon === MONTH_MAP.DECEMBER ? MONTH_MAP.JANUARY : currMon + 1
-)
-export const getPrevMonth = (currMon :number) :number => (
-    currMon === MONTH_MAP.JANUARY ? MONTH_MAP.DECEMBER : currMon - 1
-)

package/src/utils/dateTimeHelpers.ts

@@ -1,105 +0,0 @@
-import moment, { Moment } from "moment"
-import { PromiseFunc }    from "utils/function.types"
-
-let defaultLocale = new Intl.DateTimeFormat().resolvedOptions().locale
-
-export const formatMonthDate     = (m: Moment): string => m.format("MMM D")
-export const formatDayDate       = (m: Moment): string => m.format("ddd, ll")
-export const formatMonthDateYear = (m: Moment): string => m.format("MMM DD YYYY")
-export const setDefaultLocale    = (locale: string) => {
-  defaultLocale =
-    locale
-}
-
-type FormatOptions = {
-  locale?: string,
-  iso8601Format?: boolean,
-  timeZone?: string,
-}
-export const formatDate = (
-  d: Date,
-  {
-    locale = defaultLocale,
-    iso8601Format = false,
-    ...options
-  }: FormatOptions = {},
-): string => {
-  const formatter = new Intl.DateTimeFormat(locale, options)
-
-  try {
-    if (iso8601Format) {
-      const parts = formatter.formatToParts(d)
-      return ["year", "month", "day"].map((part: string) => {
-        return parts?.find((p) => p.type === part)?.value
-      }).join("-")
-    }
-  } catch (e) {}
-
-  const formatted = formatter.format(d)
-  return locale.includes("en") ? formatted.replace(/\//g, "-") : formatted
-}
-
-export const formatDateTime = (
-  d: Date,
-  {
-    locale = defaultLocale,
-    ...options
-  }: FormatOptions = {},
-): string => {
-  const formattedDate = formatDate(
-    d,
-    { locale, iso8601Format: true, ...options }
-  )
-
-  return `${formattedDate} ${moment(d).format("LTS")}`
-}
-
-export const returnAfterMinimum = async (
-  millisecs: number,
-  f: PromiseFunc,
-  ...fArgs: any
-) => {
-  const start: Moment = moment()
-  const val           = await f(...fArgs)
-  const end: Moment   = moment()
-  const diff          = end.diff(start, "milliseconds")
-
-  if (diff < millisecs) {
-    await new Promise((resolve) => {
-      setTimeout(resolve, millisecs - diff)
-    })
-  }
-
-  return val
-}
-
-export const momentListToDateList = (l: Moment[]): Date[] => (
-  l.map((m: Moment) => m.toDate())
-)
-
-export const minDateBetween = (a: Moment, b: Moment): Moment => (
-  a.isBefore(b) ? a : b
-)
-export const maxDateBetween = (a: Moment, b: Moment): Moment => (
-  a.isAfter(b) ? a : b
-)
-
-export const addNDaysFromDate       = (n: number, d = new Date()): Date =>
-  momentArithmetic(d, "add", n, "days")
-export const addNWeeksFromDate      = (n: number, d = new Date()): Date =>
-  momentArithmetic(d, "add", n, "weeks")
-export const subtractNDaysFromDate  = (n: number, d = new Date()): Date =>
-  momentArithmetic(d, "subtract", n, "days")
-export const subtractNWeeksFromDate = (n: number, d = new Date()): Date =>
-  momentArithmetic(d, "subtract", n, "weeks")
-
-const momentArithmetic = (
-  d: Date,
-  func: string,
-  n: number,
-  unit: string
-): Date => {
-  // @ts-ignore
-  const newDate = (moment(d)[func] as Function)(n, unit) as Moment
-  return newDate.toDate()
-}

package/src/utils/function.types.ts

@@ -1 +0,0 @@
-export type PromiseFunc<T = any, Rtn = any> = ((...o: T[]) => Promise<Rtn>)

package/src/utils/functionHelpers.ts

@@ -1,23 +0,0 @@
-import { isNotLastIndex } from "utils/arrayHelpers"
-import { PromiseFunc }    from "utils/function.types"
-
-type MaybePromiseFunc = PromiseFunc | ((...o: any) => any)
-
-export const DO_NOTHING = function(...args :any) {}
-
-export const flowInOrderAsync = (...funcs: MaybePromiseFunc[]): PromiseFunc => {
-  const wrappedFuncs = funcs.map((func, i: number) => {
-    return async (promises: PromiseFunc[], ...args: any) => {
-      const nextFunc = isNotLastIndex(funcs, i) ? promises[i + 1] : null
-
-      const val = await func(...args)
-      return !!nextFunc ? nextFunc(promises, val) : val
-    }
-  })
-
-  return async (...args) => wrappedFuncs[0](wrappedFuncs, ...args)
-}
-
-export const parseNumberAndCall = (action :(n :number) => void) => (s :string) => {
-  action(Number(s))
-}

package/src/utils/idGenerator.ts

@@ -1,8 +0,0 @@
-// @flow
-
-export function* newIdGenerator() {
-    let id = 0
-    while (true) { yield id++ }
-}
-
-export const nextId = (generator :Generator) :number => generator.next().value

package/src/utils/logging/Logger.ts

@@ -1,34 +0,0 @@
-import { LoggerI } from "utils/logging/Logger.type"
-
-const LEVEL_STYLES = {
-  info:  "background: #499cc8; color: white;",
-  error: "background: #c14a4f; color: white;",
-  warn:  "background: #e0a270; color: black;",
-} as const
-
-export class Logger implements LoggerI {
-  moduleName: string
-
-  constructor(moduleName: string) {
-    this.moduleName = moduleName
-  }
-
-  log = (level: keyof typeof LEVEL_STYLES) => (...args: any) => {
-    if (typeof window === "undefined" ||
-        !window.DEBUG_MODULES.has(this.moduleName)) return
-
-    console[level](
-      `%c${this.moduleName}`,
-      `${LEVEL_STYLES[level]} padding: 2px 6px;`,
-      ...args,
-    )
-  }
-
-  writeInfo    = this.log("info")
-  writeError   = this.log("error")
-  writeWarning = this.log("warn")
-}
-
-if (typeof window !== `undefined`) {
-  window.DEBUG_MODULES = new Set()
-}

package/src/utils/logging/Logger.type.ts

@@ -1,7 +0,0 @@
-export interface LoggerI {
-    writeInfo :(...args :any) => void,
-    writeError :(...args :any) => void,
-    writeWarning :(...args :any) => void
-}
-
-export type LoggableFunc = (logger :LoggerI) => any

package/src/utils/logging/loggable.tsx

@@ -1,17 +0,0 @@
-import React, { ComponentType as RComponentType } from "react"
-import { LoggerI }                           from "utils/logging/Logger.type"
-import { withModuleLogging }                      from "utils/logging/with_module_logging"
-
-type ComponentType<T> = RComponentType<T> & {
-  COMPONENT_NAME: string
-}
-
-export const loggable = <T, >(C: ComponentType<T>): ComponentType<T> => (
-  withModuleLogging(C.COMPONENT_NAME, (logger: LoggerI) => (
-    class Loggable extends React.Component<T> {
-      render() {
-        return <C {...this.props} logger={logger} />
-      }
-    }
-  ))
-)

package/src/utils/logging/with_module_logging.ts

@@ -1,8 +0,0 @@
-// @flow
-
-import { Logger }            from "utils/logging/Logger"
-import { LoggableFunc } from "utils/logging/Logger.type"
-
-export const withModuleLogging = (moduleName :string, f :LoggableFunc) => {
-    return f(Object.freeze(new Logger(moduleName)))
-}

package/src/utils/numberHelpers.ts

@@ -1,4 +0,0 @@
-// @flow
-
-export const minNumberBetween = (a :number, b :number) :number => a < b ? a : b
-export const maxNumberBetween = (a :number, b :number) :number => a > b ? a : b