fix(website): improve randomization in LanguageSection and update key usage in LocalCardList for consistency

Author: aymericzip

apps/website/src/components/LandingPage/LanguageSection/index.tsx

@@ -13,10 +13,13 @@ import {
 
 const shuffleArray = (array: string[], limit?: number) => {
   const shuffled = [...array];
+
   for (let i = shuffled.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    const randomIndex = Math.floor(Math.random() * (i + 1));
+
+    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];
   }
+
   return limit ? shuffled.slice(0, limit) : shuffled;
 };
 
@@ -56,12 +59,12 @@ const LocalCardList: FC<{ localeList: string[]; className?: string }> = ({
       className={cn('inline-flex shrink-0 will-change-transform', className)}
     >
       {/* First set of cards */}
-      {localeList.map((locale, idx) => (
-        <LocalCard key={`${locale}-first-${idx}`} locale={locale} />
+      {localeList.map((locale, index) => (
+        <LocalCard key={`${locale}-first-${index}`} locale={locale} />
       ))}
       {/* Duplicate set for seamless loop */}
-      {localeList.map((locale, idx) => (
-        <LocalCard key={`${locale}-second-${idx}`} locale={locale} />
+      {localeList.map((locale, index) => (
+        <LocalCard key={`${locale}-second-${index}`} locale={locale} />
       ))}
     </div>
   </div>

packages/@intlayer/design-system/src/components/Flags/Flag.tsx

@@ -1,5 +1,11 @@
 import { type Locale, Locales } from '@intlayer/types';
-import type { FC, ImgHTMLAttributes, JSX } from 'react';
+import type {
+  ComponentType,
+  FC,
+  ImgHTMLAttributes,
+  JSX,
+  SVGProps,
+} from 'react';
 
 // import andorra from './ad.svg';
 import unitedArabEmirates from './ae.svg';
@@ -490,9 +496,30 @@ const flagRecord: Partial<Record<Locale, typeof unknown>> = {
   [Locales.NEPALI_NEPAL]: nepal,
 };
 
-export const Flag: FC<FlagProps> = ({ locale, ...props }): JSX.Element => {
-  const flagSrc = flagRecord[locale];
-  const src = typeof flagSrc === 'string' ? flagSrc : (flagSrc as any)?.src;
+export const Flag: FC<FlagProps> = ({ locale, alt, ...props }): JSX.Element => {
+  const asset = flagRecord[locale] ?? unknown;
 
-  return <img src={src} alt={`${locale} flag`} {...props} />;
+  // Case 1: bundler returns a URL string or an object with a .src field
+  if (typeof asset === 'string' || (asset as any)?.src) {
+    const src =
+      typeof asset === 'string' ? (asset as string) : (asset as any).src;
+    return <img src={src} alt={alt ?? `${locale} flag`} {...props} />;
+  }
+
+  // Case 2: bundler returns a React component (SVGR)
+  const Svg = asset as ComponentType<SVGProps<SVGSVGElement>>;
+  const { width, height, className, style, onClick } = props;
+
+  return (
+    <Svg
+      aria-label={alt ?? `${locale} flag`}
+      width={width as any}
+      height={height as any}
+      className={className}
+      style={style}
+      onClick={onClick as any}
+      role="img"
+      focusable={false as any}
+    />
+  );
 };

packages/@intlayer/design-system/tsdown.config.ts

@@ -2,6 +2,37 @@ import svgr from '@svgr/rollup';
 import { getOptions } from '@utils/tsdown-config';
 import { defineConfig, type Options } from 'tsdown';
 
+// Plugin to inject React import into SVG files that use React.createElement
+const injectReactPlugin = () => ({
+  name: 'inject-react',
+  renderChunk(code: string, chunk: { fileName: string }) {
+    // Check if this is an SVG file and uses React.createElement
+    if (
+      chunk.fileName.match(/\.svg\.(mjs|js)$/) &&
+      code.includes('React.createElement')
+    ) {
+      // Add React import at the top if not already present
+      if (
+        !code.includes('import React') &&
+        !code.includes('from "react"') &&
+        !code.includes("from 'react'")
+      ) {
+        const regionMatch = code.match(/^(\/\/#region [^\n]+\n)/);
+        if (regionMatch) {
+          // Insert after #region comment
+          return code.replace(
+            regionMatch[0],
+            `${regionMatch[0]}import * as React from "react";\n`
+          );
+        }
+        // Insert at the top
+        return `import * as React from "react";\n${code}`;
+      }
+    }
+    return null;
+  },
+});
+
 const options: Options[] = getOptions({
   all: {
     platform: 'neutral',
@@ -11,11 +42,12 @@ const options: Options[] = getOptions({
         svgo: true,
         icon: true, // scale to 1em
         exportType: 'default', // default export a React component
-        jsxRuntime: 'automatic', // no need to import React
+        jsxRuntime: 'classic', // Use classic runtime to ensure React import
         // ref: true,               // enable if you need refs
         // include/exclude if you want to limit where it runs:
         // include: '**/*.svg',
       }),
+      injectReactPlugin(),
     ],
   },
   types: {