/ so "..." is untouched.
+ // - Repeat until stable: a single pass leaves ". ." from triple nesting.
// - Trim leading ". " at cell start
// - Remove orphan "-" after periods (upstream renders a bare dash for empty descriptions)
- const cellHtml = $cell
- .html()!
- .replace(/\.\s*\.\s*/g, '. ')
+ const blocks: string[] = [];
+ let cellHtml = $cell.html()!.replace(/<(code|pre)\b[^>]*>[\S\s]*?<\/\1>/gi, match => {
+ blocks.push(match);
+ return `%%MD_CODE_${blocks.length - 1}%%`;
+ });
+ while (/\.\s*\./.test(cellHtml)) {
+ cellHtml = cellHtml.replace(/\.\s*\./g, '. ');
+ }
+ cellHtml = cellHtml
.replace(/^\s*\.\s*/, '')
- .replace(/\.\s*-\s*$/, '.');
+ .replace(/\.\s*-\s*$/, '.')
+ .replace(/%%MD_CODE_(\d+)%%/g, (_, i) => blocks[Number(i)]);
$cell.html(cellHtml);
});
@@ -1027,6 +1040,10 @@ export function checkPage(markdown: string, pagePath?: string): string[] {
errors.push('Contains CSS class names in text');
}
+ if (markdown.includes('. .')) {
+ errors.push('Contains ". ." (corrupted ellipsis or doubled period)');
+ }
+
return errors.filter(error => !exemptions.some(ex => error.startsWith(ex)));
}
diff --git a/docs/ui/components/ComponentExample.tsx b/docs/ui/components/ComponentExample.tsx
new file mode 100644
index 00000000000000..89bfd1255f3c0f
--- /dev/null
+++ b/docs/ui/components/ComponentExample.tsx
@@ -0,0 +1,123 @@
+import { useTheme } from '@expo/styleguide';
+import { FileCode01Icon } from '@expo/styleguide-icons/outline/FileCode01Icon';
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { cleanCopyValue, getCodeBlockDataFromChildren } from '~/common/code-utilities';
+import { prefersDarkTheme } from '~/common/window';
+import { usePageApiVersion } from '~/providers/page-api-version';
+import { LightboxImage } from '~/ui/components/ContentSpotlight/LightboxImage';
+import { Snippet } from '~/ui/components/Snippet/Snippet';
+import { SnippetContent } from '~/ui/components/Snippet/SnippetContent';
+import { SnippetHeader } from '~/ui/components/Snippet/SnippetHeader';
+import { CopyAction } from '~/ui/components/Snippet/actions/CopyAction';
+import { SettingsAction } from '~/ui/components/Snippet/actions/SettingsAction';
+
+type Props = PropsWithChildren<{
+ title: string;
+ src: string;
+ alt: string;
+ darkSrc?: string;
+}>;
+
+type SideButton = {
+ side: 'left' | 'right';
+ top: string;
+ height: string;
+};
+
+const DEVICE_FRAMES = {
+ ios: {
+ width: 1206,
+ height: 2622,
+ frameRadius: 30,
+ screenRadius: 24,
+ buttons: [
+ { side: 'left', top: '13%', height: '4%' },
+ { side: 'left', top: '21%', height: '7%' },
+ { side: 'left', top: '30%', height: '7%' },
+ { side: 'right', top: '24%', height: '11%' },
+ ] satisfies SideButton[],
+ },
+ android: {
+ width: 1080,
+ height: 2400,
+ frameRadius: 24,
+ screenRadius: 18,
+ buttons: [
+ { side: 'right', top: '17%', height: '6%' },
+ { side: 'right', top: '26%', height: '11%' },
+ ] satisfies SideButton[],
+ },
+};
+
+/**
+ * Shows a code example next to a screenshot of what it renders, in a single
+ * snippet card: a full-width header with actions, code on the left, and the
+ * image on the right, stacked on small screens. The screenshot switches
+ * between `src` and `darkSrc` based on the active theme.
+ *
+ * The screenshot sits inside a device bezel so it reads as a phone screen
+ * rather than a floating image. The platform comes from the file name, which
+ * every capture carries as `-ios-` or `-android-`, so pages need no extra prop.
+ */
+export function ComponentExample({ title, src, darkSrc, alt, children }: Props) {
+ const { themeName } = useTheme();
+ const context = usePageApiVersion();
+ const [isDark, setDark] = useState(false);
+
+ useEffect(() => {
+ if (themeName === 'auto') {
+ setDark(prefersDarkTheme());
+ } else {
+ setDark(themeName === 'dark');
+ }
+ }, [themeName]);
+
+ const { value } = getCodeBlockDataFromChildren(children);
+ const activeSrc = isDark && darkSrc ? darkSrc : src;
+ const device = src.includes('-android-') ? DEVICE_FRAMES.android : DEVICE_FRAMES.ios;
+
+ return (
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {device.buttons.map(button => (
+
+ ))}
+
+
+
+
+
+