text: import React from 'react';
  import { storiesOf } from '@storybook/react';
  import { action } from '@storybook/addon-actions';
  
  import { withKnobs, boolean, text } from '@storybook/addon-knobs';
  import Checkbox from '../Checkbox';
  import Form from '../Form';
  import FormGroup from '../FormGroup';
  import FileUploader from '../FileUploader';
  import NumberInput from '../NumberInput';
  import RadioButton from '../RadioButton';
  import RadioButtonGroup from '../RadioButtonGroup';
  import Button from '../Button';
  import Search from '../Search';
  import Select from '../Select';
  import SelectItem from '../SelectItem';
  import TextArea from '../TextArea';
  import TextInput from '../TextInput';
  import Toggle from '../Toggle';
  
  const additionalProps = {
    className: 'some-class',
    onSubmit: e => {
      e.preventDefault();
      action('FormSubmitted')(e);
    },
  };
  
  const checkboxEvents = {
    className: 'some-class',
    labelText: 'Checkbox label',
  };
  
  const fieldsetCheckboxProps = () => ({
    className: 'some-class',
    legendText: text('Text in <legend> (legendText)', 'Checkbox heading'),
    message: boolean('Show form requirement (message)', false),
    messageText: text('Form requirement text (messageText)', ''),
    invalid: boolean('Mark as invalid (invalid)', false),
  });
  
  const numberInputProps = {
    className: 'some-class',
    id: 'number-input-1',
    label: 'Number Input',
    min: 0,
    max: 100,
    value: 50,
    step: 10,
  };
  
  const toggleProps = {
    className: 'some-class',
  };
  
  const fieldsetToggleProps = {
    className: 'some-class',
    legendText: 'Toggle heading',
  };
  
  const fileUploaderEvents = {
    buttonLabel: 'Add files',
    className: 'some-class',
  };
  
  const fieldsetFileUploaderProps = {
    className: 'some-class',
    legendText: 'File Uploader',
  };
  
  const radioProps = {
    className: 'some-class',
  };
  
  const fieldsetRadioProps = {
    className: 'some-class',
    legendText: 'Radio Button heading',
  };
  
  const searchProps = {
    className: 'some-class',
  };
  
  const fieldsetSearchProps = {
    className: 'some-class',
    legendText: 'Search',
  };
  
  const selectProps = {
    className: 'some-class',
  };
  
  const TextInputProps = {
    className: 'some-class',
    id: 'test2',
    labelText: 'Text Input label',
    placeholder: 'Placeholder text',
  };
  
  const PasswordProps = {
    className: 'some-class',
    id: 'test3',
    labelText: 'Password',
  };
  
  const InvalidPasswordProps = {
    className: 'some-class',
    id: 'test4',
    labelText: 'Password',
    invalid: true,
    invalidText:
      'Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number.',
  };
  
  const textareaProps = {
    labelText: 'Text Area label',
    className: 'some-class',
    placeholder: 'Placeholder text',
    id: 'test5',
    cols: 50,
    rows: 4,
  };
  
  const buttonEvents = {
    className: 'some-class',
  };
  
  storiesOf('Form', module)
    .addDecorator(withKnobs)
    .add(
      'Default',
      () => (
        <Form {...additionalProps}>
          <FormGroup {...fieldsetCheckboxProps()}>
            <Checkbox defaultChecked {...checkboxEvents} id="checkbox-0" />
            <Checkbox {...checkboxEvents} id="checkbox-1" />
            <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
          </FormGroup>
  
          <NumberInput {...numberInputProps} />
  
          <FormGroup {...fieldsetToggleProps}>
            <Toggle {...toggleProps} id="toggle-1" />
            <Toggle disabled {...toggleProps} id="toggle-2" />
          </FormGroup>
  
          <FormGroup {...fieldsetFileUploaderProps}>
            <FileUploader
              {...fileUploaderEvents}
              id="file-1"
              labelDescription="Choose Files..."
            />
          </FormGroup>
  
          <FormGroup {...fieldsetRadioProps}>
            <RadioButtonGroup
              onChange={action('onChange')}
              name="radio-button-group"
              defaultSelected="default-selected">
              <RadioButton
                value="standard"
                id="radio-1"
                labelText="Standard Radio Button"
                {...radioProps}
              />
              <RadioButton
                value="default-selected"
                labelText="Default Selected Radio Button"
                id="radio-2"
                {...radioProps}
              />
              <RadioButton
                value="blue"
                labelText="Standard Radio Button"
                id="radio-3"
                {...radioProps}
              />
              <RadioButton
                value="disabled"
                labelText="Disabled Radio Button"
                id="radio-4"
                disabled
                {...radioProps}
              />
            </RadioButtonGroup>
          </FormGroup>
  
          <FormGroup {...fieldsetSearchProps}>
            <Search
              {...searchProps}
              id="search-1"
              labelText="Search"
              placeHolderText="Search"
            />
          </FormGroup>
  
          <Select {...selectProps} id="select-1" defaultValue="placeholder-item">
            <SelectItem
              disabled
              hidden
              value="placeholder-item"
              text="Choose an option"
            />
            <SelectItem value="option-1" text="Option 1" />
            <SelectItem value="option-2" text="Option 2" />
            <SelectItem value="option-3" text="Option 3" />
          </Select>
  
          <TextInput {...TextInputProps} />
  
          <TextInput
            type="password"
            required
            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
            {...PasswordProps}
          />
  
          <TextInput
            type="password"
            required
            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"
            {...InvalidPasswordProps}
          />
  
          <TextArea {...textareaProps} />
  
          <Button type="submit" className="some-class" {...buttonEvents}>
            Submit
          </Button>
        </Form>
      ),
      {
        info: {
          text: `
              Forms are widely used to collect user input.
      
              Form can have any number of react components enclosed within FormGroup component. FormGroup component
              is a wrapper for legend and fieldset component.
      
            `,
        },
      }
    );
  