<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';
import {
  Configure,
  InstantSearch,
  Index,
  Highlight,
  Pagination,
  SearchBox,
  SortBy,
} from '../packages/react-instantsearch/dom';
import {
  connectHits,
  connectAutoComplete,
  connectStateResults,
} from '../packages/react-instantsearch/connectors';
import Autosuggest from 'react-autosuggest';
import { displayName, filterProps } from './util';

const stories = storiesOf('<Index>', module);

stories
  .add('MultiHits', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />
      <div className="multi-index_content">
        <div className="multi-index_categories-or-brands">
          <Index indexName="categories">
            <div>Categories: </div>
            <Configure hitsPerPage={3} />
            <CustomCategoriesOrBrands />
          </Index>
          <Index indexName="brands">
            <div>Brand: </div>
            <Configure hitsPerPage={3} />
            <CustomCategoriesOrBrands />
          </Index>
        </div>
        <div className="multi-index_products">
          <Index indexName="products">
            <div>Products: </div>
            <Configure hitsPerPage={5} />
            <CustomProducts />
          </Index>
        </div>
      </div>
    </InstantSearch>
  ))
  .add('AutoComplete', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <Configure hitsPerPage={3} />
      <Index indexName="brands" />
      <Index indexName="products">
        <Configure hitsPerPage={5} />
      </Index>
      <AutoComplete />
    </InstantSearch>
  ))
  .add('with SortBy nested in same Index as Root', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />

      <div className="multi-index_content">
        <div className="multi-index_categories-or-brands">
          <Index indexName="categories">
            <Configure hitsPerPage={3} />

            <SortBy
              defaultRefinement="categories"
              items={[
                { value: 'categories', label: 'Categories' },
                { value: 'bestbuy', label: 'Best buy' },
              ]}
            />

            <CustomCategoriesOrBrands />
          </Index>

          <Index indexName="products">
            <Configure hitsPerPage={3} />

            <SortBy
              defaultRefinement="products"
              items={[
                { value: 'products', label: 'Products' },
                { value: 'brands', label: 'Brands' },
              ]}
            />

            <CustomCategoriesOrBrands />
          </Index>
        </div>
      </div>
    </InstantSearch>
  ))
  .add('with conditional rendering', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />
      <Results>
        <div className="multi-index_content">
          <div className="multi-index_categories-or-brands">
            <Index indexName="categories">
              <Content>
                <div>
                  <div>Categories: </div>
                  <Configure hitsPerPage={3} />
                  <CustomCategoriesOrBrands />
                </div>
              </Content>
            </Index>
            <Index indexName="brands">
              <Content>
                <div>
                  <div>Brand: </div>
                  <Configure hitsPerPage={3} />
                  <CustomCategoriesOrBrands />
                </div>
              </Content>
            </Index>
          </div>
          <div className="multi-index_products">
            <Index indexName="products">
              <Content>
                <div>
                  <div>Products: </div>
                  <Configure hitsPerPage={5} />
                  <CustomProducts />
                </div>
              </Content>
            </Index>
          </div>
        </div>
      </Results>
    </InstantSearch>
  ))
  .add('with Hits & Configure', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="brands"
    >
      <Configure hitsPerPage={5} />
      <SearchBox />

      <CustomCategoriesOrBrands />
      <Pagination />

      <Index indexName="products">
        <CustomProducts />
        <Pagination />
      </Index>
    </InstantSearch>
  ))
  .addWithJSX(
    'with custom root',
    () => (
      <InstantSearch
        appId="latency"
        apiKey="6be0576ff61c053d5f9a3225e2a90f76"
        indexName="ikea"
      >
        <SearchBox />
        <Index
          indexName="products"
          root={{
            Root: 'div',
            props: {
              style: {
                border: '1px solid red',
              },
            },
          }}
        >
          <CustomProducts />
        </Index>
      </InstantSearch>
    ),
    {
      displayName,
      filterProps,
    }
  );

const AutoComplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => (
    <Autosuggest
      suggestions={hits}
      multiSection={true}<commit_msg>fix(stories): limit hits per page on Index (#806)<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import { storiesOf } from '@storybook/react';
import {
  Configure,
  InstantSearch,
  Index,
  Highlight,
  Pagination,
  SearchBox,
  SortBy,
} from '../packages/react-instantsearch/dom';
import {
  connectHits,
  connectAutoComplete,
  connectStateResults,
} from '../packages/react-instantsearch/connectors';
import Autosuggest from 'react-autosuggest';
import { displayName, filterProps } from './util';

const stories = storiesOf('<Index>', module);

stories
  .add('MultiHits', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />
      <div className="multi-index_content">
        <div className="multi-index_categories-or-brands">
          <Index indexName="categories">
            <div>Categories: </div>
            <Configure hitsPerPage={3} />
            <CustomCategoriesOrBrands />
          </Index>
          <Index indexName="brands">
            <div>Brand: </div>
            <Configure hitsPerPage={3} />
            <CustomCategoriesOrBrands />
          </Index>
        </div>
        <div className="multi-index_products">
          <Index indexName="products">
            <div>Products: </div>
            <Configure hitsPerPage={5} />
            <CustomProducts />
          </Index>
        </div>
      </div>
    </InstantSearch>
  ))
  .add('AutoComplete', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <Configure hitsPerPage={3} />
      <Index indexName="brands" />
      <Index indexName="products">
        <Configure hitsPerPage={5} />
      </Index>
      <AutoComplete />
    </InstantSearch>
  ))
  .add('with SortBy nested in same Index as Root', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />

      <div className="multi-index_content">
        <div className="multi-index_categories-or-brands">
          <Index indexName="categories">
            <Configure hitsPerPage={3} />

            <SortBy
              defaultRefinement="categories"
              items={[
                { value: 'categories', label: 'Categories' },
                { value: 'bestbuy', label: 'Best buy' },
              ]}
            />

            <CustomCategoriesOrBrands />
          </Index>

          <Index indexName="products">
            <Configure hitsPerPage={3} />

            <SortBy
              defaultRefinement="products"
              items={[
                { value: 'products', label: 'Products' },
                { value: 'brands', label: 'Brands' },
              ]}
            />

            <CustomCategoriesOrBrands />
          </Index>
        </div>
      </div>
    </InstantSearch>
  ))
  .add('with conditional rendering', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="categories"
    >
      <SearchBox />
      <Results>
        <div className="multi-index_content">
          <div className="multi-index_categories-or-brands">
            <Index indexName="categories">
              <Content>
                <div>
                  <div>Categories: </div>
                  <Configure hitsPerPage={3} />
                  <CustomCategoriesOrBrands />
                </div>
              </Content>
            </Index>
            <Index indexName="brands">
              <Content>
                <div>
                  <div>Brand: </div>
                  <Configure hitsPerPage={3} />
                  <CustomCategoriesOrBrands />
                </div>
              </Content>
            </Index>
          </div>
          <div className="multi-index_products">
            <Index indexName="products">
              <Content>
                <div>
                  <div>Products: </div>
                  <Configure hitsPerPage={5} />
                  <CustomProducts />
                </div>
              </Content>
            </Index>
          </div>
        </div>
      </Results>
    </InstantSearch>
  ))
  .add('with Hits & Configure', () => (
    <InstantSearch
      appId="latency"
      apiKey="6be0576ff61c053d5f9a3225e2a90f76"
      indexName="brands"
    >
      <Configure hitsPerPage={5} />
      <SearchBox />

      <CustomCategoriesOrBrands />
      <Pagination />

      <Index indexName="products">
        <CustomProducts />
        <Pagination />
      </Index>
    </InstantSearch>
  ))
  .addWithJSX(
    'with custom root',
    () => (
      <InstantSearch
        appId="latency"
        apiKey="6be0576ff61c053d5f9a3225e2a90f76"
        indexName="ikea"
      >
        <Configure hitsPerPage={5} />

        <SearchBox />
        <Index
          indexName="products"
          root={{
            Root: 'div',
            props: {
              style: {
                border: '1px solid red',
              },
            },
          }}
        >
          <CustomProducts />
        </Index>
      </InstantSearch>
    ),
    {
      displayName,
      filterProps,
    }
  );

const AutoComplete = connectAutoComplete(
  ({ hits, currentRefinement, refine }) => (
    <Autosuggest
      suggestions={hits}
      multiSection={true}
{'fraction_non_alphanumeric': 0.13048701598743184, 'fraction_numerical': 0.02587561223546807, 'mean_word_length': 1.654402747117979, 'pattern_counts': {'":': 0, '<': 226, '<?xml version=': 0, '>': 238, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4486663', 'n_tokens_mistral': 3348, 'n_tokens_neox': 3135, 'n_words': 530}