@cronos-labs/ui 0.2.0

package/dist/config/eslintConfig.js

@@ -0,0 +1,31 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import eslintConfigPrettier from 'eslint-config-prettier';
+export const createReactEslintConfig = (options) => tseslint.config({
+    ignores: options.ignores ?? ['dist', 'coverage', 'node_modules', 'eslint.config.mjs'],
+}, js.configs.recommended, ...tseslint.configs.recommendedTypeChecked, ...tseslint.configs.stylisticTypeChecked, {
+    languageOptions: {
+        ecmaVersion: 2023,
+        globals: {
+            ...globals.browser,
+        },
+        parserOptions: {
+            projectService: true,
+            allowDefaultProject: options.allowDefaultProject ?? ['*.{js,mjs,cjs,ts}'],
+            tsconfigRootDir: options.tsconfigRootDir,
+        },
+    },
+    plugins: {
+        'react-hooks': reactHooks,
+        'react-refresh': reactRefresh,
+    },
+    rules: {
+        ...reactHooks.configs.recommended.rules,
+        'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    },
+}, eslintConfigPrettier);

package/dist/config/prettierConfig.d.ts

@@ -0,0 +1,8 @@
+export declare const prettierConfig: {
+    readonly semi: true;
+    readonly singleQuote: true;
+    readonly jsxSingleQuote: false;
+    readonly trailingComma: "all";
+    readonly printWidth: 100;
+    readonly tabWidth: 2;
+};

package/dist/config/prettierConfig.js

@@ -0,0 +1,8 @@
+export const prettierConfig = {
+    semi: true,
+    singleQuote: true,
+    jsxSingleQuote: false,
+    trailingComma: 'all',
+    printWidth: 100,
+    tabWidth: 2,
+};

package/dist/format.d.ts

@@ -0,0 +1,3 @@
+type MessageFormatValues = Record<string, string | number>;
+export declare const interpolateMessageTemplate: (template: string, values: MessageFormatValues) => string;
+export {};

package/dist/format.js

@@ -0,0 +1,9 @@
+export const interpolateMessageTemplate = (template, values) => {
+    return template.replace(/\{(\w+)\}/g, (match, key) => {
+        const value = values[key];
+        if (value === undefined) {
+            return match;
+        }
+        return String(value);
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,21 @@
+export { tokens, desktopViewportQuery } from './tokens.js';
+export * from './typography.js';
+export { Locale } from './locale/localization.js';
+export type { AppLocale, LocaleConfig, LocaleDefinition, LocalePrefixStrategy, TextDirection, LocalizedContentDictionary, LocalizedPageMetadata, } from './locale/types.js';
+export { localeConfig } from './locale/config.js';
+export { isSupportedLocale, resolveLocale, stripLocalePrefix, buildLocalizedPath, } from './locale/routes.js';
+export { useCurrentLocale, useApplyLocaleDocumentAttributes } from './locale/hooks.js';
+export { setStoredLocalePreference, getStoredLocalePreference, hasStoredLocalePreference, localePreferenceStorageKey, } from './locale/localePreference.js';
+export type { SeoMeta } from './Seo/types.js';
+export { Seo, type RouteSeoMeta } from './Seo/index.js';
+export { LocaleSelector } from './LocaleSelector/index.js';
+export { Header, type HeaderPresentationVariant, type HeaderPresentationState, type HeaderNavChild, type HeaderNavItem, type HeaderContent, type HeaderWaitlistCta, } from './Header/index.js';
+export { normalizePathname } from './Header/helper.js';
+export { Footer, type FooterLinkItem, type FooterLinkGroup, type FooterLegalLinkItem, type FooterContent, } from './Footer/index.js';
+export { navigationContent } from './navigationContent.js';
+export type { NavigationContent } from './navigationContent.js';
+export { interpolateMessageTemplate } from './format.js';
+export { SectionAnchorNav, type SectionAnchorNavItem } from './SectionAnchorNav/index.js';
+export { scrollToSectionHeading } from './scrollToSectionHeading.js';
+export { PillButton, FilterPillRow } from './FilterPillGroup/index.js';
+export { SearchField, type SearchFieldProps } from './SearchField/index.js';

package/dist/index.js

@@ -0,0 +1,18 @@
+export { tokens, desktopViewportQuery } from './tokens.js';
+export * from './typography.js';
+export { Locale } from './locale/localization.js';
+export { localeConfig } from './locale/config.js';
+export { isSupportedLocale, resolveLocale, stripLocalePrefix, buildLocalizedPath, } from './locale/routes.js';
+export { useCurrentLocale, useApplyLocaleDocumentAttributes } from './locale/hooks.js';
+export { setStoredLocalePreference, getStoredLocalePreference, hasStoredLocalePreference, localePreferenceStorageKey, } from './locale/localePreference.js';
+export { Seo } from './Seo/index.js';
+export { LocaleSelector } from './LocaleSelector/index.js';
+export { Header, } from './Header/index.js';
+export { normalizePathname } from './Header/helper.js';
+export { Footer, } from './Footer/index.js';
+export { navigationContent } from './navigationContent.js';
+export { interpolateMessageTemplate } from './format.js';
+export { SectionAnchorNav } from './SectionAnchorNav/index.js';
+export { scrollToSectionHeading } from './scrollToSectionHeading.js';
+export { PillButton, FilterPillRow } from './FilterPillGroup/index.js';
+export { SearchField } from './SearchField/index.js';

package/dist/locale/config.d.ts

@@ -0,0 +1,5 @@
+import type { AppLocale, LocaleConfig } from './types.js';
+export declare const DEFAULT_LOCALE: AppLocale;
+export declare const FALLBACK_LOCALE: AppLocale;
+export declare const SUPPORTED_LOCALES: AppLocale[];
+export declare const localeConfig: LocaleConfig;

package/dist/locale/config.js

@@ -0,0 +1,103 @@
+import { Locale } from './localization.js';
+export const DEFAULT_LOCALE = Locale.English;
+export const FALLBACK_LOCALE = Locale.English;
+export const SUPPORTED_LOCALES = [
+    Locale.English,
+    Locale.Indonesian,
+    Locale.Portuguese,
+    Locale.EnglishPhilippines,
+    Locale.Vietnamese,
+    Locale.EnglishNigeria,
+    Locale.SpanishMexico,
+    Locale.EnglishIndia,
+    Locale.Korean,
+];
+export const localeConfig = {
+    defaultLocale: DEFAULT_LOCALE,
+    fallbackLocale: FALLBACK_LOCALE,
+    supportedLocales: SUPPORTED_LOCALES,
+    localePrefixStrategy: 'as-needed',
+    locales: {
+        [Locale.English]: {
+            code: Locale.English,
+            label: 'English',
+            selectorLabel: 'Global (English)',
+            formatLocale: 'en-US',
+            textDirection: 'ltr',
+            pathPrefix: Locale.English,
+            isDefault: true,
+        },
+        [Locale.EnglishIndia]: {
+            code: Locale.EnglishIndia,
+            label: 'English (India)',
+            selectorLabel: 'India (English)',
+            formatLocale: 'en-IN',
+            textDirection: 'ltr',
+            pathPrefix: Locale.EnglishIndia,
+            isDefault: false,
+        },
+        [Locale.EnglishNigeria]: {
+            code: Locale.EnglishNigeria,
+            label: 'English (Nigeria)',
+            selectorLabel: 'Nigeria (English)',
+            formatLocale: 'en-NG',
+            textDirection: 'ltr',
+            pathPrefix: Locale.EnglishNigeria,
+            isDefault: false,
+        },
+        [Locale.EnglishPhilippines]: {
+            code: Locale.EnglishPhilippines,
+            label: 'English (Philippines)',
+            selectorLabel: 'Philippines (English)',
+            formatLocale: 'en-PH',
+            textDirection: 'ltr',
+            pathPrefix: Locale.EnglishPhilippines,
+            isDefault: false,
+        },
+        [Locale.Portuguese]: {
+            code: Locale.Portuguese,
+            label: 'Portuguese (Brazil)',
+            selectorLabel: 'Brasil (Português)',
+            formatLocale: 'pt-BR',
+            textDirection: 'ltr',
+            pathPrefix: Locale.Portuguese,
+            isDefault: false,
+        },
+        [Locale.Indonesian]: {
+            code: Locale.Indonesian,
+            label: 'Indonesian (Indonesia)',
+            selectorLabel: 'Indonesia (Bahasa Indonesia)',
+            formatLocale: 'id-ID',
+            textDirection: 'ltr',
+            pathPrefix: Locale.Indonesian,
+            isDefault: false,
+        },
+        [Locale.Korean]: {
+            code: Locale.Korean,
+            label: 'Korean (South Korea)',
+            selectorLabel: '대한민국 (한국어)',
+            formatLocale: 'ko-KR',
+            textDirection: 'ltr',
+            pathPrefix: Locale.Korean,
+            isDefault: false,
+        },
+        [Locale.SpanishMexico]: {
+            code: Locale.SpanishMexico,
+            label: 'Spanish (Mexico)',
+            selectorLabel: 'México (Español)',
+            formatLocale: 'es-MX',
+            textDirection: 'ltr',
+            pathPrefix: Locale.SpanishMexico,
+            isDefault: false,
+        },
+        [Locale.Vietnamese]: {
+            code: Locale.Vietnamese,
+            label: 'Vietnamese (Vietnam)',
+            selectorLabel: 'Việt Nam (Tiếng Việt)',
+            formatLocale: 'vi-VN',
+            textDirection: 'ltr',
+            pathPrefix: Locale.Vietnamese,
+            isDefault: false,
+        },
+    },
+};

package/dist/locale/hooks.d.ts

@@ -0,0 +1,3 @@
+import type { AppLocale } from './types.js';
+export declare const useCurrentLocale: () => AppLocale;
+export declare const useApplyLocaleDocumentAttributes: () => void;

package/dist/locale/hooks.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { localeConfig } from './config.js';
+import { getStoredLocalePreference, hasStoredLocalePreference, setStoredLocalePreference, } from './localePreference.js';
+import { buildLocalizedPath, resolveLocale, stripLocalePrefix } from './routes.js';
+export const useCurrentLocale = () => {
+    const { locale } = useParams();
+    return resolveLocale(locale);
+};
+export const useApplyLocaleDocumentAttributes = () => {
+    const locale = useCurrentLocale();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { locale: routeLocale } = useParams();
+    useEffect(() => {
+        const storedLocale = getStoredLocalePreference();
+        if (storedLocale === null || storedLocale === locale) {
+            return;
+        }
+        const canonicalPathname = routeLocale === locale ? stripLocalePrefix(location.pathname) : location.pathname;
+        void navigate({
+            pathname: buildLocalizedPath(canonicalPathname, storedLocale),
+            search: location.search,
+            hash: location.hash,
+        }, { replace: true });
+    }, [locale, location.hash, location.pathname, location.search, navigate, routeLocale]);
+    useEffect(() => {
+        document.documentElement.lang = localeConfig.locales[locale].formatLocale;
+        document.documentElement.dir = localeConfig.locales[locale].textDirection;
+    }, [locale, location.pathname]);
+    useEffect(() => {
+        if (routeLocale === locale && !hasStoredLocalePreference()) {
+            setStoredLocalePreference(locale);
+        }
+    }, [locale, routeLocale]);
+};

package/dist/locale/localePreference.d.ts

@@ -0,0 +1,7 @@
+import type { AppLocale } from './types.js';
+export declare const localePreferenceStorageKey = "cronos.locale";
+type StoredLocalePreference = AppLocale | null;
+export declare const setStoredLocalePreference: (locale: AppLocale) => void;
+export declare const getStoredLocalePreference: () => StoredLocalePreference;
+export declare const hasStoredLocalePreference: () => boolean;
+export {};

package/dist/locale/localePreference.js

@@ -0,0 +1,21 @@
+import { isSupportedLocale } from './routes.js';
+export const localePreferenceStorageKey = 'cronos.locale';
+const getLocaleStorage = () => {
+    if (typeof window === 'undefined' || window.localStorage === undefined)
+        return null;
+    return window.localStorage;
+};
+export const setStoredLocalePreference = (locale) => {
+    const localeStorage = getLocaleStorage();
+    if (localeStorage === null)
+        return;
+    localeStorage.setItem(localePreferenceStorageKey, locale);
+};
+export const getStoredLocalePreference = () => {
+    const localeStorage = getLocaleStorage();
+    if (localeStorage === null)
+        return null;
+    const storedLocale = localeStorage.getItem(localePreferenceStorageKey);
+    return isSupportedLocale(storedLocale) ? storedLocale : null;
+};
+export const hasStoredLocalePreference = () => getStoredLocalePreference() !== null;

package/dist/locale/localization.d.ts

@@ -0,0 +1,11 @@
+export declare enum Locale {
+    English = "en",
+    EnglishIndia = "en-in",
+    EnglishNigeria = "en-ng",
+    EnglishPhilippines = "en-ph",
+    Indonesian = "id-id",
+    Korean = "ko-kr",
+    Portuguese = "pt-br",
+    SpanishMexico = "es-mx",
+    Vietnamese = "vi-vn"
+}

package/dist/locale/localization.js

@@ -0,0 +1,12 @@
+export var Locale;
+(function (Locale) {
+    Locale["English"] = "en";
+    Locale["EnglishIndia"] = "en-in";
+    Locale["EnglishNigeria"] = "en-ng";
+    Locale["EnglishPhilippines"] = "en-ph";
+    Locale["Indonesian"] = "id-id";
+    Locale["Korean"] = "ko-kr";
+    Locale["Portuguese"] = "pt-br";
+    Locale["SpanishMexico"] = "es-mx";
+    Locale["Vietnamese"] = "vi-vn";
+})(Locale || (Locale = {}));

package/dist/locale/routes.d.ts

@@ -0,0 +1,5 @@
+import type { AppLocale } from './types.js';
+export declare const isSupportedLocale: (value: string | null | undefined) => value is AppLocale;
+export declare const resolveLocale: (value: string | undefined) => AppLocale;
+export declare const stripLocalePrefix: (pathname: string) => string;
+export declare const buildLocalizedPath: (path: string, locale: AppLocale) => string;

package/dist/locale/routes.js

@@ -0,0 +1,32 @@
+import { localeConfig } from './config.js';
+export const isSupportedLocale = (value) => {
+    if (!value) {
+        return false;
+    }
+    return localeConfig.supportedLocales.includes(value);
+};
+export const resolveLocale = (value) => {
+    if (isSupportedLocale(value)) {
+        return value;
+    }
+    return localeConfig.fallbackLocale;
+};
+export const stripLocalePrefix = (pathname) => {
+    const [, possibleLocale, ...remainingSegments] = pathname.split('/');
+    if (!isSupportedLocale(possibleLocale)) {
+        return pathname;
+    }
+    if (remainingSegments.length === 0) {
+        return '/';
+    }
+    return `/${remainingSegments.join('/')}`;
+};
+export const buildLocalizedPath = (path, locale) => {
+    if (locale === localeConfig.defaultLocale) {
+        return path;
+    }
+    if (path === '/') {
+        return `/${locale}`;
+    }
+    return `/${locale}${path}`;
+};

package/dist/locale/types.d.ts

@@ -0,0 +1,25 @@
+import type { SeoMeta } from '../Seo/types.js';
+import type { Locale } from './localization.js';
+export type AppLocale = Locale.English | Locale.EnglishIndia | Locale.EnglishNigeria | Locale.EnglishPhilippines | Locale.Indonesian | Locale.Korean | Locale.Portuguese | Locale.SpanishMexico | Locale.Vietnamese;
+export type LocalePrefixStrategy = 'as-needed';
+export type TextDirection = 'ltr' | 'rtl';
+export interface LocaleDefinition {
+    code: AppLocale;
+    label: string;
+    selectorLabel: string;
+    formatLocale: string;
+    textDirection: TextDirection;
+    pathPrefix: string;
+    isDefault: boolean;
+}
+export interface LocaleConfig {
+    defaultLocale: AppLocale;
+    fallbackLocale: AppLocale;
+    supportedLocales: AppLocale[];
+    localePrefixStrategy: LocalePrefixStrategy;
+    locales: Record<AppLocale, LocaleDefinition>;
+}
+export type LocalizedContentDictionary<T> = Record<AppLocale, T>;
+export interface LocalizedPageMetadata extends SeoMeta {
+    locale: AppLocale;
+}

package/dist/locale/types.js

@@ -0,0 +1 @@
+export {};

package/dist/navigationContent.d.ts

@@ -0,0 +1,59 @@
+import type { LocalizedContentDictionary } from './locale/types.js';
+export interface NavigationContent {
+    header: {
+        about: string;
+        learn: string;
+        deposit: string;
+        desktop: string;
+        joinWaitlist: string;
+        waitlistEmailCta: string;
+        soon: string;
+        localeSelectorAriaLabel: string;
+    };
+    footer: {
+        ctaTitle: string;
+        emailPlaceholder: string;
+        submitLabel: string;
+        consentLabel: string;
+        consentNote: string;
+        socialHeading: string;
+        copyrightText: string;
+        legalNavLabel: string;
+        disclaimer: string[];
+        groups: {
+            cronos: string;
+            resources: string;
+            developers: string;
+        };
+        links: {
+            deposit: string;
+            learn: string;
+            brand: string;
+            newsletter: string;
+            evmDocumentation: string;
+            posDocumentation: string;
+            cronosEcosystem: string;
+            legalTermsPdf: string;
+            termsConditionsPdf: string;
+            appTermsConditions: string;
+            cookiePreferences: string;
+        };
+        socialLinks: {
+            discord: string;
+            instagram: string;
+            linkedin: string;
+            telegram: string;
+            tiktok: string;
+            x: string;
+            youtube: string;
+        };
+        waitlistForm: {
+            successMessage: string;
+            emptyEmailMessage: string;
+            invalidEmailMessage: string;
+            errorMessage: string;
+            submittingLabel: string;
+        };
+    };
+}
+export declare const navigationContent: LocalizedContentDictionary<NavigationContent>;