@planningcenter/tapestry-react 0.0.1-alpha.0 → 1.2.0

package/src/DataTable/components/CheckboxCell.js

@@ -18,12 +18,12 @@ const initialStyles = {
   flexShrink: 0,
   outline: 0,
   cursor: 'pointer',
-  ' .ui-kit-Checkbox-Fill ': {
+  ' .tapestry-react-Checkbox-Fill ': {
     transform: 'scale(1)',
     transformOrigin: 'center center',
     transition: 'all 180ms ease-out',
   },
-  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+  ' .tapestry-react-Checkbox-Minus, .tapestry-react-Checkbox-Checked ': {
     fill: '#fff',
     visibility: 'hidden',
     transform: 'scale(0)',
@@ -31,23 +31,23 @@ const initialStyles = {
     transition: 'all 180ms ease-out',
   },
   ' &:hover, &:focus ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1.125)',
     },
   },
   ' &:active ': {
-    ' .ui-kit-Checkbox-Fill ': {
+    ' .tapestry-react-Checkbox-Fill ': {
       transform: 'scale(1)',
     },
   },
 }
 
 const checkedStyles = {
-  ' .ui-kit-Checkbox-Checked ': scaleStyles,
+  ' .tapestry-react-Checkbox-Checked ': scaleStyles,
 }
 
 const indeterminateStyles = {
-  ' .ui-kit-Checkbox-Minus ': scaleStyles,
+  ' .tapestry-react-Checkbox-Minus ': scaleStyles,
 }
 
 function CheckboxCell({
@@ -87,22 +87,22 @@ function CheckboxCell({
       onFocus={onFocus}
       onClick={handleChange}
       onKeyDown={(event) => event.key === ' ' && handleChange(event)}
-      className="uikit-reset ui-kit-Checkbox"
+      className="tapestry-react-reset tapestry-react-Checkbox"
       css={cssStyles}
     >
       <Icon.Path
         name={iconPaths.fill}
-        className="uikit-reset ui-kit-Checkbox-Fill"
+        className="tapestry-react-reset tapestry-react-Checkbox-Fill"
         fill={checked || indeterminate ? 'primary' : 'surfaceTertiary'}
         stroke={checked || indeterminate ? 'primary' : 'separatorSecondary'}
       />
       <Icon.Path
         name={iconPaths.minus}
-        className="uikit-reset ui-kit-Checkbox-Minus"
+        className="tapestry-react-reset tapestry-react-Checkbox-Minus"
       />
       <Icon.Path
         name={iconPaths.checked}
-        className="uikit-reset ui-kit-Checkbox-Checked"
+        className="tapestry-react-reset tapestry-react-Checkbox-Checked"
       />
     </Icon>
   )

package/src/DataTable/components/Icon.js

@@ -25,7 +25,7 @@ function Icon({ as, name, size = 'md', color, children, ...props }) {
       width={iconSize}
       height={iconSize}
       fill={themeColor}
-      className="uikit-reset"
+      className="tapestry-react-reset"
       children={childrenToRender}
       {...props}
     />

package/src/Input/InputLabel.js

@@ -8,7 +8,7 @@ import { inputs, inputLabels } from './utils'
 
 export type InputLabelProps = {
   /**
-   * The `id` of the input to control. Compatible with all UI kit form components.
+   * The `id` of the input to control. Compatible with all Tapestry-React form components.
    */
   controls: string,
 

package/src/NumberField/NumberField.js

@@ -168,13 +168,26 @@ class NumberField extends Component<Props> {
   handleInput = (event) => {
     const { maxValue } = this.getParsedValues(event.target.value)
     if (this.props.pad) {
-      const targetValue =
-        event.target.value === ''
-          ? event.target.value
-          : parseFloat(event.target.value)
+      const deleteKeyPressed = event.target.value === ''
+      const targetValue = deleteKeyPressed
+        ? event.target.value
+        : parseFloat(event.target.value)
 
-      if (targetValue !== '') {
+      if (deleteKeyPressed) {
+        const nextValue = `${this.props.value}`.slice(0, -1)
+        this.props.onChange(padNumber(nextValue, this.props.pad))
+      } else {
         let nextValue = this.clampValue(targetValue)
+        const paddedValue = parseFloat(`${this.props.value}${targetValue}`)
+        if (
+          !this.firstTouch &&
+          !isNaN(targetValue) &&
+          this.isValueValid(paddedValue)
+        ) {
+          nextValue = paddedValue
+        }
+        this.firstTouch = false
+
         if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
           const { next } = getTabbableSiblings(event.target)
           if (next) {
@@ -182,10 +195,7 @@ class NumberField extends Component<Props> {
           }
         }
 
-        this.firstTouch = false
         this.changeIfValid(nextValue)
-      } else {
-        this.props.onChange('')
       }
     } else {
       this.props.onChange(event.target.value)
@@ -244,7 +254,7 @@ class NumberField extends Component<Props> {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown,

package/src/Page/Page.mdx

@@ -4,6 +4,27 @@ category: General
 summary: Page specific components.
 ---
 
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader>
+      <PageTitle>People</PageTitle>
+    </PageHeader>
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```
+
 ```jsx live
 render(
   <Box width="100%">
@@ -33,6 +54,40 @@ render(
 )
 ```
 
+```jsx live
+render(
+  <Box width="100%">
+    <PageHeader
+      toolbar={
+        <PageToolbar>
+          <PageTabList>
+            <PageTab active>My Schedule</PageTab>
+            <PageTab>All Plans</PageTab>
+          </PageTabList>
+          <PageActions>
+            <PageButton title="One" />
+            <PageButton title="Two" />
+          </PageActions>
+        </PageToolbar>
+      }
+    >
+      <PageTitle>People</PageTitle>
+    </PageHeader>
+    <PageBody
+      sidebar={
+        <Sidebar grow={0}>
+          <Sidebar.Item active>Item 1</Sidebar.Item>
+          <Sidebar.Item>Item 2</Sidebar.Item>
+          <Sidebar.Item>Item 3</Sidebar.Item>
+        </Sidebar>
+      }
+    >
+      Regular body
+    </PageBody>
+  </Box>
+)
+```
+
 ```jsx live
 render(
   <Box width="100%">
@@ -74,7 +129,7 @@ render(
 
 ## Theming
 
-Use theme keys `pageBody`, `pageButton`, `pageDropdown`, and `pageTitle` to override `Page` component props.
+Use theme keys `pageBody`, `pageButton`, `pageDropdown`, `pageHeader`, and `pageTitle` to override `Page` component props.
 
 ```jsx live
 render(

package/src/Page/PageActions.js

@@ -3,7 +3,18 @@ import React from 'react'
 import StackView from '../StackView'
 
 function PageActions(props) {
-  return <StackView axis="horizontal" spacing={1} {...props} />
+  return (
+    <StackView
+      alignment="center"
+      alignSelf="end"
+      axis="horizontal"
+      distribution="end"
+      flex="1"
+      paddingBottom={2}
+      spacing={1}
+      {...props}
+    />
+  )
 }
 
 export default PageActions

package/src/Page/PageHeader.js

@@ -1,41 +1,35 @@
-import React, { Children } from 'react'
+import React from 'react'
 
 import { useThemeValue } from '../system'
 import StackView from '../StackView'
 
-import { PAGE_TABLIST_DISPLAY_NAME } from './PageTabList'
-
 function PageHeader({ children, toolbar, ...restProps }) {
   const themeProps = useThemeValue('pageHeader')
-  const tabsPresent = toolbar
-    ? Children.toArray(toolbar.props.children).some(
-        (child) => child && child.type.displayName === PAGE_TABLIST_DISPLAY_NAME
-      )
-    : false
-  const childrenToRender = toolbar
-    ? children
-      ? Children.toArray([
-          <StackView axis="horizontal" alignment="center" width="100%">
-            {children}
-          </StackView>,
-          toolbar,
-        ])
-      : toolbar
-    : children
   return (
     <StackView
       as="header"
-      axis={children && toolbar ? 'vertical' : 'horizontal'}
-      alignment={children && toolbar ? 'start' : 'center'}
-      paddingHorizontal={3}
-      paddingTop={1.5}
-      paddingBottom={tabsPresent ? null : 1.5}
-      spacing={1.5}
+      axis="vertical"
       backgroundColor="primary-light"
+      paddingHorizontal={2}
+      minHeight={8}
+      mediaQueries={{
+        sm: { paddingHorizontal: 3 },
+      }}
+      spacing={0}
       {...themeProps}
       {...restProps}
     >
-      {childrenToRender}
+      {children && (
+        <StackView
+          alignment="center"
+          axis="horizontal"
+          paddingTop={2}
+          width="100%"
+        >
+          {children}
+        </StackView>
+      )}
+      {toolbar}
     </StackView>
   )
 }

package/src/Page/PageTab.js

@@ -1,9 +1,23 @@
 import React from 'react'
 
 import Tab from '../Tab'
+import { useThemeValue } from '../system'
 
 function PageTab(props) {
-  return <Tab {...props} size="lg" />
+  const themeProps = useThemeValue('pageTab')
+  return (
+    <Tab
+      mediaQueries={{
+        sm: {
+          paddingHorizontal: 3,
+        },
+      }}
+      paddingHorizontal={1.5}
+      size="lg"
+      {...themeProps}
+      {...props}
+    />
+  )
 }
 
 export default PageTab

package/src/Page/PageTabList.js

@@ -2,12 +2,14 @@ import React from 'react'
 
 import StackView from '../StackView'
 
-export const PAGE_TABLIST_DISPLAY_NAME = 'PageTabList'
-
-function PageTabList(props) {
-  return <StackView axis="horizontal" spacing={0.5} {...props} />
+export default function PageTabList(props) {
+  return (
+    <StackView
+      axis="horizontal"
+      paddingTop={2}
+      spacing={0.5}
+      alignSelf="end"
+      {...props}
+    />
+  )
 }
-
-PageTabList.displayName = PAGE_TABLIST_DISPLAY_NAME
-
-export default PageTabList

package/src/Page/PageTitle.js

@@ -5,7 +5,15 @@ import Heading from '../Heading'
 
 function PageTitle(props) {
   const themeProps = useThemeValue('pageTitle')
-  return <Heading level={2} color="white" {...themeProps} {...props} />
+  return (
+    <Heading
+      color="white"
+      fontSize="25px"
+      level={2}
+      {...themeProps}
+      {...props}
+    />
+  )
 }
 
 export default PageTitle

package/src/Page/PageToolbar.js

@@ -1,17 +1,40 @@
 import React from 'react'
 
 import StackView from '../StackView'
+import { useThemeValue } from '../system'
+
+function PageToolbar({ stackBelow, ...restProps }) {
+  const themeBreakpoints = useThemeValue('breakpoints')
+  const breakpoint = Object.keys(themeBreakpoints).includes(stackBelow)
+    ? stackBelow
+    : 'sm'
+  const stackProps = stackBelow
+    ? {
+        axis: 'vertical',
+        alignment: 'stretch',
+        spacing: 2,
+        mediaQueries: {
+          [breakpoint]: {
+            axis: 'horizontal',
+            alignment: 'center',
+            paddingBottom: 0,
+            spacing: 0,
+          },
+        },
+      }
+    : null
 
-function PageToolbar({ children }) {
   return (
     <StackView
-      grow={1}
+      alignment="center"
       axis="horizontal"
-      alignment="start"
       distribution="space-between"
-    >
-      {children}
-    </StackView>
+      flex={1}
+      spacing={2}
+      width="100%"
+      {...stackProps}
+      {...restProps}
+    />
   )
 }
 

package/src/Radio/Radio.js

@@ -136,7 +136,7 @@ function Radio({
           opacity={0}
         />
 
-        <Icon className="ui-kit-Radio-Icon" size={size}>
+        <Icon className="tapestry-react-Radio-Icon" size={size}>
           <Icon.Path
             name={iconPaths.fill}
             fill={radioTheme.fill}

package/src/ThemeProvider/ThemeProvider.tsx

@@ -10,10 +10,10 @@ import { Theme } from '../index'
 import { objectToCSSProperties, shallowEqual } from '../utils'
 import { setRootStyles, styleReset } from './styles'
 
-const STORAGE_KEY = 'ui-kit-theme'
+const STORAGE_KEY = 'tapestry-react-theme'
 
 export const cache = createCache({
-  key: 'uikit',
+  key: 'tapestry-react',
   prefix: (key) => {
     switch (key) {
       case 'appearance':

package/src/ThemeProvider/styles.ts

@@ -9,7 +9,7 @@ const getRootStyles = (styles) => {
 }
 
 export const setRootStyles = (styles) => {
-  const styleElement = <HTMLStyleElement>document.getElementById('uikit-style')
+  const styleElement = <HTMLStyleElement>document.getElementById('tapestry-react-style')
   const sheet = <CSSStyleSheet>styleElement.sheet
   const styleString = getRootStyles(styles)
   sheet.deleteRule(0)
@@ -24,7 +24,7 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(defaultColorProperties)}
 
-.uikit-reset {
+.tapestry-react-reset {
   appearance: none;
   box-sizing: border-box;
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -40,12 +40,12 @@ ${getRootStyles(defaultColorProperties)}
   color: inherit;
 }
 
-.uikit-reset::-moz-focus-inner {
+.tapestry-react-reset::-moz-focus-inner {
   padding: 0px;
   border: 0px;
 }
 
-.uikit-reset:focus:not(.focus-visible) {
+.tapestry-react-reset:focus:not(.focus-visible) {
   outline: 0px;
 }
 `
@@ -56,9 +56,9 @@ ${getRootStyles(defaultColorProperties)}
 // we use our own global style implementation in place of Emotion Global
 // so we can have more control over when styles are injected since multiple
 // Providers can be used on a page
-if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
+if (typeof window !== 'undefined' && !document.getElementById('tapestry-react-style')) {
   const styleElement = document.createElement('style')
-  styleElement.id = 'uikit-style'
+  styleElement.id = 'tapestry-react-style'
   styleElement.innerHTML = styleReset
   document.head.insertAdjacentElement('afterbegin', styleElement)
 }

package/src/server.js

@@ -4,7 +4,7 @@ import ThemeProvider from './ThemeProvider'
 
 export const styleElement = (
   <style
-    id="uikit-style"
+    id="tapestry-react-style"
     dangerouslySetInnerHTML={{ __html: ThemeProvider.styleReset }}
   />
 )

package/src/system/README.md

@@ -41,7 +41,7 @@ function Box(props) {
 
 <small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
 
-The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/ui-kit/responsive) and [Variants](https://ministrycentered.github.io/ui-kit/variants) for more information and examples.
+The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/tapestry-react/responsive) and [Variants](https://ministrycentered.github.io/tapestry-react/variants) for more information and examples.
 
 ### Plugins
 
@@ -90,7 +90,7 @@ function StackView(props) {
 A fork of the [CXS](https://github.com/cxs-css/cxs) library is available as an escape hatch if Emotion is performing poorly. This is specifically used to combat performance issues in intensive components like `DataTable`. This is done through a `useCss` hook exported from system:
 
 ```jsx
-import { designSystem } from '@planning-center/ui-kit'
+import { designSystem } from '@planningcenter/tapestry-react'
 function Box({ color, ...props }) {
   const css = designSystem.useCss()
   return <div className={css({ color })} {...props} />

package/src/system/split-styles.js

@@ -26,7 +26,7 @@ export default function ({
   }
   return {
     ...restProps,
-    className: className ? `uikit-reset ${className}` : `uikit-reset`,
+    className: className ? `tapestry-react-reset ${className}` : `tapestry-react-reset`,
     css: (theme) => {
       const propStyles = {}
       for (const prop in styleProps) {