Merge branch 'feat/react-docs-restructure-clean' of https://github.com/getsentry/sentry-docs into feat/react-docs-restructure-clean

* 'feat/react-docs-restructure-clean' of https://github.com/getsentry/sentry-docs:
  Fixing step connector typings
  Reformatting into the getting-started flow instead of quickstart flow.
  docs(react/getting-started): collapse React 16–18 section inside Expandable
  docs(react/getting-started): scope StepConnector around Steps 1–7 only
  docs(react/getting-started): replace onboarding UI with StepConnector and add content Break before Customizing Replays
  react(getting-started): fix MDX – close OnboardingOption tags and complete Step 6 code
  react: restore React guide index to origin/master version
  react: add Getting Started page (split from current index content)
  React: Restructure documentation with step-based flow

Author: codyde

src/components/stepConnector/index.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 /**
  * Component: StepConnector / StepComponent
@@ -27,11 +27,11 @@
  * - --rail-x, --circle, --gap control rail position and circle size/spacing.
  */
 
-import {useEffect, useMemo, useRef, useState} from 'react';
+import {useEffect, useMemo, useRef, useState} from "react";
 
-import styles from './style.module.scss';
+import styles from "./style.module.scss";
 
-type Persistence = 'session' | 'none';
+type Persistence = "session" | "none";
 
 type Props = {
   children: React.ReactNode;
@@ -47,24 +47,24 @@ type Props = {
   showReset?: boolean;
   /** Start numbering from this value. @defaultValue 1 */
   startAt?: number;
-}
+};
 
 export function StepComponent({
   children,
   startAt = 1,
-  selector = 'h2',
+  selector = "h2",
   showNumbers = true,
   checkable = false,
-  persistence = 'session',
+  persistence = "session",
   showReset = true,
 }: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [completed, setCompleted] = useState<Set<string>>(new Set());
 
   const storageKey = useMemo(() => {
-    if (typeof window === 'undefined' || persistence !== 'session') return null;
+    if (typeof window === "undefined" || persistence !== "session") return null;
     try {
-      const path = window.location?.pathname ?? '';
+      const path = window.location?.pathname ?? "";
       return `stepConnector:${path}:${selector}:${startAt}`;
     } catch {
       return null;
@@ -84,24 +84,24 @@ export function StepComponent({
 
     headings.forEach(h => {
       h.classList.remove(styles.stepHeading);
-      h.removeAttribute('data-step');
-      h.removeAttribute('data-completed');
+      h.removeAttribute("data-step");
+      h.removeAttribute("data-completed");
       const existingToggle = h.querySelector(`.${styles.stepToggle}`);
       if (existingToggle) existingToggle.remove();
     });
 
     headings.forEach((h, idx) => {
       const stepNumber = startAt + idx;
-      h.setAttribute('data-step', String(stepNumber));
+      h.setAttribute("data-step", String(stepNumber));
       h.classList.add(styles.stepHeading);
 
       if (checkable) {
-        const btn = document.createElement('button');
-        btn.type = 'button';
+        const btn = document.createElement("button");
+        btn.type = "button";
         btn.className = styles.stepToggle;
-        btn.setAttribute('aria-label', `Toggle completion for step ${stepNumber}`);
-        btn.setAttribute('aria-pressed', completed.has(h.id) ? 'true' : 'false');
-        btn.addEventListener('click', () => {
+        btn.setAttribute("aria-label", `Toggle completion for step ${stepNumber}`);
+        btn.setAttribute("aria-pressed", completed.has(h.id) ? "true" : "false");
+        btn.addEventListener("click", () => {
           setCompleted(prev => {
             const next = new Set(prev);
             if (next.has(h.id)) next.delete(h.id);
@@ -117,8 +117,8 @@ export function StepComponent({
     return () => {
       headings.forEach(h => {
         h.classList.remove(styles.stepHeading);
-        h.removeAttribute('data-step');
-        h.removeAttribute('data-completed');
+        h.removeAttribute("data-step");
+        h.removeAttribute("data-completed");
         const existingToggle = h.querySelector(`.${styles.stepToggle}`);
         if (existingToggle) existingToggle.remove();
       });
@@ -145,10 +145,10 @@ export function StepComponent({
     );
     headings.forEach(h => {
       const isDone = completed.has(h.id);
-      if (isDone) h.setAttribute('data-completed', 'true');
-      else h.removeAttribute('data-completed');
+      if (isDone) h.setAttribute("data-completed", "true");
+      else h.removeAttribute("data-completed");
       const btn = h.querySelector(`.${styles.stepToggle}`) as HTMLButtonElement | null;
-      if (btn) btn.setAttribute('aria-pressed', isDone ? 'true' : 'false');
+      if (btn) btn.setAttribute("aria-pressed", isDone ? "true" : "false");
     });
 
     if (storageKey && checkable) {
@@ -175,7 +175,7 @@ export function StepComponent({
     <div
       ref={containerRef}
       className={styles.stepContainer}
-      data-shownumbers={showNumbers ? 'true' : 'false'}
+      data-shownumbers={showNumbers ? "true" : "false"}
     >
       {checkable && showReset && (
         <div className={styles.resetRow}>