<|start_filename|>src/stories/Form.stories.js<|end_filename|>
import markdown from './story_descriptions/Form.md';

import React from 'react';
import { FormInput, FormButton } from '../components/common';
import { Form, Input, Button } from 'antd';

import 'antd/dist/antd.css';

export default { title: 'Form', parameters: { notes: markdown } };

export const exampleForm = () => {
  return (
    <form onSubmit={e => e.preventDefault()}>
      <FormInput placeholder="Email" name="email" labelId="User Email" />
      <FormButton buttonText="Submit" classType="default" disabled="false" />
    </form>
  );
};

export const antForm = () => {
  const layout = {
    wrapperCol: {
      span: 8,
    },
  };

  return (
    <Form onFinish={values => console.log(values)} {...layout}>
      <Form.Item
        label="User Email"
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
          {
            type: 'email',
            message: 'Please enter a valid email',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};


<|start_filename|>src/components/pages/ExampleDataViz/index.js<|end_filename|>
import DataVizContainer from './ExampleDataVizContainer';

export { DataVizContainer as ExampleDataViz };


<|start_filename|>src/components/common/LoadingComponent.js<|end_filename|>
import PropTypes from 'prop-types';
import React from 'react';

function LoadingComponent(props) {
  const { message } = props;

  return <div>{message}</div>;
}

export default LoadingComponent;

LoadingComponent.propTypes = {
  message: PropTypes.string.isRequired,
};


<|start_filename|>src/stories/FormButton.stories.js<|end_filename|>
import markdown from './story_descriptions/FormButton.md';

import React from 'react';
import { Button } from 'antd';
import { FormButton } from '../components/common';

import 'antd/dist/antd.css';

export default { title: 'Form Button', parameters: { notes: markdown } };

export const exampleFormButton = () => <FormButton buttonText="hello" />;

export const antFormButton = () => <Button htmlType="submit">Submit</Button>;


<|start_filename|>src/stories/FormInput.stories.js<|end_filename|>
import markdown from './story_descriptions/FormInput.md';

import React from 'react';
import { FormInput } from '../components/common';
import { Input } from 'antd';

import 'antd/dist/antd.css';

export default { title: 'Form Input', parameters: { notes: markdown } };

export const exampleInput = () => (
  <FormInput placeholder="Form Input" name="formInput" labelId="Form Input" />
);

export const antInput = () => (
  <Input placeholder="Form Input" addonBefore="Form Input" />
);


<|start_filename|>src/components/pages/ProfileList/index.js<|end_filename|>
export { default as ProfileListPage } from './ProfileListContainer';


<|start_filename|>src/stories/LoadingComponent.stories.js<|end_filename|>
import markdown from './story_descriptions/LoadingComponent.md';

import React from 'react';
import { LoadingComponent } from '../components/common';
import { Spin } from 'antd';

import 'antd/dist/antd.css';

export default { title: 'Loading Component', parameters: { notes: markdown } };

export const exampleLoadingComponent = () => (
  <LoadingComponent message="...loading" />
);

export const antSpinner = () => <Spin tip="Loading..." />;
