@eureca/eureca-ui/src/components/Inputs/stories/select.stories.js

UI component library of Eureca's user and admin apps

import React, { useState } from 'react';
import { boolean, select, text, withKnobs } from '@storybook/addon-knobs';

import { Select } from '../';

const inputVariants = {
  Outlined: 'outlined',
  Standard: 'standard',
  Filled: 'filled',
};

const items = [
  {
    id: 0,
    name: 'Option 1',
  },
  {
    id: 1,
    name: 'Option 2',
  },
  {
    id: 2,
    name: 'Option 3',
  },
];

export default { title: 'Material/Inputs', decorators: [withKnobs], includeStories: [] };

export function SelectInput() {
  const [value, setValue] = useState('');

  const variant = select('Variant', inputVariants, 'outlined');
  const helperText = text('Helper text', 'Optional helper text');
  const disabled = boolean('Disabled');

  function handleChange(value) {
    setValue(value);
  }

  return (
    <Select
      name="select-input"
      label="Select"
      options={items}
      value={value}
      variant={variant}
      onChange={handleChange}
      disabled={disabled}
      helperText={helperText}
    />
  );
}