@regardio/react 0.3.2

package/src/utils/is-route-active.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'vitest';
+import { checkIfRouteIsActive, isRouteActive } from './is-route-active';
+
+describe('isRouteActive', () => {
+  test('returns true when path matches currentPath exactly', () => {
+    expect(isRouteActive('/about', '/about')).toBe(true);
+    expect(isRouteActive('/contact', '/contact')).toBe(true);
+  });
+
+  test('returns false when paths are different', () => {
+    expect(isRouteActive('/about', '/contact')).toBe(false);
+  });
+
+  test('with end=true (default), only matches exact path', () => {
+    expect(isRouteActive('/about', '/about/team', true)).toBe(false);
+    expect(isRouteActive('/about', '/about', true)).toBe(true);
+  });
+
+  test('with end=false, matches parent paths', () => {
+    expect(isRouteActive('/about', '/about/team', false)).toBe(true);
+    expect(isRouteActive('/about', '/about/team/members', false)).toBe(true);
+  });
+
+  test('with end as function, uses function result', () => {
+    const endFn = (path: string) => path.includes('team');
+    expect(isRouteActive('/about', '/about/team', endFn)).toBe(false);
+    expect(isRouteActive('/about', '/about/contact', endFn)).toBe(true);
+  });
+
+  test('root path only matches root', () => {
+    expect(isRouteActive('/', '/')).toBe(true);
+    expect(isRouteActive('/', '/about', true)).toBe(false);
+  });
+});
+
+describe('checkIfRouteIsActive', () => {
+  test('returns true for exact match', () => {
+    expect(checkIfRouteIsActive('/about', '/about')).toBe(true);
+    expect(checkIfRouteIsActive('/users/123', '/users/123')).toBe(true);
+  });
+
+  test('returns false when root is target but current is not root', () => {
+    expect(checkIfRouteIsActive('/', '/about')).toBe(false);
+    expect(checkIfRouteIsActive('/', '/users/123')).toBe(false);
+  });
+
+  test('returns true for root when current is root', () => {
+    expect(checkIfRouteIsActive('/', '/')).toBe(true);
+  });
+
+  test('returns false when target is not in current path', () => {
+    expect(checkIfRouteIsActive('/about', '/contact')).toBe(false);
+    expect(checkIfRouteIsActive('/users', '/posts')).toBe(false);
+  });
+
+  test('with depth=1, matches when segments match within depth', () => {
+    // depth=1 means matchingSegments > segments.length - 0, i.e., matchingSegments > 1
+    // /about has 1 segment, /about/team has 2 segments, 1 matching
+    // 1 > 1 - 0 = 1 > 1 = false
+    expect(checkIfRouteIsActive('/about', '/about/team', 1)).toBe(false);
+    expect(checkIfRouteIsActive('/about', '/about/team/members', 1)).toBe(false);
+  });
+
+  test('with depth=2, matches one level deep', () => {
+    // depth=2 means matchingSegments > segments.length - 1
+    // /about has 1 segment, 1 > 1 - 1 = 1 > 0 = true
+    expect(checkIfRouteIsActive('/about', '/about/team', 2)).toBe(true);
+    expect(checkIfRouteIsActive('/about', '/about/team/members', 2)).toBe(true);
+  });
+
+  test('with depth=3, matches two levels deep', () => {
+    expect(checkIfRouteIsActive('/about', '/about/team', 3)).toBe(true);
+    expect(checkIfRouteIsActive('/about', '/about/team/members', 3)).toBe(true);
+    expect(checkIfRouteIsActive('/about', '/about/team/members/details', 3)).toBe(true);
+  });
+
+  test('ignores query parameters in current route', () => {
+    expect(checkIfRouteIsActive('/about', '/about?foo=bar')).toBe(true);
+  });
+});

package/src/utils/is-route-active.ts

@@ -0,0 +1,100 @@
+const ROOT_PATH = '/';
+
+/**
+ * @name isRouteActive
+ * @description A function to check if a route is active. This is used to
+ * @param end
+ * @param path
+ * @param currentPath
+ */
+export function isRouteActive(
+  path: string,
+  currentPath: string,
+  end?: boolean | ((path: string) => boolean) | undefined,
+) {
+  // if the path is the same as the current path, we return true
+  if (path === currentPath) {
+    return true;
+  }
+
+  // if the end prop is a function, we call it with the current path
+  if (typeof end === 'function') {
+    return !end(currentPath);
+  }
+
+  // otherwise - we use the evaluateIsRouteActive function
+  const defaultEnd = end ?? true;
+  const oneLevelDeep = 1;
+  const threeLevelsDeep = 3;
+
+  // how far down should segments be matched?
+  const depth = defaultEnd ? oneLevelDeep : threeLevelsDeep;
+
+  return checkIfRouteIsActive(path, currentPath, depth);
+}
+
+/**
+ * @name checkIfRouteIsActive
+ * @description A function to check if a route is active. This is used to
+ * highlight the active link in the navigation.
+ * @param targetLink - The link to check against
+ * @param currentRoute - the current route
+ * @param depth - how far down should segments be matched?
+ */
+export function checkIfRouteIsActive(targetLink: string, currentRoute: string, depth = 1) {
+  // we remove any eventual query param from the route's URL
+  const currentRoutePath = currentRoute.split('?')[0] ?? '';
+
+  if (!isRoot(currentRoutePath) && isRoot(targetLink)) {
+    return false;
+  }
+
+  if (!currentRoutePath.includes(targetLink)) {
+    return false;
+  }
+
+  const isSameRoute = targetLink === currentRoutePath;
+
+  if (isSameRoute) {
+    return true;
+  }
+
+  return hasMatchingSegments(targetLink, currentRoutePath, depth);
+}
+
+function splitIntoSegments(href: string) {
+  return href.split('/').filter(Boolean);
+}
+
+function hasMatchingSegments(targetLink: string, currentRoute: string, depth: number) {
+  const segments = splitIntoSegments(targetLink);
+  const matchingSegments = numberOfMatchingSegments(currentRoute, segments);
+
+  if (targetLink === currentRoute) {
+    return true;
+  }
+
+  // how far down should segments be matched?
+  // - if depth = 1 => only highlight the links of the immediate parent
+  // - if depth = 2 => for url = /account match /account/organization/members
+  return matchingSegments > segments.length - (depth - 1);
+}
+
+function numberOfMatchingSegments(href: string, segments: string[]) {
+  let count = 0;
+
+  for (const segment of splitIntoSegments(href)) {
+    // for as long as the segments match, keep counting + 1
+    if (segments.includes(segment)) {
+      count += 1;
+    } else {
+      return count;
+    }
+  }
+
+  return count;
+}
+
+function isRoot(path: string) {
+  return path === ROOT_PATH;
+}

package/src/utils/locale.test.ts

@@ -0,0 +1,148 @@
+import { LanguageDetectorLingui } from '@regardio/js/intl/language-detector';
+import { beforeEach, describe, expect, test } from 'vitest';
+import { createLocaleConfig } from './locale';
+
+describe('createLocaleConfig', () => {
+  const originalEnvMode = import.meta.env.MODE;
+
+  beforeEach(() => {
+    // Reset MODE between tests
+    import.meta.env.MODE = originalEnvMode;
+  });
+
+  test('creates config with default options', async () => {
+    const config = createLocaleConfig({
+      defaultLocale: 'en',
+      supportedLocales: ['en', 'de'],
+    });
+
+    // Verify cookie was created with correct default options
+    expect(config.localeCookie).toBeDefined();
+    expect(config.localeCookie.name).toBe('locale');
+
+    // Create a mock request with a cookie
+    const request = new Request('https://example.com', {
+      headers: {
+        Cookie: await config.localeCookie.serialize('en'),
+      },
+    });
+
+    // Parse the cookie to verify it works correctly
+    const parsedValue = await config.localeCookie.parse(request.headers.get('Cookie'));
+    expect(parsedValue).toBe('en');
+
+    // Verify language detector was created correctly
+    expect(config.languageDetector).toBeInstanceOf(LanguageDetectorLingui);
+
+    // Test language detector behavior instead of accessing private properties
+    const mockRequest = new Request('https://example.com/en/page', {
+      headers: { 'Accept-Language': 'de' },
+    });
+
+    // With default order (urlPath first), it should detect 'en' from URL path
+    const detectedLocale = await config.languageDetector.getLocale(mockRequest);
+    expect(detectedLocale).toBe('en');
+  });
+
+  test('creates config with custom cookie options', async () => {
+    const config = createLocaleConfig({
+      cookieOptions: {
+        httpOnly: true,
+        maxAge: 3600, // 1 hour
+        name: 'custom-locale',
+        sameSite: 'strict',
+        secure: true,
+      },
+      defaultLocale: 'fr',
+      supportedLocales: ['fr', 'es'],
+    });
+
+    // Verify cookie name
+    expect(config.localeCookie.name).toBe('custom-locale');
+
+    // Test cookie serialization to verify options indirectly
+    const cookieHeader = await config.localeCookie.serialize('fr');
+    console.log('Custom cookie header:', cookieHeader);
+    expect(typeof cookieHeader).toBe('string');
+    // Check for cookie name and value without assuming exact format
+    expect(cookieHeader.includes('custom-locale=')).toBe(true);
+    expect(/samesite=strict/i.test(cookieHeader)).toBe(true);
+    expect(/httponly/i.test(cookieHeader)).toBe(true);
+    expect(/secure/i.test(cookieHeader)).toBe(true);
+    expect(/max-age=3600/i.test(cookieHeader)).toBe(true);
+  });
+
+  test('creates config with custom detection order', async () => {
+    const config = createLocaleConfig({
+      defaultLocale: 'de',
+      detectionOptions: {
+        order: ['header', 'cookie', 'urlPath'],
+      },
+      supportedLocales: ['de', 'en'],
+    });
+
+    // Test detection order by creating requests that would give different results
+    // based on detection order
+
+    // This request has 'en' in URL path but 'de' in Accept-Language header
+    const mockRequest = new Request('https://example.com/en/page', {
+      headers: { 'Accept-Language': 'de' },
+    });
+
+    // With custom order (header first), it should detect 'de' from header
+    // instead of 'en' from URL path
+    const detectedLocale = await config.languageDetector.getLocale(mockRequest);
+    expect(detectedLocale).toBe('de');
+  });
+
+  test('secure cookie defaults to true in production environment', async () => {
+    // Mock production environment
+    import.meta.env.MODE = 'production';
+
+    const config = createLocaleConfig({
+      defaultLocale: 'en',
+      supportedLocales: ['en', 'de'],
+    });
+
+    // Test cookie serialization to verify secure option indirectly
+    const cookieHeader = await config.localeCookie.serialize('en');
+    console.log('Production cookie header:', cookieHeader);
+    expect(typeof cookieHeader).toBe('string');
+    // Check for Secure flag without assuming exact format
+    expect(/secure/i.test(cookieHeader)).toBe(true);
+  });
+
+  test('secure cookie defaults to false in development environment', async () => {
+    // Mock development environment
+    import.meta.env.MODE = 'development';
+
+    const config = createLocaleConfig({
+      defaultLocale: 'en',
+      supportedLocales: ['en', 'de'],
+    });
+
+    // Test cookie serialization to verify secure option indirectly
+    const cookieHeader = await config.localeCookie.serialize('en');
+    console.log('Development cookie header:', cookieHeader);
+    expect(typeof cookieHeader).toBe('string');
+    // Check for absence of Secure flag without assuming exact format
+    expect(/secure/i.test(cookieHeader)).toBe(false);
+  });
+
+  test('handles readonly supportedLocales array', async () => {
+    // Create a readonly array
+    const supportedLocales = ['en', 'de'] as const;
+
+    const config = createLocaleConfig({
+      defaultLocale: 'en',
+      supportedLocales,
+    });
+
+    // Test that both languages are detected correctly
+    const enRequest = new Request('https://example.com/en/page');
+    expect(await config.languageDetector.getLocale(enRequest)).toBe('en');
+
+    const deRequest = new Request('https://example.com/de/page');
+    expect(await config.languageDetector.getLocale(deRequest)).toBe('de');
+  });
+});

package/src/utils/locale.ts

@@ -0,0 +1,127 @@
+import { LanguageDetectorLingui } from '@regardio/js/intl/language-detector';
+import { createCookie } from 'react-router';
+
+/**
+ * Configuration options for creating locale utilities
+ */
+export interface LocaleConfigOptions {
+  /**
+   * Default locale to use as fallback
+   */
+  defaultLocale: string;
+
+  /**
+   * List of supported locales
+   */
+  supportedLocales: readonly string[];
+
+  /**
+   * Cookie options for storing locale preference
+   */
+  cookieOptions?: {
+    /**
+     * Name of the cookie (default: 'locale')
+     */
+    name?: string;
+
+    /**
+     * Max age of the cookie in seconds (default: 1 year)
+     */
+    maxAge?: number;
+
+    /**
+     * Whether the cookie should be HTTP only (default: false)
+     */
+    httpOnly?: boolean;
+
+    /**
+     * Whether the cookie should be secure (default: true in production)
+     */
+    secure?: boolean;
+
+    /**
+     * SameSite attribute for the cookie (default: 'lax')
+     */
+    sameSite?: 'strict' | 'lax' | 'none';
+  };
+
+  /**
+   * Detection options for the language detector
+   */
+  detectionOptions?: {
+    /**
+     * Order of detection methods (default: ['urlPath', 'cookie', 'header'])
+     */
+    order?: Array<'urlPath' | 'cookie' | 'header'>;
+  };
+}
+
+/**
+ * Result of createLocaleConfig
+ */
+export interface LocaleConfig {
+  /**
+   * Cookie for storing locale preference
+   */
+  localeCookie: ReturnType<typeof createCookie>;
+
+  /**
+   * Language detector instance
+   */
+  languageDetector: LanguageDetectorLingui;
+}
+
+/**
+ * Create locale configuration utilities
+ *
+ * This function creates a unified locale cookie and language detector
+ * based on the provided configuration options.
+ *
+ * @param options Configuration options
+ * @returns Locale configuration utilities
+ *
+ * @example
+ * ```ts
+ * // In your app's configuration file
+ * const { localeCookie, languageDetector } = createLocaleConfig({
+ *   defaultLocale: 'en',
+ *   supportedLocales: ['en', 'de', 'fr'],
+ * });
+ * ```
+ */
+export function createLocaleConfig(options: LocaleConfigOptions): LocaleConfig {
+  const { defaultLocale, supportedLocales, cookieOptions = {}, detectionOptions = {} } = options;
+
+  const {
+    name = 'locale',
+    maxAge = 60 * 60 * 24 * 365, // 1 year
+    httpOnly = false,
+    secure = import.meta.env.MODE !== 'development',
+    sameSite = 'lax',
+  } = cookieOptions;
+
+  const { order = ['urlPath', 'cookie', 'header'] } = detectionOptions;
+
+  // Create cookie for storing locale preference
+  const localeCookie = createCookie(name, {
+    httpOnly,
+    maxAge,
+    sameSite,
+    secure,
+  });
+
+  // Create language detector instance
+  const languageDetector = new LanguageDetectorLingui({
+    detection: {
+      cookie: localeCookie,
+      fallbackLanguage: defaultLocale,
+      order,
+      supportedLanguages: [...supportedLocales],
+    },
+  });
+
+  return {
+    languageDetector,
+    localeCookie,
+  };
+}

package/src/utils/text.test.ts

@@ -0,0 +1,152 @@
+import { describe, expect, test } from 'vitest';
+import { replaceSpecialChars, shy, toBoolean, typographicQuotes } from './text';
+
+describe('toBoolean', () => {
+  test('returns true for boolean true', () => {
+    expect(toBoolean(true)).toBe(true);
+  });
+
+  test('returns false for boolean false', () => {
+    expect(toBoolean(false)).toBe(false);
+  });
+
+  test('returns true for string "true"', () => {
+    expect(toBoolean('true')).toBe(true);
+  });
+
+  test('returns true for string "1"', () => {
+    expect(toBoolean('1')).toBe(true);
+  });
+
+  test('returns false for string "false"', () => {
+    expect(toBoolean('false')).toBe(false);
+  });
+
+  test('returns false for string "0"', () => {
+    expect(toBoolean('0')).toBe(false);
+  });
+
+  test('returns false for null', () => {
+    expect(toBoolean(null)).toBe(false);
+  });
+
+  test('returns false for undefined', () => {
+    expect(toBoolean(undefined)).toBe(false);
+  });
+
+  test('returns false for other strings', () => {
+    expect(toBoolean('yes')).toBe(false);
+    expect(toBoolean('no')).toBe(false);
+    expect(toBoolean('')).toBe(false);
+  });
+});
+
+describe('shy', () => {
+  test('returns null for null input', () => {
+    expect(shy(null)).toBe(null);
+  });
+
+  test('replaces ­ with soft hyphen in strings', () => {
+    const result = shy('hello­world');
+    expect(result).toBe('hello\u00ADworld');
+  });
+
+  test('handles strings without ­', () => {
+    expect(shy('hello world')).toBe('hello world');
+  });
+
+  test('handles multiple ­ occurrences', () => {
+    const result = shy('one­two­three');
+    expect(result).toBe('one\u00ADtwo\u00ADthree');
+  });
+});
+
+describe('replaceSpecialChars', () => {
+  test('replaces straight quotes for de locale', () => {
+    const result = replaceSpecialChars('"Hello"', 'de');
+    const str = String(result);
+    // Should not contain straight quotes anymore
+    expect(str).not.toContain('"Hello"');
+    expect(str).toContain('Hello');
+  });
+
+  test('replaces straight quotes for de-DE locale', () => {
+    const result = replaceSpecialChars('"Hello"', 'de-DE');
+    const str = String(result);
+    expect(str).not.toContain('"Hello"');
+    expect(str).toContain('Hello');
+  });
+
+  test('replaces straight quotes for en locale', () => {
+    const result = replaceSpecialChars('"Hello"', 'en');
+    const str = String(result);
+    // Should not contain straight quotes anymore
+    expect(str).not.toContain('"Hello"');
+    expect(str).toContain('Hello');
+  });
+
+  test('handles multiple quoted strings', () => {
+    const result = replaceSpecialChars('"one" and "two"', 'de');
+    const str = String(result);
+    expect(str).toContain('one');
+    expect(str).toContain('two');
+    expect(str).toContain('and');
+  });
+
+  test('also applies shy replacement', () => {
+    const result = replaceSpecialChars('"Hello­World"', 'en');
+    expect(String(result)).toContain('\u00AD');
+  });
+});
+
+describe('typographicQuotes', () => {
+  test('replaces double quotes with English curly quotes', () => {
+    const result = typographicQuotes('"Hello"', 'en');
+    expect(result).toBe('\u201CHello\u201D');
+  });
+
+  test('replaces double quotes with German quotes', () => {
+    const result = typographicQuotes('"Hello"', 'de');
+    expect(result).toBe('\u201EHello\u201D');
+  });
+
+  test('replaces double quotes with French guillemets', () => {
+    const result = typographicQuotes('"Hello"', 'fr');
+    expect(result).toBe('\u00AB Hello \u00BB');
+  });
+
+  test('handles de-DE locale (falls back to de)', () => {
+    const result = typographicQuotes('"Hello"', 'de-DE');
+    expect(result).toBe('\u201EHello\u201D');
+  });
+
+  test('handles de-CH locale (Swiss German with guillemets)', () => {
+    const result = typographicQuotes('"Hello"', 'de-CH');
+    expect(result).toBe('\u00ABHello\u00BB');
+  });
+
+  test('handles unknown locale (falls back to English)', () => {
+    const result = typographicQuotes('"Hello"', 'xx-YY');
+    expect(result).toBe('\u201CHello\u201D');
+  });
+
+  test('replaces single quotes', () => {
+    const result = typographicQuotes("'Hello'", 'en');
+    expect(result).toBe('\u2018Hello\u2019');
+  });
+
+  test('handles multiple quoted strings', () => {
+    const result = typographicQuotes('"one" and "two"', 'de');
+    expect(result).toBe('\u201Eone\u201D and \u201Etwo\u201D');
+  });
+
+  test('handles Japanese quotes', () => {
+    const result = typographicQuotes('"Hello"', 'ja');
+    expect(result).toBe('\u300CHello\u300D');
+  });
+
+  test('preserves text without quotes', () => {
+    const result = typographicQuotes('Hello World', 'en');
+    expect(result).toBe('Hello World');
+  });
+});