Guided Steps component: View code, commands etc. with instructions on the side

config.json

@@ -80,7 +80,8 @@
     },
     {
       "name": "18.x",
-      "branch": "branch/v18",
+      "branch": "aatuvai/guided-steps",
+      "repo_path": "aatuvai/teleport",
       "isDefault": true
     },
     {

src/components/GuidedSteps/CodeBlock.tsx

@@ -0,0 +1,55 @@
+import {
+  useImperativeHandle,
+  useRef,
+  forwardRef,
+  useContext,
+  useState,
+} from "react";
+import cn from "classnames";
+import styles from "./File.module.css";
+import { CodeBlockProps, CodeBlockHandle } from "./types";
+import { GuidedStepsContext } from "./context";
+
+const CodeBlock = forwardRef<
+  CodeBlockHandle,
+  Pick<CodeBlockProps, "children" | "fileName" | "copyButtonActive">
+>(({ fileName, copyButtonActive, children }, ref) => {
+  const { activeFileName, setActiveFileName } = useContext(GuidedStepsContext);
+  const stepRef = useRef<HTMLSpanElement | null>(null);
+
+  const [activeLines, setActiveLines] = useState<boolean>(false);
+
+  useImperativeHandle(
+    ref,
+    (): CodeBlockHandle => ({
+      activate: (): void => {
+        if (activeFileName !== fileName) setActiveFileName(fileName);
+        setActiveLines(true);
+        stepRef.current?.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "start",
+          container: "nearest",
+        });
+      },
+      deactivate: (): void => setActiveLines(false),
+      innerText: stepRef.current?.innerText || "",
+    })
+  );
+
+  return (
+    <span
+      className={cn(styles.codeBlock, {
+        [styles.activeLines]: activeLines,
+        [styles.copyButtonActive]: copyButtonActive,
+      })}
+      ref={stepRef}
+    >
+      {children}
+    </span>
+  );
+});
+
+CodeBlock.displayName = "CodeBlock";
+
+export default CodeBlock;

src/components/GuidedSteps/File.module.css

@@ -0,0 +1,172 @@
+.files {
+  position: relative;
+  height: 110%;
+  border-bottom-left-radius: var(--m-1);
+  border-bottom-right-radius: var(--m-1);
+
+  &.copyButtonActive {
+    background-color: var(--color-code);
+  }
+}
+
+.file {
+  position: absolute;
+  height: 0;
+  opacity: 0;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+
+  &.active {
+    opacity: 1;
+    height: auto;
+    position: relative;
+    pointer-events: auto;
+  }
+
+  :global(pre) {
+    border-radius: 0;
+    transition: all 0.2s ease-in;
+  }
+  & > div {
+    box-shadow: unset;
+  }
+}
+
+.fileTabs {
+  position: sticky;
+  top: 0;
+  display: flex;
+  padding: var(--m-2);
+  border-bottom: 1.5px solid var(--color-tonal-neutral-1-white);
+  background-color: #0e1435;
+  border-top-left-radius: var(--m-1);
+  border-top-right-radius: var(--m-1);
+  z-index: 1;
+  gap: var(--m-0-5);
+  margin-bottom: 0;
+  min-height: 65px;
+}
+
+.fileTab {
+  display: flex;
+  align-items: center;
+  padding: var(--m-0-5) var(--m-2);
+  gap: 2px;
+  border-radius: 36px;
+  color: var(--color-white);
+  font-size: var(--fs-text-md);
+  line-height: 1.42857;
+  margin-top: 0 !important;
+  transition: all 0.2s ease-in-out;
+
+  &.active {
+    background-color: var(--color-interactive-primary);
+    color: var(--color-black);
+    svg {
+      filter: brightness(0);
+    }
+    &:hover {
+      background-color: var(--color-interactive-primary);
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: var(--color-tonal-primary-2);
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+    filter: brightness(0) invert(1);
+  }
+
+  span {
+    line-height: 1;
+  }
+}
+
+.downloadButton {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: var(--m-0-5);
+  background-color: var(--color-tonal-neutral-0-white);
+  border: none;
+  color: var(--color-foreground-slightly-muted-white);
+  font-size: var(--fs-text-sm);
+  cursor: pointer;
+  font-weight: var(--fw-medium);
+  line-height: 1rem;
+  padding: var(--m-1) var(--m-2);
+  border-radius: var(--m-0-5);
+  transition: all 0.2s ease-in-out;
+
+  svg {
+    filter: brightness(0) invert(1);
+    opacity: 0.72;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  &:hover {
+    background-color: var(--color-tonal-neutral-1-white);
+    color: var(--color-white);
+
+    svg {
+      opacity: 1;
+    }
+  }
+}
+
+.codeBlock {
+  position: relative;
+  pointer-events: none;
+  scroll-margin-top: 72px;
+  :global(pre) {
+    padding: 0 0 0 var(--m-2);
+    opacity: 0.52;
+    background-color: transparent !important;
+    transition: opacity 0.2s ease-in;
+
+    code {
+      color: var(--color-data-purple-tertiary);
+      :global(.hljs-attr) {
+        color: var(--color-data-purple-tertiary);
+      }
+      :global(.hljs-string),
+      :global(.hljs-built_in) {
+        color: var(--color-data-caribbean-tertiary);
+      }
+    }
+  }
+
+  &:first-of-type {
+    & > div {
+      padding-top: var(--m-2);
+    }
+  }
+
+  &:last-of-type {
+    & > div {
+      padding-bottom: var(--m-2);
+    }
+  }
+
+  & > div {
+    background-color: transparent !important;
+    box-shadow: unset !important;
+  }
+
+  &.activeLines,
+  &.copyButtonActive {
+    :global(pre) {
+      background-color: var(--color-code) !important;
+      opacity: 1;
+    }
+
+    & > div {
+      background-color: var(--color-code) !important;
+    }
+  }
+}

src/components/GuidedSteps/File.tsx

@@ -0,0 +1,109 @@
+import { useContext } from "react";
+import cn from "classnames";
+import { GuidedStepsContext } from "./context";
+import styles from "./File.module.css";
+import { extractCodeBlocksFromFile } from "./utils";
+import CodeBlock from "./CodeBlock";
+import Icon from "../Icon";
+
+export const FileTabs: React.FC = () => {
+  const {
+    files,
+    fileRefs,
+    activeFileName,
+    fileNameHasType,
+    setActiveFileName,
+  } = useContext(GuidedStepsContext);
+
+  return (
+    <ul className={styles.fileTabs}>
+      {files.map(({ name, icon }) => (
+        <li
+          key={name}
+          className={cn(styles.fileTab, {
+            [styles.active]: name === activeFileName,
+          })}
+          role="button"
+          onClick={() => {
+            setActiveFileName(name);
+          }}
+        >
+          {icon && <Icon name={icon} className={styles.fileTabIcon} />}
+          <span>{name}</span>
+        </li>
+      ))}
+      {fileNameHasType && (
+        <button
+          className={styles.downloadButton}
+          onClick={(e) => {
+            e.stopPropagation();
+            const activeFileContent = fileRefs.current.get(activeFileName);
+            if (activeFileContent) {
+              // Create a blob with the file content
+              const blob = new Blob([activeFileContent.innerText], {
+                type:
+                  activeFileName?.split(".").pop() === "yaml"
+                    ? "application/yaml"
+                    : "text/plain",
+              });
+
+              // Create a download link and trigger it
+              const downloadLink = document.createElement("a");
+              downloadLink.href = URL.createObjectURL(blob);
+              downloadLink.download = activeFileName;
+              document.body.appendChild(downloadLink);
+              downloadLink.click();
+              document.body.removeChild(downloadLink);
+
+              // Clean up the URL object
+              URL.revokeObjectURL(downloadLink.href);
+            }
+          }}
+        >
+          <Icon name="download2" size="sm" />
+          Download
+        </button>
+      )}
+    </ul>
+  );
+};
+
+const FileComponent: React.FC = () => {
+  const {
+    files,
+    activeFileName,
+    showCopyButton,
+    fileNameHasType,
+    setCodeBlockRef,
+    setFileRef,
+  } = useContext(GuidedStepsContext);
+
+  return (
+    <div className={styles.files}>
+      {files.map((file) => (
+        <div
+          key={file.name}
+          className={cn(styles.file, {
+            [styles.active]: activeFileName === file.name,
+          })}
+          ref={(el) => setFileRef(file.name, el)}
+        >
+          {extractCodeBlocksFromFile(file).map(({ stepId, children }, i) => (
+            <CodeBlock
+              key={i}
+              ref={(el) => setCodeBlockRef(stepId, el)}
+              copyButtonActive={showCopyButton && fileNameHasType}
+              fileName={file.name}
+            >
+              {children}
+            </CodeBlock>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+FileComponent.displayName = "File";
+
+export default FileComponent;