Replace res.mode from stream to streaming.

We can replace sensorId prop with either id or componentId.

Benefits from doing so:

• lesser ambiguity as to what sensors are.
• sensorId is applied to all components, irrespective of whether they are sensor or actuator components.
• since the library name is no longer on the lines of sensor.js, we won't emphasize the concept out loud. Although it's a nice way to think about UIs and we will continue that as we build out more components.

Implement a DateRangePicker component.

• remove multipleSelect prop
• remove includeSelectAll prop
• remove defaultQuery prop
• sortBy prop should accept only one of ("count", "asc", "desc") string values.
• size prop validation: should accept numeric values between [1, 1000].
• defaultSelected prop should be validated as an Array.
• setting showCount prop to false should disable count from view.

• Fix height for ResultList when no results and when size is <5. (check prop changes)
• size prop is not changing dynamically in storybook.
• Streams results even when no filter is selected.
• When ReactiveList hits the end of the results, the animation spinner should not appear.
• ReactiveList's scroll should be reset when the query changes.

ResultList shows results even when no sensor filters are applied. This can be replicated by selecting one of the filters, and then unselecting it.

• validate from prop to be a Number >= 0.
• validate size prop to be a Number >= 1.
• validate sortBy prop to only accept either asc or desc values.
• When stream is true, use css class rbc-stream-active. When false, use class rbc-stream-inactive.
• When sortOptions prop is enabled, a rbc-sortoptions-active class will be set. When not, a rbc-sortoptions-inactive class will be set.

This is something we have talked once, but it makes sense for keeping a consistent CSS styles API as well as applying theming effects on.

• Wrap the array of HTML elements returned by the onData function inside a div with a rbc-list-item class.

Without user having to define onData prop, the lib should display the results in the order of relevance.

ResultList displays the same height irrespective of the size prop.

See the difference in styles.

Before selecting:

After selecting (for modification):

Components to implement this in:

• SingleList
• MultiList
• SingleDropdownList
• MultiDropdownList

prop name should be selectAllLabel.

Additionally, in MultiList and MultiDropdownList, the "Select All" option should generate tags and / or checkboxes (where applicable) for all the list items.

The tag logic should replace tags if # tags > 5 with a "Clear All" tag instead.

• Color palette choice,
• Consistency in selected state,
• Font styles and layout choices.

• Docs
• Stories
• Style API docs for each component

• size prop should be validated to be between [1, 1000].
• sortBy prop should be validated to be one of ("asc", "desc", "count") string values.
• showCount prop should work.
• no item should be selected by default.
• placeholder prop should be implemented similar to MultiDropdownList component.
• size and sortBy props should re-render the component in storybook playground mode.
• When count is set, show rbc-count-active. When set to false, show rbc-count-inactive in the top level element.

• DataSearch component should support title prop.
• DataSearch component should not have a depends prop.
• autocomplete prop which decides whether autocomplete is applied, defaults to true.
• appbaseField should take either a String or an Object Array of valid fields (order not relevant).

<DataSearch 
    appbaseField={["field 1", "field 2", .. , "field n"]}
... />

• Use regular fonts for displaying input text, no italics and placeholder style should be consistent with other components (i.e. no bold).
• Bring outer style consistency with TextField component.

Component rename from ResultList to ReactiveList. Similarly, PaginatedResultList will be renamed to PaginatedReactiveList.

• Standardize "Select All" using selectAllLabel prop. When selecting all, all the list items should be checkbox selected.
• When count is set, show rbc-count-active. When set to false, show rbc-count-inactive in the top level element.
• Replace searchPlaceholder prop with placeholder.
• When list size > 5, replace the individual filter labels with a Clear All filter label.
• Validate size prop to accept values in the range [0, 1000].
• Validate sortBy prop to accept one of ("count", "asc", "desc") values.
• size and sortBy props should re-render the component in storybook's playground.

Look into Elastic docs for a possible workaround.

Depending on the placeholder state (whether present or absent), apply rbc-placeholder-active and rbc-placeholder-inactive classes.

Applicable components:

• SingleList
• MultiList
• SingleDropdownList
• MultiDropdownList
• NestedList
• TextField
• DataSearch

Replace this line in all stories:

import { ReactiveBase, DatePicker, ResultList } from '../app.js';

with a npm package. Additionally, we can configure the npm package in a way that dev branch uses the dev branch of github for the source and master branch uses the master branch of github.

• change font color and positioning style for placeholder when dark theme is applied.

• When changing prop value from "top" to "both" in storybook, it should adjust for the height difference.

We should apply stable sort before stringifying the objects for a comparison for finding differences.

• Ability to unselect (close) a nested option
  
• Scroll behavior should only be applied on the list items, currently title is scrolled as well
• Support static (i.e. local) search of items like we do in SingleList.
• NestedList component should show updates when storybook props change.

• need to support sortOptions prop. When it is enabled, a rbc-sortoptions-active class will be set. When not, a rbc-sortoptions-inactive class will be set.
• requestOnScroll prop should not be exposed to the user. It should be set to false internally.
• componentStyle prop should be added for adding styles to the top-level component element.
• from prop validation: should be a Number >= 0.
• size prop validation: should be Number >= 1.
• When user does not specify the onData callback, a default UI similar to the one in ResultList component should appear. We should add a story for this.

• Add a prop multiSelect which defaults to true for switch between multiple select and single select modes.
• Show case as user inputs in the data[i].label prop field. Currently all options are shown in uppercase.
• CSS: change class names from title-true and title-false to rbc-title-active and rbc-title-inactive.
• CSS: add a new class state for multiSelect prop with rbc-multiselect-active and rbc-multiselect-inactive.
• CSS: btn class in button element should be rbc namespaced.
• CSS logic: there should be a class for button state, like btn-active. Currently, this is done with classes named as blue-grey, light-blue -> this is bad for both usability as well as when extending the components.

Props

• componentId
• title
• react
• placeholder
• onData

Styles

rbc-reactiveelement
rbc-title-active / rbc-title-inactive
rbc-placeholder-active / rbc-placeholder-inactive

Compatible with light and dark themes.

A NumberBox UI widget is useful for travel search experience websites like Kayak, as well as in an e-commerce setting for deciding quantities of an item in the cart.

Props Spec

componentId String
id of the component, referenced inside an actuator query.
appbaseField String
sets the DB field to be mapped with the UI component view.
title String [optional]
sets the title of the the component.
data Object
sets the label and associated start and end values.
labelPosition String [optional]
sets the label position, available options are "left", "right", "top", "bottom". Defaults to "left".
defaultSelected Number [optional]
sets the initial value of the NumberBox. Defaults to the start value in the data object.

CSS Styles API Spec

State Classes

• rbc-title-active / rbc-title-inactive depending on if the title prop is set.
• rbc-label-left / rbc-label-top / rbc-label-bottom / rbc-label-right depending on the labelPosition prop's value.

The component will use a term query behind the scenes to do an exact match on the selected value.

• size prop should be validated to be between [1, 1000].
• Replace searchPlaceholder prop with placeholder.
• sortBy prop should be validated to be one of ("asc", "desc", "count") string values.
• showCount prop should work.
• size and sortBy props should re-render the component in storybook playground mode.
• When count is set, show rbc-count-active. When set to false, show rbc-count-inactive in the top level element.

• Add a max-height prop to SingleList, MultiList and NestedList components.

A powered by component allows adding a powered by appbase.io logo. Examples of the images to be displayed below.

• Create sass theme file for a dark layout.
• Refactor sass variables.
• Write docs for theme styling.

The current query is passed as a prop called actuate in the actuator components. It takes in the sensor along with the operator and customQuery spec.

We will revamp the data query format to be sensor specific. Each sensor defines its own query format via the customQuery and executeQuery props.

Example Usage:

<SingleList
  ..
  customQuery={this.customQuery}
  executeQuery={true}
/>

customQuery is an optional prop for overriding the default query that the component comes with. It takes a function with one argument value that contains the sensor's current input state.

executeQuery is a boolean prop that is set by default to true. When set to false, the query is not executed when the sensor value updates.

In the actuator component, we will have a react prop which takes a dependency Object of all the sensors it depends on.

The dependency object is formed by boolean clauses: and, or, not as key values which can either have component(s) or a nested boolean clause as their value.

Example#1:

react={{
  "and": "citySensor"
}}

Example#2:

react={{
  "and": ["citySensor", "searchSensor"]
}}

Example#3:

react={{
  "and": {
    "or": "geoBoundsSensor",
    "and": "citySensor"
  }
}}

Example#4:

react={{
  "or": {
     "and": ["citySensor", "dataSensor"],
     "not": "searchSensor"
  }
}}

In theory, we can allow any level of nesting using conjunctions. This tree when parsed, should match cleanly to the boolean query in Elasticsearch Query DSL except the filter clause.

ResultList shows list items with an infinite scroll. PaginatedResultList can allow showing items by page and can have additional props related to page properties.

• add an option to go to the first and last page.

Typical use-case: Scroll to top (body / ResultList) when page is changed

• Replace startThreshold, endThreshold with a threshold object.
• threshold prop should be validated for accepting only numeric values in it's start and end keys, and end >= start.

• Replace bold and italics with regular fonts for user input.

Showing sort options in the UI for ResultList component. We support three options:

1. default (sort by relevance)
2. asc (sort by ascending order of the appbaseField prop)
3. desc (sort by descending order of the appbaseField prop)

depends prop can be replaced with actuate. What we are really saying here is that an actuator component's view should update when any of the underlying sensor component changes their state(s).

Benefits I see:

• actuate is a fresh word with the right meaning and it also helps that it relates to the word actuator.
• Depends or dependency has an associated meaning in the context of compiler / library dependencies.

A NestedList component can be useful for displaying a hierarchy of elements.

• Need a prop spec,
• Clear implementation obstacles,
• Add a story,
• Add to docs.

Example of a Nested List from material-ui.com:

• Standardize "Select All" using selectAllLabel prop. When selecting all, all the list items should be checkbox selected.
• When count is set, show rbc-count-active. When set to false, show rbc-count-inactive in the top level element.
• Replace searchPlaceholder prop with placeholder.
• Validate size prop to accept values in the range [0, 1000].
• Validate sortBy prop to accept one of ("count", "asc", "desc") values.
• size and sortBy props should re-render the component in storybook's playground.

Now that we have had a good set of changes in the props for individual components, we should make all the props available in the playground story for each component.

Scrolling ResultList component causes the outer page to scroll as well, an undesirable behavior.

• Remove the sensorInputId prop and its related codebase.
• Component style should be consistent b/w when autocomplete is enabled and disabled.

RangeSlider's histogram query / UI freezes when the total range is in few thousands. Ideally, the range should be able to vary up to several hundreds of thousands without freezing.

When multiple options are selected, ButtonGroup composes them under a must query, i.e. intersecting all the options. It should instead be using a should clause under the parent must clause that combines different sensor conditions.

A query from reactivemaps example with the meetupblast dataset.

{
   "query":{
      "bool":{
         "should":[
            {
               "bool":{
                  "must":[
                     {
                        "Term":{
                           "group.group_city.raw":"San Francisco"
                        }
                     },
                     [
                        {
                           "range":{
                              "guests":{
                                 "gte":0,
                                 "lte":2,
                                 "boost":2
                              }
                           }
                        },
                        {
                           "range":{
                              "guests":{
                                 "gte":2,
                                 "lte":4,
                                 "boost":2
                              }
                           }
                        },
                        {
                           "range":{
                              "guests":{
                                 "gte":4,
                                 "lte":6,
                                 "boost":2
                              }
                           }
                        }
                     ]
                  ]
               }
            }
         ],
         "minimum_should_match":1
      }
   },
   "size":100,
   "from":0
}

Implement a DatePicker component.