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

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;

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

@@ -0,0 +1,281 @@
+/* eslint-disable react/no-unescaped-entities */
+/* eslint-disable react/prop-types */
+/* eslint-disable no-continue */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import Markdown from 'react-markdown';
+import { parseExample } from './DocBuilderUtils';
+import SignatureHTML from './SignatureHTML';
+import OverrideMethodDescription from './OverrideMethodDescription';
+import FileDocLinkHTML from './FileDocLinkHTML';
+import OverrideMethod from './OverrideMethod';
+import Properties from './Properties';
+import TypeDocLinkHTML from './TypeDocLinkHTML';
+import DocLinkHTML from './DocLinkHTML';
+import DocsLinkHTML from './DocsLinkHTML';
+import ExperimentalHTML from './ExperimentalHTML';
+import DeprecatedHTML from './DeprecatedHTML';
+
+/**
+ * build detail output html by docs.
+ * https://github.com/esdoc/esdoc-plugins/blob/2de5022baa569785a189056a99acd1d7ca8284b7/esdoc-publish-html-plugin/src/Builder/DocBuilder.js#L373
+ * @param {DocObject[]} docs - target docs.
+ * @param {string} title - detail title.
+ * @return {IceCap} detail output.
+ * @private
+ */
+function DetailDocs({ docs, title }) {
+  return (
+    <>
+      <h2 data-ice="title">{title}</h2>
+      {docs.map((doc) => {
+        const scope = doc.static ? 'static' : 'instance';
+        let isFunction = false;
+        if (['method', 'constructor', 'function'].indexOf(doc.kind) !== -1)
+          isFunction = true;
+        if (
+          doc.kind === 'typedef' &&
+          doc.params &&
+          doc.type.types[0] === 'function'
+        )
+          isFunction = true;
+
+        return (
+          <div
+            className="detail"
+            data-ice="detail"
+            key={`${scope}-${doc.kind}-${doc.name}`}
+            id={`${scope}-${doc.kind}-${doc.name}`}
+          >
+            <span
+              className="anchor-offset"
+              id={`${scope}-${doc.kind}-${doc.name}-offset-anchor`}
+            />
+            <h3 data-ice="anchor">
+              {doc.access !== 'public' && (
+                <span className="access" data-ice="access">
+                  {doc.access}{' '}
+                </span>
+              )}
+              {['member', 'method', 'get', 'set'].includes(doc.kind) && (
+                <span data-ice="static">{doc.static ? 'static ' : ''}</span>
+              )}
+              {['get', 'set'].includes(doc.kind) && (
+                <span className="kind" data-ice="kind">
+                  {doc.kind}
+                </span>
+              )}
+              <span className="abstract" data-ice="abstract">
+                {doc.abstract ? 'abstract ' : ''}
+              </span>
+              <span data-ice="async">{doc.async ? 'async ' : ''}</span>
+              <span data-ice="generator">{doc.generator ? '* ' : ''}</span>
+              <span className="code" data-ice="name">
+                {doc.kind === 'constructor'
+                  ? `new ${doc.longname.match(/~([^)]+)#constructor/)[1]}`
+                  : doc.name}
+              </span>
+              <span className="code" data-ice="signature">
+                <SignatureHTML doc={doc} />
+              </span>
+              <span className="right-info">
+                {doc.version && (
+                  <span className="version" data-ice="version">
+                    version {doc.version}
+                  </span>
+                )}
+                {doc.since && (
+                  <span className="since" data-ice="since">
+                    since {doc.since}
+                  </span>
+                )}
+                <span data-ice="source">
+                  <FileDocLinkHTML doc={doc} text="source" />
+                </span>
+              </span>
+            </h3>
+            {doc.export && doc.importPath && doc.importStyle && (
+              <div data-ice="importPath" className="import-path">
+                <SyntaxHighlighter language="js">
+                  {`import ${doc.importStyle} from '${doc.importPath}';`}
+                </SyntaxHighlighter>
+              </div>
+            )}
+            <div className="deprecated" data-ice="deprecated">
+              <DeprecatedHTML doc={doc} />
+            </div>
+            <div className="experimental" data-ice="experimental">
+              <ExperimentalHTML doc={doc} />
+            </div>
+            <div data-ice="description">
+              {doc.description || <OverrideMethodDescription doc={doc} />}
+            </div>
+            <div data-ice="override" className="hide-no-content">
+              <h4>Override:</h4>
+              <OverrideMethod doc={doc} />
+            </div>
+            <div data-ice="properties">
+              {isFunction && doc.params && !!doc.params.length && (
+                <Properties properties={doc.params} title="Params:" />
+              )}
+              {!isFunction && doc.properties && !!doc.properties.length && (
+                <Properties properties={doc.properties} title="Properties:" />
+              )}
+            </div>
+            {doc.return && (
+              <div className="return-params" data-ice="returnParams">
+                <h4>Return:</h4>
+                <table>
+                  <tbody>
+                    <tr>
+                      <td className="return-type code" data-ice="returnType">
+                        {doc.return.types.map((typeName, idx) => {
+                          return (
+                            <React.Fragment key={idx}>
+                              <TypeDocLinkHTML typeName={typeName} />
+                              {idx !== doc.return.types.length - 1 ? ' | ' : ''}
+                            </React.Fragment>
+                          );
+                        })}
+                        {typeof doc.return.nullable === 'boolean' &&
+                          `(nullable: ${doc.return.nullable})`}
+                      </td>
+                      <td className="return-desc" data-ice="returnDescription">
+                        <Markdown>{doc.return.description}</Markdown>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+                {doc.properties && (
+                  <div data-ice="returnProperties">
+                    <Properties
+                      properties={doc.properties}
+                      title="Return Properties:"
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+            {doc.emits && (
+              <div data-ice="emitWrap">
+                <h4>Emit:</h4>
+                <table>
+                  <tbody>
+                    {doc.emits.map((emitDoc, idx) => {
+                      return (
+                        <tr key={idx} className="emit" data-ice="emit">
+                          <td>
+                            <p data-ice="emitName">
+                              <DocLinkHTML longname={emitDoc.types[0]} />
+                            </p>
+                          </td>
+                          <td data-ice="emitDesc">
+                            <Markdown>{emitDoc.description}</Markdown>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+            {doc.listens && (
+              <div data-ice="listenWrap">
+                <h4>Listen:</h4>
+                <table>
+                  <tbody>
+                    {doc.listens.map((listenDoc, idx) => {
+                      return (
+                        <tr key={idx} className="listen" data-ice="listen">
+                          <td>
+                            <p data-ice="listenName">
+                              <DocLinkHTML longname={listenDoc.types[0]} />
+                            </p>
+                          </td>
+                          <td data-ice="listenDesc">
+                            <Markdown>{listenDoc.description}</Markdown>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+            {doc.throws && (
+              <div data-ice="throwWrap">
+                <h4>Throw:</h4>
+                <table>
+                  <tbody>
+                    {doc.throws.map((exceptionDoc, idx) => {
+                      return (
+                        <tr key={idx} className="throw" data-ice="throw">
+                          <td>
+                            <p data-ice="throwName">
+                              <DocLinkHTML longname={exceptionDoc.types[0]} />
+                            </p>
+                          </td>
+                          <td data-ice="throwDesc">
+                            <Markdown>{exceptionDoc.description}</Markdown>
+                          </td>
+                        </tr>
+                      );
+                    })}
+                  </tbody>
+                </table>
+              </div>
+            )}
+            {/* TODO
+        <div data-ice="decorator">
+          <h4>Decorators:</h4>
+        </div> */}
+            {doc.examples && doc.examples.length && (
+              <div data-ice="example">
+                <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>
+                        )}
+                        <SyntaxHighlighter language="js">
+                          {parsed.body}
+                        </SyntaxHighlighter>
+                      </React.Fragment>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+            {/* TODO
+        <div data-ice="tests">
+          <h4>Test:</h4>
+          <ul>
+            <li data-ice="test" />
+          </ul>
+        </div> */}
+            <div data-ice="see" className="hide-no-content">
+              <h4>See:</h4>
+              <DocsLinkHTML longnames={doc.see} />
+            </div>
+            {/* TODO
+        <div data-ice="todo">
+          <h4>TODO:</h4>
+        </div> */}
+          </div>
+        );
+      })}
+    </>
+  );
+}
+export default React.memo(DetailDocs);

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

@@ -0,0 +1,33 @@
+/* eslint-disable no-continue */
+/* eslint-disable no-restricted-syntax */
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import { _findAccessDocs } from './DocBuilderUtils';
+import DetailDocs from './DetailDocs';
+
+/**
+ * build detail output html by parent doc.
+ * https://github.com/esdoc/esdoc-plugins/blob/2de5022baa569785a189056a99acd1d7ca8284b7/esdoc-publish-html-plugin/src/Builder/DocBuilder.js#L345
+ * @param {DocObject} doc - parent doc object.
+ * @param {string} kind - target kind property.
+ * @param {string} title - detail title.
+ * @param {boolean} [isStatic=true] - target static property.
+ * @returns {string} html of detail.
+ * @private
+ */
+const DetailHTML = ({ doc, kind, title, isStatic = true }) => {
+  const accessDocs = _findAccessDocs(doc, kind, isStatic);
+  return accessDocs.map((accessDoc, idx) => {
+    const docs = accessDoc[1];
+    if (!docs.length) return null;
+
+    let prefix = '';
+    if (docs[0].static) prefix = 'Static ';
+    const _title = `${prefix}${
+      accessDoc[0] === 'Public' ? '' : `${accessDoc[0]} `
+    }${title}`;
+    return <DetailDocs key={idx} docs={docs} title={_title} />;
+  });
+};
+export default React.memo(DetailHTML);

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

@@ -0,0 +1,30 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import DocLinkHTML from './DocLinkHTML';
+
+/**
+ * build direct subclass list.
+ * https://github.com/esdoc/esdoc-plugins/blob/2de5022baa569785a189056a99acd1d7ca8284b7/esdoc-publish-html-plugin/src/Builder/ClassDocBuilder.js#L203
+ * @param {DocObject} doc - target class doc.
+ * @returns {string} html of direct subclass links.
+ * @private
+ */
+function DirectSubclassHTML({ doc }) {
+  if (!doc._custom_direct_subclasses) return '';
+
+  return (
+    <div className="flat-list" data-ice="directSubclass">
+      <h4>Direct Subclass:</h4>
+      <div>
+        {doc._custom_direct_subclasses.map((extend, idx) => (
+          <React.Fragment key={extend}>
+            <DocLinkHTML longname={extend} />
+            {idx !== doc._custom_direct_subclasses.length - 1 ? ', ' : ''}
+          </React.Fragment>
+        ))}
+      </div>
+    </div>
+  );
+}
+export default React.memo(DirectSubclassHTML);