Tidy of components

- Moved all components into a single directory like nextjs
 - Made component names consistent with each other
 - Made component names consistent with their export class names
 - Added storybook for a few components with the aim to extend this further.

stories/0-Welcome.stories.js

@@ -0,0 +1,26 @@
+import '../src/styles/index.scss';
+import React from 'react';
+import {Describe} from './ui';
+
+
+export default {
+  title: 'Welcome',
+};
+
+export const ToStorybook = () => {
+  return (
+    <Describe>
+      <h1>Maputnik component library</h1>
+      <p>
+        This is the Maputnik component library, which shows the uses of some commonly used components from the Maputnik editor. This is a stand alone place where we can better refine them and improve their API separate from their use inside the editor.
+      </p>
+      <p>
+        This should also help us better refine our CSS and make it more modular as currently we rely on the cascade quite a bit in a number of places.
+      </p>
+    </Describe>
+  ); 
+}
+
+ToStorybook.story = {
+  name: 'Intro',
+};

stories/Button.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Button from '../src/components/Button';
+import {action} from '@storybook/addon-actions';
+import {Wrapper} from './ui';
+
+export default {
+  title: 'Button',
+  component: Button,
+};
+
+export const Simple = () => (
+  <Wrapper>
+    <Button onClick={action('onClick')}>
+      Hello Button
+    </Button>
+  </Wrapper>
+);
+

stories/FieldColor.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldColor from '../src/components/FieldColor';
+import {Wrapper} from './ui';
+
+export default {
+  title: 'FieldColor',
+  component: FieldColor,
+};
+
+
+export const Simple = () => {
+  const [color, setColor] = useActionState("onChange", "#ff0000");
+
+  return (
+    <Wrapper>
+      <FieldColor
+        name="color"
+        value={color}
+        onChange={setColor}
+      />
+    </Wrapper>
+  );
+};
+

stories/FieldNumber.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import {useActionState} from './helper';
+import FieldNumber from '../src/components/FieldNumber';
+import {Wrapper} from './ui';
+
+export default {
+  title: 'FieldNumber',
+  component: FieldNumber,
+};
+
+export const Simple = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <Wrapper>
+      <FieldNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+      />
+    </Wrapper>
+  );
+};
+
+export const Range = () => {
+  const [value, setValue] = useActionState("onChange", 1);
+
+  return (
+    <Wrapper>
+      <FieldNumber
+        name="number"
+        value={value}
+        onChange={setValue}
+        min={1}
+        max={24}
+        allowRange={true}
+        rangeStep={1}
+      />
+    </Wrapper>
+  );
+};

stories/helper.js

@@ -0,0 +1,12 @@
+import React, {useState} from 'react';
+import {action} from '@storybook/addon-actions';
+
+export function useActionState (name, initialVal) {
+  const [val, fn] = useState(initialVal);
+  const actionFn = action(name);
+  function retFn(val) {
+    actionFn(val);
+    return fn(val);
+  }
+  return [val, retFn];
+}

stories/ui.js

@@ -0,0 +1,19 @@
+import React from 'react';
+
+
+export function Describe ({children}) {
+  return (
+    <div style={{maxWidth: "600px", margin: "0.8em"}}>
+      {children}
+    </div>
+  )
+}
+
+export function Wrapper ({children}) {
+  return (
+    <div style={{maxWidth: "180px", margin: "0.4em"}}>
+      {children}
+    </div>
+  );
+};
+