@planningcenter/tapestry-react 2.0.0-rc.0 → 2.0.1-rc.0

package/src/Sidebar/Sidebar.js

@@ -4,7 +4,6 @@
 import { jsx } from '@emotion/core'
 import { Children } from 'react'
 import StickyBox from 'react-sticky-box'
-import warning from 'warning'
 
 import { css } from '../system'
 import StackView from '../StackView'
@@ -30,11 +29,14 @@ function Sidebar({ children, ...restProps }: Props) {
     >
       <StickyBox css={flexColumnCss}>
         {Children.map(children, (child) => {
-          warning(
+          if (
             (child && child.type !== Sidebar.List) ||
-              (child && child.type !== Sidebar.Item),
-            `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`
-          )
+            (child && child.type !== Sidebar.Item)
+          ) {
+            console.warn(
+              `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`
+            )
+          }
           return child
         })}
       </StickyBox>

package/src/Table/Table.js

@@ -1,8 +1,7 @@
 // @flow
 import React, { PureComponent, Children, Fragment } from 'react'
 import { Global } from '@emotion/core'
-import camelCase from 'lodash.camelcase'
-import snakeCase from 'lodash.snakecase'
+import { camelCase, snakeCase } from 'lodash'
 
 import type { PaginationProps } from '../Pagination/Pagination'
 

package/src/ThemeProvider/ThemeProvider.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useState } from 'react'
 import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
 import { CacheProvider } from '@emotion/core'
 import createCache from '@emotion/cache'
-import merge from 'deepmerge'
+import { merge } from 'lodash'
 
 import defaultTheme from '../system/default-theme'
 import { flattenPalette } from '../system'

package/src/hooks/useConstant.ts

@@ -0,0 +1,17 @@
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+
+import * as React from 'react'
+
+type ResultBox<T> = { v: T }
+
+export default function useConstant<T>(fn: () => T): T {
+  const ref = React.useRef<ResultBox<T>>()
+
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+
+  return ref.current.v
+}

package/src/system/utils.js

@@ -1,7 +1,7 @@
 import { useContext, useCallback } from 'react'
 import { ThemeContext } from '@emotion/core'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
-import get from 'lodash.get'
+import { get } from 'lodash'
 
 import { getColor } from './colors'
 import defaultTheme from './default-theme'

package/src/utils.js

@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react'
 import { tabbable } from 'tabbable'
-import camelToKebabCase from 'camel-to-kebab'
+import { kebabCase } from 'lodash'
 
 /**
  * Returns true if user platform is an iOS device
@@ -682,12 +682,12 @@ function createCSSProperty(key, value) {
   if (!createdCSSProperties.has(key)) {
     createdCSSProperties.add(key)
   }
-  return `--${camelToKebabCase(key)}-${camelToKebabCase(value)}`
+  return `--${kebabCase(key)}-${kebabCase(value)}`
 }
 
 function getCSSProperty(key, value) {
   return key && value
-    ? `var(--${camelToKebabCase(key)}-${camelToKebabCase(value)})`
+    ? `var(--${kebabCase(key)}-${kebabCase(value)})`
     : undefined
 }
 

package/src/utils.test.js

@@ -0,0 +1,29 @@
+import { createCSSProperty, getCSSProperty } from './utils'
+
+describe('createCSSProperty', () => {
+  test('kebab cases the key and value', () => {
+    expect(createCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
+      '--the-camel-cased-key-the-camel-cased-value'
+    )
+  })
+
+  test("does not mess with already kebab'd keys and values", () => {
+    expect(
+      createCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')
+    ).toEqual('--mixed-camel-and-kebab-only-kebab-case')
+  })
+})
+
+describe('getCSSProperty', () => {
+  test('kebab cases the key and value', () => {
+    expect(getCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
+      'var(--the-camel-cased-key-the-camel-cased-value)'
+    )
+  })
+
+  test("does not mess with already kebab'd keys and values", () => {
+    expect(getCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')).toEqual(
+      'var(--mixed-camel-and-kebab-only-kebab-case)'
+    )
+  })
+})