{"size": 1845, "ext": "js", "max_stars_repo_path": "src/stories/select.stories.js", "max_stars_repo_name": "shebangbash/find-a-mentor", "max_stars_repo_stars_event_min_datetime": "2019-02-06T07:36:07.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-22T01:28:22.000Z", "max_issues_repo_path": "src/stories/select.stories.js", "max_issues_repo_name": "fintie/upcrowd-web", "max_issues_repo_issues_event_min_datetime": "2019-02-06T01:15:48.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T01:39:58.000Z", "max_forks_repo_path": "src/stories/select.stories.js", "max_forks_repo_name": "fintie/upcrowd-web", "max_forks_repo_forks_event_min_datetime": "2019-02-05T20:37:49.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-15T17:26:28.000Z"}
{"max_stars_count": 722, "max_issues_count": 474, "max_forks_count": 633, "avg_line_length": 24.9324324324, "max_line_length": 62, "alphanum_fraction": 0.572899729}
import React, { useState } from 'react';
import 'styled-components/macro';
import Select from '../Me/components/Select';
import FormField from '../Me/components/FormField';

import { StoriesContainer } from './StoriesContainer';

export default { title: 'Select' };
const options = [
  { value: 1, label: 'one' },
  { value: 2, label: 'two' },
  { value: 3, label: 'three' },
];

export const SingleSelect = () => {
  const [selectedValues, setSelectedValues] = useState();

  return (
    <StoriesContainer>
      <FormField label="Single select" css={{ width: '60%' }}>
        <Select
          value={selectedValues}
          onChange={selected => {
            setSelectedValues(selected);
          }}
          options={options}
          placeholder="Select a number"
        />
      </FormField>
    </StoriesContainer>
  );
};

export const MultiSelect = () => {
  const [selectedValues, setSelectedValues] = useState();

  return (
    <StoriesContainer>
      <FormField label="Multi select" css={{ width: '60%' }}>
        <Select
          isMulti={true}
          value={selectedValues}
          onChange={selected => {
            setSelectedValues(selected);
          }}
          options={options}
          placeholder="Select a number"
        />
      </FormField>
    </StoriesContainer>
  );
};

export const MultiSelectWithMaxItems = () => {
  const [selectedValues, setSelectedValues] = useState();

  return (
    <StoriesContainer>
      <FormField label="Multi select" css={{ width: '60%' }}>
        <Select
          isMulti={true}
          value={selectedValues}
          onChange={selected => {
            setSelectedValues(selected);
          }}
          options={options}
          maxSelections={2}
          placeholder="Select a number"
        />
      </FormField>
    </StoriesContainer>
  );
};
