Use Code Window

'use client';
import * as React from 'react';
import { useCodeWindow } from '@mui/internal-docs-infra/useCodeWindow';
import styles from './CollapsibleSnippet.module.css';

const longSource = `function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  const pivot = arr[0];
  const left = [];
  const right = [];
  for (let index = 1; index < arr.length; index += 1) {
    if (arr[index] < pivot) {
      left.push(arr[index]);
    } else {
      right.push(arr[index]);
    }
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}`;

export function CollapsibleSnippet() {
  const [expanded, setExpanded] = React.useState(false);
  const { containerRef, toggleRef, anchorScroll } = useCodeWindow<HTMLButtonElement>();

  const onToggle = () => {
    // Anchor *before* the layout-changing state update.
    anchorScroll(expanded ? 'collapse' : 'expand');
    setExpanded((prev) => !prev);
  };

  return (
    <div ref={containerRef} className={styles.container}>
      <pre className={`${styles.pre} ${expanded ? styles.expanded : ''}`}>
        <code className={styles.code}>{longSource}</code>
      </pre>
      <button ref={toggleRef} type="button" onClick={onToggle} className={styles.toggle}>
        {expanded ? 'Collapse' : 'Expand'}
      </button>
    </div>
  );
}

import * as React from 'react';
import type { Code as CodeType } from '@mui/internal-docs-infra/CodeHighlighter/types';
import { parseImportsAndComments } from '@mui/internal-docs-infra/pipeline/loaderUtils';
import { EMPHASIS_COMMENT_PREFIX } from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
import { Code } from './Code';

const source = `import * as React from 'react';
import { fetchUser } from './api';

interface User {
  name: string;
  email: string;
}

export function UserProfile({ id }: { id: string }) {
  const [user, setUser] = React.useState<User | null>(null);

  // @highlight-start
  React.useEffect(() => {
    let cancelled = false;
    fetchUser(id).then((data) => {
      if (!cancelled) {
        setUser(data);
      }
    });
    return () => {
      cancelled = true;
    };
  }, [id]);
  // @highlight-end

  if (!user) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}`;

export async function CollapsibleCode() {
  const { code: strippedSource, comments } = await parseImportsAndComments(source, '/demo.tsx', {
    removeCommentsWithPrefix: [EMPHASIS_COMMENT_PREFIX],
    notableCommentsPrefix: [EMPHASIS_COMMENT_PREFIX],
  });

  const code: CodeType = {
    Default: {
      language: 'tsx',
      source: strippedSource!,
      comments,
    },
  };

  return <Code code={code} />;
}

import { Counter } from './Counter';
import { createDemo } from './createDemo';

export const DemoCounter = createDemo(import.meta.url, Counter);

import * as React from 'react';
import type { Code as CodeType } from '@mui/internal-docs-infra/CodeHighlighter/types';
import { parseImportsAndComments } from '@mui/internal-docs-infra/pipeline/loaderUtils';
import {
  EMPHASIS_COMMENT_PREFIX,
  FOCUS_COMMENT_PREFIX,
} from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
import { Code } from './Code';

const source = `import * as React from 'react';
import { formatDate } from './formatDate';
import { fetchEvents } from './fetchEvents';

const today = formatDate(new Date()); // @highlight

export function Calendar() {
  const [events, setEvents] = React.useState([]);

  // @focus-start
  React.useEffect(() => {
    fetchEvents(today).then(setEvents);
  }, []);
  // @focus-end

  return (
    <div className="calendar">
      <h2>{today}</h2>
      <ul>
        {events.map((event) => (
          <li key={event.id}>{event.title}</li>
        ))}
      </ul>
    </div>
  );
}`;

export async function FocusCode() {
  const { code: strippedSource, comments } = await parseImportsAndComments(source, '/demo.tsx', {
    removeCommentsWithPrefix: [EMPHASIS_COMMENT_PREFIX, FOCUS_COMMENT_PREFIX],
    notableCommentsPrefix: [EMPHASIS_COMMENT_PREFIX, FOCUS_COMMENT_PREFIX],
  });

  const code: CodeType = {
    Default: {
      language: 'tsx',
      source: strippedSource!,
      comments,
    },
  };

  return <Code code={code} />;
}

import * as React from 'react';
import type { Code as CodeType } from '@mui/internal-docs-infra/CodeHighlighter/types';
import { parseImportsAndComments } from '@mui/internal-docs-infra/pipeline/loaderUtils';
import {
  EMPHASIS_COMMENT_PREFIX,
  FOCUS_COMMENT_PREFIX,
} from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
import { CodeIndent } from './CodeIndent';

const source = `import * as React from 'react';
import { DatePicker } from './DatePicker'; // @highlight

export function ScheduleView() {
  const [date, setDate] = React.useState(null);

  return (
    <main>
      <header>
        <h1>Schedule</h1>
      </header>
      <section>
        <form>
          <label htmlFor="date">Pick a date</label>
          {/* @focus-start */}
          <DatePicker
            id="date"
            value={date}
            onChange={setDate}
            minDate={new Date()}
            format="MM/dd/yyyy"
          />
          {/* @focus-end */}
        </form>
      </section>
      <footer>
        <p>All times shown in UTC</p>
      </footer>
    </main>
  );
}`;

export async function IndentCode() {
  const { code: strippedSource, comments } = await parseImportsAndComments(source, '/demo.tsx', {
    removeCommentsWithPrefix: [EMPHASIS_COMMENT_PREFIX, FOCUS_COMMENT_PREFIX],
    notableCommentsPrefix: [EMPHASIS_COMMENT_PREFIX, FOCUS_COMMENT_PREFIX],
  });

  const code: CodeType = {
    Default: {
      language: 'tsx',
      source: strippedSource!,
      comments,
    },
  };

  return <CodeIndent code={code} />;
}

import * as React from 'react';
import type { Code as CodeType } from '@mui/internal-docs-infra/CodeHighlighter/types';
import { parseImportsAndComments } from '@mui/internal-docs-infra/pipeline/loaderUtils';
import { EMPHASIS_COMMENT_PREFIX } from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
import { CodeMaxSize } from './CodeMaxSize';

const source = `import * as React from 'react';

interface FormData {
  name: string;
  email: string;
  message: string;
}

export function ContactForm() {
  const [form, setForm] = React.useState<FormData>({
    name: '',
    email: '',
    message: '',
  });

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    const response = await fetch('/api/contact', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(form),
    });
    if (!response.ok) {
      throw new Error('Failed to submit');
    }
    setForm({ name: '', email: '', message: '' });
  };

  return (
    // @highlight-start
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
      <label htmlFor="email">Email</label>
      <input id="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
      <label htmlFor="message">Message</label>
      <textarea id="message" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
      <button type="submit">Send</button>
    </form>
    // @highlight-end
  );
}`;

export async function MaxSizeCode() {
  const { code: strippedSource, comments } = await parseImportsAndComments(source, '/demo.tsx', {
    removeCommentsWithPrefix: [EMPHASIS_COMMENT_PREFIX],
    notableCommentsPrefix: [EMPHASIS_COMMENT_PREFIX],
  });

  const code: CodeType = {
    Default: {
      language: 'tsx',
      source: strippedSource!,
      comments,
    },
  };

  return <CodeMaxSize code={code} />;
}