feat(root): add stackblitz button and add new variant of "copy code" …

…button for small screen sizes Add new optional Stackblitz button to ComponentPreview & CodePreview components, connect Stackblitz SDK to onClick of StackblitzButton component, add cleanup function to useEffect in CookieData component . #751
mi6 · Jan 30, 2024 · e0e6973 · e0e6973
1 parent dbbec9d
commit e0e6973
Show file tree

Hide file tree

Showing 8 changed files with 286 additions and 44 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -236,6 +236,11 @@ exports.createResolvers = ({ createResolvers }) => {
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
+    resolve: {
+      fallback: {
+        fs: false,
+      },
+    },
     plugins: [
       /**
        * See line 203 of:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "@mdi/react": "^1.5.0",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
+    "@stackblitz/sdk": "^1.9.0",
     "@ukic/docs": "^2.9.1",
     "@ukic/fonts": "^2.6.0",
     "@ukic/react": "^2.10.0",
@@ -42,6 +43,7 @@
     "gatsby-transformer-remark": "^6.12.0",
     "gatsby-transformer-sharp": "^4.2.0",
     "github-slugger": "^1.4.0",
+    "lodash.kebabcase": "^4.1.1",
     "performant-array-to-tree": "^1.9.1",
     "prism-react-renderer": "^1.3.1",
     "prismjs": "^1.25.0",

diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts
@@ -3,3 +3,4 @@ export { default as GCHQLogo } from "./gchq-logo.svg";
 export { default as MI5Logo } from "./mi5-logo.svg";
 export { default as SISLogo } from "./sis-logo.svg";
 export { default as ICDSLogo } from "./icds-logo.svg";
+export { default as StackblitzLogo } from "./stackblitz-logo.svg";
diff --git a/src/assets/svg/stackblitz-logo.svg b/src/assets/svg/stackblitz-logo.svg
diff --git a/src/components/CodePreview/index.tsx b/src/components/CodePreview/index.tsx
@@ -1,5 +1,5 @@
 import Highlight, { defaultProps } from "prism-react-renderer";
-import React, { CSSProperties, ReactNode } from "react";
+import React, { CSSProperties, ReactNode, useState, useEffect } from "react";
 
 import {
   mdiCheckboxMarkedCircle,
@@ -11,56 +11,112 @@ import clsx from "clsx";
 import { SlottedSVG } from "@ukic/react";
 
 import "./index.css";
+import StackblitzButton, {
+  StackblitzProps,
+} from "../../content/structured/patterns/components/StackblitzButton";
+import { debounce } from "../../utils/helpers";
 
 interface Snippet {
   language: string;
   snippet: string;
 }
 
-interface ComponentPreviewProps {
+interface ComponentPreviewProps extends Partial<StackblitzProps> {
   snippets?: Snippet[];
   left?: boolean;
   noPadding?: boolean;
   centered?: boolean;
   children: ReactNode;
   style: CSSProperties;
   state: "none" | "good" | "bad";
+  showStackblitzBtn?: boolean;
 }
 
-const CodeSnippet: React.FC<{ code: string }> = ({ code }) => (
-  <>
-    <Highlight {...defaultProps} code={code} language="jsx" theme={undefined}>
-      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-        <pre className={clsx(className, "snippet")} style={style}>
-          <code>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
-          </code>
-        </pre>
-      )}
-    </Highlight>
-    <div className="snippet-container">
-      <ic-button
-        variant="tertiary"
-        appearance="dark"
-        onClick={() => {
-          navigator.clipboard.writeText(code);
-          document
-            .querySelector<HTMLIcToastElement>("#copy-to-clipboard-toast")
-            ?.setVisible();
-        }}
-      >
-        Copy code
-        <SlottedSVG path={mdiContentCopy} slot="left-icon" />
-      </ic-button>
-    </div>
-  </>
-);
+interface CodeSnippetProps extends Partial<StackblitzProps> {
+  code: string;
+  showStackblitzBtn?: boolean;
+}
+
+const CodeSnippet: React.FC<CodeSnippetProps> = ({
+  code,
+  showStackblitzBtn,
+  filePaths,
+  projectTitle,
+  projectDescription,
+}) => {
+  let defaultViewportWidth = 0;
+
+  if (typeof window !== "undefined") {
+    defaultViewportWidth = window.innerWidth;
+  }
+
+  const [viewportWidth, setViewportWidth] =
+    useState<number>(defaultViewportWidth);
+
+  let isLargeViewport: boolean = viewportWidth > 992;
+
+  useEffect(() => {
+    const handleResize = debounce(() => setViewportWidth(window.innerWidth));
+
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      <Highlight {...defaultProps} code={code} language="jsx" theme={undefined}>
+        {({ className, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={clsx(className, "snippet")} style={style}>
+            <code>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </code>
+          </pre>
+        )}
+      </Highlight>
+      <div className="snippet-container">
+        {showStackblitzBtn &&
+          filePaths !== undefined &&
+          filePaths?.length > 0 &&
+          projectTitle !== undefined &&
+          projectDescription !== undefined && (
+            <StackblitzButton
+              filePaths={filePaths}
+              projectTitle={projectTitle}
+              projectDescription={projectDescription}
+            />
+          )}
+        <ic-button
+          aria-label={isLargeViewport ? "" : "Copy code"}
+          variant={isLargeViewport ? "tertiary" : "icon"}
+          appearance="dark"
+          onClick={() => {
+            navigator.clipboard.writeText(code);
+            document
+              .querySelector<HTMLIcToastElement>("#copy-to-clipboard-toast")
+              ?.setVisible();
+          }}
+        >
+          <SlottedSVG
+            path={mdiContentCopy}
+            slot={isLargeViewport ? "left-icon" : undefined}
+            viewBow="0 0 24 24"
+          />
+          {isLargeViewport && "Copy code"}
+        </ic-button>
+      </div>
+    </>
+  );
+};
 
 const ComponentPreview: React.FC<ComponentPreviewProps> = ({
   snippets,
@@ -70,6 +126,7 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
   centered = true,
   style,
   state = "none",
+  showStackblitzBtn,
 }) => (
   <div className="comp-preview">
     <h4 className="offscreen">Interactive example</h4>
@@ -111,7 +168,15 @@ const ComponentPreview: React.FC<ComponentPreviewProps> = ({
         </div>
         {snippets.map((snippet, index) => (
           <ic-tab-panel tab-position={index}>
-            <CodeSnippet code={snippet.snippet} />
+            <CodeSnippet
+              code={snippet.snippet}
+              showStackblitzBtn={showStackblitzBtn}
+              filePaths={[
+                "../content/structured/patterns/components/top-nav-patterns/javascript/react/top-nav-pattern.jsx",
+              ]}
+              projectTitle="Top Navigation Pattern"
+              projectDescription="this is a top nav"
+            />
           </ic-tab-panel>
         ))}
       </ic-tab-context>

diff --git a/src/content/static/components/CookiesData/index.tsx b/src/content/static/components/CookiesData/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { debounce } from "../../../../utils/helpers";
 
 import CookiesCards from "./CookiesCards";
@@ -31,14 +31,18 @@ const CookiesData = ({ headers, data, caption }: CookiesDataProps) => {
 
   const [viewportWidth, setViewportWidth] = useState(defaultViewportWidth);
 
-  React.useEffect(() => {
-    window.addEventListener(
-      "resize",
-      debounce(() => setViewportWidth(window.innerWidth))
-    );
+  useEffect(() => {
+    const handleResize = debounce(() => setViewportWidth(window.innerWidth));
+
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup function
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
   }, []);
 
-  if (viewportWidth > 991) {
+  if (viewportWidth > 992) {
     return <CookiesTable {...props} />;
   }