<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
import FuzzySearch from '@storybook/react-fuzzy';

import { baseFonts } from '@storybook/components';

const modalStyle = {
  content: {
    top: '100px',
    right: 'auto',
    bottom: 'auto',
    left: '50%',
    marginLeft: '-215px',
    border: 'none',
    padding: 0,
    overflow: 'visible',
    ...baseFonts,
  },
  overlay: {
    background: 'transparent',
    zIndex: '1',
  },
};

const formatStories = stories => {
  const formattedStories = [];
  let i = 0;
  stories.forEach(val => {
    i += 1;
    formattedStories.push({
      type: 'kind',
      value: val.kind,
      id: i,
    });

    val.stories.forEach(story => {
      i += 1;
      formattedStories.push({
        type: 'story',
        value: story,
        id: i,
        kind: val.kind,
      });
    });
  });

  return formattedStories;
};

const suggestionTemplate = (props, state, styles) =>
  state.results.map((val, i) => {
    const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
    return (
      <div key={val.value} style={{ ...style, display: 'flex', justifyContent: 'space-between' }}>
        <p style={{ margin: 0 }}>{val.value}</p>
        <p style={{ opacity: 0.5, margin: 0, paddingLeft: 10 }}>
          {val.type === 'story' ? `in ${val.kind}` : 'Kind'}
        </p>
      </div>
    );
  });

export default class SearchBox extends React.Component {
  constructor(props) {
    super(props);

    this.onSelect = this.onSelect.bind(this);
    this.fireOnStory = this.fireOnStory.bind(this);
    this.fireOnKind = this.fireOnKind.bind(this);
    this.inputRef = this.inputRef.bind(this);
  }

  componentDidUpdate(prevProps) {
    // focus search box on opening
    if (this.props.showSearchBox && !prevProps.showSearchBox && this.input != null) {
      this.input.focus();
    }
  }

  onSelect(selected) {
    const { onClose } = this.props;
    if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind);<commit_msg>added right align for kind column<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import ReactModal from 'react-modal';
import FuzzySearch from '@storybook/react-fuzzy';

import { baseFonts } from '@storybook/components';

const modalStyle = {
  content: {
    top: '100px',
    right: 'auto',
    bottom: 'auto',
    left: '50%',
    marginLeft: '-215px',
    border: 'none',
    padding: 0,
    overflow: 'visible',
    ...baseFonts,
  },
  overlay: {
    background: 'transparent',
    zIndex: '1',
  },
};

const formatStories = stories => {
  const formattedStories = [];
  let i = 0;
  stories.forEach(val => {
    i += 1;
    formattedStories.push({
      type: 'kind',
      value: val.kind,
      id: i,
    });

    val.stories.forEach(story => {
      i += 1;
      formattedStories.push({
        type: 'story',
        value: story,
        id: i,
        kind: val.kind,
      });
    });
  });

  return formattedStories;
};

const suggestionTemplate = (props, state, styles) =>
  state.results.map((val, i) => {
    const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
    return (
      <div key={val.value} style={{ ...style, display: 'flex', justifyContent: 'space-between' }}>
        <p style={{ margin: 0 }}>{val.value}</p>
        <p style={{ opacity: 0.5, margin: 0, paddingLeft: 10, textAlign: 'right' }}>
          {val.type === 'story' ? `in ${val.kind}` : 'Kind'}
        </p>
      </div>
    );
  });

export default class SearchBox extends React.Component {
  constructor(props) {
    super(props);

    this.onSelect = this.onSelect.bind(this);
    this.fireOnStory = this.fireOnStory.bind(this);
    this.fireOnKind = this.fireOnKind.bind(this);
    this.inputRef = this.inputRef.bind(this);
  }

  componentDidUpdate(prevProps) {
    // focus search box on opening
    if (this.props.showSearchBox && !prevProps.showSearchBox && this.input != null) {
      this.input.focus();
    }
  }

  onSelect(selected) {
    const { onClose } = this.props;
    if (selected.type === 'story') this.fireOnStory(selected.value, selected.kind);
{'fraction_non_alphanumeric': 0.1634296541923259, 'fraction_numerical': 0.009000473709142587, 'mean_word_length': 2.7840501792114694, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 25, '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': '4369812', 'n_tokens_mistral': 1423, 'n_tokens_neox': 1378, 'n_words': 318}