@ornikar/kitt-universal 27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0 → 27.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0",
+  "version": "27.6.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"

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,17 +60,17 @@ 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 {
-      transformer(
+      codemod(
         { path: filePath, source },
         { jscodeshift: jscodeshift.withParser('tsx') },
         { printOptions: { quote: 'single', trailingComma: true } },
@@ -107,5 +107,5 @@ 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/card-modal.js

@@ -1,136 +0,0 @@
-'use strict';
-
-// Transform CardModal components from prop-based API to children-based API
-// Converts header, body, and footer props to direct children elements
-
-// 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);
-
-  let hasChanges = false;
-
-  // ----------- Start of transformer logic
-
-  // Find all JSX elements with the name CardModal
-  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 we have at least one of these props
-      if (!headerProp && !bodyProp && !footerProp) {
-        return;
-      }
-
-      hasChanges = true;
-
-      // Create new children array in the correct order: header, body, footer
-      const newChildren = [];
-
-      // Add header child if it exists
-      if (headerProp && headerProp.value) {
-        if (headerProp.value.type === 'JSXExpressionContainer') {
-          const expression = headerProp.value.expression;
-          if (expression.type === 'JSXElement') {
-            // If it's a direct JSX element, add it as a direct child
-            newChildren.push(expression);
-          } else {
-            // If it's a conditional or other expression, keep it wrapped
-            newChildren.push(j.jsxExpressionContainer(expression));
-          }
-        } else {
-          // If it's a direct JSX element, add it directly
-          newChildren.push(headerProp.value);
-        }
-      }
-
-      // Add body child if it exists
-      if (bodyProp && bodyProp.value) {
-        if (bodyProp.value.type === 'JSXExpressionContainer') {
-          const expression = bodyProp.value.expression;
-          if (expression.type === 'JSXElement') {
-            // If it's a direct JSX element, add it as a direct child
-            newChildren.push(expression);
-          } else {
-            // If it's a conditional or other expression, keep it wrapped
-            newChildren.push(j.jsxExpressionContainer(expression));
-          }
-        } else {
-          // If it's a direct JSX element, add it directly
-          newChildren.push(bodyProp.value);
-        }
-      }
-
-      // Add footer child if it exists
-      if (footerProp && footerProp.value) {
-        if (footerProp.value.type === 'JSXExpressionContainer') {
-          const expression = footerProp.value.expression;
-          if (expression.type === 'JSXElement') {
-            // If it's a direct JSX element, add it as a direct child
-            newChildren.push(expression);
-          } else {
-            // If it's a conditional or other expression, keep it wrapped
-            newChildren.push(j.jsxExpressionContainer(expression));
-          }
-        } else {
-          // If it's a direct JSX element, add it directly
-          newChildren.push(footerProp.value);
-        }
-      } // Remove the header, body, and footer attributes
-      openingElement.attributes = openingElement.attributes.filter((attr) => {
-        if (attr.type !== 'JSXAttribute') return true;
-        const name = attr.name.name;
-        return name !== 'header' && name !== 'body' && name !== 'footer';
-      });
-
-      // Update the element's children
-      element.children = newChildren;
-
-      // If the element was self-closing, make it a regular element
-      if (openingElement.selfClosing) {
-        openingElement.selfClosing = false;
-        element.closingElement = j.jsxClosingElement(j.jsxIdentifier('CardModal'));
-      }
-    });
-
-  // ----------- End of transformer logic
-
-  // Return the modified source code after transformation
-  if (!hasChanges) {
-    return fileInfo.source;
-  }
-
-  const output = root.toSource({ quote: 'single' });
-
-  const prettierConfig = await prettier.resolveConfig(fileInfo.path);
-
-  return prettier.format(output, {
-    ...prettierConfig,
-    filepath: fileInfo.path,
-  });
-};