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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.0",
+  "version": "27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.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__/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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/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: [AnotherDecorator, NativeStoryDecorator],
+} 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/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/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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/codemods/__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}`));
+});