@planningcenter/tapestry-react 2.0.0-rc.1 → 2.0.0

package/dist/cjs/DataTable/hooks/useCollapsibleRows.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _useConstant = _interopRequireDefault(require("use-constant"));
+var _useConstant = _interopRequireDefault(require("../../hooks/useConstant"));
 
 var _zustand = _interopRequireDefault(require("zustand"));
 

package/dist/cjs/Sidebar/Sidebar.js

@@ -15,8 +15,6 @@ var _react = require("react");
 
 var _reactStickyBox = _interopRequireDefault(require("react-sticky-box"));
 
-var _warning = _interopRequireDefault(require("warning"));
-
 var _system = require("../system");
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -44,7 +42,10 @@ function Sidebar(_ref) {
   }, restProps), (0, _core.jsx)(_reactStickyBox["default"], {
     css: flexColumnCss
   }, _react.Children.map(children, function (child) {
-    (0, _warning["default"])(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.");
+    if (child && child.type !== Sidebar.List || 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;
   })));
 }

package/dist/cjs/Table/Table.js

@@ -21,9 +21,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
-var _lodash = _interopRequireDefault(require("lodash.camelcase"));
-
-var _lodash2 = _interopRequireDefault(require("lodash.snakecase"));
+var _lodash = require("lodash");
 
 var _Button = _interopRequireDefault(require("../Button"));
 
@@ -311,13 +309,13 @@ var Table = /*#__PURE__*/function (_PureComponent) {
   _proto.getSortOrder = function getSortOrder(_ref3) {
     var columnId = _ref3.columnId,
         direction = _ref3.direction;
-    return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash2["default"])(columnId);
+    return "" + (direction === Table.ASC ? '' : '-') + (0, _lodash.snakeCase)(columnId);
   };
 
   _proto.parseSortOrder = function parseSortOrder(query) {
     var isDescending = query[0] === '-';
     return {
-      columnId: (0, _lodash["default"])(isDescending ? query.substring(1) : query),
+      columnId: (0, _lodash.camelCase)(isDescending ? query.substring(1) : query),
       direction: isDescending ? Table.DESC : Table.ASC
     };
   };

package/dist/cjs/ThemeProvider/ThemeProvider.js

@@ -18,7 +18,7 @@ var _core = require("@emotion/core");
 
 var _cache = _interopRequireDefault(require("@emotion/cache"));
 
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
+var _lodash = require("lodash");
 
 var _defaultTheme = _interopRequireDefault(require("../system/default-theme"));
 
@@ -78,12 +78,12 @@ function mergeThemes(a, b) {
 
   return _objectSpread(_objectSpread(_objectSpread({}, a), b), {}, {
     button: _objectSpread(_objectSpread(_objectSpread({}, a.button), b.button), {}, {
-      themes: (0, _deepmerge["default"])(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
+      themes: (0, _lodash.merge)(((_a$button = a.button) == null ? void 0 : _a$button.themes) || {}, ((_b$button = b.button) == null ? void 0 : _b$button.themes) || {})
     }),
-    colors: (0, _deepmerge["default"])((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
+    colors: (0, _lodash.merge)((0, _system.flattenPalette)(a.colors || {}), (0, _system.flattenPalette)(b.colors || {})),
     spinner: _objectSpread(_objectSpread(_objectSpread({}, a.spinner), b.spinner), {}, {
-      sizes: (0, _deepmerge["default"])(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
-      thickness: (0, _deepmerge["default"])(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
+      sizes: (0, _lodash.merge)(((_a$spinner = a.spinner) == null ? void 0 : _a$spinner.sizes) || {}, ((_b$spinner = b.spinner) == null ? void 0 : _b$spinner.sizes) || {}),
+      thickness: (0, _lodash.merge)(((_a$spinner2 = a.spinner) == null ? void 0 : _a$spinner2.thickness) || {}, ((_b$spinner2 = b.spinner) == null ? void 0 : _b$spinner2.thickness) || {})
     })
   });
 }

package/dist/cjs/hooks/useConstant.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = useConstant;
+
+var React = _interopRequireWildcard(require("react"));
+
+// 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.
+function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}

package/dist/cjs/system/utils.js

@@ -24,7 +24,7 @@ var _core = require("@emotion/core");
 
 var _polished = require("polished");
 
-var _lodash = _interopRequireDefault(require("lodash.get"));
+var _lodash = require("lodash");
 
 var _colors = require("./colors");
 
@@ -161,7 +161,7 @@ function getForegroundColor(color) {
 
 function useThemeValue(path, defaultValue) {
   var userTheme = (0, _react.useContext)(_core.ThemeContext);
-  return path ? (0, _lodash["default"])(userTheme, path, defaultValue || (0, _lodash["default"])(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
+  return path ? (0, _lodash.get)(userTheme, path, defaultValue || (0, _lodash.get)(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
 }
 
 function useThemeProps(path, props) {

package/dist/cjs/utils.js

@@ -46,7 +46,7 @@ var _react = require("react");
 
 var _tabbable = require("tabbable");
 
-var _camelToKebab = _interopRequireDefault(require("camel-to-kebab"));
+var _lodash = require("lodash");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -785,11 +785,11 @@ function createCSSProperty(key, value) {
     createdCSSProperties.add(key);
   }
 
-  return "--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value);
+  return "--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value);
 }
 
 function getCSSProperty(key, value) {
-  return key && value ? "var(--" + (0, _camelToKebab["default"])(key) + "-" + (0, _camelToKebab["default"])(value) + ")" : undefined;
+  return key && value ? "var(--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/esm/DataTable/hooks/useCollapsibleRows.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { createContext, useCallback, useContext, useEffect } from 'react';
-import useConstant from 'use-constant';
+import useConstant from '../../hooks/useConstant';
 import create from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);

package/dist/esm/Sidebar/Sidebar.js

@@ -7,7 +7,6 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 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';
 import SidebarList from './SidebarList';
@@ -29,7 +28,10 @@ function Sidebar(_ref) {
   }, restProps), jsx(StickyBox, {
     css: flexColumnCss
   }, Children.map(children, function (child) {
-    warning(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.");
+    if (child && child.type !== Sidebar.List || 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;
   })));
 }

package/dist/esm/Table/Table.js

@@ -10,8 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 Button from '../Button';
 import DragDrop from '../DragDrop';
 import Pagination from '../Pagination';

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -8,7 +8,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';
 import { objectToCSSProperties, shallowEqual } from '../utils';

package/dist/esm/hooks/useConstant.js

@@ -0,0 +1,15 @@
+// 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';
+export default function useConstant(fn) {
+  var ref = React.useRef();
+
+  if (!ref.current) {
+    ref.current = {
+      v: fn()
+    };
+  }
+
+  return ref.current.v;
+}

package/dist/esm/system/utils.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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';
 export var spacing = 8;

package/dist/esm/utils.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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
  * https://stackoverflow.com/a/9039885/1461204
@@ -737,11 +737,11 @@ function createCSSProperty(key, value) {
     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) + ")" : undefined;
+  return key && value ? "var(--" + kebabCase(key) + "-" + kebabCase(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/types/hooks/useConstant.d.ts

@@ -0,0 +1 @@
+export default function useConstant<T>(fn: () => T): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0",
   "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/cjs/index.js",
@@ -57,8 +57,10 @@
     "@babel/preset-typescript": "^7.12.17",
     "@emotion/cache": "10.0.29",
     "@emotion/core": "10.0.35",
+    "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/react-hooks": "5.0.3",
+    "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^26.0.20",
     "babel-eslint": "10.1.0",
     "chokidar-cli": "^2.1.0",
@@ -83,41 +85,30 @@
     "react-dom": "^17.0.1",
     "react-test-renderer": "17.0.1",
     "rimraf": "3.0.2",
-    "semantic-release": "17.3.9",
+    "semantic-release": "19.0.3",
     "svgo": "^2.1.0",
     "svgson": "4.1.0",
+    "type-fest": "^0.21.1",
     "typescript": "^4.1.5"
   },
   "dependencies": {
     "@planningcenter/icons": "^14.0.0",
     "@popmotion/popcorn": "^0.4.4",
-    "@popperjs/core": "~2.9.0",
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/user-event": "^13.1.9",
-    "camel-to-kebab": "^1.1.0",
-    "csstype": "^3.0.6",
-    "date-fns": "^2.17.0",
-    "deepmerge": "^4.2.2",
+    "@popperjs/core": "^2.11.6",
+    "date-fns": "^2.29.2",
     "focus-options-polyfill": "^1.6.0",
     "focus-visible": "^5.2.0",
-    "lodash.camelcase": "^4.3.0",
-    "lodash.get": "^4.4.2",
-    "lodash.snakecase": "^4.1.1",
-    "match-sorter": "^6.2.0",
-    "mitt": "^2.1.0",
+    "lodash": "^4.17.21",
+    "match-sorter": "^6.3.1",
+    "mitt": "^3.0.0",
     "mousetrap": "^1.6.5",
-    "polished": "^4.1.1",
+    "polished": "^4.2.2",
     "popper-max-size-modifier": "^0.2.0",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-sticky-box": "^0.9.3",
-    "resize-observer-polyfill": "^1.5.1",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-sticky-box": "^1.0.2",
     "stylefire": "^7.0.3",
-    "tabbable": "~5.2.1",
-    "tiny-invariant": "^1.1.0",
+    "tabbable": "^6.0.0",
     "tiny-spring": "^1.0.0",
-    "type-fest": "^0.21.1",
-    "use-constant": "^1.1.0",
-    "warning": "^4.0.3",
-    "zustand": "^3.3.2"
+    "zustand": "^4.1.1"
   }
 }

package/src/DataTable/hooks/useCollapsibleRows.js

@@ -1,5 +1,5 @@
 import { createContext, useCallback, useContext, useEffect } from 'react'
-import useConstant from 'use-constant'
+import useConstant from '../../hooks/useConstant'
 import create from 'zustand'
 
 import { range } from '../../utils'

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)'
+    )
+  })
+})