@learncard/react 2.10.3 → 2.10.5

package/src/components/VCDisplayCard2/MediaAttachmentsBox.tsx

@@ -0,0 +1,306 @@
+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) => {
+    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,
+    };
+};
+
+const defaultGetVideoMetadata = async (url: string) => {
+    const isYoutube = url.includes('youtube');
+    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));
+
+    if (fetchFailed) return;
+
+    return {
+        title: metadata.title,
+        imageUrl: metadata.thumbnail_url,
+        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="media-attachments-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full">
+            <h3 className="text-[20px] leading-[20px] text-grayscale-900">Media 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);
+                            const iconTop = title || baseUrl;
+
+                            innerContent = (
+                                <div
+                                    className="absolute top-0 left-0 right-0 bottom-0 bg-cover bg-no-repeat 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]"
+                                    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 ${iconTop ? 'top-[10px]' : 'bottom-[10px]'
+                                            } left-[10px] z-10 flex items-center gap-[5px]`}
+                                    >
+                                        {metadata?.imageUrl && <VideoIcon />}
+                                        {metadata?.videoLength && (
+                                            <span className="leading-[23px]">
+                                                {metadata.videoLength}
+                                            </span>
+                                        )}
+                                    </div>
+                                    {baseUrl && <span className="font-[600]">{baseUrl}</span>}
+                                    {title && <span className="line-clamp-2">{title}</span>}
+                                </div>
+                            );
+                        } else {
+                            innerContent = (
+                                <div className="absolute top-0 left-0 right-0 bottom-0 h-full w-full flex items-center justify-center">
+                                    <img className="rounded-[15px] 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 (
+                                <button
+                                    key={index}
+                                    className={className}
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        handleMediaAttachmentClick(media.url, media.type);
+                                    }}
+                                >
+                                    {innerContent}
+                                </button>
+                            );
+                        }
+
+                        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" />}
+                                    <span className="text-grayscale-900 font-[400]">
+                                        {docOrLink.title ?? 'No title'}
+                                    </span>
+                                </div>
+                                {docOrLink.type === 'document' && metadata && (
+                                    <a
+                                        href={docOrLink.url}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                        className="text-grayscale-600 font-[600] px-[5px] 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-[600] px-[5px] hover:underline"
+                                        onClick={e => e.stopPropagation()}
+                                    >
+                                        {baseUrl}
+                                    </a>
+                                )}
+                            </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/VCDisplayCard2/RibbonEnd.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+const RibbonEnd: React.FC<{ side: 'left' | 'right'; className?: string; height?: string }> = ({
+    side,
+    className = '',
+    height = '64',
+}) => {
+    const halfHeight = parseInt(height) / 2;
+    return (
+        <svg
+            className={className}
+            width="30"
+            height={height}
+            viewBox={`0 0 30 ${height}`}
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            style={{ transform: `scaleX(${side === 'left' ? '1' : '-1'})` }}
+        >
+            <g filter="url(#filter0_d_4620_22659)">
+                <path d={`M0 0H30V${height}H0L6.36364 ${halfHeight}L0 0Z`} fill="white" />
+                <path
+                    d={`M3.08593 2.5H27.5V${height}H3.08593L8.80922 ${halfHeight}L8.91926 30L8.80922 29.4812L3.08593 2.5Z`}
+                    stroke="#EEF2FF"
+                    strokeWidth="5"
+                />
+            </g>
+            <defs>
+                <filter
+                    id="filter0_d_4620_22659"
+                    x="0"
+                    y="0"
+                    width="30"
+                    height={height}
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset dy="4" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+                    />
+                    <feBlend
+                        mode="normal"
+                        in2="BackgroundImageFix"
+                        result="effect1_dropShadow_4620_22659"
+                    />
+                    <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="effect1_dropShadow_4620_22659"
+                        result="shape"
+                    />
+                </filter>
+            </defs>
+        </svg>
+    );
+};
+
+export default RibbonEnd;

package/src/components/VCDisplayCard2/SelectedSkills.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import TopLevelSkill from './TopLevelSkill';
+import Subskill from './Subskill';
+
+import {
+    boostCMSSKillCategories,
+    BoostCMSSKillsCategoryEnum,
+    BoostCMSCategorySkillEnum,
+    BoostCMSSubSkillEnum,
+    CATEGORY_TO_SKILLS,
+    SKILLS_TO_SUBSKILLS,
+} from '../../constants/skills';
+
+export const SelectedSkills: React.FC<{
+    skill: {
+        id: number;
+        title: string;
+        IconComponent: React.ReactNode | string;
+        iconClassName: string;
+        iconCircleClass: string;
+        category: BoostCMSSKillsCategoryEnum | string;
+        type: BoostCMSCategorySkillEnum | string;
+    };
+    skillSelected: {
+        category: BoostCMSSKillsCategoryEnum | string;
+        skill: BoostCMSCategorySkillEnum | string;
+        subskills: BoostCMSSubSkillEnum[] | string[];
+    };
+}> = ({ skill, skillSelected }) => {
+    const [expandSubSkills, setExandSubSkills] = useState<boolean>(false);
+
+    const handleExpandSubSkills = () => setExandSubSkills(!expandSubSkills);
+
+    return (
+        <>
+            <TopLevelSkill
+                skill={skill}
+                skillSelected={skillSelected}
+                handleExpandSubSkills={handleExpandSubSkills}
+            />
+            {skillSelected && skillSelected.subskills.length > 0 && expandSubSkills && (
+                <div className="w-full flex items-center justify-end">
+                    <div className="w-[95%] flex items-center flex-col">
+                        {skillSelected.subskills.map((subSkill, i) => {
+                            const subskillSelected = skillSelected?.subskills?.includes(
+                                subSkill as BoostCMSSubSkillEnum
+                            );
+
+                            const _subSkill: any = SKILLS_TO_SUBSKILLS[
+                                skill.type as BoostCMSCategorySkillEnum
+                            ]?.find((ss: any) => ss.type === subSkill);
+
+                            return (
+                                <Subskill
+                                    key={i}
+                                    skill={skill}
+                                    subSkill={_subSkill}
+                                    subskillSelected={subskillSelected}
+                                />
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default SelectedSkills;

package/src/components/VCDisplayCard2/SkillsBox.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+
+import {
+    boostCMSSKillCategories,
+    BoostCMSSKillsCategoryEnum,
+    CATEGORY_TO_SKILLS,
+    SKILLS_TO_SUBSKILLS,
+} from '../../constants/skills';
+
+import SelectedSkills from './SelectedSkills';
+import PuzzlePiece from '../svgs/PuzzlePiece';
+
+const SkillsBox: React.FC<{
+    skills: { category: string; skill: string; subSkills: string[] }[];
+}> = ({ skills }) => {
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative">
+            <div className="flex items-center justify-start">
+                <div className="bg-violet-500 rounded-full flex items-center justify-center h-[30px] w-[30px] p-1">
+                    <PuzzlePiece className="text-white" fill="#fff" />
+                </div>{' '}
+                <h3 className="text-[20px] leading-[20px] text-grayscale-900 ml-2">Skills</h3>
+            </div>
+
+            {skills.length > 0 && (
+                <div className="pt-0 pb-4 flex items-center justify-center flex-col w-full">
+                    {skills.map((_skill, index) => {
+                        const category = boostCMSSKillCategories.find(
+                            c => c.type === _skill.category
+                        );
+                        const skill: any = CATEGORY_TO_SKILLS[
+                            _skill.category as BoostCMSSKillsCategoryEnum
+                        ].find(s => s.type === _skill.skill);
+                        const subSkills = SKILLS_TO_SUBSKILLS[_skill.skill];
+
+                        const selectedSkills = skills ?? [];
+                        const skillSelected: any = selectedSkills.find(s => s.skill === skill.type);
+
+                        return (
+                            <SelectedSkills
+                                key={index}
+                                skill={skill}
+                                skillSelected={skillSelected}
+                            />
+                        );
+                    })}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default SkillsBox;

package/src/components/VCDisplayCard2/Subskill.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import {
+    BoostCMSCategorySkillEnum,
+    boostCMSSKillCategories,
+    BoostCMSSKillsCategoryEnum,
+    BoostCMSSubSkillEnum,
+} from '../../constants/skills';
+
+const Subskill: React.FC<{
+    skill: {
+        id: number;
+        title: string;
+        IconComponent: React.ReactNode | string;
+        iconClassName: string;
+        iconCircleClass: string;
+        category: BoostCMSSKillsCategoryEnum | string;
+        type: BoostCMSCategorySkillEnum | string;
+    };
+    subSkill: {
+        id: number;
+        title: string;
+        type: BoostCMSSubSkillEnum | string;
+    };
+    subskillSelected: boolean;
+}> = ({ subskillSelected, skill, subSkill }) => {
+    const { title, IconComponent, type, category } = skill;
+
+    const _category = boostCMSSKillCategories.find(c => c.type === category);
+
+    return (
+        <div className="flex items-center justify-between w-full mb-4  bg-violet-100 rounded-[20px]">
+            <div className="flex items-center justify-start w-[90%] px-[6px] py-[10px] overflow-hidden">
+                <div className="rounded-full h-[50px] w-[50px]">
+                    <img src={IconComponent as string} alt="skill icon" className="w-full h-full" />
+                </div>
+                <div className="flex flex-col items-start justify-center ml-2">
+                    <p className="font-poppins text-left text-violet-800 font-semibold text-xs">
+                        {_category?.title} / {skill?.title}
+                    </p>
+                    <p className="text-black font-poppins text-left text-base font-normal">
+                        {subSkill?.title}
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Subskill;

package/src/components/VCDisplayCard2/TopLevelSkill.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import {
+    BoostCMSCategorySkillEnum,
+    boostCMSSKillCategories,
+    BoostCMSSKillsCategoryEnum,
+    BoostCMSSubSkillEnum,
+} from '../../constants/skills';
+
+const TopLevelSkill: React.FC<{
+    skill: {
+        id: number;
+        title: string;
+        IconComponent: React.ReactNode | string;
+        iconClassName: string;
+        iconCircleClass: string;
+        category: BoostCMSSKillsCategoryEnum | string;
+        type: BoostCMSCategorySkillEnum | string;
+    };
+    skillSelected: {
+        category: BoostCMSSKillsCategoryEnum | string;
+        skill: BoostCMSCategorySkillEnum | string;
+        subskills: BoostCMSSubSkillEnum[] | string[];
+    };
+
+    handleExpandSubSkills?: () => void;
+}> = ({ skillSelected, skill, handleExpandSubSkills }) => {
+    const { title, IconComponent, type, category } = skill;
+
+    const _category = boostCMSSKillCategories.find(c => c.type === category);
+
+    const subSkills = skillSelected.subskills ?? [];
+    const subSkillsCount = skillSelected.subskills.length ?? 0;
+    const isClickable = subSkills?.length > 0;
+    return (
+        <button
+            onClick={isClickable ? handleExpandSubSkills : undefined}
+            disabled={!isClickable}
+            className={`flex items-center justify-between w-full mb-4 bg-violet-100 rounded-[20px]`}
+        >
+            <div className="flex items-center justify-start w-[80%] px-[6px] py-[10px] overflow-hidden">
+                <div className="rounded-full h-[50px] w-[50px]">
+                    <img src={IconComponent as string} alt="skill icon" className="w-full h-full" />
+                </div>
+                <div className="flex flex-col items-start justify-center ml-2">
+                    <p className="font-poppins text-left text-violet-800 font-semibold text-xs">
+                        {_category?.title}
+                    </p>
+                    <p className="text-black font-poppins text-left text-xs font-normal">{title}</p>
+                </div>
+            </div>
+            {subSkills?.length > 0 && (
+                <div className="flex items-center justify-center rounded-full bg-white mr-4 h-[40px] w-[40px]">
+                    <div className="text-black font-bold flex items-center justify-center text-center font-poppins">
+                        +{subSkillsCount}
+                    </div>
+                </div>
+            )}
+        </button>
+    );
+};
+
+export default TopLevelSkill;