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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.1-canary.4d3ec9b2bbb3371c254ae88141f81bb445a59f73.0",
+  "version": "27.5.1-canary.7b68cb8f8312c7736633882eefa6e43178ed4819.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/__testfixtures__/csf1-csf2/decorator.input.tsx

@@ -0,0 +1,11 @@
+import { storiesOf } from '@storybook/react-native';
+import {
+  NativeStoryDecorator,
+  AnotherDecorator,
+} from '@ornikar/learner-apps-shared/src/storybook/decorators/NativeStoryDecorator';
+import { NotificationEnablerScreenView } from './NotificationEnablerScreenView';
+
+storiesOf('LNA/shared/components', module)
+  .addDecorator(NativeStoryDecorator)
+  .addDecorator(AnotherDecorator)
+  .add('NotificationEnablerScreen', () => <NotificationEnablerScreenView firstname="Michael" />);

package/scripts/codemods/__testfixtures__/csf1-csf2/decorator.output.tsx

@@ -0,0 +1,17 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import {
+  NativeStoryDecorator,
+  AnotherDecorator,
+} from '@ornikar/learner-apps-shared/src/storybook/decorators/NativeStoryDecorator';
+import { NotificationEnablerScreenView } from './NotificationEnablerScreenView';
+
+export default {
+  title: 'LNA/shared/components',
+  component: NotificationEnablerScreenView,
+  decorators: [NativeStoryDecorator, AnotherDecorator],
+} satisfies ComponentMeta<typeof NotificationEnablerScreenView>;
+
+export const NotificationEnablerScreenStory: ComponentStory<typeof NotificationEnablerScreenView> = () => (
+  <NotificationEnablerScreenView firstname="Michael" />
+);
+NotificationEnablerScreenStory.storyName = 'NotificationEnablerScreen';

package/scripts/codemods/__testfixtures__/csf1-csf2/default.input.tsx

@@ -0,0 +1,88 @@
+import { storiesOf } from '@storybook/react-native';
+import { InfoRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import { HStack, IconButton, Story, StorySection, Typography, VStack } from '@ornikar/kitt-universal';
+import type { ReactNode } from 'react';
+import { useVisibility } from '../../hooks/useVisibility';
+import { CustomTooltip } from './CustomTooltip';
+
+function CustomTooltipWrapper(): ReactNode {
+  const { visible, toggle } = useVisibility(true);
+
+  return (
+    <Story title="CustomTooltip">
+      <StorySection title="Top (Default) | Right (Default)">
+        <CustomTooltip visible={visible} onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Top | Center">
+        <CustomTooltip visible={visible} alignment="center" onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <VStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </VStack>
+      </StorySection>
+
+      <StorySection title="Top | Left">
+        <CustomTooltip visible={visible} alignment="flex-start" onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Right (Default)">
+        <CustomTooltip visible={visible} position="bottom" positionOffset={56} onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Center">
+        <CustomTooltip
+          visible={visible}
+          position="bottom"
+          positionOffset={56}
+          alignment="center"
+          onTooltipPress={toggle}
+        >
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <VStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </VStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Left">
+        <CustomTooltip
+          visible={visible}
+          position="bottom"
+          positionOffset={56}
+          alignment="flex-start"
+          onTooltipPress={toggle}
+        >
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </HStack>
+      </StorySection>
+    </Story>
+  );
+}
+
+storiesOf('LAS/shared/components', module).add('CustomTooltip', () => <CustomTooltipWrapper />);

package/scripts/codemods/__testfixtures__/csf1-csf2/default.output.tsx

@@ -0,0 +1,94 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import { InfoRegularIcon } from '@ornikar/kitt-icons/phosphor';
+import { HStack, IconButton, Story, StorySection, Typography, VStack } from '@ornikar/kitt-universal';
+import type { ReactNode } from 'react';
+import { useVisibility } from '../../hooks/useVisibility';
+import { CustomTooltip } from './CustomTooltip';
+
+function CustomTooltipWrapper(): ReactNode {
+  const { visible, toggle } = useVisibility(true);
+
+  return (
+    <Story title="CustomTooltip">
+      <StorySection title="Top (Default) | Right (Default)">
+        <CustomTooltip visible={visible} onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Top | Center">
+        <CustomTooltip visible={visible} alignment="center" onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <VStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </VStack>
+      </StorySection>
+
+      <StorySection title="Top | Left">
+        <CustomTooltip visible={visible} alignment="flex-start" onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Right (Default)">
+        <CustomTooltip visible={visible} position="bottom" positionOffset={56} onTooltipPress={toggle}>
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+        </HStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Center">
+        <CustomTooltip
+          visible={visible}
+          position="bottom"
+          positionOffset={56}
+          alignment="center"
+          onTooltipPress={toggle}
+        >
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <VStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </VStack>
+      </StorySection>
+
+      <StorySection title="Bottom | Left">
+        <CustomTooltip
+          visible={visible}
+          position="bottom"
+          positionOffset={56}
+          alignment="flex-start"
+          onTooltipPress={toggle}
+        >
+          <Typography.Text>Press on this tooltip area to dismiss it.</Typography.Text>
+        </CustomTooltip>
+        <HStack paddingX="kitt.4" paddingY="kitt.2" space="kitt.2" alignItems="center" backgroundColor="kitt.amber.100">
+          <IconButton icon={<InfoRegularIcon />} onPress={toggle} />
+          <Typography.Text flexGrow={1}>Press the info button to toggle CustomTooltip.</Typography.Text>
+        </HStack>
+      </StorySection>
+    </Story>
+  );
+}
+
+export default {
+  title: 'LAS/shared/components',
+  component: CustomTooltipWrapper,
+} satisfies ComponentMeta<typeof CustomTooltipWrapper>;
+
+export const CustomTooltipStory: ComponentStory<typeof CustomTooltipWrapper> = () => <CustomTooltipWrapper />;
+CustomTooltipStory.storyName = 'CustomTooltip';

package/scripts/codemods/__testfixtures__/csf1-csf2/new.input.tsx

@@ -0,0 +1,77 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react-native';
+import { ApolloError } from '@apollo/client';
+import { StoryDecorator } from '@ornikar/kitt-universal';
+import { NotificationProvider } from '@ornikar/react-notification';
+import {
+  ThirdPartyServiceStatusEnum,
+  ThirdPartyServiceTypeEnum,
+} from '@ornikar/learner-apps-shared/src/__generated__/globalTypes';
+import {
+  mockLearningChaptersEmptyError,
+  mockLearningChaptersWithCourses,
+  mockLearningChaptersWithCoursesQueryBuilder,
+} from '@ornikar/learner-apps-shared/src/shared/apollo/mocks/learningChaptersWithCoursesMock';
+import {
+  getThirdPartyService,
+  mockThirdPartyServiceQueryBuilder,
+} from '@ornikar/learner-apps-shared/src/shared/apollo/mocks/thirdPartyService';
+import { ApolloDecorator } from '../../../../../../../storybook/decorators/ApolloDecorator';
+import {
+  DrivingDashboardLearningChaptersModalView,
+  LearningChaptersModalBodyWrapper,
+} from './DrivingDashboardLearningChaptersModalView';
+
+storiesOf('LAS/driving/dashboard/components/DrivingDashboardLearningChaptersModal', module)
+  .addDecorator(StoryDecorator as any)
+  .addDecorator(ApolloDecorator)
+  .add('Default', () => <DrivingDashboardLearningChaptersModalView visible onClose={action('onClose')} />, {
+    apollo: {
+      mocks: [
+        mockThirdPartyServiceQueryBuilder(
+          ThirdPartyServiceTypeEnum.NORTHPASS,
+          getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.UP),
+        ),
+        mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersWithCourses),
+      ],
+    },
+    jest: {
+      ignore: true,
+    },
+  })
+  .add('Empty chapters', () => <LearningChaptersModalBodyWrapper visible />, {
+    apollo: {
+      mocks: [
+        mockThirdPartyServiceQueryBuilder(
+          ThirdPartyServiceTypeEnum.NORTHPASS,
+          getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.UP),
+        ),
+        mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersEmptyError),
+      ],
+    },
+    jest: {
+      ignore: true,
+    },
+  })
+  .add(
+    'Error',
+    () => (
+      <NotificationProvider>
+        <DrivingDashboardLearningChaptersModalView visible onClose={action('onClose')} />
+      </NotificationProvider>
+    ),
+    {
+      apollo: {
+        mocks: [
+          mockThirdPartyServiceQueryBuilder(
+            ThirdPartyServiceTypeEnum.NORTHPASS,
+            getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.DOWN),
+          ),
+          mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersEmptyError, new ApolloError({})),
+        ],
+      },
+      jest: {
+        ignore: true,
+      },
+    },
+  );

package/scripts/codemods/__testfixtures__/csf1-csf2/new.output.tsx

@@ -0,0 +1,92 @@
+import { action } from '@storybook/addon-actions';
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import { ApolloError } from '@apollo/client';
+import { StoryDecorator } from '@ornikar/kitt-universal';
+import { NotificationProvider } from '@ornikar/react-notification';
+import {
+  ThirdPartyServiceStatusEnum,
+  ThirdPartyServiceTypeEnum,
+} from '@ornikar/learner-apps-shared/src/__generated__/globalTypes';
+import {
+  mockLearningChaptersEmptyError,
+  mockLearningChaptersWithCourses,
+  mockLearningChaptersWithCoursesQueryBuilder,
+} from '@ornikar/learner-apps-shared/src/shared/apollo/mocks/learningChaptersWithCoursesMock';
+import {
+  getThirdPartyService,
+  mockThirdPartyServiceQueryBuilder,
+} from '@ornikar/learner-apps-shared/src/shared/apollo/mocks/thirdPartyService';
+import { ApolloDecorator } from '../../../../../../../storybook/decorators/ApolloDecorator';
+import {
+  DrivingDashboardLearningChaptersModalView,
+  LearningChaptersModalBodyWrapper,
+} from './DrivingDashboardLearningChaptersModalView';
+
+export default {
+  title: 'LAS/driving/dashboard/components/DrivingDashboardLearningChaptersModal',
+  component: DrivingDashboardLearningChaptersModalView,
+  decorators: [StoryDecorator, ApolloDecorator],
+} satisfies ComponentMeta<typeof DrivingDashboardLearningChaptersModalView>;
+
+export const DefaultStory: ComponentStory<typeof DrivingDashboardLearningChaptersModalView> = () => (
+  <DrivingDashboardLearningChaptersModalView visible onClose={action('onClose')} />
+);
+DefaultStory.storyName = 'Default';
+
+DefaultStory.parameters = {
+  apollo: {
+    mocks: [
+      mockThirdPartyServiceQueryBuilder(
+        ThirdPartyServiceTypeEnum.NORTHPASS,
+        getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.UP),
+      ),
+      mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersWithCourses),
+    ],
+  },
+  jest: {
+    ignore: true,
+  },
+};
+
+export const EmptyChaptersStory: ComponentStory<typeof DrivingDashboardLearningChaptersModalView> = () => (
+  <LearningChaptersModalBodyWrapper visible />
+);
+EmptyChaptersStory.storyName = 'Empty chapters';
+
+EmptyChaptersStory.parameters = {
+  apollo: {
+    mocks: [
+      mockThirdPartyServiceQueryBuilder(
+        ThirdPartyServiceTypeEnum.NORTHPASS,
+        getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.UP),
+      ),
+      mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersEmptyError),
+    ],
+  },
+  jest: {
+    ignore: true,
+  },
+};
+
+export const ErrorStory: ComponentStory<typeof DrivingDashboardLearningChaptersModalView> = () => (
+  <NotificationProvider>
+    <DrivingDashboardLearningChaptersModalView visible onClose={action('onClose')} />
+  </NotificationProvider>
+);
+
+ErrorStory.storyName = 'Error';
+
+ErrorStory.parameters = {
+  apollo: {
+    mocks: [
+      mockThirdPartyServiceQueryBuilder(
+        ThirdPartyServiceTypeEnum.NORTHPASS,
+        getThirdPartyService(ThirdPartyServiceTypeEnum.NORTHPASS, ThirdPartyServiceStatusEnum.DOWN),
+      ),
+      mockLearningChaptersWithCoursesQueryBuilder(mockLearningChaptersEmptyError, new ApolloError({})),
+    ],
+  },
+  jest: {
+    ignore: true,
+  },
+};

package/scripts/codemods/__testfixtures__/csf1-csf2/parameters.input.tsx

@@ -0,0 +1,21 @@
+import { storiesOf } from '@storybook/react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { NativeStoryDecorator } from '@ornikar/learner-apps-shared/src/storybook/decorators/NativeStoryDecorator';
+import { WelcomePageView } from './WelcomePageView';
+
+storiesOf('Learner Native App/Authentication/Pages/WelcomePageView', module)
+  .addDecorator(NativeStoryDecorator)
+  .addParameters({
+    chromatic: { disable: true },
+    jest: {
+      createBeforeAfterEachCallbacks: () => ({
+        before: () => jest.useFakeTimers({ legacyFakeTimers: true }),
+        after: () => jest.useRealTimers(),
+      }),
+    },
+  })
+  .add('WelcomePageView', () => (
+    <GestureHandlerRootView>
+      <WelcomePageView topInset={60} bottomInset={0} />
+    </GestureHandlerRootView>
+  ));

package/scripts/codemods/__testfixtures__/csf1-csf2/parameters.output.tsx

@@ -0,0 +1,28 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { NativeStoryDecorator } from '@ornikar/learner-apps-shared/src/storybook/decorators/NativeStoryDecorator';
+import { WelcomePageView } from './WelcomePageView';
+
+export default {
+  title: 'LNA/authentication/pages',
+  component: WelcomePageView,
+  decorators: [NativeStoryDecorator],
+
+  parameters: {
+    chromatic: { disable: true },
+    jest: {
+      createBeforeAfterEachCallbacks: () => ({
+        before: () => jest.useFakeTimers({ legacyFakeTimers: true }),
+        after: () => jest.useRealTimers(),
+      }),
+    },
+  },
+} satisfies ComponentMeta<typeof WelcomePageView>;
+
+export const WelcomePageStory: ComponentStory<typeof WelcomePageView> = () => (
+  <GestureHandlerRootView>
+    <WelcomePageView topInset={60} bottomInset={0} />
+  </GestureHandlerRootView>
+);
+
+WelcomePageStory.storyName = 'WelcomePage';

package/scripts/codemods/__tests__/csf1-csf2.test.ts

@@ -0,0 +1,10 @@
+'use strict';
+
+jest.autoMockOff();
+const { defineTest } = require('jscodeshift/dist/testUtils');
+
+const tests = ['default', 'decorator', 'parameters', 'new'];
+
+describe('CSF1-CSF2 Migration', () => {
+  tests.forEach((test) => defineTest(__dirname, 'csf1-csf2', null, `csf1-csf2/${test}`, { parser: 'tsx' }));
+});

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