feat: Create useApiDoc hook. Update ApiDocTemplate to use api-specifi…

…c language

src/hooks/useApiDoc.js

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+
+const IGNORED_METHODS = [
+  'prototype',
+  'length',
+  'name',
+  'propTypes',
+  'getDerivedStateFromProps',
+  'defaultProps',
+];
+
+const useApiDoc = (name) => {
+  if (typeof window === 'undefined') global.window = {};
+
+  return useMemo(() => {
+    const sdk = window.__NR1_SDK__?.default ?? {};
+    const api = sdk[name];
+
+    if (!api) {
+      return null;
+    }
+
+    const apiDocs = api?.__docs__;
+
+    return {
+      description: apiDocs?.text,
+      usage: `import { ${name} } from 'nr1'`,
+      methods: Object.getOwnPropertyNames(api)
+        .filter(
+          (member) =>
+            !IGNORED_METHODS.includes(member) &&
+            typeof api[member] === 'function'
+        )
+        .map((member) => {
+          const methodDocs = api[member].__docs__;
+
+          return {
+            name: `${name}.${member}`,
+            description: methodDocs?.text,
+            returnValue: methodDocs?.tags.return?.[0] ?? { type: 'undefined' },
+            params: methodDocs?.tags.param ?? [],
+            examples: methodDocs?.tags.examples ?? [],
+          };
+        }),
+    };
+  }, [name, window?.__NR1_SDK__]);
+};
+
+export default useApiDoc;

src/markdown-pages/apis/logger.mdx

@@ -2,6 +2,6 @@
 path: '/apis/logger'
 title: 'PlatformStateContext'
 description: 'A logger component!'
-component: 'logger'
+api: 'logger'
 template: 'ApiDocTemplate'
 ---

src/markdown-pages/apis/nerdlet.mdx

@@ -2,6 +2,6 @@
 path: '/apis/nerdlet'
 title: 'Nerdlet'
 description: 'The nerdlet API'
-component: 'nerdlet'
+api: 'nerdlet'
 template: 'ApiDocTemplate'
 ---

src/templates/ApiDocTemplate.js

@@ -10,26 +10,17 @@ import FunctionDefinition from '../components/FunctionDefinition';
 import Layout from '../components/Layout';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
-import PropList from '../components/PropList';
 import pages from '../data/sidenav.json';
 import styles from './ApiDocTemplate.module.scss';
-import useComponentDoc from '../hooks/useComponentDoc';
-
-const previewStyles = {
-  Spinner: {
-    height: '16px',
-  },
-};
+import useApiDoc from '../hooks/useApiDoc';
 
 const ApiDocTemplate = ({ data }) => {
   const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
-  const { title, description, component } = frontmatter;
-  const componentDoc = useComponentDoc(component);
-
-  const { description: componentDescription, methods = [], usage = '' } =
-    componentDoc ?? {};
+  const { title, description, api } = frontmatter;
+  const { description: apiDescription, methods = [], usage = '' } =
+    useApiDoc(api) ?? {};
 
   return (
     <Layout>
@@ -42,10 +33,10 @@ const ApiDocTemplate = ({ data }) => {
           toggle={() => setIsOpen(!isOpen)}
         />
         <main className={styles.content}>
-          <h1>{component}</h1>
+          <h1>{api}</h1>
 
           <section className={cx(styles.section, styles.description)}>
-            <ReactMarkdown source={componentDescription} />
+            <ReactMarkdown source={apiDescription} />
           </section>
 
           <section className={styles.section}>
@@ -96,7 +87,7 @@ export const pageQuery = graphql`
         path
         title
         description
-        component
+        api
       }
     }
   }