Fix(codemods): FileuploaderAttachment codemods

- Renamed button-text codemods to fileuploader-prop-names
- Updated test fixtures and tests
- Updated README and CONTRIBUTING

Fixing DS-1142

packages/codemods/CONTRIBUTING.md

@@ -0,0 +1,51 @@
+# Contributing
+
+## Table of Contents
+
+1. [Naming](#naming)
+2. [File Structure](#file-structure)
+3. [Testing](#testing)
+
+## Naming
+
+Codemods adhere to a clear and organized naming convention, following the kebab case format. The naming structure consists of two parts:
+
+<component-name>: Represents the specific component or root component.
+<purpose-of-codemod>: Describes the purpose or objective of the codemod.
+
+This naming convention ensures consistency and ease of understanding, facilitating seamless integration and maintenance of codemods within the project.
+
+### Example naming
+
+```
+<component-name>-<purpose-of-codemod>.ts
+        |                 |
+        |                 └─⫸ Codemod purpose
+        |
+        └─⫸ Component name
+```
+
+## File Structure
+
+The file structure below outlines a standard organization for codemods within the project:
+
+```
+─── src
+    └── transforms
+        └── v2
+            └── web-react
+                └── __testfixtures__
+                │   ├── <CodemodName>.input.tsx
+                │   └── <CodemodName>.output.tsx
+                └── __tests__
+                │   └── <CodemodName>.test.ts
+                └── <CodemodName>.ts
+```
+
+This structure enhances clarity and organization, making it easier to navigate and comprehend the components associated with each codemod. The separation of fixtures, tests, and the main codemod file contributes to a streamlined development and testing process.
+
+## Testing
+
+- `% cd <your-local-path>/spirit-design-system/packages/codemods`
+- `% yarn test` for test package (lint, format, unit testing, types)
+- `% yarn test:unit` for unit tests

packages/codemods/README.md

@@ -36,7 +36,7 @@ Other optional arguments include:
 For example, this could be the command you will run:
 
 ```shell
-npx @lmc-eu/spirit-codemods -p ./src -t v2/web-react/button-text -e js,jsx --parser babel
+npx @lmc-eu/spirit-codemods -p ./src -t v2/web-react/fileuploader-prop-names -e js,jsx --parser babel
 ```
 
 [jscodeshift]: https://github.com/facebook/jscodeshift

packages/codemods/src/transforms/v2/web-react/__testfixtures__/fileuploader-prop-names.input.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { FileUploaderAttachment } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => <FileUploaderAttachment buttonLabel="Remove me" editButtonLabel="Edit me" />;

packages/codemods/src/transforms/v2/web-react/__testfixtures__/fileuploader-prop-names.output.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { FileUploaderAttachment } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => <FileUploaderAttachment removeText="Remove me" editText="Edit me" />;

packages/codemods/src/transforms/v2/web-react/__tests__/button-text.test.ts → packages/codemods/src/transforms/v2/web-react/__tests__/fileuploader-prop-names.test.ts

@@ -1,7 +1,7 @@
 // eslint-disable-next-line import/extensions
 const { defineTest } = require('jscodeshift/dist/testUtils');
 
-defineTest(__dirname, 'button-text', null, 'button-text', {
+defineTest(__dirname, 'fileuploader-prop-names', null, 'fileuploader-prop-names', {
   parser: 'tsx',
   fixture: 'input',
   snapshot: true,

packages/codemods/src/transforms/v2/web-react/button-text.ts → packages/codemods/src/transforms/v2/web-react/fileuploader-prop-names.ts

@@ -13,34 +13,45 @@ const transform = (fileInfo: FileInfo, api: API) => {
 
   // Check if the module is imported
   if (importStatements.length > 0) {
-    const buttonSpecifier = importStatements.find(j.ImportSpecifier, {
+    const componentSpecifier = importStatements.find(j.ImportSpecifier, {
       imported: {
         type: 'Identifier',
-        name: 'Button',
+        name: 'FileUploaderAttachment',
       },
     });
 
     // Check if Button specifier is present
-    if (buttonSpecifier.length > 0) {
+    if (componentSpecifier.length > 0) {
       // Find Button components in the module
-      const buttonComponents = root.find(j.JSXOpeningElement, {
+      const components = root.find(j.JSXOpeningElement, {
         name: {
           type: 'JSXIdentifier',
-          name: 'Button',
+          name: 'FileUploaderAttachment',
         },
       });
 
-      // Rename 'buttonLabel' attribute to 'buttonText'
-      buttonComponents
+      // Rename 'buttonLabel' attribute to 'removeText'
+      components
         .find(j.JSXAttribute, {
           name: {
             type: 'JSXIdentifier',
             name: 'buttonLabel',
           },
         })
         .forEach((attributePath) => {
-          // Change attribute name to 'buttonText'
-          attributePath.node.name.name = 'buttonText';
+          attributePath.node.name.name = 'removeText';
+        });
+
+      // Rename 'editButtonLabel' attribute to 'editText'
+      components
+        .find(j.JSXAttribute, {
+          name: {
+            type: 'JSXIdentifier',
+            name: 'editButtonLabel',
+          },
+        })
+        .forEach((attributePath) => {
+          attributePath.node.name.name = 'editText';
         });
     }
   }