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

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 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.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@27.5.0...@ornikar/kitt-universal@27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0) (2025-09-08)
+
+
+### Features
+
+* codemod testing ([912aae9](https://github.com/ornikar/kitt/commit/912aae998fe103930e036c66d6303a0deab3beea))
+
+
+### Bug Fixes
+
+* improve copilot instructions ([4d3ec9b](https://github.com/ornikar/kitt/commit/4d3ec9b2bbb3371c254ae88141f81bb445a59f73))
+* 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.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",

package/scripts/run-transformers.js

@@ -70,29 +70,29 @@ for (const transformFile of transformFiles) {
     const source = fs.readFileSync(filePath, 'utf8');
 
     try {
-      const transformed = transformer(
+      transformer(
         { 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,8 +101,6 @@ for (const transformFile of transformFiles) {
       }
     }
   }
-
-  console.log(`✅ Finished: ${transformFile}\n`);
 }
 
 if (isDryRun) {

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,136 @@
+'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,
+  });
+};

package/scripts/transformers/fullscreen-modal.js

@@ -0,0 +1,138 @@
+'use strict';
+
+// Transform FullscreenModal 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 FullscreenModal
+  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 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('FullscreenModal'));
+      }
+    });
+
+  // ----------- 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,
+  });
+};

package/scripts/transformers/navigation-modal.js

@@ -0,0 +1,138 @@
+'use strict';
+
+// Transform NavigationModal 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 NavigationModal
+  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 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('NavigationModal'));
+      }
+    });
+
+  // ----------- 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,
+  });
+};

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' });
-};