@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Group/Group.mdx

@@ -0,0 +1,78 @@
+---
+title: Group
+category: General
+summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
+---
+
+```jsx live
+render(
+  <Group>
+    <Button
+      icon={{ name: 'email' }}
+      tooltip={{ title: 'Email' }}
+      variant="outline"
+    />
+    <Button
+      icon={{ name: 'print' }}
+      tooltip={{ title: 'Print' }}
+      variant="outline"
+    />
+    <Button
+      icon={{ name: 'csv-export' }}
+      tooltip={{ title: 'CSV Export' }}
+      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="info" 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: 'print', color: 'foregroundSecondary' }}
+        tooltip={{ title: 'Print' }}
+      />
+    </Group>
+  </ThemeProvider>
+)
+```
+
+```jsx live
+render(
+  <Group radius={0} size="lg">
+    <Input placeholder="Search things..." />
+    <Button icon={{ name: 'search' }} tooltip={{ title: 'Search' }} />
+  </Group>
+)
+```

package/src/Group/Group.tsx

@@ -0,0 +1,52 @@
+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
+}
+
+export function Group({
+  axis = 'horizontal',
+  childProps,
+  children,
+  radius,
+  ...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'
+
+  return (
+    <StackView axis={axis} spacing={-0.125} {...restProps}>
+      {cloneChildren(children, (child, { firstChild, lastChild }) => ({
+        ...childProps,
+        [startRadius]: firstChild ? radiusValue : 0,
+        [endRadius]: lastChild ? radiusValue : 0,
+      }))}
+    </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,27 @@
+// @flow
+import React from 'react'
+
+import Text from '../Text'
+import { useThemeValue } from '../system'
+
+type Props = {
+  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes` */
+  level?: 1 | 2 | 3 | 4 | 5 | 6,
+}
+
+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,17 @@
+---
+title: Heading
+category: General
+summary: Headings communicate the hierarchy of content to users and assistive technologies.
+---
+
+```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,26 @@
+import React from 'react'
+
+import Text from '../Text'
+import { useThemeValue } from '../system'
+
+function HeadingUppercase({ children, ...restProps }) {
+  const themedProps = useThemeValue('HeadingUppercase')
+  return (
+    <Text
+      as="span"
+      uppercase
+      fontSize={5}
+      fontWeight={700}
+      cursor="default"
+      color="foregroundSecondary"
+      shrink={0}
+      margin={0}
+      {...themedProps}
+      {...restProps}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export default HeadingUppercase

package/src/HeadingUppercase/HeadingUppercase.mdx

@@ -0,0 +1,8 @@
+---
+title: HeadingUppercase
+category: General
+---
+
+```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,57 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+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: 'info' }}
+      tooltip={{ title: 'More info' }}
+      size="xs"
+      theme={false}
+      color="foregroundSecondary"
+      hover={{ backgroundColor: 'highlight' }}
+      onClick={handleClick}
+      data-helper-drawer-toggle
+      {...restProps}
+    />
+  )
+}
+
+function HelperDrawer({ children, id, ...restProps }) {
+  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,18 @@
+---
+title: HelperDrawer
+category: General
+---
+
+```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,63 @@
+// @flow
+import React from 'react'
+
+import Text from '../Text'
+
+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({
+  color = 'primary',
+  marker = markStartsWithMatchSubstring,
+  query,
+  text,
+  ...restProps
+}: Props) {
+  return (
+    <Text as="span" {...restProps}>
+      {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,14 @@
+---
+title: Highlight
+category: General
+---
+
+```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,
+    },
+  ]
+}

package/src/Icon/Icon.js

@@ -0,0 +1,58 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import { useThemeValue } from '../system'
+
+const sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px',
+}
+
+type Props = {
+  /** The name of the icon to render. */
+  name: string,
+
+  /** Sizes the container proportionally. */
+  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string,
+
+  /** Pass any valid color from [colors](/colors). Defaults to `currentColor`. */
+  color?: string,
+}
+
+function Icon({
+  as,
+  name = '',
+  size = 'md',
+  color = 'currentColor',
+  children,
+  ...props
+}: Props) {
+  const themeProps = useThemeValue('icon')
+  const pathData = useThemeValue(['icons', ...name.split('.')])
+  const iconSize = sizes[size] || size
+  const childrenToRender = name ? <path d={pathData} /> : children
+  return (
+    <Box
+      as="svg"
+      viewBox="0 0 16 16"
+      width={iconSize}
+      height={iconSize}
+      basis={iconSize}
+      grow={0}
+      shrink={0}
+      fill={color}
+      fillRule="evenodd"
+      children={childrenToRender}
+      {...themeProps}
+      {...props}
+    />
+  )
+}
+
+export default Icon

package/src/Icon/Icon.mdx

@@ -0,0 +1,78 @@
+---
+title: Icon
+category: Primitives
+summary: Icons are used to help visually communicate actions and information to the end user.
+order: 3
+---
+
+## Single icon sets
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState('')
+  const [appName, setAppName] = React.useState(undefined)
+  const defaultIcons = designSystem.useThemeValue('icons')
+  const iconsToRender = appName ? icons[appName] : defaultIcons
+  return (
+    <StackView grow={1}>
+      <StackView axis="horizontal" spacing={2}>
+        <Select
+          basis={26}
+          emptyValue="Choose icon set"
+          onChange={(event) => setAppName(event.value)}
+        >
+          {appNames.map((appName) => (
+            <Select.Option key={appName} value={appName}>
+              {appName}
+            </Select.Option>
+          ))}
+        </Select>
+        <Input
+          grow={1}
+          autoFocus
+          renderLeft={<Icon name="search" />}
+          placeholder="Search by icon name"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </StackView>
+      <ThemeProvider theme={{ icons: iconsToRender }}>
+        <TileView minCellWidth={16} margin={4} spacing={4}>
+          {matchSorter(Object.keys(iconsToRender), value).map((iconName) => (
+            <StackView key={iconName} alignment="center" spacing={1}>
+              <Icon key={iconName} name={iconName} size="xl" />
+              <Text fontSize={5} color="foregroundSecondary">
+                {iconName}
+              </Text>
+            </StackView>
+          ))}
+        </TileView>
+      </ThemeProvider>
+    </StackView>
+  )
+})
+```
+
+## Grouped icon sets
+
+When using grouped icon sets, you can access deeper path data using dot notation.
+
+To import multiple icons from a library like [@planningcenter/icons](https://github.com/planningcenter/icons) you can [import all exports by using an asterisk](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Import_an_entire_modules_contents):
+
+`import * as calendar from '@planningcenter/icons/paths/calendar'`
+`import * as general from '@planningcenter/icons/paths/general'`
+
+```jsx live
+render(() => {
+  return (
+    <ThemeProvider theme={{ icons }}>
+      <StackView axis="horizontal" spacing={2}>
+        <Icon name="accounts.integrations" size="xl" />
+        <Icon name="calendar.kiosk" size="xl" />
+        <Icon name="general.heart" size="xl" />
+        <Icon name="registrations.bell" size="xl" />
+      </StackView>
+    </ThemeProvider>
+  )
+})
+```

package/src/Icon/Path.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import { useThemeValue } from '../system'
+
+type Props = {
+  /** The name of the icon to render. */
+  name: string,
+
+  /** Pass any valid color from [colors](/colors). */
+  color: string,
+}
+
+function Path({ name = '', color = 'currentColor', ...restProps }: Props) {
+  const pathData = useThemeValue(['icons', ...name.split('.')])
+  return <Box as="path" d={pathData} fill={color} {...restProps} />
+}
+
+export default Path

package/src/Icon/Status.js

@@ -0,0 +1,41 @@
+// @flow
+import React from 'react'
+
+import Icon from './Icon'
+import Path from './Path'
+
+const STATUS_VARIANTS = {
+  confirmed: ['checkmark-circle', 'success'],
+  unconfirmed: ['question-circle', 'warning'],
+  declined: ['close-circle', 'error'],
+}
+
+export type Props = {
+  /** The name of the status icon to render. */
+  variant?: 'confirmed' | 'unconfirmed' | 'declined',
+  /** Uses the filled version of the icon. */
+  variantFilled?: boolean,
+  /** Pass any valid color from [colors](/colors). Defaults to variant color. */
+  color?: string,
+}
+
+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'
+  }
+  return (
+    <Icon name={variantName} color={color || variantColor} {...restProps}>
+      <Path name="radio-0" color={color} />
+    </Icon>
+  )
+}
+
+export default Status

package/src/Icon/index.js

@@ -0,0 +1,6 @@
+import Icon from './Icon'
+import Path from './Path'
+import Status from './Status'
+Icon.Path = Path
+Icon.Status = Status
+export default Icon