feat(dialog): improve docs and add ConfirmDialog component

Author: minheq

doczrc.js

@@ -1,19 +1,32 @@
 import { reactNative } from 'docz-plugin-react-native';
-import merge from 'webpack-merge';
 
-const extensionsResolvers = {
-  resolve: {
-    extensions: ['.web.js', '.web.ts', '.web.tsx', '.js', '.ts', '.tsx'],
-  },
-};
+const overridingExtensions = [
+  '.web.js',
+  '.web.jsx',
+  '.web.ts',
+  '.web.tsx',
+  '.js',
+  '.jsx',
+  '.ts',
+  '.tsx',
+  '.mdx',
+  '.json',
+  '.mjs',
+];
 
 export default {
   title: 'Paramount',
   typescript: true,
   plugins: [reactNative()],
   hashRouter: true,
-  modifyBundlerConfig: config => {
-    return merge(config, extensionsResolvers);
+  modifyBundlerConfig: defaultConfig => {
+    return {
+      ...defaultConfig,
+      resolve: {
+        ...defaultConfig.resolve,
+        extensions: overridingExtensions,
+      },
+    };
   },
   themeConfig: {
     showPlaygroundEditor: true,

package.json

@@ -81,7 +81,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx,md,mdx}": [
+    "*.{js,jsx,ts,tsx}": [
       "yarn fix",
       "git add"
     ]

src/components/Button/Button.tsx

@@ -12,9 +12,6 @@ import { LoadingDots } from '../Loading';
 import { Text } from '../Typography';
 
 export interface IButtonProps {
-  /**
-   * Text of the button
-   */
   children?: string;
 
   /**

src/components/Dialog/ConfirmDialog.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { FiX } from 'react-icons/fi';
+import { TouchableOpacity } from 'react-native';
+
+import { withTheme } from '../../theme';
+import { ButtonColor } from '../../theme/component-variables/buttonVariables';
+import { Button } from '../Button';
+import { GridBox } from '../Layout';
+import { Heading } from '../Typography';
+import Dialog, { IDialogProps } from './Dialog';
+
+export interface IConfirmDialogProps
+  extends IDialogProps,
+    IConfirmDialogHeaderProps,
+    IConfirmDialogFooterProps {}
+
+export interface IConfirmDialogHeaderProps {
+  /** Title displayed in the header */
+  title?: string;
+  onClose?: () => void;
+}
+
+const ConfirmDialogHeader = ({ title, onClose }: IConfirmDialogHeaderProps) => (
+  <GridBox
+    padding={2}
+    flexDirection="row"
+    justifyContent="space-between"
+    alignItems="center"
+  >
+    <Heading>{title}</Heading>
+    <TouchableOpacity onPress={onClose}>
+      <FiX size={24} />
+    </TouchableOpacity>
+  </GridBox>
+);
+
+export interface IConfirmDialogFooterProps {
+  color?: ButtonColor;
+  /** Label for cancel button */
+  cancelLabel?: string;
+  /** Label for confirm button */
+  confirmLabel?: string;
+  /** Handler for confirm button */
+  onConfirm?: () => void;
+  /** Handler for cancel button */
+  onClose?: () => void;
+}
+
+const ConfirmDialogFooter = ({
+  color = 'primary',
+  onClose,
+  onConfirm,
+  cancelLabel,
+  confirmLabel,
+}: IConfirmDialogFooterProps) => (
+  <GridBox padding={2} flexDirection="row" justifyContent="flex-end">
+    <Button appearance="minimal" onPress={onClose}>
+      {cancelLabel}
+    </Button>
+    <GridBox paddingLeft={2}>
+      <Button color={color} onPress={onConfirm}>
+        {confirmLabel}
+      </Button>
+    </GridBox>
+  </GridBox>
+);
+
+const ConfirmDialogWithoutTheme = (props: IConfirmDialogProps) => {
+  const {
+    cancelLabel = 'Cancel',
+    children,
+    confirmLabel = 'Confirm',
+    footer,
+    header,
+    onClose,
+    onConfirm,
+    title,
+    ...dialogProps
+  } = props;
+
+  return (
+    <Dialog
+      header={
+        header === null
+          ? null
+          : header || <ConfirmDialogHeader onClose={onClose} title={title} />
+      }
+      footer={
+        footer === null
+          ? null
+          : footer || (
+              <ConfirmDialogFooter
+                onClose={onClose}
+                onConfirm={onConfirm}
+                cancelLabel={cancelLabel}
+                confirmLabel={confirmLabel}
+              />
+            )
+      }
+      onClose={onClose}
+      {...dialogProps}
+    >
+      <GridBox padding={2}>{children}</GridBox>
+    </Dialog>
+  );
+};
+
+export const ConfirmDialog = withTheme(ConfirmDialogWithoutTheme);
+export default ConfirmDialog;

src/components/Dialog/Dialog.mdx

@@ -7,19 +7,25 @@ import { Toggle } from 'react-powerplug';
 import { Playground, PropsTable } from 'docz';
 
 import { Dialog } from '.';
+import { ConfirmDialog } from '.';
 import { Button } from '../Button';
 import { Box } from '../Layout';
 import { Text } from '../Typography';
 
-## Usage
+## Dialog
 
-### Go
+Dialog has no predefined styling and handlers. The content, header and footer is completely in your control. For a more out-of-box usage, you can use `ConfirmDialog` below
 
 <Playground>
   <Toggle initial={false}>
     {({ on, toggle }) => (
       <Box>
-        <Dialog isVisible={on} onClose={toggle}>
+        <Dialog
+          header={<Text>Header</Text>}
+          footer={<Text>Footer</Text>}
+          isVisible={on}
+          onClose={toggle}
+        >
           <Box height={1800}>
             <Text>Put any content in the dialog</Text>
           </Box>
@@ -30,6 +36,56 @@ import { Text } from '../Typography';
   </Toggle>
 </Playground>
 
-## Props
+## Dialog Props
 
 <PropsTable of={Dialog} />
+
+## ConfirmDialog
+
+Opposed to `Dialog` (above), `ConfirmDialog` has predefined styling and handlers; however, it still can pass props from `Dialog`
+
+<Playground>
+  <Toggle initial={false}>
+    {({ on, toggle }) => (
+      <Box>
+        <ConfirmDialog
+          title="Confirm dialog"
+          isVisible={on}
+          onClose={toggle}
+          cancelLabel="Cancel label"
+          confirmLabel="Confirm label"
+        >
+          <Text>Add custom content here</Text>
+        </ConfirmDialog>
+        <Button onPress={toggle}>Open dialog</Button>
+      </Box>
+    )}
+  </Toggle>
+</Playground>
+
+## ConfirmDialog without header
+
+Opposed to `Dialog` (above), `ConfirmDialog` has predefined styling and handlers; however, it still can pass props from `Dialog`
+
+<Playground>
+  <Toggle initial={false}>
+    {({ on, toggle }) => (
+      <Box>
+        <ConfirmDialog
+          header={null}
+          isVisible={on}
+          onClose={toggle}
+          cancelLabel="Cancel label"
+          confirmLabel="Confirm label"
+        >
+          <Text>Add custom content here</Text>
+        </ConfirmDialog>
+        <Button onPress={toggle}>Open dialog</Button>
+      </Box>
+    )}
+  </Toggle>
+</Playground>
+
+## ConfirmDialog Props
+
+<PropsTable of={ConfirmDialog} />

src/components/Dialog/Dialog.tsx

@@ -7,12 +7,15 @@ import Modal from './Modal';
 // TODO: Import from react-native when react-native-web implementation is ready
 
 export interface IDialogProps {
-  isVisible?: boolean;
   children: React.ReactNode;
   theme: ITheme;
+  /** To show dialog or not */
+  isVisible?: boolean;
   /** Called when clicking on overlay or pressing Esc */
   onClose?: () => void;
+  /** In ConfirmDialog, you can pass null to render nothing. If it is undefined, it will use default value */
   header?: React.ReactNode;
+  /** In ConfirmDialog, you can pass null to render nothing. If it is undefined, it will use default value */
   footer?: React.ReactNode;
 }
 
@@ -29,7 +32,7 @@ const DialogWithoutTheme = (props: IDialogProps) => {
   } = theme.getDialogStyles();
 
   return (
-    <Modal visible={isVisible} transparent>
+    <Modal visible={isVisible} transparent onDismiss={onClose}>
       <View style={modalContainerStyle}>
         <View style={containerStyle}>
           {header}

src/components/Dialog/Modal.web.tsx

@@ -4,9 +4,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ModalProps } from 'react-native';
 
+const ESC_KEY = 27;
+
 class Modal extends React.Component<ModalProps> {
   public el: HTMLDivElement;
   public modalRoot: HTMLBodyElement;
+  public content: React.RefObject<HTMLDivElement> = React.createRef();
 
   constructor(props: ModalProps) {
     super(props);
@@ -16,12 +19,24 @@ class Modal extends React.Component<ModalProps> {
 
   public componentDidMount() {
     this.modalRoot.appendChild(this.el);
+    if (this.content.current) {
+      this.content.current.focus();
+    }
   }
 
   public componentWillUnmount() {
     this.modalRoot.removeChild(this.el);
   }
 
+  public handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const { onDismiss } = this.props;
+
+    if (event.keyCode === ESC_KEY && onDismiss) {
+      event.stopPropagation();
+      onDismiss();
+    }
+  };
+
   public render() {
     const { transparent, visible } = this.props;
 
@@ -31,13 +46,17 @@ class Modal extends React.Component<ModalProps> {
       <div>
         {ReactDOM.createPortal(
           <div
+            ref={this.content}
+            onKeyDown={this.handleKeyDown}
+            tabIndex={-1}
             style={{
               backgroundColor: transparent ? 'transparent' : 'white',
               bottom: 0,
               left: 0,
               position: 'fixed',
               right: 0,
               top: 0,
+              zIndex: 1000,
             }}
           >
             {this.props.children}

src/components/Dialog/index.ts

@@ -1 +1,2 @@
 export { default as Dialog } from './Dialog';
+export { default as ConfirmDialog } from './ConfirmDialog';

src/theme/component-variables/dialogVariables.ts

@@ -6,7 +6,7 @@ export interface IDialogVariables {
   body: ViewStyle;
   container: ViewStyle;
   modalContainer: ViewStyle;
-  overlay: ViewStyle;
+  overlay: ViewStyle & { cursor: string };
 }
 
 export const getDialogVariables = (
@@ -16,15 +16,11 @@ export const getDialogVariables = (
     body: {
       maxHeight: 400,
       overflow: 'scroll',
-      paddingBottom: 16,
-      paddingLeft: 16,
-      paddingRight: 16,
-      paddingTop: 16,
     },
     container: {
       backgroundColor: 'white',
       elevation: 1,
-      marginTop: 200,
+      marginTop: 300,
       maxWidth: 600,
       minWidth: 280,
       position: 'relative',
@@ -39,6 +35,7 @@ export const getDialogVariables = (
     overlay: {
       backgroundColor: 'rgba(0,0,0,0.3)',
       bottom: 0,
+      cursor: 'auto',
       height: '100%',
       left: 0,
       position: 'absolute',