React: Use self-closing tag for code snippets

code/renderers/react/src/componentManifest/generateCodeSnippet.test.tsx

@@ -50,6 +50,21 @@ function withCSF4(body: string) {
   `;
 }
 
+test('Synthesizes self-closing when no children', () => {
+  const input = dedent`
+    import type { Meta } from '@storybook/react';
+    import { Button } from '@design-system/button';
+
+    const meta: Meta<typeof Button> = {
+      component: Button,
+    };
+    export default meta;
+
+    export const NoChildren: Story = {};
+  `;
+  expect(generateExample(input)).toMatchInlineSnapshot(`"const NoChildren = () => <Button />;"`);
+});
+
 test('Default', () => {
   const input = withCSF3(`
     export const Default: Story = {};

code/renderers/react/src/componentManifest/generateCodeSnippet.ts

@@ -222,13 +222,15 @@ export function getCodeSnippet(
   const name = t.jsxIdentifier(componentName);
   const openingElAttrs = invalidSpread ? [...injectedAttrs, invalidSpread] : injectedAttrs;
 
+  const children = toJsxChildren(merged.children);
+  const selfClosing = children.length === 0;
   const arrow = t.arrowFunctionExpression(
     [],
     t.jsxElement(
-      t.jsxOpeningElement(name, openingElAttrs, false),
-      t.jsxClosingElement(name),
-      toJsxChildren(merged.children),
-      false
+      t.jsxOpeningElement(name, openingElAttrs, selfClosing),
+      selfClosing ? null : t.jsxClosingElement(name),
+      children,
+      selfClosing
     )
   );