feat: Improve Expandable style

For this, I extracted the `Alert` component stuff into a more generic `Callout` component, which the `Alert` extends.

The `Expandable` can now use the same basis, ensuring we have the same style etc, and just pass some more stuff into it.

For this, the `Callout` component also allows to pass `id` and `titleOnClick` attributes which we need for the Expandable.

Author: mydea

docs/contributing/pages/components.mdx

@@ -94,12 +94,36 @@ Render an expandable section.
 
 <Expandable title="This is a title">This is some content</Expandable>
 
+<Expandable permalink title="With Permalink">This is some content</Expandable>
+
+<Expandable title="Warning" level="warning">This is some warning content</Expandable>
+
+<Expandable title="Success" level="success">This is some success content</Expandable>
+
 ```markdown {tabTitle:Example}
 <Expandable title="This is a title">
   This is some content
 </Expandable>
 ```
 
+```markdown {tabTitle:Permalink}
+<Expandable permalink title="With Permalink">
+  This is some content
+</Expandable>
+```
+
+```markdown {tabTitle:Warning}
+<Expandable level="warning" title="This is a title">
+  This is some content
+</Expandable>
+```
+
+```markdown {tabTitle:Success}
+<Expandable level="success" title="This is a title">
+  This is some content
+</Expandable>
+```
+
 Attributes:
 
 - `title` (string)

docs/platforms/javascript/common/troubleshooting/index.mdx

@@ -137,14 +137,11 @@ You can work around our CDN bundles being blocked by [using our NPM packages](#u
 
 <PlatformSection supported={["javascript.nextjs"]}>
 
-<Note>
-  The Sentry Next.js SDK has a separate option to make setting up tunnels very
-  straight-forward, allowing you to skip the setup below. See
-  <PlatformLink to="/manual-setup/#configure-tunneling-to-avoid-ad-blockers">
-    Configure Tunneling to avoid Ad-Blockers
-  </PlatformLink>
-  to learn how to set up tunneling on Next.js.
-</Note>
+The Sentry Next.js SDK has a separate option to make setting up tunnels very
+straight-forward, allowing you to skip the setup below. See <PlatformLink to="/manual-setup/#configure-tunneling-to-avoid-ad-blockers">
+Configure Tunneling to avoid Ad-Blockers</PlatformLink> to learn how to set up tunneling on Next.js.
+
+If you do not want to configure `tunnelRoute`, you can follow the guide below.
 
 </PlatformSection>
 
@@ -543,7 +540,7 @@ shamefully-hoist=true
 <PlatformSection supported={['javascript.nextjs']}>
   <Expandable permalink title="Out of Memory (OOM) errors during build">
     The problem here is related to memory consumption during the build process, especially when generating source maps. Here are some potential solutions and workarounds:
-    
+
     - Update your `@sentry/nextjs` package to the latest version.
     - Increase Node.js memory limit: You can try increasing the memory limit for Node.js during the build process. Add this to your build command: `NODE_OPTIONS="--max-old-space-size=8192" next build`. This flag will increase the memory available to the node process to 8 GB. We have found that Next.js consumes around 4 GB in most cases. Decrease the size depending on your memory availability.
     - Disable source maps entirely: As a last resort, you can disable source map generation completely:

src/components/callout/index.tsx

@@ -1,4 +1,4 @@
-import {ForwardRefExoticComponent, ReactNode} from 'react';
+import {ForwardRefExoticComponent, MouseEventHandler, ReactNode} from 'react';
 
 // explicitly not usig CSS modules here
 // because there's some prerendered content that depends on these exact class names
@@ -7,17 +7,70 @@ import './styles.scss';
 type CalloutProps = {
   Icon: ForwardRefExoticComponent<any>;
   children?: ReactNode;
+  /** If defined, the title of the callout will receive this ID and render a link to this ID. */
+  id?: string;
   level?: 'info' | 'warning' | 'success';
   role?: string;
   title?: string;
+  titleOnClick?: MouseEventHandler;
 };
 
-export function Callout({title, children, level = 'info', Icon, role}: CalloutProps) {
+function Header({
+  title,
+  id,
+  onClick,
+}: {
+  title: string;
+  id?: string;
+  onClick?: MouseEventHandler;
+}) {
+  if (!id) {
+    return (
+      <h5
+        className="callout-header"
+        onClick={onClick}
+        role={onClick ? 'button' : undefined}
+      >
+        {title}
+      </h5>
+    );
+  }
+
+  // We want to avoid actually triggering the link
+  const wrappedOnClick = onClick
+    ? (event: React.MouseEvent) => {
+        event.preventDefault();
+        onClick(event);
+      }
+    : undefined;
+
+  return (
+    <h5 className="callout-header" id={id}>
+      <a href={'#' + id} onClick={wrappedOnClick}>
+        {title}
+      </a>
+    </h5>
+  );
+}
+
+export function Callout({
+  title,
+  children,
+  level = 'info',
+  Icon,
+  role,
+  id,
+  titleOnClick,
+}: CalloutProps) {
   return (
     <div className={`callout ${'callout-' + level}`} role={role}>
-      <Icon className="callout-icon" />
+      <Icon
+        className="callout-icon"
+        onClick={titleOnClick}
+        role={titleOnClick ? 'button' : undefined}
+      />
       <div className="callout-content">
-        {title && <h5 className="callout-header">{title}</h5>}
+        {title && <Header title={title} id={id} onClick={titleOnClick} />}
         <div className="callout-body content-flush-bottom">{children}</div>
       </div>
     </div>

src/components/callout/styles.scss

@@ -31,13 +31,29 @@
   .callout-header {
     font-weight: 500;
     color: inherit;
+
+    & a {
+      color: inherit;
+    }
+
+    &[role="button"] {
+      cursor: pointer;
+    }
   }
 }
 
 .callout-icon {
   flex: 1em 0 0;
   height: 1.75em;
   color: var(--callout-highlight-color);
+
+  &[role="button"] {
+    cursor: pointer;
+  }
+}
+
+.callout-content {
+  min-width: 0;
 }
 
 .callout-info {

src/components/expandable.tsx

@@ -1,86 +1,74 @@
 'use client';
 
 import {ReactNode, useEffect, useState} from 'react';
-import {ArrowDown} from 'react-feather';
-import styled from '@emotion/styled';
+import {ChevronDownIcon, ChevronRightIcon} from '@radix-ui/react-icons';
+
+import {Callout} from './callout';
 
 type Props = {
   children: ReactNode;
   title: string;
+  level?: 'info' | 'warning' | 'success';
   permalink?: boolean;
 };
 
-const Arrow = styled(({...props}) => <ArrowDown {...props} />)<{className: string}>`
-  user-select: none;
-  transition: transform 200ms ease-in-out;
-  stroke-width: 3px;
-  position: absolute;
-  right: 0;
-  top: 4px;
-`;
-
-const Details = styled.details`
-  background: var(--accent-2);
-  border-color: var(--accent-12);
-  border-left: 3px solid var(--accent-12);
-  margin-bottom: 1rem;
-  padding: 0.5rem 1rem;
-  h2 {
-    margin-top: 0;
-  }
-  &[open] .expandable-arrow {
-    transform: rotate(180deg);
-  }
-`;
-
 function slugify(str: string) {
   return str
     .toLowerCase()
     .replace(/ /g, '-')
     .replace(/[^a-z0-9-]/g, '');
 }
 
-const header = (title: string, permalink?: boolean) =>
-  permalink ? (
-    <h2 id={slugify(title)} className="!mb-0">
-      <a
-        href={'#' + slugify(title)}
-        className="w-full !text-[1rem] !font-medium hover:!no-underline !text-[var(--foreground)]"
-      >
-        {title}
-      </a>
-    </h2>
-  ) : (
-    title
-  );
+export function Expandable({title, level, children, permalink}: Props) {
+  const id = permalink ? slugify(title) : undefined;
 
-export function Expandable({title, children, permalink}: Props) {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const defaultIsExpanded = id && window.location.hash === `#${id}`;
+  const [isExpanded, setIsExpanded] = useState(defaultIsExpanded);
 
+  // Ensure we scroll to the element if the URL hash matches
   useEffect(() => {
-    // if the url hash matches the title, expand the section
-    if (permalink && window.location.hash === `#${slugify(title)}`) {
-      setIsExpanded(true);
+    if (id && window.location.hash === `#${id}`) {
+      document.querySelector(`#${id}`)?.scrollIntoView();
     }
+
+    // When the hash changes (e.g. when the back/forward browser buttons are used),
+    // we want to ensure to jump to the correct section
     const onHashChange = () => {
-      if (window.location.hash === `#${slugify(title)}`) {
+      if (window.location.hash === `#${id}`) {
         setIsExpanded(true);
+        document.querySelector(`#${id}`)?.scrollIntoView();
       }
     };
     // listen for hash changes and expand the section if the hash matches the title
     window.addEventListener('hashchange', onHashChange);
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  }, [title, permalink]);
+  }, [id]);
+
+  function toggleIsExpanded() {
+    const newVal = !isExpanded;
+
+    if (id) {
+      if (newVal) {
+        window.history.pushState({}, '', `#${id}`);
+      } else {
+        window.history.pushState({}, '', '#');
+      }
+    }
+
+    setIsExpanded(newVal);
+  }
 
   return (
-    <Details open={isExpanded}>
-      <summary className="m-0 font-medium cursor-pointer relative pr-8 select-none appearance-none list-none">
-        {header(title, permalink)}
-        <Arrow className="expandable-arrow" />
-      </summary>
-      {children}
-    </Details>
+    <Callout
+      level={level}
+      title={title}
+      Icon={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+      id={id}
+      titleOnClick={toggleIsExpanded}
+    >
+      {isExpanded ? children : undefined}
+    </Callout>
   );
 }