How to use the @dhis2/d2-ui-core.Store.create function in @dhis2/d2-ui-core

import TextField from 'material-ui/TextField/TextField';
import { Observable } from 'rxjs';
import { getInstance, config } from 'd2';
import camelCaseToUnderscores from 'd2-utilizr/lib/camelCaseToUnderscores';
import ColorPicker from './ColorPicker.component';

import { Store } from '@dhis2/d2-ui-core';
import { Validators } from '@dhis2/d2-ui-forms';
import { mapProps } from '@dhis2/d2-ui-core';

config.i18n.strings.add('required');
config.i18n.strings.add('should_be_lower_than_end_value');
config.i18n.strings.add('should_be_higher_than_start_value');

export const legendItemStore = Store.create();

// FormBuilder currently requires an event to be passed for fields
function createFakeEvent(color) {
    return {
        target: {
            value: color,
        },
    };
}

export function openEditDialogFor(model) {
    legendItemStore.setState({
        model,
        open: true,
    });
}

import { Observable } from 'rxjs/Observable';
import { Store } from '@dhis2/d2-ui-core';
import { appsMenuSource$ } from '../utils/menu-sources';

const headerBarSettingsStore = Store.create();

export function setGrid(grid) {
    headerBarSettingsStore.setState(
        Object.assign({}, headerBarSettingsStore.getState() || {}, {
            grid,
        }),
    );
}

setGrid({ x: 3, y: 3 });

export default Observable.combineLatest(
    appsMenuSource$,
    headerBarSettingsStore,
    (appItems, headerBarSettings) => ({
        ...headerBarSettings,

/>
            
        );
    }
}

DataElementOperandSelector.propTypes = {
    dataElementOperandSelectorActions: PropTypes.object,
    dataElementOperandStore: PropTypes.object,
    onSelect: PropTypes.func.isRequired,
    listStyle: PropTypes.object,
};

DataElementOperandSelector.defaultProps = {
    dataElementOperandSelectorActions: createDataElementOperandActions(),
    dataElementOperandStore: Store.create(),
    listStyle: styles.list,
};

DataElementOperandSelector.contextTypes = {
    d2: PropTypes.object,
};

export default DataElementOperandSelector;

import React from 'react';
import PropTypes from 'prop-types';

import { Card, CardText } from 'material-ui/Card';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import {Store} from '@dhis2/d2-ui-core';
import {GroupEditor} from '@dhis2/d2-ui-group-editor';

const itemStore = Store.create();
const assignedItemStore = Store.create();

export default class GroupEditorExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            filterText: '',
        };

        this.props.d2.i18n.translations['assign_all'] = 'Assign all';
        this.props.d2.i18n.translations['hidden_by_filters'] = 'Hidden by filters';

        this.filterChange = this.filterChange.bind(this);
    }

import React from 'react';
import PropTypes from 'prop-types';

import { Card, CardText } from 'material-ui/Card';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

import {Store} from '@dhis2/d2-ui-core';
import {GroupEditor} from '@dhis2/d2-ui-group-editor';

const itemStore = Store.create();
const assignedItemStore = Store.create();

export default class GroupEditorExample extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            filterText: '',
        };

        this.props.d2.i18n.translations['assign_all'] = 'Assign all';
        this.props.d2.i18n.translations['hidden_by_filters'] = 'Hidden by filters';

        this.filterChange = this.filterChange.bind(this);
    }

    getChildContext() {

palette: {
        primary1Color: blue500,
        primary2Color: blue700,
        primary3Color: lightBlack,
        accent1Color: '#276696',
        accent2Color: '#E9E9E9',
        accent3Color: grey500,
        textColor: darkBlack,
        alternateTextColor: white,
        canvasColor: white,
        borderColor: grey300,
        disabledColor: fade(darkBlack, 0.3),
    },
};

const store = Store.create();

export default class Example extends React.Component {
    constructor(props) {
        super(props);

        let d2 = this.props.d2;

        d2.i18n.translations['search_by_name'] = 'Search by name';
        d2.i18n.translations['field_is_required'] = 'Field is required';
        d2.i18n.translations['organisation_unit_counts'] = 'Org Unit Counts';
        d2.i18n.translations['please_select_a_program'] = 'Please select a program';
        d2.i18n.translations['reporting_rates'] = 'Reporting rates';

        d2.i18n.translations['program_data_elements'] = 'Program data elements';
        d2.i18n.translations['program_tracked_entity_attributes'] = 'Program tracked entity attributes';
        d2.i18n.translations['program_indicators'] = 'Program indicators';

import { Observable } from 'rxjs/Observable';
import log from 'loglevel';
import uniqBy from 'lodash/fp/uniqBy';
import curry from 'lodash/fp/curry';
import get from 'lodash/fp/get';
import { Action } from '@dhis2/d2-ui-core';
import { Store } from '@dhis2/d2-ui-core';
import addDeepLinksForMaintenance from './sources/maintenance-app';
import addDeepLinksForSettings from './sources/settings-app';
import headerBarStore$ from '../headerBar.store';
import { appsMenuItems$ } from '../headerBar.store';

const identity = v => v;

const searchResultBoxStateStore$ = Store.create({
    getInitialState() {
        return {
            isSearchFieldFocused: false,
            open: false,
            searchValue: '',
            selected: 0,
            searchResults: [],
        };
    }
});

const getParentApp = get('parentApp');
const hasParentApp = item => !!getParentApp(item);
const uniqueByName = uniqBy(item => item.name);
const filterByValue = curry((searchTerms, item) => searchTerms.every(term => item.label.toLowerCase().includes(term)));
const isFullApp = item => !hasParentApp(item);