@ornikar/kitt-universal 27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0 → 27.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0",
+  "version": "27.7.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",
@@ -72,7 +72,7 @@
     "./babel-plugin-csf-to-jest": "./babel-plugin-csf-to-jest.js"
   },
   "bin": {
-    "run-transformers": "./scripts/run-transformers.js"
+    "run-codemods": "./scripts/run-codemods.js"
   },
   "engines": {
     "node": ">=22.17.0"
@@ -101,7 +101,7 @@
     "@floating-ui/react-native": "0.8.0",
     "@googlemaps/js-api-loader": "1.16.2",
     "@ornikar/eslint-config-kitt": "^5.0.0",
-    "@ornikar/kitt-icons": "^13.0.0",
+    "@ornikar/kitt-icons": "^13.1.0",
     "@react-native-community/datetimepicker": "^8.0.1",
     "@twemoji/parser": "15.1.1",
     "downshift": "7.6.0",

package/scripts/codemods/card-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms CardModal 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 CardModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'CardModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this CardModal 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 CardModal.Body - if so, extract its children
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'CardModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the CardModal.Body element itself, not its children
+            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 === 'CardModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct CardModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like CardModal.Header, CardModal.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('CardModal'));
+        }
+        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/codemods/fullscreen-modal.js

@@ -0,0 +1,155 @@
+'use strict';
+
+/**
+ * Transforms FullscreenModal 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 FullscreenModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'FullscreenModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const openingElement = element.openingElement;
+
+      // Check if this FullscreenModal 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 FullscreenModal.Body - if so, keep the element
+          if (
+            expression.type === 'JSXElement' &&
+            expression.openingElement.name.type === 'JSXMemberExpression' &&
+            expression.openingElement.name.object.name === 'FullscreenModal' &&
+            expression.openingElement.name.property.name === 'Body'
+          ) {
+            // Return the FullscreenModal.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 === 'FullscreenModal' &&
+            prop.value.openingElement.name.property.name === 'Body'
+          ) {
+            // Direct FullscreenModal.Body element - return the element itself
+            return [prop.value];
+          } else {
+            // For other direct JSX elements (like FullscreenModal.Header, FullscreenModal.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('FullscreenModal'));
+        }
+        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/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.`);
 }