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

package/src/GridView/GridView.tsx

@@ -0,0 +1,150 @@
+/** @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

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

package/src/Group/Group.mdx

@@ -0,0 +1,79 @@
+---
+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

@@ -0,0 +1,63 @@
+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

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

package/src/Heading/Heading.js

@@ -0,0 +1,31 @@
+// @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

@@ -0,0 +1,18 @@
+---
+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

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

package/src/HeadingUppercase/HeadingUppercase.js

@@ -0,0 +1,30 @@
+// @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

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

package/src/HeadingUppercase/index.js

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

package/src/HelperDrawer/HelperDrawer.js

@@ -0,0 +1,65 @@
+// @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

@@ -0,0 +1,19 @@
+---
+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

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

package/src/Highlight/Highlight.js

@@ -0,0 +1,67 @@
+// @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

@@ -0,0 +1,16 @@
+---
+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

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

package/src/Highlight/utils.js

@@ -0,0 +1,51 @@
+// 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,
+    },
+  ]
+}