@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/StepperField/StepperField.mdx

@@ -1,21 +0,0 @@
----
-title: StepperField
-category: Forms
-summary: Number input used to collect numeric information from users with increment/decrement buttons.
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: stepperField
----
-
-```jsx live
-render(() => {
-  const [value, setValue] = React.useState(1)
-  return (
-    <StepperField
-      min={0}
-      max={10}
-      value={value}
-      onChange={(value) => setValue(value)}
-    />
-  )
-})
-```

package/src/StepperField/index.js

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

package/src/StepperProgress/Context.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-const StepperProgressContext = createContext(null)
-export default StepperProgressContext

package/src/StepperProgress/Step.js

@@ -1,84 +0,0 @@
-// @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

@@ -1,45 +0,0 @@
-// @flow
-import React, { Children } from 'react'
-
-import GridView from '../GridView'
-import StepperProgressContext from './Context'
-import { useThemeProps } from '../system'
-
-export type Props = {
-  /** Often accepts `StepperProgress.Step` component. */
-  children?: React.ReactNode,
-  /** 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, children, ...restProps }: Props) {
-  const { activeColor = 'primary-light', ...themeProps } = useThemeProps(
-    'stepperProgress',
-    restProps
-  )
-  return (
-    <GridView
-      autoFlow="column"
-      autoColumns="1fr"
-      alignment="center"
-      {...themeProps}
-    >
-      {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

@@ -1,61 +0,0 @@
----
-title: StepperProgress
-category: Indicators
-summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
-propsSummary: Accepts [GridView](/gridview) props.
-themeKey: stepperProgress
----
-
-```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

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

package/src/Summary/Summary.js

@@ -1,42 +0,0 @@
-// @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

@@ -1,26 +0,0 @@
----
-title: Summary
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```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

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

package/src/Tab/Tab.mdx

@@ -1,22 +0,0 @@
----
-title: Tab
-category: General
-propsSummary: Accepts [Text](/text) props.
----
-
-```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

@@ -1,80 +0,0 @@
-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

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

package/src/Table/AnimateScroll.js

@@ -1,58 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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