mobility-toolbox-js 2.0.0-beta.2 → 2.0.0-beta.8

package/src/doc/components/CodeSandboxButton.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { getParameters } from 'codesandbox/lib/api/define';
+import { Button, SvgIcon } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  button: {
+    padding: '5px 15px',
+  },
+});
+
+function CodeSandboxButton({ html, js, extraFiles, ...props }) {
+  const classes = useStyles();
+
+  if (!html || !js) {
+    return null;
+  }
+
+  const dataSB = {
+    files: {
+      'index.html': {
+        content: `${html}<script src="index.js"></script>`,
+      },
+      'index.js': {
+        content: js // eslint-disable-next-line no-template-curly-in-string
+          .replaceAll('${window.apiKey}', window.apiKey)
+          .replaceAll('window.apiKey', `'${window.apiKey}'`),
+      },
+      'package.json': {
+        content: {
+          name: 'vanilla',
+          version: '1.0.0',
+          description: 'Mobility example starter project',
+          main: 'index.html',
+          scripts: {
+            start: 'parcel index.html --open',
+            build: 'parcel build index.html',
+          },
+          dependencies: {
+            'mapbox-gl': '1',
+            'maplibre-gl': '2',
+            'mobility-toolbox-js': 'latest@beta',
+            ol: '6.3.1',
+            'query-string': '6.13.1',
+          },
+          devDependencies: {
+            '@babel/core': '7.2.0',
+            'parcel-bundler': '^1.6.1',
+          },
+          keywords: [
+            'javascript',
+            'starter',
+            'mobility-toolbox-js',
+            'mobility',
+            'toolbox',
+          ],
+        },
+      },
+      ...extraFiles,
+    },
+  };
+  const dataSBStr = getParameters(dataSB);
+  return (
+    <form
+      action="https://codesandbox.io/api/v1/sandboxes/define"
+      method="POST"
+      target="_blank"
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...props}
+    >
+      <input type="hidden" name="parameters" value={dataSBStr} />
+      <Button
+        type="submit"
+        className={classes.button}
+        startIcon={
+          <SvgIcon fontSize="large">
+            <path
+              d="M2 6l10.455-6L22.91 6L23 17.95L12.455 24L2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144l7.32-4.18l-3.871-2.197l-3.41 1.945l-3.43-1.968L5.133 6.6z"
+              fill="currentColor"
+            />
+          </SvgIcon>
+        }
+      >
+        Edit in Sandbox
+      </Button>
+    </form>
+  );
+}
+
+CodeSandboxButton.propTypes = {
+  html: PropTypes.string,
+  js: PropTypes.string,
+  extraFiles: PropTypes.shape(),
+};
+
+CodeSandboxButton.defaultProps = {
+  html: null,
+  js: null,
+  extraFiles: {},
+};
+
+export default React.memo(CodeSandboxButton);

package/src/doc/components/Documentation.js

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { useParams, useLocation } from 'react-router-dom';
+import Esdoc from './Esdoc/Esdoc';
+
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    flexGrow: 1,
+    justifyContent: 'center',
+    height: '100%',
+  },
+  iframe: {
+    flexGrow: 1,
+    border: 0,
+    overflow: 'hidden',
+  },
+});
+
+function Documentation() {
+  const classes = useStyles();
+  const params = useParams();
+  const { hash } = useLocation();
+  const [path, setPath] = useState('identifiers%20html');
+
+  useEffect(() => {
+    const matchPath = (params || {})['*'];
+    if (matchPath) {
+      setPath(matchPath.replace(/ /g, '.') + hash);
+    }
+  }, [params, hash]);
+
+  return (
+    <div className={classes.root}>
+      <Esdoc path={path} />
+    </div>
+  );
+}
+
+export default React.memo(Documentation);

package/src/doc/components/Esdoc/Anchor.js

@@ -0,0 +1,57 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Scrollchor } from 'react-scrollchor';
+
+const propTypes = {
+  /**
+   * Path to the link, can include an anchor #
+   */
+  path: PropTypes.string.isRequired,
+
+  /**
+   * Children content of the link.
+   */
+  children: PropTypes.node.isRequired,
+};
+
+/**
+ * Anchor which returns a Scrollchor element
+ * if the path contains an anchor (#), otherwise it returns a <a> element.
+ * @param  {string} options.path  Path to the link, can include an anchor #
+ * @param  {node} options.children Children content of the link.
+ * @return {node} Scrollchor or <a> element
+ * @private
+ */
+function Anchor({ path, children, ...other }) {
+  const pathElements = path.split('#');
+  if (pathElements[0] === window.location.pathname) {
+    const anchor = pathElements[1];
+    const to = anchor ? `#${anchor}` : '';
+
+    return (
+      <Scrollchor
+        to={to}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...other}
+      >
+        {children}
+      </Scrollchor>
+    );
+  }
+
+  return (
+    <a
+      href={path}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...other}
+    >
+      {children}
+    </a>
+  );
+}
+
+Anchor.propTypes = propTypes;
+
+export default Anchor;

package/src/doc/components/Esdoc/ClassDoc.js

@@ -0,0 +1,272 @@
+/* eslint-disable no-underscore-dangle */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import Markdown from 'react-markdown';
+import FileDocLinkHTML from './FileDocLinkHTML';
+import MixinClassesHTML from './MixinClassesHTML';
+import ExtendsChainHTML from './ExtendsChainHTML';
+import DirectSubclassHTML from './DirectSubclassHTML';
+import IndirectSubclassHTML from './IndirectSubclassHTML';
+import DocsLinkHTML from './DocsLinkHTML';
+import SummaryHTML from './SummaryHTML';
+import DetailHTML from './DetailHTML';
+import ExperimentalHTML from './ExperimentalHTML';
+import DeprecatedHTML from './DeprecatedHTML';
+import { parseExample } from './DocBuilderUtils';
+
+const useStyles = makeStyles({
+  root: {
+    height: '100%',
+    width: '100%',
+  },
+});
+
+/**
+ * build class output.
+ * https://github.com/esdoc/esdoc-plugins/blob/2de5022baa569785a189056a99acd1d7ca8284b7/esdoc-publish-html-plugin/src/Builder/ClassDocBuilder.js#L30
+ * @param {DocObject} doc - class doc object.
+ * @returns {IceCap} built output.
+ * @private
+ */
+function ClassDoc({ doc }) {
+  const classes = useStyles();
+  if (!doc) {
+    return null;
+  }
+  const { name, access, version, since } = doc;
+
+  return (
+    <div className={classes.root}>
+      <div className="header-notice">
+        {/*
+        doc.export && importPath && importStyle && (
+          <div data-ice="importPath" className="import-path">
+            <SyntaxHighlighter language="js">
+              {`import ${importStyle} from '${importPath}';`}
+            </SyntaxHighlighter>
+          </div>
+        )
+        */}
+        <span>{access}</span>
+        <span>{doc.interface ? ' interface' : ' class'}</span>
+        {/* TODO
+        <span data-ice="variation"> | variation </span> */}
+        {version && <span> | {version}</span>}
+        {since && <span> | {since}</span>}
+        <span>
+          | <FileDocLinkHTML doc={doc} text="source" />
+        </span>
+      </div>
+
+      <div className="self-detail detail">
+        <h1>{name}</h1>
+        {/* TODO 
+        <div data-ice="instanceDocs" className="instance-docs">
+          <span>You can directly use an instance of this class.</span>
+          <span data-ice="instanceDoc" />
+        </div> */}
+        {/* TODO
+        <div className="expression-extends" data-ice="expressionExtends">
+          <h4>Expression Extends:</h4>
+          <pre className="prettyprint">
+            <code data-ice="expressionExtendsCode" />
+          </pre>
+        </div> */}
+        <MixinClassesHTML doc={doc} />
+        <ExtendsChainHTML doc={doc} />
+        <DirectSubclassHTML doc={doc} />
+        <IndirectSubclassHTML doc={doc} />
+        {doc.implements && doc.implements.length && (
+          <div className="flat-list" data-ice="implements">
+            <h4>Implements:</h4>
+            <DocsLinkHTML
+              longnames={doc.implements}
+              text={null}
+              inner={false}
+              separator=", "
+            />
+          </div>
+        )}
+        {doc._custom_indirect_implements &&
+          doc._custom_indirect_implements.length && (
+            <div className="flat-list" data-ice="indirectImplements">
+              <h4>Indirect Implements:</h4>
+              <DocsLinkHTML
+                longnames={doc._custom_indirect_implements}
+                text={null}
+                inner={false}
+                separator=", "
+              />
+            </div>
+          )}
+        {doc._custom_direct_implemented &&
+          doc._custom_direct_implemented.length && (
+            <div className="flat-list" data-ice="directImplemented">
+              <h4>Direct Implemented:</h4>
+              <DocsLinkHTML
+                longnames={doc._custom_direct_implemented}
+                text={null}
+                inner={false}
+                separator=", "
+              />
+            </div>
+          )}
+        {doc._custom_indirect_implemented &&
+          doc._custom_indirect_implemented.length && (
+            <div className="flat-list" data-ice="indirectImplemented">
+              <h4>Indirect Implemented:</h4>
+              <DocsLinkHTML
+                longnames={doc._custom_indirect_implemented}
+                text={null}
+                inner={false}
+                separator=", "
+              />
+            </div>
+          )}
+        <div className="deprecated" data-ice="deprecated">
+          <DeprecatedHTML doc={doc} />
+        </div>
+        <div className="experimental" data-ice="experimental">
+          <ExperimentalHTML doc={doc} />
+        </div>
+        <div className="description">
+          <Markdown>{doc.description}</Markdown>
+        </div>
+        {/* TODO
+        <div className="decorator" data-ice="decorator">
+          <h4>Decorators:</h4>
+        </div> */}
+        {doc.see && doc.see.length && (
+          <div data-ice="see">
+            <h4>See:</h4>
+            <DocsLinkHTML longnames={doc.see} />
+          </div>
+        )}
+        {doc.examples && doc.examples.length && (
+          <div data-ice="exampleDocs">
+            <h4>Example:</h4>
+
+            <div className="example-doc" data-ice="exampleDoc">
+              {doc.examples.map((example) => {
+                const parsed = parseExample(example);
+                return (
+                  <React.Fragment key={example}>
+                    {parsed.caption && (
+                      <div
+                        className="example-caption"
+                        data-ice="exampleCaption"
+                      >
+                        {parsed.caption}
+                      </div>
+                    )}
+                    {/* <pre className="prettyprint source-code"> */}
+                    {parsed.body ? (
+                      <SyntaxHighlighter language="js">
+                        {parsed.body}
+                      </SyntaxHighlighter>
+                    ) : null}
+                    {/* </pre> */}
+                  </React.Fragment>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        {/* TODO
+        <div data-ice="tests">
+          <h4>Test:</h4>
+          <ul>
+            <li data-ice="test" />
+          </ul>
+        </div> */}
+        {doc.todo && doc.todo.length && (
+          <div data-ice="todo">
+            <h4>TODO:</h4>
+            <DocsLinkHTML longnames={doc.todo} />
+          </div>
+        )}
+      </div>
+
+      <div data-ice="staticMemberSummary" className="hide-no-content">
+        <h2>Static Member Summary</h2>
+        <SummaryHTML doc={doc} kind="member" title="Members" isStatic />
+      </div>
+      <div data-ice="staticMethodSummary" className="hide-no-content">
+        <h2>Static Method Summary</h2>
+        <SummaryHTML doc={doc} kind="method" title="Methods" isStatic />
+      </div>
+      <div data-ice="constructorSummary" className="hide-no-content">
+        <h2>Constructor Summary</h2>
+        <SummaryHTML
+          doc={doc}
+          kind="constructor"
+          title="Constructor"
+          isStatic={false}
+        />
+      </div>
+      <div data-ice="memberSummary" className="hide-no-content">
+        <h2>Member Summary</h2>
+        <SummaryHTML
+          doc={doc}
+          kind="member"
+          title="Members"
+          isStatic={false}
+          inherited
+        />
+        {/*
+        <div
+          className="inherited-summary hide-no-content"
+          data-ice="inheritedSummary"
+        >
+          <h2>Inherited Member Summary</h2>
+          <InheritedSummaryHTML doc={doc} kind="member" />
+        </div>
+        */}
+      </div>
+      <div data-ice="methodSummary" className="hide-no-content">
+        <h2>Method Summary</h2>
+        <SummaryHTML
+          doc={doc}
+          kind="method"
+          title="Methods"
+          isStatic={false}
+          inherited
+        />
+        {/*
+        <div
+          className="inherited-summary hide-no-content"
+          data-ice="inheritedSummary"
+        >
+          <h2>Inherited Member Summary</h2>
+          <InheritedSummaryHTML doc={doc} kind="method" />
+        </div>
+        */}
+      </div>
+
+      <div data-ice="staticMemberDetails">
+        <DetailHTML doc={doc} kind="member" title="Members" isStatic />
+      </div>
+      <div data-ice="staticMethodDetails">
+        <DetailHTML doc={doc} kind="method" title="Methods" isStatic />
+      </div>
+      <div data-ice="constructorDetails">
+        <DetailHTML
+          doc={doc}
+          kind="constructor"
+          title="Constructors"
+          isStatic={false}
+        />
+      </div>
+      <div data-ice="memberDetails">
+        <DetailHTML doc={doc} kind="member" title="Members" isStatic={false} />
+      </div>
+      <div data-ice="methodDetails">
+        <DetailHTML doc={doc} kind="method" title="Methods" isStatic={false} />
+      </div>
+    </div>
+  );
+}
+
+export default React.memo(ClassDoc);

package/src/doc/components/Esdoc/DeprecatedHTML.js

@@ -0,0 +1,16 @@
+/**
+ * build deprecated html.
+ * https://github.com/esdoc/esdoc-plugins/blob/2de5022baa569785a189056a99acd1d7ca8284b7/esdoc-publish-html-plugin/src/Builder/DocBuilder.js#L920
+ * @param {DocObject} doc - target doc object.
+ * @returns {string} if doc is not deprecated, returns empty.
+ * @private
+ */
+const DeprecatedHTML = (doc) => {
+  if (doc.deprecated) {
+    const deprecated = [`this ${doc.kind} was deprecated.`];
+    if (typeof doc.deprecated === 'string') deprecated.push(doc.deprecated);
+    return deprecated.join(' ');
+  }
+  return '';
+};
+export default DeprecatedHTML;