@learncard/react 2.10.3 → 2.10.5

package/src/components/VCDisplayBackFace/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './VCDisplayBackFace';

package/src/components/VCDisplayCard/VCDisplayCard.stories.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import VCDisplayCard, { VCDisplayCardPropsReal } from './VCDisplayCard';
+import { VerificationStatusEnum } from '@learncard/types';
+import { VC2CredentialWithValidFrom, VC2CredentialNoDate } from '../../helpers/test.helpers';
+
+export default {
+    title: 'VCDisplayCard',
+    component: VCDisplayCard,
+    argTypes: {},
+} as Meta<typeof VCDisplayCard>;
+
+const Template: Story<VCDisplayCardPropsReal> = args => <VCDisplayCard {...args} />;
+
+const cardImgOverride = (
+    <img
+        className="h-full w-full object-cover"
+        src={
+            'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Lunar_eclipse_of_2022_November_8_-_cropped.jpg/440px-Lunar_eclipse_of_2022_November_8_-_cropped.jpg'
+        }
+        alt="Credential Achievement Image"
+    />
+);
+
+const DetailsOverrideTest = (
+    <>
+        <div className="width-full">
+            <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
+                Description
+            </h6>
+            <p className="line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp">
+                override test description
+            </p>
+        </div>
+
+        <div className="width-full mt-[10px]">
+            <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased">
+                Criteria
+            </h6>
+            <p className="line-clamp-3 subpixel-antialiased text-grayscale-600 text-[14px] lc-line-clamp">
+                override critera text
+            </p>
+        </div>
+
+        <div className="width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info">
+            <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
+                Issuer
+            </h6>
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+                override details issuer override details issuer override details issuer override
+                details issuer override details issuer override details issuer
+            </p>
+        </div>
+
+        <div className="width-full mt-[10px] line-clamp-1 overflow-hidden vc-issuer-name-info">
+            <h6 className="line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased">
+                other field
+            </h6>
+            <p className="max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all">
+                override details
+            </p>
+        </div>
+    </>
+);
+
+const customHeaderTest = () => (
+    <div
+        onClick={() => console.log('test')}
+        className="rounded-[40px] bg-emerald-700 max-w-[200px] p-[5px] m-auto"
+    >
+        CUSTOM CONTENT
+    </div>
+);
+
+export const VCDisplayCardTest = Template.bind({});
+
+// See https://w3c-ccg.github.io/vc-ed/plugfest-1-2022/
+// For example data structure for plugfest
+
+VCDisplayCardTest.args = {
+    customHeaderComponent: customHeaderTest(),
+    overrideCardImageComponent: cardImgOverride,
+    overrideDetailsComponent: DetailsOverrideTest,
+    overrideCardTitle: 'Override Card Title test',
+    subjectImageComponent: (
+        <div className="flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl">
+            LC
+        </div>
+    ),
+    issuerImageComponent: (
+        <div className="flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl">
+            DC
+        </div>
+    ),
+    credential: {
+        '@context': [
+            'https://www.w3.org/2018/credentials/v1',
+            'https://w3c-ccg.github.io/vc-ed/plugfest-1-2022/jff-vc-edu-plugfest-1-context.json',
+        ],
+        type: ['VerifiableCredential', 'OpenBadgeCredential'],
+        issuer: {
+            type: 'Profile',
+            id: 'did:example:123',
+            name: 'Jobs for the Future (JFF)',
+            url: 'https://www.jff.org/',
+            image: 'https://kayaelle.github.io/vc-ed/plugfest-1-2022/images/JFF_LogoLockup.png',
+        },
+        issuanceDate: '2022-07-27T19:57:31.512Z',
+        credentialSubject: {
+            type: 'AchievementSubject',
+            id: 'did:example:123',
+            achievement: {
+                type: 'Achievement',
+                name: 'Our Wallet Passed JFF Plugfest #1 2022',
+                description: 'This wallet can display this Open Badge 3.0',
+                criteria: {
+                    type: 'Criteria',
+                    narrative:
+                        'The first cohort of the JFF Plugfest 1 in May/June of 2021 collaborated to push interoperability of VCs in education forward.',
+                },
+                image: 'https://w3c-ccg.github.io/vc-ed/plugfest-1-2022/images/plugfest-1-badge-image.png',
+            },
+        },
+    },
+    issueeOverride: {
+        name: 'Test Person',
+    },
+    issuerOverride: {
+        name: 'Dilbert Charles',
+    },
+    loading: false,
+    // className: 'bg-indigo-700',
+    verification: [
+        {
+            check: 'proof',
+            status: VerificationStatusEnum.Success,
+            message: 'Does Not Expire',
+        },
+    ],
+};
+
+export const VC2WithValidFrom = Template.bind({});
+VC2WithValidFrom.args = {
+    credential: VC2CredentialWithValidFrom as any,
+    loading: false,
+    verification: [
+        {
+            check: 'proof',
+            status: VerificationStatusEnum.Success,
+            message: 'Valid • VC 2.0 with validFrom field',
+        },
+    ],
+};
+
+export const VC2NoDate = Template.bind({});
+VC2NoDate.args = {
+    credential: VC2CredentialNoDate as any,
+    loading: false,
+    verification: [
+        {
+            check: 'proof',
+            status: VerificationStatusEnum.Success,
+            message: 'Valid • No date fields present',
+        },
+    ],
+};

package/src/components/VCDisplayCard/VCDisplayCard.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { AchievementCredential, VC, Profile, VerificationItem } from '@learncard/types';
+
+import FlippyCard from '../FlippyCard/FlippyCard';
+import VCDisplayFrontFace from '../VCDisplayFrontFace/VCDisplayFrontFace';
+import VCDisplayBackFace from '../VCDisplayBackFace/VCDisplayBackFace';
+
+import { getInfoFromCredential } from '../../helpers/credential.helpers';
+
+const FRONT_FACE = 'front';
+const BACK_FACE = 'back';
+
+export type VCDisplayCardPropsReal = {
+    credential: VC | AchievementCredential;
+    issueeOverride?: Profile;
+    issuerOverride?: Profile;
+    className?: string;
+    hideProfileBubbles?: boolean;
+    loading?: boolean;
+    verification?: VerificationItem[];
+    subjectImageComponent?: React.ReactNode;
+    issuerImageComponent?: React.ReactNode;
+    overrideDetailsComponent?: React.ReactNode;
+    overrideCardTitle?: string;
+    overrideCardImageComponent?: React.ReactNode;
+    customHeaderComponent?: React.ReactNode;
+};
+
+export const VCDisplayCard: React.FC<VCDisplayCardPropsReal> = ({
+    credential,
+    issueeOverride,
+    issuerOverride,
+    className = '',
+    loading = false,
+    verification = [],
+    hideProfileBubbles = false,
+    subjectImageComponent,
+    issuerImageComponent,
+    overrideDetailsComponent,
+    overrideCardTitle,
+    overrideCardImageComponent,
+    customHeaderComponent,
+}) => {
+    const [flipState, setFlipState] = useState(FRONT_FACE);
+    const {
+        title,
+        createdAt,
+        issuer: _issuer,
+        issuee: _issuee,
+        credentialSubject,
+    } = getInfoFromCredential(credential);
+    const issuee = issueeOverride || _issuee;
+    const issuer = issuerOverride || _issuer;
+
+    const handleFlip = () => {
+        if (flipState === FRONT_FACE) {
+            setFlipState(BACK_FACE);
+        }
+        if (flipState === BACK_FACE) {
+            setFlipState(FRONT_FACE);
+        }
+    };
+
+    return (
+        <FlippyCard flipState={flipState}>
+            <VCDisplayFrontFace
+                title={title}
+                credentialSubject={credentialSubject}
+                customHeaderComponent={customHeaderComponent}
+                issuer={issuer}
+                issuee={issuee}
+                subjectImageComponent={subjectImageComponent}
+                issuerImageComponent={issuerImageComponent}
+                overrideCardImageComponent={overrideCardImageComponent}
+                overrideCardTitle={overrideCardTitle}
+                hideProfileBubbles={hideProfileBubbles}
+                createdAt={createdAt}
+                className={className}
+                loading={loading}
+                handleClick={handleFlip}
+            />
+            <VCDisplayBackFace
+                title={title}
+                credentialSubject={credentialSubject}
+                overrideDetailsComponent={overrideDetailsComponent}
+                issuer={issuer}
+                issuee={issuee}
+                createdAt={createdAt}
+                className={className}
+                loading={loading}
+                verification={verification}
+                handleClick={handleFlip}
+            />
+        </FlippyCard>
+    );
+};
+
+export default VCDisplayCard;

package/src/components/VCDisplayCard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './VCDisplayCard';

package/src/components/VCDisplayCard2/FitText.tsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+
+interface FitTextProps {
+    text: string;
+    width: string;
+    className?: string;
+    minFontSize?: number;
+    maxFontSize?: number;
+}
+
+const FitText: React.FC<FitTextProps> = ({
+    text,
+    width,
+    className = '',
+    minFontSize = 10,
+    maxFontSize = 100,
+}) => {
+    const textRef = useRef<HTMLDivElement>(null);
+    let animationFrameId: number | null = null;
+
+    const adjustFontSize = () => {
+        if (textRef.current) {
+            const currentFontSize = parseFloat(
+                window.getComputedStyle(textRef.current).getPropertyValue('font-size')
+            );
+
+            // Need to calculate spacing based on nowrap to prevent thrashing
+            textRef.current.style.whiteSpace = 'nowrap';
+            const parentWidth = (textRef.current.parentNode as any)?.clientWidth;
+            const scrollWidth = textRef.current.scrollWidth || textRef.current.offsetWidth;
+
+            // Sometimes scrollWidth can temporarily be 0. If so, just try again next frame
+            if (scrollWidth === 0) {
+                if (animationFrameId !== null) {
+                    cancelAnimationFrame(animationFrameId);
+                }
+
+                animationFrameId = requestAnimationFrame(adjustFontSize);
+
+                return;
+            }
+
+            const newFontSize = Math.min(
+                Math.max((parentWidth / scrollWidth) * currentFontSize, minFontSize),
+                maxFontSize
+            );
+
+            textRef.current.style.fontSize = `${newFontSize}px`;
+            textRef.current.style.whiteSpace = newFontSize === minFontSize ? 'normal' : 'nowrap';
+        }
+    };
+
+    const handleResize = () => {
+        if (animationFrameId !== null) {
+            cancelAnimationFrame(animationFrameId);
+        }
+
+        animationFrameId = requestAnimationFrame(adjustFontSize);
+    };
+
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        adjustFontSize();
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            if (animationFrameId !== null) {
+                cancelAnimationFrame(animationFrameId);
+            }
+        };
+    }, [text]);
+
+    return (
+        <div style={{ width }} className={`text-center ${className}`}>
+            <span
+                className={`text-[${minFontSize}px] transition-[font-size] whitespace-nowrap`}
+                ref={textRef}
+            >
+                {text}
+            </span>
+        </div>
+    );
+};
+
+export default FitText;

package/src/components/VCDisplayCard2/InfoBox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type InfoBoxProps = {
+    text: string;
+    handleClose: () => void;
+    backgroundColor?: string;
+};
+
+const InfoBox: React.FC<InfoBoxProps> = ({ text, handleClose, backgroundColor = '#6366F1' }) => {
+    const bgColorWithOpacity = `${backgroundColor}1F`; // 12% opacity
+    return (
+        <div
+            className="info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]"
+            style={{ backgroundColor: bgColorWithOpacity }}
+        >
+            {text}{' '}
+            <button
+                onClick={e => {
+                    e.stopPropagation();
+                    handleClose();
+                }}
+                className="text-indigo-500 font-[700] select-none"
+            >
+                Close
+            </button>
+        </div>
+    );
+};
+
+export default InfoBox;

package/src/components/VCDisplayCard2/IssueHistoryBox.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
+import { IssueHistory } from '../../types';
+
+type SkillsBoxProps = {
+    issueHistory: IssueHistory[];
+    customIssueHistoryComponent?: React.ReactNode;
+};
+
+const IssueHistoryBox: React.FC<SkillsBoxProps> = ({
+    issueHistory,
+    customIssueHistoryComponent,
+}) => {
+    let renderIssueHistory = issueHistory?.map(issueItem => {
+        return (
+            <div
+                className="flex items-center issue-log-item border-b-[1px] last:border-b-0 py-[5px] border-grayscale-200 border-solid w-full"
+                key={issueItem?.id}
+            >
+                <div className="profile-thumb-img vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden">
+                    <UserProfilePicture
+                        customContainerClass={`h-full w-full object-cover select-none text-xl ${
+                            !issueItem?.thumb ? 'pt-[2px]' : ''
+                        }`}
+                        user={{ image: issueItem?.thumb, name: issueItem?.name }}
+                        alt="profile"
+                    />
+                </div>
+                <div className="ml-[9px] flex flex-col justify-center">
+                    <p className="issue-item-name font-montserrat font-semibold text-grayscale-900 text-[14px] ">
+                        {issueItem?.name}
+                    </p>
+                    <p className="issue-item-date font-montserrat  text-[12px] text-grayscale-600 ">
+                        {issueItem?.date}
+                    </p>
+                </div>
+            </div>
+        );
+    });
+
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative">
+            <h3 className="text-[20px] leading-[20px] text-grayscale-900">Issue Log</h3>
+            {!customIssueHistoryComponent ? renderIssueHistory : customIssueHistoryComponent}
+        </div>
+    );
+};
+
+export default IssueHistoryBox;