feat(root): add Stackblitz functionality to component code examples

update code examples to work with the new Stackblitz functionality, add toggle button to switch between TypeScript and JavaScript, add show more/less button to component code examples . #773 #774 #751
mi6 · May 31, 2024 · 8f2cc27 · 8f2cc27
1 parent 9a03e2a
commit 8f2cc27
Show file tree

Hide file tree

Showing 41 changed files with 697 additions and 1,459 deletions.
diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
@@ -245,47 +245,31 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
 
   // need to account for if the code starts with styling as opposed to a tag
 
-  const addNewLines = (
-    lineSeparatedCode: string[] | undefined,
-    reactWhitespace: string | undefined = "",
-    longCode: boolean = false
+  const formatLines = (
+    lines: string[] | undefined,
+    snippet: Snippet,
+    longCodeIndex: number
   ) => {
-    const newLines = lineSeparatedCode ? [...lineSeparatedCode] : [];
-    const findScriptIndex = (lines: string[]) =>
-      lines.findIndex((line) => line.trim().startsWith("<script>"));
-    const findBodyIndex = (lines: string[]) =>
-      lines.findIndex((line) => line.trim().startsWith("<body>")) + 3;
-    // const findStyleIndex = (lines: string[]) =>
-    //   lines.findIndex((line) => line.trim().startsWith("</style>"));
-    const scriptIndex = findScriptIndex(newLines);
-    const bodyIndex = findBodyIndex(newLines);
-    // const styleIndex = findStyleIndex(newLines);
-    const extraWhitespace = scriptIndex === -1 && bodyIndex === -1 ? "  " : "";
+    const formatWhiteSpace = (codeSnippet: Snippet, index: number) => {
+      if (
+        selectedTab === "React" &&
+        Array.isArray(codeSnippet.snippets.long) &&
+        codeSnippet.snippets.long[index].snippet === "{shortCode}"
+      ) {
+        return `\t`;
+      }
+      return ``;
+    };
 
-    let webComponentsWhitespace: string;
-    if (lineSeparatedCode?.includes("</style>")) {
-      webComponentsWhitespace = "";
-    } else {
-      webComponentsWhitespace = "  ";
-    }
-    const index = longCode ? 0 : 1;
+    const newLines = lines ? [...lines] : [];
     if (newLines.length > 0) {
-      for (let i = index; i < newLines.length; i += 1) {
-        newLines[i] = `${
-          selectedTab === "Web component"
-            ? `${webComponentsWhitespace}${extraWhitespace}`
-            : reactWhitespace
+      for (let i = 1; i < newLines.length; i += 1) {
+        const whiteSpace = formatWhiteSpace(snippet, longCodeIndex);
+        newLines[i] = `  ${
+          selectedTab === "Web component" ? `  ` : whiteSpace
         }${newLines[i]}`;
       }
     }
-    // Add extra whitespace for web components
-    if (scriptIndex !== -1) {
-      for (let i = bodyIndex; i < scriptIndex - 1; i += 1) {
-        newLines[i] = `   ${newLines[i]}`;
-      }
-    }
-    // else if (scriptIndex === -1 && bodyIndex === -1) {
-    // }
     return newLines.join("\n");
   };
 
@@ -298,19 +282,18 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
       !Array.isArray(snippet.snippets.long) &&
       typeof snippet.snippets.long === "string"
     ) {
-      const code = snippet.snippets.long.replace(
+      longCode = snippet.snippets.long.replace(
         "{shortCode}",
         `${shortCodeSnippet}`
       );
-      longCode = addNewLines(code.split("\n"));
     }
 
     let codeSnippet;
     if (showMore) {
       codeSnippet = createWebComponentsIndexHTML(longCode);
     } else if (type === "pattern") {
       if (typeof snippet.snippets.long === "string")
-        codeSnippet = createWebComponentsIndexHTML(snippet.snippets.long, true);
+        codeSnippet = createWebComponentsIndexHTML(snippet.snippets.long);
     } else {
       codeSnippet = snippet.snippets.short;
     }
@@ -327,11 +310,13 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
     let shortCodeSnippet: string | undefined = "";
     if (type !== "pattern") shortCodeSnippet = snippet.snippets.short;
 
-    if (
-      selectedTab === "Web component" &&
-      snippet.technology !== "React" &&
-      !!shortCodeSnippet
-    ) {
+    shortCodeSnippet = formatLines(
+      shortCodeSnippet?.split("\n"),
+      snippet,
+      longCodeIndex
+    );
+
+    if (selectedTab === "Web component" && snippet.technology !== "React") {
       return getCodeSnippetForWebComponent(snippet, shortCodeSnippet);
     }
 
@@ -341,23 +326,11 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
         !Array.isArray(snippet.snippets.long[longCodeIndex].snippet) &&
         typeof snippet.snippets.long[longCodeIndex].snippet === "string"
       ) {
-        longCode = snippet.snippets.long[longCodeIndex].snippet;
-        if (longCode !== "{shortCode}" && !!shortCodeSnippet) {
-          const reactShortCodeWhitespace = longCode.includes("return")
-            ? "    "
-            : "  ";
-          shortCodeSnippet = addNewLines(
-            shortCodeSnippet.split("\n"),
-            reactShortCodeWhitespace
-          );
-        }
-        // Replace {shortCode} variable with the short code snippet
-        longCode = longCode.replace("{shortCode}", `${shortCodeSnippet}`);
-        if (longCode.includes("return")) {
-          longCode = addNewLines(longCode.split("\n"), "  ", true);
-        }
         longCode = createReactAppTsx(
-          longCode,
+          snippet.snippets.long[longCodeIndex].snippet.replace(
+            "{shortCode}",
+            `${shortCodeSnippet}`
+          ),
           pageMetadata.pageTitle,
           longCodeIndex === 0 ? "tsx" : "jsx"
         );
@@ -422,7 +395,7 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
             </IcTabGroup>
             <div className="toggle-button-container">
               {(selectedTab === "React" || tabCount === 1) && (
-                <IcToggleButtonGroup size="small" selectMethod="auto">
+                <IcToggleButtonGroup size="small">
                   <IcToggleButton
                     label="TypeScript"
                     accessibleLabel={isLargeViewport ? "" : "TypeScript"}

diff --git a/src/content/structured/components/accordion/code.mdx b/src/content/structured/components/accordion/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/accordion/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Accordion"
 

diff --git a/src/content/structured/components/alerts/code.mdx b/src/content/structured/components/alerts/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/alert/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Alert"
 

diff --git a/src/content/structured/components/back-to-top/code.mdx b/src/content/structured/components/back-to-top/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/back-to-top/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Back to top"
 

diff --git a/src/content/structured/components/badge/code.mdx b/src/content/structured/components/badge/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/badge/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Badge"
 

diff --git a/src/content/structured/components/breadcrumbs/code.mdx b/src/content/structured/components/breadcrumbs/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/breadcrumb/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Breadcrumb"
 

diff --git a/src/content/structured/components/buttons/code.mdx b/src/content/structured/components/buttons/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/button/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Button"
 

diff --git a/src/content/structured/components/cards/code.mdx b/src/content/structured/components/cards/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/card/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Card"
 

diff --git a/src/content/structured/components/checkboxes/code.mdx b/src/content/structured/components/checkboxes/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/checkbox/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Checkbox"
 

diff --git a/src/content/structured/components/chips/code.mdx b/src/content/structured/components/chips/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/chip/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Chip"
 

diff --git a/src/content/structured/components/classification-banner/code.mdx b/src/content/structured/components/classification-banner/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/classification-banner/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Classification banner"
 

diff --git a/src/content/structured/components/data-entity/code.mdx b/src/content/structured/components/data-entity/code.mdx
@@ -1,7 +1,7 @@
 ---
 path: "/components/data-entity/code"
 
-date: "2024-05-31"
+date: "2024-05-02"
 
 title: "Data entity"