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

package/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@27.5.0...@ornikar/kitt-universal@27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0) (2025-09-08)
+
+
+### Features
+
+* codemod testing ([912aae9](https://github.com/ornikar/kitt/commit/912aae998fe103930e036c66d6303a0deab3beea))
+
+
+### Bug Fixes
+
+* tests fixtures revamp ([cb0161a](https://github.com/ornikar/kitt/commit/cb0161a91981fe2e814cd671cde2eb4ef6933b8c))
+* ts lint ([eac3fc1](https://github.com/ornikar/kitt/commit/eac3fc19869888632e3a59913cf9f700a72b0dad))
+
+
+
 ## [27.5.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@27.4.0...@ornikar/kitt-universal@27.5.0) (2025-09-03)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.0",
+  "version": "27.5.1-canary.eac3fc19869888632e3a59913cf9f700a72b0dad.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",

package/scripts/transformers/__testfixtures__/card-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal
+      header={<CardModal.Header title="With Header and Body" />}
+      body={
+        <CardModal.Body>
+          <LoremIpsum />
+        </CardModal.Body>
+      }
+      footer={
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <CardModal>
+      <CardModal.Header title="With Header and Body" />
+      <CardModal.Body>
+        <LoremIpsum />
+      </CardModal.Body>
+      <CardModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </CardModal.Footer>
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <CardModal
+      header={shouldDisplayHeader ? <CardModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <CardModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </CardModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal>
+      {shouldDisplayHeader ? <CardModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      ) : null}
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <CardModal
+      footer={
+        <CardModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </CardModal.Footer>
+      }
+      header={<CardModal.Header title="With Header and Body" />}
+      body={
+        <CardModal.Body>
+          <LoremIpsum />
+        </CardModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/card-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <CardModal>
+      <CardModal.Header title="With Header and Body" />
+      <CardModal.Body>
+        <LoremIpsum />
+      </CardModal.Body>
+      <CardModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </CardModal.Footer>
+    </CardModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal
+      header={<FullscreenModal.Header title="With Header and Body" />}
+      body={
+        <FullscreenModal.Body>
+          <LoremIpsum />
+        </FullscreenModal.Body>
+      }
+      footer={
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      <FullscreenModal.Header title="With Header and Body" />
+      <FullscreenModal.Body>
+        <LoremIpsum />
+      </FullscreenModal.Body>
+      <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </FullscreenModal.Footer>
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <FullscreenModal
+      header={shouldDisplayHeader ? <FullscreenModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </FullscreenModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      {shouldDisplayHeader ? <FullscreenModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      ) : null}
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <FullscreenModal
+      footer={
+        <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </FullscreenModal.Footer>
+      }
+      header={<FullscreenModal.Header title="With Header and Body" />}
+      body={
+        <FullscreenModal.Body>
+          <LoremIpsum />
+        </FullscreenModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/fullscreen-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <FullscreenModal>
+      <FullscreenModal.Header title="With Header and Body" />
+      <FullscreenModal.Body>
+        <LoremIpsum />
+      </FullscreenModal.Body>
+      <FullscreenModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </FullscreenModal.Footer>
+    </FullscreenModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/basic.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal
+      header={<NavigationModal.Header title="With Header and Body" />}
+      body={
+        <NavigationModal.Body>
+          <LoremIpsum />
+        </NavigationModal.Body>
+      }
+      footer={
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/basic.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <NavigationModal>
+      <NavigationModal.Header title="With Header and Body" />
+      <NavigationModal.Body>
+        <LoremIpsum />
+      </NavigationModal.Body>
+      <NavigationModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </NavigationModal.Footer>
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/withExpressions.input.js

@@ -0,0 +1,23 @@
+function Test() {
+  return (
+    <NavigationModal
+      header={shouldDisplayHeader ? <NavigationModal.Header title="With Header and Body" /> : null}
+      body={
+        shouldDisplayBody ? (
+          <View>
+            <LoremIpsum />
+          </View>
+        ) : null
+      }
+      footer={
+        shouldDisplayFooter ? (
+          <NavigationModal.Footer shouldHandleBottomNotch={false}>
+            <Button stretch type="primary">
+              With Body and Footer
+            </Button>
+          </NavigationModal.Footer>
+        ) : null
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/withExpressions.output.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal>
+      {shouldDisplayHeader ? <NavigationModal.Header title="With Header and Body" /> : null}
+      {shouldDisplayBody ? (
+        <View>
+          <LoremIpsum />
+        </View>
+      ) : null}
+      {shouldDisplayFooter ? (
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      ) : null}
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/wrongOrder.input.js

@@ -0,0 +1,19 @@
+function Test() {
+  return (
+    <NavigationModal
+      footer={
+        <NavigationModal.Footer shouldHandleBottomNotch={false}>
+          <Button stretch type="primary">
+            With Body and Footer
+          </Button>
+        </NavigationModal.Footer>
+      }
+      header={<NavigationModal.Header title="With Header and Body" />}
+      body={
+        <NavigationModal.Body>
+          <LoremIpsum />
+        </NavigationModal.Body>
+      }
+    />
+  );
+}

package/scripts/transformers/__testfixtures__/navigation-modal/wrongOrder.output.js

@@ -0,0 +1,15 @@
+function Test() {
+  return (
+    <NavigationModal>
+      <NavigationModal.Header title="With Header and Body" />
+      <NavigationModal.Body>
+        <LoremIpsum />
+      </NavigationModal.Body>
+      <NavigationModal.Footer shouldHandleBottomNotch={false}>
+        <Button stretch type="primary">
+          With Body and Footer
+        </Button>
+      </NavigationModal.Footer>
+    </NavigationModal>
+  );
+}

package/scripts/transformers/__tests__/card-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('CardModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'card-modal', null, `card-modal/${test}`));
+});

package/scripts/transformers/__tests__/fullscreen-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('FullscreenModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'fullscreen-modal', null, `fullscreen-modal/${test}`));
+});

package/scripts/transformers/__tests__/navigation-modal.test.js

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['basic', 'withExpressions', 'wrongOrder'];
+
+describe('NavigationModal', () => {
+  tests.forEach((test) => defineTest(__dirname, 'navigation-modal', null, `navigation-modal/${test}`));
+});

package/scripts/transformers/card-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform CardModal from props-based API to children-based API
+// Converts header, body, footer props to nested children in the correct 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 transformer logic
+
+  // Find all CardModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'CardModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const { openingElement } = element;
+
+      // Extract header, body, and footer props
+      const getAttributeByName = (attributes, name) => {
+        return attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === name);
+      };
+
+      const headerProp = getAttributeByName(openingElement.attributes, 'header');
+      const bodyProp = getAttributeByName(openingElement.attributes, 'body');
+      const footerProp = getAttributeByName(openingElement.attributes, 'footer');
+
+      // If we found any of these props, transform the element
+      if (headerProp || bodyProp || footerProp) {
+        // Remove the header, body, and footer attributes
+        openingElement.attributes = openingElement.attributes.filter((attr) => {
+          if (attr.type !== 'JSXAttribute') return true;
+          return !['header', 'body', 'footer'].includes(attr.name.name);
+        });
+
+        // Create children array in the correct order: header, body, footer
+        const children = [];
+
+        // Helper function to extract child from prop value
+        const extractChild = (propValue) => {
+          if (propValue.type === 'JSXExpressionContainer') {
+            // Check if the expression is a simple JSX element (not a conditional/complex expression)
+            if (propValue.expression.type === 'JSXElement') {
+              // For simple JSX elements, use them directly as children
+              return propValue.expression;
+            }
+            // For complex expressions (conditionals, etc.), keep as expression container
+            return propValue;
+          }
+          return propValue;
+        };
+
+        // Add header if it exists
+        if (headerProp && headerProp.value) {
+          children.push(extractChild(headerProp.value));
+        }
+
+        // Add body if it exists
+        if (bodyProp && bodyProp.value) {
+          children.push(extractChild(bodyProp.value));
+        }
+
+        // Add footer if it exists
+        if (footerProp && footerProp.value) {
+          children.push(extractChild(footerProp.value));
+        }
+
+        // Update the element to have children instead of being self-closing
+        if (children.length > 0) {
+          element.children = children;
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('CardModal'));
+          openingElement.selfClosing = false;
+        }
+      }
+    });
+
+  // ----------- End of transformer 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/transformers/fullscreen-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform FullscreenModal from props-based API to children-based API
+// Converts header, body, footer props to nested children in the correct 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 transformer logic
+
+  // Find all FullscreenModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'FullscreenModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const { openingElement } = element;
+
+      // Extract header, body, and footer props
+      const getAttributeByName = (attributes, name) => {
+        return attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === name);
+      };
+
+      const headerProp = getAttributeByName(openingElement.attributes, 'header');
+      const bodyProp = getAttributeByName(openingElement.attributes, 'body');
+      const footerProp = getAttributeByName(openingElement.attributes, 'footer');
+
+      // If we found any of these props, transform the element
+      if (headerProp || bodyProp || footerProp) {
+        // Remove the header, body, and footer attributes
+        openingElement.attributes = openingElement.attributes.filter((attr) => {
+          if (attr.type !== 'JSXAttribute') return true;
+          return !['header', 'body', 'footer'].includes(attr.name.name);
+        });
+
+        // Create children array in the correct order: header, body, footer
+        const children = [];
+
+        // Helper function to extract child from prop value
+        const extractChild = (propValue) => {
+          if (propValue.type === 'JSXExpressionContainer') {
+            // Check if the expression is a simple JSX element (not a conditional/complex expression)
+            if (propValue.expression.type === 'JSXElement') {
+              // For simple JSX elements, use them directly as children
+              return propValue.expression;
+            }
+            // For complex expressions (conditionals, etc.), keep as expression container
+            return propValue;
+          }
+          return propValue;
+        };
+
+        // Add header if it exists
+        if (headerProp && headerProp.value) {
+          children.push(extractChild(headerProp.value));
+        }
+
+        // Add body if it exists
+        if (bodyProp && bodyProp.value) {
+          children.push(extractChild(bodyProp.value));
+        }
+
+        // Add footer if it exists
+        if (footerProp && footerProp.value) {
+          children.push(extractChild(footerProp.value));
+        }
+
+        // Update the element to have children instead of being self-closing
+        if (children.length > 0) {
+          element.children = children;
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('FullscreenModal'));
+          openingElement.selfClosing = false;
+        }
+      }
+    });
+
+  // ----------- End of transformer 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/transformers/navigation-modal.js

@@ -0,0 +1,101 @@
+'use strict';
+
+// Transform NavigationModal from props-based API to children-based API
+// Converts header, body, footer props to nested children in the correct 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 transformer logic
+
+  // Find all NavigationModal JSX elements
+  root
+    .find(j.JSXElement, {
+      openingElement: {
+        name: {
+          name: 'NavigationModal',
+        },
+      },
+    })
+    .forEach((path) => {
+      const element = path.value;
+      const { openingElement } = element;
+
+      // Extract header, body, and footer props
+      const getAttributeByName = (attributes, name) => {
+        return attributes.find((attr) => attr.type === 'JSXAttribute' && attr.name.name === name);
+      };
+
+      const headerProp = getAttributeByName(openingElement.attributes, 'header');
+      const bodyProp = getAttributeByName(openingElement.attributes, 'body');
+      const footerProp = getAttributeByName(openingElement.attributes, 'footer');
+
+      // If we found any of these props, transform the element
+      if (headerProp || bodyProp || footerProp) {
+        // Remove the header, body, and footer attributes
+        openingElement.attributes = openingElement.attributes.filter((attr) => {
+          if (attr.type !== 'JSXAttribute') return true;
+          return !['header', 'body', 'footer'].includes(attr.name.name);
+        });
+
+        // Create children array in the correct order: header, body, footer
+        const children = [];
+
+        // Helper function to extract child from prop value
+        const extractChild = (propValue) => {
+          if (propValue.type === 'JSXExpressionContainer') {
+            // Check if the expression is a simple JSX element (not a conditional/complex expression)
+            if (propValue.expression.type === 'JSXElement') {
+              // For simple JSX elements, use them directly as children
+              return propValue.expression;
+            }
+            // For complex expressions (conditionals, etc.), keep as expression container
+            return propValue;
+          }
+          return propValue;
+        };
+
+        // Add header if it exists
+        if (headerProp && headerProp.value) {
+          children.push(extractChild(headerProp.value));
+        }
+
+        // Add body if it exists
+        if (bodyProp && bodyProp.value) {
+          children.push(extractChild(bodyProp.value));
+        }
+
+        // Add footer if it exists
+        if (footerProp && footerProp.value) {
+          children.push(extractChild(footerProp.value));
+        }
+
+        // Update the element to have children instead of being self-closing
+        if (children.length > 0) {
+          element.children = children;
+          element.closingElement = j.jsxClosingElement(j.jsxIdentifier('NavigationModal'));
+          openingElement.selfClosing = false;
+        }
+      }
+    });
+
+  // ----------- End of transformer 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/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' });
-};