Added 'a11y' and 'source' addons to storybook as well as more stories

stories/Button.stories.js

@@ -2,13 +2,16 @@ import React from 'react';
 import Button from '../src/components/Button';
 import {action} from '@storybook/addon-actions';
 import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
 
 export default {
   title: 'Button',
   component: Button,
+  decorators: [withA11y],
 };
 
-export const Simple = () => (
+export const Basic = () => (
   <Wrapper>
     <Button onClick={action('onClick')}>
       Hello Button

stories/FieldArray.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldArray from '../src/components/FieldArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldArray',
+  component: FieldArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <FieldArray
+        type="number"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const StringType = () => {
+  const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
+
+  return (
+    <Wrapper>
+      <FieldArray
+        type="string"
+        value={value}
+        length={3}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+

stories/FieldAutocomplete.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldAutocomplete from '../src/components/FieldAutocomplete';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldAutocomplete',
+  component: FieldAutocomplete,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "bar");
+
+  return (
+    <Wrapper>
+      <FieldAutocomplete
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldCheckbox.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldCheckbox from '../src/components/FieldCheckbox';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldCheckbox',
+  component: FieldCheckbox,
+  decorators: [withA11y],
+};
+
+
+export const BasicUnchecked = () => {
+  const [value, setValue] = useActionState("onChange", false);
+
+  return (
+    <Wrapper>
+      <FieldCheckbox
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const BasicChecked = () => {
+  const [value, setValue] = useActionState("onChange", true);
+
+  return (
+    <Wrapper>
+      <FieldCheckbox
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldColor.stories.js

@@ -2,14 +2,16 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldColor from '../src/components/FieldColor';
 import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldColor',
   component: FieldColor,
+  decorators: [withA11y],
 };
 
 
-export const Simple = () => {
+export const Basic = () => {
   const [color, setColor] = useActionState("onChange", "#ff0000");
 
   return (

stories/FieldDynamicArray.stories.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldDynamicArray from '../src/components/FieldDynamicArray';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldDynamicArray',
+  component: FieldDynamicArray,
+  decorators: [withA11y],
+};
+
+
+export const NumberType = () => {
+  const [value, setValue] = useActionState("onChange", [1,2,3]);
+
+  return (
+    <Wrapper>
+      <FieldDynamicArray
+        type="number"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const UrlType = () => {
+  const [value, setValue] = useActionState("onChange", ["http://example.com"]);
+
+  return (
+    <Wrapper>
+      <FieldDynamicArray
+        type="url"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const EnumType = () => {
+  const [value, setValue] = useActionState("onChange", ["foo"]);
+
+  return (
+    <Wrapper>
+      <FieldDynamicArray
+	fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
+        type="enum"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};

stories/FieldEnum.stories.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldEnum from '../src/components/FieldEnum';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldEnum',
+  component: FieldEnum,
+  decorators: [withA11y],
+};
+
+
+export const BasicFew = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", "Foo");
+
+  return (
+    <Wrapper>
+      <FieldEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const BasicFewWithDefault = () => {
+  const options = ["Foo", "Bar", "Baz"];
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <Wrapper>
+      <FieldEnum
+        options={options}
+        default={"Baz"}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const BasicMany = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <Wrapper>
+      <FieldEnum
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const BasicManyWithDefault = () => {
+  const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
+  const [value, setValue] = useActionState("onChange", "a");
+
+  return (
+    <Wrapper>
+      <FieldEnum
+        options={options}A
+        default={"h"}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+

stories/FieldFont.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldFont from '../src/components/FieldFont';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldFont',
+  component: FieldFont,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const fonts = ["Comic Sans", "Helvectica", "Gotham"];
+  const [value, setValue] = useActionState("onChange", ["Comic Sans"]);
+
+  return (
+    <Wrapper>
+      <FieldFont
+        fonts={fonts}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldMultiInput.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldMultiInput from '../src/components/FieldMultiInput';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldMultiInput',
+  component: FieldMultiInput,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <Wrapper>
+      <FieldMultiInput
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldNumber.stories.js

@@ -2,13 +2,15 @@ import React from 'react';
 import {useActionState} from './helper';
 import FieldNumber from '../src/components/FieldNumber';
 import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
 
 export default {
   title: 'FieldNumber',
   component: FieldNumber,
+  decorators: [withA11y],
 };
 
-export const Simple = () => {
+export const Basic = () => {
   const [value, setValue] = useActionState("onChange", 1);
 
   return (

stories/FieldSelect.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSelect from '../src/components/FieldSelect';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSelect',
+  component: FieldSelect,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const options = [["FOO", "Foo"], ["BAR", "Bar"], ["BAZ", "Baz"]];
+  const [value, setValue] = useActionState("onChange", "FOO");
+
+  return (
+    <Wrapper>
+      <FieldSelect
+        options={options}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+

stories/FieldString.stories.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldString from '../src/components/FieldString';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldString',
+  component: FieldString,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const [value, setValue] = useActionState("onChange", "Hello world");
+
+  return (
+    <Wrapper>
+      <FieldString
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const WithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <Wrapper>
+      <FieldString
+        value={value}
+        default={"Edit me..."}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const Multiline = () => {
+  const [value, setValue] = useActionState("onChange", "Hello\nworld");
+
+  return (
+    <Wrapper>
+      <FieldString
+        multi={true}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const MultilineWithDefault = () => {
+  const [value, setValue] = useActionState("onChange", null);
+
+  return (
+    <Wrapper>
+      <FieldString
+        multi={true}
+        default={"Edit\nme.."}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldSymbol.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldSymbol from '../src/components/FieldSymbol';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldSymbol',
+  component: FieldSymbol,
+  decorators: [withA11y],
+};
+
+
+export const Basic = () => {
+  const icons = ["Bicycle", "Ski", "Ramp"];
+  const [value, setValue] = useActionState("onChange", "Ski");
+
+  return (
+    <Wrapper>
+      <FieldSymbol
+        icons={icons}
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+

stories/FieldUrl.stories.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldUrl from '../src/components/FieldUrl';
+import {Wrapper} from './ui';
+import {withA11y} from '@storybook/addon-a11y';
+
+export default {
+  title: 'FieldUrl',
+  component: FieldUrl,
+  decorators: [withA11y],
+};
+
+
+export const Valid = () => {
+  const [value, setValue] = useActionState("onChange", "http://example.com");
+
+  return (
+    <Wrapper>
+      <FieldUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const Invalid = () => {
+  const [value, setValue] = useActionState("onChange", "foo");
+
+  return (
+    <Wrapper>
+      <FieldUrl
+        value={value}
+        onChange={setValue}
+        onInput={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+