<commit_before>import React from 'react';
import { storiesOf } from '@kadira/storybook';

import { Form, Card } from '../../src';

const stories = storiesOf('Form', module);

stories.addDecorator(story => <div style={styles.wrapper}>{story()}</div>);

stories.add('default', () =>
  <Form>
    <Form.FieldSet>
      <Form.Input
        name="user"
        label="User"
        placeholder="User"
      />
      <Form.Input
        name="password"
        type="password"
        label="Password"
        placeholder="Password"
      />
    </Form.FieldSet>

    <Form.Actions>
      <Form.Submit />
    </Form.Actions>
  </Form>,
);

stories.add('within a card', () =>
  <Form>
    <Card>
      <Card.Header>Login</Card.Header>

      <Form.FieldSet>
        <Form.Input
          name="user"
          label="User"
          placeholder="User"
        />
        <Form.Input
          name="password"
          type="password"
          label="Password"
          placeholder="Password"
        />
      </Form.FieldSet>

      <Card.Footer>
        <Form.Submit />
      </Card.Footer>
    </Card>
  </Form>,
);

const styles = {
  wrapper: {
    width: 480,
    height: 'auto',
    margin: '0 auto',
    padding: 20,
    boxSizing: 'border-box',
  },
};<commit_msg>Update Form stories<commit_after>import React from 'react';
import { storiesOf } from '@kadira/storybook';

import { Form, Card } from '../../src';

const stories = storiesOf('Form', module);

stories.addDecorator(story => <div style={styles.wrapper}>{story()}</div>);

stories.add('default', () =>
  <Form>
    <Form.FieldSet>
      <Form.Input
        name="user"
        label="User"
        placeholder="User"
      />
      <Form.Input
        name="password"
        type="password"
        label="Password"
        placeholder="Password"
      />
    </Form.FieldSet>

    <Form.Actions>
      <Form.Submit />
    </Form.Actions>
  </Form>,
);

stories.add('within a card', () =>
  <Form>
    <Card>
      <Card.Header>Login</Card.Header>

      <Form.FieldSet>
        <Form.Input
          name="user"
          label="User"
          placeholder="User"
        />
        <Form.Input
          name="password"
          type="password"
          label="Password"
          placeholder="Password"
        />
      </Form.FieldSet>

      <Card.Footer>
        <Form.Submit />
      </Card.Footer>
    </Card>
  </Form>,
);

stories.add('with createFromArray', () =>
  <Card>
    {Form.createFromArray(
      [
        {
          name: 'name',
          placeholder: 'Name',
          required: true,
        },
        {
          type: 'email',
          name: 'email',
          placeholder: 'Email',
          required: true,
        },
        {
          type: 'password',
          name: 'password',
          placeholder: 'Password',
          required: true,
        },
        {
          name: 'active',
          placeholder: 'Active',
          required: false,
          type: 'boolean',
        },
      ],
      {
        initialValues: {
          name: 'initial value',
        },
        onSubmit: (values) => console.log(values),
      }
    )}
  </Card>
);

const styles = {
  wrapper: {
    width: 480,
    height: 'auto',
    margin: '0 auto',
    padding: 20,
    boxSizing: 'border-box',
  },
};
{'fraction_non_alphanumeric': 0.16348195329087048, 'fraction_numerical': 0.003639672429481347, 'mean_word_length': 1.7233691164327003, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 61, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7126978', 'n_tokens_mistral': 1031, 'n_tokens_neox': 1013, 'n_words': 190}