@learncard/react 2.10.3 → 2.10.4

package/src/declaration.d.ts

@@ -0,0 +1,21 @@
+declare module '*.jpeg' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.webp' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.png' {
+    const value: any;
+    export default value;
+}
+
+declare module '*.svg' {
+    const value: any;
+    export default value;
+}
+
+declare module 'react-barcode';

package/src/helpers/__tests__/credentialFormat.helpers.test.ts

@@ -0,0 +1,100 @@
+import { humanizeClaimLabel, formatClaimValue } from '../credentialFormat.helpers';
+
+describe('credentialFormat.helpers', () => {
+    describe('humanizeClaimLabel', () => {
+        it('handles snake_case', () => {
+            expect(humanizeClaimLabel('given_name')).toBe('Given Name');
+            expect(humanizeClaimLabel('date_of_birth')).toBe('Date Of Birth');
+        });
+
+        it('handles camelCase', () => {
+            expect(humanizeClaimLabel('givenName')).toBe('Given Name');
+            expect(humanizeClaimLabel('dateOfBirth')).toBe('Date Of Birth');
+        });
+
+        it('handles kebab-case', () => {
+            expect(humanizeClaimLabel('given-name')).toBe('Given Name');
+            expect(humanizeClaimLabel('date-of-birth')).toBe('Date Of Birth');
+        });
+
+        it('preserves all-caps acronyms', () => {
+            expect(humanizeClaimLabel('SSN')).toBe('SSN');
+            expect(humanizeClaimLabel('ID')).toBe('ID');
+        });
+
+        it('handles empty string', () => {
+            expect(humanizeClaimLabel('')).toBe('');
+        });
+    });
+
+    describe('formatClaimValue', () => {
+        it('handles null and undefined', () => {
+            expect(formatClaimValue(null)).toBe('');
+            expect(formatClaimValue(undefined)).toBe('');
+        });
+
+        it('handles booleans', () => {
+            expect(formatClaimValue(true)).toBe('Yes');
+            expect(formatClaimValue(false)).toBe('No');
+        });
+
+        it('handles strings', () => {
+            expect(formatClaimValue('hello')).toBe('hello');
+        });
+
+        it('handles full ISO date-time in long form', () => {
+            const dateStr = '2023-10-25T12:00:00Z';
+            const expected = new Date(dateStr).toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+            });
+            expect(formatClaimValue(dateStr)).toBe(expected);
+        });
+
+        it('handles date-only strings without timezone drift', () => {
+            const expected = new Date(Date.UTC(1990, 0, 1)).toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                timeZone: 'UTC',
+            });
+            expect(formatClaimValue('1990-01-01')).toBe(expected);
+        });
+
+        it('handles ancient date-only strings (no TZ rollback)', () => {
+            const expected = new Date(Date.UTC(1815, 11, 10)).toLocaleDateString(undefined, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                timeZone: 'UTC',
+            });
+            expect(formatClaimValue('1815-12-10')).toBe(expected);
+        });
+
+        it('handles numbers', () => {
+            expect(formatClaimValue(42)).toBe('42');
+            expect(formatClaimValue(3.14)).toBe('3.14');
+        });
+
+        it('handles arrays of primitives as comma-separated list', () => {
+            expect(formatClaimValue([1, 2, 3])).toBe('1, 2, 3');
+            expect(formatClaimValue(['a', 'b'])).toBe('a, b');
+        });
+
+        it('handles arrays of objects with friendly count', () => {
+            expect(formatClaimValue([{ a: 1 }, { b: 2 }])).toBe('2 items');
+            expect(formatClaimValue([{ a: 1 }])).toBe('1 item');
+        });
+
+        it('handles nested objects with humanized inline labels', () => {
+            expect(formatClaimValue({ given_name: 'Ada', family_name: 'Lovelace' })).toBe(
+                'Given Name: Ada; Family Name: Lovelace'
+            );
+        });
+
+        it('handles empty object', () => {
+            expect(formatClaimValue({})).toBe('');
+        });
+    });
+});

package/src/helpers/color.helpers.ts

@@ -0,0 +1,35 @@
+import { WalletCategoryTypes } from '../types';
+
+export const getDarkBGColor = (type: WalletCategoryTypes) => {
+    if (!type) return '';
+
+    if (type === WalletCategoryTypes?.achievements) {
+        return 'bg-orange-500';
+    } else if (type === WalletCategoryTypes?.learningHistory) {
+        return 'bg-emerald-500';
+    } else if (type === WalletCategoryTypes?.skills) {
+        return 'bg-violet-500';
+    } else if (type === WalletCategoryTypes?.jobHistory) {
+        return 'bg-blue-500';
+    } else if (type === WalletCategoryTypes?.socialBadge) {
+        return 'bg-cyan-500';
+    } else if (type === WalletCategoryTypes?.relationships) {
+        return 'bg-pink-500';
+    } else if (type === WalletCategoryTypes?.accommodations) {
+        return 'bg-amber-500';
+    } else if (type === WalletCategoryTypes?.accomplishments) {
+        return 'bg-lime-500';
+    } else if (type === WalletCategoryTypes?.events) {
+        return 'bg-fuchsia-500';
+    } else if (type === WalletCategoryTypes?.membership) {
+        return 'bg-teal-500';
+    } else if (type === WalletCategoryTypes?.goals) {
+        return 'bg-rose-500';
+    } else if (type === WalletCategoryTypes?.ids) {
+        return 'bg-yellow-500';
+    } else if (type === WalletCategoryTypes?.currency) {
+        return 'bg-cyan-500';
+    }
+
+    return 'bg-grayscale-900';
+};

package/src/helpers/credential.helpers.test.ts

@@ -0,0 +1,108 @@
+import { vi } from 'vitest';
+import { Image } from '@learncard/types';
+import {
+    getImageFromImage,
+    getNameFromProfile,
+    getImageFromProfile,
+    getInfoFromCredential,
+} from './credential.helpers';
+import { JffCredential, VC2CredentialWithValidFrom, VC2CredentialNoDate } from './test.helpers';
+
+describe('Credential Helpers', () => {
+    describe('getImageFromImage', () => {
+        it('correctly gets simple images', () => {
+            expect(getImageFromImage('nice')).toEqual('nice');
+        });
+
+        it('correctly gets complex images', () => {
+            expect(getImageFromImage({ id: 'nice', type: 'image' })).toEqual('nice');
+        });
+
+        it('returns an empty string if image is missing id', () => {
+            expect(getImageFromImage({ type: 'image' } as Image)).toEqual('');
+        });
+    });
+
+    describe('getNameFromProfile', () => {
+        it('correctly gets simple names', () => {
+            expect(getNameFromProfile('nice')).toEqual('nice');
+        });
+
+        it('correctly gets complex names', () => {
+            expect(getNameFromProfile({ name: 'nice' })).toEqual('nice');
+        });
+
+        it('returns an empty string if profile is missing name', () => {
+            expect(getNameFromProfile({ url: 'nice' })).toEqual('');
+        });
+    });
+
+    describe('getImageFromProfile', () => {
+        it('correctly gets simple names', () => {
+            expect(getImageFromProfile({ image: 'nice' })).toEqual('nice');
+        });
+
+        it('correctly gets complex names', () => {
+            expect(getImageFromProfile({ image: { id: 'nice', type: 'image' } })).toEqual('nice');
+        });
+
+        it('returns an empty string if profile is a string', () => {
+            expect(getImageFromProfile('nice')).toEqual('');
+        });
+
+        it('returns an empty string if profile image is missing id', () => {
+            expect(getImageFromProfile({ image: { type: 'image' } as Image })).toEqual('');
+        });
+    });
+
+    describe('getInfoFromCredential', () => {
+        it('correctly handles VC 1.0 credentials with issuanceDate', () => {
+            const result = getInfoFromCredential(JffCredential as any);
+            expect(result.createdAt).toEqual('27 JUL 2022');
+            expect(result.title).toEqual('Our Wallet Passed JFF Plugfest #1 2022');
+        });
+
+        it('correctly handles VC 2.0 credentials with validFrom', () => {
+            const result = getInfoFromCredential(VC2CredentialWithValidFrom as any);
+            expect(result.createdAt).toEqual('15 JAN 2024');
+            expect(result.title).toEqual('Advanced TypeScript Development');
+        });
+
+        it('gracefully handles credentials with no date fields', () => {
+            const result = getInfoFromCredential(VC2CredentialNoDate as any);
+            expect(result.createdAt).toEqual('');
+            expect(result.title).toEqual('Lifetime Learning Award');
+        });
+
+        it('prioritizes validFrom over issuanceDate when both exist', () => {
+            const credentialWithBothDates = {
+                ...JffCredential,
+                validFrom: '2024-06-01T10:00:00.000Z',
+            };
+            const result = getInfoFromCredential(credentialWithBothDates as any);
+            expect(result.createdAt).toEqual('01 JUN 2024');
+        });
+
+        it('handles invalid date formats gracefully', () => {
+            const credentialWithInvalidDate = {
+                ...JffCredential,
+                issuanceDate: 'invalid-date-string',
+            };
+            const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+            const result = getInfoFromCredential(credentialWithInvalidDate as any);
+            expect(result.createdAt).toEqual('');
+            expect(consoleSpy).toHaveBeenCalledWith(
+                'Invalid date format in credential:',
+                'invalid-date-string'
+            );
+            consoleSpy.mockRestore();
+        });
+
+        it('respects custom date format options', () => {
+            const result = getInfoFromCredential(JffCredential as any, 'yyyy-MM-dd', {
+                uppercaseDate: false,
+            });
+            expect(result.createdAt).toEqual('2022-07-27');
+        });
+    });
+});

package/src/helpers/credential.helpers.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+import { format } from 'date-fns';
+
+import {
+    Image,
+    Profile,
+    VC,
+    AchievementCredential,
+    VerificationStatusEnum,
+} from '@learncard/types';
+import { CredentialInfo, LCCategoryEnum } from '../types';
+
+import SocialBadgesIcon from '../components/svgs/SocialBadgesIcon';
+import PuzzlePiece from '../components/svgs/PuzzlePiece';
+import KeyIcon from '../components/svgs/KeyIcon';
+import User from '../components/svgs/User';
+import Trophy from '../components/svgs/Trophy';
+import Graduation from '../components/svgs/Graduation';
+import Briefcase from '../components/svgs/Briefcase';
+import AccommodationsIcon from '../components/svgs/AccommodationsIcon';
+import AccomplishmentsIcon from '../components/svgs/AccomplishmentsIcon';
+import ScoutsLogo from '../components/svgs/ScoutsLogo';
+
+export const getImageFromImage = (image: Image): string => {
+    if (typeof image === 'string') return image;
+
+    return image.id ?? '';
+};
+
+export const getNameFromProfile = (profile: Profile): string => {
+    if (typeof profile === 'string') return profile;
+
+    return profile.name || profile.displayName || '';
+};
+
+export const getImageFromProfile = (profile: Profile): string => {
+    if (typeof profile === 'string') return '';
+
+    return getImageFromImage(profile.image ?? '');
+};
+
+export const getInfoFromCredential = (
+    credential: VC | AchievementCredential,
+    dateFormat: string = 'dd MMM yyyy',
+    options: { uppercaseDate?: boolean } = { uppercaseDate: true }
+): CredentialInfo => {
+    const { issuer, issuanceDate, validFrom } = credential;
+
+    const credentialSubject = Array.isArray(credential.credentialSubject)
+        ? credential.credentialSubject[0]
+        : credential.credentialSubject;
+
+    const title = credentialSubject.achievement?.name;
+    const issuee = credentialSubject.id;
+    const imageUrl = credentialSubject.achievement?.image;
+
+    // Support both VC 2.0 (validFrom) and VC 1.0 (issuanceDate)
+    // Gracefully handle missing dates
+    const dateValue = validFrom || issuanceDate;
+    let createdAt = '';
+
+    if (dateValue) {
+        try {
+            createdAt = format(new Date(dateValue), dateFormat);
+            if (options.uppercaseDate) {
+                createdAt = createdAt.toUpperCase();
+            }
+        } catch (error) {
+            console.warn('Invalid date format in credential:', dateValue);
+            createdAt = '';
+        }
+    }
+
+    return { title, createdAt, issuer, issuee, credentialSubject, imageUrl };
+};
+
+export const getColorForVerificationStatus = (
+    status: (typeof VerificationStatusEnum)[keyof typeof VerificationStatusEnum]
+) => {
+    switch (status) {
+        case VerificationStatusEnum.Success:
+            return '#39B54A';
+        case VerificationStatusEnum.Failed:
+            return '#D01012';
+        case VerificationStatusEnum.Error:
+            return '#FFBD06';
+        default:
+            return '#000000';
+    }
+};
+
+export const getCategoryColor = (category = LCCategoryEnum.achievement) => {
+    switch (category) {
+        case LCCategoryEnum.socialBadge:
+            return 'blue-600';
+        case LCCategoryEnum.skill:
+            return 'indigo-600';
+        case LCCategoryEnum.achievement:
+            return 'pink-600';
+        case LCCategoryEnum.learningHistory:
+            return 'emerald-700';
+        case LCCategoryEnum.id:
+            return 'yellow-400';
+        case LCCategoryEnum.workHistory:
+            return 'blue-400';
+        case LCCategoryEnum.job:
+            return 'rose-600';
+        case LCCategoryEnum.course:
+            return 'emerald-700';
+        case LCCategoryEnum.currency:
+            return 'blue-600';
+        case LCCategoryEnum.membership:
+            return 'teal-500';
+        default:
+            return 'spice-600';
+    }
+};
+
+export const getCategoryPrimaryColor = (category = LCCategoryEnum.achievement) => {
+    switch (category) {
+        case LCCategoryEnum.socialBadge:
+            return 'blue';
+        case LCCategoryEnum.skill:
+            return 'indigo';
+        case LCCategoryEnum.achievement:
+            return 'pink';
+        case LCCategoryEnum.learningHistory:
+            return 'emerald';
+        case LCCategoryEnum.id:
+            return 'yellow';
+        case LCCategoryEnum.workHistory:
+            return 'cyan';
+        case LCCategoryEnum.job:
+            return 'rose';
+        case LCCategoryEnum.course:
+            return 'emerald';
+        case LCCategoryEnum.currency:
+            return 'cyan';
+        case LCCategoryEnum.membership:
+            return 'teal';
+        case LCCategoryEnum.accommodations:
+            return 'violet';
+        case LCCategoryEnum.accomplishments:
+            return 'yellow';
+        default:
+            return 'spice';
+    }
+};
+
+export const getCategoryLightColor = (category = LCCategoryEnum.achievement) => {
+    if (category === LCCategoryEnum.meritBadge) {
+        return 'sp-purple-base';
+    }
+
+    return `${getCategoryPrimaryColor(category)}-500`;
+};
+
+export const getCategoryDarkColor = (category = LCCategoryEnum.achievement) => {
+    if (category === LCCategoryEnum.meritBadge) {
+        return 'sp-purple-base';
+    }
+
+    return `${getCategoryPrimaryColor(category)}-700`;
+};
+
+export const getCategoryIcon = (category = LCCategoryEnum.achievement, size: string = '21') => {
+    switch (category) {
+        case LCCategoryEnum.socialBadge:
+            return <SocialBadgesIcon size={size} />;
+        case LCCategoryEnum.skill:
+            return <PuzzlePiece size={size} />;
+        case LCCategoryEnum.achievement:
+            return <Trophy size={size} />;
+        case LCCategoryEnum.course:
+        case LCCategoryEnum.learningHistory:
+            return <Graduation size={size} />;
+        case LCCategoryEnum.job:
+        case LCCategoryEnum.workHistory:
+            return <Briefcase size={size} />;
+        case LCCategoryEnum.id:
+            return <User size={size} />;
+        case LCCategoryEnum.membership:
+            return <KeyIcon size={size} />;
+        case LCCategoryEnum.currency:
+        case LCCategoryEnum.accommodations:
+            return <AccommodationsIcon size={size} />;
+        case LCCategoryEnum.accomplishments:
+            return <AccomplishmentsIcon size={size} />;
+        case LCCategoryEnum.meritBadge:
+            return <ScoutsLogo size={size} />;
+        case LCCategoryEnum.currency:
+        default:
+            console.log('🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥');
+            console.log('getCategoryIcon - unhandled category:', category);
+            return undefined;
+    }
+};
+
+export const categorizeSkills = (skills: any) => {
+    let categorizedSkills = skills.reduce((acc, obj) => {
+        // If the category doesn't exist in the accumulator, create a new array for it
+        if (!acc[obj.category]) {
+            acc[obj.category] = [];
+            acc[obj.category].totalSkills = 0; // Initialize totalSkills count
+            acc[obj.category].totalSubskills = 0; // Initialize totalSubskills count
+        }
+
+        // Check if the skill already exists for this category
+        let existingSkill = acc[obj.category].find(skill => skill.skill === obj.skill);
+        if (existingSkill) {
+            // Update the existing object's subskills
+            existingSkill.subskills = [
+                ...new Set(existingSkill?.subskills?.concat(obj?.subskills)),
+            ];
+        } else {
+            // Add a new object to the array for this category
+            acc[obj.category].push(obj);
+            acc[obj.category].totalSkills++; // Increment totalSkills count
+        }
+
+        // Calculate total subskills count for this category
+        let totalSubskillsCount = acc[obj.category].reduce(
+            (total, skill) => total + (skill?.subskills?.length ?? 0),
+            0
+        );
+        acc[obj.category].totalSubskillsCount = totalSubskillsCount;
+
+        return acc;
+    }, {});
+
+    return categorizedSkills;
+};
+
+export const getTotalCountOfSkills = (
+    skills: { skill: string; category: string; subSkills: string[] }[]
+) => {
+    if (!skills || skills.length === 0) return 0;
+    let totalCount = 0;
+
+    skills?.forEach(skill => {
+        totalCount++; // Increment for each skill
+
+        if (skill?.subSkills) {
+            totalCount += skill?.subSkills.length; // Increment for each subskill
+        }
+    });
+
+    return totalCount;
+};

package/src/helpers/credentialFormat.helpers.ts

@@ -0,0 +1,68 @@
+export const humanizeClaimLabel = (key: string): string => {
+    if (!key) return '';
+
+    // Preserve acronyms if all-caps
+    if (/^[A-Z]+$/.test(key)) {
+        return key;
+    }
+
+    // Convert snake_case and kebab-case to space-separated
+    let humanized = key.replace(/[_-]/g, ' ');
+
+    // Convert camelCase to space-separated
+    humanized = humanized.replace(/([a-z])([A-Z])/g, '$1 $2');
+
+    // Capitalize first letter of each word
+    return humanized
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join(' ');
+};
+
+const LONG_DATE_FORMAT: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+
+export const formatClaimValue = (value: unknown): string => {
+    if (value === null || value === undefined) {
+        return '';
+    }
+
+    if (typeof value === 'boolean') {
+        return value ? 'Yes' : 'No';
+    }
+
+    if (typeof value === 'string') {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+            const [y, m, d] = value.split('-').map(Number);
+            const date = new Date(Date.UTC(y, m - 1, d));
+            if (!isNaN(date.getTime())) {
+                return date.toLocaleDateString(undefined, { ...LONG_DATE_FORMAT, timeZone: 'UTC' });
+            }
+        }
+        if (/^\d{4}-\d{2}-\d{2}T/.test(value)) {
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                return date.toLocaleDateString(undefined, LONG_DATE_FORMAT);
+            }
+        }
+        return value;
+    }
+
+    if (typeof value === 'object') {
+        if (Array.isArray(value)) {
+            const allPrimitive = value.every(v => v === null || typeof v !== 'object');
+            if (allPrimitive) return value.map(formatClaimValue).filter(Boolean).join(', ');
+            return value.length === 1 ? '1 item' : `${value.length} items`;
+        }
+        const entries = Object.entries(value as Record<string, unknown>);
+        if (entries.length === 0) return '';
+        return entries
+            .map(([k, v]) => `${humanizeClaimLabel(k)}: ${formatClaimValue(v)}`)
+            .join('; ');
+    }
+
+    return String(value);
+};