[dialog] add dialog component

src/dialog/Dialog.jsx

@@ -0,0 +1,24 @@
+import { Overlay } from '../overlay/Overlay.jsx';
+import style from './dialog.css';
+
+function Dialog ({}, children) {
+    return function (state, actions) {
+        if (!state.dialog.isOpen) {
+            return null;
+        }
+
+        return (
+            <Overlay>
+                <button className={style.close} onclick={actions.dialog.close} />
+
+                <div className={style.content}>
+                    {children}
+                </div>
+            </Overlay>
+        );
+    };
+}
+
+export {
+    Dialog
+};

src/dialog/dialog.css

@@ -0,0 +1,26 @@
+.close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate3d(50%, -50%, 0);
+    height: 1.4em;
+    width: 1.4em;
+    line-height: 1;
+    background: #DDD;
+    border: 0;
+    border-radius: 3px;
+    box-shadow: 0 0 3px #666;
+}
+
+.close:after {
+    content: 'x';
+    line-height: 0;
+}
+
+.content {
+    overflow-y: auto;
+    flex: 1;
+}

src/dialog/dialogActions.js

@@ -0,0 +1,25 @@
+const dialogActions = {
+    dialog: {
+        close () {
+            return function (state) {
+                return {
+                    ...state,
+                    isOpen: false
+                };
+            };
+        },
+
+        open () {
+            return function (state) {
+                return {
+                    ...state,
+                    isOpen: true
+                };
+            };
+        }
+    }
+};
+
+export {
+    dialogActions
+};

src/dialog/dialogState.js

@@ -0,0 +1,10 @@
+const dialogState = {
+    dialog: {
+        isOpen: false,
+        dialogType: null
+    }
+};
+
+export {
+    dialogState
+}