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

package/src/components/tables/Row.tsx

@@ -1,84 +0,0 @@
-import { Checkbox }                          from "components/forms/Checkbox"
-import { OverflowMenu }                      from "components/layout/OverflowMenu"
-import { Cell, Row as MyRow }                from "components/tables/index"
-import { ColumnConfig, Item, ItemKey, } from "components/tables/Table"
-import { columnWidth }                       from "components/tables/utils"
-import { Text }                              from "components/text/Text"
-import React                                 from "react"
-import styled                                from "styled-components"
-import { FONT_WEIGHTS }                      from "styles/typography"
-
-type Props = {
-  checkable?: boolean,
-  checkDisabled?: boolean,
-  checked?: boolean,
-  columnConfigs: Array<ColumnConfig>,
-  item: Item,
-  onCheck?: (row: ItemKey, isChecked: boolean) => void,
-  onClick?: (row: ItemKey) => void,
-  onHoverEnd?: (row: ItemKey) => void,
-  onHoverStart?: (row: ItemKey) => void,
-}
-
-export const Row = ({
-                      checkable = false,
-                      checkDisabled = false,
-                      checked = false,
-                      columnConfigs,
-                      item,
-                      onCheck,
-                      onClick,
-                      onHoverEnd,
-                      onHoverStart,
-                    }: Props) => {
-  const colWidth          = columnWidth(columnConfigs.length)
-  const handleCheckChange = (checked: boolean) => {
-    onCheck?.(item.key, checked)
-  }
-
-  const { key, containerStyles, actions }: Item = item
-
-  return (
-    <MyRow css={containerStyles || {}}
-           onClick={() => onClick?.(key)}
-           onMouseEnter={() => onHoverStart?.(key)}
-           onMouseLeave={() => onHoverEnd?.(key)}
-    >
-      {checkable ? (
-        <Cell minimum>
-          <Checkbox checked={!checkDisabled && checked}
-                    disabled={checkDisabled}
-                    onChange={handleCheckChange} />
-        </Cell>
-      ) : null}
-      {columnConfigs.map((c: ColumnConfig) => {
-        const { css, name, important, width, } = c
-
-        const weight = important
-                       ? FONT_WEIGHTS.MEDIUM
-                       : FONT_WEIGHTS.REGULAR
-
-        return (
-          <Cell key={`${key}-${name}`}
-                css={css}
-                width={css ? null : width || colWidth}>
-            <Text css={`font-weight: ${weight}; width: 100%;`}>
-              {item[name]}
-            </Text>
-          </Cell>
-        )
-      })}
-      {actions ? <OverflowMenuCell menu>
-        <OverflowMenu actions={actions} placement={"bottom-end"} />
-      </OverflowMenuCell> : null}
-    </MyRow>
-  )
-}
-
-const OverflowMenuCell = styled(Cell)`
-  && {
-    padding: 1rem 0;
-  }
-`
-
-Row.COMPONENT_NAME = "Row"

package/src/components/tables/SimpleTable.tsx

@@ -1,99 +0,0 @@
-// @ts-ignore
-import { Checkbox, Label } from "@zendeskgarden/react-forms"
-import {
-  Body,
-  Head,
-  HeaderCell,
-  HeaderRow,
-  Table as ZTable,
-  /*@ts-ignore*/
-}                          from "@zendeskgarden/react-tables"
-import { FlexBlock }       from "components/layout/FlexBlock"
-import { FlexBox }         from "components/layout/FlexBox"
-import { HelpText }        from "components/tables/blocks/HelpText"
-import { Title }           from "components/tables/blocks/Title"
-import { Row }             from "components/tables/Row"
-import {
-  ColumnConfig,
-  Item
-}                          from "components/tables/Table"
-import { TableProps }      from "components/tables/Table"
-import { columnWidth }     from "components/tables/utils"
-import { Text }            from "components/text/Text"
-import * as React          from "react"
-import { FONT_WEIGHTS }    from "styles/typography"
-
-type Props = TableProps & {
-  hasRowActions: boolean,
-  onSelectAllToggle?: (b: boolean) => void,
-}
-
-export const SimpleTable = ({
-                              title,
-                              actions,
-                              columnConfigs,
-                              helpText,
-                              items,
-                              onItemClick,
-                              checkable,
-                              checkedItems,
-                              onItemChecked,
-                              onSelectAllToggle,
-                            }: Props) => {
-
-  const colWidth = columnWidth(columnConfigs.length)
-
-  const allSelected = checkedItems?.size === items.length
-
-  return (
-    <FlexBlock>
-      <ZTable>
-        <FlexBox css={`margin-bottom: 1rem`}
-                 justifyContent={"space-between"} withRows>
-          {title ? <Title>{title}</Title> : null}
-          {helpText ? <HelpText>{helpText}</HelpText> : null}
-          <FlexBox css={`flex: 1`} justifyContent={"flex-end"}>
-            {/*@ts-ignore*/}
-            {actions?.({ checkedItems })?.map((a) => a)}
-          </FlexBox>
-        </FlexBox>
-
-        <Head>
-          <HeaderRow>
-            {checkable ? (
-              <HeaderCell minimum>
-                <Checkbox checked={allSelected}
-                          onChange={onSelectAllToggle}>
-                  <Label hidden
-                         indeterminate={checkedItems!.size > 0 && !allSelected}>
-                    Select all Jobs
-                  </Label>
-                </Checkbox>
-              </HeaderCell>
-            ) : null}
-
-            {columnConfigs.map(({ name }: ColumnConfig) => (
-              <HeaderCell key={name} width={colWidth}>
-                <Text weight={FONT_WEIGHTS.BOLD}>
-                  {name}
-                </Text>
-              </HeaderCell>
-            ))}
-          </HeaderRow>
-        </Head>
-
-        <Body>
-          {items.map((item: Item) => (
-            <Row item={item}
-                 key={item.key}
-                 columnConfigs={columnConfigs}
-                 onClick={onItemClick}
-                 checkable={checkable}
-                 checked={checkedItems?.has(item.key)}
-                 onCheck={onItemChecked} />
-          ))}
-        </Body>
-      </ZTable>
-    </FlexBlock>
-  )
-}

package/src/components/tables/Table.tsx

@@ -1,153 +0,0 @@
-import { FlexBox }                                            from "components/layout/FlexBox"
-import { Pagination }                                         from "components/tables/blocks/Pagination"
-import { MobileTable }                                        from "components/tables/MobileTable"
-import { NiceTable }                                          from "components/tables/NiceTable"
-import { SimpleTable }                                        from "components/tables/SimpleTable"
-import React, { ReactNode, useCallback, useEffect, useState } from "react"
-import styled, { CSSProp }                                    from "styled-components"
-import {
-  DeviceSize,
-  DeviceSizeChangeListener,
-}                                                             from "styles/DeviceSizeWatcher"
-import { deviceSizeWatcher }                                  from "styles/DeviceSizeWatcher"
-import { isNotEmpty }                                         from "utils/arrayHelpers"
-
-export type ItemKey = number | string
-export type ItemContainerStyles = string
-export type ItemAction = {
-  action: () => void,
-  label: string,
-}
-
-export type ItemFilterOptions = { name: string } &
-  ({
-    options: { label: string, value: string }[],
-    type: "select",
-  } | { options: undefined, type: "text" })
-
-export type Item = { [key: string]: ReactNode } & {
-  actions?: Array<ItemAction>,
-  checkDisabled?: boolean,
-  clickDisabled?: boolean,
-  containerStyles?: ItemContainerStyles,
-  key: ItemKey,
-}
-
-export type ColumnConfig = {
-  collapsible: boolean,
-  css?: CSSProp,
-  filter?: ItemFilterOptions,
-  important: boolean,
-  name: string,
-  width?: string,
-}
-
-export type PaginationData = {
-  page: number,
-  pageSize: number,
-  totalCount: number,
-}
-
-type ActionsCreatorParams = {
-  checkedItems: Set<ItemKey>
-}
-
-export type TableProps = {
-  actions?: (p: ActionsCreatorParams) => ReactNode[],
-  checkable?: boolean,
-  checkedItems?: Set<ItemKey>,
-  columnConfigs: Array<ColumnConfig>,
-  emptyState?: ReactNode,
-  helpText?: ReactNode,
-  initialFilterValues?: { [key: string]: string },
-  items: Array<Item>,
-  title?: string,
-  onFilterChange?: (name: string, value: any) => void,
-  onItemChecked?: (key: ItemKey, isChecked: boolean) => void,
-  onItemsChecked?: (rows: Set<ItemKey>) => void,
-  onItemClick?: (key: ItemKey) => void,
-  onItemHoverEnd?: (key: ItemKey) => void,
-  onItemHoverStart?: (key: ItemKey) => void,
-}
-
-type Props = TableProps & {
-  className?: string,
-  nice?: boolean,
-  pagination?: PaginationData,
-  onPageChange?: (p: number) => void,
-}
-
-const {
-        getSize,
-        isLargeComputer,
-        isSmallComputer,
-        subscribe,
-        unsubscribe,
-      } = deviceSizeWatcher
-
-export let Table = ({
-// @ts-ignore
-                      action,
-                      actions,
-                      className,
-                      nice = true,
-                      pagination,
-                      onItemsChecked,
-                      onPageChange,
-                      ...props
-                    }: Props) => {
-
-  const [, setDeviseSize] = useState<DeviceSize>(getSize())
-
-  const handleDeviseSizeChange = useCallback<DeviceSizeChangeListener>(
-    (s: DeviceSize) => { setDeviseSize(s) },
-    [],
-  )
-
-  const setAllRowsSelectedTo = (isChecked: boolean) => {
-    const rows = isChecked ? props.items.map((i) => i.key) : []
-    onItemsChecked?.(new Set([...rows]))
-  }
-
-  useEffect(() => {
-    const subId = subscribe(handleDeviseSizeChange)
-    return () => { unsubscribe(subId) }
-  }, [handleDeviseSizeChange])
-
-  const hasRowActions = props.items.some(
-    (i: Item) => i.actions && isNotEmpty(i.actions),
-  )
-
-  if (action && !actions) { actions = () => [action] }
-
-  const largeTable = () => nice
-                           ? <NiceTable actions={actions}
-                                        hasRowActions={hasRowActions}
-                                        onSelectAllToggle={setAllRowsSelectedTo}
-                                        {...props}
-                           />
-                           : <SimpleTable actions={actions}
-                                          hasRowActions={hasRowActions}
-                                          onSelectAllToggle={setAllRowsSelectedTo}
-                                          {...props}
-                           />
-  return (
-    <FlexBox withRows className={className}>
-      {
-        isSmallComputer() || isLargeComputer()
-        ? largeTable()
-        : <MobileTable actions={actions}
-                       hasRowActions={hasRowActions}
-                       onSelectAllToggle={setAllRowsSelectedTo}
-                       {...props} />
-      }
-      {
-        pagination
-        ? <Pagination {...pagination} onPageChange={onPageChange!!} />
-        : null
-      }
-    </FlexBox>
-  )
-}
-
-Table = styled(Table)``

package/src/components/tables/blocks/Header.tsx

@@ -1,119 +0,0 @@
-import { mdiFilterVariant } from "@mdi/js"
-import { Checkbox }         from "components/forms/Checkbox"
-import { IconButton }       from "components/forms/IconButton"
-import { FlexBlock }        from "components/layout/FlexBlock"
-import { StyledProps }      from "components/StyledProps.type"
-import { TableFilter }      from "components/tables/blocks/TableFilter"
-import {
-  Head as TableHead,
-  HeaderCell,
-  HeaderRow,
-}                           from "components/tables/index"
-import {
-  ColumnConfig,
-  Item,
-  ItemKey
-}                           from "components/tables/Table"
-import { columnWidth }      from "components/tables/utils"
-import { Text }             from "components/text/Text"
-import React, { useState }  from "react"
-import { SPACINGS }         from "styles/spacings"
-import { FONT_WEIGHTS }     from "styles/typography"
-import { DO_NOTHING }       from "utils/functionHelpers"
-
-type Props = {
-  checkable?: boolean,
-  checkedItems?: Set<ItemKey>,
-  columnConfigs: Array<ColumnConfig>,
-  hasRowActions?: boolean,
-  initialFilterValues?: { [key: string]: string },
-  items: Array<Item>,
-  onFilterChange?: (name: string, value: any) => void,
-  onSelectAllToggle?: (selected: boolean) => void,
-}
-
-export const Header = ({
-                         checkable,
-                         checkedItems,
-                         columnConfigs,
-                         hasRowActions,
-                         initialFilterValues = {},
-                         items,
-                         onFilterChange,
-                         onSelectAllToggle,
-                       }: Props) => {
-  const [enabledFilters, setVisibleFiltersTo] = useState(
-    Object.keys(initialFilterValues),
-  )
-
-  const colWidth    = columnWidth(columnConfigs.length)
-  const allSelected = checkedItems?.size === items.length
-  const someSelected = !!checkedItems?.size && !allSelected
-
-  const handleSelectAll = (checked: boolean) => {
-    if (!!onSelectAllToggle) onSelectAllToggle(checked)
-  }
-
-  const toggleFilter = (name: string) => () => {
-    setVisibleFiltersTo((state: string[]) => {
-      return state.includes(name)
-             ? state.filter((s: string) => s !== name)
-             : [...state, name]
-    })
-  }
-
-  return <TableHead>
-    <HeaderRow>
-      {checkable ? (
-        <HeaderCell minimum>
-          <Checkbox checked={allSelected}
-                    indeterminate={someSelected}
-                    onChange={handleSelectAll} />
-        </HeaderCell>
-      ) : null}
-
-      {columnConfigs.map(
-        ({ css, important, name, width, filter }: ColumnConfig) => {
-          const color    = (p: StyledProps) => important
-                                               ? p.theme.styles.colorPrimary
-                                               : "unset"
-          const weight   = important ? FONT_WEIGHTS.BOLD : FONT_WEIGHTS.BOLD
-          const textNode = (
-            <Text css={`color: ${color}; font-weight: ${weight};`}>{name}</Text>
-          )
-          return (
-            <HeaderCell key={name}
-                        css={css}
-                        width={css ? null : width || colWidth}>
-              {
-                filter
-                ? <FlexBlock css={`flex: 1;`}
-                             spacing={SPACINGS.XS}
-                             withRows>
-                  <FlexBlock spacing={SPACINGS.XS}>
-                    {textNode}
-                    <IconButton
-                      icon={mdiFilterVariant}
-                      iconSize={"1.2rem"}
-                      inline
-                      onClick={toggleFilter(filter.name)} />
-                  </FlexBlock>
-                  {
-                    enabledFilters.includes(filter.name)
-                    ? <TableFilter {...filter}
-                                   initialValue={initialFilterValues[filter.name]}
-                                   onChange={onFilterChange ?? DO_NOTHING} />
-                    : null
-                  }
-                </FlexBlock>
-                : textNode
-              }
-            </HeaderCell>
-          )
-        },
-      )}
-
-      {hasRowActions ? <HeaderCell menu /> : null}
-    </HeaderRow>
-  </TableHead>
-}

package/src/components/tables/blocks/HelpText.tsx

@@ -1,9 +0,0 @@
-// @flow
-
-import { Text }       from "components/text/Text"
-import styled         from "styled-components"
-import { FONT_SIZES } from "styles/typography"
-
-export const HelpText = styled(Text)`
-  font-size: ${FONT_SIZES.XS};
-`

package/src/components/tables/blocks/Pagination.tsx

@@ -1,85 +0,0 @@
-import { Button, BUTTON_SIZES } from "components/forms/Button"
-import { Carousel }             from "components/layout/Carousel"
-import { FlexBox }              from "components/layout/FlexBox"
-import { PaginationData }  from "components/tables/Table"
-import React                    from "react"
-import { arrayOfSizeN }         from "utils/arrayHelpers"
-import { DO_NOTHING }           from "utils/functionHelpers"
-
-type Props = PaginationData & {
-  onPageChange: (n: number) => void
-}
-
-export const Pagination = ({
-                             page,
-                             pageSize,
-                             totalCount,
-                             onPageChange,
-                           }: Props) => {
-  if (!totalCount || !pageSize || totalCount <= pageSize) return null
-
-  const numberPages = Math.ceil(totalCount / pageSize)
-
-  const getItems = () => {
-    const maxNumberCarouselItems = 7
-
-    if (numberPages <= maxNumberCarouselItems) {
-      return arrayOfSizeN(numberPages).map((_, i) => i + 1)
-    }
-
-    const equilibriumNumberOfPads = Math.floor(maxNumberCarouselItems / 2)
-
-    const leftPadding  = Math.min(
-      page - 1,
-      equilibriumNumberOfPads,
-    )
-    const rightPadding = Math.min(
-      numberPages - page,
-      equilibriumNumberOfPads,
-    )
-
-    const missingFromRight = equilibriumNumberOfPads - rightPadding
-    const missingFromLeft  = equilibriumNumberOfPads - leftPadding
-
-    return [
-      ...arrayOfSizeN(leftPadding + missingFromRight)
-        .map((_, i) => page - (i + 1)),
-      page,
-      ...arrayOfSizeN(rightPadding + missingFromLeft)
-        .map((_, i) => page + (i + 1)),
-    ].sort((a, b) => a - b)
-  }
-
-  const movePage = (direction: number) => () => {
-    const newPage = page + direction
-    if (1 > newPage || newPage > numberPages) return
-
-    return onPageChange(newPage)
-  }
-
-  return <Carousel css={`align-self: center;`}
-                   disableNextButton={page === numberPages}
-                   disablePreviousButton={page === 1}
-                   inline
-                   onNextClick={movePage(+1)}
-                   onPreviousClick={movePage(-1)}>
-    <FlexBox gap={"unset"}>
-      {
-        getItems().map((num: number) => (
-          <Button
-            compact
-            flat={num !== page}
-            key={num}
-            pill
-            size={BUTTON_SIZES.SMALL}
-            onClick={num === page
-                     ? DO_NOTHING
-                     : movePage(num - page)}
-          >
-            {num}
-          </Button>
-        ))
-      }
-    </FlexBox>
-  </Carousel>
-}

package/src/components/tables/blocks/TableFilter.tsx

@@ -1,56 +0,0 @@
-import { mdiCheck }                     from "@mdi/js"
-import { Button, BUTTON_SIZES }         from "components/forms/Button"
-import { Selector }                     from "components/forms/selectors/Selector"
-import { TextField }                    from "components/forms/textfields/TextField"
-import { FlexBox }                      from "components/layout/FlexBox"
-import { ItemFilterOptions }       from "components/tables/Table"
-import React, { ChangeEvent, useState } from "react"
-import { FONT_WEIGHTS }                 from "styles/typography"
-import { Logger }                       from "utils/logging/Logger"
-
-const logger = new Logger("TableFilter")
-
-type Props = ItemFilterOptions & {
-  initialValue?: string,
-  onChange: (name: string, value: any) => void,
-}
-
-export const TableFilter = ({
-                              initialValue,
-                              name,
-                              options,
-                              type,
-                              onChange,
-                            }: Props) => {
-  const [value, setValue] = useState<string>(initialValue ?? "")
-
-  const onTextChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setValue(e.target.value)
-  }
-
-  logger.writeInfo("render", name, value)
-
-  const filter = type === "select"
-                 ? <Selector clearable
-                             css={`font-weight: ${FONT_WEIGHTS.REGULAR};`}
-                             keyField={"value"}
-                             options={options!!}
-                             selectedKey={value}
-                             small
-                             valueField={"label"}
-                             // @ts-ignore
-                             onChange={setValue} />
-                 : <TextField small
-                              value={value}
-                              onChange={onTextChange} />
-
-  return <FlexBox withRows>
-    {filter}
-    <Button compact
-            css={`align-self: flex-end;`}
-            icon={mdiCheck}
-            iconSize={"1rem"}
-            size={BUTTON_SIZES.SMALL}
-            onClick={() => onChange(name, value)} />
-  </FlexBox>
-}

package/src/components/tables/blocks/Title.tsx

@@ -1,6 +0,0 @@
-import { H5 } from "components/text/Header"
-import styled from "styled-components"
-
-export const Title = styled(H5)`
-  margin: 0;
-`