feat: apply React 19 / TypeScript 5 / Storybook 8 migration changes

- Fix type-only exports across all components (export type {}) for
  Vite/esbuild compatibility
- Add import type for all type-only imports (ESLint consistent-type-imports)
- Add @vite-ignore to dynamic imports in Flag.tsx and useLocaleObject.ts
- Fix CSSTransition nodeRef for React 19 (Modal, Offcanvas, Banner)
- Fix React 19 breaking changes: defaultProps, JSX namespace, useRef types,
  ReactNode functions, cloneElement typing
- Migrate react-popper to @floating-ui/react for Popover and Tooltip
- Update date-fns v3 locale dynamic imports
- Add Husky v9 pre-commit hook
- Update jscodeshift v17 codemod type casts
- Add UPGRADE_PLAN.md documenting all migration phases

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Mukesh-FN

.husky/pre-commit

@@ -0,0 +1,2 @@
+#!/bin/sh
+npm run husky:precommit

src/codemods/colors-to-css-vars.ts

@@ -79,7 +79,7 @@ const replaceColorsForCssVarsInTemplateLiterals = (
             const expressionObject = expressionAfterQuasis.object as Identifier;
 
             // Identify if it's a usage of Colors
-            const isColorsExpression = localColorNames.includes(expressionObject.name);
+            const isColorsExpression = localColorNames.includes(expressionObject.name as string);
 
             if (isColorsExpression) {
                 // Find the color being used
@@ -190,14 +190,14 @@ export default (file: FileInfo, api: API, options: Options) => {
     const waveNamedImports = waveImports.find(j.ImportSpecifier);
 
     // Find Colors named imports in @freenow/wave imports
-    const colorsImports = waveNamedImports.filter(path => path.node.imported.name === 'Colors');
+    const colorsImports = waveNamedImports.filter(path => (path.node.imported.name as string) === 'Colors');
 
     // Early return in case no Colors are imported
     if (colorsImports.length === 0) return file.source;
 
     // Get the local Colors import names
     colorsImports.forEach(spec => {
-        if (spec.node.local?.name) localColorNames.push(spec.node.local.name);
+        if (spec.node.local?.name) localColorNames.push(spec.node.local.name as string);
     });
 
     // Iterate over template strings

src/codemods/deprecated-icons.ts

@@ -173,14 +173,14 @@ export default (file: FileInfo, api: API, options: Options) => {
     // Find deprecated icons named imports in @freenow/wave imports
     const deprecatedIconsImports = waveImports
         .find(j.ImportSpecifier)
-        .filter(path => DeprecatedIconsNames.includes(path.node.imported.name));
+        .filter(path => DeprecatedIconsNames.includes(path.node.imported.name as string));
 
     // Early return if no deprecated icons are imported
     if (deprecatedIconsImports.length === 0) return file.source;
 
     // Get the local icons import names
     deprecatedIconsImports.forEach(spec => {
-        if (spec.node.local?.name) localIconsNames.push(spec.node.local.name);
+        if (spec.node.local?.name) localIconsNames.push(spec.node.local.name as string);
     });
 
     // Find usages of the deprecated icons

src/codemods/inverted-to-wrapper.ts

@@ -35,26 +35,27 @@ export default (file: FileInfo, api: API, options: Options) => {
     // Find component named imports in @freenow/wave imports that potentially have an inverted prop
     const componentImports = waveImports
         .find(j.ImportSpecifier)
-        .filter(path => ComponentNamesWithInvertedProp.includes(path.node.imported.name));
+        .filter(path => ComponentNamesWithInvertedProp.includes(path.node.imported.name as string));
 
     // Get the local icons import names
     componentImports.forEach(spec => {
-        if (spec.node.local?.name) localComponentNames.push(spec.node.local.name);
+        if (spec.node.local?.name) localComponentNames.push(spec.node.local.name as string);
     });
 
     // Find declarations of styled components that use a component which has the inverted prop
     const styledExpressions = ast.find(j.TaggedTemplateExpression, {
         tag: {
             arguments: ([argument]) =>
-                argument?.type === 'Identifier' && ComponentNamesWithInvertedProp.includes(argument.name)
+                argument?.type === 'Identifier' && ComponentNamesWithInvertedProp.includes(argument.name as string)
         }
     });
 
     styledExpressions.forEach(ex => {
         if (ex.parent?.node && ex.parent.node.type === 'VariableDeclarator') {
             const styledDeclaration: VariableDeclarator = ex.parent.node;
             // Mark the name of the declared styled component as a local component which can have the inverted prop
-            if (styledDeclaration.id.type === 'Identifier') localComponentNames.push(styledDeclaration.id.name);
+            if (styledDeclaration.id.type === 'Identifier')
+                localComponentNames.push(styledDeclaration.id.name as string);
         }
     });
 

src/codemods/semantic-colors-to-new-theme.ts

@@ -263,22 +263,22 @@ export default (file: FileInfo, api: API, options: Options) => {
     const waveNamedImports = waveImports.find(j.ImportSpecifier);
 
     // Find SemanticColors named imports in wave imports
-    const colorsImports = waveNamedImports.filter(path => path.node.imported.name === 'SemanticColors');
+    const colorsImports = waveNamedImports.filter(path => (path.node.imported.name as string) === 'SemanticColors');
 
     // Find themeGet named imports in wave imports
-    const themeGetImports = waveNamedImports.filter(path => path.node.imported.name === 'themeGet');
+    const themeGetImports = waveNamedImports.filter(path => (path.node.imported.name as string) === 'themeGet');
 
     // Early return in case no SemanticColors or themeGet are imported
     if (colorsImports.length === 0 && themeGetImports.length === 0) return file.source;
 
     // Get the local SemanticColors import names
     colorsImports.forEach(spec => {
-        if (spec.node.local?.name) localColorNames.push(spec.node.local.name);
+        if (spec.node.local?.name) localColorNames.push(spec.node.local.name as string);
     });
 
     // Get the local themeGet import names
     themeGetImports.forEach(spec => {
-        if (spec.node.local?.name) localThemeGetNames.push(spec.node.local.name);
+        if (spec.node.local?.name) localThemeGetNames.push(spec.node.local.name as string);
     });
 
     // Find all themeGet CallExpressions (e.g. themeGet('text.primary'))

src/components/Accordion/Accordion.tsx

@@ -1,9 +1,9 @@
-import React, { PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { Box } from '../Box/Box';
 import { Compact } from './components/Compact';
 import { DefaultPanel } from './components/Default';
-import { AccordionProps } from './types';
+import { type AccordionProps } from './types';
 import { getSemanticValue } from '../../utils/cssVariables';
 
 const HorizontalDivider = styled(Box)`
@@ -63,4 +63,6 @@ const Accordion: React.FC<PropsWithChildren<AccordionProps>> = ({
     </RenderedSection>
 );
 
-export { Accordion, AccordionProps };
+export { Accordion };
+
+export { type AccordionProps } from './types';

src/components/Accordion/components/Compact.tsx

@@ -1,12 +1,12 @@
-import React, { ReactElement, useState, PropsWithChildren } from 'react';
+import React, { type ReactElement, useState, type PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import { Box } from '../../Box/Box';
 import { Headline } from '../../Headline/Headline';
 import { Header } from './Header';
 import { ChevronUp } from './ChevronUp';
 import { ChevronDown } from './ChevronDown';
 import { Description } from './Description';
-import { AccordionProps } from '../types';
+import { type AccordionProps } from '../types';
 import { getSemanticValue } from '../../../utils/cssVariables';
 
 type Props = PropsWithChildren<

src/components/Accordion/components/Default.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactElement, useState } from 'react';
+import React, { type PropsWithChildren, type ReactElement, useState } from 'react';
 import styled from 'styled-components';
 import { Text } from '../../Text/Text';
 import { Box } from '../../Box/Box';
@@ -7,7 +7,7 @@ import { Header } from './Header';
 import { ChevronUp } from './ChevronUp';
 import { ChevronDown } from './ChevronDown';
 import { Description } from './Description';
-import { AccordionProps } from '../types';
+import { type AccordionProps } from '../types';
 import { getSemanticValue } from '../../../utils/cssVariables';
 
 const ButtonLabel = styled(Text).attrs({ as: 'p' })`

src/components/Accordion/components/Description.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from 'react';
-import { MarginProps } from 'styled-system';
+import React, { type ReactElement } from 'react';
+import { type MarginProps } from 'styled-system';
 import { Text } from '../../Text/Text';
 
 interface Props extends MarginProps {

src/components/Accordion/docs/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react';
 import { Accordion } from '../Accordion';
 
 const meta: Meta<typeof Accordion> = {