<commit_before>import React from 'react';

import { stories } from './mockdata.large';
import { Search } from './Search';
import { SearchResults } from './SearchResults';
import { DEFAULT_REF_ID } from './data';

const refId = DEFAULT_REF_ID;
const data = { [refId]: { id: refId, url: '/', stories } };
const dataset = { hash: data, entries: Object.entries(data) };
const lastViewed = Object.values(stories)
  .filter((item, index) => item.isComponent && index % 20 === 0)
  .map((component) => ({ storyId: component.id, refId }));

export default {
  component: Search,
  title: 'UI/Sidebar/Search',
};

export const Simple = () => <Search dataset={dataset}>{() => null}</Search>;

export const FilledIn = () => (
  <Search dataset={dataset} initialQuery="Search query">
    {() => null}
  </Search>
);

export const LastViewed = () => (
  <Search dataset={dataset} lastViewed={lastViewed}>
    {({ inputValue, results, getMenuProps, getItemProps, highlightedIndex }) => (
      <SearchResults
        isSearching={!!inputValue}
        results={results}
        getMenuProps={getMenuProps}
        getItemProps={getItemProps}
        highlightedIndex={highlightedIndex}
      />
    )}
  </Search>
);<commit_msg>Fix typings<commit_after>import React from 'react';
import { action } from '@storybook/addon-actions';

import { stories } from './mockdata.large';
import { Search } from './Search';
import { SearchResults } from './SearchResults';
import { DEFAULT_REF_ID } from './data';
import { Selection } from './types';

const refId = DEFAULT_REF_ID;
const data = { [refId]: { id: refId, url: '/', stories } };
const dataset = { hash: data, entries: Object.entries(data) };
const lastViewed = Object.values(stories)
  .filter((item, index) => item.isComponent && index % 20 === 0)
  .map((component) => ({ storyId: component.id, refId }));

export default {
  component: Search,
  title: 'UI/Sidebar/Search',
};

const baseProps = {
  dataset,
  clearLastViewed: action('clear'),
  lastViewed: [] as Selection[],
};

export const Simple = () => <Search {...baseProps}>{() => null}</Search>;

export const FilledIn = () => (
  <Search {...baseProps} initialQuery="Search query">
    {() => null}
  </Search>
);

export const LastViewed = () => (
  <Search {...baseProps} lastViewed={lastViewed}>
    {({ inputValue, results, getMenuProps, getItemProps, highlightedIndex }) => (
      <SearchResults
        isSearching={!!inputValue}
        results={results}
        getMenuProps={getMenuProps}
        getItemProps={getItemProps}
        highlightedIndex={highlightedIndex}
      />
    )}
  </Search>
);
{'fraction_non_alphanumeric': 0.17247987734764278, 'fraction_numerical': 0.0022997316979685703, 'mean_word_length': 3.8694029850746268, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 33, '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': '6195096', 'n_tokens_mistral': 796, 'n_tokens_neox': 792, 'n_words': 193}