@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Section/Section.js

@@ -0,0 +1,55 @@
+// @flow
+import React from 'react'
+import type { ChildrenArray } from 'react'
+
+import Heading from '../Heading'
+import Toolbar from '../Toolbar'
+import StackView from '../StackView'
+import { useThemeProps } from '../system'
+
+import type { ToolbarProps } from '../Toolbar'
+
+export type SectionProps = ToolbarProps & {
+  children: ChildrenArray<mixed>,
+}
+
+function Section({
+  actions = [],
+  children,
+  count,
+  helpContent,
+  onStatusClearRequest,
+  status,
+  title,
+  ...restProps
+}: SectionProps) {
+  const {
+    countColor,
+    headingProps,
+    toolbarProps,
+    ...themeProps
+  } = useThemeProps('section', restProps)
+
+  return (
+    <StackView as="section" {...themeProps}>
+      <Toolbar
+        title={
+          <Heading level={3} {...headingProps}>
+            {title}
+          </Heading>
+        }
+        helpContent={helpContent}
+        actions={actions}
+        count={count}
+        countColor={countColor}
+        status={status}
+        onStatusClearRequest={onStatusClearRequest}
+        marginBottom={2}
+        {...toolbarProps}
+      />
+      {children}
+    </StackView>
+  )
+}
+
+export default Section

package/src/Section/Section.mdx

@@ -0,0 +1,103 @@
+---
+title: Section
+category: General
+summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: section
+---
+
+```jsx live
+render(
+  <Section
+    title="Text Notifications"
+    helpContent="Receive text messages to notify you of new received emails. Some scheduling requests allow replying by text."
+    grow={1}
+    shrink={1}
+  >
+    <Card spacing={<Divider />}>
+      {[
+        'General Emails',
+        'Scheduling Requests',
+        'Reminders',
+        'Scheduling Replies',
+      ].map((label) => (
+        <Card.Section
+          key={label}
+          as={Checkbox}
+          axis="horizontal"
+          label={label}
+          grow={1}
+          spacing={1}
+        />
+      ))}
+    </Card>
+  </Section>
+)
+```
+
+```jsx live
+render(
+  class extends React.Component {
+    state = {
+      isOpen: false,
+      value: '',
+    }
+
+    toggleOpen = () => {
+      this.setState((state) => ({
+        isOpen: !state.isOpen,
+      }))
+    }
+
+    render() {
+      const { isOpen } = this.state
+      return (
+        <Section
+          title="Tags"
+          helpContent="Tags are global attributes or abilities usually not related to a specific team. However, some teams are assigned using multiple tags as criteria."
+          actions={
+            <Button
+              title={isOpen ? 'Cancel' : 'Add'}
+              onClick={this.toggleOpen}
+            />
+          }
+          grow={1}
+          shrink={1}
+        >
+          <Collapse open={isOpen} lazy>
+            <Combobox.Popover
+              autoFocus
+              placeholder="Search tags..."
+              value={this.state.value}
+              onChange={(event) => this.setState({ value: event.target.value })}
+              onSelect={() => this.setState({ value: '', isOpen: false })}
+              marginBottom={2}
+            >
+              <Combobox.Item index={0} value="lights">
+                Lights
+              </Combobox.Item>
+              <Combobox.Item index={1} value="camera">
+                Camera
+              </Combobox.Item>
+              <Combobox.Item index={2} value="audio">
+                Audio
+              </Combobox.Item>
+              <Combobox.Item index={3} value="producer">
+                Producer
+              </Combobox.Item>
+            </Combobox.Popover>
+          </Collapse>
+          <Card padding={2} spacing={1}>
+            <Heading level={3}>Background Check</Heading>
+            <StackView axis="horizontal" spacing={1}>
+              {['Lights', 'Camera', 'Audio', 'Producer'].map((tag) => (
+                <Badge key={tag} title={tag} />
+              ))}
+            </StackView>
+          </Card>
+        </Section>
+      )
+    }
+  }
+)
+```

package/src/Section/index.js

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

package/src/SegmentedControl/SegmentedControl.js

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

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

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

package/src/SegmentedTabs/SegmentedTabs.js

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

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

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

package/src/Select/Context.js

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

package/src/Select/Inline.js

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

@@ -0,0 +1,27 @@
+---
+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>
+)
+```