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

package/src/SegmentedControl/SegmentedControl.js

@@ -1,119 +0,0 @@
-// @flow
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useState,
-  useEffect,
-} from 'react'
-
-import Button from '../Button'
-import InputBox from '../Input/InputBox'
-import { navigateSize } from '../system'
-import { useThemeProps } from '../system'
-
-type Props = {
-  activeSegment?: string,
-  color?: string,
-  onChange: Function,
-  segments: Array<any>,
-  segmentBasis?: number | string,
-  size?: 'xs' | 'sm' | 'md' | 'lg',
-}
-
-function SegmentedControl(props: Props, ref) {
-  const getActiveIndex = useCallback((props) => {
-    return props.activeSegment === undefined
-      ? 0
-      : props.segments.indexOf(props.activeSegment)
-  })
-  const inputBoxRef = useRef(null)
-  const {
-    activeSegment,
-    color = 'primary',
-    disabled,
-    onChange,
-    segments,
-    segmentBasis = 'auto',
-    size = 'md',
-    ...restProps
-  } = useThemeProps('segmentedControl', props)
-  const [activeIndex, setActiveIndex] = useState(getActiveIndex(props))
-
-  const handleKeyDown = useCallback((event) => {
-    if (onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
-      const amountToMove = event.key === 'ArrowLeft' ? -1 : 1
-      const nextIndex = activeIndex + amountToMove
-      event.preventDefault()
-      changeSegment(nextIndex)
-    }
-  })
-
-  const changeSegment = useCallback((index) => {
-    const nextSegment = segments[index]
-    if (nextSegment) {
-      if (activeSegment === undefined) {
-        setActiveIndex(index)
-      }
-      if (onChange) {
-        onChange(nextSegment.title || nextSegment)
-      }
-      focus(index)
-    }
-  })
-
-  const focus = useCallback((index) => inputBoxRef.current.focus(index))
-  const blur = useCallback(() => inputBoxRef.current.blur())
-
-  useImperativeHandle(ref, () => ({
-    focus,
-    blur,
-  }))
-
-  useEffect(() => {
-    const newActiveIndex = getActiveIndex(props)
-    if (activeIndex !== newActiveIndex) {
-      setActiveIndex(newActiveIndex)
-    }
-  }, [activeSegment])
-
-  return (
-    <InputBox
-      ref={inputBoxRef}
-      size={size}
-      includeSpacing
-      evenPadding
-      role="group"
-      cursor="initial"
-      disabled={disabled}
-      {...restProps}
-    >
-      {segments.map((segment, segmentIndex) => {
-        const { title, ...restSegmentProps } = segment
-        const buttonProps = title ? restSegmentProps : {}
-        return (
-          <Button
-            key={segmentIndex}
-            grow={1}
-            size={navigateSize(size, -1)}
-            basis={segmentBasis}
-            theme={segmentIndex === activeIndex ? color : undefined}
-            variant={segmentIndex === activeIndex ? 'fill' : 'naked'}
-            title={title || segment}
-            disabled={disabled}
-            onKeyDown={handleKeyDown}
-            onClick={() =>
-              segmentIndex !== activeIndex && changeSegment(segmentIndex)
-            }
-            {...buttonProps}
-          />
-        )
-      })}
-    </InputBox>
-  )
-}
-
-SegmentedControl = forwardRef(SegmentedControl)
-
-export default SegmentedControl

package/src/SegmentedControl/SegmentedControl.mdx

@@ -1,72 +0,0 @@
----
-title: SegmentedControl
-category: General
-propsSummary: Accepts [Input.Inputbox](/input.inputbox) props.
-themeKey: segmentedControl
----
-
-```jsx live
-render(
-  <StackView axis="horizontal" alignment="start" spacing={1}>
-    <SegmentedControl
-      size="sm"
-      segments={['One', 'Two', 'Three']}
-      onChange={(selected) => console.log(selected)}
-    />
-    <SegmentedControl
-      size="md"
-      segments={['One', 'Two', 'Three']}
-      onChange={(selected) => console.log(selected)}
-    />
-    <SegmentedControl
-      size="lg"
-      segments={['One', 'Two', 'Three']}
-      onChange={(selected) => console.log(selected)}
-    />
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <Field label="Template" distribution="start">
-    <Input placeholder="Template name..." grow={1} />
-    <SegmentedControl
-      segments={['New', 'Copy']}
-      onChange={(selected) => console.log(selected)}
-    />
-  </Field>
-)
-```
-
-```jsx live
-const statuses = {
-  Confirmed: 'success',
-  Unconfirmed: 'warning',
-  Declined: 'error',
-}
-render(() => {
-  const [activeSegment, setActiveSegment] = React.useState('Unconfirmed')
-  return (
-    <SegmentedControl
-      color={statuses[activeSegment]}
-      activeSegment={activeSegment}
-      segments={Object.keys(statuses)}
-      onChange={(selected) => setActiveSegment(selected)}
-    />
-  )
-})
-```
-
-```jsx live
-render(
-  <SegmentedControl
-    color="default"
-    segments={[
-      { title: 'Table', icon: { name: 'general.showEye' }, tooltip: { title: 'Show' } },
-      { title: 'Grid', icon: { name: 'general.hideEye' }, tooltip: { title: 'Hide' } },
-    ]}
-    onChange={(selected) => console.log(selected)}
-  />
-)
-```

package/src/SegmentedControl/index.js

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

package/src/SegmentedTabs/SegmentedTabs.js

@@ -1,108 +0,0 @@
-// @flow
-import React, { useCallback, useState, useEffect } from 'react'
-
-import Text from '../Text'
-import StackView from '../StackView'
-import { useThemeProps } from '../system'
-
-function Tab({ isSelected, selectedColor, onSelect, ...restProps }) {
-  return (
-    <Text
-      as="button"
-      tabIndex={isSelected ? -1 : undefined}
-      position="relative"
-      fontSize={4}
-      fontWeight={isSelected ? 600 : undefined}
-      padding={1}
-      borderBottomWidth={2}
-      borderBottomColor={isSelected ? selectedColor : 'separatorTertiary'}
-      textAlign="center"
-      userSelect="none"
-      cursor={isSelected ? undefined : 'pointer'}
-      hover={{
-        borderBottomColor: isSelected ? undefined : 'separatorSecondary',
-      }}
-      onClick={isSelected ? undefined : onSelect}
-      {...restProps}
-    />
-  )
-}
-
-type Props = {
-  activeTab?: Function | number | string | boolean,
-  color?: string,
-  getTabLabel?: Function,
-  onChange: Function,
-  tabs: Array<any>,
-  /** Passes props to the composed [Tab](/tab) component. */
-  tabProps: object,
-}
-
-function SegmentedTabs(props: Props) {
-  const {
-    activeTab,
-    color = 'primary',
-    getTabLabel = (tab) => tab,
-    onChange,
-    tabs,
-    tabProps,
-    ...restProps
-  } = useThemeProps('segmentedTabs', props)
-  const getActiveIndex = useCallback(({ activeTab, tabs }) => {
-    let index
-    if (typeof activeTab === 'function') {
-      index = tabs.reduce((searchIndex, tab, index) => {
-        if (activeTab(tab, index)) {
-          searchIndex = index
-        }
-        return searchIndex
-      }, null)
-    } else {
-      index = activeTab === undefined ? 0 : tabs.indexOf(activeTab)
-    }
-    return index
-  })
-  const [activeIndex, setActiveIndex] = useState(getActiveIndex(props))
-
-  const setIndex = useCallback((index) => {
-    if (activeTab === undefined) {
-      setActiveIndex(index)
-    }
-    if (onChange) {
-      onChange(tabs[index])
-    }
-  })
-
-  useEffect(() => {
-    const newActiveIndex = getActiveIndex(props)
-
-    if (activeIndex !== newActiveIndex) {
-      setActiveIndex(newActiveIndex)
-    }
-  }, [activeTab])
-
-  return (
-    <StackView
-      role="group"
-      axis="horizontal"
-      distribution="fill"
-      position="relative"
-      {...restProps}
-    >
-      {tabs.map((tab, index) => (
-        <Tab
-          key={index}
-          index={index}
-          isSelected={index === activeIndex}
-          selectedColor={color}
-          onSelect={() => setIndex(index)}
-          {...tabProps}
-        >
-          {getTabLabel(tab)}
-        </Tab>
-      ))}
-    </StackView>
-  )
-}
-
-export default SegmentedTabs

package/src/SegmentedTabs/SegmentedTabs.mdx

@@ -1,74 +0,0 @@
----
-title: SegmentedTabs
-category: General
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: segmentedTabs
----
-
-```jsx live
-render(
-  <SegmentedTabs
-    distribution="start"
-    tabs={['One', 'Two', 'Three']}
-    onChange={(selected) => console.log(selected)}
-  />
-)
-```
-
-```jsx live
-const TABS = [
-  {
-    id: 0,
-    label: 'People',
-  },
-  {
-    id: 1,
-    label: 'Songs',
-  },
-  {
-    id: 2,
-    label: 'Service Length',
-  },
-]
-
-class App extends React.Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      activeTabId: 1,
-    }
-  }
-
-  render() {
-    return (
-      <StackView
-        axis="horizontal"
-        distribution="center"
-        width={120}
-        position="relative"
-      >
-        <SegmentedTabs
-          width={48}
-          zIndex={5}
-          activeTab={(tab) => tab.id === this.state.activeTabId}
-          tabs={TABS}
-          getTabLabel={(tab) => tab.label}
-          onChange={(selected) => {
-            console.log('selected tab: ', selected)
-            this.setState({ activeTabId: selected.id })
-          }}
-        />
-        <Divider
-          margin={0}
-          size="2px"
-          position="absolute"
-          bottom={0}
-          zIndex={1}
-        />
-      </StackView>
-    )
-  }
-}
-
-render(App)
-```

package/src/SegmentedTabs/index.js

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

package/src/Select/Context.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-const SelectContext = createContext()
-export default SelectContext

package/src/Select/Inline.js

@@ -1,52 +0,0 @@
-// @flow
-import React from 'react'
-
-import Select from './Select'
-
-type Props = {
-  /**
-   * Changes the background and text color values
-   */
-  light?: boolean,
-  /**
-   * Accepts hover styles.
-   */
-  hover?: object,
-
-  /**
-   * Accepts focus styles.
-   */
-  focus?: object,
-  readOnly?: boolean,
-}
-
-function Inline({ light, hover, focus, readOnly, ...restProps }: Props) {
-  const pseudoStyles = readOnly
-    ? {}
-    : { backgroundColor: light ? 'light-0' : 'highlight' }
-  if (hover || focus) {
-    restProps = {
-      ...restProps,
-      ...pseudoStyles,
-    }
-  }
-  return (
-    <Select
-      inline
-      naked
-      paddingLeft={0.5}
-      marginHorizontal={-0.5}
-      stroke={undefined}
-      backgroundColor="transparent"
-      color={light ? 'light-9' : 'foreground'}
-      hover={pseudoStyles}
-      focus={pseudoStyles}
-      readOnly={readOnly}
-      {...restProps}
-    />
-  )
-}
-
-Inline.displayName = 'Select.Inline'
-
-export default Inline

package/src/Select/Inline.mdx

@@ -1,27 +0,0 @@
----
-title: Select.Inline
-category: Forms
-summary: A base component that composes [Select](/select) and provides transparent styles.
-propsSummary: Accepts [Select](/select) props.
-parent: Select
----
-
-```jsx live
-render(
-  <Box padding={2} backgroundColor="primary">
-    <Select.Inline light>
-      {generateRange(100).map((number) => (
-        <Select.Option key={number} value={number}>
-          {number}
-        </Select.Option>
-      ))}
-    </Select.Inline>
-    <Input.Inline
-      size="xl"
-      fontSize={0}
-      light
-      defaultValue="Editable Heading"
-    />
-  </Box>
-)
-```

package/src/Select/Option.js

@@ -1,84 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import Box from '../Box'
-import Checkbox from '../Checkbox'
-import Icon from '../Icon'
-import { ItemListItem } from '../ItemList'
-import Menu from '../Menu'
-
-import { OPTION_DISPLAY_NAME } from './constants'
-import SelectContext from './Context'
-
-const noop = () => null
-
-type Props = {
-  children?: number | string | React.Element | Array<any> | Function,
-  index?: number,
-  text?: string,
-  value?: any,
-}
-
-class Option extends Component<Props> {
-  static displayName = 'Select.Option'
-
-  render() {
-    const { children, disabled, index, text, value, ...restProps } = this.props
-    return (
-      <SelectContext.Consumer>
-        {(selectContext) => (
-          <ItemListItem
-            data={value}
-            text={text}
-            disabled={disabled}
-            index={index}
-          >
-            {({
-              clearHighlight,
-              highlight,
-              highlighted,
-              select,
-              selected,
-              id,
-            }) => (
-              <Menu.Item
-                id={id}
-                role="option"
-                as="li"
-                aria-disabled={disabled}
-                aria-selected={selected}
-                disabled={disabled}
-                isHighlighted={highlighted}
-                onMouseOver={highlight}
-                onMouseOut={clearHighlight}
-                onMouseUp={() =>
-                  selectContext.canSelectOption.current && select()
-                }
-                renderLeft={
-                  typeof children ===
-                  'function' ? null : selectContext.multiple ? (
-                    <Checkbox
-                      size="sm"
-                      label={null}
-                      checked={selected}
-                      onChange={noop}
-                    />
-                  ) : selected ? (
-                    <Icon name="general.check" size="sm" />
-                  ) : (
-                    <Box width={2.5} height={2.5} />
-                  )
-                }
-                {...restProps}
-              >
-                {typeof children === 'function' ? children(selected) : children}
-              </Menu.Item>
-            )}
-          </ItemListItem>
-        )}
-      </SelectContext.Consumer>
-    )
-  }
-}
-
-export default Option

package/src/Select/Option.mdx

@@ -1,30 +0,0 @@
----
-title: Select.Option
-category: Forms
-summary: Holds values that will interact with [Select](/select) and can be wrapped by [Select.OptionGroup](/select.optiongroup)
-parent: Select
----
-
-```jsx live
-render(
-  <Select
-    emptyValue="Select a fruit"
-    tooltip={{ title: 'Select a fruit' }}
-    onChange={(e) => console.log(e)}
-  >
-    <Select.Option value="apple">Apple</Select.Option>
-    <Select.Option value="orange">Orange</Select.Option>
-    <Select.Option value="banana">Banana</Select.Option>
-    <Select.Option value="mango">Mango</Select.Option>
-    <Select.Option value="kiwi" disabled>
-      Kiwi (Out of stock)
-    </Select.Option>
-    <Select.Option value="strawberry">Strawberry</Select.Option>
-    <Divider margin={0.5} />
-    <Menu.Item distribution="fill" spacing={1}>
-      <Button title="Action 1" size="sm" />
-      <Button title="Action 2" size="sm" />
-    </Menu.Item>
-  </Select>
-)
-```

package/src/Select/OptionGroup.js

@@ -1,19 +0,0 @@
-// @flow
-import { Component } from 'react'
-
-type Props = {
-  /**
-   * Provide a title to a grouping of options.
-   */
-  title?: string,
-}
-
-class OptionGroup extends Component<Props> {
-  static displayName = 'Select.OptionGroup'
-
-  render() {
-    return null
-  }
-}
-
-export default OptionGroup

package/src/Select/OptionGroup.mdx

@@ -1,25 +0,0 @@
----
-title: Select.OptionGroup
-category: Forms
-summary: Groups and provides a title to a related set of [Select.Option](/select.option) components.
-parent: Select
----
-
-```jsx live
-render(
-  <Box>
-    <Select multiple>
-      <Select.OptionGroup title="Group 1">
-        <Select.Option value="1">One</Select.Option>
-        <Select.Option value="2">Two</Select.Option>
-        <Select.Option value="3">Three</Select.Option>
-      </Select.OptionGroup>
-      <Select.OptionGroup title="Group 2">
-        <Select.Option value="4">Four</Select.Option>
-        <Select.Option value="5">Five</Select.Option>
-        <Select.Option value="6">Six</Select.Option>
-      </Select.OptionGroup>
-    </Select>
-  </Box>
-)
-```