From 567f70a5f4e85cc97fa13146bfe545384dad2e5c Mon Sep 17 00:00:00 2001 From: dav-is Date: Thu, 31 Jul 2025 20:03:48 -0400 Subject: [PATCH 01/77] Add docs, copied from davis/add-code-highlighter-loader --- .vscode/extensions.json | 3 + README.md | 7 + package.json | 10 +- packages/code-infra/package.json | 3 +- packages/docs-infra/README.md | 4 +- packages/docs-infra/docs/.gitignore | 44 + packages/docs-infra/docs/README.md | 9 + .../demos/code-editor/CodeController.tsx | 15 + .../demos/code-editor/CodeEditor.tsx | 35 + .../code-editor/CodeEditorContent.module.css | 37 + .../demos/code-editor/CodeEditorContent.tsx | 52 + .../demos/code-editor/index.ts | 7 + .../demos/demo-live/DemoController.tsx | 56 + .../demos/demo-live/DemoLive.tsx | 14 + .../demo-live/DemoLiveContent.module.css | 72 + .../demos/demo-live/DemoLiveContent.tsx | 89 + .../demos/demo-live/createLiveDemo.ts | 29 + .../demo-live/demo-basic/CheckboxBasic.tsx | 11 + .../demos/demo-live/demo-basic/index.ts | 7 + .../demos/demo-live/index.ts | 7 + .../code-controller-context/page.mdx | 723 ++++++ .../code-highlighter/demos/Code.tsx | 18 + .../demos/CodeContent.module.css | 53 + .../code-highlighter/demos/CodeContent.tsx | 84 + .../demos/DemoContent.module.css | 81 + .../code-highlighter/demos/DemoContent.tsx | 87 + .../demos/DemoTitle.module.css | 7 + .../code-highlighter/demos/DemoTitle.tsx | 14 + .../code-highlight-idle/IdleHighlightCode.tsx | 89 + .../demos/code-highlight-idle/index.ts | 11 + .../code-transformed/TransformedCode.tsx | 164 ++ .../demos/code-transformed/index.ts | 11 + .../code-highlighter/demos/code/BasicCode.tsx | 5 + .../code-highlighter/demos/code/index.ts | 7 + .../code-highlighter/demos/createDemo.ts | 29 + .../demo-fallback/AsyncButton.module.css | 30 + .../demos/demo-fallback/AsyncButton.tsx | 30 + .../CustomContentLoading.module.css | 47 + .../demo-fallback/CustomContentLoading.tsx | 19 + .../demo-fallback/FallbackDemo.module.css | 17 + .../demos/demo-fallback/FallbackDemo.tsx | 41 + .../demos/demo-fallback/index.ts | 11 + .../demos/demo-hardcoded/HardcodedDemo.tsx | 173 ++ .../demos/demo-hardcoded/index.ts | 11 + .../demo-pages-router/PagesRouterDemo.tsx | 214 ++ .../demos/demo-pages-router/index.ts | 14 + .../demo-server-loaded/ServerLoadedDemo.tsx | 315 +++ .../demos/demo-server-loaded/index.ts | 7 + .../css-modules/CheckboxRed.module.css | 3 + .../demo-default/css-modules/CheckboxRed.tsx | 8 + .../demos/demo-variants/demo-default/index.ts | 5 + .../demo-default/tailwind/CheckboxRed.tsx | 6 + .../demos/demo-variants/index.ts | 6 + .../demos/demo-variants/mock-tailwind.css | 3 + .../demos/demo/demo-basic/CheckboxBasic.tsx | 6 + .../demos/demo/demo-basic/index.ts | 4 + .../code-highlighter/demos/demo/index.ts | 7 + .../demos/example/BasicExampleWrapper.tsx | 6 + .../demos/example/VariantsExampleWrapper.tsx | 6 + .../demos/example/demo-basic/SimpleButton.tsx | 6 + .../demos/example/demo-basic/index.ts | 14 + .../example/demo-variants/BlueButton.tsx | 4 + .../demos/example/demo-variants/RedButton.tsx | 4 + .../demos/example/demo-variants/index.ts | 18 + .../code-highlighter/demos/example/index.ts | 15 + .../app/components/code-highlighter/page.mdx | 583 +++++ .../demos/base/HighlightProvider.tsx | 10 + .../highlight-provider/demos/base/index.ts | 13 + .../demos/fetch/HighlightProvider.tsx | 39 + .../highlight-provider/demos/fetch/index.ts | 13 + .../components/highlight-provider/page.mdx | 5 + .../docs-infra/docs/app/components/page.mdx | 7 + .../docs-infra/docs/app/contributing/page.mdx | 14 + .../functions/abstract-create-demo/page.mdx | 68 + .../page.mdx | 305 +++ .../docs/app/functions/loader-utils/page.mdx | 362 +++ .../docs-infra/docs/app/functions/page.mdx | 23 + .../functions/transform-html-code/page.mdx | 181 ++ .../transform-markdown-code/page.mdx | 473 ++++ packages/docs-infra/docs/app/hooks/page.mdx | 5 + .../docs/app/hooks/use-code/page.mdx | 544 ++++ .../docs/app/hooks/use-demo/page.mdx | 621 +++++ .../docs-infra/docs/app/layout.module.css | 105 + packages/docs-infra/docs/app/layout.tsx | 36 + packages/docs-infra/docs/app/page.mdx | 61 + .../Blockquote/Blockquote.module.css | 67 + .../docs/components/Blockquote/Blockquote.tsx | 74 + .../docs/components/Blockquote/index.ts | 1 + .../docs/components/Checkbox/index.module.css | 49 + .../docs/components/Checkbox/index.tsx | 34 + .../docs-infra/docs/components/Code/index.ts | 2 + .../docs/components/CodeContent/index.ts | 2 + .../CopyButton/CopyButton.module.css | 25 + .../docs/components/CopyButton/CopyButton.tsx | 44 + .../docs/components/CopyButton/index.ts | 1 + .../docs/components/DemoContent/index.ts | 2 + .../FileConventions/FileConventions.tsx | 17 + .../docs/components/FileConventions/index.ts | 1 + .../LabeledSwitch/LabeledSwitch.module.css | 67 + .../LabeledSwitch/LabeledSwitch.tsx | 64 + .../docs/components/LabeledSwitch/index.ts | 1 + .../docs/components/Pre/Pre.module.css | 13 + .../docs-infra/docs/components/Pre/Pre.tsx | 25 + .../docs-infra/docs/components/Pre/index.ts | 1 + .../docs/components/Select/Select.module.css | 212 ++ .../docs/components/Select/Select.tsx | 63 + .../docs/components/Select/index.ts | 1 + .../docs/components/Tabs/Tabs.module.css | 108 + .../docs-infra/docs/components/Tabs/Tabs.tsx | 64 + .../docs-infra/docs/components/Tabs/index.ts | 1 + packages/docs-infra/docs/components/index.ts | 1 + packages/docs-infra/docs/eslint.config.mjs | 14 + .../docs/functions/createDemo/index.ts | 2 + packages/docs-infra/docs/mdx-components.tsx | 11 + packages/docs-infra/docs/next.config.mjs | 35 + packages/docs-infra/docs/package.json | 35 + packages/docs-infra/docs/tsconfig.json | 28 + packages/docs-infra/package.json | 44 +- packages/docs-infra/scripts/build.mjs | 34 +- packages/docs-infra/scripts/buildTypes.mts | 15 +- .../docs-infra/scripts/copyFilesUtils.mjs | 12 +- .../CodeControllerContext.tsx | 29 + .../src/CodeControllerContext/index.ts | 1 + .../CodeExternalsContext.tsx | 16 + .../src/CodeExternalsContext/index.ts | 1 + .../src/CodeHighlighter/CodeHighlighter.tsx | 447 ++++ .../CodeHighlighter/CodeHighlighterClient.tsx | 489 ++++ .../CodeHighlighterContext.tsx | 33 + .../CodeHighlighterFallbackContext.tsx | 23 + .../CodeHighlighter/applyTransform.test.ts | 923 +++++++ .../src/CodeHighlighter/applyTransform.ts | 81 + .../codeToFallbackProps.test.ts | 230 ++ .../CodeHighlighter/codeToFallbackProps.ts | 83 + .../docs-infra/src/CodeHighlighter/errors.ts | 1 + .../src/CodeHighlighter/hasAllVariants.ts | 46 + .../docs-infra/src/CodeHighlighter/index.ts | 4 + .../CodeHighlighter/loadFallbackCode.test.ts | 1103 +++++++++ .../src/CodeHighlighter/loadFallbackCode.ts | 415 ++++ .../src/CodeHighlighter/loadVariant.test.ts | 2206 +++++++++++++++++ .../src/CodeHighlighter/loadVariant.ts | 723 ++++++ .../CodeHighlighter/maybeInitialData.test.ts | 267 ++ .../src/CodeHighlighter/maybeInitialData.ts | 122 + .../src/CodeHighlighter/parseCode.test.ts | 432 ++++ .../src/CodeHighlighter/parseCode.ts | 147 ++ .../parseControlledCode.test.ts | 309 +++ .../CodeHighlighter/parseControlledCode.ts | 88 + .../src/CodeHighlighter/transformCode.test.ts | 316 +++ .../src/CodeHighlighter/transformCode.ts | 222 ++ .../transformParsedSource.test.ts | 140 ++ .../CodeHighlighter/transformParsedSource.ts | 37 + .../CodeHighlighter/transformSource.test.ts | 451 ++++ .../src/CodeHighlighter/transformSource.ts | 67 + .../docs-infra/src/CodeHighlighter/types.ts | 158 ++ .../src/CodeProvider/CodeContext.tsx | 27 + .../src/CodeProvider/CodeProvider.tsx | 70 + packages/docs-infra/src/CodeProvider/index.ts | 1 + .../abstractCreateDemo/abstractCreateDemo.tsx | 129 + .../src/abstractCreateDemo/index.ts | 1 + .../src/getFileConventions/fileConventions.ts | 3 + .../getFileConventions/getFileConventions.ts | 5 + .../src/getFileConventions/index.ts | 1 + .../docs-infra/src/hastUtils/hastUtils.tsx | 69 + packages/docs-infra/src/hastUtils/index.ts | 1 + .../emitExternalsProvider.test.ts | 345 +++ .../emitExternalsProvider.ts | 325 +++ .../generateExternalsProvider.test.ts | 1144 +++++++++ .../generateExternalsProvider.ts | 268 ++ .../loadPrecomputedCodeHighlighter/index.ts | 5 + .../loadPrecomputedCodeHighlighter.ts | 195 ++ .../parseCreateFactoryCall.test.ts | 913 +++++++ .../parseCreateFactoryCall.ts | 547 ++++ .../parseFunctionParameters.test.ts | 155 ++ .../parseFunctionParameters.ts | 189 ++ .../replacePrecomputeValue.test.ts | 1381 +++++++++++ .../replacePrecomputeValue.ts | 92 + .../src/loadServerCodeMeta/index.ts | 1 + .../loadServerCodeMeta/loadServerCodeMeta.ts | 74 + .../docs-infra/src/loadServerSource/index.ts | 1 + .../src/loadServerSource/loadServerSource.ts | 109 + .../loaderUtils/externalsToPackages.test.ts | 180 ++ .../src/loaderUtils/externalsToPackages.ts | 48 + .../extractNameAndSlugFromUrl.test.ts | 407 +++ .../loaderUtils/extractNameAndSlugFromUrl.ts | 170 ++ .../loaderUtils/getFileNameFromUrl.test.ts | 122 + .../src/loaderUtils/getFileNameFromUrl.ts | 28 + packages/docs-infra/src/loaderUtils/index.ts | 7 + .../src/loaderUtils/integration.test.ts | 378 +++ .../src/loaderUtils/mergeExternals.test.ts | 306 +++ .../src/loaderUtils/mergeExternals.ts | 61 + .../src/loaderUtils/optimization.test.ts | 130 + .../src/loaderUtils/parseImports.test.ts | 457 ++++ .../src/loaderUtils/parseImports.ts | 291 +++ .../processRelativeImports.test.ts | 215 ++ .../src/loaderUtils/processRelativeImports.ts | 308 +++ .../src/loaderUtils/resolveModulePath.test.ts | 669 +++++ .../src/loaderUtils/resolveModulePath.ts | 697 ++++++ .../loaderUtils/resolveModulePathWithFs.ts | 101 + .../src/loaderUtils/rewriteImports.test.ts | 128 + .../src/loaderUtils/rewriteImports.ts | 43 + .../docs-infra/src/parseSource/grammars.ts | 37 + packages/docs-infra/src/parseSource/index.ts | 1 + .../src/parseSource/parseSource.test.ts | 96 + .../docs-infra/src/parseSource/parseSource.ts | 39 + .../docs-infra/src/transformHtmlCode/index.ts | 5 + .../transformHtmlCode.test.ts | 321 +++ .../transformHtmlCode/transformHtmlCode.ts | 269 ++ .../index.ts | 5 + .../integration.test.ts | 56 + ...ransformMarkdownBlockquoteCallouts.test.ts | 161 ++ .../transformMarkdownBlockquoteCallouts.ts | 64 + .../src/transformMarkdownCode/index.ts | 5 + .../transformMarkdownCode.test.ts | 409 +++ .../transformMarkdownCode.ts | 545 ++++ .../transformMarkdownRelativePaths/index.ts | 5 + .../transformMarkdownRelativePaths.ts | 38 + .../transformTypescriptToJavascript/index.ts | 1 + .../removeTypes.ts | 124 + .../transformTypescriptToJavascript.ts | 16 + packages/docs-infra/src/useCode/index.ts | 1 + packages/docs-infra/src/useCode/useCode.ts | 158 ++ .../src/useCode/useCodeSubHooks.test.ts | 215 ++ .../src/useCode/useCodeUtils.test.ts | 636 +++++ .../docs-infra/src/useCode/useCodeUtils.ts | 256 ++ .../src/useCode/useCopyFunctionality.ts | 42 + .../src/useCode/useFileNavigation.test.ts | 779 ++++++ .../src/useCode/useFileNavigation.ts | 490 ++++ .../src/useCode/useSourceEditing.ts | 55 + .../useCode/useTransformManagement.test.ts | 552 +++++ .../src/useCode/useTransformManagement.ts | 76 + packages/docs-infra/src/useCode/useUIState.ts | 25 + .../src/useCode/useVariantSelection.test.ts | 291 +++ .../src/useCode/useVariantSelection.ts | 77 + packages/docs-infra/src/useCopier/index.ts | 8 +- .../src/useDemo/createCodeSandbox.test.ts | 132 + .../src/useDemo/createCodeSandbox.ts | 55 + .../src/useDemo/createStackBlitz.test.ts | 206 ++ .../src/useDemo/createStackBlitz.ts | 45 + .../docs-infra/src/useDemo/examineVariant.ts | 164 ++ .../src/useDemo/exportVariant.test.ts | 463 ++++ .../docs-infra/src/useDemo/exportVariant.ts | 441 ++++ .../src/useDemo/exportVariantAsCra.test.ts | 245 ++ .../src/useDemo/exportVariantAsCra.ts | 55 + .../src/useDemo/flattenVariant.test.ts | 386 +++ .../docs-infra/src/useDemo/flattenVariant.ts | 230 ++ packages/docs-infra/src/useDemo/index.ts | 116 +- packages/docs-infra/src/useDemo/useDemo.ts | 196 ++ .../docs-infra/src/useLocalStorage/index.ts | 1 + .../useLocalStorage/useLocalStorage.test.ts | 213 ++ .../src/useLocalStorage/useLocalStorage.ts | 230 ++ packages/docs-infra/src/useOnHydrate/index.ts | 1 + .../src/useOnHydrate/useOnHydrate.ts | 15 + packages/docs-infra/src/useOnIdle/index.ts | 1 + .../docs-infra/src/useOnIdle/useOnIdle.ts | 37 + packages/docs-infra/tsconfig.build.json | 2 +- packages/docs-infra/tsconfig.json | 1 + pnpm-lock.yaml | 1957 +++++++++++++-- pnpm-workspace.yaml | 1 + tsconfig.json | 2 + 258 files changed, 38710 insertions(+), 332 deletions(-) create mode 100644 .vscode/extensions.json create mode 100644 packages/docs-infra/docs/.gitignore create mode 100644 packages/docs-infra/docs/README.md create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeController.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditor.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoController.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLive.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/createLiveDemo.ts create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/demo-basic/CheckboxBasic.tsx create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/demo-basic/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-controller-context/page.mdx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/Code.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/CodeContent.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/CodeContent.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/DemoContent.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/DemoContent.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/DemoTitle.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/DemoTitle.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code-highlight-idle/IdleHighlightCode.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code-highlight-idle/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code-transformed/TransformedCode.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code-transformed/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code/BasicCode.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/code/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/createDemo.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/AsyncButton.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/AsyncButton.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/CustomContentLoading.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/CustomContentLoading.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/FallbackDemo.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/FallbackDemo.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-fallback/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-hardcoded/HardcodedDemo.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-hardcoded/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-pages-router/PagesRouterDemo.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-pages-router/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-server-loaded/ServerLoadedDemo.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-server-loaded/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.module.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/demo-default/css-modules/CheckboxRed.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/demo-default/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/demo-default/tailwind/CheckboxRed.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo-variants/mock-tailwind.css create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo/demo-basic/CheckboxBasic.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo/demo-basic/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/demo/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/BasicExampleWrapper.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/VariantsExampleWrapper.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/demo-basic/SimpleButton.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/demo-basic/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/demo-variants/BlueButton.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/demo-variants/RedButton.tsx create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/demo-variants/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/demos/example/index.ts create mode 100644 packages/docs-infra/docs/app/components/code-highlighter/page.mdx create mode 100644 packages/docs-infra/docs/app/components/highlight-provider/demos/base/HighlightProvider.tsx create mode 100644 packages/docs-infra/docs/app/components/highlight-provider/demos/base/index.ts create mode 100644 packages/docs-infra/docs/app/components/highlight-provider/demos/fetch/HighlightProvider.tsx create mode 100644 packages/docs-infra/docs/app/components/highlight-provider/demos/fetch/index.ts create mode 100644 packages/docs-infra/docs/app/components/highlight-provider/page.mdx create mode 100644 packages/docs-infra/docs/app/components/page.mdx create mode 100644 packages/docs-infra/docs/app/contributing/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/abstract-create-demo/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/load-precomputed-code-highlighter/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/loader-utils/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/transform-html-code/page.mdx create mode 100644 packages/docs-infra/docs/app/functions/transform-markdown-code/page.mdx create mode 100644 packages/docs-infra/docs/app/hooks/page.mdx create mode 100644 packages/docs-infra/docs/app/hooks/use-code/page.mdx create mode 100644 packages/docs-infra/docs/app/hooks/use-demo/page.mdx create mode 100644 packages/docs-infra/docs/app/layout.module.css create mode 100644 packages/docs-infra/docs/app/layout.tsx create mode 100644 packages/docs-infra/docs/app/page.mdx create mode 100644 packages/docs-infra/docs/components/Blockquote/Blockquote.module.css create mode 100644 packages/docs-infra/docs/components/Blockquote/Blockquote.tsx create mode 100644 packages/docs-infra/docs/components/Blockquote/index.ts create mode 100644 packages/docs-infra/docs/components/Checkbox/index.module.css create mode 100644 packages/docs-infra/docs/components/Checkbox/index.tsx create mode 100644 packages/docs-infra/docs/components/Code/index.ts create mode 100644 packages/docs-infra/docs/components/CodeContent/index.ts create mode 100644 packages/docs-infra/docs/components/CopyButton/CopyButton.module.css create mode 100644 packages/docs-infra/docs/components/CopyButton/CopyButton.tsx create mode 100644 packages/docs-infra/docs/components/CopyButton/index.ts create mode 100644 packages/docs-infra/docs/components/DemoContent/index.ts create mode 100644 packages/docs-infra/docs/components/FileConventions/FileConventions.tsx create mode 100644 packages/docs-infra/docs/components/FileConventions/index.ts create mode 100644 packages/docs-infra/docs/components/LabeledSwitch/LabeledSwitch.module.css create mode 100644 packages/docs-infra/docs/components/LabeledSwitch/LabeledSwitch.tsx create mode 100644 packages/docs-infra/docs/components/LabeledSwitch/index.ts create mode 100644 packages/docs-infra/docs/components/Pre/Pre.module.css create mode 100644 packages/docs-infra/docs/components/Pre/Pre.tsx create mode 100644 packages/docs-infra/docs/components/Pre/index.ts create mode 100644 packages/docs-infra/docs/components/Select/Select.module.css create mode 100644 packages/docs-infra/docs/components/Select/Select.tsx create mode 100644 packages/docs-infra/docs/components/Select/index.ts create mode 100644 packages/docs-infra/docs/components/Tabs/Tabs.module.css create mode 100644 packages/docs-infra/docs/components/Tabs/Tabs.tsx create mode 100644 packages/docs-infra/docs/components/Tabs/index.ts create mode 100644 packages/docs-infra/docs/components/index.ts create mode 100644 packages/docs-infra/docs/eslint.config.mjs create mode 100644 packages/docs-infra/docs/functions/createDemo/index.ts create mode 100644 packages/docs-infra/docs/mdx-components.tsx create mode 100644 packages/docs-infra/docs/next.config.mjs create mode 100644 packages/docs-infra/docs/package.json create mode 100644 packages/docs-infra/docs/tsconfig.json create mode 100644 packages/docs-infra/src/CodeControllerContext/CodeControllerContext.tsx create mode 100644 packages/docs-infra/src/CodeControllerContext/index.ts create mode 100644 packages/docs-infra/src/CodeExternalsContext/CodeExternalsContext.tsx create mode 100644 packages/docs-infra/src/CodeExternalsContext/index.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/CodeHighlighter.tsx create mode 100644 packages/docs-infra/src/CodeHighlighter/CodeHighlighterClient.tsx create mode 100644 packages/docs-infra/src/CodeHighlighter/CodeHighlighterContext.tsx create mode 100644 packages/docs-infra/src/CodeHighlighter/CodeHighlighterFallbackContext.tsx create mode 100644 packages/docs-infra/src/CodeHighlighter/applyTransform.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/applyTransform.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/codeToFallbackProps.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/codeToFallbackProps.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/errors.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/hasAllVariants.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/index.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/loadFallbackCode.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/loadFallbackCode.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/loadVariant.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/loadVariant.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/maybeInitialData.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/maybeInitialData.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/parseCode.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/parseCode.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/parseControlledCode.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/parseControlledCode.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformCode.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformCode.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformParsedSource.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformParsedSource.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformSource.test.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/transformSource.ts create mode 100644 packages/docs-infra/src/CodeHighlighter/types.ts create mode 100644 packages/docs-infra/src/CodeProvider/CodeContext.tsx create mode 100644 packages/docs-infra/src/CodeProvider/CodeProvider.tsx create mode 100644 packages/docs-infra/src/CodeProvider/index.ts create mode 100644 packages/docs-infra/src/abstractCreateDemo/abstractCreateDemo.tsx create mode 100644 packages/docs-infra/src/abstractCreateDemo/index.ts create mode 100644 packages/docs-infra/src/getFileConventions/fileConventions.ts create mode 100644 packages/docs-infra/src/getFileConventions/getFileConventions.ts create mode 100644 packages/docs-infra/src/getFileConventions/index.ts create mode 100644 packages/docs-infra/src/hastUtils/hastUtils.tsx create mode 100644 packages/docs-infra/src/hastUtils/index.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/emitExternalsProvider.test.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/emitExternalsProvider.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/generateExternalsProvider.test.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/generateExternalsProvider.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/index.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/loadPrecomputedCodeHighlighter.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/parseCreateFactoryCall.test.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/parseCreateFactoryCall.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/parseFunctionParameters.test.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/parseFunctionParameters.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/replacePrecomputeValue.test.ts create mode 100644 packages/docs-infra/src/loadPrecomputedCodeHighlighter/replacePrecomputeValue.ts create mode 100644 packages/docs-infra/src/loadServerCodeMeta/index.ts create mode 100644 packages/docs-infra/src/loadServerCodeMeta/loadServerCodeMeta.ts create mode 100644 packages/docs-infra/src/loadServerSource/index.ts create mode 100644 packages/docs-infra/src/loadServerSource/loadServerSource.ts create mode 100644 packages/docs-infra/src/loaderUtils/externalsToPackages.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/externalsToPackages.ts create mode 100644 packages/docs-infra/src/loaderUtils/extractNameAndSlugFromUrl.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/extractNameAndSlugFromUrl.ts create mode 100644 packages/docs-infra/src/loaderUtils/getFileNameFromUrl.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/getFileNameFromUrl.ts create mode 100644 packages/docs-infra/src/loaderUtils/index.ts create mode 100644 packages/docs-infra/src/loaderUtils/integration.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/mergeExternals.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/mergeExternals.ts create mode 100644 packages/docs-infra/src/loaderUtils/optimization.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/parseImports.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/parseImports.ts create mode 100644 packages/docs-infra/src/loaderUtils/processRelativeImports.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/processRelativeImports.ts create mode 100644 packages/docs-infra/src/loaderUtils/resolveModulePath.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/resolveModulePath.ts create mode 100644 packages/docs-infra/src/loaderUtils/resolveModulePathWithFs.ts create mode 100644 packages/docs-infra/src/loaderUtils/rewriteImports.test.ts create mode 100644 packages/docs-infra/src/loaderUtils/rewriteImports.ts create mode 100644 packages/docs-infra/src/parseSource/grammars.ts create mode 100644 packages/docs-infra/src/parseSource/index.ts create mode 100644 packages/docs-infra/src/parseSource/parseSource.test.ts create mode 100644 packages/docs-infra/src/parseSource/parseSource.ts create mode 100644 packages/docs-infra/src/transformHtmlCode/index.ts create mode 100644 packages/docs-infra/src/transformHtmlCode/transformHtmlCode.test.ts create mode 100644 packages/docs-infra/src/transformHtmlCode/transformHtmlCode.ts create mode 100644 packages/docs-infra/src/transformMarkdownBlockquoteCallouts/index.ts create mode 100644 packages/docs-infra/src/transformMarkdownBlockquoteCallouts/integration.test.ts create mode 100644 packages/docs-infra/src/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.test.ts create mode 100644 packages/docs-infra/src/transformMarkdownBlockquoteCallouts/transformMarkdownBlockquoteCallouts.ts create mode 100644 packages/docs-infra/src/transformMarkdownCode/index.ts create mode 100644 packages/docs-infra/src/transformMarkdownCode/transformMarkdownCode.test.ts create mode 100644 packages/docs-infra/src/transformMarkdownCode/transformMarkdownCode.ts create mode 100644 packages/docs-infra/src/transformMarkdownRelativePaths/index.ts create mode 100644 packages/docs-infra/src/transformMarkdownRelativePaths/transformMarkdownRelativePaths.ts create mode 100644 packages/docs-infra/src/transformTypescriptToJavascript/index.ts create mode 100644 packages/docs-infra/src/transformTypescriptToJavascript/removeTypes.ts create mode 100644 packages/docs-infra/src/transformTypescriptToJavascript/transformTypescriptToJavascript.ts create mode 100644 packages/docs-infra/src/useCode/index.ts create mode 100644 packages/docs-infra/src/useCode/useCode.ts create mode 100644 packages/docs-infra/src/useCode/useCodeSubHooks.test.ts create mode 100644 packages/docs-infra/src/useCode/useCodeUtils.test.ts create mode 100644 packages/docs-infra/src/useCode/useCodeUtils.ts create mode 100644 packages/docs-infra/src/useCode/useCopyFunctionality.ts create mode 100644 packages/docs-infra/src/useCode/useFileNavigation.test.ts create mode 100644 packages/docs-infra/src/useCode/useFileNavigation.ts create mode 100644 packages/docs-infra/src/useCode/useSourceEditing.ts create mode 100644 packages/docs-infra/src/useCode/useTransformManagement.test.ts create mode 100644 packages/docs-infra/src/useCode/useTransformManagement.ts create mode 100644 packages/docs-infra/src/useCode/useUIState.ts create mode 100644 packages/docs-infra/src/useCode/useVariantSelection.test.ts create mode 100644 packages/docs-infra/src/useCode/useVariantSelection.ts create mode 100644 packages/docs-infra/src/useDemo/createCodeSandbox.test.ts create mode 100644 packages/docs-infra/src/useDemo/createCodeSandbox.ts create mode 100644 packages/docs-infra/src/useDemo/createStackBlitz.test.ts create mode 100644 packages/docs-infra/src/useDemo/createStackBlitz.ts create mode 100644 packages/docs-infra/src/useDemo/examineVariant.ts create mode 100644 packages/docs-infra/src/useDemo/exportVariant.test.ts create mode 100644 packages/docs-infra/src/useDemo/exportVariant.ts create mode 100644 packages/docs-infra/src/useDemo/exportVariantAsCra.test.ts create mode 100644 packages/docs-infra/src/useDemo/exportVariantAsCra.ts create mode 100644 packages/docs-infra/src/useDemo/flattenVariant.test.ts create mode 100644 packages/docs-infra/src/useDemo/flattenVariant.ts create mode 100644 packages/docs-infra/src/useDemo/useDemo.ts create mode 100644 packages/docs-infra/src/useLocalStorage/index.ts create mode 100644 packages/docs-infra/src/useLocalStorage/useLocalStorage.test.ts create mode 100644 packages/docs-infra/src/useLocalStorage/useLocalStorage.ts create mode 100644 packages/docs-infra/src/useOnHydrate/index.ts create mode 100644 packages/docs-infra/src/useOnHydrate/useOnHydrate.ts create mode 100644 packages/docs-infra/src/useOnIdle/index.ts create mode 100644 packages/docs-infra/src/useOnIdle/useOnIdle.ts diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 000000000..57320537d --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["unifiedjs.vscode-mdx", "dbaeumer.vscode-eslint"] +} diff --git a/README.md b/README.md index cbd72a850..acb40f062 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,13 @@ Internal public Toolpad apps that run the operations of MUI, built using https:/ - Hosting: https://app.netlify.com/sites/mui-frontend-public/overview - [Docs](./apps/code-infra-dashboard/#readme) +## Packages + +### [docs-infra](./packages/docs-infra/) + +- Folder: `/packages/docs-infra/` +- [Docs](./packages/docs-infra/README.md) + ## Versioning Steps: diff --git a/package.json b/package.json index 23fadb0d0..ca8384b3f 100644 --- a/package.json +++ b/package.json @@ -8,11 +8,15 @@ "prettier": "pretty-quick --ignore-path .lintignore", "prettier:all": "prettier --write . --ignore-path .lintignore", "update-netlify-ignore": "node ./update-netlify-ignore.js @app/code-infra-dashboard", - "test": "vitest", + "test": "vitest --run", + "test:watch": "vitest", "typescript": "tsc --build --verbose", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --no-private", "release:build": "pnpm -r -F \"./packages/*\" run build", - "clean": "pnpm -r exec rm -rf build" + "clean": "pnpm -r exec rm -rf build", + "docsI:dev": "pnpm -F \"./packages/docs-infra/docs\" run dev", + "docsI:build": "pnpm -F \"./packages/docs-infra\" run build", + "docsI:test": "pnpm -F \"./packages/docs-infra\" run test" }, "pnpm": { "packageExtensions": { @@ -40,7 +44,9 @@ "@types/semver": "^7.7.0", "@typescript-eslint/eslint-plugin": "7.12.0", "@typescript-eslint/parser": "^8.35.0", + "@vitest/coverage-v8": "^3.2.4", "eslint": "^9.29.0", + "jsdom": "^26.1.0", "lerna": "^8.2.2", "prettier": "^3.5.3", "pretty-quick": "^4.2.2", diff --git a/packages/code-infra/package.json b/packages/code-infra/package.json index e422a2533..96c1b9368 100644 --- a/packages/code-infra/package.json +++ b/packages/code-infra/package.json @@ -23,7 +23,8 @@ }, "scripts": { "typescript": "tsc -p tsconfig.json", - "test": "pnpm -w test --project @mui/internal-code-infra" + "test": "pnpm -w test --project @mui/internal-code-infra", + "test:watch": "pnpm -w test:watch --project @mui/internal-code-infra" }, "dependencies": { "@argos-ci/core": "^3.2.0", diff --git a/packages/docs-infra/README.md b/packages/docs-infra/README.md index b4efa268b..d3177c318 100644 --- a/packages/docs-infra/README.md +++ b/packages/docs-infra/README.md @@ -14,4 +14,6 @@ npm install @mui/internal-docs-infra ## Documentation -We have no documentation for these components. +This is stored in the `docs` directory. + +[Read More](./docs/README.md) diff --git a/packages/docs-infra/docs/.gitignore b/packages/docs-infra/docs/.gitignore new file mode 100644 index 000000000..f8c23ef4e --- /dev/null +++ b/packages/docs-infra/docs/.gitignore @@ -0,0 +1,44 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# docs-infra generated files +/generated/demo-externals diff --git a/packages/docs-infra/docs/README.md b/packages/docs-infra/docs/README.md new file mode 100644 index 000000000..47f287cb1 --- /dev/null +++ b/packages/docs-infra/docs/README.md @@ -0,0 +1,9 @@ +# MUI Docs-Infra Docs + +This package contains the documentation for the MUI Docs-Infra project, which is responsible for the infrastructure and tooling used in the various MUI documentation sites. + +[Read the docs](./app/page.mdx) + +For the most immersive experience, we recommend opening this documentation in VSCode, starting with this README and working deeper into the documentation by navigating through the links provided (ctrl + click). You should have [the MDX extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx) installed to view the documentation properly. + +To see demos live, run `pnpm run dev` and open diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeController.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeController.tsx new file mode 100644 index 000000000..0d7e81c40 --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeController.tsx @@ -0,0 +1,15 @@ +'use client'; + +import * as React from 'react'; +import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext'; +import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter'; + +export function CodeController({ children }: { children: React.ReactNode }) { + const [code, setCode] = React.useState(undefined); + + return ( + + {children} + + ); +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditor.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditor.tsx new file mode 100644 index 000000000..300abb20d --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditor.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { CodeHighlighter } from '@mui/internal-docs-infra/CodeHighlighter'; +import { createParseSource } from '@mui/internal-docs-infra/parseSource'; + +import { CodeController } from './CodeController'; +import { CodeEditorContent } from './CodeEditorContent'; +import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider'; + +const initialCode = { + Default: { + url: 'file://live-example.js', + fileName: 'live-example.js', + source: `// Welcome to the live code editor! +function greet(name) { + return \`Hello, \${name}!\`; +} +`, + }, +}; + +export function CodeEditor() { + return ( + + + + + + ); +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css new file mode 100644 index 000000000..26263573a --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.module.css @@ -0,0 +1,37 @@ +.container { + border: 1px solid #d0cdd7; + border-radius: 8px; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 6px 12px; + border-bottom: 1px solid #d0cdd7; +} + +.name { + color: #65636d; + font-size: 13px; + font-family: var(--font-geist-mono); +} + +.headerActions { + display: flex; + align-items: center; + gap: 8px; +} + +.switchContainer { + display: flex; +} +.code { + padding: 6px; +} + +.codeBlock { + margin: 0; + padding: 6px; + overflow-x: auto; +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx new file mode 100644 index 000000000..8b49a5229 --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx @@ -0,0 +1,52 @@ +'use client'; + +import * as React from 'react'; +import { useEditable } from 'use-editable'; +import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter'; +import { useCode } from '@mui/internal-docs-infra/useCode'; +import { LabeledSwitch } from '@/components/LabeledSwitch'; +import styles from './CodeEditorContent.module.css'; + +import '@wooorm/starry-night/style/light'; // load the light theme for syntax highlighting + +export function CodeEditorContent(props: ContentProps<{}>) { + const code = useCode(props); + + const hasJsTransform = code.availableTransforms.includes('js'); + const isJsSelected = code.selectedTransform === 'js'; + const labels = { false: 'TS', true: 'JS' }; + const toggleJs = React.useCallback( + (checked: boolean) => { + code.selectTransform(checked ? 'js' : null); + }, + [code], + ); + + const onInput = React.useCallback((text: string) => { + code.setSource?.(text); + }, []); + + const editorRef = React.useRef(null); + + useEditable(editorRef, onInput, { indentation: 2 }); + + return ( +
+
+ {code.selectedFileName} +
+ {hasJsTransform && ( +
+ +
+ )} +
+
+
+ 
+          {code.selectedFile}
+
+
+
+ ); +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/index.ts b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/index.ts new file mode 100644 index 000000000..be190b299 --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/code-editor/index.ts @@ -0,0 +1,7 @@ +import { createDemo } from '@/functions/createDemo'; +import { CodeEditor } from './CodeEditor'; + +export const DemoCodeControllerCodeEditor = createDemo(import.meta.url, CodeEditor, { + name: 'Live Code Editor', + slug: 'live-code-editor', +}); diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoController.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoController.tsx new file mode 100644 index 000000000..c78c9ed5c --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoController.tsx @@ -0,0 +1,56 @@ +'use client'; + +import * as React from 'react'; +import { useRunner } from 'react-runner'; +import { CodeControllerContext } from '@mui/internal-docs-infra/CodeControllerContext'; +import type { ControlledCode } from '@mui/internal-docs-infra/CodeHighlighter'; +import { useCodeExternals } from '@mui/internal-docs-infra/CodeExternalsContext'; + +function Runner({ code }: { code: string }) { + const externalsContext = useCodeExternals(); + const scope = React.useMemo(() => { + let externals = externalsContext?.externals; + if (!externals) { + externals = { imports: { react: React } }; + } + + return { import: { ...externals } }; + }, [externalsContext]); + + const { element, error } = useRunner({ code, scope }); + + if (error) { + return
{error}
; + } + + return element; +} + +export function DemoController({ children }: { children: React.ReactNode }) { + const [code, setCode] = React.useState(undefined); + + const components = React.useMemo( + () => + code + ? Object.keys(code).reduce( + (acc, cur) => { + const source = code[cur]?.source; + if (!source) { + return acc; + } + + acc[cur] = ; + return acc; + }, + {} as Record, + ) + : undefined, + [code, setCode], + ); + + return ( + + {children} + + ); +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLive.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLive.tsx new file mode 100644 index 000000000..a43e6bd0e --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLive.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import { DemoController } from './DemoController'; +import { CodeProvider } from '@mui/internal-docs-infra/CodeProvider'; +import { DemoCheckboxBasic } from './demo-basic'; + +export function DemoLive() { + return ( + + + + + + ); +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css new file mode 100644 index 000000000..dfc66f576 --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.module.css @@ -0,0 +1,72 @@ +.container { + border: 1px solid #d0cdd7; + border-radius: 8px; +} + +.demoSection { + padding: 24px; +} + +.codeSection { + border-top: 1px solid #d0cdd7; +} + +.header { + border-bottom: 1px solid #d0cdd7; + height: 48px; + position: relative; +} + +.headerContainer { + position: absolute; + width: 100%; + display: flex; + justify-content: space-between; + gap: 8px; +} + +.headerContainer:before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 1px; + margin: -1px; + background-color: #d0cdd7; +} + +.headerActions { + display: flex; + align-items: center; + gap: 8px; + padding-right: 8px; + height: 48px; +} + +.tabContainer { + display: flex; + align-items: center; + gap: 8px; + margin-left: -1px; + padding-bottom: 2px; + overflow-x: auto; +} + +.switchContainer { + display: flex; +} + +.switchContainerHidden { + display: none; +} + +.code { + padding: 10px 6px; +} + +.codeBlock { + margin: 0; + padding: 6px; + overflow-x: auto; +} diff --git a/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx new file mode 100644 index 000000000..368e2a5d1 --- /dev/null +++ b/packages/docs-infra/docs/app/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx @@ -0,0 +1,89 @@ +'use client'; + +import * as React from 'react'; +import { useEditable } from 'use-editable'; +import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter'; +import { useDemo } from '@mui/internal-docs-infra/useDemo'; +import { LabeledSwitch } from '@/components/LabeledSwitch'; +import { Tabs } from '@/components/Tabs'; +import styles from './DemoLiveContent.module.css'; + +import '@wooorm/starry-night/style/light'; +import Select from '@/components/Select/Select'; + +const variantNames: Record = { + CssModules: 'CSS Modules', +}; + +export function DemoLiveContent(props: ContentProps<{}>) { + const demo = useDemo(props); + + const hasJsTransform = demo.availableTransforms.includes('js'); + const isJsSelected = demo.selectedTransform === 'js'; + + const labels = { false: 'TS', true: 'JS' }; + const toggleJs = React.useCallback( + (checked: boolean) => { + demo.selectTransform(checked ? 'js' : null); + }, + [demo], + ); + + const tabs = React.useMemo( + () => demo.files.map(({ name }) => ({ id: name, name })), + [demo.files], + ); + const variants = React.useMemo( + () => + demo.variants.map((variant) => ({ value: variant, label: variantNames[variant] || variant })), + [demo.variants], + ); + + const editorRef = React.useRef(null); + const onChange = React.useCallback((text: string) => { + demo.setSource?.(text); + }, []); + useEditable(editorRef, onChange, { indentation: 2, disabled: !demo.setSource }); + + return ( +
+
{demo.component}
+
+
+
+
+ +
+
+ {demo.variants.length > 1 && ( + + controlledSetSelection?.({ + ...controlledSelection, + variant: e.target.value, + }) + } + > + + + + + ); +} +``` + +## Best Example: createDemo Pattern + +The most powerful use of Code Controller is with the `createDemo` pattern, where the demo content automatically populates the controller state: + +**Demo Code (`demos/interactive-editor/editor.js`):** + +```js +function createEditor() { + return