feat(product-components): add utils to detect non-ASCII chars

packages/product-components/src/components/PassphraseTypeCard/useNonAsciiChars.ts

@@ -0,0 +1,17 @@
+import { useEffect, useMemo, useState } from 'react';
+import { getNonAsciiChars } from '@trezor/utils';
+
+export const useNonAsciiChars = (value: string) => {
+    const [showAsciiBanner, setShowAsciiBanner] = useState(false);
+
+    const nonAsciiChars = useMemo(() => getNonAsciiChars(value), [value]);
+
+    useEffect(() => {
+        if (nonAsciiChars !== null) {
+            // If the banner was displayed once, we don't hide it again
+            setShowAsciiBanner(true);
+        }
+    }, [nonAsciiChars]);
+
+    return { nonAsciiChars, showAsciiBanner };
+};

packages/utils/src/asciiUtils.ts

@@ -0,0 +1,14 @@
+// Regular expression to match non-ASCII characters
+const nonAsciiPattern = /[^\x00-\x7F]/g;
+
+export function isAscii(value?: string): boolean {
+    if (!value) return true;
+
+    return !nonAsciiPattern.test(value);
+}
+
+export function getNonAsciiChars(value?: string): RegExpMatchArray | null {
+    if (!value) return null;
+
+    return value.match(nonAsciiPattern);
+}

packages/utils/src/index.ts

@@ -26,7 +26,6 @@ export * from './getWeakRandomId';
 export * from './getWeakRandomInt';
 export * from './hasUppercaseLetter';
 export * from './isArrayMember';
-export * from './isAscii';
 export * from './isHex';
 export * from './isNotUndefined';
 export * from './isUrl';
@@ -49,3 +48,4 @@ export * from './bigNumber';
 export * from './throttler';
 export * from './extractUrlsFromText';
 export * from './isFullPath';
+export * from './asciiUtils';

packages/utils/src/isAscii.ts

@@ -1,5 +0,0 @@
-export function isAscii(value?: string): boolean {
-    if (!value) return true;
-
-    return /^[\x00-\x7F]*$/.test(value);
-}

packages/utils/tests/asciUtils.test.ts

@@ -0,0 +1,34 @@
+import { isAscii, getNonAsciiChars } from '../src/asciiUtils';
+
+describe('isAscii', () => {
+    it('should return true for ASCII only string', () => {
+        expect(isAscii('this is only ascii')).toEqual(true);
+    });
+
+    it('should return true when called without parameter', () => {
+        expect(isAscii()).toEqual(true);
+    });
+
+    it('should return false strings with non ASCII chars', () => {
+        expect(isAscii('¥')).toEqual(false);
+        expect(isAscii('železniční přejezd')).toEqual(false);
+    });
+});
+
+describe('getNonAsciiChars', () => {
+    test('should return null for an empty string', () => {
+        expect(getNonAsciiChars('')).toBeNull();
+    });
+
+    test('should return null for ASCII-only characters', () => {
+        expect(getNonAsciiChars('Hello, World!')).toBeNull();
+    });
+
+    test('should return all non-ASCII characters for a mixed string', () => {
+        expect(getNonAsciiChars('Čau světe!')).toEqual(['Č', 'ě']);
+    });
+
+    test('should return all instances of repeating non-ASCII characters', () => {
+        expect(getNonAsciiChars('Přátelé přátelé')).toEqual(['ř', 'á', 'é', 'ř', 'á', 'é']);
+    });
+});

packages/utils/tests/isAscii.test.ts

@@ -1,16 +0,0 @@
-import { isAscii } from '../src/isAscii';
-
-describe('isAscii', () => {
-    it('should return true for ASCII only string', () => {
-        expect(isAscii('this is only ascii')).toEqual(true);
-    });
-
-    it('should return true when called without parameter', () => {
-        expect(isAscii()).toEqual(true);
-    });
-
-    it('should return false strings with non ASCII chars', () => {
-        expect(isAscii('¥')).toEqual(false);
-        expect(isAscii('železniční přejezd')).toEqual(false);
-    });
-});