@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

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}
-    />
-  )
-})
-```

package/src/Pagination/Pagination.tsx

@@ -1,201 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-import Button from '../Button'
-import Group from '../Group'
-import StackView from '../StackView'
-import { range } from '../utils'
-import { parseColor } from '../system/utils'
-import { useWindowWidth } from '@react-hook/window-size'
-import { useThemeValue, useThemeProps } from '../system'
-
-function getVisiblePages(currentPage, totalPages, visiblePages) {
-  const start = Math.max(
-    1,
-    Math.min(
-      totalPages - visiblePages + 1,
-      Math.floor(currentPage - visiblePages / 2 + 1)
-    )
-  )
-  const stop = Math.min(totalPages, start + visiblePages - 1)
-  const primaryWindow = range(start, stop + 1)
-  const showFirstPage = start > 1
-  const showLastPage = stop < totalPages
-
-  if (showFirstPage) {
-    primaryWindow.shift()
-    primaryWindow.shift()
-  }
-  if (showLastPage) {
-    primaryWindow.pop()
-    primaryWindow.pop()
-  }
-
-  const first = showFirstPage ? [1, '...'] : []
-  const last = showLastPage ? ['...', totalPages] : []
-  return first.concat(primaryWindow).concat(last)
-}
-
-export type PaginationProps = {
-  /**
-   * Change the color of the active page
-   */
-  activeColor?: string
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  activePageLinkProps?: object
-
-  /**
-   * Current visible page number
-   */
-  currentPage: number
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  navButtonProps?: object
-
-  /**
-   * Callback when new page is requested
-   */
-  onPageChange: (nextPage: number) => undefined
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  pageLinkProps?: object
-
-  /**
-   * Total available pages
-   */
-  totalPages: number
-
-  /**
-   * Amount of visible pages
-   */
-  visiblePages?: number
-}
-
-const NavButton = ({ disabled, iconName, ...props }) => {
-  return (
-    <Button
-      backgroundColor={disabled ? '#f7f7f7' : '#f2f2f2'}
-      disabled={disabled}
-      icon={{
-        color: disabled ? '#cfcfcf' : undefined,
-        name: iconName,
-        size: 'xs',
-      }}
-      opacity={1}
-      shrink={0}
-      square
-      variant="fill"
-      {...props}
-    />
-  )
-}
-
-export default function Pagination({
-  currentPage,
-  onPageChange = () => null,
-  visiblePages,
-  totalPages = 0,
-  ...restProps
-}: PaginationProps) {
-  const { xs: xsBreakpoint } = useThemeValue('breakpoints')
-  const {
-    activeColor = '#5b8bf7',
-    navButtonProps,
-    pageLinkProps,
-    activePageLinkProps,
-    ...themeProps
-  } = useThemeProps('pagination', { ...restProps })
-
-  const currentWidth = useWindowWidth()
-
-  function renderGap(key) {
-    return <Box key={key} userSelect="none" cursor="default" children="…" />
-  }
-
-  function renderPageLink(number) {
-    const isCurrentPage = currentPage === number
-    const activeBackgroundColor = parseColor({ base: activeColor, alpha: 0.1 })
-    const outlineStyle = {
-      border: `1px solid ${activeColor}`,
-      color: isCurrentPage ? '#fff' : activeColor,
-    }
-
-    return (
-      <Button
-        active={{
-          backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor,
-          ...outlineStyle,
-        }}
-        key={number}
-        fontWeight={500}
-        hover={{
-          backgroundColor: isCurrentPage ? activeColor : '#fff',
-          ...outlineStyle,
-        }}
-        onClick={onPageChange.bind(null, number)}
-        shrink={0}
-        square
-        title={number}
-        variant={isCurrentPage ? 'fill' : 'naked'}
-        {...pageLinkProps}
-        {...(isCurrentPage && {
-          backgroundColor: activeColor,
-          color: '#fff',
-          ...activePageLinkProps,
-        })}
-      />
-    )
-  }
-
-  function renderPageLinks() {
-    const visiblePagesToShow =
-      currentWidth <= xsBreakpoint ? visiblePages || 5 : visiblePages || 7
-    const pages = getVisiblePages(currentPage, totalPages, visiblePagesToShow)
-    return pages.map((page, index) =>
-      page === '...' ? renderGap(page + index) : renderPageLink(page)
-    )
-  }
-
-  if (totalPages <= 1) {
-    return null
-  } else {
-    return (
-      <StackView
-        alignment="center"
-        axis="horizontal"
-        distribution="center"
-        overflow="auto"
-        paddingVertical={1}
-        shrink={0}
-        spacing={0.5}
-        width="100%"
-        {...themeProps}
-      >
-        <Group spacing={0.5}>
-          <NavButton
-            disabled={currentPage === 1}
-            iconName="general.leftChevron"
-            onClick={onPageChange.bind(null, currentPage - 1)}
-            tooltip={{ title: 'Previous Page' }}
-            {...navButtonProps}
-          />
-          <NavButton
-            disabled={currentPage === totalPages}
-            iconName="general.rightChevron"
-            onClick={onPageChange.bind(null, currentPage + 1)}
-            tooltip={{ title: 'Next Page' }}
-            {...navButtonProps}
-          />
-        </Group>
-        {renderPageLinks()}
-      </StackView>
-    )
-  }
-}

package/src/Pagination/index.js

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

package/src/Popover/Popover.mdx

@@ -1,66 +0,0 @@
----
-title: Popover
-category: Overlays
-themeKey: popover
----
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(true)
-  return (
-    <Box id="container">
-      <Popover
-        anchorElement={
-          <Input onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} />
-        }
-        renderTo="#container"
-        open={open}
-      >
-        <Box padding={1} backgroundColor="blue-5" color="white">
-          Popover Content
-        </Box>
-      </Popover>
-    </Box>
-  )
-})
-```
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(false)
-  return (
-    <Box
-      id="scroll-container"
-      height={20}
-      padding={4}
-      backgroundColor="backgroundSecondary"
-      position="relative"
-      overflow="auto"
-    >
-      <Text align="center">Scroll Me</Text>
-      <Popover
-        anchorElement={
-          <Button
-            title="Toggle Popover"
-            marginVertical={30}
-            theme="primary"
-            onClick={() => setOpen((bool) => !bool)}
-          />
-        }
-        renderTo="#scroll-container"
-        open={open}
-      >
-        <Tooltip
-          placement="bottom"
-          title="Tooltip"
-          renderTo="#scroll-container"
-        >
-          <Box padding={1} backgroundColor="blue-5" color="white">
-            Popover Content
-          </Box>
-        </Tooltip>
-      </Popover>
-    </Box>
-  )
-})
-```

package/src/Popover/Popover.test.tsx

@@ -1,62 +0,0 @@
-import React, { useState } from 'react'
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/extend-expect'
-import { Box, Text, Button, Popover } from '..'
-
-const PopBasic = ({ children }) => {
-  const [open, setOpen] = useState(false)
-  return (
-    <Box id="container">
-      <Popover
-        open={open}
-        offset={1}
-        renderTo="#container"
-        anchorElement={
-          <Button
-            title="Toggle"
-            onClick={() => setOpen(!open)}
-            id="anchor-element"
-          />
-        }
-      >
-        {children}
-      </Popover>
-    </Box>
-  )
-}
-
-describe('Popover', () => {
-  it('should not render string in closed Popover', () => {
-    const string = 'Test Text'
-    render(
-      <PopBasic>
-        <Text>{string}</Text>
-      </PopBasic>
-    )
-    expect(screen.queryByText(string)).toBeNull()
-  })
-
-  it('should render string in open Popover', () => {
-    const string = 'Test Text'
-    render(
-      <PopBasic>
-        <Text>{string}</Text>
-      </PopBasic>
-    )
-    const openPopover = screen.getByRole('button')
-    userEvent.click(openPopover)
-    expect(screen.getByText(string)).toBeInTheDocument()
-  })
-
-  it('should focus open button on click', () => {
-    render(
-      <PopBasic>
-        <Box />
-      </PopBasic>
-    )
-    const openPopover = screen.getByRole('button')
-    userEvent.click(openPopover)
-    expect(openPopover).toHaveFocus()
-  })
-})