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

package/package.json

@@ -1,21 +1,16 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.10.0-rc.2",
+  "version": "2.10.0-rc.3",
   "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/index.umd.js",
-  "module": "dist/index.es.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
+  "sideEffects": false,
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "exports": {
-    ".": {
-      "import": "dist/index.es.js",
-      "require": "dist/index.umd.js"
-    }
-  },
-  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/planningcenter/tapestry-react.git"
@@ -30,9 +25,10 @@
     "test:watch": "jest --watch",
     "test:debug": "node --inspect-brk ./node_modules/bin/jest --runInBand --watch",
     "prebuild": "rimraf dist",
-    "build": "yarn build:types && yarn vite:build",
-    "build:types": "tsc",
-    "vite:build": "vite build",
+    "build": "yarn build:cjs && yarn build:esm && yarn build:types",
+    "build:cjs": "NODE_ENV=production BABEL_ENV=cjs babel src -d dist/cjs --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
+    "build:esm": "NODE_ENV=production BABEL_ENV=esm babel src -d dist/esm --extensions '.js,.ts,.tsx' --ignore '**/__tests__/**/*.js','**/*.test.js'",
+    "build:types": "tsc && node scripts/copy-types.js",
     "prepublishOnly": "yarn build",
     "develop": "yarn prebuild && yarn build:esm --watch",
     "develop:yalc": "yalc publish && chokidar src -c 'yalc publish --push --changed'",
@@ -56,7 +52,6 @@
     "@babel/preset-flow": "7.12.13",
     "@babel/preset-react": "7.12.13",
     "@babel/preset-typescript": "^7.12.17",
-    "@bunchtogether/vite-plugin-flow": "^1.0.2",
     "@emotion/cache": "^11.10.5",
     "@emotion/react": "^11.10.5",
     "@testing-library/jest-dom": "^5.11.9",
@@ -91,8 +86,7 @@
     "svgo": "^2.1.0",
     "svgson": "4.1.0",
     "type-fest": "^0.21.1",
-    "typescript": "^4.1.5",
-    "vite": "^4.5.0"
+    "typescript": "^4.1.5"
   },
   "dependencies": {
     "@planningcenter/icons": "^14.18.1",

package/src/ActionsDropdown/ActionsDropdown.mdx

@@ -0,0 +1,69 @@
+---
+title: ActionsDropdown
+category: General
+summary: A shared implementation for the Profile actions dropdown.
+---
+
+## Default State
+
+```jsx live
+render(
+  <ActionsDropdown isBelowManager>
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Duplicates State
+
+```jsx live
+render(
+  <ActionsDropdown
+    duplicates={{
+      amount: 1,
+      url: '#',
+    }}
+    onDeleteProfile={() => alert('Delete profile 🗑')}
+  >
+    <Dropdown.Link to="#">Edit profile</Dropdown.Link>
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+    <Dropdown.Link to="#">Perform action</Dropdown.Link>
+    <Dropdown.Link to="#">Merge profile</Dropdown.Link>
+    <Dropdown.Link to="#">Set inactive</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Inactive State
+
+```jsx live
+render(
+  <ActionsDropdown
+    inactive={{
+      date: new Date('Sep 19, 2019'),
+      reason: 'Deceased',
+      linkProps: { onClick: () => alert('Reactivate 🎚') },
+    }}
+    isPeopleProduct
+  >
+    <Dropdown.Link to="#">Permissions</Dropdown.Link>
+  </ActionsDropdown>
+)
+```
+
+## Custom Styles
+
+```jsx live
+render(
+  <ActionsDropdown
+    defaultButtonProps={{
+      backgroundColor: 'hotpink',
+      color: 'white',
+      hover: { backgroundColor: '#f25ca7' },
+      active: { backgroundColor: '#ea539e' },
+    }}
+  >
+    <Dropdown.Link to="#">Edit profile</Dropdown.Link>
+  </ActionsDropdown>
+)
+```

package/src/ActionsDropdown/ActionsDropdown.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react'
+import { format } from 'date-fns'
+
+import Box from '../Box'
+import defaultTheme from '../system/default-theme'
+import Divider from '../Divider'
+import Dropdown from '../Dropdown'
+import Icon from '../Icon'
+import Link from '../Link'
+import StackView from '../StackView'
+import Text from '../Text'
+import { cloneChildren } from '../utils'
+
+type ActionsDropdownProps = {
+  /** Accepts [Dropdown.Item](/dropdown) and [Dropdown.Link](/dropdown) elements. */
+  children?: React.ReactNode
+
+  /** Props for default button state. */
+  defaultButtonProps?: object
+
+  /** Provide amount of duplicates as well as a link to resolve them. */
+  duplicates?: {
+    /** Amount of duplicates. */
+    amount: number
+
+    /** [Link](/link) props. */
+    linkProps: object
+  }
+
+  /** Props for duplicates button state. Activated when `duplicates.amount` is greater than 0. */
+  duplicatesButtonProps?: object
+
+  /** Provide date and reason user became inactive as well as a link to reactivate them. */
+  inactive?: {
+    /** Valid JavaScript Date. */
+    date?: Date
+
+    /** Reason user was inactivated. */
+    reason: string
+
+    /** [Link](/link) props. */
+    linkProps: object
+  }
+
+  /** Props for inactive button state. Activated when `inactive.date` is present. */
+  inactiveButtonProps?: object
+
+  /** Determines logic for when user is below manager role. */
+  isBelowManager?: boolean
+
+  /** Determines logic for when used in People product. */
+  isPeopleProduct?: boolean
+
+  /** Callback when "Delete Profile" item is selected. */
+  onDeleteProfile?: boolean
+}
+
+export function ActionsDropdown({
+  children,
+  defaultButtonProps = defaultTheme.button.themes.primary.fill,
+  duplicates,
+  duplicatesButtonProps = {
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
+    hover: { backgroundColor: 'hsl(42deg 87% 90%)' },
+    active: { backgroundColor: 'hsl(42deg 87% 87%)' },
+  },
+  inactive,
+  inactiveButtonProps = {
+    color: 'white',
+    backgroundColor: '#999B96',
+  },
+  isBelowManager,
+  isPeopleProduct,
+  onDeleteProfile,
+}: ActionsDropdownProps) {
+  const hasDuplicates = duplicates?.amount > 0
+  const hasInactiveDate = Boolean(inactive?.date)
+  return (
+    <Dropdown
+      title="Actions"
+      iconLeft={
+        hasDuplicates || hasInactiveDate
+          ? {
+              color: hasDuplicates ? '#E6A714' : 'white',
+              name: hasDuplicates ? 'general.exclamationTriangle' : 'general.inactive',
+              size: 'md',
+            }
+          : undefined
+      }
+      fontSize="14px"
+      fontWeight={400}
+      paddingLeft={hasDuplicates || hasInactiveDate ? 1 : undefined}
+      paddingVertical={0.25}
+      theme={false}
+      popoverProps={{ maxWidth: '280px' }}
+      placement="bottom-start"
+      {...(hasDuplicates
+        ? duplicatesButtonProps
+        : hasInactiveDate
+        ? inactiveButtonProps
+        : defaultButtonProps)}
+    >
+      {hasDuplicates ? (
+        <>
+          <StackView axis="horizontal" padding={2} spacing={1}>
+            <Icon
+              color="#E6A714"
+              marginTop="3px"
+              name="general.exclamationTriangle"
+            />
+            <Text size={4}>
+              There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}
+              potential {duplicates.amount > 1 ? 'duplicates' : 'duplicate'} for
+              this profile.{' '}
+              {isBelowManager ? (
+                `An administrator can resolve ${
+                  duplicates.amount > 1 ? `them` : `it`
+                } in People.`
+              ) : (
+                <Link {...duplicates.linkProps}>
+                  {isPeopleProduct ? 'Review' : 'Review in People'}
+                </Link>
+              )}
+            </Text>
+          </StackView>
+          <Divider />
+        </>
+      ) : null}
+      {hasInactiveDate ? (
+        <>
+          <StackView axis="horizontal" padding={2} spacing={1}>
+            <Icon name="general.inactive" color="grey-8" marginTop="3px" />
+            <Text size={4}>
+              Set inactive on {format(inactive.date, 'MMM dd, yyyy')}
+              {inactive.reason && ` (${inactive.reason})`}.{' '}
+              {isBelowManager ? (
+                'An administrator can reactivate them in People.'
+              ) : (
+                <Link {...inactive.linkProps}>
+                  {isPeopleProduct ? 'Reactivate' : 'Reactivate in People'}
+                </Link>
+              )}
+            </Text>
+          </StackView>
+          <Divider />
+        </>
+      ) : null}
+      {(hasDuplicates || hasInactiveDate) && <Box height={1.5} />}
+      {cloneChildren(children, () => ({
+        paddingHorizontal: 2,
+      }))}
+      {onDeleteProfile ? (
+        <Dropdown.Item
+          disabled={isBelowManager}
+          paddingHorizontal={2}
+          onSelect={onDeleteProfile}
+        >
+          {isPeopleProduct ? 'Delete profile' : 'Delete profile…'}
+        </Dropdown.Item>
+      ) : null}
+      {onDeleteProfile && isBelowManager ? (
+        <Box
+          marginHorizontal={2}
+          padding={1}
+          backgroundColor="surfaceTertiary"
+          color="foregroundSecondary"
+        >
+          <Text size={5} lineHeight={2}>
+            To delete this profile, an administrator must remove them from
+            People.
+          </Text>
+        </Box>
+      ) : null}
+      {(hasDuplicates ||
+        hasInactiveDate ||
+        (onDeleteProfile && isBelowManager)) && <Box height={1} />}
+    </Dropdown>
+  )
+}

package/src/ActionsDropdown/index.ts

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

package/src/Alert/Alert.mdx

@@ -0,0 +1,15 @@
+---
+title: Alert
+category: General
+propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <StackView spacing={2}>
+    <Alert type="warning">Are you sure you want to continue?</Alert>
+    <Alert type="success">Files were uploaded successfully!</Alert>
+    <Alert type="error">This action is not permitted.</Alert>
+  </StackView>
+)
+```

package/src/Alert/Alert.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import Alert from './Alert'
+
+it('should render title and content', () => {
+  const content = 'Please fix your errors'
+  const { getByText } = render(<Alert type="error">{content}</Alert>)
+  getByText(content)
+})

package/src/Alert/Alert.tsx

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

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

package/src/Avatar/Avatar.mdx

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

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

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