app.ts

import { run } from '@cycle/xstream-run';
import xs, { Stream } from 'xstream';
import { DOMSource } from "@cycle/dom/xstream-typings";
import { makeDOMDriver, div, input, p, VNode } from '@cycle/dom';

import Sidebar from './components/sidebar';

export class UIState {
    public selectedTool: string;
}

export interface IUIStateSource {
    UIState$: Stream<UIState>
}

export interface IDOMSource {
    DOM: DOMSource;
}

export interface IUIStateSink {
    UIState$: Stream<UIState>
}
export interface IDOMSink {
    DOM: Stream<VNode>;
}

function main(sources: IDOMSource & IUIStateSource): IDOMSink & IUIStateSink {
    let sidebar = Sidebar(sources);
    const vtree$ = xs.combine(sidebar.DOM /* ,other DOMSources here */)
	.map(cn => div('#app', cn));
    return {
	DOM: vtree$,
	UIState$: sidebar.UIState$
    };
}

const drivers: { [name: string]: Function } = {
    DOM: makeDOMDriver(document.body),
    UIState$: () => xs.of({ selectedTool: 'task' } as UIState)
};

run(main, drivers);

components\sidebar.ts

import { div, p } from '@cycle/dom';
import isolate from '@cycle/isolate';
import xs from 'xstream';

import { IDOMSource, IDOMSink, IUIStateSource, IUIStateSink } from '../app';
import ToggleButton from './togglebutton';

export default function(sources: IDOMSource & IUIStateSource): IDOMSink & IUIStateSink {
    let taskBtn = isolate(ToggleButton)(sources, 'task');
    let dependencyBtn = isolate(ToggleButton)(sources, 'dependency');

    const vtree$ = xs.combine(taskBtn.DOM, dependencyBtn.DOM)
	.map(btns => div('#sidebar', btns));

    const btnState$ = xs.merge(taskBtn.UIState$, dependencyBtn.UIState$);

    const sinks = {
	DOM: vtree$,
	UIState$: btnState$
    };

    return sinks;
}

components\togglebutton.ts

import { button, div, p } from '@cycle/dom';
import { IDOMSource, IDOMSink, IUIStateSource, IUIStateSink, UIState } from '../app';
import xs from 'xstream';

export default function(sources: IDOMSource & IUIStateSource, name: string): IDOMSink & IUIStateSink {

    let newUIState$ = sources.DOM.select('button#' + name).events('click').map(
	() => {
	    console.log('Click at ' + name);
	    let newUIState: UIState = { selectedTool: name };
	    return newUIState;
	});

    let uiState$ = xs.merge(sources.UIState$, newUIState$)
	.debug();

    const isActive$ = uiState$.map(s => s.selectedTool == name);
    const vtree$ = isActive$.map(
	a => button('#'+name,
		    a ? {attrs: {'class': 'pressed' }} : {attrs: {'class': 'not-pressed'}},
		    [name]));

    const sinks = {
	DOM: vtree$,
	UIState$: uiState$
    };

    return sinks;
}