Feat(codemod): Add codemod for Flex direction values

packages/codemods/src/transforms/v4/web-react/README.md

@@ -22,3 +22,24 @@ npx @lmc-eu/spirit-codemods -p <path> -t v4/web-react/collapse-isDisposable-prop
 - <UncontrolledCollapse hideOnCollapse … />
 + <UncontrolledCollapse isDisposable … />
 ```
+
+### `v4/web-react/flex-direction-values` - Flex direction prop values `row` to `horizontal` and `column` to `vertical`
+
+This codemod updates `direction` values of `Flex` component by replacing `row` to `horizontal` and `column` to `vertical`.
+
+#### Usage
+
+```sh
+npx @lmc-eu/spirit-codemods -p <path> -t v4/web-react/flex-direction-values
+```
+
+#### Example 
+
+```diff
+- <Flex direction="row" … />
+- <Flex direction="column" … />
+- <Flex direction={{ mobile: "column", tablet: "row" }} … />
++ <Flex direction="horizontal" … />
++ <Flex direction="vertical" … />
++ <Flex direction={{ mobile: 'vertical', tablet: 'horizontal' }} … />
+```

packages/codemods/src/transforms/v4/web-react/__testfixtures__/flex-direction-values.input.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Flex } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <Flex>Flex</Flex>
+    <Flex direction="row">Flex</Flex>
+    <Flex direction="column">Flex</Flex>
+    <Flex direction={{ mobile: 'row', tablet: 'column' }}>Flex</Flex>
+  </>
+);

packages/codemods/src/transforms/v4/web-react/__testfixtures__/flex-direction-values.output.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+// @ts-ignore: No declaration -- The library is not installed; we don't need to install it for fixtures.
+import { Flex } from '@lmc-eu/spirit-web-react';
+
+export const MyComponent = () => (
+  <>
+    <Flex>Flex</Flex>
+    <Flex direction="horizontal">Flex</Flex>
+    <Flex direction="vertical">Flex</Flex>
+    <Flex direction={{ mobile: 'horizontal', tablet: 'vertical' }}>Flex</Flex>
+  </>
+);

packages/codemods/src/transforms/v4/web-react/__tests__/flex-direction-values.test.ts

@@ -0,0 +1,3 @@
+import { testTransform } from '../../../../../tests/testUtils';
+
+testTransform(__dirname, 'flex-direction-values');

packages/codemods/src/transforms/v4/web-react/flex-direction-values.ts

@@ -0,0 +1,66 @@
+import { API, FileInfo } from 'jscodeshift';
+import { removeParentheses } from '../../../helpers';
+
+const transform = (fileInfo: FileInfo, api: API) => {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  // Define the mapping from old direction values to new ones
+  const directionMap: { [key: string]: string } = {
+    row: 'horizontal',
+    column: 'vertical',
+  };
+
+  // Find all Flex components
+  root
+    .find(j.JSXOpeningElement, { name: { type: 'JSXIdentifier', name: 'Flex' } })
+    .find(j.JSXAttribute, { name: { type: 'JSXIdentifier', name: 'direction' } })
+    .forEach((attributePath) => {
+      const attribute = attributePath.node;
+
+      if (attribute.value) {
+        // Handle string literal values
+        if (attribute.value.type === 'StringLiteral') {
+          const newValue = directionMap[attribute.value.value];
+          if (newValue) {
+            attribute.value = j.stringLiteral(newValue);
+          }
+        }
+
+        // Handle object values
+        else if (
+          attribute.value.type === 'JSXExpressionContainer' &&
+          attribute.value.expression.type === 'ObjectExpression'
+        ) {
+          const objectExpression = attribute.value.expression;
+
+          objectExpression.properties.forEach((property) => {
+            if (
+              property.type === 'ObjectProperty' &&
+              (property.key.type === 'Identifier' || property.key.type === 'Literal') &&
+              property.value.type === 'StringLiteral'
+            ) {
+              const oldValue = property.value.value;
+
+              // Update the value if it matches a key in directionMap
+              if (oldValue in directionMap) {
+                // Manually create a single-quoted Literal
+                property.value = j.literal(directionMap[oldValue]);
+                // We need single quotes in object values
+                // @ts-expect-error extra is not defined on Literal
+                property.value.extra = {
+                  raw: `'${directionMap[oldValue]}'`,
+                  rawValue: directionMap[oldValue],
+                };
+              }
+            }
+          });
+        }
+      }
+    });
+
+  // Convert the transformed code to source with double quotes for strings
+  return removeParentheses(root.toSource({ quote: 'double' }));
+};
+
+export default transform;