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: {
      fileName: 'UserProfile.tsx',
      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 { Code } from './Code';

const source = `import { defineConfig } from 'some-bundler';

// A long config most readers will scroll past — collapse it to nothing by
// default and let them expand it on demand.
export default defineConfig({
  entry: './src/index.ts',
  format: ['esm', 'cjs'],
  target: 'es2022',
  sourcemap: true,
  dts: true,
  clean: true,
  external: ['react', 'react-dom'],
  esbuildOptions(options) {
    options.banner = {
      js: '"use client";',
    };
  },
});`;

export function CollapseToEmptyCode() {
  const code: CodeType = {
    Default: {
      fileName: 'bundler.config.ts',
      language: 'ts',
      source,
    },
  };

  // `collapseToEmpty` collapses the whole block to an empty window: nothing is
  // shown until the reader clicks Expand. It is a render-time flag — the
  // precomputed source is unchanged.
  return <Code code={code} collapseToEmpty />;
}

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 { FOCUS_COMMENT_PREFIX } from '@mui/internal-docs-infra/pipeline/enhanceCodeEmphasis';
import { TypescriptToJavascriptTransformer } from '@mui/internal-docs-infra/pipeline/transformTypescriptToJavascript';
import { Code } from './Code';

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

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

interface UserListProps {
  users: User[];
  onSelect: (user: User) => void;
}

// @focus-start
export function UserList({ users, onSelect }: UserListProps) {
  const [query, setQuery] = React.useState<string>('');

  const filtered = users.filter((user: User) =>
    user.name.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <ul>
      {filtered.map((user: User) => (
        <li key={user.id} onClick={() => onSelect(user)}>
          {user.name}
        </li>
      ))}
    </ul>
  );
}
// @focus-end`;

const sourceTransformers = [TypescriptToJavascriptTransformer];

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

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

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

import 'server-only';

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

import { CollapsibleContentLazy } from './CollapsibleContentLazy';
import { CollapsibleContentLoading } from './CollapsibleContentLoading';
import { CodeController } from './CodeController';

const sourceParser = createParseSource();
// Must match the global `DemoCodeProvider` emphasis config (see
// `docs/demo-data/code-provider/layout.tsx`). This block is EDITABLE: the
// controlled view re-parses the source from its editable string (dropping the
// precomputed frames and the `appliedEnhancers` marker) and re-enhances it with
// the PROVIDER's enhancer. The server precompute here builds the loading
// fallback, so it must window identically or the fallback won't match the live
// editor (e.g. a missing `padding-top` frame).
const sourceEnhancers = [
  createEnhanceCodeEmphasis({ paddingFrameMaxSize: 2, focusFramesMaxSize: 18 }),
];

// A source long enough (and indented) to collapse into a windowed view with a
// clipped indent gutter. The `@highlight` block becomes the focused/visible
// region while collapsed; the surrounding lines are clipped.
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>
  );
}`;

/**
 * A collapsible code block that is ALSO editable — the combination needed to
 * reproduce the collapsed-window editing bugs (last-indent erase jump, ArrowUp
 * scroll anchor). It reuses the collapsible `CollapsibleContent` (which owns the
 * `useCodeWindow` collapse + the expand checkbox) and turns on editing by
 * wrapping it in a `CodeController` and passing `controlled` to the highlighter.
 */
export async function CollapsibleEditor() {
  const { code: strippedSource, comments } = await parseImportsAndComments(source, '/demo.tsx', {
    removeCommentsWithPrefix: [EMPHASIS_COMMENT_PREFIX],
    notableCommentsPrefix: [EMPHASIS_COMMENT_PREFIX],
  });

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

  return (
    <CodeController>
      <CodeHighlighter
        code={code}
        controlled
        Content={CollapsibleContentLazy}
        ContentLoading={CollapsibleContentLoading}
        sourceParser={sourceParser}
        sourceEnhancers={sourceEnhancers}
      />
    </CodeController>
  );
}

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: {
      fileName: 'Calendar.tsx',
      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: {
      fileName: 'ScheduleView.tsx',
      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: {
      fileName: 'ContactForm.tsx',
      language: 'tsx',
      source: strippedSource!,
      comments,
    },
  };

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