React/Redux Search Widget ·

This Widget provides an easy-to-use fullscreen UI for a search interface.

Usage

SearchWidget.create({
  apiUrl: 'http://jjuhznbemfbsm7ibz-mock.stoplight-proxy.io/search' // required
  preload: true, // whether to fetch data on create or not (optional)
  triggerRoute: '#/finder', // used to open the widget (optional)
  triggerKey: 'F', // hit SHIFT+F to open the widget (optional)
  localStorageKey: 'search-widget-react-redux', // used to identify data in localstorage (optional)
});

Dependencies

The embedding page needs to provide the following libraries:

• Material Icon Font
• Open Sans Font
• Bootstrap ^3.3.0

Development

Prerequisites

Ensure you have installed (globally) the following software on your system:

• node.js ^7.0.0
• yarn ^0.24.0
• watchman ^4.7.0

Setup

# install dependencies
$ yarn install

# start the development server
$ yarn start

# run the tests
$ yarn test

# run the tests in watch mode
$ yarn test:watch

# run the linters (js+css)
$ yarn lint

API Endpoint

In order to fetch data, the apiUrl endpoint is required to be json:api spec compliant. The dummy apiUrl is specified here: https://search-widget-react-redux.api-docs.io.

Passing the query parameter is also implemented according to jsonapi:spec filtering recommandation.

Things to consider

JavaScript

• Babel for transpiling JavaScript
• webpack for module bundling
• React for building user interfaces
• Redux for state management
• Redux-Saga for managing side effects
• Jest for testing
• testdouble for mocking/stubbing/spying
• eslint for linting JavaScript

HTML/CSS

• PostCSS for transforming CSS
• cssnext for using tomorrow's CSS syntax today
• SUITCSS for compoent-based UIdevelopment
• Atomic Design for creating and maintaining robust UI systems
• stylelint for linting CSS

Other

• stoplight for defining the mock api
• json:api for shared conventions on implementing JSON API's
• surge for publishing static web front-ends
• circleci for continuous integration
• codeclimate for healthy code
• pre-push for running git-hooks, like linting and testing

Copyright © Rudolf Schmidt, released under the MIT license