@learncard/react 2.10.3 → 2.10.4

package/src/components/CertificateDisplayCard/MediaAttachmentsBox.tsx

@@ -0,0 +1,347 @@
+import React, { useEffect, useState } from 'react';
+import prettyBytes from 'pretty-bytes';
+
+import Camera from '../svgs/Camera';
+import LinkIcon from '../svgs/LinkIcon';
+import VideoIcon from '../svgs/VideoIcon';
+import GenericDocumentIcon from '../svgs/GenericDocumentIcon';
+
+import { Attachment, MediaMetadata, VideoMetadata } from '../../types';
+import { getBaseUrl } from '../../helpers/url.helpers';
+import { Lightbox, LightboxItem } from '../Lightbox';
+
+type MediaAttachmentsBoxProps = {
+    attachments: Attachment[];
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+};
+
+const defaultGetFileMetadata = async (url: string) => {
+    console.log({ url });
+    const isFilestack = url.includes('filestack');
+    if (!isFilestack) return;
+
+    const urlParams = url.split('.com/')[1]?.split('/');
+    if (!urlParams) return;
+    const handle = urlParams[urlParams.length - 1];
+
+    let fetchFailed = false;
+    const data = await fetch(`https://cdn.filestackcontent.com/${handle}/metadata`)
+        .then(res => res.json())
+        .catch(() => (fetchFailed = true));
+
+    if (fetchFailed) return;
+
+    const fileExtension = data.filename.split('.')[1];
+
+    return {
+        fileExtension,
+        sizeInBytes: data.size,
+        numberOfPages: undefined,
+    };
+};
+
+// Function to determine if the URL is from YouTube
+const isYoutubeUrl = (url: string) => {
+    const youtubeUrl = new URL(url);
+    return youtubeUrl.hostname === 'www.youtube.com';
+};
+
+// Function to get the YouTube video ID from the URL
+const getYoutubeVideoId = (url: string) => {
+    const regex = /(?:\?v=|\.com\/embed\/)([^&]+)/;
+    const match = url.match(regex);
+    return match ? match[1] : '';
+};
+
+// Function to get the cover image URL for YouTube videos
+const getCoverImageUrl = (youtubeWatchUrl: string) => {
+    if (!isYoutubeUrl(youtubeWatchUrl)) {
+        return ''; // Return an empty string if the URL is not a YouTube URL
+    }
+
+    const videoId = getYoutubeVideoId(youtubeWatchUrl);
+    // Construct and return the URL for the video's cover image
+    // This URL fetches the highest resolution image available
+    return videoId ? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` : '';
+};
+
+const defaultGetVideoMetadata = async (url: string) => {
+    const isYoutube = isYoutubeUrl(url);
+    if (!isYoutube) return;
+
+    const metadataUrl = `http://youtube.com/oembed?url=${url}&format=json`;
+
+    let fetchFailed = false;
+    const metadata = await fetch(metadataUrl)
+        .then(res => res.json())
+        .catch(() => (fetchFailed = true));
+
+    const coverImageUrl = getCoverImageUrl(url);
+
+    if (fetchFailed) return { imageUrl: coverImageUrl };
+
+    return {
+        title: metadata.title,
+        imageUrl: coverImageUrl,
+        videoLength: '', // TODO figure out how to get this
+    };
+};
+
+const MediaAttachmentsBox: React.FC<MediaAttachmentsBoxProps> = ({
+    attachments,
+    getFileMetadata = defaultGetFileMetadata,
+    getVideoMetadata = defaultGetVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox = false,
+}) => {
+    const [documentMetadata, setDocumentMetadata] = useState<{
+        [documentUrl: string]: MediaMetadata | undefined;
+    }>({});
+    const [videoMetadata, setVideoMetadata] = useState<{
+        [videoUrl: string]: VideoMetadata | undefined;
+    }>({});
+
+    const mediaAttachments: Attachment[] = [];
+    const documentsAndLinks: Attachment[] = [];
+    attachments.forEach(a => {
+        switch (a.type) {
+            case 'document':
+            case 'link':
+                documentsAndLinks.push(a);
+                break;
+            case 'photo':
+            case 'video':
+                mediaAttachments.push(a);
+                break;
+            default:
+                break;
+        }
+    });
+
+    useEffect(() => {
+        const getMetadata = async (attachments: Attachment[]): Promise<any> => {
+            const docMetadata: { [docUrl: string]: MediaMetadata | undefined } = {};
+            const videoMetadata: { [videoUrl: string]: VideoMetadata | undefined } = {};
+            await Promise.all(
+                attachments.map(async attachment => {
+                    if (attachment.type === 'document') {
+                        docMetadata[attachment.url] = await getFileMetadata(attachment.url);
+                    } else if (attachment.type === 'video') {
+                        videoMetadata[attachment.url] = await getVideoMetadata(attachment.url);
+                    }
+                })
+            );
+
+            setVideoMetadata(videoMetadata);
+            setDocumentMetadata(docMetadata);
+        };
+
+        const videos = attachments.filter(a => a.type === 'video');
+        getMetadata([...documentsAndLinks, ...videos]);
+    }, []);
+
+    const [currentLightboxUrl, setCurrentLightboxUrl] = useState<string | undefined>(undefined);
+    const lightboxItems = mediaAttachments.filter(
+        a => a.type === 'photo' || a.type === 'video'
+    ) as LightboxItem[];
+    const handleMediaAttachmentClick = (
+        url: string,
+        type: 'photo' | 'document' | 'video' | 'link'
+    ) => {
+        if (type === 'photo' || type === 'video') {
+            setCurrentLightboxUrl(url);
+        }
+
+        onMediaAttachmentClick?.(url, type);
+    };
+
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full">
+            <h3 className="text-[17px] text-grayscale-900 font-poppins">Attachments</h3>
+            {mediaAttachments.length > 0 && (
+                <div className="flex gap-[5px] justify-between flex-wrap w-full">
+                    {enableLightbox && (
+                        <Lightbox
+                            items={lightboxItems}
+                            currentUrl={currentLightboxUrl}
+                            setCurrentUrl={setCurrentLightboxUrl}
+                        />
+                    )}
+                    {mediaAttachments.map((media, index) => {
+                        let innerContent: React.ReactNode;
+                        let title = media.title;
+
+                        if (media.type === 'video') {
+                            const metadata = videoMetadata[media.url];
+                            title = (title || metadata?.title) ?? '';
+                            const baseUrl = getBaseUrl(media.url);
+
+                            innerContent = (
+                                <div
+                                    className="bg-cover bg-no-repeat bg-center relative font-poppins text-white text-[12px] font-[400] leading-[17px] flex flex-col justify-end items-start p-[10px] text-left bg-rose-600 rounded-[15px] h-full"
+                                    style={{
+                                        backgroundImage: metadata?.imageUrl
+                                            ? `linear-gradient(180deg, rgba(0, 0, 0, 0) 44.20%, rgba(0, 0, 0, 0.6) 69%), url(${
+                                                  metadata?.imageUrl ?? ''
+                                              })`
+                                            : undefined,
+                                    }}
+                                >
+                                    {!metadata?.imageUrl && (
+                                        <VideoIcon size="60" className="m-auto" />
+                                    )}
+                                    <div className="absolute bottom-[10px] left-[10px] z-10 flex items-center gap-[5px]">
+                                        {metadata?.imageUrl && <VideoIcon />}
+                                        {metadata?.videoLength && (
+                                            <span className="leading-[23px]">
+                                                {metadata.videoLength}
+                                            </span>
+                                        )}
+                                    </div>
+                                </div>
+                            );
+                        } else {
+                            innerContent = (
+                                <div className="h-full w-full flex items-center justify-center">
+                                    <img className="object-cover h-full w-full" src={media.url} />
+                                    <Camera className="absolute bottom-[10px] left-[10px] z-10" />
+                                </div>
+                            );
+                        }
+
+                        const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
+
+                        if (onMediaAttachmentClick || enableLightbox) {
+                            return (
+                                <div
+                                    key={index}
+                                    className="flex bg-grayscale-100 items-center rounded-[15px] w-full"
+                                >
+                                    <button
+                                        className="relative h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0"
+                                        onClick={e => {
+                                            e.stopPropagation();
+                                            handleMediaAttachmentClick(media.url, media.type);
+                                        }}
+                                    >
+                                        {innerContent}
+                                    </button>
+                                    {title && (
+                                        <div className="text-[12px] text-grayscale-900 font-poppins px-[10px] line-clamp-3">
+                                            {title}
+                                        </div>
+                                    )}
+                                </div>
+                            );
+                        }
+
+                        return (
+                            <div key={index} className={className}>
+                                {innerContent}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+            {documentsAndLinks.length > 0 && (
+                <div className="w-full flex flex-col gap-[5px]">
+                    {documentsAndLinks.map((docOrLink, index) => {
+                        const metadata =
+                            docOrLink.type === 'document'
+                                ? documentMetadata[docOrLink.url]
+                                : undefined;
+                        const { fileExtension, sizeInBytes, numberOfPages } = metadata ?? {};
+
+                        let baseUrl = '';
+                        if (docOrLink.type === 'link') {
+                            baseUrl = getBaseUrl(docOrLink.url);
+                        }
+
+                        const innerContent = (
+                            <div className="flex flex-col gap-[5px]">
+                                <div className="flex gap-[5px] items-center">
+                                    {docOrLink.type === 'document' && (
+                                        <GenericDocumentIcon className="shrink-0" />
+                                    )}
+                                    {docOrLink.type === 'link' && <LinkIcon className="shrink-0" />}
+                                    <div className="flex flex-col w-full min-w-0">
+                                        <span className="text-grayscale-900 font-[400]">
+                                            {docOrLink.title ?? 'No title'}
+                                        </span>
+                                        {docOrLink.type === 'document' && metadata && (
+                                            <a
+                                                href={docOrLink.url}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                className="text-grayscale-700 font-[500] text-[12px] font-poppins hover:underline"
+                                                onClick={e => e.stopPropagation()}
+                                            >
+                                                {fileExtension && (
+                                                    <span className="uppercase">
+                                                        {fileExtension}
+                                                    </span>
+                                                )}
+                                                {fileExtension &&
+                                                    (numberOfPages || sizeInBytes) &&
+                                                    ' • '}
+                                                {numberOfPages && (
+                                                    <span>
+                                                        {numberOfPages} page
+                                                        {numberOfPages === 1 ? '' : 's'}
+                                                    </span>
+                                                )}
+                                                {numberOfPages && sizeInBytes && ' • '}
+                                                {sizeInBytes && (
+                                                    <span>{prettyBytes(sizeInBytes)}</span>
+                                                )}
+                                            </a>
+                                        )}
+                                        {docOrLink.type === 'link' && (
+                                            <a
+                                                href={docOrLink.url}
+                                                target="_blank"
+                                                rel="noreferrer"
+                                                className="text-indigo-500 font-[500] text-[12px] font-poppins hover:underline"
+                                                onClick={e => e.stopPropagation()}
+                                            >
+                                                {baseUrl}
+                                            </a>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+
+                        const className = `row-attachment ${docOrLink.type} bg-grayscale-100 rounded-[15px] p-[10px] w-full font-poppins text-[12px] leading-[18px] tracking-[-0.33px] text-left`;
+
+                        if (onMediaAttachmentClick) {
+                            return (
+                                <button
+                                    key={index}
+                                    className={className}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        handleMediaAttachmentClick(docOrLink.url, docOrLink.type);
+                                    }}
+                                >
+                                    {innerContent}
+                                </button>
+                            );
+                        }
+
+                        return (
+                            <div key={index} className={className}>
+                                {innerContent}
+                            </div>
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default MediaAttachmentsBox;

package/src/components/CertificateDisplayCard/TruncateTextBox.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+
+type TruncateTextBoxProps = {
+    headerText: string;
+    headerClassName?: string;
+
+    // the text to be truncated if it's too long
+    text: string;
+
+    truncateThreshold?: number;
+
+    // extra things to put at the bottom of the box
+    children?: React.ReactNode;
+    className?: string;
+};
+
+const TruncateTextBox: React.FC<TruncateTextBoxProps> = ({
+    headerText,
+    headerClassName = '',
+    text,
+    truncateThreshold = 132,
+    children,
+    className = 'truncate-text-box',
+}) => {
+    const needsTruncate = text?.length > truncateThreshold;
+    const [showFullText, setShowFullText] = useState(false);
+    const truncated = needsTruncate && !showFullText;
+
+    const displayText = truncated ? text.substring(0, truncateThreshold) : text;
+
+    return (
+        <div
+            className={`${className} w-full bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px]`}
+        >
+            <h3 className={`${headerClassName} text-[17px] text-grayscale-900 font-poppins`}>
+                {headerText}
+            </h3>
+
+            <p className="text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start">
+                {displayText}
+                {truncated && (
+                    <>
+                        ...
+                        <button
+                            className="text-indigo-500 text-[12px]"
+                            onClick={e => {
+                                e.stopPropagation();
+                                setShowFullText(true);
+                            }}
+                        >
+                            Show more
+                        </button>
+                    </>
+                )}
+                {needsTruncate && showFullText && (
+                    <button
+                        className="text-indigo-500 text-[12px]"
+                        onClick={e => {
+                            e.stopPropagation();
+                            setShowFullText(false);
+                        }}
+                    >
+                        Show less
+                    </button>
+                )}
+            </p>
+
+            {children}
+        </div>
+    );
+};
+
+export default TruncateTextBox;

package/src/components/CertificateDisplayCard/VerificationRow.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { VerificationItem, VerificationStatusEnum } from '@learncard/types';
+import { getColorForVerificationStatus } from '../../helpers/credential.helpers';
+
+import InfoBox from './InfoBox';
+import InfoIcon from '../svgs/InfoIcon';
+import AcuteCheckmark from '../svgs/AcuteCheckmark';
+import ExclamationPoint from '../svgs/ExclamationPoint';
+import X from '../svgs/X';
+import { capitalize } from '../../helpers/string.helpers';
+
+type VerificationRowProps = {
+    verification: VerificationItem;
+};
+
+const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
+    const [showInfo, setShowInfo] = useState(false);
+    const statusColor = getColorForVerificationStatus(verification.status);
+
+    const getIcon = () => {
+        switch (verification.status) {
+            case VerificationStatusEnum.Success:
+                return <AcuteCheckmark />;
+            case VerificationStatusEnum.Error:
+                return <ExclamationPoint />;
+            case VerificationStatusEnum.Failed:
+                return <X className="w-[15px] h-[15px]" />;
+        }
+    };
+
+    let primaryText = verification.check
+        ? `${verification.check}: ${verification.message}`
+        : verification.message;
+    if (verification.status === VerificationStatusEnum.Failed) {
+        primaryText = verification.message ?? verification.details ?? '';
+    }
+    primaryText = capitalize(primaryText);
+
+    const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
+
+    return (
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+            <span
+                className="font-[700] text-[11px] uppercase flex items-center gap-[3px] select-none"
+                style={{ color: statusColor }}
+            >
+                {getIcon()}
+                {verification.status}
+                {infoText && (
+                    <button className="ml-auto" onClick={() => setShowInfo(!showInfo)}>
+                        <InfoIcon color={statusColor} />
+                    </button>
+                )}
+            </span>
+            {showInfo && infoText && (
+                <InfoBox
+                    text={infoText}
+                    handleClose={() => setShowInfo(false)}
+                    backgroundColor={statusColor}
+                />
+            )}
+            <span className="text-[14px] text-grayscale-900 font-poppins">{primaryText}</span>
+        </div>
+    );
+};
+
+export default VerificationRow;

package/src/components/CertificateDisplayCard/VerificationsBox.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import VerificationRow from './VerificationRow';
+import InfoIcon from '../svgs/InfoIcon';
+import InfoBox from './InfoBox';
+
+import { VerificationItem } from '@learncard/types';
+
+type VerificationsBoxProps = {
+    verificationItems: VerificationItem[];
+};
+
+const VerificationsBox: React.FC<VerificationsBoxProps> = ({ verificationItems }) => {
+    const [showInfo, setShowInfo] = useState(false);
+
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full">
+            <div className="flex w-full items-center">
+                <h3 className="text-[17px] text-grayscale-900 font-poppins">Verifications</h3>
+                <button
+                    className="ml-auto"
+                    onClick={e => {
+                        e.stopPropagation();
+                        setShowInfo(!showInfo);
+                    }}
+                >
+                    <InfoIcon color={showInfo ? '#6366F1' : undefined} />
+                </button>
+            </div>
+            {showInfo && (
+                <InfoBox
+                    text="Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy."
+                    handleClose={() => setShowInfo(false)}
+                />
+            )}
+
+            {verificationItems.map((verification, index) => (
+                <VerificationRow key={index} verification={verification} />
+            ))}
+        </div>
+    );
+};
+
+export default VerificationsBox;

package/src/components/CertificateDisplayCard/VerifierStateBadgeAndText.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef } from 'react';
+import UnknownVerifierBadge from '../svgs/UnknownVerifierBadge';
+import VerifiedBadge from '../svgs/VerifiedBadge';
+import PersonBadge from '../svgs/PersonBadge';
+import RedFlag from '../svgs/RedFlag';
+
+export const VERIFIER_STATES = {
+    selfVerified: 'Self Issued',
+    trustedVerifier: 'Trusted Issuer',
+    unknownVerifier: 'Unknown Issuer',
+    appIssuer: 'App Issuer',
+    untrustedVerifier: 'Untrusted Issuer',
+} as const;
+export type VerifierState = (typeof VERIFIER_STATES)[keyof typeof VERIFIER_STATES];
+
+export type VerifierStateBadgeAndTextProps = {
+    verifierState: VerifierState;
+    className?: string;
+    unknownVerifierTitle?: string;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+};
+
+const VerifierStateBadgeAndText = forwardRef<HTMLButtonElement, VerifierStateBadgeAndTextProps>(
+    ({ verifierState, className = '', unknownVerifierTitle, onClick }, ref) => {
+        // For Scouts: if we have a role-based title, show it with trusted styling
+        // BUT don't overwrite self-issued or untrusted status
+        const effectiveState =
+            unknownVerifierTitle &&
+            verifierState !== VERIFIER_STATES.selfVerified &&
+            verifierState !== VERIFIER_STATES.untrustedVerifier &&
+            verifierState !== VERIFIER_STATES.appIssuer
+                ? VERIFIER_STATES.trustedVerifier
+                : verifierState;
+
+        const content = (
+            <>
+                {effectiveState === VERIFIER_STATES.selfVerified && (
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-green-dark">
+                        <PersonBadge />
+                        <span className="whitespace-nowrap">Self Issued</span>
+                    </div>
+                )}
+                {effectiveState === VERIFIER_STATES.trustedVerifier && (
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-green-600">
+                        <VerifiedBadge />
+                        <span className="whitespace-nowrap">
+                            {unknownVerifierTitle ?? 'Trusted Issuer'}
+                        </span>
+                    </div>
+                )}
+                {effectiveState === VERIFIER_STATES.unknownVerifier && (
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-orange-500">
+                        <UnknownVerifierBadge />
+                        <span className="whitespace-nowrap">
+                            {unknownVerifierTitle ?? VERIFIER_STATES.unknownVerifier}
+                        </span>
+                    </div>
+                )}
+                {effectiveState === VERIFIER_STATES.appIssuer && (
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-cyan-600">
+                        <VerifiedBadge />
+                        <span className="whitespace-nowrap">App Issuer</span>
+                    </div>
+                )}
+                {effectiveState === VERIFIER_STATES.untrustedVerifier && (
+                    <div className="flex items-center gap-0.5 font-poppins font-[500] text-[12px] leading-tight text-red-mastercard">
+                        <RedFlag />
+                        <span className="whitespace-nowrap">Untrusted Issuer</span>
+                    </div>
+                )}
+            </>
+        );
+
+        return (
+            <div className={`flex justify-center ${className}`}>
+                {onClick ? (
+                    <button
+                        ref={ref}
+                        type="button"
+                        className="appearance-none bg-transparent p-0 text-left"
+                        onClick={event => {
+                            event.stopPropagation();
+                            onClick(event);
+                        }}
+                        onMouseDown={event => event.stopPropagation()}
+                        aria-haspopup="dialog"
+                    >
+                        {content}
+                    </button>
+                ) : (
+                    <div>{content}</div>
+                )}
+            </div>
+        );
+    }
+);
+
+VerifierStateBadgeAndText.displayName = 'VerifierStateBadgeAndText';
+
+export default VerifierStateBadgeAndText;

package/src/components/CertificateDisplayCard/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './AlignmentRow';
+export * from './AlignmentsBox';
+export * from './CertDisplayCardSkillsCount';
+export * from './CertificateBackFace';
+export * from './CertificateCornerIcon';
+export * from './CertificateDisplayCard';
+export * from './CertificateFrontFace';
+export * from './CertificateImageDisplay';
+export * from './CertificateProfileImageDisplay';
+export * from './CertificateRibbon';
+export * from './InfoBox';
+export * from './MediaAttachmentsBox';
+export * from './TruncateTextBox';
+export * from './VerificationRow';
+export * from './VerificationsBox';
+export * from './VerifierStateBadgeAndText';

package/src/components/CircleCheckButton/CircleCheckButton.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { CircleCheckButtonProps } from '../../types';
+import CircleCheckButton from './CircleCheckButton';
+
+export default {
+    title: 'CircleCheckButton',
+    component: CircleCheckButton,
+    argTypes: {},
+} as Meta<typeof CircleCheckButton>;
+
+const Template: Story<CircleCheckButtonProps> = args => <CircleCheckButton {...args} />;
+
+export const CircleCheckButtonTest = Template.bind({});
+CircleCheckButtonTest.args = {
+    onClick: () => {
+        console.log('Nice');
+    },
+    className: 'circle-btn-check',
+    checked: false,
+};