@ornikar/kitt-universal 27.4.0 → 27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0

package/scripts/codemods/navigation-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms NavigationModal components from prop-based structure to children-based structure.
+ * Converts header, body, and footer props into direct children, maintaining proper order.
+ */
+
+// Use local jscodeshift instance directly
+const jscodeshift = require('jscodeshift');
+const prettier = require('prettier');
+
+module.exports = async function transformer(fileInfo, api) {
+  // Use the jscodeshift API to parse the file
+  const j = api.jscodeshift || jscodeshift;
+
+  // Parse the source code of the file
+  const root = j(fileInfo.source);
+
+  // ----------- Start of codemod logic
+
+  let hasChanges = false;
+
+  // Find all NavigationModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'NavigationModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this NavigationModal has header, body, or footer props
+      const headerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'header',
+      );
+      const bodyProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'body',
+      );
+      const footerProp = openingElement.attributes.find(
+        (attr) => attr.type === 'JSXAttribute' && attr.name.name === 'footer',
+      );
+
+      // Only transform if at least one of these props exists
+      if (!headerProp && !bodyProp && !footerProp) {
+        return;
+      }
+
+      hasChanges = true;
+
+      // Extract the prop values and create children
+      const children = [];
+
+      // Helper function to extract content from prop value
+      const extractPropContent = (prop) => {
+        if (!prop || !prop.value) return [];
+
+        if (prop.value.type === 'JSXExpressionContainer') {
+          const expression = prop.value.expression;
+
+          // Check if the expression is a NavigationModal.Body - if so, keep the element
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'NavigationModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the NavigationModal.Body element itself
+            return [expression];
+          } else if (expression.type === 'JSXElement') {
+            // For other JSX elements (header, footer), return the element directly (not wrapped)
+            return [expression];
+          } else {
+            // For other expressions (including conditionals), return as JSX expression
+            return [j.jsxExpressionContainer(expression)];
+          }
+        } else if (prop.value.type === 'JSXElement') {
+          // Direct JSX element
+          if (
+            prop.value.openingElement.name.type === 'JSXMemberExpression' &&
+            prop.value.openingElement.name.object.name === 'NavigationModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct NavigationModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like NavigationModal.Header, NavigationModal.Footer), return as-is
+            return [prop.value];
+          }
+        } else {
+          // For other types, return as-is
+          return [prop.value];
+        }
+      };
+
+      // Add header first
+      if (headerProp) {
+        const headerContent = extractPropContent(headerProp);
+        children.push(...headerContent);
+      }
+
+      // Add body second
+      if (bodyProp) {
+        const bodyContent = extractPropContent(bodyProp);
+        children.push(...bodyContent);
+      }
+
+      // Add footer last
+      if (footerProp) {
+        const footerContent = extractPropContent(footerProp);
+        children.push(...footerContent);
+      }
+
+      // Remove the header, body, and footer props from attributes
+      openingElement.attributes = openingElement.attributes.filter((attr) => {
+        return !(
+          attr.type === 'JSXAttribute' &&
+          (attr.name.name === 'header' || attr.name.name === 'body' || attr.name.name === 'footer')
+        );
+      });
+
+      // Update the element to be self-closing if no children, or add children
+      if (children.length === 0) {
+        openingElement.selfClosing = true;
+        element.closingElement = null;
+        element.children = [];
+      } else {
+        openingElement.selfClosing = false;
+        if (!element.closingElement) {
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('NavigationModal'));
+        }
+        element.children = children;
+      }
+    });
+
+  // Only return modified code if changes were made
+  if (!hasChanges) {
+    return fileInfo.source;
+  }
+
+  // ----------- End of codemod logic
+
+  // Return the modified source code after transformation
+  const output = root.toSource({ quote: 'single' });
+
+  const prettierConfig = await prettier.resolveConfig(fileInfo.path);
+
+  return prettier.format(output, {
+    ...prettierConfig,
+    filepath: fileInfo.path,
+  });
+};

package/scripts/{run-transformers.js → run-codemods.js}

@@ -16,12 +16,12 @@ const [targetPath] = args;
 // Check for --dry argument to enable dry run mode
 const isDryRun = args.includes('--dry');
 
-// Check for --only argument to run a specific transformer
+// Check for --only argument to run a specific codemod
 const onlyArg = args.find((arg) => arg.startsWith('--only='));
-const transformerName = onlyArg ? onlyArg.split('=')[1] : null;
+const codemodName = onlyArg ? onlyArg.split('=')[1] : null;
 
 if (!targetPath) {
-  console.error('❌ Usage: node scripts/run-transformers.js <targetPath> [--dry] [--only=<transformerName>]');
+  console.error('❌ Usage: node scripts/run-codemods.js <targetPath> [--dry] [--only=<codemodName>]');
   process.exit(1);
 }
 
@@ -30,17 +30,17 @@ if (!fs.existsSync(targetPath)) {
   process.exit(1);
 }
 
-const transformsDir = path.join(__dirname, 'transformers');
+const transformsDir = path.join(__dirname, 'codemods');
 const transformFiles = fs
   .readdirSync(transformsDir)
-  .filter((file) => file.endsWith('.js') && (!transformerName || file === `${transformerName}.js`));
+  .filter((file) => file.endsWith('.js') && (!codemodName || file === `${codemodName}.js`));
 
 if (transformFiles.length === 0) {
-  console.log('✅ No transformers to apply.');
+  console.log('✅ No codemods to apply.');
   process.exit(0);
 }
 
-console.log(`🛠  Found ${transformFiles.length} transformer(s) to apply to: ${targetPath}`);
+console.log(`🛠  Found ${transformFiles.length} codemod(s) to apply to: ${targetPath}`);
 
 // Utility to recursively collect all .ts/.tsx files
 function getAllFiles(dir) {
@@ -60,39 +60,39 @@ function getAllFiles(dir) {
 const filesToTransform = fs.statSync(targetPath).isDirectory() ? getAllFiles(targetPath) : [targetPath];
 const updatedFiles = new Set();
 
-// Execute each transformer
+// Execute each codemod
 for (const transformFile of transformFiles) {
   const transformPath = path.join(transformsDir, transformFile);
-  const transformer = require(transformPath);
-  console.log(`➡️  Running transformer: ${transformFile}`);
+  const codemod = require(transformPath);
+  console.log(`➡️  Running codemod: ${transformFile}`);
 
   for (const filePath of filesToTransform) {
     const source = fs.readFileSync(filePath, 'utf8');
 
     try {
-      const transformed = transformer(
+      codemod(
         { path: filePath, source },
         { jscodeshift: jscodeshift.withParser('tsx') },
         { printOptions: { quote: 'single', trailingComma: true } },
-      );
-
-      if (typeof transformed === 'string' && transformed !== source) {
-        if (isDryRun) {
-          console.log(`🔍 ${filePath}`);
-          const diff = diffLines(source, transformed);
-          diff.forEach((part) => {
-            const color = part.added ? '\u001B[32m' : part.removed ? '\u001B[31m' : '\u001B[0m';
-            const prefix = part.added ? '+' : part.removed ? '-' : ' ';
-            const lines = part.value.split('\n').map((line) => `${prefix} ${line}`);
-            process.stdout.write(`${color}${lines.join('\n')}\u001B[0m\n`);
-          });
-        } else {
-          fs.writeFileSync(filePath, transformed, 'utf8');
-          console.log(`✅ Updated: ${filePath}`);
+      ).then((transformed) => {
+        if (typeof transformed === 'string' && transformed !== source) {
+          if (isDryRun) {
+            console.log(`🔍 ${filePath}`);
+            const diff = diffLines(source, transformed);
+            diff.forEach((part) => {
+              const color = part.added ? '\u001B[32m' : part.removed ? '\u001B[31m' : '\u001B[0m';
+              const prefix = part.added ? '+' : part.removed ? '-' : ' ';
+              const lines = part.value.split('\n').map((line) => `${prefix} ${line}`);
+              process.stdout.write(`${color}${lines.join('\n')}\u001B[0m\n`);
+            });
+          } else {
+            fs.writeFileSync(filePath, transformed, 'utf8');
+            console.log(`✅ Updated: ${filePath}`);
+          }
+
+          updatedFiles.add(filePath);
         }
-
-        updatedFiles.add(filePath);
-      }
+      });
     } catch (error) {
       if (error.message.includes('TSSatisfiesExpression')) {
         console.warn(`⚠️ Skipping unsupported file (satisfies): ${filePath}`);
@@ -101,13 +101,11 @@ for (const transformFile of transformFiles) {
       }
     }
   }
-
-  console.log(`✅ Finished: ${transformFile}\n`);
 }
 
 if (isDryRun) {
   console.log(`🚧 Dry run complete. ${updatedFiles.size} file(s) would be modified.`);
   console.log('Run without --dry to apply changes.');
 } else {
-  console.log(`🏁 All transformers done. ${updatedFiles.size} file(s) modified.`);
+  console.log(`🏁 All codemods done. ${updatedFiles.size} file(s) modified.`);
 }

package/scripts/transformers/modals.js

@@ -1,102 +0,0 @@
-'use strict';
-
-/* eslint-disable prefer-destructuring */
-/* eslint-disable unicorn/no-array-method-this-argument */
-
-// Use local jscodeshift instance directly
-const jscodeshift = require('jscodeshift');
-
-// List of modal component names we want to transform
-const MODAL_COMPONENTS = ['FullscreenModal', 'CardModal', 'NavigationModal'];
-
-module.exports = function transformer(fileInfo, api) {
-  // Use the jscodeshift API to parse the file
-  const j = api.jscodeshift || jscodeshift;
-
-  // Parse the source code of the file
-  const root = j(fileInfo.source);
-
-  // Iterate over each modal component found in the source code
-  MODAL_COMPONENTS.forEach((componentName) => {
-    // Find instances of the modal component
-    root
-      .find(j.JSXElement, {
-        openingElement: {
-          name: { type: 'JSXIdentifier', name: componentName },
-        },
-      })
-      .forEach((path) => {
-        // Get the node (the JSXElement) from the path
-        const node = path.node;
-
-        // Check if the modal component already has children or if it is self-closing
-        const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-        if (!node.openingElement.selfClosing && hasChildren) {
-          // If it already has children, do nothing and skip transformation
-          return;
-        }
-
-        // Extract the attributes from the JSX element (like `header`, `body`, `footer`)
-        const attributes = node.openingElement.attributes;
-
-        // Initialize a map to hold potential new children: header, body, footer
-        const newChildrenMap = {
-          header: null,
-          body: null,
-          footer: null,
-        };
-
-        // An array to keep attributes that are not `header`, `body`, or `footer`
-        const keptAttributes = [];
-
-        // Loop over the attributes to check if any match `header`, `body`, or `footer`
-        attributes.forEach((attr) => {
-          if (
-            attr.type === 'JSXAttribute' &&
-            attr.name &&
-            Object.prototype.hasOwnProperty.call(newChildrenMap, attr.name.name)
-          ) {
-            const key = attr.name.name;
-            const value = attr.value;
-
-            // Check if the value of the attribute is an expression (like a ternary)
-            if (value?.type === 'JSXExpressionContainer') {
-              const expression = value.expression;
-
-              // If it's a JSXElement or JSXFragment, keep it as it is
-              if (j.JSXElement.check(expression) || j.JSXFragment.check(expression)) {
-                newChildrenMap[key] = expression;
-              } else {
-                // Otherwise, wrap it in an expression container to handle non-JSX expressions
-                newChildrenMap[key] = j.jsxExpressionContainer(expression);
-              }
-            }
-          } else {
-            // Keep any other attributes (that are not header/body/footer)
-            keptAttributes.push(attr);
-          }
-        });
-
-        // If no new children were found (no `header`, `body`, or `footer`), do nothing
-        if (Object.values(newChildrenMap).every((v) => v === null)) {
-          return;
-        }
-
-        // If the modal component was self-closing, convert it to a regular JSX element with children
-        if (node.openingElement.selfClosing) {
-          node.openingElement.selfClosing = false;
-          node.closingElement = j.jsxClosingElement(j.jsxIdentifier(node.openingElement.name.name));
-        }
-
-        // Retain all the other attributes and set the new ones
-        node.openingElement.attributes = keptAttributes;
-
-        // Force the order of children: header → body → footer
-        const orderedChildren = Object.values(newChildrenMap).filter(Boolean);
-        node.children = orderedChildren;
-      });
-  });
-
-  // Return the modified source code after transformation
-  return root.toSource({ quote: 'single' });
-};