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

.storybook/main.js

@@ -2,15 +2,23 @@ const rules = require('../config/webpack.rules');
 
 module.exports = {
  stories: ['../stories/**/*.stories.js'],
- addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+ addons: [
+ '@storybook/addon-actions',
+ '@storybook/addon-links',
+ '@storybook/addon-a11y/register',
+ '@storybook/addon-storysource',
+ ],
  webpackFinal: async config => {
  // do mutation to the config
+ console.log("config.module", config.module);
 
  return {
  ...config,
  module: {
- ...config.module,
- rules
+ rules: [
+ ...config.module.rules,
+ ...rules,
+ ]
  }
  };
  },

package.json

@@ -121,8 +121,10 @@
  "@babel/preset-flow": "^7.0.0",
  "@babel/preset-react": "^7.6.3",
  "@mdi/js": "^5.0.45",
+ "@storybook/addon-a11y": "^5.3.19",
  "@storybook/addon-actions": "^5.3.19",
  "@storybook/addon-links": "^5.3.19",
+ "@storybook/addon-storysource": "^5.3.19",
  "@storybook/addons": "^5.3.19",
  "@storybook/react": "^5.3.19",
  "@storybook/theming": "^5.3.19",

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 (