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

package/dist/types/Badge/Status.d.ts

@@ -0,0 +1,27 @@
+export declare type StatusProps = {
+    /**
+     * When `true`, Sets a light background to use against darker backgrounds.
+     */
+    light?: boolean;
+    /**
+     * Called when the status should be set hidden
+     */
+    onClearRequest: () => void;
+    /**
+     * The size of the badge
+     */
+    size?: string;
+    /**
+     * The status of the badge, if nothing passed, nothing will be rendered.
+     */
+    status?: 'error' | 'success';
+    /**
+     * Title of badge
+     */
+    title: string;
+};
+declare const Status: {
+    ({ light, onClearRequest, size, status, title, ...restProps }: StatusProps): JSX.Element;
+    displayName: string;
+};
+export default Status;

package/dist/types/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BoxSizes, MediaQueries } from '../index';
 import { StackViewProps } from '../StackView';
-declare type ButtonProps = {
+export declare type ButtonProps = {
     children?: any;
     /**
      * "Soft disables" button by adding an `aria-disabled` attribute and preventing `onClick` and `keyDown` events for "space" / "enter". This approach allows composing components (such as `Tooltip`) to still bubble up their events, while ensuring that clicking the button or submitting a form is prevented.
@@ -96,7 +96,9 @@ export declare namespace Button {
             close: any;
         }) => React.ReactNode);
         size?: "xs" | "sm" | "md" | "lg";
-        onClose: () => void;
+        onClose: () => void; /**
+         * Pass styles for when the button is active.
+         */
         onOpen: () => void;
     } & {
         children?: any;

package/dist/types/Modal/Modal.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export declare type ModalProps = {
+    children?: React.ReactNode;
+    /**
+     * Close the modal when clicking outside of it.
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Called by either clicking on the internal [`<Scrim/>`](/scrim) component or
+     * by pressing the `Escape` key.
+     */
+    onRequestClose?: () => null;
+    /**
+     * Determines whether the modal is open or not.
+     */
+    open: boolean;
+    /**
+     * Props passed to the internal [`<Scrim/>`](/scrim) component.
+     */
+    scrimProps?: Record<string, any>;
+};
+declare const Modal: ({ children, closeOnOutsideClick, onRequestClose, open, ...restProps }: ModalProps) => JSX.Element;
+export default Modal;

package/dist/types/NumberField/NumberField.d.ts

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+declare type Props = {
+    /**
+     * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
+    as?: any;
+    /**
+     * Add controls to increment/decrement the value
+     */
+    hasControls?: boolean;
+    /**
+     * An array of keys to ignore when pushed.
+     * ex: ["ArrowUp", "ArrowDown"].
+     */
+    ignoredKeys: string[];
+    /**
+     * Maximum number that can be entered.
+     */
+    max: number;
+    /**
+     * Minimum number that can be entered.
+     */
+    min: number;
+    /**
+     * Called when the input's onInput is called with a valid value
+     * or when the arrow keys are used to increment/decrement the value.
+     * Please note traditional onInput/onChange events are not supported
+     * since this component takes control of them.
+     */
+    onChange: (value: string) => null;
+    /**
+     * Maps to the input's `onBlur` prop.
+     */
+    onBlur?: () => null;
+    onKeyDown?: Function;
+    /**
+     * The amount of 0s to pad the value with.
+     */
+    pad: number;
+    /**
+     * Forces the input text to stay fully selected while interacting with it.
+     */
+    highlightOnInteraction: boolean;
+    /**
+     * String to display when value is empty.
+     */
+    placeholder: string;
+    /**
+     * The amount to step up/down from the value when using the arrow keys
+     * defaults to `1`
+     */
+    step: number;
+    /**
+     * The value of the input.
+     */
+    value: number;
+    autoWidth: boolean;
+    moveFocusOnMax: boolean;
+};
+declare class NumberField extends Component<Props> {
+    static defaultProps: {
+        as: any;
+        hasControls: boolean;
+        ignoredKeys: any[];
+        min: number;
+        max: number;
+        step: number;
+        moveFocusOnMax: boolean;
+    };
+    firstTouch: boolean;
+    getParsedValues: (value: any) => {
+        value: number;
+        minValue: number;
+        maxValue: number;
+    };
+    clampValue: (valueToCheck: any) => number;
+    isValueValid: (valueToCheck: any) => boolean;
+    changeIfValid: (value: any) => void;
+    handleBlur: (event: any) => void;
+    stepValue: (baseValue: any, step: any) => void;
+    incrementValue: () => void;
+    decrementValue: () => void;
+    handleKeyDown: (event: any) => void;
+    handleInput: (event: any) => void;
+    getAutoWidthValue(value: any): any;
+    renderInput(restProps: any): React.CElement<any, React.Component<any, any, any>>;
+    renderInputWithControls(restProps: any): JSX.Element;
+    render(): JSX.Element;
+}
+export default NumberField;

package/dist/types/Progress/Progress.d.ts

@@ -0,0 +1,12 @@
+export declare type Props = {
+    /**
+     * The current value of the progress bar.
+     */
+    value?: number;
+    /**
+     * Active color of the progress bar.
+     */
+    activeColor?: string;
+};
+declare const Progress: ({ value, ...restProps }: Props) => JSX.Element;
+export default Progress;

package/dist/types/Radio/Radio.d.ts

@@ -0,0 +1,44 @@
+export declare type RadioProps = {
+    /**
+     * Disables the radio component.
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the radio should use an internal label or not.
+     */
+    label?: string;
+    /**
+     * Connects input to its corresponding label's `htmlFor`.
+     */
+    id?: string | number;
+    /**
+     * Checks the radio.
+     */
+    checked?: boolean;
+    /**
+     * Maps to the internal input's `name` prop.
+     */
+    name?: string;
+    /**
+     * Maps to the internal input's `value` prop.
+     */
+    value?: any;
+    /**
+     * Determines the size of the radio based on a [scale](http://google.com).
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Maps to the internal input's `onChange` prop.
+     */
+    onChange?: () => null;
+    /**
+     * Maps to the internal input's `onFocus` prop.
+     */
+    onFocus?: () => null;
+    /**
+     * Maps to the internal input's `onBlur` prop.
+     */
+    onBlur?: () => null;
+};
+declare const Radio: ({ checked, disabled, id, label, name, onBlur, onChange, onFocus, size, value, ...restProps }: RadioProps) => JSX.Element;
+export default Radio;

package/dist/types/Wizard/Wizard.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ButtonProps } from '../Button/Button';
+export declare type Step = {
+    name: string;
+    valid?: (payload: Record<string, any>) => boolean;
+};
+export declare type WizardProps = {
+    /**
+     * Pass props to the back button.
+     */
+    backButtonProps?: ButtonProps;
+    /**
+     * Pass props to all Button components in the footer.
+     */
+    buttonProps?: ButtonProps;
+    /**
+     * Pass props to the cancel button.
+     */
+    cancelButtonProps?: ButtonProps;
+    /**
+     * The content of the component.
+     */
+    children: React.ReactNode;
+    /**
+     * Pass props to the Button components.
+     */
+    footerProps?: ButtonProps;
+    /**
+     * The initial payload state.
+     */
+    initialPayload?: Record<string, any>;
+    /**
+     * Pass props to the next button.
+     */
+    nextButtonProps?: ButtonProps;
+    /**
+     * Determines what the next button title displays.
+     */
+    nextButtonTitle?: (props: {
+        activeStepIndex: number;
+        steps: Step[];
+        totalSteps: number;
+    }) => string;
+    /**
+     * Creates a cancel button for canceling a process from the first step.
+     */
+    onCancel?: () => void;
+    /**
+     * Called when the `Done` button is pressed on the last view. Passes back the `payload` state
+     * as well as an option `complete` callback to revert the button spinner back to normal.
+     */
+    onSubmit?: (payload: Record<string, any>, complete: () => void) => void;
+    /**
+     * Provide a custom progress component to render in place of `StepperProgress`.
+     */
+    renderProgress?: (props: {
+        activeStepIndex: number;
+        steps: Step[];
+        totalSteps: number;
+    }) => React.ReactNode;
+};
+declare const Wizard: (props: WizardProps) => JSX.Element;
+export default Wizard;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.2",
+  "version": "2.10.0-rc.1",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",
@@ -61,6 +61,8 @@
     "@types/jest": "^26.0.20",
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
+    "@typescript-eslint/eslint-plugin": "^6.9.1",
+    "@typescript-eslint/parser": "^6.9.1",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
     "dotenv": "^8.2.0",

package/src/Badge/Badge.js

@@ -106,9 +106,13 @@ function Badge({
   }
 
   if (badgeProps.radius === 'circle') {
+    // @ts-ignore error TS2339: Property 'position' does not exist on type ...
     textStyle.position = 'absolute'
+    // @ts-ignore error TS2339: Property 'top' does not exist on type ...
     textStyle.top = '50%'
+    // @ts-ignore error TS2339: Property 'left' does not exist on type ...
     textStyle.left = '50%'
+    // @ts-ignore error TS2339: Property 'transform' does not exist on type ...
     textStyle.transform = 'translate(-50%, -50%)'
   }
 
@@ -160,8 +164,10 @@ function Badge({
         >
           {typeof renderLeft === 'string'
             ? renderLeft
+            // @ts-ignore error TS2769: No overload matches this call.
             : cloneElement(renderLeft, {
                 size:
+                  // @ts-ignore error TS2339: Property 'props' does not exist on type ...
                   (renderLeft.props && renderLeft.props.size) ||
                   badgeProps.size,
               })}
@@ -187,8 +193,10 @@ function Badge({
         >
           {typeof renderRight === 'string'
             ? renderRight
+            // @ts-ignore error TS2769: No overload matches this call.
             : cloneElement(renderRight, {
                 size:
+                  // @ts-ignore error TS2339: Property 'props' does not exist on type ...
                   (renderRight.props && renderRight.props.size) ||
                   badgeProps.size,
               })}

package/src/Badge/Status.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } 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' },
+}
+
+export type StatusProps = {
+  /**
+   * When `true`, Sets a light background to use against darker backgrounds.
+   */
+  light?: boolean
+
+  /**
+   * Called when the status should be set hidden
+   */
+  onClearRequest: () => void
+
+  /**
+   * The size of the badge
+   */
+  size?: string
+
+  /**
+   * The status of the badge, if nothing passed, nothing will be rendered.
+   */
+  status?: 'error' | 'success'
+
+  /**
+   * Title of badge
+   */
+  title: string
+}
+
+const Status = ({
+  light,
+  onClearRequest,
+  size = 'sm',
+  status,
+  title,
+  ...restProps
+}: StatusProps): JSX.Element => {
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    const requestClear = () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+      setTimeoutId(setTimeout(onClearRequest, 1800))
+    }
+
+    requestClear()
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId)
+      }
+    }
+  }, [onClearRequest, status, timeoutId])
+
+  if (!status) {
+    return null
+  } else {
+    const { color, icon } = statuses[status]
+    return (
+      <Badge
+        color={
+          light
+            ? { background: 'light', foreground: getColor(color) }
+            : getColor(color)
+        }
+        fontWeight={600}
+        paddingRight={1}
+        radius="pill"
+        renderLeft={<Icon name={icon} />}
+        {...{ size, title }}
+        {...restProps}
+      />
+    )
+  }
+}
+
+// @ts-ignore error TS2339: Property 'displayName' does not exist on type 'typeof Status'.
+Status.displayName = 'Badge.Status'
+
+export default Status

package/src/Button/Button.tsx

@@ -12,7 +12,7 @@ import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
 
 import Input from './Input'
 
-type ButtonProps = {
+export type ButtonProps = {
   children?: any
 
   /**
@@ -164,7 +164,7 @@ export function Button({
     inline: true,
     lineHeight,
     position: 'relative',
-    radius: 3,
+    radius: 4,
     strokeAlign: 'inside',
     strokeWeight: 1,
     userSelect: 'none',

package/src/Calendar/Day.js

@@ -46,18 +46,26 @@ export type PublicProps = {
 
 const Day = ({
   backgroundColor,
+  // @ts-ignore error TS2339: Property 'cellSize' does not exist on type 'PublicProps'.
   cellSize,
   children,
   color,
+  // @ts-ignore error TS2339: Property 'date' does not exist on type 'PublicProps'.
   date,
   disabled,
   fontSize,
   fontWeight,
+  // @ts-ignore error TS2339: Property 'isSameMonth' does not exist on type 'PublicProps'.
   inSameMonth,
+  // @ts-ignore error TS2339: Property 'isMinDate' does not exist on type 'PublicProps'.
   isMinDate,
+  // @ts-ignore error TS2339: Property 'isMaxDate' does not exist on type 'PublicProps'.
   isMaxDate,
+  // @ts-ignore error TS2339: Property 'isSelected' does not exist on type 'PublicProps'.
   isSelected,
+  // @ts-ignore error TS2339: Property 'isToday' does not exist on type 'PublicProps'.
   isToday,
+  // @ts-ignore error TS2339: Property 'selectDate' does not exist on type 'PublicProps'.
   selectDate,
   selectedColor = 'primary',
   statusColor = 'transparent',
@@ -69,6 +77,8 @@ const Day = ({
     !disabled &&
     !isMinDate &&
     !isMaxDate &&
+    // @ts-ignore error TS2339: Property 'onClick' does not exist on type '{}'.
+    // @ts-ignore error TS2339: Property 'onMouseDown' does not exist on type '{}'.
     (selectDate || restProps.onClick || restProps.onMouseDown)
   return (
     <StackView
@@ -88,6 +98,7 @@ const Day = ({
         height="100%"
         alignment="center"
         distribution="center"
+        // @ts-ignore error TS2322: Type '"" | "none"' is not assignable to type 'PointerEvents'.
         pointerEvents={(disabled || isMinDate || isMaxDate) && 'none'}
         hover={
           affordance && {

package/src/Combobox/ComboboxPopover.js

@@ -27,6 +27,7 @@ class ComboboxPopover extends Component<Props> {
   }
 
   state = {
+    // @ts-ignore error TS2339: Property 'defaultOpen' does not exist on type 'Readonly<Props>'.
     isPopoverOpen: this.props.defaultOpen || false,
   }
 
@@ -41,6 +42,7 @@ class ComboboxPopover extends Component<Props> {
   componentDidUpdate(lastProps) {
     if (
       lastProps.disabled !== lastProps.disabled &&
+      // @ts-ignore error TS2339: Property 'disabled' does not exist on type 'Readonly<Props>'.
       this.props.disabled === true
     ) {
       this.closePopover()
@@ -48,7 +50,9 @@ class ComboboxPopover extends Component<Props> {
     const isComboboxFocused = document.activeElement === this.inputNode
     if (
       isComboboxFocused &&
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
       lastProps.value !== this.props.value &&
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
       this.props.value.length > 0 &&
       !this.state.isPopoverOpen
     ) {
@@ -63,15 +67,18 @@ class ComboboxPopover extends Component<Props> {
   }
 
   setItemListRef = (component) => {
+    // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
     this.itemList = component
   }
 
   setInputRef = (component) => {
+    // @ts-ignore error TS2339: Property 'input' does not exist on type 'ComboboxPopover'.
     this.input = component
   }
 
   openPopover = () => {
     this.setState({ isPopoverOpen: true }, () => {
+      // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
       this.itemList.setHighlightedIndex(0, { maybeScrollIntoView: false })
     })
   }
@@ -80,6 +87,7 @@ class ComboboxPopover extends Component<Props> {
     // push to next event stack because Popover events are messed up :(
     this.closeRequestId = requestAnimationFrame(() => {
       this.setState({ isPopoverOpen: false }, () => {
+        // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
         this.itemList.clearHighlightedIndex()
       })
     })
@@ -88,7 +96,9 @@ class ComboboxPopover extends Component<Props> {
   handleBlur = (event) => {
     this.closePopover()
     this.inputTouched = false
+    // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
     if (this.props.onBlur) {
+      // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
       this.props.onBlur(event)
     }
   }
@@ -97,30 +107,47 @@ class ComboboxPopover extends Component<Props> {
     if (this.props.closeOnSelect) {
       this.closePopover()
     }
+    // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
     if (this.props.onSelect) {
+      // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
       this.props.onSelect(event)
     }
   }
 
   render() {
     const {
+      // @ts-ignore error TS2339: Property 'children' does not exist on type 'Readonly<Props>'.
       children,
+      // @ts-ignore error TS2339: Property 'closeButton' does not exist on type 'Readonly<Props>'.
       closeButton,
       closeOnSelect,
+      // @ts-ignore error TS2339: Property 'disabled' does not exist on type 'Readonly<Props>'.
       disabled,
+      // @ts-ignore error TS2339: Property 'dropdownButton' does not exist on type 'Readonly<Props>'.
       dropdownButton,
+      // @ts-ignore error TS2339: Property 'innerRef' does not exist on type 'Readonly<Props>'.
       innerRef,
+      // @ts-ignore error TS2339: Property 'defaultOpen' does not exist on type 'Readonly<Props>'.
       defaultOpen,
+      // @ts-ignore error TS2339: Property 'lockScrollWhileOpen' does not exist on type 'Readonly<Props>'.
       lockScrollWhileOpen,
+      // @ts-ignore error TS2339: Property 'onClear' does not exist on type 'Readonly<Props>'.
       onClear,
+      // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
       onBlur,
+      // @ts-ignore error TS2339: Property 'onFocus' does not exist on type 'Readonly<Props>'.
       onFocus,
+      // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
       onSelect,
       openOnFocus,
+      // @ts-ignore error TS2339: Property 'placement' does not exist on type 'Readonly<Props>'.
       placement,
       popoverProps,
+      // @ts-ignore error TS2339: Property 'relativeTo' does not exist on type 'Readonly<Props>'.
       relativeTo,
+      // @ts-ignore error TS2339: Property 'renderTo' does not exist on type 'Readonly<Props>'.
       renderTo,
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
       value,
       ...restProps
     } = this.props
@@ -138,6 +165,7 @@ class ComboboxPopover extends Component<Props> {
                 {...popoverProps}
                 as={Menu}
                 ref={(component) => {
+                  // @ts-ignore error TS2339: Property 'popover' does not exist on type 'ComboboxPopover'.
                   this.popover = component
                 }}
                 innerRef={(node) => {
@@ -152,6 +180,7 @@ class ComboboxPopover extends Component<Props> {
                 renderTo={renderTo}
                 open={isPopoverOpen}
                 onBlur={requestBlur}
+                // @ts-ignore error TS2322: Type '(anchorProps: any) => Element' is not assignable to type 'ReactElement<...
                 anchorElement={(anchorProps) => (
                   <ComboboxInput
                     ref={this.setInputRef}
@@ -209,6 +238,7 @@ class ComboboxPopover extends Component<Props> {
                             } else {
                               this.openPopover()
                             }
+                            // @ts-ignore error TS2339: Property 'input' does not exist on type 'ComboboxPopover'.
                             this.input.focus()
                           }}
                         />

package/src/Input/Inline.js

@@ -51,7 +51,7 @@ function Inline({
       paddingHorizontal={0.5}
       paddingVertical={0}
       placeholderColor={light ? 'light-5' : 'foregroundTertiary'}
-      radius={3}
+      radius={4}
       stroke={undefined}
       {...restProps}
     />

package/src/Input/InputBox.js

@@ -389,7 +389,7 @@ class InputBox extends Component<InputBoxProps> {
           alignment={StackView.CENTER}
           shrink={0}
           minHeight={boxSize}
-          radius={3}
+          radius={4}
           position="relative"
           cursor="text"
           outline={0}