Block* -> Field*

stories/FieldComment.stories.js

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

stories/FieldId.stories.js

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

stories/FieldMaxZoom.stories.js

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

stories/FieldMinZoom.stories.js

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

stories/FieldSource.stories.js

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

stories/FieldSourceLayer.stories.js

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

stories/FieldType.stories.js

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

stories/ui.js

@@ -11,7 +11,7 @@ export function Describe ({children}) {
 
 export function Wrapper ({children}) {
   return (
-    <div style={{maxWidth: "180px", margin: "0.4em"}}>
+    <div style={{maxWidth: "260px", margin: "0.4em"}}>
       {children}
     </div>
   );