mirror of
https://github.com/maputnik/editor.git
synced 2025-12-06 06:10:00 +00:00
Remove Storybook, cleanups (#860)
1. Changed references to point to this new repo 2. Fixed docker image publishing to point to ghcr.io. 3. Remove survey link - the survey is closed and there's no point in keeping it. 4. Remove storybook - Basically a storybook is the ability to look at components and see how they look and interact with them. It's a powerful tool for developing component library with "live" documentation. But it's an overkill for this project and I would like to reduce maintenance costs. Currently all the "stories" are in javascript and not in typescript and it feels like a waste of time to try and maintain it, along with updating the storybook library itself and everything around it.
This commit is contained in:
Harel M
GitHub
12
.github/workflows/ci.yml
vendored
12
.github/workflows/ci.yml
vendored
@@ -15,7 +15,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- run: docker build -t docker.pkg.github.com/maputnik/editor/editor:main .
|
||||
- run: docker build -t test-docker-image-build .
|
||||
|
||||
# build the editor
|
||||
build-node:
|
||||
@@ -53,17 +53,11 @@ jobs:
|
||||
node-version-file: '.nvmrc'
|
||||
- run: npm ci
|
||||
- run: npm run build
|
||||
- run: npm run build-storybook
|
||||
- name: artifacts/editor
|
||||
- name: artifacts/maputnik
|
||||
uses: actions/upload-artifact@v1
|
||||
with:
|
||||
name: editor
|
||||
name: maputnik
|
||||
path: dist
|
||||
- name: artifacts/storybook
|
||||
uses: actions/upload-artifact@v1
|
||||
with:
|
||||
name: storybook
|
||||
path: build/storybook
|
||||
|
||||
# Build and upload desktop CLI artifacts
|
||||
- name: Set up Go
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
const config = {
|
||||
stories: ['../stories/**/*.stories.jsx'],
|
||||
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-a11y/register', '@storybook/addon-storysource'],
|
||||
framework: {
|
||||
name: '@storybook/react-vite',
|
||||
options: {}
|
||||
}
|
||||
};
|
||||
export default config;
|
||||
@@ -1,7 +0,0 @@
|
||||
import { addons } from '@storybook/addons';
|
||||
import { themes } from '@storybook/theming';
|
||||
import theme from './maputnik.theme';
|
||||
|
||||
addons.setConfig({
|
||||
theme: theme,
|
||||
});
|
||||
@@ -1,8 +0,0 @@
|
||||
import { create } from '@storybook/theming/create';
|
||||
|
||||
export default create({
|
||||
base: 'light',
|
||||
|
||||
brandTitle: 'Maputnik',
|
||||
brandUrl: 'https://github.com/maputnik/editor',
|
||||
});
|
||||
@@ -7,7 +7,7 @@ RUN npm install
|
||||
|
||||
# Build maputnik
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
RUN npx vite build
|
||||
|
||||
#---------------------------------------------------------------------------
|
||||
# Create a clean nginx-alpine slim image with just the build results
|
||||
|
||||
12
README.md
12
README.md
@@ -1,10 +1,10 @@
|
||||
<img width="200" alt="Maputnik logo" src="https://cdn.jsdelivr.net/gh/maputnik/design/logos/logo-color.png" />
|
||||
|
||||
# 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 **<https://www.maplibre.org/maputnik/>** (all in local storage)
|
||||
- :link: Use the [Maputnik CLI](https://github.com/maputnik/editor/wiki/Maputnik-CLI) for local style development
|
||||
- :link: Use the [Maputnik CLI](https://github.com/maplibre/maputnik/wiki/Maputnik-CLI) for local style development
|
||||
- In a Docker, run this command and browse to http://localhost:8888, Ctrl+C to stop the server.
|
||||
|
||||
```bash
|
||||
docker run -it --rm -p 8888:8888 maputnik/editor
|
||||
docker run -it --rm -p 8888:8888 ghcr.io/maplibre/maputnik:main
|
||||
```
|
||||
|
||||
## Documentation
|
||||
|
||||
The documentation can be found in the [Wiki](https://github.com/maputnik/editor/wiki). You are welcome to collaborate!
|
||||
The documentation can be found in the [Wiki](https://github.com/maplibre/maputnik/wiki). You are welcome to collaborate!
|
||||
|
||||
- :link: **Study the [Maputnik Wiki](https://github.com/maputnik/editor/wiki)**
|
||||
- :link: **Study the [Maputnik Wiki](https://github.com/maplibre/maputnik/wiki)**
|
||||
- :video_camera: Design a map from Scratch https://youtu.be/XoDh0gEnBQo
|
||||
|
||||
[](https://youtu.be/XoDh0gEnBQo)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
5174
package-lock.json
generated
5174
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@@ -10,17 +10,15 @@
|
||||
"lint": "eslint ./src ./cypress --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"test": "cypress run",
|
||||
"cy:open": "cypress open",
|
||||
"lint-css": "stylelint \"src/styles/*.scss\"",
|
||||
"storybook": "storybook dev -h 0.0.0.0 -p 6006",
|
||||
"build-storybook": "storybook build -o build/storybook"
|
||||
"lint-css": "stylelint \"src/styles/*.scss\""
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/maputnik/editor"
|
||||
"url": "https://github.com/maplibre/maputnik"
|
||||
},
|
||||
"author": "Lukas Martinelli",
|
||||
"license": "MIT",
|
||||
"homepage": "https://github.com/maputnik/editor#readme",
|
||||
"homepage": "https://github.com/maplibre/maputnik#readme",
|
||||
"dependencies": {
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.2.3",
|
||||
"@maplibre/maplibre-gl-style-spec": "^20.1.0",
|
||||
@@ -92,15 +90,6 @@
|
||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||
"@rollup/plugin-replace": "^5.0.5",
|
||||
"@shellygo/cypress-test-utils": "^2.0.17",
|
||||
"@storybook/addon-a11y": "^7.6.5",
|
||||
"@storybook/addon-actions": "^7.6.5",
|
||||
"@storybook/addon-links": "^7.6.5",
|
||||
"@storybook/addon-storysource": "^7.6.5",
|
||||
"@storybook/addons": "^7.6.5",
|
||||
"@storybook/builder-vite": "^7.6.5",
|
||||
"@storybook/react": "^7.6.5",
|
||||
"@storybook/react-vite": "^7.6.5",
|
||||
"@storybook/theming": "^7.6.5",
|
||||
"@types/codemirror": "^5.60.15",
|
||||
"@types/color": "^3.0.6",
|
||||
"@types/cors": "^2.8.17",
|
||||
@@ -137,7 +126,6 @@
|
||||
"mocha": "^9.2.2",
|
||||
"postcss": "^8.4.12",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"storybook": "^7.6.5",
|
||||
"stylelint": "^14.6.1",
|
||||
"stylelint-config-recommended-scss": "^6.0.0",
|
||||
"stylelint-scss": "^4.2.0",
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
import classnames from 'classnames'
|
||||
import {detect} from 'detect-browser';
|
||||
|
||||
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage, MdAssignmentTurnedIn} from 'react-icons/md'
|
||||
import {MdFileDownload, MdOpenInBrowser, MdSettings, MdLayers, MdHelpOutline, MdFindInPage} from 'react-icons/md'
|
||||
import pkgJson from '../../package.json'
|
||||
|
||||
|
||||
@@ -43,29 +43,6 @@ class ToolbarLink extends React.Component<ToolbarLinkProps> {
|
||||
}
|
||||
}
|
||||
|
||||
type ToolbarLinkHighlightedProps = {
|
||||
className?: string
|
||||
children?: React.ReactNode
|
||||
href?: string
|
||||
onToggleModal?(...args: unknown[]): unknown
|
||||
};
|
||||
|
||||
class ToolbarLinkHighlighted extends React.Component<ToolbarLinkHighlightedProps> {
|
||||
render() {
|
||||
return <a
|
||||
className={classnames('maputnik-toolbar-link', "maputnik-toolbar-link--highlighted", this.props.className)}
|
||||
href={this.props.href}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
data-wd-key="toolbar:link-highlighted"
|
||||
>
|
||||
<span className="maputnik-toolbar-link-wrapper">
|
||||
{this.props.children}
|
||||
</span>
|
||||
</a>
|
||||
}
|
||||
}
|
||||
|
||||
type ToolbarSelectProps = {
|
||||
children?: React.ReactNode
|
||||
wdKey?: string
|
||||
@@ -216,7 +193,7 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
|
||||
className="maputnik-toolbar-logo"
|
||||
target="blank"
|
||||
rel="noreferrer noopener"
|
||||
href="https://github.com/maputnik/editor"
|
||||
href="https://github.com/maplibre/maputnik"
|
||||
>
|
||||
<img src="node_modules/maputnik-design/logos/logo-color.svg" />
|
||||
<h1>
|
||||
@@ -272,14 +249,10 @@ export default class AppToolbar extends React.Component<AppToolbarProps> {
|
||||
</label>
|
||||
</ToolbarSelect>
|
||||
|
||||
<ToolbarLink href={"https://github.com/maputnik/editor/wiki"}>
|
||||
<ToolbarLink href={"https://github.com/maplibre/maputnik/wiki"}>
|
||||
<MdHelpOutline />
|
||||
<IconText>Help</IconText>
|
||||
</ToolbarLink>
|
||||
<ToolbarLinkHighlighted href={"https://gregorywolanski.typeform.com/to/cPgaSY"}>
|
||||
<MdAssignmentTurnedIn />
|
||||
<IconText>Take the Maputnik Survey</IconText>
|
||||
</ToolbarLinkHighlighted>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -31,7 +31,7 @@ export default class Doc extends React.Component<DocProps> {
|
||||
const renderValues = (
|
||||
!!values &&
|
||||
// HACK: Currently we merge additional values into the style spec, so this is required
|
||||
// See <https://github.com/maputnik/editor/blob/main/src/components/PropertyGroup.jsx#L16>
|
||||
// See <https://github.com/maplibre/maputnik/blob/main/src/components/PropertyGroup.jsx#L16>
|
||||
!Array.isArray(values)
|
||||
);
|
||||
|
||||
|
||||
@@ -115,7 +115,7 @@ export default class MapMaplibreGl extends React.Component<MapMaplibreGlProps, M
|
||||
this.updateMapFromProps(this.props);
|
||||
|
||||
if(this.state.inspect && this.props.inspectModeEnabled !== this.state.inspect._showInspectMap) {
|
||||
// HACK: Fix for <https://github.com/maputnik/editor/issues/576>, while we wait for a proper fix.
|
||||
// HACK: Fix for <https://github.com/maplibre/maputnik/issues/576>, while we wait for a proper fix.
|
||||
// eslint-disable-next-line
|
||||
this.state.inspect._popupBlocked = false;
|
||||
this.state.inspect.toggleInspector()
|
||||
|
||||
@@ -20,7 +20,7 @@ export default class Modal extends React.Component<ModalProps> {
|
||||
underlayClickExits: true
|
||||
}
|
||||
|
||||
// See <https://github.com/maputnik/editor/issues/416>
|
||||
// See <https://github.com/maplibre/maputnik/issues/416>
|
||||
onClose = () => {
|
||||
if (document.activeElement) {
|
||||
(document.activeElement as HTMLElement).blur();
|
||||
|
||||
@@ -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 (
|
||||
<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',
|
||||
};
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldArray
|
||||
label="Foobar"
|
||||
type="number"
|
||||
value={value}
|
||||
length={3}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const StringType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldArray
|
||||
label="Foobar"
|
||||
type="string"
|
||||
value={value}
|
||||
length={3}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldAutocomplete
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldCheckbox
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicChecked = () => {
|
||||
const [value, setValue] = useActionState("onChange", true);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldCheckbox
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldColor
|
||||
label="Foobar"
|
||||
value={color}
|
||||
onChange={setColor}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldDynamicArray
|
||||
label="Foobar"
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const UrlType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["http://example.com"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldDynamicArray
|
||||
label="Foobar"
|
||||
type="url"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const EnumType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["foo"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldDynamicArray
|
||||
label="Foobar"
|
||||
fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
|
||||
type="enum"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldEnum
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicFewWithDefault = () => {
|
||||
const options = ["Foo", "Bar", "Baz"];
|
||||
const [value, setValue] = useActionState("onChange", null);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldEnum
|
||||
label="Foobar"
|
||||
options={options}
|
||||
default={"Baz"}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicMany = () => {
|
||||
const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
|
||||
const [value, setValue] = useActionState("onChange", "a");
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldEnum
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicManyWithDefault = () => {
|
||||
const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
|
||||
const [value, setValue] = useActionState("onChange", "a");
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldEnum
|
||||
label="Foobar"
|
||||
options={options}
|
||||
default={"h"}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 <div style={{width: "360px"}}>
|
||||
<FieldFunction
|
||||
onChange={() => {}}
|
||||
value={value}
|
||||
errors={[]}
|
||||
fieldName={"Color"}
|
||||
fieldType={"color"}
|
||||
fieldSpec={latest['paint_fill']['fill-color']}
|
||||
/>
|
||||
</div>
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldMultiInput
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldNumber
|
||||
label="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const Range = () => {
|
||||
const [value, setValue] = useActionState("onChange", 1);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldNumber
|
||||
label="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
min={1}
|
||||
max={24}
|
||||
allowRange={true}
|
||||
rangeStep={1}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldSelect
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldString
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<FieldUrl
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
onInput={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const Invalid = () => {
|
||||
const [value, setValue] = useActionState("onChange", "foo");
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<FieldUrl
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
onInput={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 <Wrapper>
|
||||
<table style={{textAlign: "left"}}>
|
||||
<thead style={{borderBottom: "solid 1px white"}}>
|
||||
<tr>
|
||||
<td>ID</td>
|
||||
<td>Preview</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{types.map(type => (
|
||||
<tr>
|
||||
<td style={{paddingRight: "1em"}}>
|
||||
<code>{type}</code>
|
||||
</td>
|
||||
<td>
|
||||
<IconLayer type={type} />
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Wrapper>
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<InputArray
|
||||
type="number"
|
||||
value={value}
|
||||
length={3}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const StringType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["a", "b", "c"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<InputArray
|
||||
type="string"
|
||||
value={value}
|
||||
length={3}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputAutocomplete
|
||||
label="Foobar"
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 = () => (
|
||||
<InputContainer>
|
||||
<InputButton onClick={action('onClick')}>
|
||||
Hello InputButton
|
||||
</InputButton>
|
||||
</InputContainer>
|
||||
);
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputCheckbox
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicChecked = () => {
|
||||
const [value, setValue] = useActionState("onChange", true);
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputCheckbox
|
||||
label="Foobar"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputColor
|
||||
label="Foobar"
|
||||
value={color}
|
||||
onChange={setColor}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<Wrapper>
|
||||
<InputDynamicArray
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const UrlType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["http://example.com"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<InputDynamicArray
|
||||
type="url"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export const EnumType = () => {
|
||||
const [value, setValue] = useActionState("onChange", ["foo"]);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<InputDynamicArray
|
||||
fieldSpec={{values: {"foo": null, "bar": null, "baz": null}}}
|
||||
type="enum"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputEnum
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicFewWithDefault = () => {
|
||||
const options = ["Foo", "Bar", "Baz"];
|
||||
const [value, setValue] = useActionState("onChange", null);
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputEnum
|
||||
options={options}
|
||||
default={"Baz"}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicMany = () => {
|
||||
const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
|
||||
const [value, setValue] = useActionState("onChange", "a");
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputEnum
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicManyWithDefault = () => {
|
||||
const options = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"];
|
||||
const [value, setValue] = useActionState("onChange", "a");
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputEnum
|
||||
options={options}A
|
||||
default={"h"}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -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 <Wrapper>
|
||||
<InputJson
|
||||
layer={layer}
|
||||
onClick={action('onClick')}
|
||||
/>
|
||||
</Wrapper>
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputMultiInput
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputNumber
|
||||
name="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const Range = () => {
|
||||
const [value, setValue] = useActionState("onChange", 1);
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputNumber
|
||||
name="number"
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
min={1}
|
||||
max={24}
|
||||
allowRange={true}
|
||||
rangeStep={1}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputSelect
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputString
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const WithDefault = () => {
|
||||
const [value, setValue] = useActionState("onChange", null);
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputString
|
||||
value={value}
|
||||
default={"Edit me..."}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const Multiline = () => {
|
||||
const [value, setValue] = useActionState("onChange", "Hello\nworld");
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputString
|
||||
multi={true}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const MultilineWithDefault = () => {
|
||||
const [value, setValue] = useActionState("onChange", null);
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputString
|
||||
multi={true}
|
||||
default={"Edit\nme.."}
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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 (
|
||||
<InputContainer>
|
||||
<InputUrl
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
onInput={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export const Invalid = () => {
|
||||
const [value, setValue] = useActionState("onChange", "foo");
|
||||
|
||||
return (
|
||||
<InputContainer>
|
||||
<InputUrl
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
onInput={setValue}
|
||||
/>
|
||||
</InputContainer>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
import React from 'react';
|
||||
import LayerEditor from '../src/components/LayerEditor';
|
||||
|
||||
|
||||
export default {
|
||||
title: 'LayerEditor',
|
||||
component: LayerEditor,
|
||||
};
|
||||
|
||||
export const Background = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "background", type: "background"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Fill = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "fill", type: "fill", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Line = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "line", type: "line", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Symbol = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "symbol", type: "symbol", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Raster = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "raster", type: "raster", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Cirlce = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "circle", type: "circle", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const FillExtrusion = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "fill-extrusion", type: "fill-extrusion", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Heatmap = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "heatmap", type: "heatmap", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Hillshade = () => (
|
||||
<div>
|
||||
<LayerEditor
|
||||
layer={{id: "hillshade", type: "hillshade", source: "openmaptiles"}}
|
||||
sources={{}}
|
||||
vectorLayers={{}}
|
||||
spec={latest}
|
||||
errors={[]}
|
||||
onLayerChanged={() => {}}
|
||||
onLayerIdChange={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
isFirstLayer={true}
|
||||
isLastLayer={false}
|
||||
layerIndex={0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{width: "200px"}}>
|
||||
<LayerList
|
||||
layers={[
|
||||
{
|
||||
id: "background",
|
||||
type: "background",
|
||||
},
|
||||
{
|
||||
id: "water",
|
||||
type: "fill",
|
||||
source: "openmaptiles"
|
||||
},
|
||||
{
|
||||
id: "road_trunk",
|
||||
type: "line",
|
||||
source: "openmaptiles"
|
||||
},
|
||||
{
|
||||
id: "road_minor",
|
||||
type: "line",
|
||||
source: "openmaptiles"
|
||||
},
|
||||
{
|
||||
id: "building",
|
||||
type: "fill",
|
||||
source: "openmaptiles"
|
||||
},
|
||||
]}
|
||||
selectedLayerIndex={0}
|
||||
onLayersChange={() => {}}
|
||||
onLayerSelect={() => {}}
|
||||
onLayerDestroy={() => {}}
|
||||
onLayerCopy={() => {}}
|
||||
onLayerVisibilityToggle={() => {}}
|
||||
onMoveLayer={() => {}}
|
||||
sources={{}}
|
||||
errors={[]}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
@@ -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 <div style={{height: "100vh", width: "100vw"}}>
|
||||
<MapMaplibreGl
|
||||
mapStyle={mapStyle}
|
||||
inspectModeEnabled={false}
|
||||
replaceAccessTokens={(s) => s}
|
||||
/>
|
||||
</div>
|
||||
};
|
||||
|
||||
|
||||
@@ -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 <div style={{height: "100vh", width: "100vw", display: "flex"}}>
|
||||
<MapOpenLayers
|
||||
mapStyle={mapStyle}
|
||||
inspectModeEnabled={false}
|
||||
replaceAccessTokens={(s) => s}
|
||||
onChange={() => {}}
|
||||
debugToolbox={true}
|
||||
/>
|
||||
</div>
|
||||
};
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<Modal title="hello" isOpen={true}>
|
||||
{[...Array(50).keys()].map(() => {
|
||||
return <p>Some text</p>
|
||||
})}
|
||||
</Modal>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalAdd
|
||||
layers={[]}
|
||||
sources={{}}
|
||||
isOpen={true}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalDebug
|
||||
isOpen={true}
|
||||
renderer="mlgljs"
|
||||
maplibreGlDebugOptions={{}}
|
||||
mapView={{zoom: 1, center: {lat: 0, lng: 0}}}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalExport
|
||||
isOpen={true}
|
||||
mapStyle={{}}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalLoading
|
||||
isOpen={true}
|
||||
title="Loading"
|
||||
message="Loading 'something.geojson'"
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalOpen
|
||||
isOpen={true}
|
||||
mapStyle={{}}
|
||||
onChangeMetadataProperty={action("onChangeMetadataProperty")}
|
||||
onStyleChanged={action("onStyleChanged")}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalSettings
|
||||
isOpen={true}
|
||||
mapStyle={{}}
|
||||
onStyleChanged={action("onStyleChanged")}
|
||||
onChangeMetadataProperty={action("onChangeMetadataProperty")}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalSources
|
||||
isOpen={true}
|
||||
mapStyle={{sources: {}}}
|
||||
onChangeMetadataProperty={action("onChangeMetadataProperty")}
|
||||
onStyleChanged={action("onStyleChanged")}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ModalSurvey
|
||||
isOpen={true}
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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 = () => (
|
||||
<Wrapper>
|
||||
<div style={{maxHeight: "200px"}}>
|
||||
<ScrollContainer>
|
||||
{[...Array(50).keys()].map(() => {
|
||||
return <p>Some text</p>
|
||||
})}
|
||||
</ScrollContainer>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
|
||||
@@ -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];
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
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: "260px", margin: "0.4em"}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function InputContainer ({children}) {
|
||||
return (
|
||||
<div style={{maxWidth: "171px", margin: "0.4em"}}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user