feat(components): Adding work in stasis Dialog/Drawer Components. Als…

…o longer webpack build trigger

package.json

@@ -50,7 +50,7 @@
   "dependencies": {
     "@cycle/core": "^6.0.0",
     "@cycle/isolate": "1.2.0",
-    "@eldarlabs/cycle-ui": "0.6.2",
+    "@eldarlabs/cycle-ui": "0.7.0",
     "autoprefixer": "^6.3.4",
     "classnames": "^2.2.3",
     "cycle-snabbdom": "1.2.1",
@@ -73,12 +73,12 @@
     "semantic-release": "4.3.5",
     "style-loader": "^0.13.0",
     "toolbox-loader": "0.0.3",
-    "ts-loader": "^0.8.1",
+    "ts-loader": "0.8.1",
     "tslint": "^3.5.0",
-    "typescript": "^1.8.7",
+    "typescript": "^1.8.10",
     "typings": "0.7.11",
-    "webpack": "^1.10.1",
+    "webpack": "1.12.15",
     "webpack-config": "4.0.0",
-    "webpack-dev-server": "1.14.1"
+    "webpack-dev-server": "^1.14.1"
   }
 }

server.js

@@ -5,7 +5,10 @@ var config = require('./webpack.dev.config');
 // Primary app
 new WebpackDevServer(webpack(config), {
   publicPath: config.output.publicPath,
-  hot: true,
+  hot: false,
+  watchOptions: {
+    aggregateTimeout: 1500,
+  },
   inline: true,
   historyApiFallback: true,
   stats: {colors: true}

src/app.ts

@@ -14,5 +14,5 @@ run(main, {
       AttrsModule, ClassModule,
       HeroModule, EventsModule
     ]
-  })
+  }),
 });

src/components/views/Main.ts

@@ -3,15 +3,23 @@ import { Observable as $ } from 'rx';
 import { HeaderView } from './Header';
 import { FooterView } from './Footer';
 import { KitchenSinkView } from '../../demo/kitchenSink/components/views/KitchenSink';
+// const isolate = require('@cycle/isolate');
+// import { Counter } from '../../demo/counter';
+// import { Counter3 } from '../../demo/counter3';
 
 export function MainView$(sources: any) {
+  //sources.isolate = isolate;
   return $.just(
     div([
-      HeaderView(),
-      article([
-        KitchenSinkView(sources),
-      ]),
-      FooterView()
+    div([
+      //isolate(Counter)(sources).DOM
+      //isolate(Counter3)(sources).DOM
+        HeaderView(),
+        article([
+          KitchenSinkView(sources),
+        ]),
+        FooterView(),
+      ])
     ])
   );
 }

src/demo/counter3/index.ts

@@ -0,0 +1,48 @@
+import { Observable as $ } from 'rx';
+const { div, p } = require('cycle-snabbdom');
+//import { Button } from '@eldarlabs/cycle-ui';
+const isolate = require('@cycle/isolate');
+import { Button } from '@eldarlabs/cycle-ui';
+
+// function Button({DOM, label$, value$}) {
+//   const click$ = DOM.select('button').events('click')
+//     .flatMapLatest(() => value$);
+//
+//   const view$ = label$.map((label: any) => {
+//     return button({}, label);
+//   });
+//
+//   return {
+//     click$,
+//     DOM: view$
+//   };
+// }
+
+export function Counter3(sources: any) {
+  const { DOM } = sources;
+
+  const decrement: any = Button(sources,
+    { isolate: true, className: 'decrement', label: 'Decrement' });
+  const increment = Button(sources,
+    { isolate: true, className: 'increment', label: 'Increment' });
+
+  const action$ = $.merge(
+    DOM.select('.counter').select('.decrement').events('click').map( (ev: any) => -1),
+    DOM.select('.counter').select('.increment').events('click').map( (ev: any) => +1)
+  );
+
+  //const action$ = decrement.click$.merge(increment.click$);
+  const count$ = action$.startWith(0).scan((x: any, y: any) => x + y);
+
+  const view$ = count$.combineLatest(decrement.DOM, increment.DOM,
+    (count: any, dec: any, inc: any) => div('.counter', {}, [
+      dec,
+      inc,
+      p({}, `Counter: ${count}`)
+    ])
+  );
+
+  return {
+    DOM: view$
+  };
+}

src/demo/kitchenSink/components/views/Dialogs.ts

@@ -1,7 +1,8 @@
-import { Button, Card, CardTitle, CardText, Dialog } from '@eldarlabs/cycle-ui';
+import { Button, CardText, Dialog } from '@eldarlabs/cycle-ui';
 import { Observable as $ } from 'rx';
 const { p } = require('cycle-snabbdom');
 //import { CycleComponent } from '@eldarlabs/cycle-ui/helpers/cycleDomInterfaces';
+import { DemoCardView } from '../../../components/DemoCard';
 
 export function Dialogs(sources: any) {
   const DOM = sources.DOM;
@@ -27,21 +28,19 @@ export function Dialogs(sources: any) {
 
   function view(isDialogActive: boolean) {
     return (
-      Card(sources, null, [
-        CardTitle(sources, { title: 'Dialogs (Work in progress)' }, [
-          CardText(sources, [
-            Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
-              raised: true }).DOM,
-            p('is active:' + isDialogActive),
-            Dialog({ title: 'Test Dialog', active: isDialogActive,
-              actions: [cancelButton.DOM, saveButton] }, [
-                p('This is a dialog'),
-                p('A dialog can have multiple children controls')
-              ]
-            ).DOM
-          ]).DOM
+      DemoCardView(sources, 'Dialogs (Work in progress)', [
+        CardText(sources, [
+          Button(sources, { className: 'showDialog', label: 'Show Modal Dialog',
+            raised: true }).DOM,
+          p('is active: ' + isDialogActive),
+          Dialog({ title: 'Test Dialog', active: isDialogActive,
+            actions: [cancelButton.DOM, saveButton] }, [
+              p('This is a dialog'),
+              p('A dialog can have multiple children controls')
+            ]
+          ).DOM
         ]).DOM
-      ]).DOM
+      ])
     );
   }
 

src/demo/kitchenSink/components/views/Drawers.ts

@@ -0,0 +1,61 @@
+import { Button, Card, CardText, CardTitle, Drawer, Input } from '@eldarlabs/cycle-ui';
+import { Observable as $ } from 'rx';
+const { p, h5 } = require('cycle-snabbdom');
+//import { CycleComponent } from '@eldarlabs/cycle-ui/helpers/cycleDomInterfaces';
+import { DemoCardView } from '../../../components/DemoCard';
+
+export function Drawers(sources: any) {
+  const DOM = sources.DOM;
+
+  const showDrawerClick$ = DOM.select('.showDrawer').events('click').
+    map( (ev: Event) => 'show').
+    do((x: any) => console.log('show: ' + x));
+
+  const drawerClose$ = sources.DOM.select('dialog').events('close').
+    startWith(false).
+    map(() => false).
+    do((x: any) => console.log('drawerCloseFromApp: ' + x));
+
+  const isDrawerActive$: $<boolean> = $.merge<boolean>(
+    showDrawerClick$.map(true)
+    , drawerClose$.map(false)
+  ).startWith(false);
+
+  function view(isDrawerActive: boolean) {
+    const drawer = (
+      Drawer(sources, { isolate: false, className: 'drawer', active: isDrawerActive, type: 'left' }, [
+        h5('This is a left drawer'),
+        p('A drawer can have multiple children controls'),
+        Input(sources, { label: 'Input in a Drawer' }).DOM,
+      ])
+    );
+
+    // (<any>drawer).closeEvent$.subscribe( (x: any) => {
+    //   console.log('close obs event: ' + x);
+    // });
+
+    return (
+      Card(sources, { isolate: false, className: 'demoDrawers' }, [
+        CardTitle(sources, { isolate: false, title: 'Drawers (Work in progress)' }, [
+          CardText(sources, { isolate: true }, [
+            Button(sources, { isolate: false, className: 'showDrawer', label: 'Show Drawer',
+              raised: true }).DOM,
+            p('is active: ' + isDrawerActive),
+            drawer.DOM,
+          ]).DOM
+        ]).DOM
+      ]).DOM
+    );
+  }
+
+  const vtree$ = (
+  //  $.combineLatest(drawerClose$, isDrawerActive$, (drawerClose: boolean, isDrawerActive: boolean) => {
+    isDrawerActive$.map( (isDrawerActive: boolean) => {
+      return view(isDrawerActive);
+    })
+  );
+
+  return {
+    DOM: vtree$,
+  };
+}

src/demo/kitchenSink/components/views/KitchenSink.ts

@@ -2,6 +2,7 @@ const { section, h2 } = require('cycle-snabbdom');
 import { ButtonsView } from './Buttons';
 import { CounterDemoView } from './CounterDemo';
 import { Dialogs } from './Dialogs';
+// import { Drawers } from './Drawers';
 import { HeadingsView } from './Headings';
 import { InputsView } from './Inputs';
 import { SpielView } from './Spiel';
@@ -14,8 +15,8 @@ export function KitchenSinkView(sources: any) {
   return (
     section(`.${style.content}`, [
       SpielView(),
-      CounterDemoView(sources),
       h2('Controls'),
+      // Drawers(sources).DOM,
       Dialogs(sources).DOM,
       ButtonsView(sources),
       InputsView(sources),

src/demo/kitchenSink/components/views/Radios.ts

@@ -1,4 +1,4 @@
-import { Card, CardTitle, CardActions, RadioButton, RadioGroup } from '@eldarlabs/cycle-ui';
+import { CardActions, RadioButton, RadioGroup } from '@eldarlabs/cycle-ui';
 import { DemoCardView } from '../../../components/DemoCard';
 
 export function RadiosView(sources: any) {