diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 30f224c160b7..33337e29a1f3 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -74,6 +74,7 @@ "escodegen": "^2.1.0", "expect-type": "^0.15.0", "html-tags": "^3.1.0", + "memfs": "^4.11.1", "prop-types": "^15.7.2", "react-element-to-jsx-string": "patch:react-element-to-jsx-string@npm%3A@7rulnik/react-element-to-jsx-string@15.0.1#~/.yarn/patches/@7rulnik-react-element-to-jsx-string-npm-15.0.1-e53b67c4b3.patch", "require-from-string": "^2.0.2", diff --git a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaProject.test.ts b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaProject.test.ts index 8c36ec565e15..52dbeb5b177c 100644 --- a/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaProject.test.ts +++ b/code/renderers/react/src/componentManifest/componentMeta/ComponentMetaProject.test.ts @@ -1,9 +1,20 @@ -import { describe, expect, it } from 'vitest'; +import { afterEach, describe, expect, it } from 'vitest'; import { dedent } from 'ts-dedent'; import type { StoryRef } from '../getComponentImports.ts'; -import { extractFromStory, withProject } from './componentMetaExtractor.test-helpers.ts'; +import { findMatchingComponent } from '../resolveComponents.ts'; +import { findExactComponentMatch } from '../subcomponents.ts'; +import { + extractFromStory, + loadDeclaredSubcomponentComponents, + resetProjectVolume, + withProject, +} from './componentMetaExtractor.test-helpers.ts'; + +afterEach(() => { + resetProjectVolume(); +}); describe('compound component extraction', () => { it('extracts props for Accordion.Root, not Item or Trigger', async () => { @@ -378,6 +389,205 @@ describe('compound component extraction', () => { ); }); + it('extracts declared compound subcomponent without JSX when meta.component is the base export', async () => { + await withProject( + { + 'button.tsx': dedent` + import React from 'react'; + + interface ButtonProps { + variant?: 'solid' | 'outline'; + } + const Button = (props: ButtonProps) =>