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

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

@@ -1,101 +0,0 @@
-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;
-`

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

@@ -1,44 +0,0 @@
-import { SearchableSelector } from "components/forms/selectors/SearchableSelector"
-import { OnItemSelectedFunc } from "components/forms/selectors/types"
-import React                  from "react"
-import { arrayOfSizeN }       from "utils/arrayHelpers"
-
-type Props = {
-  year: number,
-  minYear: number,
-  maxYear: number,
-  onYearSelected: (year: string) => void
-}
-
-const KEY_FIELD = "value"
-
-const yearOptions = (minYear: number, maxYear: number) => (
-  arrayOfSizeN(maxYear - minYear + 1).reduce(
-    ([options, optionsKeyMap], _, i: number) => {
-      const op = { [KEY_FIELD]: `${minYear + i}` }
-      options.push(op)
-      optionsKeyMap[minYear + i] = op
-      return [options, optionsKeyMap]
-    }
-    , [[], {}],
-  )
-)
-
-export const YearPicker = ({
-                             year,
-                             minYear,
-                             maxYear,
-                             onYearSelected,
-                           }: Props) => {
-  const [options, optionsKeyMap] = yearOptions(minYear, maxYear)
-  return <SearchableSelector compact
-                             flat
-                             options={options}
-                             optionsKeyMap={optionsKeyMap}
-                             keyField={"value"}
-                             valueField={"value"}
-                             selectedKey={year}
-                             emptyState={"Type or Select Year"}
-                             onChange={onYearSelected as OnItemSelectedFunc}
-  />
-}

package/src/components/forms/Button.tsx

@@ -1,214 +0,0 @@
-// @ts-ignore
-import { Button as SButton }               from "@zendeskgarden/react-buttons"
-import {
-  buttonLikeHoverable,
-  getInlineStyling,
-}                                          from "components/forms/buttonMixins"
-import { Icon }                            from "components/Icon"
-import { FlexBox }                         from "components/layout/FlexBox"
-import { Dots }                            from "components/loaders/Dots"
-import { StyledProps }                     from "components/StyledProps.type"
-import { useIsMounted }                    from "hooks/useIsMounted"
-import React, {
-  ComponentType,
-  ForwardedRef,
-  forwardRef,
-  MouseEvent,
-  PropsWithChildren,
-  Ref,
-  useCallback,
-  useState
-}                                          from "react"
-import styled, { css }                     from "styled-components"
-import { Alignment }                  from "styles/alignments"
-import { COLORS }                          from "styles/colors"
-import { SPACINGS }                        from "styles/spacings"
-import { Theme }                      from "styles/theme/Theme.type"
-import { ColorProps, ContainerProps } from "styles/types"
-import { FONT_SIZES }                      from "styles/typography"
-import { PromiseFunc }                from "utils/function.types"
-
-const fitContent   = css`
-  width: fit-content;
-  ${({ compact }: Props) => compact
-                            ? "min-width: fit-content; padding: 0 1em;"
-                            : ""}
-`
-const fitContainer = css`width: 100%;`
-const colors       = css<Props & { color: string }>`
-  ${buttonLikeHoverable};
-  border-color: ${({ flat, primary, inline, color }: Props) =>
-          !flat && !primary && !inline
-          ? color
-          : "transparent"};
-
-  ${getInlineStyling}
-  :hover, :active {
-    border-color: transparent;
-  }
-`
-const alignment    = ({ alignSelf }: Props) => (
-  alignSelf ? css`align-self: ${alignSelf};` : ""
-)
-
-const casing = ({ theme }: { theme: Theme }) => {
-  const casing = theme.styles.buttons.textTransform
-  return casing ? css`text-transform: ${casing};` : ""
-}
-
-const baseColor = ({
-                     color,
-                     danger,
-                     neutral,
-                     success,
-                     theme,
-                     warning,
-                   }: Props & StyledProps) => {
-  if (color) return color
-  if (danger) return theme.styles.colorDanger
-  if (neutral) return COLORS.LIGHT_GREY
-  if (success) return theme.styles.colorSuccess
-  if (warning) return theme.styles.colorWarning
-
-  return theme.styles.colorPrimary
-}
-
-export const BUTTON_SIZES = { SMALL: "small", LARGE: "large" } as const
-export type ButtonSize = typeof BUTTON_SIZES[keyof typeof BUTTON_SIZES]
-
-type AutoLoadable = {
-  autoLoadable: true,
-  onClick: PromiseFunc,
-}
-
-type ButtonBaseProps = PropsWithChildren<{
-  alignSelf?: Alignment,
-  disabled?: boolean,
-  groupKey?: string,
-  icon?: string,
-  iconPosition?: "left" | "right",
-  iconSize?: string,
-  innerAs?: string,
-  innerRef?: Ref<HTMLButtonElement>,
-  loading?: boolean,
-  pill?: boolean,
-  primary?: boolean,
-  size?: ButtonSize,
-  onClick: Function,
-}>
-
-type CommonProps = ButtonBaseProps & {
-  autoLoadable?: boolean,
-  flat?: boolean,
-  inline?: boolean,
-} & ColorProps & ContainerProps
-
-type ControlledLoadable = {
-  loading?: boolean,
-  onClick: Function,
-}
-
-export type Props = (CommonProps & ControlledLoadable)
-  | (CommonProps & AutoLoadable)
-
-const ButtonBase = styled(({
-                             children,
-                             disabled,
-                             groupKey,
-                             icon,
-                             iconSize,
-                             innerAs,
-                             innerRef,
-                             iconPosition,
-                             loading,
-                             onClick,
-                             ...props
-                           }: ButtonBaseProps) => {
-  return <SButton as={innerAs}
-                  disabled={disabled}
-                  ref={innerRef}
-                  onClick={onClick}
-                  {...props}>
-    {
-      loading
-      ? <FlexBox alignItems={"center"}
-                 css={`min-height: 30px`}
-                 justifyContent={"center"}>
-        <Dots size={FONT_SIZES.MD} />
-      </FlexBox>
-      : (
-        icon
-        ? <FlexBox alignItems={"center"}
-                   gap={SPACINGS.XS}
-                   justifyContent={"center"}>
-          {iconPosition === "left" &&
-           <Icon color={"currentColor"} svg={icon} size={iconSize} />}
-          {children ? <span>{children}</span> : undefined}
-          {iconPosition === "right" &&
-           <Icon color={"currentColor"} svg={icon} size={iconSize} />}
-        </FlexBox>
-        : <span>{children}</span>
-      )
-    }
-  </SButton>
-}).attrs((props: Props & StyledProps) => ({
-  ...props,
-  color: baseColor(props),
-}))`
-  &&&& {
-    font-size: inherit;
-    font-weight: bold;
-    ${({ fluid }) => !fluid ? fitContent : fitContainer}
-    ${alignment}
-    ${casing}
-    ${({ disabled }) => !disabled ? colors : ""}
-  }
-`
-
-export const Button: ComponentType<Props> = styled(
-  forwardRef<HTMLButtonElement, Props>(
-    (
-      {
-        autoLoadable = false,
-        disabled,
-        loading: loadingProp = false,
-        onClick,
-        ...props
-      }: Props,
-      ref: ForwardedRef<HTMLButtonElement>,
-    ) => {
-      const [isLoading, setIsLoadingTo] = useState(false)
-      const isMounted                   = useIsMounted()
-
-      const computedIsLoading = useCallback(
-        () => {
-          return autoLoadable ? isLoading : loadingProp
-        }, [autoLoadable, isLoading, loadingProp]
-      )
-
-      const processClick = async (e: MouseEvent) => {
-        setIsLoadingTo(true)
-        try { await onClick(e) } catch {}
-        if (isMounted()) setIsLoadingTo(false)
-      }
-      return <ButtonBase {...props}
-                         disabled={disabled || computedIsLoading()}
-                         innerRef={ref}
-                         loading={computedIsLoading()}
-                         onClick={autoLoadable
-                                  ? processClick
-                                  : onClick} />
-    }
-  )
-)``
-
-// @ts-ignore
-Button.COMPONENT_NAME = "Button"
-// @ts-ignore
-Button.defaultProps   = {
-  fluid:        false,
-  flat:         false,
-  iconPosition: "right",
-  primary:      true,
-  disabled:     false,
-}

package/src/components/forms/Checkbox.tsx

@@ -1,99 +0,0 @@
-import {
-  Checkbox as ZCheckbox,
-  Field,
-  Hint,
-  Label,
-  Message,
-  /* @ts-ignore */
-}                                                  from "@zendeskgarden/react-forms"
-import { FormFieldProps }                     from "components/forms/formField.types"
-import { VALIDATION_STATES }                       from "components/forms/validationStates"
-import { FlexBox }                                 from "components/layout/FlexBox"
-import { StyledProps }                        from "components/StyledProps.type"
-import React, { ChangeEvent, useEffect, useState } from "react"
-import styled                                      from "styled-components"
-import { dark, fade }                              from "styles/colors"
-import { ContainerProps }                     from "styles/types"
-import { FONT_SIZES }                              from "styles/typography"
-
-type Props = FormFieldProps & {
-  checked?: boolean,
-  indeterminate?: boolean,
-  onChange: (checked: boolean) => void
-}
-
-export let Checkbox = ({
-                         checked: checkedProp = false,
-                         compact,
-                         emptyState,
-                         fluid,
-                         hint,
-                         indeterminate,
-                         label,
-                         message,
-                         validation = { validation: VALIDATION_STATES.NONE },
-                         onChange,
-                         ...props
-                       }: Props) => {
-  const [checked, setCheckedTo] = useState(checkedProp)
-
-  const handleCheck = (e: ChangeEvent<HTMLInputElement>) => {
-    const checked = e.target.checked
-    setCheckedTo(checked)
-    onChange(checked)
-  }
-
-  useEffect(() => { setCheckedTo(checkedProp) }, [checkedProp])
-
-  return <Container fluid={fluid} gap={null} withRows>
-    <Field>
-      <ZCheckbox
-        checked={checked}
-        validation={validation?.validation}
-        {...props}
-        onChange={handleCheck}
-      >
-        <Label hidden={!label}
-               indeterminate={indeterminate}>
-          {label ?? ""}
-        </Label>
-        {
-          hint
-          ? <Hint css={`&&& { font-size: ${FONT_SIZES.XS}; }`}>{hint}</Hint>
-          : null
-        }
-        {
-          message
-          ?
-          <Message css={`&&& { font-size: ${FONT_SIZES.XS};}`}
-                   validation={validation?.validation}>
-            {message}
-          </Message>
-          : null
-        }
-      </ZCheckbox>
-    </Field>
-  </Container>
-}
-
-Checkbox = styled(Checkbox)`
-  &&&& {
-    font-size: inherit;
-
-    :hover {
-      border-color: ${({ theme }: StyledProps) => theme.styles.colorPrimary};
-    }
-
-    :focus {
-      border-color: ${({ theme }: StyledProps) => dark(theme.styles.colorPrimary)};
-      box-shadow: ${({ theme }: StyledProps) => `0 0 0 3px ${fade(theme.styles.colorPrimary)}`};
-    }
-  }
-`
-
-const Container = styled(FlexBox)`
-  ${({ fluid }: ContainerProps) => fluid ? "width: 100%;" : ""}
-  && * {
-    font-size: inherit;
-  }
-`

package/src/components/forms/CycleButton.stories.tsx

@@ -1,23 +0,0 @@
-import React, { useState } from "react"
-import { CycleButton }     from "components/forms/CycleButton"
-
-export default {
-    title:     "react_components_zendesk/forms/CycleButton",
-    component: CycleButton,
-    argTypes:  {},
-}
-
-const OPTIONS = ["AYE", "BE", "SEE"]
-
-const Story = () => {
-    const [option, setOption] = useState(OPTIONS[0])
-
-    return <CycleButton options={OPTIONS.map((o) => ({ label: o, value: o }))}
-                        selectedOption={option}
-                        onCycleChanged={setOption}
-    />
-}
-
-export const Default = Story.bind({})
-// @ts-ignore
-Default.args         = {}

package/src/components/forms/CycleButton.tsx

@@ -1,52 +0,0 @@
-import React, { Fragment }              from "react"
-import { Button, Props as ButtonProps } from "components/forms/Button"
-import styled                           from "styled-components"
-import { isLastItem, isNotLastItem }    from "utils/arrayHelpers"
-import { FlexBox }                      from "components/layout/FlexBox"
-import { COLORS }                       from "styles/colors"
-import { FONT_SIZES }                   from "styles/typography"
-
-type Option = { label: string, value: string }
-
-type Props = Omit<ButtonProps, "onClick"> & {
-  options: Array<Option>,
-  selectedOption: string,
-  onCycleChanged: (value: string) => void,
-}
-
-export const CycleButton = ({
-                              options,
-                              selectedOption,
-                              onCycleChanged,
-                              ...buttonProps
-                            }: Props) => (
-  <Button primary={false}
-          {...buttonProps}
-          onClick={() => {
-            const next = cycle<string>(
-              options.map((o: Option): string => o.value),
-              selectedOption,
-            )
-            onCycleChanged(next)
-          }}>
-    <FlexBox alignItems={"center"} gap={"5px"}>
-      {options.map((o: Option) => (
-        <Fragment key={o.label}>
-          <Label selected={selectedOption === o.value}>{o.label}</Label>
-          {isNotLastItem(options, o) ? <Label>/</Label> : null}
-        </Fragment>
-      ))}
-    </FlexBox>
-  </Button>
-)
-
-const Label = styled.span<{ selected?: boolean }>`
-  color: ${p => p.selected ? "inherit" : COLORS.LIGHT_GREY};
-  font-size: ${p => p.selected ? "inherit" : FONT_SIZES.XS};;
-`
-
-const cycle = <T, >(cycleables: T[], current: T): T => (
-  isLastItem(cycleables, current)
-  ? cycleables[0]
-  : cycleables[cycleables.indexOf(current) + 1]
-)

package/src/components/forms/Form.tsx

@@ -1,43 +0,0 @@
-import { FlexBox }                                                  from "components/layout/FlexBox"
-import React, { FC, FormEvent, forwardRef, PropsWithChildren, Ref } from "react"
-import styled                                                       from "styled-components"
-import { SPACINGS }                              from "styles/spacings"
-import { ContainerProps }                   from "styles/types"
-import { PromiseFunc }                      from "utils/function.types"
-
-type Props = PropsWithChildren<{
-  onSubmit: PromiseFunc,
-}> & ContainerProps
-
-export let Form: FC<Props> = forwardRef<HTMLFormElement, Props>((
-  { onSubmit, className, children, ...props },
-  ref: Ref<HTMLFormElement>,
-) => {
-  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
-    onSubmit()
-  }
-
-  return <FlexBox withRows
-                  as={"form"}
-                  onSubmit={handleSubmit}
-                  gap={SPACINGS.SM}
-                  className={className}
-                  ref={ref}
-                  {...props}>
-    <HiddenSubmit />
-    {children}
-  </FlexBox>
-})
-
-const HiddenSubmit = styled.input.attrs({
-  type:     "submit",
-  tabIndex: -1,
-})`
-  position: absolute;
-  left: -9999px;
-  width: 1px;
-  height: 1px;
-`
-
-Form = styled(Form)``

package/src/components/forms/Hint.tsx

@@ -1,12 +0,0 @@
-// @ts-ignore
-import { Hint as ZHint }            from "@zendeskgarden/react-forms"
-import styled                       from "styled-components"
-import { FONT_SIZES, FONT_WEIGHTS } from "styles/typography"
-
-export const Hint = styled(ZHint)`
-  && {
-    font-size: ${FONT_SIZES.XS};
-    font-weight: ${FONT_WEIGHTS.MEDIUM};
-    color: ${({ theme }) => theme.styles.textColorSecondary};
-  }
-`

package/src/components/forms/IconButton.tsx

@@ -1,29 +0,0 @@
-import { Button, Props as ButtonProps } from "components/forms/Button"
-import React                            from "react"
-import styled                           from "styled-components"
-
-const COMPONENT_NAME = "IconButton"
-
-type Props = Omit<ButtonProps, "children">
-
-export const IconButton = styled(({
-                                    primary,
-                                    flat,
-                                    pill,
-                                    ...props
-                                  }: Props): JSX.Element => {
-  return <Button flat={flat != null ? flat : true}
-                 fluid={false}
-                 {...props}
-                 pill={pill != null ? pill : true}
-                 primary={primary ?? false}
-  />
-})<Props>`
-  && {
-    padding: .5em;
-    min-width: 0;
-  }
-`
-
-// @ts-ignore
-IconButton.COMPONENT_NAME = COMPONENT_NAME

package/src/components/forms/Label.tsx

@@ -1,9 +0,0 @@
-// @ts-ignore
-import { Label as ZLabel } from "@zendeskgarden/react-forms"
-import styled              from "styled-components"
-
-export const Label = styled(ZLabel)`
-  && {
-    font-size: inherit;
-  }
-`

package/src/components/forms/TaggedToggle.stories.tsx

@@ -1,18 +0,0 @@
-import React, { useState } from "react"
-import { TaggedToggle }    from "components/forms/TaggedToggle"
-
-export default {
-  title:     "react_components_zendesk/forms/TaggedToggle",
-  component: TaggedToggle,
-  argTypes:  {},
-}
-
-
-const Story = () => {
-  const [active, setState] = useState(false)
-  return <TaggedToggle active={active} onChange={setState} />
-}
-
-export const Default = Story.bind({})
-// @ts-ignore
-Default.args         = {}

package/src/components/forms/TaggedToggle.tsx

@@ -1,19 +0,0 @@
-import { Toggle }  from "components/forms/Toggle"
-import { FlexBox } from "components/layout/FlexBox"
-import { Chip }    from "components/tags/Chip"
-import React       from "react"
-
-type Props = {
-  active: boolean,
-  onChange: (checked: boolean) => void,
-}
-
-export const TaggedToggle = ({ active, onChange }: Props) => {
-  return <FlexBox alignItems={"baseline"}>
-    <Chip success={active}>
-      {active ? "Enabled" : "Disabled"}
-    </Chip>
-    <Toggle checked={active}
-            onChange={onChange} />
-  </FlexBox>
-}