@planningcenter/tapestry-react 2.0.1-rc.0 → 2.1.0

package/src/Select/Value.mdx

@@ -0,0 +1,67 @@
+---
+title: Select.Value
+category: Forms
+summary: Composes [Text](/text) and allows for styling selected values within the [Select](/select). (Out-of-the-box it provides truncation.)
+propsSummary: Accepts [Text](/text) props.
+parent: Select
+---
+
+```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>
+    )}
+    style={{ maxWidth: 400 }}
+  >
+    {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>
+)
+```

package/src/Select/constants.js

@@ -1,3 +1,3 @@
 export const SELECT_DISPLAY_NAME = 'Select'
-export const OPTIONGROUP_DISPLAY_NAME = 'OptionGroup'
-export const OPTION_DISPLAY_NAME = 'Option'
+export const OPTIONGROUP_DISPLAY_NAME = 'Select.OptionGroup'
+export const OPTION_DISPLAY_NAME = 'Select.Option'

package/src/Sidebar/Sidebar.js

@@ -1,7 +1,7 @@
 // @flow
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import { Children } from 'react'
 import StickyBox from 'react-sticky-box'
 

package/src/Spinner/Spinner.mdx

@@ -2,6 +2,7 @@
 title: Spinner
 category: Indicators
 propsSummary: Accepts [Box](/box) props.
+themeKey: spinner
 ---
 
 ```jsx live

package/src/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 import { Box } from '../Box'
 import { useThemeProps } from '../system'

package/src/StackView/StackView.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/StepperField/StepperField.mdx

@@ -3,6 +3,7 @@ title: StepperField
 category: Forms
 summary: Number input used to collect numeric information from users with increment/decrement buttons.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: stepperField
 ---
 
 ```jsx live

package/src/StepperProgress/StepperProgress.mdx

@@ -3,6 +3,7 @@ title: StepperProgress
 category: Indicators
 summary: Use to convey progress through consecutive steps. Composes [GridView](/gridview).
 propsSummary: Accepts [GridView](/gridview) props.
+themeKey: stepperProgress
 ---
 
 ```jsx live

package/src/Table/Table.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { PureComponent, Children, Fragment } from 'react'
-import { Global } from '@emotion/core'
+import { Global } from '@emotion/react'
 import { camelCase, snakeCase } from 'lodash'
 
 import type { PaginationProps } from '../Pagination/Pagination'

package/src/Text/Text.mdx

@@ -3,6 +3,7 @@ title: Text
 category: Primitives
 summary: Text is a primitive component that typography components build from.
 propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
+themeKey: text
 order: 2
 ---
 

package/src/Text/Text.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/ThemeProvider/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import React, { useLayoutEffect, useState } from 'react'
-import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
-import { CacheProvider } from '@emotion/core'
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import { CacheProvider } from '@emotion/react'
 import createCache from '@emotion/cache'
 import { merge } from 'lodash'
 
@@ -14,17 +14,6 @@ const STORAGE_KEY = 'tapestry-react-theme'
 
 export const cache = createCache({
   key: 'tapestry-react',
-  prefix: (key) => {
-    switch (key) {
-      case 'appearance':
-      case 'user-select':
-      case 'position':
-      case ':placeholder':
-        return true
-      default:
-        return false
-    }
-  },
 })
 
 export const themeStorage = {

package/src/TileView/TileView.tsx

@@ -1,6 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { jsx } from '@emotion/core'
+import { jsx } from '@emotion/react'
 import * as React from 'react'
 
 import { BoxProps } from '../Box'

package/src/system/README.md

@@ -41,7 +41,7 @@ function Box(props) {
 
 <small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
 
-The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/tapestry-react/responsive) and [Variants](https://ministrycentered.github.io/tapestry-react/variants) for more information and examples.
+The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://planningcenter.github.io/tapestry-react/responsive) and [Variants](https://planningcenter.github.io/tapestry-react/variants) for more information and examples.
 
 ### Plugins
 

package/src/system/box-sizes.js

@@ -18,7 +18,7 @@ export const boxSizes = {
     radius: 3,
   },
   md: {
-    boxSize: 4,
+    boxSize: 4.5,
     fontSize: 4,
     lineHeight: 3,
     paddingHorizontalDense: 1,
@@ -27,7 +27,7 @@ export const boxSizes = {
     radius: 4,
   },
   lg: {
-    boxSize: 5,
+    boxSize: 6,
     fontSize: 3,
     lineHeight: 4,
     paddingHorizontalDense: 1,
@@ -36,7 +36,7 @@ export const boxSizes = {
     radius: 5,
   },
   xl: {
-    boxSize: 8,
+    boxSize: 9,
     fontSize: 1,
     lineHeight: 5,
     paddingHorizontalDense: 2,
@@ -44,6 +44,9 @@ export const boxSizes = {
     paddingVertical: 1.5,
     radius: 6,
   },
+  xxl: {
+    boxSize: 14,
+  },
 }
 
 export function getBoxSize(size = 'md') {

package/src/system/use-css.js

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { useTheme } from 'emotion-theming'
+import { useTheme } from '@emotion/react'
 
 import css from './cxs'
 import { parseCssStyles } from './parse-styles'

package/src/system/utils.js

@@ -1,5 +1,5 @@
 import { useContext, useCallback } from 'react'
-import { ThemeContext } from '@emotion/core'
+import { ThemeContext } from '@emotion/react'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
 import { get } from 'lodash'
 

package/src/Pagination/Pagination.js

@@ -1,145 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import Box from '../Box'
-import Button from '../Button'
-import StackView from '../StackView'
-import { range } from '../utils'
-
-function getVisiblePages(currentPage, totalPages, visiblePages) {
-  const start = Math.max(
-    1,
-    Math.min(totalPages - visiblePages + 1, 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,
-}
-
-class Pagination extends Component<PaginationProps> {
-  static defaultProps = {
-    activeColor: 'primary',
-    onPageChange: () => null,
-    visiblePages: 8,
-    totalPages: 0,
-  }
-
-  renderGap(key) {
-    return <Box key={key} userSelect="none" cursor="default" children="…" />
-  }
-
-  renderPageLink(number) {
-    const isActive = this.props.currentPage === number
-    return (
-      <Button
-        key={number}
-        onClick={this.props.onPageChange.bind(null, number)}
-        theme={isActive ? this.props.activeColor : undefined}
-        variant={isActive ? 'fill' : 'naked'}
-        title={number}
-        shrink={0}
-        square
-      />
-    )
-  }
-
-  renderPageLinks() {
-    const pages = getVisiblePages(
-      this.props.currentPage,
-      this.props.totalPages,
-      this.props.visiblePages
-    )
-    return pages.map((page, index) =>
-      page === '...' ? this.renderGap(page + index) : this.renderPageLink(page)
-    )
-  }
-
-  render() {
-    const {
-      activeColor,
-      currentPage,
-      totalPages,
-      visiblePages,
-      onPageChange,
-      ...restProps
-    } = this.props
-
-    if (totalPages <= 1) {
-      return null
-    }
-
-    return (
-      <StackView
-        axis="horizontal"
-        alignment="center"
-        distribution="center"
-        width="100%"
-        paddingVertical={1}
-        shrink={0}
-        overflow="auto"
-        {...restProps}
-      >
-        <Button
-          onClick={onPageChange.bind(null, currentPage - 1)}
-          disabled={currentPage === 1}
-          icon={{ name: 'general.leftChevron', size: 'xs' }}
-          tooltip={{ title: 'Previous Page' }}
-          variant="naked"
-          shrink={0}
-        />
-        {this.renderPageLinks()}
-        <Button
-          onClick={onPageChange.bind(null, currentPage + 1)}
-          disabled={currentPage === totalPages}
-          icon={{ name: 'general.rightChevron', size: 'xs' }}
-          tooltip={{ title: 'Next Page' }}
-          variant="naked"
-          shrink={0}
-        />
-      </StackView>
-    )
-  }
-}
-
-export default Pagination