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

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

package/src/PagerView/PagerView.mdx

@@ -1,200 +0,0 @@
----
-title: PagerView
-category: Layout
-summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/planningcenter/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```jsx live
-const views = [
-  ['blue-5', 18],
-  ['seagreen', 24],
-  ['rebeccapurple', 32],
-  ['hotpink', 20],
-]
-render(() => {
-  const {
-    activeIndex,
-    moveActiveIndex,
-    moveBackwardDisabled,
-    moveForwardDisabled,
-  } = hooks.useRovingIndex({
-    maxIndex: views.length - 1,
-  })
-  return (
-    <StackView spacing={1}>
-      <PagerView
-        activeViewIndex={activeIndex}
-        width={40}
-        backgroundColor="backgroundTertiary"
-      >
-        {views.map(([color, height], index) => (
-          <PagerView.View
-            key={color}
-            minHeight={height}
-            alignment="center"
-            distribution="center"
-            paddingHorizontal={4}
-            fontSize={0}
-            color="light-5"
-            backgroundColor={color}
-          >
-            {index + 1}
-          </PagerView.View>
-        ))}
-      </PagerView>
-      <StackView axis="horizontal" distribution="center" spacing={1}>
-        <Button
-          title="Prev"
-          icon={{ name: 'general.leftChevron', size: 'sm' }}
-          radius="circle"
-          disabled={moveBackwardDisabled}
-          onClick={() => moveActiveIndex(-1)}
-        />
-        <Button
-          title="Next"
-          icon={{ name: 'general.rightChevron', size: 'sm' }}
-          radius="circle"
-          disabled={moveForwardDisabled}
-          onClick={() => moveActiveIndex(1)}
-        />
-      </StackView>
-    </StackView>
-  )
-})
-```
-
-```jsx live
-function View({ children }) {
-  return (
-    <PagerView.View>
-      <Card minHeight={24} padding={2}>
-        {children}
-      </Card>
-    </PagerView.View>
-  )
-}
-
-function Arrangement({ expanded, expandOrShrink }) {
-  return (
-    <View>
-      <Toolbar
-        title="Arrangement"
-        helpContent="These files are only available in plans that use the Default Arrangement, no matter what key is chosen."
-        actions={
-          <Button
-            title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
-            variant="naked"
-            onClick={expandOrShrink}
-          />
-        }
-      />
-    </View>
-  )
-}
-
-function Key({ name, expanded, expandOrShrink }) {
-  return (
-    <View>
-      <Toolbar
-        title={name}
-        actions={[
-          <Button title="edit" icon={{ name: 'general.pencil' }} variant="naked" />,
-          <Button
-            title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
-            variant="naked"
-            onClick={expandOrShrink}
-          />,
-        ]}
-      />
-    </View>
-  )
-}
-
-const keys = ['A', 'Ab', 'B', 'C', 'C#', 'D', 'Db', 'E', 'Eb', 'F', 'F#', 'G']
-
-render(() => {
-  const [expanded, setExpanded] = React.useState(false)
-  const {
-    activeIndex,
-    moveActiveIndex,
-    setActiveIndex,
-    moveBackwardDisabled,
-    moveForwardDisabled,
-  } = hooks.useRovingIndex({
-    maxIndex: keys.length - 1,
-  })
-  const viewsToShow = expanded ? 1 : 3
-  const expandOrShrink = (nextIndex) => {
-    setActiveIndex(nextIndex)
-    setExpanded((bool) => !bool)
-  }
-  const isActiveIndex = (index) => {
-    return index >= activeIndex && index < activeIndex + viewsToShow
-  }
-  return (
-    <StackView width="100%" maxWidth={104} spacing={2}>
-      <PagerView
-        width="100%"
-        activeViewIndex={activeIndex}
-        viewsToShow={viewsToShow}
-        spacing={2}
-      >
-        <Arrangement
-          expanded={expanded && activeIndex === 0}
-          expandOrShrink={() => expandOrShrink(0)}
-        />
-        {keys.map((key, index) => (
-          <Key
-            key={key}
-            name={key}
-            expanded={expanded && activeIndex === index + 1}
-            expandOrShrink={() => expandOrShrink(index + 1)}
-          />
-        ))}
-      </PagerView>
-      <GridView columns="auto 1fr auto" spacing={1}>
-        <Button
-          title="Prev"
-          icon={{ name: 'general.leftChevron', size: 'sm' }}
-          radius="circle"
-          disabled={moveBackwardDisabled}
-          onClick={() => moveActiveIndex(-1)}
-        />
-        <StackView
-          axis="horizontal"
-          maxWidth="100%"
-          marginHorizontal="auto"
-          overflow="scroll"
-        >
-          {['Arrangement', ...keys].map((key, index) => {
-            const buttonProps = {
-              key,
-              title: key,
-              variant: 'naked',
-              onClick: () => setActiveIndex(index),
-            }
-            if (isActiveIndex(index)) {
-              buttonProps.theme = false
-              buttonProps.radius = 0
-              buttonProps.borderBottomWidth = 2
-              buttonProps.borderBottomColor = 'primary'
-              buttonProps.color = 'primary'
-            }
-            return <Button {...buttonProps} />
-          })}
-        </StackView>
-        <Button
-          title="Next"
-          icon={{ name: 'general.rightChevron', size: 'sm' }}
-          radius="circle"
-          disabled={moveForwardDisabled}
-          onClick={() => moveActiveIndex(1)}
-        />
-      </GridView>
-    </StackView>
-  )
-})
-```

package/src/PagerView/index.js

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

package/src/Pagination/Pagination.mdx

@@ -1,19 +0,0 @@
----
-title: Pagination
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: pagination
----
-
-```jsx live
-render(() => {
-  const [value, setValue] = React.useState(24)
-  return (
-    <Pagination
-      currentPage={value}
-      onPageChange={(value) => setValue(value)}
-      totalPages={100}
-    />
-  )
-})
-```