# Maputnik
-[][github-action-ci]
+[][github-action-ci]
[][license]
-[github-action-ci]: https://github.com/maputnik/editor/actions?query=workflow%3Aci
+[github-action-ci]: https://github.com/maplibre/maputnik/actions?query=workflow%3Aci
[license]: https://tldrlegal.com/license/mit-license
A free and open visual editor for the [MapLibre GL styles](https://maplibre.org/maplibre-style-spec/)
@@ -14,18 +14,18 @@ targeted at developers and map designers.
## Usage
- :link: Design your maps online at **
@@ -272,14 +249,10 @@ export default class AppToolbar extends React.Component {
-
+
Help
-
- Take the Maputnik Survey
-
diff --git a/src/components/Doc.tsx b/src/components/Doc.tsx
index dad73d72..c0fa40fe 100644
--- a/src/components/Doc.tsx
+++ b/src/components/Doc.tsx
@@ -31,7 +31,7 @@ export default class Doc extends React.Component {
const renderValues = (
!!values &&
// HACK: Currently we merge additional values into the style spec, so this is required
- // See
+ // See
!Array.isArray(values)
);
diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
index 84258883..46c3fffe 100644
--- a/src/components/MapMaplibreGl.tsx
+++ b/src/components/MapMaplibreGl.tsx
@@ -115,7 +115,7 @@ export default class MapMaplibreGl extends React.Component, while we wait for a proper fix.
+ // HACK: Fix for , while we wait for a proper fix.
// eslint-disable-next-line
this.state.inspect._popupBlocked = false;
this.state.inspect.toggleInspector()
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 1b9ac4fe..69f1c833 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -20,7 +20,7 @@ export default class Modal extends React.Component {
underlayClickExits: true
}
- // See
+ // See
onClose = () => {
if (document.activeElement) {
(document.activeElement as HTMLElement).blur();
diff --git a/stories/0-Welcome.stories.jsx b/stories/0-Welcome.stories.jsx
deleted file mode 100644
index 98868a7f..00000000
--- a/stories/0-Welcome.stories.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-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/FieldArray.stories.jsx b/stories/FieldArray.stories.jsx
deleted file mode 100644
index 72c923e8..00000000
--- a/stories/FieldArray.stories.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldArray from '../src/components/FieldArray';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldArray',
- component: FieldArray,
-};
-
-
-export const NumberType = () => {
- const [value, setValue] = useActionState("onChange", [1,2,3]);
-
- return (
-
-
- );
-};
-
-export const StringType = () => {
- const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/FieldAutocomplete.stories.jsx b/stories/FieldAutocomplete.stories.jsx
deleted file mode 100644
index 23d90eca..00000000
--- a/stories/FieldAutocomplete.stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldAutocomplete from '../src/components/FieldAutocomplete';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldAutocomplete',
- component: FieldAutocomplete,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
- const [value, setValue] = useActionState("onChange", "bar");
-
- return (
-
-
- );
-};
-
diff --git a/stories/FieldCheckbox.stories.jsx b/stories/FieldCheckbox.stories.jsx
deleted file mode 100644
index d7109918..00000000
--- a/stories/FieldCheckbox.stories.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldCheckbox from '../src/components/FieldCheckbox';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldCheckbox',
- component: FieldCheckbox,
-};
-
-
-export const BasicUnchecked = () => {
- const [value, setValue] = useActionState("onChange", false);
-
- return (
-
-
- );
-};
-
-export const BasicChecked = () => {
- const [value, setValue] = useActionState("onChange", true);
-
- return (
-
-
- );
-};
-
diff --git a/stories/FieldColor.stories.jsx b/stories/FieldColor.stories.jsx
deleted file mode 100644
index b6754807..00000000
--- a/stories/FieldColor.stories.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-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 Basic = () => {
- const [color, setColor] = useActionState("onChange", "#ff0000");
-
- return (
-
-
- );
-};
-
diff --git a/stories/FieldDynamicArray.stories.jsx b/stories/FieldDynamicArray.stories.jsx
deleted file mode 100644
index 59b3ad8b..00000000
--- a/stories/FieldDynamicArray.stories.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldDynamicArray from '../src/components/FieldDynamicArray';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldDynamicArray',
- component: FieldDynamicArray,
-};
-
-
-export const NumberType = () => {
- const [value, setValue] = useActionState("onChange", [1,2,3]);
-
- return (
-
-
- );
-};
-
-export const UrlType = () => {
- const [value, setValue] = useActionState("onChange", ["http://example.com"]);
-
- return (
-
-
- );
-};
-
-export const EnumType = () => {
- const [value, setValue] = useActionState("onChange", ["foo"]);
-
- return (
-
-
- );
-};
diff --git a/stories/FieldEnum.stories.jsx b/stories/FieldEnum.stories.jsx
deleted file mode 100644
index ed159b85..00000000
--- a/stories/FieldEnum.stories.jsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldEnum from '../src/components/FieldEnum';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldEnum',
- component: FieldEnum,
-};
-
-
-export const BasicFew = () => {
- const options = ["Foo", "Bar", "Baz"];
- const [value, setValue] = useActionState("onChange", "Foo");
-
- return (
-
-
- );
-};
-
-export const BasicFewWithDefault = () => {
- const options = ["Foo", "Bar", "Baz"];
- const [value, setValue] = useActionState("onChange", null);
-
- return (
-
-
- );
-};
-
-export const BasicMany = () => {
- const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
- const [value, setValue] = useActionState("onChange", "a");
-
- return (
-
-
- );
-};
-
-export const BasicManyWithDefault = () => {
- const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
- const [value, setValue] = useActionState("onChange", "a");
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/FieldFunction.stories.jsx b/stories/FieldFunction.stories.jsx
deleted file mode 100644
index cc51ff91..00000000
--- a/stories/FieldFunction.stories.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import FieldFunction from '../src/components/FieldFunction';
-import latest from '@maplibre/maplibre-gl-style-spec/dist/latest.json'
-
-export default {
- title: 'FieldFunction',
- component: FieldFunction,
-};
-
-export const Basic = () => {
- const value = {
- "property": "rank",
- "type": "categorical",
- "default": "#222",
- "stops": [
- [
- {"zoom": 6, "value": ""},
- ["#777"]
- ],
- [
- {"zoom": 10, "value": ""},
- ["#444"]
- ]
- ]
- };
-
- return
- {}}
- value={value}
- errors={[]}
- fieldName={"Color"}
- fieldType={"color"}
- fieldSpec={latest['paint_fill']['fill-color']}
- />
-
-};
-
diff --git a/stories/FieldMultiInput.stories.jsx b/stories/FieldMultiInput.stories.jsx
deleted file mode 100644
index 7ac59a1b..00000000
--- a/stories/FieldMultiInput.stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMultiInput from '../src/components/FieldMultiInput';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldMultiInput',
- component: FieldMultiInput,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
- const [value, setValue] = useActionState("onChange", "FOO");
-
- return (
-
-
- );
-};
-
diff --git a/stories/FieldNumber.stories.jsx b/stories/FieldNumber.stories.jsx
deleted file mode 100644
index 271677d4..00000000
--- a/stories/FieldNumber.stories.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-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 Basic = () => {
- const [value, setValue] = useActionState("onChange", 1);
-
- return (
-
-
- );
-};
-
-export const Range = () => {
- const [value, setValue] = useActionState("onChange", 1);
-
- return (
-
-
- );
-};
diff --git a/stories/FieldSelect.stories.jsx b/stories/FieldSelect.stories.jsx
deleted file mode 100644
index 2f9cf512..00000000
--- a/stories/FieldSelect.stories.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldSelect from '../src/components/FieldSelect';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldSelect',
- component: FieldSelect,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "Foo"], ["BAR", "Bar"], ["BAZ", "Baz"]];
- const [value, setValue] = useActionState("onChange", "FOO");
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/FieldString.stories.jsx b/stories/FieldString.stories.jsx
deleted file mode 100644
index 35fa8b16..00000000
--- a/stories/FieldString.stories.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldString from '../src/components/FieldString';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldString',
- component: FieldString,
-};
-
-
-export const Basic = () => {
- const [value, setValue] = useActionState("onChange", "Hello world");
-
- return (
-
-
- );
-};
-
diff --git a/stories/FieldUrl.stories.jsx b/stories/FieldUrl.stories.jsx
deleted file mode 100644
index a926e208..00000000
--- a/stories/FieldUrl.stories.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldUrl from '../src/components/FieldUrl';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldUrl',
- component: FieldUrl,
-};
-
-
-export const Valid = () => {
- const [value, setValue] = useActionState("onChange", "http://example.com");
-
- return (
-
-
- );
-};
-
-export const Invalid = () => {
- const [value, setValue] = useActionState("onChange", "foo");
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/IconLayer.stories.jsx b/stories/IconLayer.stories.jsx
deleted file mode 100644
index df6dbb72..00000000
--- a/stories/IconLayer.stories.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import IconLayer from '../src/components/IconLayer';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'IconLayer',
- component: IconLayer,
-};
-
-export const IconList = () => {
- const types = [
- 'fill-extrusion',
- 'raster',
- 'hillshade',
- 'heatmap',
- 'fill',
- 'background',
- 'line',
- 'symbol',
- 'circle',
- 'INVALID',
- ]
-
- return
-
-
-
- ID
- Preview
-
-
-
- {types.map(type => (
-
-
- {type}
-
-
-
-
- ))}
-
-
-
-};
-
-
-
-
-
-
diff --git a/stories/InputArray.stories.jsx b/stories/InputArray.stories.jsx
deleted file mode 100644
index 19abc922..00000000
--- a/stories/InputArray.stories.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputArray from '../src/components/InputArray';
-import {Wrapper} from './ui';
-
-export default {
- title: 'InputArray',
- component: InputArray,
-};
-
-
-export const NumberType = () => {
- const [value, setValue] = useActionState("onChange", [1,2,3]);
-
- return (
-
-
- );
-};
-
-export const StringType = () => {
- const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/InputAutocomplete.stories.jsx b/stories/InputAutocomplete.stories.jsx
deleted file mode 100644
index 22267bd2..00000000
--- a/stories/InputAutocomplete.stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputAutocomplete from '../src/components/InputAutocomplete';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputAutocomplete',
- component: InputAutocomplete,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
- const [value, setValue] = useActionState("onChange", "bar");
-
- return (
-
-
- );
-};
-
diff --git a/stories/InputButton.stories.jsx b/stories/InputButton.stories.jsx
deleted file mode 100644
index a0214d7c..00000000
--- a/stories/InputButton.stories.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import InputButton from '../src/components/InputButton';
-import {action} from '@storybook/addon-actions';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputButton',
- component: InputButton,
-};
-
-export const Basic = () => (
-
-
- Hello InputButton
-
-
-);
-
diff --git a/stories/InputCheckbox.stories.jsx b/stories/InputCheckbox.stories.jsx
deleted file mode 100644
index c00719ce..00000000
--- a/stories/InputCheckbox.stories.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputCheckbox from '../src/components/InputCheckbox';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputCheckbox',
- component: InputCheckbox,
-};
-
-
-export const BasicUnchecked = () => {
- const [value, setValue] = useActionState("onChange", false);
-
- return (
-
-
- );
-};
-
-export const BasicChecked = () => {
- const [value, setValue] = useActionState("onChange", true);
-
- return (
-
-
- );
-};
-
diff --git a/stories/InputColor.stories.jsx b/stories/InputColor.stories.jsx
deleted file mode 100644
index 2b76fde2..00000000
--- a/stories/InputColor.stories.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputColor from '../src/components/InputColor';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputColor',
- component: InputColor,
-};
-
-
-export const Basic = () => {
- const [color, setColor] = useActionState("onChange", "#ff0000");
-
- return (
-
-
- );
-};
-
diff --git a/stories/InputDynamicArray.stories.jsx b/stories/InputDynamicArray.stories.jsx
deleted file mode 100644
index 434f2583..00000000
--- a/stories/InputDynamicArray.stories.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputDynamicArray from '../src/components/InputDynamicArray';
-import {Wrapper} from './ui';
-
-export default {
- title: 'InputDynamicArray',
- component: InputDynamicArray,
-};
-
-
-export const NumberType = () => {
- const [value, setValue] = useActionState("onChange", [1,2,3]);
-
- return (
-
-
- );
-};
-
-export const UrlType = () => {
- const [value, setValue] = useActionState("onChange", ["http://example.com"]);
-
- return (
-
-
- );
-};
-
-export const EnumType = () => {
- const [value, setValue] = useActionState("onChange", ["foo"]);
-
- return (
-
-
- );
-};
diff --git a/stories/InputEnum.stories.jsx b/stories/InputEnum.stories.jsx
deleted file mode 100644
index 3d88045e..00000000
--- a/stories/InputEnum.stories.jsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputEnum from '../src/components/InputEnum';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputEnum',
- component: InputEnum,
-};
-
-
-export const BasicFew = () => {
- const options = ["Foo", "Bar", "Baz"];
- const [value, setValue] = useActionState("onChange", "Foo");
-
- return (
-
-
- );
-};
-
-export const BasicFewWithDefault = () => {
- const options = ["Foo", "Bar", "Baz"];
- const [value, setValue] = useActionState("onChange", null);
-
- return (
-
-
- );
-};
-
-export const BasicMany = () => {
- const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
- const [value, setValue] = useActionState("onChange", "a");
-
- return (
-
-
- );
-};
-
-export const BasicManyWithDefault = () => {
- const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
- const [value, setValue] = useActionState("onChange", "a");
-
- return (
-
-
- );
-};
-
-
-
diff --git a/stories/InputJson.stories.jsx b/stories/InputJson.stories.jsx
deleted file mode 100644
index a27b1429..00000000
--- a/stories/InputJson.stories.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import InputJson from '../src/components/InputJson';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-
-export default {
- title: 'InputJson',
- component: InputJson,
-};
-
-export const Basic = () => {
- const layer = {
- id: "background",
- type: "background",
- };
-
- return
-
-};
-
diff --git a/stories/InputMultiInput.stories.jsx b/stories/InputMultiInput.stories.jsx
deleted file mode 100644
index 0f91098d..00000000
--- a/stories/InputMultiInput.stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputMultiInput from '../src/components/InputMultiInput';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputMultiInput',
- component: InputMultiInput,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
- const [value, setValue] = useActionState("onChange", "FOO");
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/InputNumber.stories.jsx b/stories/InputNumber.stories.jsx
deleted file mode 100644
index 0dfd8174..00000000
--- a/stories/InputNumber.stories.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputNumber from '../src/components/InputNumber';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputNumber',
- component: InputNumber,
-};
-
-export const Basic = () => {
- const [value, setValue] = useActionState("onChange", 1);
-
- return (
-
-
- );
-};
-
-export const Range = () => {
- const [value, setValue] = useActionState("onChange", 1);
-
- return (
-
-
- );
-};
-
diff --git a/stories/InputSelect.stories.jsx b/stories/InputSelect.stories.jsx
deleted file mode 100644
index a5ddc99a..00000000
--- a/stories/InputSelect.stories.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputSelect from '../src/components/InputSelect';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputSelect',
- component: InputSelect,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "Foo"], ["BAR", "Bar"], ["BAZ", "Baz"]];
- const [value, setValue] = useActionState("onChange", "FOO");
-
- return (
-
-
- );
-};
-
-
-
diff --git a/stories/InputString.stories.jsx b/stories/InputString.stories.jsx
deleted file mode 100644
index 5501ab5b..00000000
--- a/stories/InputString.stories.jsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputString from '../src/components/InputString';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputString',
- component: InputString,
-};
-
-
-export const Basic = () => {
- const [value, setValue] = useActionState("onChange", "Hello world");
-
- return (
-
-
- );
-};
-
-export const WithDefault = () => {
- const [value, setValue] = useActionState("onChange", null);
-
- return (
-
-
- );
-};
-
-export const Multiline = () => {
- const [value, setValue] = useActionState("onChange", "Hello\nworld");
-
- return (
-
-
- );
-};
-
-export const MultilineWithDefault = () => {
- const [value, setValue] = useActionState("onChange", null);
-
- return (
-
-
- );
-};
-
diff --git a/stories/InputUrl.stories.jsx b/stories/InputUrl.stories.jsx
deleted file mode 100644
index 5be69412..00000000
--- a/stories/InputUrl.stories.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import InputUrl from '../src/components/InputUrl';
-import {InputContainer} from './ui';
-
-export default {
- title: 'InputUrl',
- component: InputUrl,
-};
-
-
-export const Valid = () => {
- const [value, setValue] = useActionState("onChange", "http://example.com");
-
- return (
-
-
- );
-};
-
-export const Invalid = () => {
- const [value, setValue] = useActionState("onChange", "foo");
-
- return (
-
-
- );
-};
-
-
diff --git a/stories/LayerEditor.stories.jsx b/stories/LayerEditor.stories.jsx
deleted file mode 100644
index 7ea6d969..00000000
--- a/stories/LayerEditor.stories.jsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React from 'react';
-import LayerEditor from '../src/components/LayerEditor';
-
-
-export default {
- title: 'LayerEditor',
- component: LayerEditor,
-};
-
-export const Background = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Fill = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Line = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Symbol = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Raster = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Cirlce = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const FillExtrusion = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Heatmap = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Hillshade = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
diff --git a/stories/LayerListItem.stories.jsx b/stories/LayerListItem.stories.jsx
deleted file mode 100644
index 07ab68e1..00000000
--- a/stories/LayerListItem.stories.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import LayerList from '../src/components/LayerList';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'LayerList',
- component: LayerList,
-};
-
-export const Basic = () => (
-
-
- {}}
- onLayerSelect={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- onMoveLayer={() => {}}
- sources={{}}
- errors={[]}
- />
-
-
-);
-
-
diff --git a/stories/MapMaplibreGl.stories.jsx b/stories/MapMaplibreGl.stories.jsx
deleted file mode 100644
index 9e4961a1..00000000
--- a/stories/MapMaplibreGl.stories.jsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from 'react';
-import MapMaplibreGl from '../src/components/MapMaplibreGl';
-
-export default {
- title: 'MapMaplibreGl',
- component: MapMaplibreGl,
-};
-
-const mapStyle = {
- "version": 8,
- "sources": {
- "test1": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [0, -10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test2": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [15, 10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test3": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [-15, 10]
- },
- "properties": {}
- }
- ]
- }
- }
- },
- "sprite": "",
- "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
- "layers": [
- {
- "id": "test1",
- "type": "circle",
- "source": "test1",
- "paint": {
- "circle-radius": 40,
- "circle-color": "red"
- }
- },
- {
- "id": "test2",
- "type": "circle",
- "source": "test2",
- "paint": {
- "circle-radius": 40,
- "circle-color": "green"
- }
- },
- {
- "id": "test3",
- "type": "circle",
- "source": "test3",
- "paint": {
- "circle-radius": 40,
- "circle-color": "blue"
- }
- }
- ]
-}
-
-export const Basic = () => {
- return
- s}
- />
-
-};
-
-
diff --git a/stories/MapOpenLayers.stories.jsx b/stories/MapOpenLayers.stories.jsx
deleted file mode 100644
index 502ac46f..00000000
--- a/stories/MapOpenLayers.stories.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import MapOpenLayers from '../src/components/MapOpenLayers';
-
-
-export default {
- title: 'MapOpenLayers',
- component: MapOpenLayers,
-};
-
-const mapStyle = {
- "version": 8,
- "sources": {
- "test1": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [0, -10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test2": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [15, 10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test3": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [-15, 10]
- },
- "properties": {}
- }
- ]
- }
- }
- },
- "sprite": "",
- "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
- "layers": [
- {
- "id": "test1",
- "type": "circle",
- "source": "test1",
- "paint": {
- "circle-radius": 40,
- "circle-color": "red"
- }
- },
- {
- "id": "test2",
- "type": "circle",
- "source": "test2",
- "paint": {
- "circle-radius": 40,
- "circle-color": "green"
- }
- },
- {
- "id": "test3",
- "type": "circle",
- "source": "test3",
- "paint": {
- "circle-radius": 40,
- "circle-color": "blue"
- }
- }
- ]
-}
-
-export const Basic = () => {
- return
- s}
- onChange={() => {}}
- debugToolbox={true}
- />
-
-};
-
-
-
diff --git a/stories/Modal.stories.jsx b/stories/Modal.stories.jsx
deleted file mode 100644
index c87498de..00000000
--- a/stories/Modal.stories.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Modal from '../src/components/Modal';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'Modal',
- component: Modal,
-};
-
-export const Basic = () => (
-
-
-
- {[...Array(50).keys()].map(() => {
- return Some text
- })}
-
-
-
-);
-
-
diff --git a/stories/ModalAdd.stories.jsx b/stories/ModalAdd.stories.jsx
deleted file mode 100644
index 7a103aae..00000000
--- a/stories/ModalAdd.stories.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import ModalAdd from '../src/components/ModalAdd';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalAdd',
- component: ModalAdd,
-};
-
-export const Basic = () => (
-
-
-
-);
-
diff --git a/stories/ModalDebug.stories.jsx b/stories/ModalDebug.stories.jsx
deleted file mode 100644
index 01c762f1..00000000
--- a/stories/ModalDebug.stories.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import ModalDebug from '../src/components/ModalDebug';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalDebug',
- component: ModalDebug,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
diff --git a/stories/ModalExport.stories.jsx b/stories/ModalExport.stories.jsx
deleted file mode 100644
index 2fa76633..00000000
--- a/stories/ModalExport.stories.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import ModalExport from '../src/components/ModalExport';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalExport',
- component: ModalExport,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
diff --git a/stories/ModalLoading.stories.jsx b/stories/ModalLoading.stories.jsx
deleted file mode 100644
index e1d84055..00000000
--- a/stories/ModalLoading.stories.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import ModalLoading from '../src/components/ModalLoading';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalLoading',
- component: ModalLoading,
-};
-
-export const Basic = () => (
-
-
-
-);
-
diff --git a/stories/ModalOpen.stories.jsx b/stories/ModalOpen.stories.jsx
deleted file mode 100644
index fc7ab25d..00000000
--- a/stories/ModalOpen.stories.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import ModalOpen from '../src/components/ModalOpen';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalOpen',
- component: ModalOpen,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
-
-
-
diff --git a/stories/ModalSettings.stories.jsx b/stories/ModalSettings.stories.jsx
deleted file mode 100644
index f1f27819..00000000
--- a/stories/ModalSettings.stories.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import ModalSettings from '../src/components/ModalSettings';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-
-export default {
- title: 'ModalSettings',
- component: ModalSettings,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
-
diff --git a/stories/ModalSources.stories.jsx b/stories/ModalSources.stories.jsx
deleted file mode 100644
index 18e7a869..00000000
--- a/stories/ModalSources.stories.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import ModalSources from '../src/components/ModalSources';
-import {action} from '@storybook/addon-actions';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalSources',
- component: ModalSources,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
-
-
-
-
diff --git a/stories/ModalSurvey.stories.jsx b/stories/ModalSurvey.stories.jsx
deleted file mode 100644
index 63593b91..00000000
--- a/stories/ModalSurvey.stories.jsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import ModalSurvey from '../src/components/ModalSurvey';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ModalSurvey',
- component: ModalSurvey,
-};
-
-export const Basic = () => (
-
-
-
-);
-
-
-
-
-
-
-
diff --git a/stories/ScrollContainer.stories.jsx b/stories/ScrollContainer.stories.jsx
deleted file mode 100644
index baae5450..00000000
--- a/stories/ScrollContainer.stories.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import ScrollContainer from '../src/components/ScrollContainer';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'ScrollContainer',
- component: ScrollContainer,
-};
-
-export const Basic = () => (
-
-
-
- {[...Array(50).keys()].map(() => {
- return Some text
- })}
-
-
-
-);
-
-
diff --git a/stories/helper.js b/stories/helper.js
deleted file mode 100644
index 728b931c..00000000
--- a/stories/helper.js
+++ /dev/null
@@ -1,12 +0,0 @@
-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.jsx b/stories/ui.jsx
deleted file mode 100644
index d04db8ae..00000000
--- a/stories/ui.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-
-
-export function Describe ({children}) {
- return (
-
- {children}
-
- )
-}
-
-export function Wrapper ({children}) {
- return (
-
- {children}
-
- );
-};
-
-export function InputContainer ({children}) {
- return (
-
- {children}
-
- );
-};
-
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. -
-
- {}}
- value={value}
- errors={[]}
- fieldName={"Color"}
- fieldType={"color"}
- fieldSpec={latest['paint_fill']['fill-color']}
- />
-
-};
-
diff --git a/stories/FieldMultiInput.stories.jsx b/stories/FieldMultiInput.stories.jsx
deleted file mode 100644
index 7ac59a1b..00000000
--- a/stories/FieldMultiInput.stories.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import {useActionState} from './helper';
-import FieldMultiInput from '../src/components/FieldMultiInput';
-import {Wrapper} from './ui';
-
-export default {
- title: 'FieldMultiInput',
- component: FieldMultiInput,
-};
-
-
-export const Basic = () => {
- const options = [["FOO", "foo"], ["BAR", "bar"], ["BAZ", "baz"]];
- const [value, setValue] = useActionState("onChange", "FOO");
-
- return (
- | ID | -Preview | -
- {type}
- |
-
- |
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Fill = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Line = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Symbol = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Raster = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Cirlce = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const FillExtrusion = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Heatmap = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
-export const Hillshade = () => (
-
- {}}
- onLayerIdChange={() => {}}
- onMoveLayer={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- isFirstLayer={true}
- isLastLayer={false}
- layerIndex={0}
- />
-
-);
-
diff --git a/stories/LayerListItem.stories.jsx b/stories/LayerListItem.stories.jsx
deleted file mode 100644
index 07ab68e1..00000000
--- a/stories/LayerListItem.stories.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import LayerList from '../src/components/LayerList';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'LayerList',
- component: LayerList,
-};
-
-export const Basic = () => (
-
- {}}
- onLayerSelect={() => {}}
- onLayerDestroy={() => {}}
- onLayerCopy={() => {}}
- onLayerVisibilityToggle={() => {}}
- onMoveLayer={() => {}}
- sources={{}}
- errors={[]}
- />
-
-
- s}
- />
-
-};
-
-
diff --git a/stories/MapOpenLayers.stories.jsx b/stories/MapOpenLayers.stories.jsx
deleted file mode 100644
index 502ac46f..00000000
--- a/stories/MapOpenLayers.stories.jsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import React from 'react';
-import MapOpenLayers from '../src/components/MapOpenLayers';
-
-
-export default {
- title: 'MapOpenLayers',
- component: MapOpenLayers,
-};
-
-const mapStyle = {
- "version": 8,
- "sources": {
- "test1": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [0, -10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test2": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [15, 10]
- },
- "properties": {}
- }
- ]
- }
- },
- "test3": {
- "type": "geojson",
- "data": {
- "type": "FeatureCollection",
- "features": [
- {
- "type": "Feature",
- "geometry": {
- "type": "Point",
- "coordinates": [-15, 10]
- },
- "properties": {}
- }
- ]
- }
- }
- },
- "sprite": "",
- "glyphs": "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
- "layers": [
- {
- "id": "test1",
- "type": "circle",
- "source": "test1",
- "paint": {
- "circle-radius": 40,
- "circle-color": "red"
- }
- },
- {
- "id": "test2",
- "type": "circle",
- "source": "test2",
- "paint": {
- "circle-radius": 40,
- "circle-color": "green"
- }
- },
- {
- "id": "test3",
- "type": "circle",
- "source": "test3",
- "paint": {
- "circle-radius": 40,
- "circle-color": "blue"
- }
- }
- ]
-}
-
-export const Basic = () => {
- return
- s}
- onChange={() => {}}
- debugToolbox={true}
- />
-
-};
-
-
-
diff --git a/stories/Modal.stories.jsx b/stories/Modal.stories.jsx
deleted file mode 100644
index c87498de..00000000
--- a/stories/Modal.stories.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import Modal from '../src/components/Modal';
-import {Wrapper} from './ui';
-
-
-export default {
- title: 'Modal',
- component: Modal,
-};
-
-export const Basic = () => (
-
-
- {[...Array(50).keys()].map(() => {
- return
-
- Some text
- })} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {[...Array(50).keys()].map(() => {
- return
-
- Some text
- })} -
- {children}
-
- )
-}
-
-export function Wrapper ({children}) {
- return (
-
- {children}
-
- );
-};
-
-export function InputContainer ({children}) {
- return (
-
- {children}
-
- );
-};
-