From 1919225295b9bdb0595b5c84d48366e1caaac173 Mon Sep 17 00:00:00 2001
From: Bodo Graumann <mail@bodograumann.de>
Date: Tue, 31 Oct 2023 15:02:09 +0100
Subject: [PATCH] Do not generate redundant name attributes

---
 .../src/transforms/__tests__/mdx-to-csf.test.ts     | 13 -------------
 code/lib/codemod/src/transforms/mdx-to-csf.ts       |  6 ++++++
 2 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
index dc3325cd8951..2cd487bb892c 100644
--- a/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
+++ b/code/lib/codemod/src/transforms/__tests__/mdx-to-csf.test.ts
@@ -149,7 +149,6 @@ test('convert correct story nodes', () => {
 
     export const Primary = {
       render: () => 'Story',
-      name: 'Primary',
     };
 
   `);
@@ -208,7 +207,6 @@ test('convert story nodes with spaces', () => {
 
     export const PrimarySpace = {
       render: () => 'Story',
-      name: 'Primary Space',
     };
 
   `);
@@ -281,7 +279,6 @@ test('extract esm into csf head code', () => {
 
     export const Unchecked = {
       render: Template.bind({}),
-      name: 'Unchecked',
 
       args: {
         ...args,
@@ -376,7 +373,6 @@ test('extract all story attributes', () => {
 
     export const Unchecked = {
       render: Template.bind({}),
-      name: 'Unchecked',
 
       args: {
         ...args,
@@ -386,7 +382,6 @@ test('extract all story attributes', () => {
 
     export const Second = {
       render: Template.bind({}),
-      name: 'Second',
     };
 
   `);
@@ -437,12 +432,10 @@ test('duplicate story name', () => {
 
     export const Default_ = {
       render: Default.bind({}),
-      name: 'Default',
     };
 
     export const Second = {
       render: Default.bind({}),
-      name: 'Second',
     };
 
   `);
@@ -480,7 +473,6 @@ test('story name equals component name', () => {
 
     export const Button_ = {
       render: () => <Button label="Story 1" />,
-      name: 'Button',
     };
 
   `);
@@ -570,8 +562,6 @@ test('story child is jsx', () => {
             <div>Hello!</div>
           </Button>
         ),
-
-        name: 'Primary',
       };
 
     `);
@@ -594,7 +584,6 @@ test('story child is CSF3', () => {
     export default {};
 
     export const Primary = {
-      name: 'Primary',
       render: (args) => <Button {...args}></Button>,
 
       args: {
@@ -625,7 +614,6 @@ test('story child is arrow function', () => {
 
       export const Primary = {
         render: (args) => <Button />,
-        name: 'Primary',
       };
 
     `);
@@ -651,7 +639,6 @@ test('story child is identifier', () => {
 
       export const Primary = {
         render: Button,
-        name: 'Primary',
       };
 
     `);
diff --git a/code/lib/codemod/src/transforms/mdx-to-csf.ts b/code/lib/codemod/src/transforms/mdx-to-csf.ts
index 2d309181857b..f05874dfb69a 100644
--- a/code/lib/codemod/src/transforms/mdx-to-csf.ts
+++ b/code/lib/codemod/src/transforms/mdx-to-csf.ts
@@ -21,6 +21,7 @@ import * as path from 'node:path';
 import prettier from 'prettier';
 import * as fs from 'node:fs';
 import camelCase from 'lodash/camelCase';
+import startCase from 'lodash/startCase';
 import type { MdxFlowExpression } from 'mdast-util-mdx-expression';
 
 const mdxProcessor = remark().use(remarkMdx) as ReturnType<typeof remark>;
@@ -58,6 +59,7 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
     string,
     | {
         type: 'value';
+        name: string;
         attributes: Array<MdxJsxAttribute | MdxJsxExpressionAttribute>;
         children: (MdxJsxFlowElement | MdxJsxTextElement)['children'];
       }
@@ -111,6 +113,7 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
 
           storiesMap.set(name, {
             type: 'value',
+            name,
             attributes: node.attributes,
             children: node.children,
           });
@@ -273,6 +276,9 @@ export function transform(source: string, baseName: string): [mdx: string, csf:
         ...value.attributes.flatMap((attribute) => {
           if (attribute.type === 'mdxJsxAttribute') {
             if (typeof attribute.value === 'string') {
+              if (attribute.name === 'name' && attribute.value === startCase(value.name)) {
+                return [];
+              }
               return [
                 t.objectProperty(t.identifier(attribute.name), t.stringLiteral(attribute.value)),
               ];