How to use the searchkit.SearchkitManager function in searchkit

SearchBox, Hits, RefinementListFilter, Pagination,
    HierarchicalMenuFilter, HitsStats, SortingSelector, NoHits,
    SelectedFilters, ResetFilters, RangeFilter, NumericRefinementListFilter,
    ViewSwitcherHits, ViewSwitcherToggle,
    Layout, TopBar, LayoutBody, LayoutResults,
    ActionBar, ActionBarRow, SideBar, encodeObjUrl, QueryAccessor
} from "searchkit"

import { MovieHitsGridItem, MovieHitsListItem } from "../../components"

// require("@searchkit/autosuggest/src/styles.css")
require("searchkit/release/theme.css")


const searchkitMovies = new SearchkitManager("http://demo.searchkit.co/api/movies/");
const searchkitTaxonomy = new SearchkitManager("http://demo.searchkit.co/api/taxonomy/")
import "./styles.scss"

const Heading = ({ children }) =&gt; <div>{children}</div>

const App = () =&gt; (
    <div>
        
            
                
                    Taxonomy
                    </div>

module.exports = (url) => {
  const sk = new SearchkitManager(url);

  const story = 
    
  

  // Story specific tests.
  specs(() => describe('Select filter', function () {
    it('Widget should be select with at least two values', function () {

ItemCheckboxList, CheckboxItemList, ItemHistogramList, Select, // ItemList, Tabs, Toggle, TagCloud,

	/* Components - Range */
	//RangeSliderHistogram, RangeSliderHistogramInput, RangeInput, RangeSlider, RangeHistogram, RangeSliderInput, RangeHistogramInput

	// Query DSL
	//MultiMatchQuery, TermQuery, BoolShould, BoolMust, BoolMustNot, RangeQuery, FilteredQuery, MatchQuery, MatchPhrasePrefix, SimpleQueryString,

	/* Filters */
	RefinementListFilter, ResetFilters, MenuFilter, GroupedSelectedFilters, //SelectedFilters, HierarchicalMenuFilter, HierarchicalRefinementFilter, NumericRefinementListFilter ,CheckboxFilter, DynamicRangeFilter, RangeFilter, InputFilter, TagFilter, TagFilterList, TagFilterConfig
} from "searchkit";

require("./index.scss");

const host = (process.env.ELASTIC_URL || "//fccpublicsearch.herokuapp.com/fccnn")
const searchkit = new SearchkitManager(host, {
	searchOnLoad: true,
	useHistory: true,
  basicAuth:(process.env.ELASTIC_AUTH || null)
})

function refreshMe() {
	// NOTE: This is disabled for now until future implementation
	//searchkit.reloadSearch()
	//console.log('refreshed')
}

const InitialLoaderComponent = (props) => {
	const {bemBlocks} = props
	return (
		<div>
    Loading, please wait...</div>

module.exports = (url) => {
  const sk = new SearchkitManager(url);
  
  const story = 
    
  

  // Story specific tests.
  specs(() => describe('Location input', function () {
    it('Location input should have the geosuggest__input class', function () {
      let output = mount(story);
      expect(output.find('input[type="text"]').hasClass('geosuggest__input')).to.be.true;
    });
  }));

constructor() {
    super()
    // const host = "http://localhost:9200/imdb/movies"
    const host = "http://demo.searchkit.co/api/movies"

    this.searchkit = new SearchkitManager(host)
    // this.searchkit.setQueryProcessor(queryOptimizer)
    this.searchkit.translateFunction = (key) => {
      return { "pagination.previous": "<", "pagination.next": ">" }[key]
    }
    this.state = {
      displayMode: "thumbnail",
      operator: "OR"
    }
  }

let defaultCollectionURL =
  "https://buildhub.prod.mozaws.net/v1/buckets/build-hub/collections/releases/";
// There is an exception to this rule, the default (when
// REACT_APP_KINTO_COLLECTION_URL isn't set) depends on how this UI is rendered.
if (
  window.location.pathname &&
  window.location.pathname.search(/\/stage\//) > -1
) {
  defaultCollectionURL =
    "https://buildhub.stage.mozaws.net/v1/buckets/build-hub/collections/releases/";
}
const KINTO_COLLECTION_URL =
  process.env.REACT_APP_KINTO_COLLECTION_URL || defaultCollectionURL;

const searchkit = new SearchkitManager(KINTO_COLLECTION_URL, {
  searchUrlPath: "search"
});

const HitsTable = ({ hits }) => {
  return (
    <div style="{{">
      <table style="{{">
        <thead>
          <tr>
            <th>
            </th><th>Product</th>
            <th>Version</th>
            <th>platform</th></tr></thead></table></div>

searchRouter.get('/', (req, res)=> {
    let searchPath = req.originalUrl.split('?')[1] || ''
    let searchkit = new SearchkitManager(host, {
      useHistory: false,
      searchOnLoad:false
    })    
    ReactDOMServer.renderToString()
    searchkit.emitter.clear()
    searchkit.searchFromUrlQuery(searchPath)
        .then((searchkitState)=> {
            let appState = {...searchkitState, host}
            let content = ReactDOMServer.renderToString()
            res.send(SearchHTMLTemplate({ appState,content }))
        })

})

constructor() {
    super()
    const host = "http://demo.searchkit.co/api/taxonomy"
    this.searchkit = new SearchkitManager(host)
  }

import React, { Component } from 'react'
import extend from 'lodash/extend'
import { SearchkitManager,SearchkitProvider,
  SearchBox, RefinementListFilter, Pagination,
  HierarchicalMenuFilter, HitsStats, SortingSelector, NoHits,
  ResetFilters, RangeFilter, NumericRefinementListFilter,
  ViewSwitcherHits, ViewSwitcherToggle, DynamicRangeFilter,
  InputFilter, GroupedSelectedFilters,
  Layout, TopBar, LayoutBody, LayoutResults,
  ActionBar, ActionBarRow, SideBar } from 'searchkit'
import './index.css'

const host = "http://demo.searchkit.co/api/movies"
const searchkit = new SearchkitManager(host)

const MovieHitsGridItem = (props)=> {
  const {bemBlocks, result} = props
  let url = "http://www.imdb.com/title/" + result._source.imdbId
  const source = extend({}, result._source, result.highlight)
  return (
    <div data-qa="hit">
      <a href="{url}">
        <img height="240" width="170" src="{result._source.poster}" alt="presentation" data-qa="poster">
        <div data-qa="title"></div>
      </a>
    </div>
  )
}

const MovieHitsListItem = (props)=&gt; {

constructor() {
    super()
    const host = "/api/crimes"
    this.searchkit = new SearchkitManager(host)
  }