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

package/src/Page/Page.mdx

@@ -1,164 +0,0 @@
----
-title: Page
-category: General
-summary: Page specific components.
----
-
-```jsx live
-render(
-  <Box width="100%">
-    <PageHeader>
-      <PageTitle>People</PageTitle>
-    </PageHeader>
-    <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>
-          <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>
-          <PageActions>
-            <PageButton title="One" />
-            <PageButton title="Two" />
-          </PageActions>
-        </PageToolbar>
-      }
-    >
-      <PageTitle>People</PageTitle>
-    </PageHeader>
-    <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="general.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`, `pageHeader`, 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

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import StackView from '../StackView'
-
-function PageActions(props) {
-  return (
-    <StackView
-      alignment="center"
-      alignSelf="end"
-      axis="horizontal"
-      distribution="end"
-      flex="1"
-      paddingBottom={2}
-      spacing={1}
-      {...props}
-    />
-  )
-}
-
-export default PageActions

package/src/Page/PageBody.js

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

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

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

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import { useThemeValue } from '../system'
-import StackView from '../StackView'
-
-function PageHeader({ children, toolbar, ...restProps }) {
-  const themeProps = useThemeValue('pageHeader')
-  return (
-    <StackView
-      as="header"
-      axis="vertical"
-      backgroundColor="primary-light"
-      paddingHorizontal={2}
-      minHeight={8}
-      mediaQueries={{
-        sm: { paddingHorizontal: 3 },
-      }}
-      spacing={0}
-      {...themeProps}
-      {...restProps}
-    >
-      {children && (
-        <StackView
-          alignment="center"
-          axis="horizontal"
-          paddingTop={2}
-          width="100%"
-        >
-          {children}
-        </StackView>
-      )}
-      {toolbar}
-    </StackView>
-  )
-}
-
-export default PageHeader

package/src/Page/PageTab.js

@@ -1,23 +0,0 @@
-import React from 'react'
-
-import Tab from '../Tab'
-import { useThemeValue } from '../system'
-
-function PageTab(props) {
-  const themeProps = useThemeValue('pageTab')
-  return (
-    <Tab
-      mediaQueries={{
-        sm: {
-          paddingHorizontal: 3,
-        },
-      }}
-      paddingHorizontal={1.5}
-      size="lg"
-      {...themeProps}
-      {...props}
-    />
-  )
-}
-
-export default PageTab

package/src/Page/PageTabList.js

@@ -1,15 +0,0 @@
-import React from 'react'
-
-import StackView from '../StackView'
-
-export default function PageTabList(props) {
-  return (
-    <StackView
-      axis="horizontal"
-      paddingTop={2}
-      spacing={0.5}
-      alignSelf="end"
-      {...props}
-    />
-  )
-}

package/src/Page/PageTitle.js

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

package/src/Page/PageToolbar.js

@@ -1,41 +0,0 @@
-import React from 'react'
-
-import StackView from '../StackView'
-import { useThemeValue } from '../system'
-
-function PageToolbar({ stackBelow, ...restProps }) {
-  const themeBreakpoints = useThemeValue('breakpoints')
-  const breakpoint = Object.keys(themeBreakpoints).includes(stackBelow)
-    ? stackBelow
-    : 'sm'
-  const stackProps = stackBelow
-    ? {
-        axis: 'vertical',
-        alignment: 'stretch',
-        spacing: 2,
-        mediaQueries: {
-          [breakpoint]: {
-            axis: 'horizontal',
-            alignment: 'center',
-            paddingBottom: 0,
-            spacing: 0,
-          },
-        },
-      }
-    : null
-
-  return (
-    <StackView
-      alignment="center"
-      axis="horizontal"
-      distribution="space-between"
-      flex={1}
-      spacing={2}
-      width="100%"
-      {...stackProps}
-      {...restProps}
-    />
-  )
-}
-
-export default PageToolbar

package/src/Page/index.js

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

@@ -1,223 +0,0 @@
-// @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 = {
-  children?: any,
-  /**
-   * 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