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

package/src/GridView/GridView.tsx

@@ -1,150 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import * as React from 'react'
-
-import { BoxProps } from '../Box'
-import splitStyles from '../system/split-styles'
-import { spacingValue } from '../system'
-import { MediaQueries, Variants } from '../index'
-import { useVariant } from '../VariantProvider'
-
-function getTemplateValue(value) {
-  return value
-    ? value.constructor === Array
-      ? value.map((v) => (typeof v === 'number' ? `${v * 8}px` : v)).join(' ')
-      : value
-    : undefined
-}
-
-const gridViewPlugin = {
-  styleProps: [
-    'autoFlow',
-    'autoColumns',
-    'autoRows',
-    'columns',
-    'rows',
-    'alignment',
-    'distribution',
-    'columnSpacing',
-    'rowSpacing',
-    'spacing',
-  ],
-  getStyles({
-    autoFlow,
-    autoColumns,
-    autoRows,
-    columns,
-    rows,
-    alignment,
-    distribution,
-    columnSpacing,
-    rowSpacing,
-    spacing,
-    ...styles
-  }) {
-    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
-      styles.gridAutoFlow = autoFlow
-    }
-    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
-      styles.gridAutoColumns = autoColumns
-    }
-    if (autoRows !== undefined && styles.autoRows === undefined) {
-      styles.gridAutoRows = autoRows
-    }
-    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
-      styles.gridTemplateColumns = getTemplateValue(columns)
-    }
-    if (rows !== undefined && styles.gridTemplateRows === undefined) {
-      styles.gridTemplateRows = getTemplateValue(rows)
-    }
-    if (alignment !== undefined && styles.alignItems === undefined) {
-      styles.alignItems = alignment
-    }
-    if (distribution !== undefined && styles.distribution === undefined) {
-      styles.justifyItems = distribution
-    }
-    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
-      styles.gridColumnGap = spacingValue(columnSpacing)
-    }
-    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
-      styles.gridRowGap = spacingValue(rowSpacing)
-    }
-    if (spacing !== undefined && styles.gap === undefined) {
-      styles.gap = spacingValue(spacing)
-    }
-    return styles
-  },
-}
-
-export type GridViewProps = {
-  /** Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/style-props#grid) to place themselves on the grid. */
-  children?: any
-
-  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
-  as?: any
-
-  /** The algorithm used to implicitly place grid items. Maps to CSS [gridAutoFlow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) property. */
-  autoFlow?: 'column' | 'row' | 'dense'
-
-  /** The size of implicit grid columns. Maps to CSS [gridAutoColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) property. */
-  autoColumns?: string
-
-  /** The size of implicit grid rows. Maps to CSS [gridAutoRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) property. */
-  autoRows?: string
-
-  /** The columns of the grid. Maps to CSS [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) property. */
-  columns?: Array<any> | string
-
-  /**  If true, sets `display: inline-grid`, otherwise it defaults to `display: grid` */
-  inline?: boolean
-
-  /** Gain access to the internal ref */
-  innerRef?: any
-
-  /** The rows of the grid. Maps to CSS [gridTemplateRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) property. */
-  rows?: Array<any> | string
-
-  /** Aligns content in a grid item along the column axis. Maps to CSS [alignItems](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. */
-  alignment?: 'start' | 'end' | 'center' | 'stretch'
-
-  /** The amount of space between children. Maps to CSS [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property. */
-  spacing?: number | string
-
-  /** The amount of space between columns. Maps to CSS [gridColumnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap) property. */
-  columnSpacing?: number | string
-
-  /** The amount of space between rows. Maps to CSS [gridRowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap) property. */
-  rowSpacing?: number | string
-
-  /** Describes styles at various points in time. [Read about variants](/variants).*/
-  variants?: object
-
-  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
-  mediaQueries?: object
-} & BoxProps
-
-type Props = React.RefAttributes<any> &
-  React.HTMLAttributes<any> &
-  GridViewProps &
-  MediaQueries<GridViewProps> &
-  Variants<GridViewProps>
-
-const defaultElement = 'div'
-
-export function GridView({ as, inline, innerRef, ...props }: Props) {
-  const Element: React.ElementType = as || defaultElement
-  const variant = useVariant()
-  return (
-    <Element
-      ref={innerRef}
-      {...splitStyles({
-        display: inline ? 'inline-grid' : 'grid',
-        autoColumns: 'minmax(0, auto)',
-        plugin: gridViewPlugin,
-        variant,
-        ...props,
-      })}
-    />
-  )
-}

package/src/GridView/index.ts

@@ -1,2 +0,0 @@
-export * from './GridView'
-export { GridView as default } from './GridView'

package/src/Group/Group.mdx

@@ -1,79 +0,0 @@
----
-title: Group
-category: General
-summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```jsx live
-render(
-  <Group>
-    <Button
-      icon={{ name: 'general.envelope' }}
-      tooltip={{ title: 'Email' }}
-      variant="outline"
-    />
-    <Button
-      icon={{ name: 'general.printer' }}
-      tooltip={{ title: 'Print' }}
-      variant="outline"
-    />
-    <Button
-      icon={{ name: 'general.thickToBottomArrow' }}
-      tooltip={{ title: 'Download' }}
-      variant="outline"
-    />
-  </Group>
-)
-```
-
-```jsx live
-render(
-  <Group axis="vertical" maxWidth={60} fontSize={4} elevation={1}>
-    <Card axis="horizontal" distribution="space-between" padding={2}>
-      <Text>General Permissions</Text>
-      <Text>Administrator</Text>
-    </Card>
-    <Card
-      axis="horizontal"
-      alignment="center"
-      padding={2}
-      color="grey-8"
-      subdued
-    >
-      <Icon name="general.outlinedInfoCircle" size="sm" color="grey-6" marginRight={2} />
-      <Text>
-        David is an <Link to="#">Organization Administrator</Link> with full
-        Administrator permission everywhere.
-      </Text>
-    </Card>
-    <Card axis="horizontal" distribution="space-between" padding={2}>
-      <Text>File Access:</Text>
-      <Text>Plan, Song, and Media</Text>
-    </Card>
-  </Group>
-)
-```
-
-```jsx live
-render(
-  <ThemeProvider theme={{ group: { radius: 16 } }}>
-    <Group size="md">
-      <Button title="Email" variant="outline" />
-      <Button
-        icon={{ name: 'general.printer', color: 'foregroundSecondary' }}
-        tooltip={{ title: 'Print' }}
-      />
-    </Group>
-  </ThemeProvider>
-)
-```
-
-```jsx live
-render(
-  <Group radius={0} size="lg">
-    <Input placeholder="Search things..." />
-    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'Search' }} />
-  </Group>
-)
-```

package/src/Group/Group.tsx

@@ -1,63 +0,0 @@
-import React from 'react'
-
-import StackView from '../StackView'
-import { useThemeValue } from '../system'
-import { cloneChildren } from '../utils'
-
-export type GroupProps = {
-  /**
-   * The direction the dividing line should span.
-   */
-  axis?: 'horizontal' | 'vertical'
-
-  /**
-   * Props to pass down to all children.
-   */
-  childProps?: Object
-
-  /**
-   * Children elements to be grouped.
-   */
-  children?: React.ReactNode
-
-  /**
-   * The size of the radius.
-   */
-  radius?: number | string
-
-  /**
-   * The amount of space or element that is inserted between each child.
-   */
-  spacing?: number | string | React.ReactNode
-}
-
-export function Group({
-  axis = 'horizontal',
-  childProps,
-  children,
-  radius,
-  spacing,
-  ...restProps
-}: GroupProps) {
-  const themeRadius = useThemeValue('group.radius')
-  const radiusValue = radius ?? themeRadius
-
-  const isHorizontalLayout = axis === 'horizontal'
-  const startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop'
-  const endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom'
-
-  const marginBottom = isHorizontalLayout ? 0 : '-1px'
-  const marginRight = isHorizontalLayout ? '-1px' : 0
-
-  return (
-    <StackView {...{ axis, spacing }} {...restProps}>
-      {cloneChildren(children, (child, { firstChild, lastChild }) => ({
-        ...childProps,
-        [startRadius]: firstChild ? radiusValue : 0,
-        [endRadius]: lastChild ? radiusValue : 0,
-        ...(!spacing && !lastChild && { marginBottom }),
-        ...(!spacing && !lastChild && { marginRight }),
-      }))}
-    </StackView>
-  )
-}

package/src/Group/index.ts

@@ -1,2 +0,0 @@
-export * from './Group'
-export { Group as default } from './Group'

package/src/Heading/Heading.js

@@ -1,31 +0,0 @@
-// @flow
-import React from 'react'
-
-import Text from '../Text'
-import { useThemeValue } from '../system'
-
-type Props = {
-  children?: any,
-
-  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes`
-   * `1 | 2 | 3 | 4 | 5 | 6`
-   */
-  level?: number,
-}
-
-function Heading({ level = 1, ...restProps }: Props) {
-  const headingTheme = useThemeValue('heading')
-  const lineHeights = useThemeValue('lineHeights')
-  const index = level - 1
-  return (
-    <Text
-      as={`h${level}`}
-      fontSize={index}
-      lineHeight={lineHeights[index] + 'px'}
-      {...headingTheme}
-      {...restProps}
-    />
-  )
-}
-
-export default Heading

package/src/Heading/Heading.mdx

@@ -1,18 +0,0 @@
----
-title: Heading
-category: General
-summary: Headings communicate the hierarchy of content to users and assistive technologies.
-propsSummary: Accepts [Text](/text) props.
----
-
-```jsx live
-render(
-  <StackView spacing={2}>
-    {[1, 2, 3, 4, 5, 6].map((level) => (
-      <Heading key={level} level={level}>
-        Heading {level}
-      </Heading>
-    ))}
-  </StackView>
-)
-```

package/src/Heading/index.js

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

package/src/HeadingUppercase/HeadingUppercase.js

@@ -1,30 +0,0 @@
-// @flow
-import React from 'react'
-
-import Text from '../Text'
-import { useThemeProps } from '../system'
-
-type Props = {
-  children?: any,
-}
-
-function HeadingUppercase({ children, ...restProps }: Props) {
-  const themeProps = useThemeProps('HeadingUppercase', restProps)
-  return (
-    <Text
-      as="span"
-      uppercase
-      fontSize={5}
-      fontWeight={700}
-      cursor="default"
-      color="foregroundSecondary"
-      shrink={0}
-      margin={0}
-      {...themeProps}
-    >
-      {children}
-    </Text>
-  )
-}
-
-export default HeadingUppercase

package/src/HeadingUppercase/HeadingUppercase.mdx

@@ -1,10 +0,0 @@
----
-title: HeadingUppercase
-category: General
-propsSummary: Accepts [Text](/text) props.
-themeKey: HeadingUppercase
----
-
-```jsx live
-render(<HeadingUppercase>Heading</HeadingUppercase>)
-```

package/src/HeadingUppercase/index.js

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

package/src/HelperDrawer/HelperDrawer.js

@@ -1,65 +0,0 @@
-// @flow
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import { useCallback, useEffect, useState } from 'react'
-
-import Button from '../Button'
-import Card from '../Card'
-import Collapse from '../Collapse'
-
-const drawerToggles = {}
-
-function Toggle({ drawerId, ...restProps }) {
-  const handleClick = useCallback(
-    (event) => {
-      const drawerToggle = drawerToggles[drawerId]
-      if (drawerToggle) {
-        event.preventDefault()
-        drawerToggle()
-      }
-    },
-    [drawerId]
-  )
-  return (
-    <Button
-      icon={{ name: 'general.outlinedInfoCircle' }}
-      tooltip={{ title: 'More info' }}
-      size="xs"
-      theme={false}
-      color="foregroundSecondary"
-      hover={{ backgroundColor: 'highlight' }}
-      onClick={handleClick}
-      data-helper-drawer-toggle
-      {...restProps}
-    />
-  )
-}
-
-type Props = {
-  children?: any,
-
-  /** Used by the `HelperDrawer.Toggle` to connect to.  */
-  id?: string | number,
-}
-
-function HelperDrawer({ children, id, ...restProps }: Props) {
-  const [open, setOpen] = useState(false)
-  useEffect(() => {
-    drawerToggles[id] = () => setOpen((open) => !open)
-    return () => {
-      delete drawerToggles[id]
-    }
-  }, [id])
-  return (
-    <Collapse open={open} lazy css={{ width: '100%' }}>
-      <Card subdued padding={1} fontSize={4} {...restProps}>
-        {children}
-      </Card>
-    </Collapse>
-  )
-}
-
-HelperDrawer.Toggle = Toggle
-
-export default HelperDrawer

package/src/HelperDrawer/HelperDrawer.mdx

@@ -1,19 +0,0 @@
----
-title: HelperDrawer
-category: General
-propsSummary: Accepts [Text](/text) props.
----
-
-```jsx live
-render(
-  <StackView width={40}>
-    <StackView axis="horizontal" spacing={0.5}>
-      <Heading level={3}>Heading</Heading>
-      <HelperDrawer.Toggle drawerId="my-drawer" />
-    </StackView>
-    <HelperDrawer id="my-drawer" marginTop={0.5}>
-      Drawer that can provide more helpful information about how a UI works.
-    </HelperDrawer>
-  </StackView>
-)
-```

package/src/HelperDrawer/index.js

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

package/src/Highlight/Highlight.js

@@ -1,67 +0,0 @@
-// @flow
-import React from 'react'
-
-import Text from '../Text'
-
-import { useThemeProps } from '../system'
-import { markFuzzyMatchSubstring, markStartsWithMatchSubstring } from './utils'
-
-type Props = {
-  /**
-   * Color of the highlighted text
-   */
-  color: string,
-
-  /**
-   * The algorithm used to mark the text, defaults to FUZZY
-   */
-  marker: () => null,
-
-  /**
-   * The query to search for matches
-   */
-  query: string,
-
-  /**
-   * The full string of text to be displayed
-   */
-  text: string,
-}
-
-/**
- * Highlight or mark letters in a string using a provided query.
- */
-function Highlight({
-  marker = markStartsWithMatchSubstring,
-  query,
-  text,
-  ...restProps
-}: Props) {
-  const { color = 'primary', ...themeProps } = useThemeProps(
-    'highlight',
-    restProps
-  )
-  return (
-    <Text as="span" {...themeProps}>
-      {marker(text, query).map((part, index) => (
-        <Text
-          key={index}
-          inline
-          as={part.highlight ? 'mark' : 'span'}
-          color={part.highlight ? color : undefined}
-          backgroundColor="transparent"
-          fontWeight="inherit"
-          fontSize="inherit"
-        >
-          {part.text}
-        </Text>
-      ))}
-    </Text>
-  )
-}
-
-Highlight.FUZZY = markFuzzyMatchSubstring
-
-Highlight.STARTS_WITH = markStartsWithMatchSubstring
-
-export default Highlight

package/src/Highlight/Highlight.mdx

@@ -1,16 +0,0 @@
----
-title: Highlight
-category: General
-propsSummary: Accepts [Text](/text) props.
-themeKey: highlight
----
-
-```jsx live
-render(() => <Highlight query="Pico" text="Pico Das Robot" />)
-```
-
-```jsx live
-render(() => (
-  <Highlight query="o" text="Robots rule the world" marker={Highlight.FUZZY} />
-))
-```

package/src/Highlight/index.js

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

package/src/Highlight/utils.js

@@ -1,51 +0,0 @@
-// inspired by: https://github.com/enigma-io/boundless/blob/master/packages/boundless-typeahead/index.js
-const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g
-
-function escapeStringRegexp(string) {
-  return string.replace(matchOperatorsRegex, '\\$&')
-}
-
-export function markFuzzyMatchSubstring(text, query) {
-  const fragments = text.split(
-    new RegExp('(' + escapeStringRegexp(query) + ')', 'ig')
-  )
-  const seekValue = query.toLowerCase()
-  const threshold = fragments.length
-  let i = -1
-  while (++i < threshold) {
-    const fragment = fragments[i]
-    fragments[i] = {
-      text: fragment.replace(/ /g, '\u00a0'),
-      highlight: fragment.toLowerCase() === seekValue,
-    }
-  }
-  return fragments
-}
-
-export function markStartsWithMatchSubstring(text, query) {
-  const seekValue = query.toLowerCase()
-  const indexStart = text.toLowerCase().indexOf(seekValue)
-  const indexEnd = indexStart + seekValue.length
-  if (indexStart === -1) {
-    return [
-      {
-        text,
-        highlight: false,
-      },
-    ]
-  }
-  return [
-    {
-      text: text.slice(0, indexStart).replace(/ /g, '\u00a0'),
-      highlight: false,
-    },
-    {
-      text: text.slice(indexStart, indexEnd).replace(/ /g, '\u00a0'),
-      highlight: true,
-    },
-    {
-      text: text.slice(indexEnd).replace(/ /g, '\u00a0'),
-      highlight: false,
-    },
-  ]
-}