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

package/CHANGELOG.md

@@ -3,12 +3,14 @@
 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.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@27.5.0...@ornikar/kitt-universal@27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0) (2025-09-16)
+## [27.5.1-canary.74b3661a3818b6b6b6cd66a9bf11ce3340651bb8.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@27.5.0...@ornikar/kitt-universal@27.5.1-canary.74b3661a3818b6b6b6cd66a9bf11ce3340651bb8.0) (2025-09-16)
 
 
 ### Features
 
 * generate csf2 codemod ([3a59d4a](https://github.com/ornikar/kitt/commit/3a59d4ae3422049417956fa37f27d2e8f5f84aba))
+* improve codemod ([74b3661](https://github.com/ornikar/kitt/commit/74b3661a3818b6b6b6cd66a9bf11ce3340651bb8))
+* improve codemod ([7b68cb8](https://github.com/ornikar/kitt/commit/7b68cb8f8312c7736633882eefa6e43178ed4819))
 * **kitt-universal:** generate codemod instructions OSE-19616 ([#2682](https://github.com/ornikar/kitt/issues/2682)) ([291e65b](https://github.com/ornikar/kitt/commit/291e65bb3692ccb17d6d78abea0eeea1cf7c20a5))
 * **rebranding:** review `TabBar` OSE-18003 ([#2687](https://github.com/ornikar/kitt/issues/2687)) ([a757d23](https://github.com/ornikar/kitt/commit/a757d237394d9fe65508d11998f6d5f6971b5bbd))
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/kitt-universal",
-  "version": "27.5.1-canary.3a59d4ae3422049417956fa37f27d2e8f5f84aba.0",
+  "version": "27.5.1-canary.74b3661a3818b6b6b6cd66a9bf11ce3340651bb8.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/kitt-universal",

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

@@ -8,7 +8,7 @@ import { NotificationEnablerScreenView } from './NotificationEnablerScreenView';
 export default {
   title: 'LNA/shared/components',
   component: NotificationEnablerScreenView,
-  decorators: [AnotherDecorator, NativeStoryDecorator],
+  decorators: [NativeStoryDecorator, AnotherDecorator],
 } satisfies ComponentMeta<typeof NotificationEnablerScreenView>;
 
 export const NotificationEnablerScreenStory: ComponentStory<typeof NotificationEnablerScreenView> = () => (

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

@@ -85,4 +85,4 @@ function CustomTooltipWrapper(): ReactNode {
   );
 }
 
-storiesOf('LAS/shared/components', module).add('CustomTooltip', () => <CustomTooltipWrapper />);
+storiesOf('LAS/shared/components', module).add('CustomTooltip (default)', () => <CustomTooltipWrapper />);

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

@@ -91,4 +91,4 @@ export default {
 } satisfies ComponentMeta<typeof CustomTooltipWrapper>;
 
 export const CustomTooltipStory: ComponentStory<typeof CustomTooltipWrapper> = () => <CustomTooltipWrapper />;
-CustomTooltipStory.storyName = 'CustomTooltip';
+CustomTooltipStory.storyName = 'CustomTooltip (default)';

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/__tests__/csf1-csf2.test.ts

@@ -3,7 +3,7 @@
 jest.autoMockOff();
 const { defineTest } = require('jscodeshift/dist/testUtils');
 
-const tests = ['default', 'decorator', 'parameters'];
+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/csf1-csf2.js

@@ -41,27 +41,23 @@ module.exports = async function transformer(fileInfo, api) {
     hasTransformation = true;
   }
 
-  // Find storiesOf() calls that end with .add() - look for the expression statement that contains them
+  // Find storiesOf() chains - look for any expression that contains storiesOf
   const storiesOfStatements = root.find(j.ExpressionStatement).filter((path) => {
     const expression = path.node.expression;
-    if (expression.type !== 'CallExpression' || !expression.callee) return false;
-
-    // Check if this ends with .add()
-    if (expression.callee.type === 'MemberExpression' && expression.callee.property.name === 'add') {
-      // Walk up the chain to find storiesOf
-      let current = expression.callee.object;
-      while (current) {
-        if (current.type === 'CallExpression' && current.callee && current.callee.name === 'storiesOf') {
-          return true;
-        }
-        if (current.type === 'CallExpression' && current.callee && current.callee.type === 'MemberExpression') {
-          current = current.callee.object;
-        } else {
-          break;
-        }
+    if (expression.type !== 'CallExpression') return false;
+
+    // Look for storiesOf anywhere in the call chain
+    function containsStoriesOf(node) {
+      if (node.type === 'CallExpression' && node.callee && node.callee.name === 'storiesOf') {
+        return true;
+      }
+      if (node.type === 'CallExpression' && node.callee && node.callee.type === 'MemberExpression') {
+        return containsStoriesOf(node.callee.object);
       }
+      return false;
     }
-    return false;
+
+    return containsStoriesOf(expression);
   });
 
   if (storiesOfStatements.length > 0) {
@@ -71,35 +67,62 @@ module.exports = async function transformer(fileInfo, api) {
     storiesOfStatements.forEach((path) => {
       const expression = path.node.expression;
 
-      // Extract information from the .add() call
-      let storyName = expression.arguments[0].value;
-      const componentFunction = expression.arguments[1];
-
-      // Walk up the chain to find storiesOf call and collect decorators and parameters
-      let storiesOfCall = null;
-      const decorators = [];
-      let parameters = null;
-      let current = expression.callee.object;
+      // Parse the entire call chain to extract all stories, decorators, and parameters
+      function parseStoriesChain(node) {
+        const stories = [];
+        const decorators = [];
+        let globalParameters = null;
+        let storiesOfCall = null;
+
+        function walkChain(current) {
+          if (current.type === 'CallExpression' && current.callee) {
+            if (current.callee.name === 'storiesOf') {
+              // Found the root storiesOf call
+              storiesOfCall = current;
+            } else if (current.callee.type === 'MemberExpression') {
+              const methodName = current.callee.property.name;
+
+              if (methodName === 'add') {
+                // Extract story information
+                const storyName = current.arguments[0].value;
+                const componentFunction = current.arguments[1];
+                const storyParameters = current.arguments[2]; // Third argument contains parameters
+
+                stories.push({
+                  name: storyName,
+                  component: componentFunction,
+                  parameters: storyParameters,
+                });
+              } else if (methodName === 'addDecorator') {
+                let decorator = current.arguments[0];
+                // Remove 'as any' type assertions from decorators
+                if (decorator.type === 'TSAsExpression' && decorator.typeAnnotation.type === 'TSAnyKeyword') {
+                  decorator = decorator.expression;
+                }
+                decorators.push(decorator); // Collect decorators in order
+              } else if (methodName === 'addParameters') {
+                globalParameters = current.arguments[0];
+              }
 
-      while (current) {
-        if (current.type === 'CallExpression' && current.callee && current.callee.name === 'storiesOf') {
-          storiesOfCall = current;
-          break;
-        }
-        if (current.type === 'CallExpression' && current.callee && current.callee.type === 'MemberExpression') {
-          const methodName = current.callee.property.name;
-          if (methodName === 'addDecorator') {
-            decorators.push(current.arguments[0]);
-          } else if (methodName === 'addParameters') {
-            parameters = current.arguments[0];
+              // Continue walking up the chain
+              walkChain(current.callee.object);
+            }
           }
-          current = current.callee.object;
-        } else {
-          break;
         }
+
+        walkChain(node);
+
+        return {
+          stories: stories.reverse(), // Reverse to get correct order
+          decorators: decorators.reverse(), // Reverse to get correct order
+          globalParameters,
+          storiesOfCall,
+        };
       }
 
-      if (!storiesOfCall) return;
+      const { stories, decorators, globalParameters, storiesOfCall } = parseStoriesChain(expression);
+
+      if (!storiesOfCall || stories.length === 0) return;
 
       let storyTitle = storiesOfCall.arguments[0].value;
 
@@ -108,11 +131,7 @@ module.exports = async function transformer(fileInfo, api) {
         storyTitle = 'LNA/authentication/pages';
       }
 
-      if (storyName === 'WelcomePageView') {
-        storyName = 'WelcomePage';
-      }
-
-      // Extract component name from the component function
+      // Extract component name from the first story's component function
       let componentName = 'Component'; // Default fallback
 
       function findComponentInJSX(jsxElement) {
@@ -157,20 +176,28 @@ module.exports = async function transformer(fileInfo, api) {
         return allComponents.length > 0 ? allComponents[0] : jsxElement.openingElement.name.name;
       }
 
-      if (componentFunction.type === 'ArrowFunctionExpression') {
-        if (componentFunction.body.type === 'JSXElement') {
-          componentName = findComponentInJSX(componentFunction.body);
-        } else if (componentFunction.body.type === 'BlockStatement') {
-          // Look for JSX return statement
-          const returnStatement = componentFunction.body.body.find(
-            (stmt) => stmt.type === 'ReturnStatement' && stmt.argument && stmt.argument.type === 'JSXElement',
-          );
-          if (returnStatement) {
-            componentName = findComponentInJSX(returnStatement.argument);
+      function extractComponentName(componentFunction) {
+        if (componentFunction.type === 'ArrowFunctionExpression') {
+          if (componentFunction.body.type === 'JSXElement') {
+            return findComponentInJSX(componentFunction.body);
+          } else if (componentFunction.body.type === 'BlockStatement') {
+            // Look for JSX return statement
+            const returnStatement = componentFunction.body.body.find(
+              (stmt) => stmt.type === 'ReturnStatement' && stmt.argument && stmt.argument.type === 'JSXElement',
+            );
+            if (returnStatement) {
+              return findComponentInJSX(returnStatement.argument);
+            }
           }
+        } else if (componentFunction.type === 'FunctionExpression') {
+          // Similar logic for function expressions if needed
         }
-      } else if (componentFunction.type === 'FunctionExpression') {
-        // Similar logic for function expressions if needed
+        return 'Component';
+      }
+
+      // Use the first story to determine the main component
+      if (stories.length > 0) {
+        componentName = extractComponentName(stories[0].component);
       }
 
       // Create default export properties in the exact order needed
@@ -182,8 +209,8 @@ module.exports = async function transformer(fileInfo, api) {
         props.push(j.property('init', j.identifier('decorators'), j.arrayExpression(decorators)));
       }
 
-      if (parameters) {
-        props.push(j.property('init', j.identifier('parameters'), parameters));
+      if (globalParameters) {
+        props.push(j.property('init', j.identifier('parameters'), globalParameters));
       }
 
       const objExpression = j.objectExpression(props);
@@ -198,30 +225,69 @@ module.exports = async function transformer(fileInfo, api) {
         ),
       );
 
-      // Create named export for the story with TypeScript type annotation
-      const storyExportName = storyName.replace(/\s+/g, '') + 'Story';
-      const storyIdentifier = j.identifier(storyExportName);
-      storyIdentifier.typeAnnotation = j.tsTypeAnnotation(
-        j.tsTypeReference(
-          j.identifier('ComponentStory'),
-          j.tsTypeParameterInstantiation([j.tsTypeQuery(j.identifier(componentName))]),
-        ),
-      );
+      // Add the default export first
+      newExports.push(defaultExport);
 
-      const namedExport = j.exportNamedDeclaration(
-        j.variableDeclaration('const', [j.variableDeclarator(storyIdentifier, componentFunction)]),
-      );
+      // Process each story
+      stories.forEach((story) => {
+        let storyName = story.name;
 
-      // Create storyName assignment
-      const storyNameAssignment = j.expressionStatement(
-        j.assignmentExpression(
-          '=',
-          j.memberExpression(j.identifier(storyExportName), j.identifier('storyName')),
-          j.literal(storyName),
-        ),
-      );
+        // Normalize story names
+        if (storyName === 'WelcomePageView') {
+          storyName = 'WelcomePage';
+        }
 
-      newExports.push(defaultExport, namedExport, storyNameAssignment);
+        // Create named export for the story with TypeScript type annotation
+        // Sanitize story name to create valid JavaScript identifier
+        function sanitizeStoryName(name) {
+          // Special case: remove "(default)" suffix as it's redundant in CSF2
+          let sanitized = name.replace(/\s*\(default\)\s*$/i, '');
+
+          // Remove special characters and normalize spacing while preserving word boundaries
+          return sanitized
+            .replace(/[^a-zA-Z0-9\s]/g, '') // Remove special characters
+            .split(/\s+/) // Split on whitespace
+            .filter((word) => word.length > 0) // Remove empty parts
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+        }
+
+        const storyExportName = sanitizeStoryName(storyName) + 'Story';
+        const storyIdentifier = j.identifier(storyExportName);
+        storyIdentifier.typeAnnotation = j.tsTypeAnnotation(
+          j.tsTypeReference(
+            j.identifier('ComponentStory'),
+            j.tsTypeParameterInstantiation([j.tsTypeQuery(j.identifier(componentName))]),
+          ),
+        );
+
+        const namedExport = j.exportNamedDeclaration(
+          j.variableDeclaration('const', [j.variableDeclarator(storyIdentifier, story.component)]),
+        );
+
+        // Create storyName assignment
+        const storyNameAssignment = j.expressionStatement(
+          j.assignmentExpression(
+            '=',
+            j.memberExpression(j.identifier(storyExportName), j.identifier('storyName')),
+            j.literal(storyName),
+          ),
+        );
+
+        newExports.push(namedExport, storyNameAssignment);
+
+        // Add parameters if the story has them
+        if (story.parameters) {
+          const parametersAssignment = j.expressionStatement(
+            j.assignmentExpression(
+              '=',
+              j.memberExpression(j.identifier(storyExportName), j.identifier('parameters')),
+              story.parameters,
+            ),
+          );
+          newExports.push(parametersAssignment);
+        }
+      });
 
       // Remove the original statement
       j(path).remove();