@eureca/eureca-ui/src/components/Inputs/stories/text-input.stories.js

UI component library of Eureca's user and admin apps

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

import { Checkbox } from '../../Checkbox';
import { TextInput } from '../text-input';

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

const inputSizes = {
  Small: 'small',
  Medium: 'medium',
};

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 DefaultInput() {
  const [value, setValue] = useState('');

  const name = 'text-input';
  const helperText = text('Helper text', 'Optional helper text');
  const variant = select('Variant', inputVariants, 'outlined');
  const disabled = boolean('Disabled');
  const error = boolean('Error');
  const size = select('Size', inputSizes, 'medium');

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <>
      <TextInput
        name={name}
        label="Label"
        value={value}
        variant={variant}
        onChange={handleChange}
        helperText={helperText}
        disabled={disabled}
        error={error}
        size={size}
      />
    </>
  );
}

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

  const name = 'text-input';
  const helperText = text('Helper text', 'Optional helper text');
  const variant = select('Variant', inputVariants, 'outlined');
  const disabled = boolean('Disabled');
  const error = boolean('Error');
  const multiple = boolean('Multiple', false);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return (
    <>
      <Autocomplete
        id="combo-box"
        multiple={multiple}
        disableCloseOnSelect
        options={items}
        getOptionLabel={option => option.name}
        renderInput={params => (
          <TextInput
            {...params}
            name={name}
            label="Combo Box"
            margin="normal"
            value={value}
            variant={variant}
            onChange={handleChange}
            helperText={helperText}
            disabled={disabled}
            error={error}
          />
        )}
      />
      <Autocomplete
        id="combo-box"
        multiple
        disableCloseOnSelect
        options={items}
        getOptionLabel={option => option.name}
        renderOption={(option, { selected }) => (
          <React.Fragment>
            <Checkbox checked={selected} />
            {option.name}
          </React.Fragment>
        )}
        renderInput={params => (
          <TextInput
            {...params}
            name={name}
            label="Checkbox Multiple Combo Box"
            margin="normal"
            value={value}
            variant={variant}
            onChange={handleChange}
            helperText={helperText}
            disabled={disabled}
            error={error}
          />
        )}
      />
    </>
  );
}