@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/NumberField/NumberField.test.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import userEvent from '@testing-library/user-event'
+import NumberField from './NumberField'
+
+describe('value', () => {
+  const TestApp = ({ value: initialValue, ...props }) => {
+    const [value, setValue] = useState(initialValue)
+    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
+  }
+  const setup = props => {
+    const { getByTestId } = render(<TestApp {...props}/>)
+    return getByTestId('test')
+  }
+
+  it('renders', () => {
+    const numberField = setup({ value: 5 })
+    expect(numberField).toHaveValue('5')
+  })
+
+  it('pads if asked to', () => {
+    const numberField = setup({ value: 5, pad: 2 })
+    expect(numberField).toHaveValue('05')
+  })
+
+  it('uses placeholder when empty', () => {
+    const placeholder = 'pick something!'
+    const numberField = setup({ placeholder })
+    expect(numberField).toHaveAttribute('placeholder', placeholder)
+  })
+
+  describe('min', () => {
+    it('is used if typed value is lower after blur', () => {
+      const numberField = setup({ value: 2, min: 1 })
+      userEvent.type(numberField, '{backspace}0')
+      userEvent.tab()
+      expect(numberField).toHaveValue('1')
+    })
+
+    it('prevents arrow down from going below', () => {
+      const numberField = setup({ value: 1, min: 1 })
+      userEvent.type(numberField, '{arrowdown}')
+      expect(numberField).toHaveValue('1')
+    })
+  })
+
+  describe('max', () => {
+    it('is used if typed value is higher after blur', () => {
+      const numberField = setup({ value: 0, max: 1 })
+      userEvent.type(numberField, '2')
+      userEvent.tab()
+      expect(numberField).toHaveValue('1')
+    })
+
+    it('prevents arrow up from going above', () => {
+      const numberField = setup({ value: 1, max: 1 })
+      userEvent.type(numberField, '{arrowup}')
+      expect(numberField).toHaveValue('1')
+    })
+  })
+
+  describe('pad', () => {
+    it("add appropriate pad", () => {
+      const numberField = setup({ value: 0, pad: 2 })
+      userEvent.type(numberField, '12{backspace}')
+      expect(numberField).toHaveValue('01')
+    })
+  })
+})
+
+describe('moveFocusOnMax', () => {
+  const TestApp = props => {
+    const [value, setValue] = useState(0)
+
+    return <>
+      <NumberField {...props } data-testid="test-a" value={value} onChange={setValue}/>
+      <input data-testid="test-b"/>
+    </>
+  }
+
+  const setup = () => {
+    const props = { max: 12, pad: 2, moveFocusOnMax: true }
+    const { getByTestId } = render(<TestApp {...props} />)
+    return [getByTestId('test-a'), getByTestId('test-b')]
+  }
+
+  it('moves focus when any further input would exceed max', () => {
+    const [numberField, nextTabbable] = setup()
+
+    userEvent.type(numberField, '2')
+    jest.runAllTimers()
+    expect(nextTabbable).toHaveFocus()
+  })
+
+  it('does not move focus when some further input is possible without exceeding max', () => {
+    const [numberField, nextTabbable] = setup()
+
+    userEvent.type(numberField, '1') // (10, 11, 12) are still possible
+    jest.runAllTimers()
+    expect(numberField).toHaveFocus()
+  })
+})
+
+describe('ignoredKeys', () => {
+  const TestApp = props => {
+    const [value, setValue] = useState(1)
+
+    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
+  }
+
+  const setup = () => {
+    const props = { ignoredKeys: ['ArrowUp', 'ArrowDown'] }
+    const { getByTestId } = render(<TestApp {...props} />)
+    return getByTestId('test')
+  }
+
+  it('prevents specified keys from changing values', () => {
+    const numberField = setup()
+
+    userEvent.type(numberField, '{arrowup}')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('1')
+
+    userEvent.type(numberField, '{arrowdown}')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('1')
+  })
+
+  it('allows other keys from change the value', () => {
+    const numberField = setup()
+
+    userEvent.type(numberField, '2')
+    jest.runAllTimers()
+    expect(numberField).toHaveValue('12')
+  })
+})

package/src/NumberField/index.js

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

package/src/Page/Page.mdx

@@ -0,0 +1,109 @@
+---
+title: Page
+category: General
+summary: Page specific components.
+---
+
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader
+      toolbar={
+        <PageToolbar>
+          <PageTitle>People</PageTitle>
+          <PageActions>
+            <PageButton title="One" />
+            <PageButton title="Two" />
+          </PageActions>
+        </PageToolbar>
+      }
+    />
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```
+
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader
+      toolbar={
+        <PageToolbar>
+          <PageTabList>
+            <PageTab active>My Schedule</PageTab>
+            <PageTab>All Plans</PageTab>
+          </PageTabList>
+        </PageToolbar>
+      }
+    >
+      <StackView axis="horizontal" alignment="center" spacing={2}>
+        <Icon name="person" size="xxl" color="white" />
+        <StackView>
+          <Heading level={5} color="light-7">
+            Steingard Tests > Sunday
+          </Heading>
+          <Heading color="light-8">Dave's Band Tag Teams</Heading>
+        </StackView>
+      </StackView>
+    </PageHeader>
+    <PageBody
+      inset
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Inset body with tabs
+    </PageBody>
+  </Box>
+)
+```
+
+## Theming
+
+Use theme keys `pageBody`, `pageButton`, `pageDropdown`, and `pageTitle` to override `Page` component props.
+
+```jsx live
+render(
+  <Box width="100%">
+    <ThemeProvider
+      theme={{
+        pageHeader: { backgroundColor: 'primary-lighter' },
+        pageTitle: { color: 'primary-dark' },
+      }}
+    >
+      <PageHeader
+        toolbar={
+          <PageToolbar>
+            <PageTitle>People</PageTitle>
+          </PageToolbar>
+        }
+      />
+    </ThemeProvider>
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```

package/src/Page/PageActions.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import StackView from '../StackView'
+
+function PageActions(props) {
+  return <StackView axis="horizontal" spacing={1} {...props} />
+}
+
+export default PageActions

package/src/Page/PageBody.js

@@ -0,0 +1,44 @@
+import React, { Children, cloneElement } from 'react'
+
+import { useThemeValue } from '../system'
+import StackView from '../StackView'
+
+function PageBody({ children, inset, sidebar, ...restProps }) {
+  const themeProps = useThemeValue('pageBody')
+  const childrenToRender = sidebar
+    ? Children.toArray([
+        cloneElement(sidebar, { basis: 28 }),
+        <StackView grow={1} padding={3} shrink={1}>
+          {children}
+        </StackView>,
+      ])
+    : children
+  return (
+    <StackView
+      padding={sidebar && !inset ? 0 : 3}
+      backgroundColor="backgroundSecondary"
+      mediaQueries={{
+        md: { axis: sidebar && !inset ? 'horizontal' : undefined },
+      }}
+      {...themeProps}
+      {...restProps}
+    >
+      {inset ? (
+        <StackView
+          borderColor="separatorSecondary"
+          borderWidth={1}
+          mediaQueries={{ md: { axis: sidebar ? 'horizontal' : undefined } }}
+          padding={sidebar ? null : 3}
+          radius={3}
+          shrink={1}
+        >
+          {childrenToRender}
+        </StackView>
+      ) : (
+        childrenToRender
+      )}
+    </StackView>
+  )
+}
+
+export default PageBody

package/src/Page/PageButton.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useThemeValue } from '../system'
+import Button from '../Button'
+
+function PageButton(props) {
+  const themeProps = useThemeValue('pageButton')
+  return <Button theme="white" {...themeProps} {...props} />
+}
+
+export default PageButton

package/src/Page/PageDropdown.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useThemeValue } from '../system'
+import Dropdown from '../Dropdown'
+
+function PageDropdown(props) {
+  const themeProps = useThemeValue('pageDropdown')
+  return <Dropdown theme="white" variant="outline" {...themeProps} {...props} />
+}
+
+export default PageDropdown

package/src/Page/PageHeader.js

@@ -0,0 +1,43 @@
+import React, { Children } from 'react'
+
+import { useThemeValue } from '../system'
+import StackView from '../StackView'
+
+import { PAGE_TABLIST_DISPLAY_NAME } from './PageTabList'
+
+function PageHeader({ children, toolbar, ...restProps }) {
+  const themeProps = useThemeValue('pageHeader')
+  const tabsPresent = toolbar
+    ? Children.toArray(toolbar.props.children).some(
+        (child) => child && child.type.displayName === PAGE_TABLIST_DISPLAY_NAME
+      )
+    : false
+  const childrenToRender = toolbar
+    ? children
+      ? Children.toArray([
+          <StackView axis="horizontal" alignment="center" width="100%">
+            {children}
+          </StackView>,
+          toolbar,
+        ])
+      : toolbar
+    : children
+  return (
+    <StackView
+      as="header"
+      axis={children && toolbar ? 'vertical' : 'horizontal'}
+      alignment={children && toolbar ? 'start' : 'center'}
+      paddingHorizontal={3}
+      paddingTop={1.5}
+      paddingBottom={tabsPresent ? null : 1.5}
+      spacing={1.5}
+      backgroundColor="primary-light"
+      {...themeProps}
+      {...restProps}
+    >
+      {childrenToRender}
+    </StackView>
+  )
+}
+
+export default PageHeader

package/src/Page/PageTab.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+import Tab from '../Tab'
+
+function PageTab(props) {
+  return <Tab {...props} size="lg" />
+}
+
+export default PageTab

package/src/Page/PageTabList.js

@@ -0,0 +1,13 @@
+import React from 'react'
+
+import StackView from '../StackView'
+
+export const PAGE_TABLIST_DISPLAY_NAME = 'PageTabList'
+
+function PageTabList(props) {
+  return <StackView axis="horizontal" spacing={0.5} {...props} />
+}
+
+PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME
+
+export default PageTabList

package/src/Page/PageTitle.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { useThemeValue } from '../system'
+import Heading from '../Heading'
+
+function PageTitle(props) {
+  const themeProps = useThemeValue('pageTitle')
+  return <Heading level={2} color="white" {...themeProps} {...props} />
+}
+
+export default PageTitle

package/src/Page/PageToolbar.js

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import StackView from '../StackView'
+
+function PageToolbar({ children }) {
+  return (
+    <StackView
+      grow={1}
+      axis="horizontal"
+      alignment="start"
+      distribution="space-between"
+    >
+      {children}
+    </StackView>
+  )
+}
+
+export default PageToolbar

package/src/Page/index.js

@@ -0,0 +1,21 @@
+import PageActions from './PageActions'
+import PageBody from './PageBody'
+import PageButton from './PageButton'
+import PageDropdown from './PageDropdown'
+import PageHeader from './PageHeader'
+import PageTab from './PageTab'
+import PageTabList from './PageTabList'
+import PageTitle from './PageTitle'
+import PageToolbar from './PageToolbar'
+
+export {
+  PageActions,
+  PageBody,
+  PageButton,
+  PageDropdown,
+  PageHeader,
+  PageTab,
+  PageTabList,
+  PageTitle,
+  PageToolbar,
+}

package/src/PagerView/PagerView.js

@@ -0,0 +1,222 @@
+// @flow
+import React, {
+  Children,
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+} from 'react'
+import Spring from 'tiny-spring'
+import styler from 'stylefire'
+import { tabbable } from 'tabbable'
+import { clamp } from '@popmotion/popcorn'
+
+import GridView from '../GridView'
+import StackView from '../StackView'
+import { useMeasure } from '../hooks'
+import { range } from '../utils'
+
+function getRawTrackValue({
+  direction = 1,
+  multiplier = null,
+  spacing = 0,
+  viewsToShow = 1,
+}) {
+  spacing *= 8
+  let viewSize = (100 / viewsToShow) * direction
+  let spacingSize = (spacing - spacing / viewsToShow) * direction
+  if (multiplier !== null) {
+    viewSize *= multiplier
+    spacingSize = spacingSize * multiplier - spacing * direction * multiplier
+  }
+  if (viewsToShow === 1 && spacing === 0) {
+    spacingSize = 0
+  }
+  return { viewSize, spacingSize }
+}
+
+function getTrackValue({ viewSize, spacingSize }) {
+  return `calc(${viewSize}% - ${spacingSize}px)`
+}
+
+function parseTrackValue(value) {
+  return parseFloat(
+    value.includes('calc') ? value.split('(')[1].split('%')[0] : value
+  )
+}
+
+const PageViewContext = createContext({})
+
+export type Props = {
+  /**
+   * Which axis the track moves on. Defaults to `horizontal`.
+   */
+  axis?: 'horizontal' | 'vertical',
+  /**
+   * Controls the active view by index.
+   */
+  activeViewIndex?: number,
+  /**
+   * The number of views visible in the frame at one time. Defaults to 1.
+   */
+  viewsToShow?: number,
+  /**
+   * The number of views to move upon using prev and next methods. Defaults to 1.
+   */
+  viewsToMove?: number,
+  /**
+   * The amount of space between views. Uses 8-point grid multiplier.
+   */
+  spacing?: number,
+  /**
+   * Auto focus the first focusable element in the active view.
+   */
+  autoFocus?: boolean,
+}
+
+function PagerView(props: Props) {
+  const {
+    axis = 'horizontal',
+    activeViewIndex,
+    viewsToShow = 1,
+    viewsToMove = 1,
+    spacing = 0,
+    autoFocus = false,
+    children,
+    ...restProps
+  } = props
+
+  const isHorizontal = axis === 'horizontal'
+  const childCount = Children.count(children)
+  const maxActiveIndex = childCount - viewsToShow
+  const clampedIndex = clamp(0, maxActiveIndex, activeViewIndex * viewsToMove)
+  const visibleIndexes = range(0, viewsToShow).map(
+    (index) => clampedIndex + index
+  )
+  const crossDimension = axis === 'horizontal' ? 'height' : 'width'
+  const frameRef = useRef()
+  const frameStyler = useRef()
+  const frameProps = {
+    innerRef: frameRef,
+    overflow: 'hidden',
+    ...restProps,
+  }
+
+  const trackRef = useRef()
+  const trackStyler = useRef()
+  const trackProps = {
+    innerRef: trackRef,
+    alignment: isHorizontal ? 'start' : 'fill',
+    autoFlow: isHorizontal ? 'column' : 'row',
+    spacing,
+    [isHorizontal ? 'gridAutoColumns' : 'gridAutoRows']: getTrackValue(
+      getRawTrackValue({
+        spacing,
+        viewsToShow,
+      })
+    ),
+  }
+
+  const [useMeasureRef, useMeasureEffect] = useMeasure()
+
+  useMeasureEffect(
+    (viewNodes) => {
+      const viewMeasurements = viewNodes.map((node) =>
+        node.getBoundingClientRect()
+      )
+      const nextFrameSize = Math.max(
+        ...visibleIndexes.map((index) => {
+          const measurements = viewMeasurements[index]
+          return measurements ? measurements[crossDimension] : -1
+        })
+      )
+      if (frameStyler.current) {
+        const spring = Spring(frameStyler.current.get(crossDimension), {
+          stiffness: 500,
+          damping: 50,
+        })
+        spring.onUpdate((value) =>
+          frameStyler.current.set(crossDimension, value)
+        )
+        spring.transitionTo(nextFrameSize)
+        return () => spring.destroy()
+      } else {
+        frameStyler.current = styler(frameRef.current)
+        frameStyler.current.set(crossDimension, nextFrameSize)
+        frameStyler.current.render()
+      }
+    },
+    [activeViewIndex, viewsToShow]
+  )
+
+  useLayoutEffect(() => {
+    const trackAxis = isHorizontal ? 'x' : 'y'
+    const nextTrackValue = getRawTrackValue({
+      direction: -1,
+      multiplier: clampedIndex,
+      spacing,
+      viewsToShow,
+    })
+    if (trackStyler.current) {
+      const startValue = parseTrackValue(trackStyler.current.get(trackAxis))
+      const spring = Spring(startValue, {
+        stiffness: 500,
+        damping: 50,
+      })
+      spring.onUpdate((value) => {
+        trackStyler.current.set(
+          trackAxis,
+          getTrackValue({
+            viewSize: value,
+            spacingSize: nextTrackValue.spacingSize,
+          })
+        )
+      })
+      spring.transitionTo(nextTrackValue.viewSize)
+      return () => spring.destroy()
+    } else {
+      trackStyler.current = styler(trackRef.current)
+      trackStyler.current.set(trackAxis, getTrackValue(nextTrackValue))
+      trackStyler.current.render()
+    }
+  }, [clampedIndex, spacing, viewsToShow])
+
+  const lastTabbables = useRef([])
+
+  useLayoutEffect(() => {
+    lastTabbables.current.forEach((node) => (node.tabIndex = 0))
+    lastTabbables.current = []
+    for (let index = 0; index < childCount; index++) {
+      const tabbables = tabbable(trackRef.current.children[index])
+      if (autoFocus && index === clampedIndex) {
+        const [firstTabbable] = tabbables
+        if (firstTabbable) {
+          firstTabbable.focus({ preventScroll: true })
+        }
+      }
+      // prevent tabbing to any outside views
+      if (!visibleIndexes.includes(index)) {
+        tabbables.forEach((node) => (node.tabIndex = -1))
+      }
+      lastTabbables.current = [...lastTabbables.current, ...tabbables]
+    }
+  }, [clampedIndex, viewsToShow])
+
+  return (
+    <StackView {...frameProps}>
+      <GridView {...trackProps}>
+        <PageViewContext.Provider value={useMeasureRef}>
+          {children}
+        </PageViewContext.Provider>
+      </GridView>
+    </StackView>
+  )
+}
+
+PagerView.View = (props) => {
+  const useMeasureRef = useContext(PageViewContext)
+  const viewRef = useMeasureRef()
+  return <StackView innerRef={viewRef} {...props} />
+}
+
+export default PagerView