Make progress on rendering custom samples over predefined samples

Author: uppal101

packages/api-explorer/lib/create-docs.js

@@ -50,7 +50,21 @@ module.exports = (oas, apiSetting) => {
           slug: tag,
           type: 'endpoint',
           category: { apiSetting },
-          api: { method },
+          api: {
+            method,
+            examples: {
+              codes: [
+                {
+                  language: 'javascript',
+                  code: 'console.log(1);',
+                },
+                {
+                  language: 'curl',
+                  code: 'curl http://example.com',
+                },
+              ],
+            },
+          },
           swagger: { path },
           // Uncomment this if you want some body content blocks
           // body,

packages/api-explorer/src/CodeSample.jsx

@@ -5,61 +5,122 @@ const Oas = require('./lib/Oas');
 
 const { Operation } = Oas;
 
+const syntaxHighlighter = require('@readme/syntax-highlighter');
+
 const generateCodeSnippet = require('./lib/generate-code-snippet');
 
-function CodeSample({ oas, setLanguage, operation, formData, language }) {
-  return (
-    <div className="code-sample tabber-parent">
-      {(() => {
-        if (!oas[extensions.SAMPLES_ENABLED]) {
-          return <div className="hub-no-code">No code samples available</div>;
-        }
+class CodeSample extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      customCodeSampleTab: 0,
+    };
+    this.setCustomCodeSampleTab = this.setCustomCodeSampleTab.bind(this);
+  }
+  setCustomCodeSampleTab(index) {
+    this.setState({ customCodeSampleTab: index });
+  }
+
+  render() {
+    const { oas, setLanguage, operation, formData, language, customCodeSamples } = this.props;
 
-        const snippet = generateCodeSnippet(oas, operation, formData, language);
+    return (
+      <div className="code-sample tabber-parent">
+        {(() => {
+          if (!oas[extensions.SAMPLES_ENABLED]) {
+            return <div className="hub-no-code">No code samples available</div>;
+          }
 
-        return (
-          <div>
-            <ul className="code-sample-tabs">
-              {// TODO add `is-lang-${lang}` class, to body?
-              oas[extensions.SAMPLES_LANGUAGES].map(lang => (
-                <li key={lang}>
-                  {
-                    // eslint-disable-next-line jsx-a11y/href-no-hash
-                    <a
-                      href="#"
-                      className={`hub-lang-switch-${lang}`}
-                      onClick={e => {
-                        e.preventDefault();
-                        setLanguage(lang);
-                      }}
-                    >
-                      {generateCodeSnippet.getLangName(lang)}
-                    </a>
-                  }
-                </li>
-              ))}
-            </ul>
+          const snippet = generateCodeSnippet(oas, operation, formData, language);
 
-            <div className="hub-code-auto">
-              <pre
-                className={`tomorrow-night hub-lang hub-lang-${language}`}
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: snippet }}
-              />
+          if (customCodeSamples.length) {
+            return (
+              <div>
+                <ul className="code-sample-tabs">
+                  {customCodeSamples.map(example => (
+                    <li key={example.language}>
+                      {
+                        // eslint-disable-next-line jsx-a11y/href-no-hash
+                        <a
+                          href="#"
+                          className={`hub-lang-switch-${example.language}`}
+                          onClick={e => {
+                            e.preventDefault();
+                            setLanguage(example.language);
+                          }}
+                        >
+                          {generateCodeSnippet.getLangName(example.language)}
+                        </a>
+                      }
+                    </li>
+                  ))}
+                </ul>
+                <div className="code-sample-body">
+                  {customCodeSamples.map((example, index) => {
+                    return (
+                      <pre
+                        className="tomorrow-night tabber-body"
+                        style={{ display: index === this.state.customCodeSampleTab ? 'block' : '' }}
+                        key={index} // eslint-disable-line react/no-array-index-key
+                        // eslint-disable-next-line react/no-danger
+                        dangerouslySetInnerHTML={{
+                          __html: syntaxHighlighter(example.code, example.language, true),
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return (
+            <div>
+              <ul className="code-sample-tabs">
+                {// TODO add `is-lang-${lang}` class, to body?
+                oas[extensions.SAMPLES_LANGUAGES].map(lang => (
+                  <li key={lang}>
+                    {
+                      // eslint-disable-next-line jsx-a11y/href-no-hash
+                      <a
+                        href="#"
+                        className={`hub-lang-switch-${lang}`}
+                        onClick={e => {
+                          e.preventDefault();
+                          setLanguage(lang);
+                        }}
+                      >
+                        {generateCodeSnippet.getLangName(lang)}
+                      </a>
+                    }
+                  </li>
+                ))}
+              </ul>
+
+              <div className="hub-code-auto">
+                <pre
+                  className={`tomorrow-night hub-lang hub-lang-${language}`}
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: snippet }}
+                />
+              </div>
             </div>
-          </div>
-        );
-      })()}
-    </div>
-  );
+          );
+        })()}
+      </div>
+    );
+  }
 }
 
 CodeSample.propTypes = {
   oas: PropTypes.instanceOf(Oas).isRequired,
   setLanguage: PropTypes.func.isRequired,
   operation: PropTypes.instanceOf(Operation).isRequired,
   formData: PropTypes.shape({}).isRequired,
+  customCodeSamples: PropTypes.shape([]),
   language: PropTypes.string.isRequired,
 };
 
+CodeSample.defaultProps = {
+  customCodeSamples: [],
+};
 module.exports = CodeSample;

packages/api-explorer/src/Doc.jsx

@@ -180,6 +180,7 @@ class Doc extends React.Component {
         operation={this.getOperation()}
         formData={this.state.formData}
         language={this.props.language}
+        customCodeSamples={this.props.doc.api.examples.codes}
       />
     );
   }
@@ -306,6 +307,9 @@ Doc.propTypes = {
     type: PropTypes.string.isRequired,
     api: PropTypes.shape({
       method: PropTypes.string.isRequired,
+      examples: PropTypes.shape({
+        codes: PropTypes.arrayOf(PropTypes.shape({})),
+      }),
     }),
     swagger: PropTypes.shape({
       path: PropTypes.string.isRequired,