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

package/src/Alert/Alert.tsx

@@ -1,41 +0,0 @@
-import * as React from 'react'
-
-import { MediaQueries } from '../index'
-import { StackView, StackViewProps } from '../StackView'
-
-export type AlertProps = {
-  children?: any
-
-  /** Sets status theme colors. */
-  type?: 'warning' | 'success' | 'error'
-
-  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
-  mediaQueries?: object
-} & StackViewProps
-
-type Props = React.RefAttributes<any> &
-  React.HTMLAttributes<any> &
-  AlertProps &
-  MediaQueries<AlertProps>
-
-export function Alert(props: Props) {
-  const { children, type, ...restProps } = props
-  return (
-    <StackView
-      padding={1}
-      radius={3}
-      // @ts-ignore
-      stroke={`${type}-dark`}
-      strokeAlign="inside"
-      strokeWeight={1}
-      color="dark-9"
-      // @ts-ignore
-      backgroundColor={`${type}-lighter`}
-      {...restProps}
-    >
-      {children}
-    </StackView>
-  )
-}
-
-export default Alert

package/src/Alert/index.ts

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

package/src/Avatar/Avatar.mdx

@@ -1,96 +0,0 @@
----
-title: Avatar
-category: Images
-summary: Avatars are used to show a thumbnail representation of a person.
-propsSummary: Accepts [Box](/box) props.
----
-
-```jsx live
-const statuses = {
-  default: 'grey-5',
-  success: 'green-5',
-  error: 'red-5',
-}
-function App() {
-  const [status, setStatus] = React.useState(null)
-  const users = useUsers(6)
-  return (
-    <StackView alignment="center" spacing={4}>
-      <StackView axis="horizontal" alignment="end" spacing={1}>
-        {['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size, index) => (
-          <StackView key={size} spacing={1} alignment="center">
-            <Avatar
-              size={size}
-              status={statuses[status]}
-              source={users[index] && users[index].picture.medium}
-            />
-            <Text fontSize={5} color="grey">
-              {size}
-            </Text>
-          </StackView>
-        ))}
-      </StackView>
-      <StackView
-        axis="horizontal"
-        alignment="center"
-        padding={1}
-        spacing={1}
-        radius={5}
-        backgroundColor="grey-0"
-      >
-        <Text weight={600}>Status:</Text>
-        <Radio
-          name="status"
-          label="None"
-          checked={status === null}
-          onChange={() => setStatus(null)}
-        />
-        <Radio
-          name="status"
-          label="Default"
-          checked={status === 'default'}
-          onChange={() => setStatus('default')}
-        />
-        <Radio
-          name="status"
-          label="Success"
-          checked={status === 'success'}
-          onChange={() => setStatus('success')}
-        />
-        <Radio
-          name="status"
-          label="Error"
-          checked={status === 'error'}
-          onChange={() => setStatus('error')}
-        />
-      </StackView>
-    </StackView>
-  )
-}
-render(App)
-```
-
-```jsx live
-function App() {
-  const users = useUsers(3)
-  const statuses = ['grey-5', 'success', 'error']
-  return (
-    <Card axis="horizontal" padding={1} spacing={1} maxWidth={40}>
-      {users.map((user, index) => (
-        <Avatar
-          key={user.name}
-          source={user.picture.thumbnail}
-          status={statuses[index]}
-        />
-      ))}
-      <Button
-        title="View household"
-        marginLeft="auto"
-        theme="primary"
-        variant="outline"
-      />
-    </Card>
-  )
-}
-render(App)
-```

package/src/Avatar/Avatar.tsx

@@ -1,65 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-
-const avatarSizes = {
-  xs: 2.5,
-  sm: 3,
-  md: 4.5,
-  lg: 6,
-  xl: 9,
-  xxl: 14,
-}
-
-const borderSizes = {
-  xs: 2,
-  sm: 2,
-  md: 3,
-  lg: 4,
-  xl: 4,
-  xxl: 4,
-}
-
-type AvatarProps = {
-  /**
-   * Controls the size of the avatar.
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
-  /**
-   * The source of the image to display.
-   */
-  source?: string
-  /**
-   * Adds a colored ring with padding around the avatar. Accepts a valid color string.
-   */
-  status?: string
-}
-
-/**
- * Displays a user's avatar in a circle.
- */
-export function Avatar({
-  size = 'md',
-  source,
-  status,
-  ...restProps
-}: AvatarProps) {
-  return (
-    <Box
-      as="img"
-      src={source}
-      width={avatarSizes[size]}
-      height={avatarSizes[size]}
-      flexBasis={avatarSizes[size]}
-      flexShrink={0}
-      flexGrow={0}
-      objectFit="cover"
-      radius="circle"
-      borderColor={status}
-      borderWidth={status ? borderSizes[size] : 0}
-      {...restProps}
-    />
-  )
-}
-
-export default Avatar

package/src/Avatar/index.js

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

package/src/Badge/Badge.js

@@ -1,201 +0,0 @@
-import React, { cloneElement } from 'react'
-
-import Box from '../Box'
-import { getForegroundColor, useBoxSize, useThemeProps } from '../system'
-import StackView from '../StackView'
-import Text from '../Text'
-import { stopPropagationClick } from '../utils'
-
-export type BadgeProps = {
-  children?: any,
-
-  /**
-   * Background color of the badge, sets an accessible text color
-   */
-  color?: string,
-
-  /**
-   * Size of badge
-   */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
-
-  /**
-   * Uses a 1:1 padding ratio, useful for icon only badges.
-   */
-  square?: boolean,
-
-  /**
-   * The text to be rendered
-   */
-  title?: string,
-
-  /**
-   * Allows rendering any content inside the beginning of the badge.
-   */
-  renderLeft?: string | React.ReactNode,
-
-  /**
-   * Allows rendering any content inside the end of the badge.
-   */
-  renderRight?: string | React.ReactNode,
-
-  /**
-   * `onClick={stopPropagationClick(onClick)}`
-   *
-   * Callback passed to `stopPropagationClick` which
-   * adds event.stopPropagation() to a component's onClick event.
-   * Used to prevent element's onClick from bubbling up the tree.
-   */
-  onClick?: Function,
-
-  /**
-   * The size of the radius. (Default is 3px).
-   */
-  radius?: number | string,
-}
-
-function Badge({
-  children,
-  renderLeft,
-  renderRight,
-  onClick,
-  title,
-  ...restProps
-}: BadgeProps) {
-  const {
-    color = {
-      foreground: 'foreground',
-      background: 'surfaceTertiary',
-    },
-    radius = 3,
-    size = 'md',
-    square = false,
-    ...themeProps
-  } = useThemeProps('badge', restProps)
-
-  let badgeProps = {
-    color,
-    radius,
-    size,
-    square,
-    ...themeProps,
-  }
-
-  badgeProps.backgroundColor = color.background || color
-  badgeProps.color = color.foreground || getForegroundColor(color)
-
-  const {
-    boxSize,
-    fontSize,
-    lineHeight,
-    paddingHorizontal,
-    paddingHorizontalDense,
-    paddingVertical,
-  } = useBoxSize(badgeProps.size)
-
-  const textStyle = {
-    as: 'span',
-    fontWeight: 'inherit',
-    lineHeight: 'inherit',
-    color: 'inherit',
-  }
-
-  if (badgeProps.square || badgeProps.radius === 'circle') {
-    badgeProps.width = boxSize
-    badgeProps.height = boxSize
-  }
-
-  if (badgeProps.radius === 'circle') {
-    textStyle.position = 'absolute'
-    textStyle.top = '50%'
-    textStyle.left = '50%'
-    textStyle.transform = 'translate(-50%, -50%)'
-  }
-
-  badgeProps.paddingLeft = renderLeft
-    ? boxSize + 0.5
-    : badgeProps.radius === 'pill'
-    ? paddingHorizontal
-    : paddingHorizontalDense
-  badgeProps.paddingRight = renderRight
-    ? boxSize + 0.5
-    : badgeProps.radius === 'pill'
-    ? paddingHorizontal
-    : paddingHorizontalDense
-
-  // The `square` prop is no longer needed and should not get
-  // passed to `<StackView>` since it's not one of its props
-  // or a standard HTML attribute.
-  delete badgeProps.square
-
-  return (
-    <StackView
-      inline
-      axis="horizontal"
-      alignment="center"
-      distribution="center"
-      fontSize={fontSize}
-      lineHeight={lineHeight}
-      minHeight={boxSize}
-      paddingVertical={paddingVertical}
-      fill="currentColor"
-      textAlign="center"
-      position="relative"
-      cursor="default"
-      outline={0}
-      focus={{ backgroundColor: 'highlightSecondary' }}
-      onClick={stopPropagationClick(onClick)}
-      {...badgeProps}
-    >
-      {renderLeft && (
-        <Box
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          width={boxSize}
-          height={boxSize}
-          position="absolute"
-          top={0}
-          left={0}
-        >
-          {typeof renderLeft === 'string'
-            ? renderLeft
-            : cloneElement(renderLeft, {
-                size:
-                  (renderLeft.props && renderLeft.props.size) ||
-                  badgeProps.size,
-              })}
-        </Box>
-      )}
-
-      {typeof title === 'undefined' ? (
-        children
-      ) : (
-        <Text {...textStyle}>{title}</Text>
-      )}
-
-      {renderRight && (
-        <Box
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          width={boxSize}
-          height={boxSize}
-          position="absolute"
-          top={0}
-          right={0}
-        >
-          {typeof renderRight === 'string'
-            ? renderRight
-            : cloneElement(renderRight, {
-                size:
-                  (renderRight.props && renderRight.props.size) ||
-                  badgeProps.size,
-              })}
-        </Box>
-      )}
-    </StackView>
-  )
-}
-
-export default Badge

package/src/Badge/Badge.mdx

@@ -1,63 +0,0 @@
----
-title: Badge
-category: General
-summary: Badges are used to inform users of the status of a piece of information or of an action that has been taken.
-propsSummary: Accepts [StackView](/stackview) props.
-isParent: true
-themeKey: badge
----
-
-```jsx live
-render(() => <Badge title="Badge" color="primary" />)
-```
-
-```jsx live
-const { boxSizes } = designSystem
-render(
-  <StackView axis="horizontal" spacing={1}>
-    {Object.keys(boxSizes).map((size) => (
-      <Badge
-        key={size}
-        title={size}
-        size={size}
-        radius="circle"
-        color="warning"
-      />
-    ))}
-  </StackView>
-)
-```
-
-```jsx live
-render(() => (
-  <StackView axis="horizontal" spacing={1}>
-    <Badge
-      title="M"
-      size="sm"
-      color={{ foreground: 'primary', background: 'transparent' }}
-      stroke="primary"
-      strokeAlign="inside"
-      strokeWeight={1}
-      radius="circle"
-    />
-    <Badge title="Ab" size="sm" color="primary" radius="circle" />
-    <Badge title="A#-Ab" size="sm" color="primary" radius="pill" />
-  </StackView>
-))
-```
-
-```jsx live
-render(() => (
-  <Badge
-    title="Bass Guitar"
-    renderRight={
-      <Button
-        title="clear"
-        icon={{ name: 'general.x' }}
-        radiusLeft={0}
-        onClick={() => alert('clear badge')}
-      />
-    }
-  />
-))
-```

package/src/Badge/Status.js

@@ -1,101 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import { getColor } from '../system'
-import Icon from '../Icon'
-
-import Badge from './Badge'
-
-const statuses = {
-  error: {
-    color: 'error',
-    icon: 'general.x',
-  },
-  success: {
-    color: 'success',
-    icon: 'general.check',
-  },
-}
-
-type StatusProps = {
-  /**
-   * Title of badge
-   */
-  title: string,
-
-  /**
-   * The size of the badge
-   */
-  size?: string,
-
-  /**
-   * The status of the badge, if nothing passed, nothing will be rendered.
-   */
-  status?: 'error' | 'success',
-
-  /**
-   * When `true`, Sets a light background to use against darker backgrounds.
-   */
-  light?: boolean,
-
-  /**
-   * Called when the status should be set hidden
-   */
-  onClearRequest: () => void,
-}
-
-/**
- * Used to show a reaction to saving user data
- */
-class Status extends Component<StatusProps> {
-  static defaultProps = {
-    title: '',
-    size: 'sm',
-  }
-
-  timeout = null
-
-  componentDidMount() {
-    this.requestClear()
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.status !== this.props.status) {
-      this.requestClear()
-    }
-  }
-
-  requestClear() {
-    if (this.timeout) {
-      clearTimeout(this.timeout)
-    }
-    this.timeout = setTimeout(this.props.onClearRequest, 1800)
-  }
-
-  render() {
-    const { status, light, onClearRequest, ...props } = this.props
-    if (!status) {
-      return null
-    } else {
-      const { color, icon } = statuses[status]
-      return (
-        <Badge
-          paddingRight={1}
-          radius="pill"
-          renderLeft={<Icon name={icon} />}
-          color={
-            light
-              ? { background: 'light', foreground: getColor(color) }
-              : getColor(color)
-          }
-          fontWeight={600}
-          {...props}
-        />
-      )
-    }
-  }
-}
-
-Status.displayName = 'Badge.Status'
-
-export default Status

package/src/Badge/Status.mdx

@@ -1,34 +0,0 @@
----
-title: Badge.Status
-category: General
-propsSummary: Accepts [Badge](/badge) props.
-parent: Badge
----
-
-```jsx live
-render(() => {
-  const [type, setType] = React.useState({})
-  return (
-    <StackView alignment="center" spacing={2}>
-      <StackView axis="horizontal" spacing={1}>
-        {[
-          { title: 'Failed', status: 'error' },
-          { title: 'Saved', status: 'success' },
-        ].map((type) => (
-          <Button
-            key={type.title}
-            title={type.title}
-            onClick={() => setType(type)}
-          />
-        ))}
-      </StackView>
-      <Badge.Status
-        size="xs"
-        status={type.status}
-        title={type.title}
-        onClearRequest={() => setType({})}
-      />
-    </StackView>
-  )
-})
-```

package/src/Badge/index.js

@@ -1,4 +0,0 @@
-import Badge from './Badge'
-import Status from './Status'
-Badge.Status = Status
-export default Badge

package/src/Box/Box.mdx

@@ -1,15 +0,0 @@
----
-title: Box
-category: Primitives
-summary: Box is the primitive component that other components build from.
-propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
-order: 1
----
-
-```jsx live
-render(
-  <Box padding={2} backgroundColor="blue-5" color="white">
-    Box with padding and a background color.
-  </Box>
-)
-```

package/src/Box/Box.tsx

@@ -1,68 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import * as React from 'react'
-
-import { StyleProps, MediaQueries, Variants } from '../index'
-import splitStyles from '../system/split-styles'
-import { useVariant } from '../VariantProvider'
-
-export type BoxProps = {
-  children?: any
-  /**
-   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
-   */
-  as?: any
-
-  /**
-   * Gain access to the internal ref
-   */
-  innerRef?: any
-
-  /**
-   * If true, sets `display: inline-block`, otherwise it defaults to `display: block`
-   */
-  inline?: boolean
-
-  /**
-   * Controls display property. If `false` sets `display: none`, otherwise defaults to initial display value.
-   */
-  visible?: boolean
-
-  /** 
-  * Describes styles at various points in time. [Read about variants](/variants). 
-  */
-   variants?: object
-
-   /** 
-   * Describes props at different breakpoints. [Read about mediaQueries](/responsive). 
-   */
-   mediaQueries?: object
-} & StyleProps
-
-type Props = React.RefAttributes<any> &
-  React.HTMLAttributes<any> &
-  React.ImgHTMLAttributes<any> &
-  BoxProps &
-  MediaQueries<BoxProps> &
-  Variants<BoxProps>
-
-const defaultElement = 'div'
-
-/**
- * Box is the base component that everything builds from. It is responsible for processing all style props.
- */
-export function Box({ as, innerRef, inline, ...props }: Props) {
-  const Element: React.ElementType = as || defaultElement
-  const variant = useVariant()
-  return (
-    <Element
-      ref={innerRef}
-      {...splitStyles({
-        display: inline ? 'inline-block' : 'block',
-        variant,
-        ...props,
-      })}
-    />
-  )
-}

package/src/Box/index.ts

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