ad04e89745
Extract inline code examples from JSDoc comments into companion
`.examples.ts`/`.examples.tsx` files. Examples are now:
- Type-checked by wrapping them in functions
- Referenced via `{@includeCode ./file.examples.ts#regionName}` tags
- Organized using `//#region` and `//#endregion` markers
This keeps the main source files cleaner while ensuring examples
compile correctly. Updated TypeDoc config with `exampleTag: false`
to support title text on `@example` tags.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
/**
|
|
* Type-checked examples for the useDocumentTheme hook.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { useDocumentTheme } from "./useDocumentTheme.js";
|
|
|
|
// Stub components for examples
|
|
declare function DarkIcon(): React.JSX.Element;
|
|
declare function LightIcon(): React.JSX.Element;
|
|
|
|
/**
|
|
* Example: Conditionally render based on theme.
|
|
*/
|
|
function useDocumentTheme_conditionalRender() {
|
|
//#region useDocumentTheme_conditionalRender
|
|
function MyApp() {
|
|
const theme = useDocumentTheme();
|
|
|
|
return <div>{theme === "dark" ? <DarkIcon /> : <LightIcon />}</div>;
|
|
}
|
|
//#endregion useDocumentTheme_conditionalRender
|
|
}
|
|
|
|
/**
|
|
* Example: Use with theme-aware styling.
|
|
*/
|
|
function useDocumentTheme_themedButton() {
|
|
//#region useDocumentTheme_themedButton
|
|
function ThemedButton() {
|
|
const theme = useDocumentTheme();
|
|
|
|
return (
|
|
<button
|
|
style={{
|
|
background: theme === "dark" ? "#333" : "#fff",
|
|
color: theme === "dark" ? "#fff" : "#333",
|
|
}}
|
|
>
|
|
Click me
|
|
</button>
|
|
);
|
|
}
|
|
//#endregion useDocumentTheme_themedButton
|
|
}
|