feat: add Toast, ToastProvider, CloseButton, and AnimatedList components

Author: Brian Stone

.eslintrc

@@ -1,3 +1,6 @@
 {
+  "env": {
+    "browser": true,
+  },
   "extends": ["plugin:zillow/recommended", "plugin:zillow/jest"]
 }

package-lock.json

@@ -35,10 +35,12 @@
     }
   },
   "dependencies": {
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-spring": "^8.0.27"
   },
   "peerDependencies": {
     "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "styled-components": ">=4.1.2"
   },
   "devDependencies": {
@@ -51,6 +53,7 @@
     "glob": "^7.1.4",
     "husky": "^3.0.2",
     "jest-styled-components": "^6.3.1",
+    "lolex": "^4.1.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-test-renderer": "^16.8.6",

package.json

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { animated, Transition } from 'react-spring/renderprops.cjs';
+import getTheme from '../../theme/getTheme';
+
+const Item = styled(animated.li)`
+    ${getTheme('AnimatedListItem')}
+`;
+
+/**
+ * An `AnimatedList` provides a default animation for addition and removal of items in a list.
+ * The animation is provided by the [react-spring](https://www.react-spring.io/) library.
+ *
+ * ##### Browser Support
+ * react-spring [requires polyfills](https://github.com/vai0/react-spring/blob/f579b20709/documentation/Gotchas.mdx#browser-support)
+ * for Internet Explorer -- if those polyfills are not detected, the list will not animate.
+ */
+const AnimatedList = styled(({ children, enter, from, leave, ...rest }) => {
+    // feature detect for react-spring compatability, otherwise render static items
+    let content;
+    if (Object.entries) {
+        content = (
+            <Transition
+                native
+                keys={child => child.key || child}
+                items={children}
+                from={from}
+                enter={enter}
+                leave={leave}
+            >
+                {child => style => <Item style={style}>{child}</Item>}
+            </Transition>
+        );
+    } else {
+        content = React.Children.map(children, child => <Item>{child}</Item>);
+    }
+
+    return <ul {...rest}>{content}</ul>;
+})`
+    ${getTheme('AnimatedList')}
+`;
+
+AnimatedList.propTypes = {
+    /**
+     * A dynamic list of items. Each item will be wrapped by an `<AnimatedList.Item>` component.
+     * By default, the content of each item will be used as the key. For non-trivial lists, you will
+     * want to add a `key` attribute to each item.
+     */
+    children: PropTypes.node,
+    /**
+     * The react-spring [`Transition`](https://www.react-spring.io/docs/props/transition) `enter` prop.
+     */
+    // eslint-disable-next-line zillow/react/forbid-prop-types
+    enter: PropTypes.any,
+    /**
+     * The react-spring [`Transition`](https://www.react-spring.io/docs/props/transition) `from` prop.
+     */
+    // eslint-disable-next-line zillow/react/forbid-prop-types
+    from: PropTypes.any,
+    /**
+     * The react-spring [`Transition`](https://www.react-spring.io/docs/props/transition) `leave` prop.
+     */
+    // eslint-disable-next-line zillow/react/forbid-prop-types
+    leave: PropTypes.any,
+};
+
+AnimatedList.defaultProps = {
+    enter: { opacity: 1, height: 'auto' },
+    from: { opacity: 0, height: 0 },
+    leave: { opacity: 0, height: 0 },
+};
+
+AnimatedList.Item = Item;
+
+/** @component */
+export default AnimatedList;

src/components/AnimatedList/AnimatedList.jsx

@@ -0,0 +1,25 @@
+```jsx
+import { Button } from '../../index';
+
+initialState = {
+    items: []
+};
+
+const onAddClick = () => {
+    setState({
+        items: [ ...state.items, Math.random() ]
+    });
+};
+
+const onRemoveClick = () => {
+    setState({ items: state.items.slice(1) });
+};
+
+<React.Fragment>
+    <Button onClick={onAddClick}>Add</Button>{' '}
+    <Button onClick={onRemoveClick}>Remove</Button>
+    <AnimatedList>
+        {state.items}
+    </AnimatedList>
+</React.Fragment>
+```

src/components/AnimatedList/AnimatedList.md

@@ -0,0 +1,50 @@
+import React from 'react';
+import TestRenderer from 'react-test-renderer';
+import { ThemeProvider, css, isStyledComponent } from 'styled-components';
+import { AnimatedList } from '../../../index';
+import { createTestTheme } from '../../../test/util';
+
+describe('<AnimatedList>', () => {
+    it('can render without theme', () => {
+        const testRenderer = TestRenderer.create(
+            <AnimatedList>{['one', 'two', 'three']}</AnimatedList>
+        );
+        expect(testRenderer.toJSON()).toMatchSnapshot();
+    });
+
+    describe('without Object.entries', () => {
+        const { entries } = global.Object;
+        beforeEach(() => {
+            delete global.Object.entries;
+        });
+        afterEach(() => {
+            global.Object.entries = entries;
+        });
+        it('renders a static list when react-spring is not supported', () => {
+            const testRenderer = TestRenderer.create(
+                <AnimatedList>{['one', 'two', 'three']}</AnimatedList>
+            );
+            expect(testRenderer.toJSON()).toMatchSnapshot();
+        });
+    });
+
+    it('can render with theme', () => {
+        const theme = createTestTheme({
+            AnimatedList: css`
+                list-style: none;
+            `,
+        });
+        const testRenderer = TestRenderer.create(
+            <ThemeProvider theme={theme}>
+                <AnimatedList>{['one', 'two', 'three']}</AnimatedList>
+            </ThemeProvider>
+        );
+        const tree = testRenderer.toJSON();
+        expect(tree).toHaveStyleRule('list-style', 'none');
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('is a styled-component', () => {
+        expect(isStyledComponent(AnimatedList)).toBe(true);
+    });
+});