appbaseio / reactivesearch Goto Github PK

When unselecting the NestedList value from the SelectedFilter component, the NestedList selections stop working.

Currently, all ReactiveSearch component title props are supporting String datatype. They should also accept HTML element as an alternative to String.

we are a SaaS startup and have our own search enginge developed. is it possible to use this component without having an appbase account? if so, is there a documentation for it.

Add a highlight prop similar to the DataSearch component -
appbaseio/reactivebase#91.

NestedList component's react prop (i.e. when the NestedList component depends on other components) does not correctly apply to the nested (child) list values.

• onData() method's returning JSON object can have an additional field "image_size", which can take "small" and "large" as valid values. A small value will render the image in an icon size.
• "desc" field can use styling improvements.

For defaultSelected prop, only items which are present in the NestedList should be selected and values which are not found in the list should be ignored (Similar to NativeList).

https://opensource.appbase.io/reactivesearch/examples/airbeds/

The view shows up as blank when switched. Playground link

Also from a UI perspective, there should be a way to display the current active view.

We will move the storybook and associated playground build and config files to its own repo at reactive-playground. That way we can use a unified playground across all reactive* projects.

In doing so, we will also build a jquery-esque plugin to filter stories by applied tags (which can also be set as a URL query parameter)

Reference: appbaseio/reactivebase#78

Update e-commerce example recipe to use all ReactiveSearch components.

Are we following the style syntax https://opensource.appbase.io/reactive-manual/v1.0.0/advanced/StyleGuide.html for each component?

• NestedList
• MultiLevelMenu
• ResultList
• ResultCard
• CategorySearch
• DynamicRangeSlider
• RatingsFilter
• TagCloud
• ToggleList

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped for the query.
• title String [optional]
  title of the component, optional.
• multiSelect Boolean [optional]
  whether to allow multiple tag selections. Defaults to false.
• defaultSelected String or Array
  pre-selected values, specified as one of String or Array type. Same validation logic as with ToggleList.
• showCount Boolean [optional]
  whether to show the count next to the data label. Defaults to false.

Component would be sorted in alphabetical order, and for the time being, will not support any other sort options. The size of the labels will depend on the frequency of their occurrence. Selected label will show a background-color effect.

CSS Styles API

rbc-count-active
rbc-multiselect-active
rbc-title-active

Stories

1. Basic story
2. With default Selected values
3. With multi-select set and default Selected values
4. with dark theme
5. Playground.

• Add URLParam prop : boolean (default false) in all the sensor components.

Sync Pagination with Reactivebase actuators

Create a 4-step interactive tutorial to guide a user towards building an example ReactiveSearch app.

Step 1: Create App
Step 2: Importer Upload Interface - Upload data, we will provide an example JSON to be directly uploaded
Step 3: Importer + Dejavu View Interface - Provide mappings and view uploaded data
Step 4: Show the final app UI (with an external link to running with codepen)

• Switch ReactiveBase components to ReactiveSearch components.
• Fix additional styling issues
• Create a blog post.

When using sortOptions together with the showResultStats prop, there is a styles overlap. Also setting showResultStats prop to false has a side effect on the sortOptions prop's UI element.

Originally filed under ReactiveBase, but it couldn't be replicated over there - appbaseio/reactivebase#98.

Currently, the cursor position doesn't change on the Search components. We need to support cursor movements based on the user inputs.

Possible fix involves working with Reactive-select and applying an event.PreventDefault().

Components will now have additional props showFilter and filterLabel to show the filter labels associated with current value selections.

Reference: appbaseio/reactivebase#133.

Like RangeSlider but decides its range based on the underlying data, i.e. dynamically.

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped with UI for querying. Should be numeric.
• title String
  title of the component, optional.
• rangeLabels Function [optional]
  takes a function(start_val, end_val) and returns an object in the format:

{
  "start": "start label",
  "end": "end label"
}

• defaultSelected Function [optional]
  takes a function(start_val, end_val) and returns an object in the format:

{
  "start": 0,
  "end": 10
}

• showHistogram Boolean
  whether to show the histogram. Defaults to true.
• stepValue Number
  step value specifies the slider stepper. Value should be an integer between 1 and floor(#total-range/2). Defaults to 1.

CSS Styles API

rbc-histogram-active
rbc-rangelabels-active
rbc-title-active

Stories

1. Basic story
2. Story with passing labels via a function
3. With default selected
4. With a different step value than 1
5. In a dark theme
6. Playground.

• Update the NestedList component to be in sync with ReactiveBase
• Delete the NestedList component from ReactiveBase.
• Delete the NestedList story from ReactiveBase.
• Delete the NestedList story from ReactiveMaps.

By default, the interval prop (for the number of histogram bars) should be set to Math.ceil((range.end - range.start) / 10). We already do this in RangeSlider component https://github.com/appbaseio/reactivebase/blob/dev/app/sensors/RangeSlider.js#L243.

• Restrict DynamicRangeSlider histogram query if it is not applied.

@metagrover Perhaps while building the meetup example for Reactive Maps, we can build one that can also be re-used here. For the layout, try to keep it closely aligned to the design spec.

Need relative and responsive style design. TBD.

• Normalize the price ranges
• Add date availability

• Change showPagination prop to pagination.

We will also include a CSS style class for the same, rbc-pagination-active and rbc-pagination-inactive.

Reference: appbaseio/reactivebase#76.

Current implementation of NestedList component supports up to two levels of aggregations. We should implement a generic aggregations query that can support 'n' levels --> and currently limit n to recurse to a depth of 10 (We will wait till the day an actual use-case needs more than that).

In DynamicRangeSlider component, when showHistogram prop is set as false, an empty aggs array is passed. This causes a bad query exception.

Do not pass the aggs object when a histogram query isn't needed.

• Flex layout when the Result Card Items have only two elements in a row.

Result components should wrap the markup with <div>...</div> instead of <a>...</a> when url property is not set.

This is essential for cases when you have <a /> in your title or desc property, because in such cases if the outer wrapper is also an <a> tag, you will end up with nested <a> tags.

When applying sortOptions prop, the resulting query gets sorted on an "undefined" field.

and generates a 400 search parse exception.

The result is a sad list with nothing to show.

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped for the query.
• title String [optional]
  title of the component, optional.
• data Object Array
  an array of objects with start, end numeric values and label as either string or HTML.

{[
  {"start": 4, "end": 5, "label": "4 stars and up"}, 
  {"start": 3, "end": 5, "label": "3 stars and up"}, 
  {"start": 1, "end": 5, "label": "> 1 stars"}
]}

• defaultSelected Object
  pre-selected ratings value, specified with start and end keys, values should match one of the elements in the data array prop.

CSS Styles API

rbc-title-active

For a selected item, there should be a rbc-active class.

Stories

1. Basic story
2. With default selected values
3. with dark theme
4. Playground.

An extension of Data Search component meant to be used in e-commerce search settings.

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped for the query.
• categoryField String
  DB field path for finding search results by category.
• title String [optional]
  title of the component, optional.
• size Number [optional]
  total suggestions to be displayed, defaults to 10.
• defaultSuggestions Object Array [optional]
  an array of objects with value as string and label as either string or HTML.

{[
  {"value": "breakfast", "label": {<p><i className="fa-icon">Breakfast</p>}}, 
  {"value": "lunch", "label": {<p><i className="fa-icon">Lunch</p>}}, 
  {"value": "dinner", "label": {<p><i className="fa-icon">Dinner</p>}}
]}

• defaultSelected String [optional]
  pre-selected text by which search should happen.

showSuggestions prop is always set to be true for this component and not exposed in the props spec.

CSS Styles API

rbc-title-active

For a selected item, there should be a rbc-active class.

Stories

1. Basic story
2. With default suggestions applied
3. with dark theme
4. Playground.

• Use *-list-container style on the outer menu and *-sublist-container style on the inner menu

• Update the annotated image accordingly.

Update the CategorySearch component to incorporate the new changes in the search UI/Ux and autosuggestion functionality.

How can possible to implement in vue.js

We should only show "PoweredBy" logo on the actuator when component's current height >= 300px.

Reference: appbaseio/reactivebase#72

defaultOnData method will show JSON objects in results if onData method is absent

• Product Hunt search should work on both title and description.
• Airbnb components should implement react prop between themselves.
• E-commerce sensor components should implement the react prop between themselves.
• E-commerce example's category search filter does not show any results on picking a category.
• Yelp's suggestions seem to be broken.
  While it shows "BARDS TOWN", clicking on it doesn't bring up any results.
• Meetup's search topics box doesn't show any suggestions. I tried "Big Data", "Single", "Social"

We should implement a noResults view in all examples.

Importantly, we are selling the search functionality and that is broken in some key examples. We need to fix that first.

Currently, NestedList component shows stale data for inner lists when initializing. We should only show fresh data (and perhaps use a loader when set?).

• Show Powered by logo only when container height > 300px.
• Better way to detect infinite scroll page.

NestedList query must return null when the list is closed.

Component Props

• componentId String
  component ID.
• appbaseField String
  DB field to be mapped for the query.
• title String
  title of the component, optional.
• data Object Array
  an object array of {label:label, value:value} kv pairs, label is displayed in the UI and value is the corresponding actual field value in the database. Note: label can be specified as either String or HTML.
• multiSelect Boolean
  whether to allow multiple selections, true by default.
• defaultSelected String or Array
  pre-selected values, specified as one of String or Array type.
• showCount Boolean
  whether to show the count next to the data label.

CSS Styles API

rbc-count-active
rbc-multiselect-active
rbc-title-active

Stories

1. Basic story
2. Story with passing label as a HTML markup
3. Without title attribute
4. With default Selected values
5. In a dark theme
6. Playground.

Adding interval prop which sets the histogram interval, tied to the change in the DateRange component appbaseio/reactivebase#94

We should componentStyle to all the ReactiveSearch specific components to get compatibility with ReactiveBase components.

Reference: appbaseio/reactivebase#81

NestedList: Depth UI (Hide if value is not available in nested fields).