@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/StepperProgress/Step.js

@@ -0,0 +1,84 @@
+// @flow
+import React, { useContext, useLayoutEffect, useState } from 'react'
+
+import Box from '../Box'
+import { spacingValue } from '../system'
+import StackView from '../StackView'
+
+import StepperProgressContext from './Context'
+
+const CIRCLE_SIZE = 1.5
+const BASE_COLOR = 'separatorSecondary'
+
+function Line() {
+  const { active, activeColor } = useContext(StepperProgressContext)
+  return (
+    <Box
+      position="absolute"
+      width="100%"
+      height="3px"
+      x={`calc(-100% + ${spacingValue(CIRCLE_SIZE / 2)})`}
+      y="4.5px"
+      backgroundColor={BASE_COLOR}
+      zIndex={0}
+    >
+      <Box
+        width="100%"
+        height="100%"
+        backgroundColor={activeColor}
+        transformOrigin="left center"
+        transition="transform 280ms ease-out"
+        style={{ transform: `scaleX(${active ? 1 : 0}` }}
+      />
+    </Box>
+  )
+}
+
+function Indicator(props) {
+  const context = useContext(StepperProgressContext)
+  const active = props.active === undefined ? context.active : props.active
+  const activeColor =
+    props.activeColor === undefined ? context.activeColor : props.activeColor
+  const [delay, setDelay] = useState('0ms')
+  useLayoutEffect(() => {
+    setDelay(active === true ? '0ms' : '280ms')
+  }, [active])
+  return (
+    <Box>
+      {context.includeLine && <Line />}
+      <Box
+        width={CIRCLE_SIZE}
+        height={CIRCLE_SIZE}
+        radius="circle"
+        backgroundColor={active ? activeColor : BASE_COLOR}
+        position="relative"
+        zIndex={1}
+        transition={`background-color 280ms ease-out`}
+        transitionDelay={delay}
+      />
+    </Box>
+  )
+}
+
+export type Props = {
+  /** Determines the active state of this individual step. */
+  active?: boolean,
+  /** Determines the active color of this individual step. */
+  activeColor?: string,
+  /** Render content above the step indicator. */
+  renderStart?: any,
+  /** Render content below the step indicator. */
+  renderEnd?: any,
+}
+
+function Step({ active, activeColor, renderStart, renderEnd }: Props) {
+  return (
+    <StackView alignment="center" position="relative">
+      {renderStart}
+      <Indicator active={active} activeColor={activeColor} />
+      {renderEnd}
+    </StackView>
+  )
+}
+
+export default Step

package/src/StepperProgress/StepperProgress.js

@@ -0,0 +1,46 @@
+// @flow
+import React, { Children } from 'react'
+
+import GridView from '../GridView'
+
+import StepperProgressContext from './Context'
+
+const ACTIVE_COLOR = 'primary-light'
+
+export type Props = {
+  /** Highlighted steps from the first step to this step index. */
+  activeStepIndex?: number,
+  /** Active color for each step indicator and line. Defaults to `primary-light`. */
+  activeColor?: string,
+}
+
+function StepperProgress({
+  activeStepIndex,
+  activeColor = ACTIVE_COLOR,
+  children,
+  ...restProps
+}: Props) {
+  return (
+    <GridView
+      autoFlow="column"
+      autoColumns="1fr"
+      alignment="center"
+      {...restProps}
+    >
+      {Children.map(children, (child, stepIndex) => (
+        <StepperProgressContext.Provider
+          key={stepIndex}
+          value={{
+            activeColor,
+            active: stepIndex <= activeStepIndex,
+            includeLine: stepIndex > 0,
+          }}
+        >
+          {child}
+        </StepperProgressContext.Provider>
+      ))}
+    </GridView>
+  )
+}
+
+export default StepperProgress

package/src/StepperProgress/StepperProgress.mdx

@@ -0,0 +1,59 @@
+---
+title: StepperProgress
+category: Indicators
+summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
+---
+
+```jsx live
+render(() => {
+  const [activeStepIndex, setActiveStepIndex] = React.useState(2)
+  return (
+    <StepperProgress width="50%" activeStepIndex={activeStepIndex}>
+      {generateRange(4).map((step) => (
+        <StepperProgress.Step
+          key={step}
+          renderEnd={
+            <StackView padding={2}>
+              <Button
+                size="sm"
+                title={step + 1}
+                onClick={() => setActiveStepIndex(step)}
+              />
+            </StackView>
+          }
+        />
+      ))}
+    </StepperProgress>
+  )
+})
+```
+
+```jsx live
+function Step({ active, activeColor, label, date, time = '--' }) {
+  return (
+    <StepperProgress.Step
+      active={active}
+      activeColor={activeColor}
+      renderStart={<Text padding={2}>{label}</Text>}
+      renderEnd={
+        <StackView alignment="center" height={8} padding={2} spacing={1}>
+          <Text size={5}>{date}</Text>
+          <Text size={5} color="foregroundSecondary">
+            {time}
+          </Text>
+        </StackView>
+      }
+    />
+  )
+}
+render(
+  <StackView width="100%" alignment="center">
+    <StepperProgress autoColumns="minmax(80px, 120px)" activeStepIndex={1}>
+      <Step label="Prepared" date="04/20" time="1:23pm" />
+      <Step label="Sent" date="04/21" time="8:00am" />
+      <Step label="Read" />
+      <Step label="Declined" active activeColor="error" />
+    </StepperProgress>
+  </StackView>
+)
+```

package/src/StepperProgress/index.js

@@ -0,0 +1,4 @@
+import StepperProgress from './StepperProgress'
+import Step from './Step'
+StepperProgress.Step = Step
+export default StepperProgress

package/src/Summary/Summary.js

@@ -0,0 +1,42 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import Heading from '../Heading'
+import StackView from '../StackView'
+
+export type SummaryProps = {
+  /**
+   * Provide a centered image at the top of the content block.
+   */
+  image?: mixed,
+
+  /**
+   * Provide a centered title above the content and below the optional image.
+   */
+  title?: string,
+
+  /**
+   * Brief description. Can include any markup like links and emphasised text.
+   */
+  children?: mixed,
+}
+
+/**
+ * Use for brief content that could have an accompanying image or title.
+ */
+function Summary({ children, image, title, ...restProps }: SummaryProps) {
+  return (
+    <StackView alignment="center" padding={2} spacing={2} {...restProps}>
+      {image && <Box>{image}</Box>}
+      {title && <Heading level={3}>{title}</Heading>}
+      {children && (
+        <Box maxWidth={40} textAlign="center">
+          {children}
+        </Box>
+      )}
+    </StackView>
+  )
+}
+
+export default Summary

package/src/Summary/Summary.mdx

@@ -0,0 +1,25 @@
+---
+title: Summary
+category: General
+---
+
+```jsx live
+render(
+  <Summary title="Tag Teams">
+    Our position on Positions is you should take your pointer and position it on
+    the Add tag button above to link some Tags.
+  </Summary>
+)
+```
+
+```jsx live
+render(
+  <Summary
+    image={<Avatar source="https://api.adorable.io/avatars/a" size="lg" />}
+    title="Team Leaders"
+  >
+    Our position on Positions is you should take your pointer and position it on
+    the Add tag button above to link some Tags.
+  </Summary>
+)
+```

package/src/Summary/index.js

@@ -0,0 +1,2 @@
+import Summary from './Summary'
+export default Summary

package/src/Tab/Tab.mdx

@@ -0,0 +1,21 @@
+---
+title: Tab
+category: General
+---
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    paddingHorizontal={1}
+    paddingTop={1}
+    spacing={1}
+    backgroundColor="primary-light"
+  >
+    <Tab active>Tab 1</Tab>
+    <Tab>Tab 2</Tab>
+    <Tab disabled>Tab 3</Tab>
+    <Tab>Tab 4</Tab>
+  </StackView>
+)
+```

package/src/Tab/Tab.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+import { ColorProp } from '../index'
+import Text, { TextProps } from '../Text'
+
+const boxSizes = {
+  xs: {
+    fontSize: 5,
+    padding: 0.5,
+    paddingHorizontal: 1,
+  },
+  sm: {
+    fontSize: 4,
+    padding: 0.5,
+    paddingHorizontal: 1.5,
+  },
+  md: {
+    fontSize: 4,
+    padding: 1,
+    paddingHorizontal: 2,
+  },
+  lg: {
+    fontSize: 3,
+    padding: 1.5,
+    lineHeight: 2,
+    paddingHorizontal: 2,
+  },
+}
+
+export type TabProps = {
+  /** Whether or not the tab is active. Sets element to span and removes `href` and hover effects if `true`. */
+  active?: boolean
+
+  /** Whether or not the tab is disabled. */
+  disabled?: boolean
+
+  /** Link to URL. Sets element to an anchor, otherwise it will use a button. */
+  href?: string
+
+  /** The size of the tab which includes `fontSize`, `lineHeight` and `padding`. */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+
+  /** The background color of the tab. */
+  color?: ColorProp
+} & TextProps
+
+export function Tab({
+  active,
+  disabled,
+  href,
+  color = 'backgroundSecondary',
+  size = 'md',
+  ...props
+}: TabProps) {
+  const tabProps = {
+    as: active ? 'span' : href ? 'a' : 'button',
+    fontWeight: 400,
+    radiusTop: 4,
+    cursor: active ? 'default' : 'pointer',
+    transition: 'opacity 160ms ease-out',
+    backgroundColor: color,
+    disabled,
+  } as any
+  if (!active) {
+    if (disabled) {
+      tabProps.opacity = 0.6
+      tabProps.cursor = 'not-allowed'
+      if (href) {
+        tabProps['aria-disabled'] = true
+      }
+    } else {
+      tabProps.href = href
+      tabProps.opacity = 0.8
+      tabProps.hover = {
+        opacity: 1,
+      }
+    }
+  }
+  return <Text {...tabProps} {...boxSizes[size]} {...props} />
+}

package/src/Tab/index.ts

@@ -0,0 +1,2 @@
+export * from './Tab'
+export { Tab as default } from './Tab'

package/src/Table/AnimateScroll.js

@@ -0,0 +1,58 @@
+import { PureComponent } from 'react'
+import Spring from 'tiny-spring'
+import styler from 'stylefire'
+
+class AnimateScroll extends PureComponent {
+  componentDidMount() {
+    if (!this.scroller) {
+      this.scroller = styler(window)
+    }
+  }
+
+  setRef = (node) => {
+    if (!this.scroller) {
+      this.scroller = styler(node)
+    }
+  }
+
+  setScroll = (side, amount) => {
+    const spring = Spring(this.scroller.get(side), {
+      stiffness: 500,
+      damping: 50,
+    })
+    spring.onUpdate((value) => this.scroller.set({ [side]: value }))
+    spring.transitionTo(amount)
+  }
+
+  setScrollX = (amount) => {
+    this.setScroll('scrollLeft', amount)
+  }
+
+  setScrollY = (amount) => {
+    this.setScroll('scrollTop', amount)
+  }
+
+  moveScroll = (side, amount) => {
+    this.setScroll(side, this.scroller.get(side) + amount)
+  }
+
+  moveScrollX = (amount) => {
+    this.moveScroll('scrollLeft', amount)
+  }
+
+  moveScrollY = (amount) => {
+    this.moveScroll('scrollTop', amount)
+  }
+
+  render() {
+    return this.props.children({
+      ref: this.setRef,
+      moveScrollX: this.moveScrollX,
+      moveScrollY: this.moveScrollY,
+      setScrollX: this.setScrollX,
+      setScrollY: this.setScrollY,
+    })
+  }
+}
+
+export default AnimateScroll

package/src/Table/AvatarCell.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+import Avatar from '../Avatar'
+import StackView from '../StackView'
+import { useHover } from '../hooks'
+
+import CheckboxCell from './CheckboxCell'
+
+function AvatarCell({ source, checked, onChange }) {
+  const { hover, hoverProps } = useHover()
+  return (
+    <StackView
+      alignment="center"
+      distribution="center"
+      width={4}
+      height={4}
+      {...hoverProps}
+    >
+      {hover || checked ? (
+        <CheckboxCell onChange={onChange} checked={checked} />
+      ) : (
+        <Avatar source={source} size="sm" />
+      )}
+    </StackView>
+  )
+}
+
+export default AvatarCell

package/src/Table/Body.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import Box from '../Box'
+
+const Body = (props) => (
+  <Box
+    role="rowgroup"
+    position="relative"
+    overflowX="auto"
+    WebkitOverflowScrolling="touch"
+    flexShrink={1}
+    flexGrow={1}
+    marginTop="-1px"
+    zIndex={5}
+    css={{
+      '@media print': {
+        overflowX: 'visible',
+      },
+    }}
+    {...props}
+  />
+)
+
+export default Body

package/src/Table/BodyCell.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import StackView from '../StackView'
+
+const BodyCell = (props) => (
+  <StackView
+    role="cell"
+    axis="horizontal"
+    shrink={0}
+    paddingVertical={0.5}
+    {...props}
+  />
+)
+
+export default BodyCell

package/src/Table/BodyInnerCell.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import StackView from '../StackView'
+import Text from '../Text'
+
+const BodyInnerCell = ({ children, column, ...restProps }) => (
+  <StackView
+    axis="horizontal"
+    alignment="center"
+    width={
+      column.width || column.maxWidth || column.truncate ? '100%' : undefined
+    }
+    paddingHorizontal={1.5}
+    {...restProps}
+  >
+    {column.truncate ? (
+      <Text as="div" truncate>
+        {children}
+      </Text>
+    ) : (
+      children
+    )}
+  </StackView>
+)
+
+export default BodyInnerCell

package/src/Table/BodyRow.js

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import DragDrop from '../DragDrop'
+import StackView from '../StackView'
+import { composeMultipleEvents } from '../utils'
+import { useHover, useKeyboardShortcuts } from '../hooks'
+
+const BodyRow = ({
+  children,
+  keyboardShortcuts,
+  row,
+  rowIndex,
+  onRowSort,
+  ...restProps
+}) => {
+  const { hover, hoverProps } = useHover()
+  const {
+    bindKeyboardShortcuts,
+    unbindKeyboardShortcuts,
+  } = useKeyboardShortcuts(keyboardShortcuts, { row, rowIndex })
+  const childrenToRender = (provided) => (
+    <StackView
+      innerRef={provided.innerRef}
+      role="row"
+      axis="horizontal"
+      borderColor="grey-3"
+      backgroundColor="white"
+      {...restProps}
+      {...provided.draggableProps}
+      {...composeMultipleEvents(
+        {
+          onMouseEnter: bindKeyboardShortcuts,
+          onMouseLeave: unbindKeyboardShortcuts,
+        },
+        hoverProps
+      )}
+    >
+      {children({
+        isRowHovered: hover,
+        dragHandleProps: provided.dragHandleProps,
+      })}
+    </StackView>
+  )
+  if (onRowSort) {
+    return (
+      <DragDrop.Draggable draggableId={rowIndex.toString()} index={rowIndex}>
+        {(provided) => childrenToRender(provided)}
+      </DragDrop.Draggable>
+    )
+  } else {
+    return childrenToRender({})
+  }
+}
+
+export default BodyRow

package/src/Table/CheckboxCell.js

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import Checkbox from '../Checkbox'
+
+// only allow checkbox to catch event to prevent firing anchor when using getRowLink
+const stopPropagation = (originalEvent) => (event) => {
+  event.stopPropagation()
+  if (originalEvent) {
+    originalEvent(event)
+  }
+}
+
+function CheckboxCell({ onClick, onKeyDown, ...restProps }) {
+  return (
+    <Checkbox
+      size="lg"
+      label={null}
+      onClick={stopPropagation(onClick)}
+      onKeyDown={stopPropagation(onKeyDown)}
+      {...restProps}
+    />
+  )
+}
+
+export default CheckboxCell

package/src/Table/ColumnPicker.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import Checkbox from '../Checkbox'
+import Dropdown from '../Dropdown'
+import Text from '../Text'
+
+const noop = () => null
+
+function ColumnPicker({
+  columns = [],
+  hiddenColumnIds = [],
+  onChange = noop,
+  ...restProps
+}) {
+  return (
+    <Dropdown
+      variant="outline"
+      icon={{ name: 'columns' }}
+      tooltip={{ title: 'Filter Columns' }}
+      placement="bottom-end"
+      closeOnSelect={false}
+      onSelect={(columnId) => {
+        const newHiddenColumnIds = [...hiddenColumnIds]
+        const indexPosition = newHiddenColumnIds.indexOf(columnId)
+        if (indexPosition > -1) {
+          newHiddenColumnIds.splice(indexPosition, 1)
+        } else {
+          newHiddenColumnIds.push(columnId)
+        }
+        onChange({ columnId, hiddenColumnIds: newHiddenColumnIds })
+      }}
+      {...restProps}
+    >
+      {columns
+        .filter((column) => !column.alwaysVisible)
+        .map((column) => (
+          <Dropdown.Item key={column.id} value={column.id}>
+            <Checkbox
+              label={null}
+              checked={hiddenColumnIds.indexOf(column.id) === -1}
+              onChange={noop}
+              marginRight={1}
+            />
+            <Text>{column.label || column.header}</Text>
+          </Dropdown.Item>
+        ))}
+    </Dropdown>
+  )
+}
+
+export default ColumnPicker

package/src/Table/DateCell.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { format } from 'date-fns'
+
+import Box from '../Box'
+
+function DateCell({ date, showTime }) {
+  return (
+    <Box>{format(date, showTime ? 'MMM dd, yyyy h:mm:A' : 'MMM dd, yyyy')}</Box>
+  )
+}
+
+export default DateCell