diff --git a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/code.js b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/code.js
index a9a87ce7b063a..687999b9519ec 100644
--- a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/code.js
+++ b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/code.js
@@ -1,12 +1,11 @@
import * as React from 'react';
-export const ButtonAppearance = () => () =>
- (
- <>
-
-
-
-
-
-
- );
+export const ButtonAppearance = () => (
+ <>
+
+
+
+
+
+
+);
diff --git a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/output.js b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/output.js
index 778b0d2c04a21..74298daed100e 100644
--- a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/output.js
+++ b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/keep-sourcecode-spacing/output.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-export const ButtonAppearance = () => () =>
+export const ButtonAppearance = () =>
/*#__PURE__*/ React.createElement(
React.Fragment,
null,
@@ -35,4 +35,4 @@ export const ButtonAppearance = () => () =>
);
ButtonAppearance.parameters = {};
ButtonAppearance.parameters.fullSource =
- 'import * as React from "react";\n\nexport const ButtonAppearance = () => () =>\n (\n <>\n \n \n \n \n \n \n );\n';
+ 'import * as React from "react";\n\nexport const ButtonAppearance = () => (\n <>\n \n \n \n \n \n \n);\n';
diff --git a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/code.js b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/code.js
new file mode 100644
index 0000000000000..60df5d77071cb
--- /dev/null
+++ b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/code.js
@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+const Child1 = () => (
+ <>
+
+
+
+
+);
+
+export const ButtonAppearance = () => (
+ <>
+
+
+
+);
+
+const Child2 = () => (
+ <>
+
+
+
+);
diff --git a/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/output.js b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/output.js
new file mode 100644
index 0000000000000..2b8a474e59394
--- /dev/null
+++ b/packages/react-components/babel-preset-storybook-full-source/src/__fixtures__/storybook-stories-fullsource/mutilple-components/output.js
@@ -0,0 +1,50 @@
+import * as React from 'react';
+const Child1 = () =>
+ /*#__PURE__*/ React.createElement(
+ React.Fragment,
+ null,
+ /*#__PURE__*/ React.createElement(Button, null, 'Default button'),
+ /*#__PURE__*/ React.createElement(
+ Button,
+ {
+ appearance: 'primary',
+ },
+ 'Primary button',
+ ),
+ /*#__PURE__*/ React.createElement(
+ Button,
+ {
+ appearance: 'outline',
+ },
+ 'Outline button',
+ ),
+ );
+export const ButtonAppearance = () =>
+ /*#__PURE__*/ React.createElement(
+ React.Fragment,
+ null,
+ /*#__PURE__*/ React.createElement(Child1, null),
+ /*#__PURE__*/ React.createElement(Child2, null),
+ );
+const Child2 = () =>
+ /*#__PURE__*/ React.createElement(
+ React.Fragment,
+ null,
+ /*#__PURE__*/ React.createElement(
+ Button,
+ {
+ appearance: 'subtle',
+ },
+ 'Subtle button',
+ ),
+ /*#__PURE__*/ React.createElement(
+ Button,
+ {
+ appearance: 'transparent',
+ },
+ 'Transparent button',
+ ),
+ );
+ButtonAppearance.parameters = {};
+ButtonAppearance.parameters.fullSource =
+ 'import * as React from "react";\n\nconst Child1 = () => (\n <>\n \n \n \n \n);\n\nexport const ButtonAppearance = () => (\n <>\n \n \n \n);\n\nconst Child2 = () => (\n <>\n \n \n \n);\n';
diff --git a/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts b/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts
index 4cc3760d5fcad..e3134b7d63ee2 100644
--- a/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts
+++ b/packages/react-components/babel-preset-storybook-full-source/src/fullsource.ts
@@ -54,13 +54,28 @@ export function fullSourcePlugin(babel: typeof Babel, options: BabelPluginOption
name: PLUGIN_NAME,
visitor: {
// eslint-disable-next-line @typescript-eslint/naming-convention
- VariableDeclarator(path) {
+ ExportNamedDeclaration(path) {
+ const declaration = path.node.declaration;
+
+ // Check if it's a function declaration
+ if (
+ t.isFunctionDeclaration(declaration) &&
+ t.isIdentifier(declaration.id) &&
+ isComponentLikeName(declaration.id.name)
+ ) {
+ storyName = declaration.id.name;
+ return;
+ }
+
+ // Check if it's a variable declaration
if (
- t.isArrowFunctionExpression(path.node.init) &&
- t.isIdentifier(path.node.id) &&
- isComponentLikeName(path.node.id.name)
+ t.isVariableDeclaration(declaration) &&
+ declaration.declarations.length === 1 &&
+ t.isIdentifier(declaration.declarations[0].id) &&
+ isComponentLikeName(declaration.declarations[0].id.name)
) {
- storyName = path.node.id.name;
+ storyName = declaration.declarations[0].id.name;
+ return;
}
},
// eslint-disable-next-line @typescript-eslint/naming-convention