feat(modal): add modal provider

src/EightBaseBoostProvider.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React from 'react';
+import { ThemeProvider } from 'emotion-theming';
+
+import { ModalProvider } from './atoms/Modal/ModalProvider';
+import { defaultTheme, resetGlobal } from './theme';
+
+type EightBaseBoostProviderProps = {
+  theme?: Object,
+  children: React$Node,
+};
+
+class EightBaseBoostProvider extends React.Component<EightBaseBoostProviderProps> {
+  static defaultProps = {
+    theme: defaultTheme,
+  };
+
+  componentDidMount() {
+    resetGlobal();
+  }
+
+  render() {
+    const { theme, children } = this.props;
+
+    return (
+      <ThemeProvider theme={ theme }>
+        <ModalProvider>
+          { children }
+        </ModalProvider>
+      </ThemeProvider>
+    );
+  }
+}
+
+export { EightBaseBoostProvider };

src/atoms/Dialog/Dialog.stories.js

@@ -1,10 +1,10 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('ATOMS/Dialog (skip shot)', module, (story, { Dialog, Paragraph, Button }) => {
+  asStory('ATOMS/Dialog (skip shot)', module, (story, { ModalConsumer, Dialog, Paragraph, Button }) => {
     story
       .add('with default header, body, actions and footer (skip shot)', () => (
-        <Dialog.Plate isOpen size="sm">
+        <Dialog.Plate id="ID" size="sm">
           <Dialog.Header title="Mark Job as Completed" />
           <Dialog.Body>
             <Paragraph>
@@ -16,6 +16,33 @@ export default (asStory) => {
             <Button type="submit" text="Apply" />
           </Dialog.Footer>
         </Dialog.Plate>
+      ))
+      .add('with state', () => (
+        <React.Fragment>
+          <Dialog.Plate id="ID" size="sm">
+            {
+              ({ args, onClose }) => (
+                <React.Fragment>
+                  <Dialog.Header title="Mark Job as Completed" onClose={ onClose } />
+                  <Dialog.Body>
+                    <Paragraph>
+                      Fagelia cancrivorous { args.foo } Curucaneca Echinocaris { args.bar } glassful agronomics
+                    </Paragraph>
+                  </Dialog.Body>
+                  <Dialog.Footer>
+                    <Button color="neutral" variant="outlined" text="Cancel" onClick={ onClose } />
+                    <Button type="submit" text="Apply" />
+                  </Dialog.Footer>
+                </React.Fragment>
+              )
+            }
+          </Dialog.Plate>
+          <ModalConsumer>
+            {
+              ({ openModal }) => <Button onClick={ () => openModal('ID', { foo: '00', bar: '00' }) }>Open</Button>
+            }
+          </ModalConsumer>
+        </React.Fragment>
       ));
   });
 };

src/atoms/Dialog/DialogPlate.js

@@ -46,20 +46,26 @@ const StyledTag = createStyledTag(name, {
 
 function DialogPlate({
   children,
+  id,
   isOpen,
   onOpen,
   onClose,
   shouldCloseOnOverlayClick,
   size,
+  args,
   ...rest
   }: DialogPlateProps) {
   return (
-    <Modal isOpen={ isOpen } onOpen={ onOpen } onClose={ onClose } shouldCloseOnOverlayClick={ shouldCloseOnOverlayClick }>
-      <StyledTag tagName="div" size={ size }>
-        <Card.Plate { ...rest }>
-          { children }
-        </Card.Plate>
-      </StyledTag>
+    <Modal id={ id } isOpen={ isOpen } onOpen={ onOpen } onClose={ onClose } args={ args } shouldCloseOnOverlayClick={ shouldCloseOnOverlayClick }>
+      {
+        ({ args, onClose }) => (
+          <StyledTag tagName="div" size={ size }>
+            <Card.Plate { ...rest } args={ args } onClose={ onClose }>
+              { children }
+            </Card.Plate>
+          </StyledTag>
+        )
+      }
     </Modal>
   );
 }

src/atoms/Modal/Modal.js

@@ -3,12 +3,14 @@ import { Portal } from 'react-portal';
 import { injectGlobal } from 'emotion';
 
 import { createStyledTag, createTheme } from '../../utils';
+import { withModalState } from './withModalState';
 
 type ModalProps = {
   children: React$Node,
   isOpen?: boolean,
   onClose?: (any) => void,
   shouldCloseOnOverlayClick?: boolean,
+  id?: string,
 };
 
 type ModalState = {
@@ -88,8 +90,6 @@ class Modal extends PureComponent<ModalProps, ModalState> {
     if (this.props.isOpen) {
       Modal.openedModals -= 1;
 
-      this.setState({ isOpen: false });
-
       if (typeof this.props.onClose === 'function') {
         this.props.onClose();
       }
@@ -120,7 +120,7 @@ class Modal extends PureComponent<ModalProps, ModalState> {
 
   onOverlayMouseDown = () => {
     if (this.props.shouldCloseOnOverlayClick) {
-      this.closeModal();
+      this.props.onClose();
     }
   };
 
@@ -129,14 +129,14 @@ class Modal extends PureComponent<ModalProps, ModalState> {
   };
 
   render() {
-    const { children, isOpen } = this.props;
+    const { children, isOpen, ...rest } = this.props;
 
     return (
       <If condition={ isOpen }>
         <Portal>
           <OverlayTag tagName="div" onMouseDown={ this.onOverlayMouseDown }>
             <ModalTag tagName="div" onMouseDown={ this.onModalMouseDown }>
-              { children }
+              { typeof children === 'function' ? children(rest) : children }
             </ModalTag>
           </OverlayTag>
         </Portal>
@@ -145,4 +145,6 @@ class Modal extends PureComponent<ModalProps, ModalState> {
   }
 }
 
+Modal = withModalState(Modal);
+
 export { Modal, theme };

src/atoms/Modal/Modal.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default (asStory) => {
-  asStory('ATOMS/Modal (skip shot)', module, (story, { Modal }) => {
+  asStory('ATOMS/Modal (skip shot)', module, (story, { Modal, ModalConsumer, Button }) => {
     story
       .add('multiple modals', () => (
         <React.Fragment>
@@ -25,6 +25,33 @@ export default (asStory) => {
             00000<br />
           </Modal>
         </React.Fragment>
+      ))
+      .add('with state', () => (
+        <React.Fragment>
+          <Modal id="ID">
+            {
+              ({ args }) => (
+                <React.Fragment>
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXX{ args.foo }XXXX<br />
+                  XXXX{ args.bar }XXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                  XXXXXXXXXX<br />
+                </React.Fragment>
+              )
+            }
+          </Modal>
+          <ModalConsumer>
+            {
+              ({ openModal }) => <Button onClick={ () => openModal('ID', { foo: '00', bar: '00' }) }>Open</Button>
+            }
+          </ModalConsumer>
+        </React.Fragment>
       ));
   });
 };

src/atoms/Modal/ModalContext.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const { Provider, Consumer } = React.createContext('modal');
+
+export { Provider, Consumer };

src/atoms/Modal/ModalProvider.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+
+import { Provider } from './ModalContext';
+
+class ModalProvider extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {};
+  }
+
+  openModal = (id, args = {}) => {
+    this.setState({
+      [id]: {
+        isOpen: true,
+        args,
+      },
+    });
+  };
+
+  closeModal = (id) => {
+    this.setState({
+      [id]: {
+        isOpen: false,
+      },
+    });
+  }
+
+  collectContextValue = () => ({
+    openModal: this.openModal,
+    closeModal: this.closeModal,
+    state: this.state,
+  });
+
+  render() {
+    const contextValue = this.collectContextValue();
+
+    return (
+      <Provider value={ contextValue }>
+        { this.props.children }
+      </Provider>
+    );
+  }
+}
+
+export { ModalProvider };

src/atoms/Modal/withModal.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Consumer } from './ModalContext';
+
+const withModal = (BaseComponent) => {
+  class ModalStateConsumer extends React.Component {
+    renderBaseComponent = (dialogContext) => {
+      const props = {
+        ...this.props,
+        openModal: dialogContext.openModal,
+        closeModal: dialogContext.closeModal,
+      };
+
+      return <BaseComponent { ...props } />;
+    }
+
+    render() {
+      return <Consumer>{ this.renderBaseComponent }</Consumer>;
+    }
+  }
+
+  return ModalStateConsumer;
+};
+
+export { withModal };

src/atoms/Modal/withModalState.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { Consumer } from './ModalContext';
+
+const withModalState = (BaseComponent) => {
+  class ModalStateConsumer extends React.Component {
+    renderBaseComponentWithModalProps = (modalContext) => {
+      const { id } = this.props;
+
+      const props = {
+        ...this.props,
+        onClose: () => modalContext.closeModal(id),
+        isOpen: modalContext.state[id] ? modalContext.state[id].isOpen : false,
+        args: modalContext.state[id] ? modalContext.state[id].args : undefined,
+      };
+
+      return <BaseComponent { ...props } />;
+    }
+
+    render() {
+      const { id, ...rest } = this.props;
+
+      if (id) {
+        return <Consumer>{ this.renderBaseComponentWithModalProps }</Consumer>;
+      }
+
+      return <BaseComponent { ...rest } />;
+    }
+  }
+
+  return ModalStateConsumer;
+};
+
+export { withModalState };

src/index.js

@@ -4,4 +4,7 @@ export { ThemeProvider } from 'emotion-theming';
 export { defaultTheme, resetGlobal, Z_INDEX } from './theme';
 export * from './atoms';
 export * from './molecules';
+export { Consumer as ModalConsumer } from './atoms/Modal/ModalContext';
+export { withModal } from './atoms/Modal/withModal';
+export { EightBaseBoostProvider } from './EightBaseBoostProvider';
 

storybook/utils.js

@@ -2,27 +2,20 @@
 
 import React from 'react';
 import styled from 'react-emotion';
-import { BrowserRouter } from 'react-router-dom';
 import { storiesOf } from '@storybook/react';
 import * as boost from '../src';
 import { withInfo } from '@storybook/addon-info';
 
-const { ThemeProvider, defaultTheme, resetGlobal, ...components } = boost;
-
-resetGlobal();
+const { EightBaseBoostProvider, ...components } = boost;
 
 const Root = styled('div')`
   margin: 2rem;
 `;
 
 const ThemeDecorator = (storyFn) => (
-  <Root>
-    <BrowserRouter>
-      <ThemeProvider theme={ defaultTheme }>
-        { storyFn() }
-      </ThemeProvider>
-    </BrowserRouter>
-  </Root>
+  <EightBaseBoostProvider>
+    <Root>{ storyFn() }</Root>
+  </EightBaseBoostProvider>
 );
 
 export const asStory = (name: string, module: *, init: *) => {