Component doc template (#162)

* Component doc template

* Fix build

@stellar/design-system-website/docs/components/buttons/buttons.mdx → @stellar/design-system-website/docs/components/buttons/button.mdx

@@ -1,8 +1,8 @@
 ---
-slug: /buttons
+slug: /button
 ---
 
-# Buttons
+# Button
 
 <ComponentDescription componentName="Button" />
 

@stellar/design-system-website/docs/components/buttons/links.mdx → @stellar/design-system-website/docs/components/buttons/link.mdx

@@ -1,8 +1,8 @@
 ---
-slug: /links
+slug: /link
 ---
 
-# Links
+# Link
 
 <ComponentDescription componentName="Link" />
 

@stellar/design-system-website/package.json

@@ -14,7 +14,7 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "lint-tsc": "tsc --noEmit",
+    "lint-tsc": "tsc --noEmit --moduleResolution node",
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
@@ -26,7 +26,11 @@
     "clsx": "^1.2.1",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "rehype-parse": "^8.0.4",
+    "rehype-react": "^7.2.0",
+    "rehype-sanitize": "^5.0.1",
+    "unified": "^10.1.2"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.4.1",

@stellar/design-system-website/src/components/ComponentDescription/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import SdsDocs from "@stellar/design-system/docs/components.json";
-import { Element } from "@site/src/components/Element";
+import { ParseSummary } from "@site/src/components/ParseSummary";
 
 export const ComponentDescription = ({
   componentName,
@@ -15,10 +15,9 @@ export const ComponentDescription = ({
     throw Error(`Component "${componentName}" description not found.`);
   }
 
-  // TODO: split paragraphs /n/n
-  const description = component.comment.summary.map((s) => (
-    <Element text={s.text} kind={s.kind} />
-  ));
-
-  return <p>{description}</p>;
+  return (
+    <p>
+      <ParseSummary summary={component.comment?.summary} />
+    </p>
+  );
 };

@stellar/design-system-website/src/components/ComponentProps/index.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import SdsDocs from "@stellar/design-system/docs/components.json";
 import { Element } from "@site/src/components/Element";
+import { ParseSummary } from "@site/src/components/ParseSummary";
+import { ElementPropType } from "@site/src/components/ElementPropType";
 
 export const ComponentProps = ({
   componentName,
@@ -15,14 +17,7 @@ export const ComponentProps = ({
     throw Error(`Component "${componentName}" props not found.`);
   }
 
-  // TODO: reusable component
-  // TODO: split paragraphs /n/n
-  const description = component.comment.summary.map((s) => (
-    <Element text={s.text} kind={s.kind} key={s.id} />
-  ));
-
   const props = component.children.map((p) => {
-    // TODO: handle this properly
     const defaultVal = p.comment?.blockTags?.[0]?.content?.[0];
 
     return (
@@ -31,16 +26,17 @@ export const ComponentProps = ({
           <code>{p.name}</code>
         </td>
         <td>
-          <PropType type={p.type} />
+          <ElementPropType type={p.type} />
         </td>
         <td>
           {defaultVal ? (
             <Element text={defaultVal.text} kind={defaultVal.kind} />
           ) : null}
         </td>
         <td>{p?.flags?.isOptional ? "Yes" : ""}</td>
-        {/* TODO: render summary properly */}
-        <td>{p.comment.summary[0].text}</td>
+        <td>
+          <ParseSummary summary={p.comment?.summary} />
+        </td>
       </tr>
     );
   });
@@ -59,24 +55,9 @@ export const ComponentProps = ({
         </thead>
         <tbody>{props}</tbody>
       </table>
-      <p>{description}</p>
+      <p>
+        <ParseSummary summary={component.comment?.summary} />
+      </p>
     </div>
   );
 };
-
-// TODO: move to its own file
-// TODO: might be combined with Element?
-const PropType = ({ type }: { type: any }) => {
-  // TODO: handle all types
-  switch (type.type) {
-    case "union":
-      return type.types.map((t) => (
-        <>
-          <code>{t.value}</code>{" "}
-        </>
-      ));
-    default:
-      // reference
-      return <code>{type.name || ""}</code>;
-  }
-};

@stellar/design-system-website/src/components/Element.tsx

@@ -1,24 +1,66 @@
-import React from "react";
+import React, { Fragment, createElement } from "react";
+import Link from "@docusaurus/Link";
+import rehypeParse from "rehype-parse";
+import rehypeReact from "rehype-react";
+import rehypeSanitize from "rehype-sanitize";
+import { unified } from "unified";
 
 export type ElementKind = "text" | "code" | "inline-tag";
 
-export const Element = ({
-  text,
-  kind,
-}: {
+export interface ElementProps {
   text: string;
-  kind: ElementKind;
-}) => {
+  kind: ElementKind | string;
+  tag?: string;
+}
+
+export const Element = ({ text, kind, tag }: ElementProps) => {
   switch (kind) {
     case "code":
       // Remove ``
       return <code>{text.slice(1, -1)}</code>;
     case "inline-tag":
-      // TODO: link to inner component
-      return <a href="#">{text}</a>;
+      // Remove @ from tag to use as a slug for relative link
+      return <Link to={`/${tag?.replace("@", "")}`}>{text}</Link>;
     // text is default
     default:
-      // TODO: how to handle md links
-      return <>{text}</>;
+      return parseMarkdownString(text);
+  }
+};
+
+const parseMarkdownString = (text: string): React.ReactElement => {
+  const matches = text.match(/\[.*?\)/g);
+
+  if (matches) {
+    for (const m of matches) {
+      const linkText = m.match(/\[(.*?)\]/)[1];
+      const linkUrl = m.match(/\((.*?)\)/)[1];
+
+      // TODO: can check if it's relative link
+      text = text.replace(
+        m,
+        `<a href="${linkUrl}" target="_blank" rel="noreferrer noopener">${linkText}</a>`,
+      );
+    }
+  }
+
+  text = parseLineBreak(text);
+
+  const file = unified()
+    .use(rehypeSanitize)
+    .use(rehypeParse, { fragment: true })
+    .use(rehypeReact, { createElement, Fragment })
+    .processSync(text);
+
+  return file.result;
+};
+
+const parseLineBreak = (text: string) => {
+  const lineBreakPattern = /\n\n$/i;
+  const matches = text.match(lineBreakPattern);
+
+  if (matches) {
+    return `${text.replace(lineBreakPattern, "")}<br><br>`;
   }
+
+  return text;
 };

@stellar/design-system-website/src/components/ElementPropType.tsx

@@ -0,0 +1,17 @@
+import React, { Fragment } from "react";
+
+export const ElementPropType = ({ type }: { type: any }) => {
+  switch (type.type) {
+    case "union":
+      return type.types.map((t, i) => (
+        <Fragment key={i}>
+          <code>{t.value}</code>{" "}
+        </Fragment>
+      ));
+    case "intrinsic":
+    case "reference":
+      return <code>{type.name}</code>;
+    default:
+      return "";
+  }
+};

@stellar/design-system-website/src/components/ParseSummary.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Element } from "@site/src/components/Element";
+
+export const ParseSummary = ({ summary }: { summary: any }) => {
+  return (
+    <>
+      {summary.map((s, i) => (
+        <Element text={s.text} kind={s.kind} key={i} tag={s.tag} />
+      ))}
+    </>
+  );
+};