mobility-toolbox-js 2.0.0-beta.6 → 2.0.0-beta.62

package/src/doc/components/Example.js

@@ -1,153 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { Grid, Paper, Typography } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { useParams } from 'react-router-dom';
-import Markdown from 'react-markdown';
-import CodeSandboxButton from './CodeSandboxButton';
-import EXAMPLES from '../examples';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    padding: 12,
-  },
-  htmlContainer: {
-    height: 500,
-  },
-  noPointer: {
-    // Remove pointer events for mobile devices on load
-    [theme.breakpoints.down('xs')]: {
-      pointerEvents: 'none',
-    },
-  },
-  paper: {
-    position: 'relative',
-    margin: '20px 0',
-  },
-  fileName: {
-    padding: '10px 0 5px 15px',
-  },
-  editButton: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    paddingTop: 5,
-    paddingRight: 10,
-  },
-  readme: {
-    '& p': {
-      fontSize: 18,
-    },
-  },
-}));
-
-function Example() {
-  const classes = useStyles();
-  const { exampleKey } = useParams((params) => params);
-  const example = EXAMPLES.find((e) => e.key === exampleKey);
-  const [html, setHtml] = useState();
-  const [js, setJs] = useState();
-  const [readme, setReadme] = useState();
-  const [isNavigable, setIsNavigable] = useState(false);
-  const htmlFileName =
-    (example.files && example.files.html) || `${exampleKey}.html`;
-  const readmeFileName =
-    (example.files && example.files.readme) || `${exampleKey}.md`;
-  const jsFileName = (example.files && example.files.js) || `${exampleKey}.js`;
-
-  useEffect(() => {
-    import(`../examples/${htmlFileName}`).then((h) => {
-      // Clean the html loaded by the previous example
-      setHtml(null);
-      // Load the new html
-      setHtml(h.default);
-
-      // const filePath = `../examples/${example.files.js}?dfdf=ocr`;
-      // We use this to avoid cache and re-execute the code of the module.
-      import(`../examples/${jsFileName}?`).then((module) => {
-        module.default();
-
-        fetch(`../examples/${jsFileName}`)
-          .then((res) => res.text())
-          .then((jsCode) => {
-            // Replace relative import by library import
-            setJs(
-              jsCode
-                .replace(/'\.\.\/\.\.\//gm, "'mobility-toolbox-js/")
-                .replace('export default () => {\n', '')
-                .replace(/^};\n$/gm, '')
-                .replace(/^ {2}/gm, ''),
-            );
-          });
-      });
-
-      fetch(`../examples/${readmeFileName}`)
-        .then((res) => res.status === 200 && res.text())
-        .then((md) => setReadme(md))
-        .catch(() => setReadme(''));
-    });
-  }, [example, htmlFileName, jsFileName, readmeFileName]);
-
-  return (
-    <div style={{ margin: 'auto', marginTop: 30 }}>
-      <Grid container direction="column" spacing={3}>
-        <Grid item xs={12}>
-          <Typography variant="h1" className="headline">
-            {example.name}
-          </Typography>
-          <Markdown className={classes.readme}>
-            {example.description || ''}
-          </Markdown>
-          <Markdown className={classes.readme}>{readme || ''}</Markdown>
-        </Grid>
-        <Grid item xs={12}>
-          <Paper className={classes.paper} onClick={() => setIsNavigable(true)}>
-            <div
-              className={`${classes.htmlContainer} ${
-                isNavigable ? '' : classes.noPointer
-              }`}
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{ __html: html }}
-            />
-          </Paper>
-        </Grid>
-        {js && html ? (
-          <>
-            <Grid item xs={12}>
-              <Paper className={classes.paper}>
-                <Typography className={classes.fileName}>
-                  {jsFileName}
-                </Typography>
-                <SyntaxHighlighter language="javascript">
-                  {js}
-                </SyntaxHighlighter>
-                <CodeSandboxButton
-                  className={classes.editButton}
-                  extraFiles={example.extraFiles || {}}
-                  html={html}
-                  js={js}
-                />
-              </Paper>
-            </Grid>
-            <Grid item xs={12}>
-              <Paper className={classes.paper}>
-                <Typography className={classes.fileName}>
-                  {htmlFileName}
-                </Typography>
-                <SyntaxHighlighter language="html">{html}</SyntaxHighlighter>
-                <CodeSandboxButton
-                  className={classes.editButton}
-                  html={html}
-                  js={js}
-                  extraFiles={{}}
-                />
-              </Paper>
-            </Grid>
-          </>
-        ) : null}
-      </Grid>
-    </div>
-  );
-}
-
-export default React.memo(Example);

package/src/doc/components/Examples.js

@@ -1,183 +0,0 @@
-import React, { useState } from 'react';
-import Grid from '@material-ui/core/Grid';
-import MuiCard from '@material-ui/core/Card';
-import MuiCardMedia from '@material-ui/core/CardMedia';
-import CardContent from '@material-ui/core/CardContent';
-import CardActions from '@material-ui/core/CardActions';
-import Icon from '@material-ui/core/Icon';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { CgArrowRight } from 'react-icons/cg';
-import TextField from '@material-ui/core/TextField';
-import Markdown from 'react-markdown';
-import EXAMPLES from '../examples';
-
-const Card = withStyles({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-    width: '100%',
-    boxShadow: 'none',
-  },
-})(MuiCard);
-
-const CardMedia = withStyles({
-  root: {
-    paddingTop: '56.25%',
-  },
-})(MuiCardMedia);
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    width: '100%',
-    padding: theme.spacing(2),
-  },
-  filterField: {
-    width: '100%',
-  },
-  example: {
-    '&.MuiGrid-item': {
-      padding: '0 !important',
-    },
-  },
-  exampleLink: {
-    height: '100%',
-    width: '100%',
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'space-between',
-    height: '100%',
-  },
-  header: {
-    marginBottom: 40,
-  },
-  cardWrapper: {
-    position: 'relative',
-    height: '100%',
-    width: '100%',
-    '& .MuiIcon-root': {
-      width: 30,
-      height: 30,
-      '& svg': {
-        height: '100%',
-        width: '100%',
-      },
-      margin: 35,
-      transition: 'margin-left 500ms ease, color 800ms ease',
-    },
-    '&:hover': {
-      '& .MuiIcon-root': {
-        marginLeft: 60,
-        color: theme.colors.primaryGreen,
-      },
-    },
-  },
-  cardOverlay: {
-    position: 'absolute',
-    display: 'flex',
-    alignItems: 'center',
-    height: '100%',
-    width: '100%',
-    boxSizing: 'border-box',
-    boxShadow:
-      'inset 0px 1px 3px 0px rgba(0, 0, 0, 0.12), inset 0px -1px 1px 0px rgba(0, 0, 0, 0.14)',
-    border: '15px solid white',
-    transition: 'border 500ms ease',
-    '&:hover': {
-      border: '5px solid white',
-    },
-  },
-}));
-
-const filterExamples = (str, examples) => {
-  const qry = str.toLowerCase();
-  return examples.filter(
-    (ex) =>
-      `${ex.name}`.toLowerCase().includes(qry) ||
-      (ex.tags || []).find((tag) => tag.toLowerCase().includes(qry)),
-  );
-};
-
-// Get the public api key
-fetch('https://backend.developer.geops.io/publickey')
-  .then((response) => response.json())
-  .then((data) => {
-    if (data && data.success) {
-      window.apiKey = data.key;
-    }
-  });
-
-function Examples() {
-  const classes = useStyles();
-  const [filter, setFilter] = useState('');
-  const [raisedExampe, setRaisedExample] = useState(null);
-  const filteredExamples = filterExamples(filter, EXAMPLES);
-
-  return (
-    <Grid container spacing={3}>
-      <Grid item xs={12} className={classes.filterField}>
-        <Typography variant="h1" className={classes.header}>
-          Examples
-        </Typography>
-        <TextField
-          placeholder="Filter..."
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
-      </Grid>
-      {!filteredExamples.length && (
-        <Grid item xs={12}>
-          Nothing found.
-        </Grid>
-      )}
-      {filteredExamples.map((ex) => (
-        <Grid
-          item
-          xs={12}
-          sm={6}
-          lg={4}
-          container
-          className={classes.example}
-          key={ex.key}
-        >
-          <a href={`/example/${ex.key}`} className={classes.exampleLink}>
-            <div className={classes.cardWrapper}>
-              <div className={classes.cardOverlay} />
-              <Card
-                raised={ex === raisedExampe}
-                className={classes.card}
-                onMouseOver={() => setRaisedExample(ex)}
-                onMouseOut={() => setRaisedExample(null)}
-                onFocus={() => setRaisedExample(ex)}
-                onBlur={() => setRaisedExample(null)}
-              >
-                <CardMedia image={ex.img} />
-                <Box className={classes.container}>
-                  <CardContent className={classes.cardContent}>
-                    <Typography variant="h3">{ex.name}</Typography>
-                    <Typography>
-                      <Markdown className={classes.readme}>
-                        {ex.description || ''}
-                      </Markdown>
-                    </Typography>
-                  </CardContent>
-                  <CardActions>
-                    <Icon>
-                      <CgArrowRight />
-                    </Icon>
-                  </CardActions>
-                </Box>
-              </Card>
-            </div>
-          </a>
-        </Grid>
-      ))}
-    </Grid>
-  );
-}
-
-export default Examples;

package/src/doc/components/Home.js

@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Markdown from 'react-markdown';
-import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import Typography from '@material-ui/core/Typography';
-import TrackerExample from './TrackerExample';
-
-const codeHtmlPage = `
-<html>
-  <head>
-    <title>Realtime map</title>
-  </head>
-  <body>
-    <div id="map" style="height: 300px; width: 100%" />
-  </body>
-</html>
-`;
-
-const codeMapObject = `
-import { Map } from 'maplibre-gl;
-import { TralisLayer } from 'mobility-toolbox-js/mapbox';
-import 'maplibre-gl/dist/maplibre-gl.css';
-
-const map = new Map({
-  container: 'map',
-  style: 'https://maps.geops.io/styles/travic_v2/style.json?key=' + window.apiKey,
-  center: [7.4707, 46.95],
-  zoom: 12,
-});
-`;
-
-const codeTracker = `
-const tracker = new TralisLayer({
-  url: 'wss://api.geops.io/tracker-ws/v1/',
-  apiKey: window.apiKey,
-});
-
-tracker.init(map);
-`;
-
-function MarkdownHeading({ ...props }) {
-  // eslint-disable-next-line react/prop-types
-  const { level, children } = props;
-  return <Typography variant={`h${level}`}>{children}</Typography>;
-}
-
-function Home() {
-  const [source, setSource] = useState(null);
-  useEffect(() => {
-    fetch('../../../README.md')
-      .then((response) => response.text())
-      .then((text) => {
-        // only show the 'Documentation and examples' section on GitHub
-        const noDocText = text.split('## Documentation')[0];
-        setSource(noDocText);
-      });
-  }, []);
-
-  if (!source) {
-    return null;
-  }
-
-  const renderers = {
-    heading: MarkdownHeading,
-  };
-
-  return (
-    <>
-      <Markdown renderers={renderers}>{source}</Markdown>
-      <br />
-      <h2>Quick Start</h2>
-      <TrackerExample />
-      <p>
-        This example shows how to draw real time vehicle positions on a{' '}
-        <a
-          href="https://maplibre.org/maplibre-gl-js-docs/"
-          rel="noreferrer"
-          target="_blank"
-        >
-          Maplibre GL JS
-        </a>{' '}
-        map. Check out the{' '}
-        <a href="/example/ol-tracker">Live Tracker with OpenLayers</a> example
-        to see how to use{' '}
-        <a href="https://openlayers.org/" target="_blank" rel="noreferrer">
-          OpenLayers
-        </a>{' '}
-        instead.
-      </p>
-      <p>First, create a HTML page with an empty map container.</p>
-      <SyntaxHighlighter language="html" code={codeHtmlPage.trim()} />
-      <p>Create a Maplibre map.</p>
-      <SyntaxHighlighter language="js" code={codeMapObject.trim()} />
-      <p>
-        Finally, add the <i>TralisLayer</i> for rendering real time vehicle
-        positions from our Realtime API. For more information about the backend
-        and for obtaining the required API-Key, visit our Developer Portal at{' '}
-        <a target="_blank" rel="noreferrer" href="https://geops.io">
-          https://geops.io
-        </a>
-        .
-      </p>
-      <SyntaxHighlighter language="js" code={codeTracker.trim()} />
-    </>
-  );
-}
-export default Home;

package/src/doc/components/TrackerExample.js

@@ -1,38 +0,0 @@
-import React, { useEffect } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import 'maplibre-gl/dist/maplibre-gl.css';
-import { Map } from 'maplibre-gl';
-import { TralisLayer } from '../../mapbox';
-
-const useStyles = makeStyles({
-  root: {
-    width: '100%',
-    height: 300,
-    pointerEvents: 'none',
-  },
-});
-
-function TrackerExample() {
-  const classes = useStyles();
-
-  useEffect(() => {
-    const map = new Map({
-      container: 'map',
-      style: `https://maps.geops.io/styles/travic_v2/style.json?key=${window.apiKey}`,
-      center: [7.4707, 46.95],
-      zoom: 12,
-    });
-
-    const tracker = new TralisLayer({
-      url: 'wss://api.geops.io/tracker-ws/v1/',
-      apiKey: window.apiKey,
-      isQueryable: false,
-    });
-
-    tracker.init(map);
-  }, []);
-
-  return <div id="map" className={classes.root} />;
-}
-
-export default TrackerExample;