@planningcenter/tapestry-react 2.0.0 → 2.1.0

package/src/Icon/Status.js

@@ -5,9 +5,21 @@ import Icon from './Icon'
 import Path from './Path'
 
 const STATUS_VARIANTS = {
-  confirmed: ['general.outlinedCircleCheck', 'success'],
-  unconfirmed: ['general.outlinedQuestionCircle', 'warning'],
-  declined: ['general.outlinedXCircle', 'error'],
+  confirmed: {
+    iconColor: 'success',
+    iconFilled: 'general.checkCircle',
+    iconOutlined: 'general.outlinedCircleCheck',
+  },
+  unconfirmed: {
+    iconColor: 'warning',
+    iconFilled: 'general.questionCircle',
+    iconOutlined: 'general.outlinedQuestionCircle',
+  },
+  declined: {
+    iconColor: 'error',
+    iconFilled: 'general.xCircle',
+    iconOutlined: 'general.outlinedXCircle',
+  },
 }
 
 export type Props = {
@@ -21,21 +33,18 @@ export type Props = {
 
 function Status(props: Props) {
   const { color, variant, variantFilled, ...restProps } = props
-  let variantName
-  let variantColor
-  Object.keys(STATUS_VARIANTS).some((key) => {
-    return variant === key
-      ? ([variantName, variantColor] = STATUS_VARIANTS[key])
-      : false
-  })
-  if (variantName && variantFilled) {
-    variantName += '-filled'
-  }
+  const { iconOutlined, iconFilled, iconColor } = STATUS_VARIANTS[variant]
+
+  const variantColor = color || iconColor
+  const variantIcon = variantFilled ? iconFilled : iconOutlined
+
   return (
-    <Icon name={variantName} color={color || variantColor} {...restProps}>
+    <Icon name={variantIcon} color={variantColor} {...restProps}>
       <Path name="tapestry.radio0" color={color} />
     </Icon>
   )
 }
 
+Status.displayName = 'Icon.Status'
+
 export default Status

package/src/Icon/Status.mdx

@@ -0,0 +1,17 @@
+---
+title: Icon.Status
+category: Primitives
+summary: This wraps the [Icon](/icon) component and can render 3 different statuses.
+propsSummary: Accepts [Icon](/icon) props.
+parent: Icon
+---
+
+```jsx live
+render(
+  <StackView axis="horizontal" spacing={3}>
+    <Icon.Status variant="confirmed" size="xl" />
+    <Icon.Status variant="unconfirmed" size="xl" />
+    <Icon.Status variant="declined" size="xl" />
+  </StackView>
+)
+```

package/src/Input/Inline.mdx

@@ -3,6 +3,7 @@ title: Input.Inline
 category: Forms
 summary: Composes [Input.InputField](/input.inputfield) with minimal styling.
 propsSummary: Accepts props for [Input.InputField](/input.inputfield).
+parent: Input
 ---
 
 ```jsx live

package/src/Input/Input.mdx

@@ -3,6 +3,7 @@ title: Input
 category: Forms
 summary: Composes [Input.InputBox](/input.inputbox) and [Input.InputField](/input.inputfield).
 propsSummary: Accepts props for [Input.InputBox](/input.inputbox) _and_ [Input.InputField](/input.inputfield), remaining props are forwarded to `Input.InputBox`.
+isParent: true
 ---
 
 ```jsx live

package/src/Input/InputBox.mdx

@@ -3,6 +3,7 @@ title: Input.InputBox
 category: Forms
 summary: A base component used in Input as well as [SegmentedControl](/segmentedcontrol), [Select](/select), and [TokenInput](/tokeninput).
 propsSummary: Accepts [StackView](/stackview) props.
+parent: Input
 ---
 
 ```jsx live

package/src/Input/InputField.mdx

@@ -3,6 +3,7 @@ title: Input.InputField
 category: Forms
 summary: The base component used in Input as well as Input.Inline and Combobox.Input. Provides a clean input base to build on top of.
 propsSummary: Accepts [Box](/box) props.
+parent: Input
 ---
 
 ```jsx live

package/src/Input/InputLabel.mdx

@@ -3,6 +3,7 @@ title: Input.InputLabel
 category: Forms
 summary: Provides accessibility as well as usability improvements for mouse users by allowing the user to click the <InputLabel/> component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like <Select/>.
 propsSummary: Accepts [Text](/text) props.
+parent: Input
 ---
 
 ```jsx live

package/src/PagerView/PagerView.mdx

@@ -1,7 +1,7 @@
 ---
 title: PagerView
 category: Layout
-summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/ministrycentered/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
+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.
 ---
 

package/src/Pagination/Pagination.mdx

@@ -12,7 +12,6 @@ render(() => {
       currentPage={value}
       onPageChange={(value) => setValue(value)}
       totalPages={100}
-      visiblePages={10}
     />
   )
 })

package/src/Pagination/Pagination.tsx

@@ -0,0 +1,163 @@
+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 { useWindowWidth } from '@react-hook/window-size'
+import { useThemeValue } 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,
+
+  /**
+   * Current visible page number
+   */
+  currentPage: number,
+
+  /**
+   * Callback when new page is requested
+   */
+  onPageChange: (nextPage: number) => undefined,
+
+  /**
+   * 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({
+  activeColor = '#5b8bf7',
+  currentPage,
+  onPageChange = () => null,
+  visiblePages,
+  totalPages = 0,
+  ...restProps
+}: PaginationProps) {
+  const { xs: xsBreakpoint } = useThemeValue('breakpoints')
+
+  const currentWidth = useWindowWidth()
+
+  function renderGap(key) {
+    return <Box key={key} userSelect="none" cursor="default" children="…" />
+  }
+
+  function renderPageLink(number) {
+    const isActive = currentPage === number
+
+    const outlineStyle = { border: '1px solid #5b8bf7', color: '#5b8bf7' }
+
+    return (
+      <Button
+        key={number}
+        focus={{ backgroundColor: '#f4f8fd', ...outlineStyle }}
+        fontWeight={500}
+        hover={{ backgroundColor: '#ffffff', ...outlineStyle }}
+        onClick={onPageChange.bind(null, number)}
+        shrink={0}
+        square
+        title={number}
+        variant={isActive ? 'fill' : 'naked'}
+        {...(isActive && { backgroundColor: '#5b8bf7', color: 'white' })}
+      />
+    )
+  }
+
+  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%"
+        {...restProps}
+      >
+        <Group spacing={0.5}>
+          <NavButton
+            disabled={currentPage === 1}
+            iconName="general.leftChevron"
+            onClick={onPageChange.bind(null, currentPage - 1)}
+            tooltip={{ title: 'Previous Page' }}
+          />
+          <NavButton
+            disabled={currentPage === totalPages}
+            iconName="general.rightChevron"
+            onClick={onPageChange.bind(null, currentPage + 1)}
+            tooltip={{ title: 'Next Page' }}
+          />
+        </Group>
+        {renderPageLinks()}
+      </StackView>
+    )
+  }
+}

package/src/Popover/Popover.tsx

@@ -17,7 +17,7 @@ export type PopoverProps = {
   /**
    * Controls the default component or tag being rendered.
    */
-  as?: React.ReactNode
+  as?: any
 
   /**
    * The element to attach the popover to. Clones the element's ref to calculate

package/src/Portal/Portal.tsx

@@ -2,6 +2,8 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 
 export type PortalProps = {
+  children: any
+
   /** Styles to apply to the portal root element. */
   style?: React.CSSProperties
 

package/src/Progress/Progress.mdx

@@ -3,6 +3,7 @@ title: Progress
 category: Indicators
 summary: Display progress towards the completion of a task. Composes [Box](/box).
 propsSummary: Accepts [Box](/box) props.
+themeKey: progress
 ---
 
 ```jsx live

package/src/RangeSlider/RangeSlider.mdx

@@ -3,6 +3,7 @@ title: RangeSlider
 category: Forms
 summary: Allow the user to specify a numeric value which must be no less than a minimum value and no more than a maximum value. Composes [Box](/box).
 propsSummary: Accepts [Box](/box) props.
+themeKey: rangeSlider
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -8,7 +8,7 @@ type ScrimProps = {
   children?: any,
 }
 
-const Scrim = React.forwardRef(function (props: ScrimProps,) {
+const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {
   React.useLayoutEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {

package/src/Section/Section.mdx

@@ -3,6 +3,7 @@ title: Section
 category: General
 summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: section
 ---
 
 ```jsx live

package/src/Select/Inline.js

@@ -1,8 +1,26 @@
+// @flow
 import React from 'react'
 
 import Select from './Select'
 
-function Inline({ light, hover, focus, readOnly, ...restProps }) {
+type Props = {
+  /**
+   * Changes the background and text color values
+   */
+  light?: boolean,
+  /**
+   * Accepts hover styles.
+   */
+  hover?: object,
+
+  /**
+   * Accepts focus styles.
+   */
+  focus?: object,
+  readOnly?: boolean,
+}
+
+function Inline({ light, hover, focus, readOnly, ...restProps }: Props) {
   const pseudoStyles = readOnly
     ? {}
     : { backgroundColor: light ? 'light-0' : 'highlight' }
@@ -29,4 +47,6 @@ function Inline({ light, hover, focus, readOnly, ...restProps }) {
   )
 }
 
+Inline.displayName = 'Select.Inline'
+
 export default Inline

package/src/Select/Inline.mdx

@@ -0,0 +1,27 @@
+---
+title: Select.Inline
+category: Forms
+summary: A base component that composes [Select](/select) and provides transparent styles.
+propsSummary: Accepts [Select](/select) props.
+parent: Select
+---
+
+```jsx live
+render(
+  <Box padding={2} backgroundColor="primary">
+    <Select.Inline light>
+      {generateRange(100).map((number) => (
+        <Select.Option key={number} value={number}>
+          {number}
+        </Select.Option>
+      ))}
+    </Select.Inline>
+    <Input.Inline
+      size="xl"
+      fontSize={0}
+      light
+      defaultValue="Editable Heading"
+    />
+  </Box>
+)
+```

package/src/Select/Option.js

@@ -20,7 +20,7 @@ type Props = {
 }
 
 class Option extends Component<Props> {
-  static displayName = OPTION_DISPLAY_NAME
+  static displayName = 'Select.Option'
 
   render() {
     const { children, disabled, index, text, value, ...restProps } = this.props

package/src/Select/Option.mdx

@@ -0,0 +1,30 @@
+---
+title: Select.Option
+category: Forms
+summary: Holds values that will interact with [Select](/select) and can be wrapped by [Select.OptionGroup](/select.optiongroup)
+parent: Select
+---
+
+```jsx live
+render(
+  <Select
+    emptyValue="Select a fruit"
+    tooltip={{ title: 'Select a fruit' }}
+    onChange={(e) => console.log(e)}
+  >
+    <Select.Option value="apple">Apple</Select.Option>
+    <Select.Option value="orange">Orange</Select.Option>
+    <Select.Option value="banana">Banana</Select.Option>
+    <Select.Option value="mango">Mango</Select.Option>
+    <Select.Option value="kiwi" disabled>
+      Kiwi (Out of stock)
+    </Select.Option>
+    <Select.Option value="strawberry">Strawberry</Select.Option>
+    <Divider margin={0.5} />
+    <Menu.Item distribution="fill" spacing={1}>
+      <Button title="Action 1" size="sm" />
+      <Button title="Action 2" size="sm" />
+    </Menu.Item>
+  </Select>
+)
+```

package/src/Select/OptionGroup.js

@@ -1,9 +1,15 @@
+// @flow
 import { Component } from 'react'
 
-import { OPTIONGROUP_DISPLAY_NAME } from './constants'
+type Props = {
+  /**
+   * Provide a title to a grouping of options.
+   */
+  title?: string,
+}
 
-class OptionGroup extends Component {
-  static displayName = OPTIONGROUP_DISPLAY_NAME
+class OptionGroup extends Component<Props> {
+  static displayName = 'Select.OptionGroup'
 
   render() {
     return null

package/src/Select/OptionGroup.mdx

@@ -0,0 +1,25 @@
+---
+title: Select.OptionGroup
+category: Forms
+summary: Groups and provides a title to a related set of [Select.Option](/select.option) components.
+parent: Select
+---
+
+```jsx live
+render(
+  <Box>
+    <Select multiple>
+      <Select.OptionGroup title="Group 1">
+        <Select.Option value="1">One</Select.Option>
+        <Select.Option value="2">Two</Select.Option>
+        <Select.Option value="3">Three</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup title="Group 2">
+        <Select.Option value="4">Four</Select.Option>
+        <Select.Option value="5">Five</Select.Option>
+        <Select.Option value="6">Six</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  </Box>
+)
+```

package/src/Select/Select.mdx

@@ -1,8 +1,9 @@
 ---
 title: Select
 category: Forms
-summary: Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes [InputBox](/inputbox) and [Popover](/popover).
+summary: Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes [InputBox](/input.inputbox) and [Popover](/popover).
 propsSummary: Accepts [InputBox](/input.inputbox) props.
+isParent: true
 ---
 
 ```jsx live
@@ -78,101 +79,3 @@ render(() => {
   )
 })
 ```
-
-```jsx live
-const options = [
-  {
-    title: 'Arrangement Files',
-    options: [
-      {
-        label: 'Chord Chart + → Lyrics & Chords',
-        type: 'TXT',
-      },
-      {
-        label: 'Lead Sheet',
-        type: 'PDF',
-      },
-    ],
-  },
-  {
-    title: 'E (Most Common)',
-    options: [
-      {
-        label: 'E Chord Chart +',
-        type: 'PDF',
-      },
-    ],
-  },
-  {
-    title: 'Ab',
-    options: [
-      {
-        label: 'Ab Chord Chart +',
-        type: 'PDF',
-      },
-    ],
-  },
-]
-render(
-  <Select
-    multiple
-    renderValue={(selectedOptions) => (
-      <Select.Value>
-        {selectedOptions.map((option) => option.value).join(', ')}
-      </Select.Value>
-    )}
-  >
-    {options.map((optgroup) => (
-      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
-        {optgroup.options.map((option) => (
-          <Select.Option key={option.label} value={option.label}>
-            <Text marginRight={2}>{option.label}</Text>
-            <Badge size="xs" marginLeft="auto">
-              {option.type}
-            </Badge>
-          </Select.Option>
-        ))}
-      </Select.OptionGroup>
-    ))}
-  </Select>
-)
-```
-
-```jsx live
-render(
-  <Box>
-    <Select multiple>
-      <Select.OptionGroup title="Group 1">
-        <Select.Option value="1">One</Select.Option>
-        <Select.Option value="2">Two</Select.Option>
-        <Select.Option value="3">Three</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup title="Group 2">
-        <Select.Option value="4">Four</Select.Option>
-        <Select.Option value="5">Five</Select.Option>
-        <Select.Option value="6">Six</Select.Option>
-      </Select.OptionGroup>
-    </Select>
-  </Box>
-)
-```
-
-```jsx live
-render(
-  <Box padding={2} backgroundColor="primary">
-    <Select.Inline light>
-      {generateRange(100).map((number) => (
-        <Select.Option key={number} value={number}>
-          {number}
-        </Select.Option>
-      ))}
-    </Select.Inline>
-    <Input.Inline
-      size="xl"
-      fontSize={0}
-      light
-      defaultValue="Editable Heading"
-    />
-  </Box>
-)
-```

package/src/Select/Value.js

@@ -17,4 +17,6 @@ function Value(props) {
   )
 }
 
+Value.displayName = 'Select.Value'
+
 export default Value