diff --git a/src/components/fields/_labelFromFieldName.js b/src/components/_labelFromFieldName.js
similarity index 100%
rename from src/components/fields/_labelFromFieldName.js
rename to src/components/_labelFromFieldName.js
diff --git a/src/components/icons/LayerIcon.jsx b/src/components/icons/LayerIcon.jsx
deleted file mode 100644
index fb5d3277..00000000
--- a/src/components/icons/LayerIcon.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import LineIcon from './LineIcon.jsx'
-import FillIcon from './FillIcon.jsx'
-import SymbolIcon from './SymbolIcon.jsx'
-import BackgroundIcon from './BackgroundIcon.jsx'
-import CircleIcon from './CircleIcon.jsx'
-import MissingIcon from './MissingIcon.jsx'
-
-class LayerIcon extends React.Component {
- static propTypes = {
- type: PropTypes.string.isRequired,
- style: PropTypes.object,
- }
-
- render() {
- const iconProps = { style: this.props.style }
- switch(this.props.type) {
- case 'fill-extrusion': return
- case 'raster': return
- case 'hillshade': return
- case 'heatmap': return
- case 'fill': return
- case 'background': return
- case 'line': return
- case 'symbol': return
- case 'circle': return
- default: return
- }
- }
-}
-
-export default LayerIcon
diff --git a/src/components/util/codemirror-mgl.js b/src/util/codemirror-mgl.js
similarity index 100%
rename from src/components/util/codemirror-mgl.js
rename to src/util/codemirror-mgl.js
diff --git a/src/components/util/format.js b/src/util/format.js
similarity index 100%
rename from src/components/util/format.js
rename to src/util/format.js
diff --git a/src/components/util/spec-helper.js b/src/util/spec-helper.js
similarity index 100%
rename from src/components/util/spec-helper.js
rename to src/util/spec-helper.js
diff --git a/stories/0-Welcome.stories.js b/stories/0-Welcome.stories.js
new file mode 100644
index 00000000..98868a7f
--- /dev/null
+++ b/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 (
+
+ Maputnik component library
+
+ 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.
+
+
+ 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.
+
+
+ );
+}
+
+ToStorybook.story = {
+ name: 'Intro',
+};
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
new file mode 100644
index 00000000..a1dc3ac1
--- /dev/null
+++ b/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 = () => (
+
+
+
+);
+
diff --git a/stories/FieldColor.stories.js b/stories/FieldColor.stories.js
new file mode 100644
index 00000000..7f24e2bf
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
diff --git a/stories/FieldNumber.stories.js b/stories/FieldNumber.stories.js
new file mode 100644
index 00000000..d8438ae5
--- /dev/null
+++ b/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 (
+
+
+
+ );
+};
+
+export const Range = () => {
+ const [value, setValue] = useActionState("onChange", 1);
+
+ return (
+
+
+
+ );
+};
diff --git a/stories/helper.js b/stories/helper.js
new file mode 100644
index 00000000..728b931c
--- /dev/null
+++ b/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];
+}
diff --git a/stories/ui.js b/stories/ui.js
new file mode 100644
index 00000000..41cfb7fe
--- /dev/null
+++ b/stories/ui.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+
+export function Describe ({children}) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function Wrapper ({children}) {
+ return (
+
+ {children}
+
+ );
+};
+