feat(utilities): add new @zendesgarden/container-utilities package (#…

…30)

.github/PULL_REQUEST_TEMPLATE.md

@@ -19,7 +19,7 @@
 
 ## Checklist
 
-- [ ] :globe_with_meridians: Storybook demo is up-to-date (`yarn storybook`)
+- [ ] :globe_with_meridians: Storybook demo is up-to-date (`yarn start`)
 - [ ] :wheelchair: analyzed via [axe](https://www.deque.com/axe/) and evaluated using VoiceOver
 - [ ] :guardsman: includes new unit tests
 - [ ] :memo: tested in Chrome, Firefox, Safari, Edge, and IE11

.travis.yml

@@ -21,6 +21,8 @@ script:
   - yarn lerna bootstrap --ignore-scripts
   - yarn test:all --coverage --runInBand
 
+after_success: yarn coveralls < demo/coverage/lcov.info
+
 before_deploy:
   - yarn build
   - yarn build:demo

README.md

@@ -1,4 +1,4 @@
-# Garden React Containers [![Build Status](https://img.shields.io/travis/zendeskgarden/react-containers/master.svg?style=flat-square)](https://travis-ci.com/zendeskgarden/react-containers) [![Dependency Status](https://img.shields.io/david/dev/zendeskgarden/react-containers.svg?style=flat-square)](https://david-dm.org/zendeskgarden/react-containers?type=dev) [![Coverage Status](https://img.shields.io/coveralls/github/zendeskgarden/react-containers/master.svg?style=flat-square)](https://coveralls.io/github/zendeskgarden/react-containers) <!-- markdownlint-disable -->
+# Garden React Containers [![Build Status](https://img.shields.io/travis/com/zendeskgarden/react-containers/master.svg?style=flat-square)](https://travis-ci.com/zendeskgarden/react-containers) [![Dependency Status](https://img.shields.io/david/dev/zendeskgarden/react-containers.svg?style=flat-square)](https://david-dm.org/zendeskgarden/react-containers?type=dev) [![Coverage Status](https://img.shields.io/coveralls/github/zendeskgarden/react-containers/master.svg?style=flat-square)](https://coveralls.io/github/zendeskgarden/react-containers) <!-- markdownlint-disable -->
 
 <!-- markdownlint-enable -->
 
@@ -24,6 +24,7 @@ to install.
 | [`@zendeskgarden/container-schedule`](packages/schedule)           | [![npm version][schedule npm version]][schedule npm link]           | [![Dependency Status][schedule dependency status]][schedule dependency link]           |
 | [`@zendeskgarden/container-selection`](packages/selection)         | [![npm version][selection npm version]][selection npm link]         | [![Dependency Status][selection dependency status]][selection dependency link]         |
 | [`@zendeskgarden/container-tooltip`](packages/tooltip)             | [![npm version][tooltip npm version]][tooltip npm link]             | [![Dependency Status][tooltip dependency status]][tooltip dependency link]             |
+| [`@zendeskgarden/container-utilities`](packages/utilities)         | [![npm version][utilities npm version]][utilities npm link]         | [![Dependency Status][utilities dependency status]][utilities dependency link]         |
 
 [breadcrumb npm version]: https://img.shields.io/npm/v/@zendeskgarden/container-breadcrumb.svg?style=flat-square
 [breadcrumb npm link]: https://www.npmjs.com/package/@zendeskgarden/container-breadcrumb
@@ -65,6 +66,10 @@ to install.
 [tooltip npm link]: https://www.npmjs.com/package/@zendeskgarden/container-tooltip
 [tooltip dependency status]: https://img.shields.io/david/zendeskgarden/react-containers.svg?path=packages/tooltip&style=flat-square
 [tooltip dependency link]: https://david-dm.org/zendeskgarden/react-containers?path=packages/tooltip
+[utilities npm version]: https://img.shields.io/npm/v/@zendeskgarden/container-utilities.svg?style=flat-square
+[utilities npm link]: https://www.npmjs.com/package/@zendeskgarden/container-utilities
+[utilities dependency status]: https://img.shields.io/david/zendeskgarden/react-containers.svg?path=packages/utilities&style=flat-square
+[utilities dependency link]: https://david-dm.org/zendeskgarden/react-containers?path=packages/utilities
 
 ## Usage
 

package.json

@@ -20,61 +20,62 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "@babel/cli": "7.2.3",
-    "@babel/core": "7.2.2",
-    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/cli": "7.4.3",
+    "@babel/core": "7.4.4",
+    "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-transform-object-assign": "7.2.0",
-    "@babel/polyfill": "7.2.5",
-    "@babel/preset-env": "7.2.3",
+    "@babel/polyfill": "7.4.4",
+    "@babel/preset-env": "7.4.4",
     "@babel/preset-react": "7.0.0",
-    "@storybook/addon-a11y": "^5.0.1",
-    "@storybook/addon-centered": "5.0.1",
-    "@storybook/addon-knobs": "5.0.1",
-    "@storybook/addon-storysource": "5.0.1",
-    "@storybook/addons": "5.0.1",
-    "@storybook/react": "5.0.1",
-    "@storybook/theming": "5.0.1",
-    "@zendeskgarden/css-variables": "6.2.1",
-    "@zendeskgarden/eslint-config": "7.0.9",
+    "@storybook/addon-a11y": "^5.0.11",
+    "@storybook/addon-centered": "5.0.11",
+    "@storybook/addon-knobs": "5.0.11",
+    "@storybook/addon-storysource": "5.0.11",
+    "@storybook/addons": "5.0.11",
+    "@storybook/react": "5.0.11",
+    "@storybook/theming": "5.0.11",
+    "@zendeskgarden/css-variables": "6.3.2",
+    "@zendeskgarden/eslint-config": "7.2.1",
     "@zendeskgarden/react-testing": "2.0.2",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "babel-loader": "8.0.4",
-    "chalk": "2.4.1",
-    "core-js": "2.5.7",
-    "enzyme": "3.8.0",
-    "enzyme-adapter-react-16": "1.7.1",
+    "babel-jest": "24.7.1",
+    "babel-loader": "8.0.5",
+    "chalk": "2.4.2",
+    "core-js": "3.0.1",
+    "coveralls": "3.0.3",
+    "enzyme": "3.9.0",
+    "enzyme-adapter-react-16": "1.12.1",
     "enzyme-to-json": "3.3.5",
-    "eslint": "5.9.0",
-    "eslint-config-prettier": "3.3.0",
-    "eslint-plugin-jest": "22.0.0",
-    "eslint-plugin-jsx-a11y": "6.1.2",
-    "eslint-plugin-notice": "0.7.7",
-    "eslint-plugin-prettier": "3.0.0",
-    "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-react-hooks": "1.5.0",
-    "handlebars": "4.0.12",
+    "eslint": "5.16.0",
+    "eslint-config-prettier": "4.2.0",
+    "eslint-plugin-jest": "22.5.1",
+    "eslint-plugin-jsx-a11y": "6.2.1",
+    "eslint-plugin-notice": "0.7.8",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.13.0",
+    "eslint-plugin-react-hooks": "1.6.0",
+    "handlebars": "4.1.2",
     "handlebars-helpers": "0.10.0",
-    "husky": "1.2.0",
-    "inquirer": "6.2.0",
-    "jest": "23.6.0",
-    "jest-enzyme": "7.0.1",
-    "lerna": "3.4.3",
-    "lint-staged": "8.1.0",
-    "markdownlint-cli": "^0.13.0",
+    "husky": "2.2.0",
+    "inquirer": "6.3.1",
+    "jest": "24.7.1",
+    "jest-enzyme": "7.0.2",
+    "lerna": "3.13.4",
+    "lint-staged": "8.1.6",
+    "markdownlint-cli": "0.15.0",
     "mock-raf": "1.0.1",
     "popper.js": "1.15.0",
-    "prettier": "1.15.2",
-    "prettier-package-json": "2.0.1",
-    "react": "16.8.2",
-    "react-dom": "16.8.2",
-    "regenerator-runtime": "0.13.1",
-    "rimraf": "2.6.2",
-    "uglifyjs-webpack-plugin": "2.1.1",
-    "webpack": "4.26.0",
-    "webpack-bundle-analyzer": "3.0.3",
-    "webpack-cli": "3.1.2",
+    "prettier": "1.17.0",
+    "prettier-package-json": "2.1.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "regenerator-runtime": "0.13.2",
+    "rimraf": "2.6.3",
+    "uglifyjs-webpack-plugin": "2.1.2",
+    "webpack": "4.30.0",
+    "webpack-bundle-analyzer": "3.3.2",
+    "webpack-cli": "3.3.1",
     "webpack-node-externals": "1.7.2"
   }
 }

packages/.template/src/ExampleContainer.spec.js

@@ -29,7 +29,7 @@ describe('ExampleContainer', () => {
     it('applies correct accessibility role', () => {
       const div = findDiv(wrapper);
 
-      expect(div).toHaveProp('cool', true);
+      expect(div).toHaveProp('role', 'region');
     });
   });
 });

packages/.template/src/useExample.js

@@ -8,9 +8,13 @@
 import { useState } from 'react';
 
 export function useExample({ coolProp }) {
-  const [example, setExample] = useState(0);
+  const [label] = useState(coolProp || 'cool');
 
-  const getCoolProps = ({ coolProp = 'cool', ...other } = {}) => ({ coolProp, ...other });
+  const getCoolProps = ({ role = 'region', ariaLabel = label, ...props } = {}) => ({
+    role,
+    'aria-label': ariaLabel,
+    ...props
+  });
 
   return {
     getCoolProps

packages/.template/stories.js

@@ -18,11 +18,13 @@ storiesOf('Example Container', module)
     const Example = ({ coolProp }) => {
       const { getCoolProps } = useExample({ coolProp });
 
-      return <div {...getCoolProps()} />;
+      return <div {...getCoolProps()}>Hello World</div>;
     };
 
-    return <Example coolProp />;
+    return <Example coolProp="test" />;
   })
   .add('ExampleContainer', () => (
-    <ExampleContainer>{({ getCoolProps }) => <div {...getCoolProps()} />}</ExampleContainer>
+    <ExampleContainer>
+      {({ getCoolProps }) => <div {...getCoolProps({ ariaLabel: 'test' })}>Hello World</div>}
+    </ExampleContainer>
   ));

packages/breadcrumb/package.json

@@ -18,8 +18,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
-    "react": "16.8.0-alpha.0",
-    "react-dom": "16.8.0-alpha.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@zendeskgarden/css-breadcrumbs": "^0.2.2"

packages/field/package.json

@@ -16,6 +16,9 @@
   "scripts": {
     "build": "../../utils/scripts/build.sh"
   },
+  "dependencies": {
+    "@zendeskgarden/container-utilities": "^0.0.0"
+  },
   "peerDependencies": {
     "prop-types": "^15.6.1",
     "react": "^16.8.0",

packages/field/src/index.js

@@ -12,4 +12,4 @@ export { useField } from './useField';
 export { FieldContainer } from './FieldContainer';
 
 /* Utils */
-export { generateId, setIdCounter } from './utils/IdManager';
+export { generateId, setIdCounter } from '@zendeskgarden/container-utilities';

packages/field/src/index.spec.js

@@ -7,7 +7,7 @@
 
 import { getExports } from '@zendeskgarden/react-testing';
 import * as rootIndex from './';
-import * as IdManager from './utils/IdManager';
+import { generateId, setIdCounter } from '@zendeskgarden/container-utilities';
 
 describe('Index', () => {
   it('exports all components and utilities', async () => {
@@ -21,8 +21,7 @@ describe('Index', () => {
               .split('/')
               .pop()
           )
-          .filter(file => !/(IdManager)/u.test(file))
-          .concat(Object.keys(IdManager))
+          .concat(Object.keys({ generateId, setIdCounter }))
           .sort();
       }
     });

packages/field/src/useField.js

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import { generateId } from './utils/IdManager';
+import { generateId } from '@zendeskgarden/container-utilities';
 
 export function useField(idPrefix) {
   const [prefix] = useState(idPrefix || generateId('garden-field-container'));

packages/field/stories.js

@@ -15,6 +15,7 @@ import { FieldContainer, useField } from './src';
 storiesOf('Field Container', module)
   .addDecorator(withKnobs)
   .add('useField', () => {
+    // eslint-disable-next-line react/prop-types
     const Field = ({ id }) => {
       const { getLabelProps, getInputProps, getHintProps } = useField(id);
       const [value, setVal] = React.useState('');

packages/focusjail/package.json

@@ -17,7 +17,7 @@
     "build": "../../utils/scripts/build.sh"
   },
   "dependencies": {
-    "@zendeskgarden/container-selection": "^0.2.3",
+    "@zendeskgarden/container-utilities": "^0.0.0",
     "dom-helpers": "^3.4.0",
     "tabbable": "^4.0.0"
   },

packages/focusjail/src/FocusJailContainer.spec.js

@@ -6,7 +6,7 @@
  */
 
 import React, { useRef } from 'react';
-import { KEY_CODES } from '@zendeskgarden/container-selection';
+import { KEY_CODES } from '@zendeskgarden/container-utilities';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 
@@ -17,6 +17,7 @@ describe('FocusJailContainer', () => {
   let focusSpy;
   let containerReference;
 
+  // eslint-disable-next-line react/prop-types
   const BasicExample = ({ focusOnMount, focusElem = focusSpy } = {}) => {
     const containerRef = useRef(null);
 

packages/focusjail/src/useFocusJail.js

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useState, useCallback } from 'react';
-import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-selection';
+import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
 import tabbable from 'tabbable';
 import activeElement from 'dom-helpers/activeElement';
 
@@ -16,6 +16,7 @@ export function useFocusJail({ focusOnMount = true, environment, focusElem, cont
   // skip changes to a ref on first render
   const [currentRef, setCurrentRef] = useState(containerRef.current);
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(() => {
     if (containerRef.current !== currentRef) {
       setCurrentRef(containerRef.current);
@@ -88,14 +89,11 @@ export function useFocusJail({ focusOnMount = true, environment, focusElem, cont
     };
   };
 
-  useEffect(
-    () => {
-      if (focusOnMount) {
-        focusElement(currentRef);
-      }
-    },
-    [focusOnMount, focusElement, currentRef]
-  );
+  useEffect(() => {
+    if (focusOnMount) {
+      focusElement(currentRef);
+    }
+  }, [focusOnMount, focusElement, currentRef]);
 
   return {
     getContainerProps,

packages/keyboardfocus/package.json

@@ -17,7 +17,7 @@
     "build": "../../utils/scripts/build.sh"
   },
   "dependencies": {
-    "@zendeskgarden/container-selection": "^0.2.3"
+    "@zendeskgarden/container-utilities": "^0.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/keyboardfocus/src/useKeyboardFocus.js

@@ -7,7 +7,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 
-import { composeEventHandlers } from '@zendeskgarden/container-selection';
+import { composeEventHandlers } from '@zendeskgarden/container-utilities';
 
 export function useKeyboardFocus() {
   const [keyboardFocused, setKeyboardFocused] = useState(false);

packages/modal/package.json

@@ -17,9 +17,8 @@
     "build": "../../utils/scripts/build.sh"
   },
   "dependencies": {
-    "@zendeskgarden/container-field": "^0.1.0",
     "@zendeskgarden/container-focusjail": "^1.0.0",
-    "@zendeskgarden/container-selection": "^0.2.3"
+    "@zendeskgarden/container-utilities": "^0.0.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/modal/src/ModalContainer.spec.js

@@ -7,7 +7,7 @@
 
 import React, { createRef } from 'react';
 import { mount } from 'enzyme';
-import { KEY_CODES } from '@zendeskgarden/container-selection';
+import { KEY_CODES } from '@zendeskgarden/container-utilities';
 import { ModalContainer } from './ModalContainer';
 
 describe('FocusJailContainer', () => {

packages/modal/src/useModal.js

@@ -6,8 +6,7 @@
  */
 
 import { useState } from 'react';
-import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-selection';
-import { generateId } from '@zendeskgarden/container-field';
+import { composeEventHandlers, generateId, KEY_CODES } from '@zendeskgarden/container-utilities';
 import { useFocusJail } from '@zendeskgarden/container-focusjail';
 
 export function useModal({ onClose, modalRef, id: _id } = {}) {

packages/schedule/package.json

@@ -18,8 +18,8 @@
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
-    "react": "16.8.0-alpha.0",
-    "react-dom": "16.8.0-alpha.0"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "keywords": [
     "a11y",