@ornikar/kitt-universal 27.7.0 → 27.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.7.0",
+  "version": "27.9.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",
@@ -164,9 +164,9 @@
     "@phosphor-icons/core": "2.1.1",
     "@react-native-picker/picker": "2.7.5",
     "@types/googlemaps": "3.43.3",
-    "@types/react": "18.3.24",
+    "@types/react": "18.3.25",
     "@types/react-portal": "4.0.7",
-    "@types/react-transition-group": "4.2.3",
+    "@types/react-transition-group": "4.4.12",
     "diff": "8.0.2",
     "expo-document-picker": "12.0.2",
     "expo-image-picker": "15.1.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 (default)', () => <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 (default)';

package/scripts/codemods/__testfixtures__/csf1-csf2/multiple-add.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/multiple-add.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.js

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

package/scripts/codemods/codemod-template.js

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