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

package/src/components/forms/selectors/types.ts

@@ -1,43 +0,0 @@
-import { FormFieldProps } from "components/forms/formField.types"
-import { StateChangeOptions }  from "downshift"
-
-export type SelectorItemKey = string | number | null | undefined
-export type SelectorOptionOptionalAttrs = {
-  isClearingItem?: boolean,
-  isNextItem?: boolean,
-  isBackItem?: boolean,
-  isAddItem?: boolean,
-  isHeaderItem?: boolean,
-}
-export type SelectorOption =
-  { [key: string]: any }
-  & SelectorOptionOptionalAttrs
-export type OnMultiSelectItemRemoveFunc<T = SelectorItemKey> = (k: T) => void
-export type OnItemSelectedFunc =
-  ((k: SelectorItemKey) => void)
-  | ((o: SelectorOption | null) => void)
-export type StateChange = StateChangeOptions<SelectorOption>
-
-type Common = FormFieldProps & {
-  clearable?: boolean,
-  options: Array<SelectorOption>,
-  optionsKeyMap?: { [key: string]: SelectorOption },
-  keyField: string,
-  valueField: string,
-  onChange?: OnItemSelectedFunc,
-  onStateChange?: (s: StateChange) => void,
-  invalidOnNoSelection?: boolean,
-  flat?: boolean,
-  open?: boolean,
-  small?: boolean,
-}
-
-export type SelectorProps = {
-  selectedKey?: SelectorItemKey,
-  onChange?: OnItemSelectedFunc,
-} & Common
-
-export type MultiSelectorProps = {
-  selectedKeys?: SelectorItemKey[],
-  onChange?: OnItemSelectedFunc,
-} & Common

package/src/components/forms/textfields/EmailTextField.tsx

@@ -1,7 +0,0 @@
-import { TextFieldProps } from "components/forms/formField.types"
-import { TextField }           from "components/forms/textfields/TextField"
-import * as React              from "react"
-
-export const EmailTextField = (props :TextFieldProps<any>) => {
-    return <TextField type={"email"} {...props} />
-}

package/src/components/forms/textfields/NumberTextField.tsx

@@ -1,17 +0,0 @@
-import { TextFieldProps } from "components/forms/formField.types"
-import { TextField }           from "components/forms/textfields/TextField"
-import React, { ChangeEvent }  from "react"
-
-export let NumberTextField = ({
-                                onChange,
-                                ...props
-                              }: TextFieldProps<number, number>) => {
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value || "0"
-    onChange(
-      parseInt(val.replace(/[^0-9.]+/g, "")),
-    )
-  }
-  // @ts-ignore
-  return <TextField {...props} onChange={handleChange} />
-}

package/src/components/forms/textfields/PasswordTextField.tsx

@@ -1,12 +0,0 @@
-import { TextFieldProps } from "components/forms/formField.types"
-import { TextField }           from "components/forms/textfields/TextField"
-import React                   from "react"
-
-type Props = TextFieldProps<any> & {
-  newPassword?: boolean
-}
-
-export const PasswordTextField = ({ newPassword, ...props }: Props) => {
-  const autoCompleteAttr = newPassword ? { autoComplete: "new-password" } : {}
-  return <TextField {...autoCompleteAttr} type={"password"} {...props} />
-}

package/src/components/forms/textfields/TextArea.tsx

@@ -1,25 +0,0 @@
-// @ts-ignore
-import { Textarea }               from "@zendeskgarden/react-forms"
-import { FormFieldProps }         from "components/forms/formField.types"
-import { TextFieldWrapper }       from "components/forms/textfields/TextFieldWrapper"
-import React, { ChangeEvent, FC } from "react"
-
-export type TextAreaProps = FormFieldProps & {
-  resizable?: boolean,
-  value?: string,
-  onChange: (text: string, e: ChangeEvent<HTMLTextAreaElement>) => void,
-}
-
-
-export const TextArea: FC<TextAreaProps> = ({ onChange, ...props }) => {
-  const notifyParentOfChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(e.target.value, e)
-  }
-
-  return <TextFieldWrapper {...props}
-                           onChange={notifyParentOfChange}
-                           WrappedComponent={Textarea} />
-}
-
-// @ts-ignore
-TextArea.COMPONENT_NAME = "TextArea"

package/src/components/forms/textfields/TextField.tsx

@@ -1,45 +0,0 @@
-// @ts-ignore
-import { Input }                  from "@zendeskgarden/react-forms"
-import { TextFieldProps }    from "components/forms/formField.types"
-import { TextFieldWrapper }       from "components/forms/textfields/TextFieldWrapper"
-import React, { ChangeEvent, FC } from "react"
-import styled                     from "styled-components"
-
-type NewOnChangeFunc = (
-  value: string,
-  event: ChangeEvent<HTMLInputElement>
-) => void
-type OldOnChangeFunc = (event: ChangeEvent<HTMLInputElement>) => void
-
-type OriginalProps = TextFieldProps & { useNewOnChange?: false }
-type PropsWithNewOnChange = Omit<TextFieldProps, "onChange"> & {
-  onChange: NewOnChangeFunc,
-  useNewOnChange: true,
-}
-
-type Props = PropsWithNewOnChange | OriginalProps
-
-export let TextField: FC<Props> = ({
-                                     onChange,
-                                     useNewOnChange = false,
-                                     ...props
-                                   }) => {
-
-  const notifyParentOfChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (useNewOnChange === true) {
-      (onChange as NewOnChangeFunc)(e.target.value, e)
-      return
-    }
-
-    (onChange as OldOnChangeFunc)(e)
-  }
-
-  return <TextFieldWrapper {...props}
-                           onChange={notifyParentOfChange}
-                           WrappedComponent={Input} />
-}
-
-// @ts-ignore
-TextField                = styled(TextField)``
-// @ts-ignore
-TextField.COMPONENT_NAME = "TextField"

package/src/components/forms/textfields/TextFieldWrapper.tsx

@@ -1,120 +0,0 @@
-import {
-  Field as ZField,
-  Hint,
-  Label,
-  Message,
-  /* @ts-ignore */
-}                                 from "@zendeskgarden/react-forms"
-import { TextFieldProps }         from "components/forms/formField.types"
-import { TextAreaProps }          from "components/forms/textfields/TextArea"
-import { VALIDATION_STATES }      from "components/forms/validationStates"
-import { FlexBox }                from "components/layout/FlexBox"
-import { useObserver }            from "mobx-react"
-import { ComponentType }     from "react"
-import React, { ChangeEvent, FC } from "react"
-import styled, { css }            from "styled-components"
-import { dark, fade }             from "styles/colors"
-import { FONT_SIZES }             from "styles/typography"
-
-type FieldProps = TextFieldProps | (
-  Omit<TextAreaProps, "onChange">
-  & { onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void }
-  )
-
-type Props = {
-  WrappedComponent: ComponentType<FieldProps & any>
-} & FieldProps
-
-const Field = styled(ZField)`
-  width: ${({ compact }: Props) => compact ? "auto" : "100%"};
-`
-
-export let TextFieldWrapper: FC<Props> = ({
-                                            className,
-                                            compact,
-                                            emptyState,
-                                            fluid,
-                                            hint,
-                                            label,
-                                            message,
-                                            validation,
-                                            value,
-                                            WrappedComponent,
-                                            onChange,
-                                            ...props
-                                          }) => {
-  message = validation?.message || message
-  return useObserver(() => (
-    <Container className={className}
-               withRows
-               gap={"unset"}
-               fluid={fluid}>
-      <Field compact={compact}>
-        {label ? <Label>{label}</Label> : null}
-        {
-          hint
-          ? <Hint
-            css={`&&& {
-              font-size: ${FONT_SIZES.XS};
-            }`}>
-            {hint}
-          </Hint>
-          : null
-        }
-        <WrappedComponent
-          placeholder={emptyState}
-          validation={validation?.validation}
-          {...props}
-          resizable={true}
-          value={value}
-          onChange={onChange}
-        />
-        {
-          message
-          ? <Message
-            css={`&&& {
-              font-size: ${FONT_SIZES.XS};
-            }`}
-            validation={validation?.validation}>
-            {message}
-          </Message>
-          : null
-        }
-      </Field>
-    </Container>
-  ))
-}
-
-const hoverFocusStyling = css`
-  :hover {
-    border-color: ${({ theme }) => theme.styles.colorPrimary};
-  }
-
-  :focus {
-    border-color: ${({ theme }) => dark(theme.styles.colorPrimary)};
-    box-shadow: ${({ theme }) => `0 0 0 3px ${fade(theme.styles.colorPrimary)}`};
-  }
-`
-
-// @ts-ignore
-TextFieldWrapper = styled(TextFieldWrapper)`
-  &&&& {
-    font-size: inherit;
-    ${(p) => !p.disabled ? hoverFocusStyling : ""}
-  }
-`
-
-TextFieldWrapper.defaultProps = {
-  disabled:   false,
-  validation: { validation: VALIDATION_STATES.NONE },
-}
-
-// @ts-ignore
-TextFieldWrapper.COMPONENT_NAME = "TextFieldWrapper"
-
-const Container = styled(FlexBox)`
-  ${({ fluid }) => fluid ? "width: 100%;" : ""}
-  && * {
-    font-size: inherit;
-  }
-`

package/src/components/forms/validationStates.ts

@@ -1,6 +0,0 @@
-export const VALIDATION_STATES = {
-  ERROR:   "error",
-  WARNING: "warning",
-  SUCCESS: "success",
-  NONE:    null,
-} as const

package/src/components/layout/AppBar.tsx

@@ -1,137 +0,0 @@
-import { mdiArrowLeft, mdiMenu }             from "@mdi/js"
-import { IconButton }                        from "components/forms/IconButton"
-import { Container }                         from "components/layout/Container"
-import { FlexBox }                           from "components/layout/FlexBox"
-import React, { ElementType, FC, ReactNode } from "react"
-import { useStores }                         from "stores/useStores"
-import styled, { css }                       from "styled-components"
-import { mediaQueries }                      from "styles/mediaQueries"
-import { SPACINGS }                          from "styles/spacings"
-import { useTheme }                          from "styles/theme/useTheme"
-import { ContainerProps }               from "styles/types"
-import { DO_NOTHING }                        from "utils/functionHelpers"
-
-const { forSmallComputersAndUp } = mediaQueries()
-const { SM }                     = SPACINGS
-
-type Props = {
-  actions: Array<ReactNode>,
-  fixed?: boolean,
-  logo?: ElementType,
-  onBackClicked?: () => void,
-  onLogoClicked: () => void,
-  showBackButton?: boolean,
-  title: ElementType,
-} & ContainerProps
-
-export let AppBar: FC<Props> = ({
-                                  actions = [],
-                                  className,
-                                  fixed,
-                                  fluid,
-                                  logo,
-                                  onBackClicked = DO_NOTHING,
-                                  onLogoClicked = DO_NOTHING,
-                                  showBackButton = false,
-                                  title,
-                                }) => {
-
-  // TODO this should not use MobX...switch to react context
-  const { ui }       = useStores()
-  const theme        = useTheme()
-  const appBarHeight = theme.styles.appBar.height
-
-  const openNavDrawer = () => {
-    ui.openDrawerWith({
-      body:          <FlexBox css={`padding-bottom: ${SM};`} withRows>
-                       {actions}
-                     </FlexBox>,
-      withNoActions: true,
-    })
-  }
-
-  return <>
-    {fixed ? <FixedPlaceHolder height={`${appBarHeight}`} /> : null}
-    <BarWrapper fixed={fixed} className={className}>
-      <Content height={appBarHeight} fluid={fluid}>
-        {
-          showBackButton
-          ? <IconButton icon={mdiArrowLeft}
-                        flat
-                        onClick={onBackClicked} />
-          : null
-        }
-        {/*@ts-ignore*/}
-        <FlexBox alignItems={"center"}
-                 onClick={onLogoClicked}
-                 css={`cursor: pointer;`}>
-          {logo ? logo : null}
-          {title}
-        </FlexBox>
-        <MobileNav
-          color={
-            theme.styles.nav.linkColor ||
-            theme.styles.getTextColorForBackground({
-              color: theme.styles.appBar.background ?? "$fff",
-              theme,
-            })
-          }
-          onClick={openNavDrawer} />
-        <DesktopNav alignItems={"center"}>
-          {actions}
-        </DesktopNav>
-      </Content>
-    </BarWrapper>
-  </>
-}
-
-AppBar = styled(AppBar)``
-
-const BarWrapper = styled.header<{ fixed?: boolean }>`
-  background: ${({ theme }) => theme.styles.appBar.background};
-  box-shadow: ${({ theme }) => theme.styles.appBar.shadow};
-  position: ${({ fixed }) => fixed ? "fixed" : "unset"};
-  top: ${({ fixed }) => fixed ? "0" : "unset"};
-  left: ${({ fixed }) => fixed ? "0" : "unset"};
-  width: 100%;
-  z-index: ${({ theme }) => theme.styles.appBar.zIndex};
-`
-
-const Content = styled(Container).attrs({
-  withRows:   false,
-  spacing:    SM,
-  justify:    "space-between",
-  alignItems: "center",
-})`
-  height: ${({ height }: { height?: string }) => height
-                                                 ? height
-                                                 : "fit-content"};
-`
-
-const DesktopNav = styled(FlexBox).attrs({
-  as: "nav",
-})`
-  && {
-    display: none;
-    ${forSmallComputersAndUp(css`
-      display: flex;
-    `)}
-  }
-`
-
-const FixedPlaceHolder = styled.div<{ height: string }>`
-  height: ${({ height }) => height};
-`
-
-const MobileNav = styled(IconButton).attrs({
-  flat: true,
-  icon: mdiMenu,
-})`
-  && {
-    margin-right: 0;
-    ${forSmallComputersAndUp(css`
-      display: none;
-    `)}
-  }
-`
-

package/src/components/layout/AppBarLayout.tsx

@@ -1,55 +0,0 @@
-import { FlexBlock }                           from "components/layout/FlexBlock"
-import React, { ReactNode, useEffect, useRef } from "react"
-import styled                                  from "styled-components"
-import { useTheme }                            from "styles/theme/useTheme"
-import { NavBarScrollWatcher }                 from "utils/NavBarScrollWatcher"
-
-type Props = {
-  alertView: ReactNode,
-  appBar: ReactNode,
-  appBarHeight: string,
-  className?: string,
-  content: ReactNode,
-  drawerView: ReactNode,
-}
-
-export const AppBarLayout = ({
-                               alertView,
-                               appBar,
-                               className,
-                               content,
-                               drawerView,
-                             }: Props) => {
-  const theme        = useTheme()
-  const appBarHeight = theme.styles.appBar.height
-  const appBarRef    = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    NavBarScrollWatcher.setNavBar(appBarRef.current!)
-  }, [])
-
-  return (
-    <FlexBlock data-component-name={AppBarLayout.COMPONENT_NAME}
-               withRows
-               spacing={null}
-               className={className}>
-      <div ref={appBarRef}>{appBar}</div>
-      <FlexBlock css={`min-height: calc(100vh - ${appBarHeight});`}
-                 spacing={null}
-                 withRows
-                 fluid>
-        {content}
-        {alertView}
-      </FlexBlock>
-      <DrawerWrapper>
-        {drawerView}
-      </DrawerWrapper>
-    </FlexBlock>
-  )
-}
-
-AppBarLayout.COMPONENT_NAME = "AppBarLayout"
-
-const DrawerWrapper = styled.div`
-  z-index: ${({ theme }) => theme.styles.sidebar.zIndex};
-`

package/src/components/layout/Carousel.tsx

@@ -1,44 +0,0 @@
-import { mdiArrowLeft, mdiArrowRight } from "@mdi/js"
-import { IconButton }                  from "components/forms/IconButton"
-import { FlexBox }                     from "components/layout/FlexBox"
-import React, { ReactNode }            from "react"
-import styled                          from "styled-components"
-
-type Props = {
-  children: ReactNode,
-  className?: string,
-  disableNextButton?: boolean,
-  disablePreviousButton?: boolean,
-  inline?: boolean,
-  onNextClick: () => void,
-  onPreviousClick: () => void,
-}
-
-export let Carousel = ({
-                         children,
-                         className,
-                         disableNextButton,
-                         disablePreviousButton,
-                         inline,
-                         onNextClick,
-                         onPreviousClick,
-                       }: Props) => (
-  <FlexBox alignItems={"center"} className={className} inline={inline}>
-    <NavButton disabled={disablePreviousButton}
-               icon={mdiArrowLeft}
-               onClick={onPreviousClick} />
-    <FlexBox css={`flex: 1;`} justifyContent={"center"}>
-      {children}
-    </FlexBox>
-    <NavButton disabled={disableNextButton}
-               icon={mdiArrowRight}
-               onClick={onNextClick} />
-  </FlexBox>
-)
-
-Carousel = styled(Carousel)``
-
-const NavButton = styled(IconButton).attrs({
-  flat:    false,
-  primary: true,
-})``

package/src/components/layout/Container.tsx

@@ -1,43 +0,0 @@
-import { FlexBlock }          from "components/layout/FlexBlock"
-import styled                 from "styled-components"
-import { deviseSizes }        from "styles/deviceSizes"
-import { mediaQueries, unit } from "styles/mediaQueries"
-import { css }                from "styled-components"
-
-const {
-          forLargeComputers,
-          forLargeTabletsAndUp,
-          forSmallComputersAndUp,
-      } = mediaQueries()
-
-const {
-          tabletSize,
-          largeTabletSize,
-          smallComputerSize,
-      } = deviseSizes()
-
-const deviceSettings = css`
-  ${forLargeTabletsAndUp(css`
-      width: ${unit(tabletSize + 1)};
-  `)}
-
-  ${forSmallComputersAndUp(css`
-      width: ${unit(largeTabletSize + 1)};
-      min-width: ${unit(tabletSize + 1)};
-  `)}
-
-  ${forLargeComputers(css`
-      width: ${unit(smallComputerSize + 1)};
-  `)}
-`
-
-export const Container = styled(FlexBlock).attrs({
-    withRows: true,
-})`
-  margin: 0 auto;
-  flex: 1;
-  width: 100%;
-  padding: 0 ${({ theme }) => theme.styles.container.horizontalPadding};
-
-  ${({ fluid }) => fluid ? "" : deviceSettings}
-`

package/src/components/layout/FlexBlock.tsx

@@ -1,122 +0,0 @@
-import React        from "react"
-import styled       from "styled-components"
-import { SPACINGS } from "styles/spacings"
-
-const COMPONENT_NAME = "FlexBlock"
-
-type ResponsiveProps = {
-  mediaQueryFunc: Function,
-  // eslint-disable-next-line no-use-before-define
-  props: Props
-}
-
-export type Props = {
-  alignItems?: string,
-  compactAxis?: boolean,
-  compact?: boolean,
-  fluid?: boolean,
-  hidden?: boolean,
-  withRows?: boolean,
-  justify?: string,
-  /*
-   When deriving a new Styled Component based off any Block/FlexBlock
-   component, if spacing is being used, flexDirection needs to be set as
-   a attrs prop, rather as a css property.
-
-   ex:
-   CORRECT
-   const FormContainer = styled(FlexBlock).attrs({
-   spacing: SPACINGS.SM,
-   withRows: true,
-   })``
-
-   INCORRECT
-   const FormContainer = styled(FlexBlock).attrs({
-   spacing: SPACINGS.SM,
-   })`
-   flex-direction: column;
-   `
-   */
-  spacing?: string | null,
-  responsivePropsList?: Array<ResponsiveProps>
-}
-
-const getFlexDirection = ({ withRows }: Props) => {
-  return withRows ? "column" : "row"
-}
-
-const getSpacingDirection = (direction: string) => {
-  return direction === "column" ? "margin-bottom" : "margin-right"
-}
-
-const getDisplay = ({ compact, hidden }: Props) => {
-  if (hidden) return "none"
-  return compact ? "inline-flex" : "flex"
-}
-
-const getSpacing = ({ spacing, ...props }: Props) => {
-  if (!spacing) return ""
-
-  return `& > *:not(:last-child) {
-      margin: 0;
-      ${getSpacingDirection(getFlexDirection(props))}: ${spacing};
-    }`
-}
-
-const responsiveStyles = ({ responsivePropsList, ...originalProps }: Props) => (
-  responsivePropsList?.map(({
-                              mediaQueryFunc,
-                              props: rProps,
-                            }: ResponsiveProps): string => {
-    const props = { ...originalProps, ...rProps }
-    const {
-            alignItems,
-            justify,
-            compactAxis,
-            fluid,
-          }     = props
-
-    return mediaQueryFunc(`
-              display: ${getDisplay(props)};
-              justify-content: ${justify || "initial"};
-              align-items: ${alignItems ? alignItems : "initial"}; 
-              // align-self: ${compactAxis ? "initial" : "stretch"};
-              flex-direction: ${getFlexDirection(props)};
-              flex: ${fluid ? 1 : "unset"};
-              ${getSpacing(props)}
-          `).join("")
-  })
-)
-
-export const FlexBlock = styled.div.attrs<Props>(({
-                                                    spacing,
-                                                  }) => ({
-  spacing: spacing === undefined ? SPACINGS.SM : spacing,
-}))`
-  display: ${getDisplay};
-  justify-content: ${(p) => p.justify || "initial"};
-  align-items: ${({ alignItems }) => alignItems ? alignItems : "initial"};
-    // align-self: ${({ compactAxis }) => compactAxis ? "initial" : "stretch"};
-  flex-direction: ${getFlexDirection};
-  flex: ${({ fluid }: Props) => fluid ? 1 : "unset"};
-  ${getSpacing}
-
-  ${responsiveStyles}
-`
-
-// @ts-ignore
-FlexBlock.COMPONENT_NAME = COMPONENT_NAME
-
-FlexBlock.defaultProps = {
-  compactAxis:         false,
-  compact:             false,
-  withRows:            false,
-  responsivePropsList: [],
-}
-
-export const PaddedFlexBlock   = styled(FlexBlock).attrs((props) => ({
-}))`
-  padding: ${SPACINGS.SM};
-`
-// @ts-ignore
-PaddedFlexBlock.COMPONENT_NAME = "PaddedFlexBlock"