npm - @velocitycareerlabs/vc-renderer-sample - Versions diffs - 1.25.0-dev-build.158b56827 - Mend

@velocitycareerlabs/vc-renderer-sample 1.25.0-dev-build.158b56827

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/.eslintrc.js +128 -0
package/LICENSE +248 -0
package/README.md +46 -0
package/package.json +62 -0
package/public/index.html +40 -0
package/public/vite.svg +1 -0
package/src/App.css +5 -0
package/src/App.tsx +396 -0
package/src/assets/index.tsx +5 -0
package/src/assets/logo192.png +0 -0
package/src/assets/regular-share-blue.svg +3 -0
package/src/assets/round-share-black.svg +4 -0
package/src/assets/trash.svg +4 -0
package/src/components/PDFReport/index.tsx +248 -0
package/src/components/Sidebar/index.tsx +61 -0
package/src/components/SummaryFooter/index.tsx +23 -0
package/src/components/VcDetailsFooter/index.tsx +15 -0
package/src/index.css +13 -0
package/src/index.tsx +13 -0
package/src/mocks/credentials.tsx +769 -0
package/src/mocks/credentialsMapped.tsx +520 -0
package/src/mocks/descriptors.tsx +799 -0
package/src/mocks/index.tsx +7 -0
package/src/mocks/issuers.tsx +69 -0
package/src/mocks/status.tsx +8 -0
package/src/react-app-env.d.ts +1 -0
package/src/setupTests.ts +5 -0
package/tsconfig.json +25 -0

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,396 @@
+/* eslint-disable better-mutation/no-mutation */
+import { useCallback, useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  VcsSummaryRenderer,
+  VcDetailsRenderer,
+} from '@velocitycareerlabs/vc-renderer';
+import { Typography, Box, Button } from '@mui/material';
+import { pdf } from '@react-pdf/renderer';
+import { Sidebar } from './components/Sidebar';
+import { SummaryFooter } from './components/SummaryFooter';
+import { VcDetailsFooter } from './components/VcDetailsFooter';
+import {
+  PdfCredentialDetailsVcPrepared,
+  PdfCredentialsDetailsVcPrepared,
+  PdfCredentialDetailsVcRaw,
+  PdfCredentialsDetailsVcsRaw,
+  PdfCredentialDetailsVcPreparedMissingData,
+  PdfCredentialsDetailsVcPreparedMissingData,
+  PdfCredentialsDetailsVcsRawMissingData,
+} from './components/PDFReport';
+import {
+  CREDENTIALS,
+  ISSUERS,
+  DESCRIPTORS,
+  CREDENTIALS_MAPPED,
+  STATUS,
+} from './mocks';
+import './App.css';
+const App = () => {
+  const [vcsSelected, setVcsSelected] = useState<Record<string, boolean>>({});
+  const handleSelectMapped = useCallback((vcId?: string) => {
+    setVcsSelected((prev) => {
+      if (!vcId) return prev;
+      if (prev[vcId]) {
+        delete prev[vcId];
+        return { ...prev };
+      }
+      return { ...prev, [vcId]: true };
+    });
+  }, []);
+  const printVc = async (Component: any) => {
+    const blob = await pdf(Component).toBlob();
+    const iframe: HTMLIFrameElement = document.createElement('iframe');
+    document.body.appendChild(iframe);
+    iframe.style.display = 'none';
+    iframe.src = URL.createObjectURL(blob);
+    iframe.onload = () => {
+      setTimeout(() => {
+        iframe.focus();
+        const contectWindow = iframe?.contentWindow;
+        if (contectWindow) {
+          contectWindow.print();
+        }
+      }, 1);
+    };
+  };
+  return (
+    <div className="App">
+      <Typography variant="h6" pt={8} mb={1}>
+        Using vcsPrepared
+      </Typography>
+      <Box sx={[styles.demoContainer, styles.containerSize2]}>
+        <VcsSummaryRenderer
+          onClick={(id) => alert(`credential id: ${id}`)}
+          vcsData={{ vcsPrepared: CREDENTIALS_MAPPED }}
+          vcsStatus={STATUS}
+          vcsRecentlyAdded={{ '6703a5192f771a68797aceb1': true }}
+          onSelect={handleSelectMapped}
+          vcsSelected={vcsSelected}
+        />
+      </Box>
+      <Typography variant="h6" pt={8} mb={1}>
+        Using vcsPrepared + Footer
+      </Typography>
+      <Box sx={[styles.demoContainer, styles.containerSize2]}>
+        <VcsSummaryRenderer
+          onClick={(id) => alert(`credential id: ${id}`)}
+          vcsData={{ vcsPrepared: CREDENTIALS_MAPPED }}
+          vcsStatus={STATUS}
+          onSelect={handleSelectMapped}
+          vcsSelected={vcsSelected}
+          Footer={SummaryFooter}
+        />
+      </Box>
+      <Typography variant="h6" pt={8} mb={1}>
+        Using vcsPrepared + Styles
+      </Typography>
+      <Box sx={[styles.demoContainer, styles.containerSize2]}>
+        <VcsSummaryRenderer
+          onClick={(id) => alert(`credential id: ${id}`)}
+          vcsData={{ vcsPrepared: CREDENTIALS_MAPPED }}
+          vcsStatus={STATUS}
+          onSelect={handleSelectMapped}
+          vcsSelected={vcsSelected}
+          style={styles.overriddenStyle}
+        />
+      </Box>
+      <Typography variant="h6" pt={8}>
+        Using raw data
+      </Typography>
+      <VcsSummaryRenderer
+        onClick={(id) => alert(`credential id: ${id}`)}
+        vcsData={{
+          vcs: CREDENTIALS,
+          descriptors: DESCRIPTORS,
+          issuers: ISSUERS,
+        }}
+        vcsStatus={STATUS}
+        isSelectable={false}
+      />
+      <Typography variant="h6" pt={8} color="red">
+        Using raw data. Missing Descriptors
+      </Typography>
+      <VcsSummaryRenderer
+        onClick={(id) => alert(`credential id: ${id}`)}
+        vcsData={{ vcs: CREDENTIALS, descriptors: {}, issuers: ISSUERS }}
+        vcsStatus={STATUS}
+        isSelectable={false}
+      />
+      <Typography variant="h6" pt={8} color="red">
+        Using raw data. Missing Issuers
+      </Typography>
+      <VcsSummaryRenderer
+        onClick={(id) => alert(`credential id: ${id}`)}
+        vcsData={{ vcs: CREDENTIALS, descriptors: DESCRIPTORS, issuers: {} }}
+        vcsStatus={STATUS}
+        isSelectable={false}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Assessments. Using vcsPrepared{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Assessments"
+        vcData={{ vcPrepared: CREDENTIALS_MAPPED[0] }}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Assessments. Using Raw Data{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Assessments"
+        vcData={{
+          vc: CREDENTIALS[0],
+          descriptor: DESCRIPTORS['AssessmentV1.1'],
+          issuer:
+            ISSUERS['did:ion:EiBMsw27IKRYIdwUOfDeBd0LnWVeG2fPxxJi9L1fvjM20g'],
+        }}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Assessments. Using Raw Data outside of
+        credentialSubject. Relative to credential root.
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Assessments"
+        vcData={{
+          vc: CREDENTIALS[7],
+          descriptor: DESCRIPTORS['AssessmentV1.1'],
+          issuer:
+            ISSUERS['did:ion:EiBMsw27IKRYIdwUOfDeBd0LnWVeG2fPxxJi9L1fvjM20g'],
+        }}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Badges & Achievements. Using vcsPrepared + Footer{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Badges & Achievements"
+        vcData={{ vcPrepared: CREDENTIALS_MAPPED[2] }}
+        Footer={VcDetailsFooter}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Contacts. Using vcsPrepared{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Contacts"
+        vcData={{ vcPrepared: CREDENTIALS_MAPPED[1] }}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Contacts. Using vcsPrepared + Footer
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Contacts"
+        vcData={{ vcPrepared: CREDENTIALS_MAPPED[1] }}
+        Footer={VcDetailsFooter}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Contacts. Using Raw Data + Footer{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Contacts"
+        vcData={{
+          vc: CREDENTIALS[1],
+          descriptor: DESCRIPTORS['EmailV1.0'],
+          issuer:
+            ISSUERS['did:ion:EiAehWmpX5mHBuc93SIhPXF8bsEx68G6mPcdIaLNGbozPA'],
+        }}
+        Footer={VcDetailsFooter}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Contacts. Using Raw Data + style
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Contacts"
+        vcData={{
+          vc: CREDENTIALS[1],
+          descriptor: DESCRIPTORS['EmailV1.0'],
+          issuer:
+            ISSUERS['did:ion:EiAehWmpX5mHBuc93SIhPXF8bsEx68G6mPcdIaLNGbozPA'],
+        }}
+        style={styles.overriddenStyle2}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Badge. Using Raw Data + Footer{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Badges & Achievements"
+        vcData={{
+          vc: CREDENTIALS[2],
+          descriptor: DESCRIPTORS.OpenBadgeCredential,
+          issuer:
+            ISSUERS['did:ion:EiBMsw27IKRYIdwUOfDeBd0LnWVeG2fPxxJi9L1fvjM20g'],
+        }}
+        Footer={VcDetailsFooter}
+      />
+      <Typography variant="h6" pt={8}>
+        Credential Details: Employment History. Using Raw Data + Sidebar{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Employment History"
+        vcData={{
+          vc: CREDENTIALS[3],
+          descriptor: DESCRIPTORS['EmploymentPastV1.1'],
+          issuer:
+            ISSUERS['did:ion:EiBMsw27IKRYIdwUOfDeBd0LnWVeG2fPxxJi9L1fvjM20g'],
+        }}
+        Sidebar={Sidebar}
+      />
+      <Typography variant="h6" pt={8} color="red">
+        Credential Details: Employment History. Using Raw Data. Missing
+        Descriptor{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Employment History"
+        vcData={{
+          vc: CREDENTIALS[3],
+          descriptor: {},
+          issuer:
+            ISSUERS['did:ion:EiBMsw27IKRYIdwUOfDeBd0LnWVeG2fPxxJi9L1fvjM20g'],
+        }}
+      />
+      <Typography variant="h6" pt={8} color="red">
+        Credential Details: Employment History. Using Raw Data. Missing Issuer{' '}
+      </Typography>
+      <VcDetailsRenderer
+        categoryTitle="Employment History"
+        vcData={{
+          vc: CREDENTIALS[3],
+          descriptor: DESCRIPTORS['EmploymentPastV1.1'],
+          issuer:
+            ISSUERS['did:ion:EiAehWmpX5mHBuc93SIhPXF8bsEx68G6mPcdIaLNGbozPA'],
+        }}
+      />
+      <Typography variant="h6" pt={8}>
+        Printable. Using vcsPrepared
+      </Typography>
+      <Button
+        onClick={() => printVc(<PdfCredentialDetailsVcPrepared />)}
+        variant="contained"
+      >
+        Print Credentail Details
+      </Button>
+      <Button
+        onClick={() => printVc(<PdfCredentialsDetailsVcPrepared />)}
+        variant="contained"
+        sx={{ marginLeft: 4 }}
+      >
+        Print Multiple Credentils
+      </Button>
+      <Typography variant="h6" pt={8}>
+        Printable. Using Raw Data
+      </Typography>
+      <Button
+        onClick={() => printVc(<PdfCredentialDetailsVcRaw />)}
+        variant="contained"
+      >
+        Print Credentail Details
+      </Button>
+      <Button
+        onClick={() => printVc(<PdfCredentialsDetailsVcsRaw />)}
+        variant="contained"
+        sx={{ marginLeft: 4 }}
+      >
+        Print Multiple Credentails
+      </Button>
+      <Typography variant="h6" pt={8}>
+        Printable. Missing Data
+      </Typography>
+      <Button
+        onClick={() => printVc(<PdfCredentialDetailsVcPreparedMissingData />)}
+        variant="contained"
+      >
+        Print Credentail wo header data
+      </Button>
+      <Button
+        onClick={() => printVc(<PdfCredentialsDetailsVcPreparedMissingData />)}
+        variant="contained"
+        sx={{ marginLeft: 4 }}
+      >
+        Print Multiple Credentails wo header data
+      </Button>
+      <Typography variant="h6" pt={8}>
+        Printable. Missing Data Raw
+      </Typography>
+      <Button
+        onClick={() => printVc(<PdfCredentialsDetailsVcsRawMissingData />)}
+        variant="contained"
+      >
+        Print Credentail missing data
+      </Button>
+    </div>
+  );
+};
+export default App;
+const styles = {
+  demoContainer: {
+    marginBottom: '2em',
+    background: 'rgb(244, 244, 244)',
+    padding: '40px',
+    borderRadius: '10px',
+    boxSizing: 'border-box',
+  },
+  containerSize2: {
+    width: '800px',
+  },
+  overriddenStyle: {
+    background: '#190048',
+    padding: '0',
+    borderRadius: '0px',
+    boxSizing: 'border-box',
+    '& > button': {
+      background: '#190048',
+      borderRadius: '0px',
+      padding: '10px',
+      color: '#FFF',
+      fontFamily: 'monospace',
+      '& > div': {
+        borderRadius: '0px',
+      },
+    },
+  },
+  overriddenStyle2: {
+    background: '#190048',
+    padding: '0',
+    borderRadius: '10px',
+    boxSizing: 'border-box',
+    '& div': {
+      background: '#190048',
+      color: '#FFF',
+    },
+    '& img': {
+      maxWidth: '50px',
+      maxHeight: '50px !important',
+      borderRadius: '0px !important',
+    },
+    '& #vcDetailsContent': {
+      padding: '10px',
+    },
+    '& #vcDetailsHeader': {
+      padding: '10px',
+      height: '100px',
+    },
+  },
+};

package/src/assets/index.tsx ADDED Viewed

@@ -0,0 +1,5 @@
+import { ReactComponent as Share } from './regular-share-blue.svg';
+import { ReactComponent as Trash } from './trash.svg';
+import { ReactComponent as RoundShare } from './round-share-black.svg';
+export { Share, Trash, RoundShare };

package/src/assets/logo192.png ADDED Viewed

Binary file

package/src/assets/regular-share-blue.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4.26083 7.906L8.245 10.294M8.23917 3.706L4.26083 6.094M11.5 2.8C11.5 3.79411 10.7165 4.6 9.75 4.6C8.7835 4.6 8 3.79411 8 2.8C8 1.80589 8.7835 1 9.75 1C10.7165 1 11.5 1.80589 11.5 2.8ZM4.5 7C4.5 7.99411 3.7165 8.8 2.75 8.8C1.7835 8.8 1 7.99411 1 7C1 6.00589 1.7835 5.2 2.75 5.2C3.7165 5.2 4.5 6.00589 4.5 7ZM11.5 11.2C11.5 12.1941 10.7165 13 9.75 13C8.7835 13 8 12.1941 8 11.2C8 10.2059 8.7835 9.4 9.75 9.4C10.7165 9.4 11.5 10.2059 11.5 11.2Z" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/round-share-black.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.499878" width="51" height="51" rx="25.5" stroke="black"/>
+<path d="M22.3478 27.2079L27.66 30.3919M27.6522 21.6079L22.3478 24.7919M32 20.3999C32 21.7254 30.9553 22.7999 29.6667 22.7999C28.378 22.7999 27.3333 21.7254 27.3333 20.3999C27.3333 19.0744 28.378 17.9999 29.6667 17.9999C30.9553 17.9999 32 19.0744 32 20.3999ZM22.6667 25.9999C22.6667 27.3254 21.622 28.3999 20.3333 28.3999C19.0447 28.3999 18 27.3254 18 25.9999C18 24.6744 19.0447 23.5999 20.3333 23.5999C21.622 23.5999 22.6667 24.6744 22.6667 25.9999ZM32 31.5999C32 32.9254 30.9553 33.9999 29.6667 33.9999C28.378 33.9999 27.3333 32.9254 27.3333 31.5999C27.3333 30.2744 28.378 29.1999 29.6667 29.1999C30.9553 29.1999 32 30.2744 32 31.5999Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/trash.svg ADDED Viewed

@@ -0,0 +1,4 @@
+<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.499878" width="51" height="51" rx="25.5" stroke="#FF3824"/>
+<path d="M17 19.9999H35M33 19.9999V33.9999C33 34.9999 32 35.9999 31 35.9999H21C20 35.9999 19 34.9999 19 33.9999V19.9999M22 19.9999V17.9999C22 16.9999 23 15.9999 24 15.9999H28C29 15.9999 30 16.9999 30 17.9999V19.9999M24 24.9999V30.9999M28 24.9999V30.9999" stroke="#FF3824" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/PDFReport/index.tsx ADDED Viewed

@@ -0,0 +1,248 @@
+import React from 'react';
+import { Document, Text, StyleSheet } from '@react-pdf/renderer';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { VcRendererPDF } from '@velocitycareerlabs/vc-renderer';
+import {
+  CREDENTIALS,
+  CREDENTIALS_MAPPED,
+  DESCRIPTORS,
+  ISSUERS,
+} from '../../mocks';
+import logo192 from '../../assets/logo192.png';
+const styles = StyleSheet.create({
+  sideBarItem: {
+    fontSize: 8,
+    fontWeight: 500,
+    color: 'rgb(51, 51, 51)',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 4,
+  },
+});
+const sidebarItems = [
+  <Text style={styles.sideBarItem}>Issuer verified</Text>,
+  <Text style={styles.sideBarItem}>Data secured</Text>,
+  <Text style={styles.sideBarItem}>Issued to Olivia Hafez</Text>,
+  <Text style={styles.sideBarItem}>Data secured</Text>,
+  <Text style={styles.sideBarItem}>In validity period</Text>,
+];
+export const PdfCredentialDetailsVcPrepared = () => {
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{ vcsPrepared: [CREDENTIALS_MAPPED[2]] }}
+        applicantName="John Doe"
+        userName="Jane Doe"
+        appLogo={logo192}
+        categoriesTitle={{
+          [CREDENTIALS_MAPPED[2].summary.id]: 'Badges & Achievements',
+        }}
+        vcsStatus={{ [CREDENTIALS_MAPPED[2].summary.id]: 'Revoked' as any }}
+        sidebarItems={{ [CREDENTIALS_MAPPED[2].summary.id]: sidebarItems }}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialsDetailsVcPrepared = () => {
+  const categoriesTitle = {
+    [CREDENTIALS_MAPPED[2].summary.id]: 'Badges & Achievements',
+    [CREDENTIALS_MAPPED[1].summary.id]: 'Employment History',
+    [CREDENTIALS_MAPPED[0].summary.id]: 'Assessments',
+  };
+  const vcsStatus = CREDENTIALS_MAPPED.reduce<{ [key: string]: string }>(
+    (acc, vc) => {
+      const { id } = vc.summary;
+      acc[id] = 'Verified';
+      return acc;
+    },
+    {}
+  );
+  const sidebarItemsMapped = CREDENTIALS_MAPPED.reduce<{
+    [key: string]: React.ReactNode[];
+  }>((acc, vc) => {
+    const { id } = vc.summary;
+    acc[id] = sidebarItems;
+    return acc;
+  }, {});
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{ vcsPrepared: CREDENTIALS_MAPPED }}
+        applicantName="John Doe"
+        userName="Jane Doe"
+        appLogo={logo192}
+        categoriesTitle={categoriesTitle}
+        vcsStatus={vcsStatus as any}
+        sidebarItems={sidebarItemsMapped}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialDetailsVcRaw = () => {
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{
+          vcs: [CREDENTIALS[0]],
+          descriptors: DESCRIPTORS,
+          issuers: ISSUERS,
+        }}
+        applicantName="John Doe"
+        userName="Jane Doe"
+        appLogo={logo192}
+        categoriesTitle={{ [CREDENTIALS[0].did]: 'Assessments' }}
+        vcsStatus={{ [CREDENTIALS[0].did]: 'Verified' as any }}
+        sidebarItems={{ [CREDENTIALS[0].did]: sidebarItems }}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialsDetailsVcsRaw = () => {
+  const categoriesTitle = {
+    [CREDENTIALS[6].did]: 'Contacts',
+    [CREDENTIALS[5].did]: 'Contacts',
+    [CREDENTIALS[4].did]: 'Documents',
+    [CREDENTIALS[3].did]: 'Employment History',
+    [CREDENTIALS[2].did]: 'Badges & Achievements',
+    [CREDENTIALS[1].did]: 'Contacts',
+    [CREDENTIALS[0].did]: 'Assessments',
+  };
+  const vcsStatus = CREDENTIALS.reduce<{ [key: string]: string }>((acc, vc) => {
+    const { did } = vc;
+    acc[did] = 'Verified';
+    return acc;
+  }, {});
+  const sidebarItemsMapped = CREDENTIALS.reduce<{
+    [key: string]: React.ReactNode[];
+  }>((acc, vc) => {
+    const { did } = vc;
+    acc[did] = sidebarItems;
+    return acc;
+  }, {});
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{
+          vcs: CREDENTIALS,
+          descriptors: DESCRIPTORS,
+          issuers: ISSUERS,
+        }}
+        applicantName="John Doe"
+        userName="Jane Doe"
+        appLogo={logo192}
+        categoriesTitle={categoriesTitle}
+        vcsStatus={vcsStatus as any}
+        sidebarItems={sidebarItemsMapped}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialDetailsVcPreparedMissingData = () => {
+  // Missing sidebarItems, applicantName, userName, appLogo, for some credentials: vcsStatus and categoriesTitle
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{ vcsPrepared: [CREDENTIALS_MAPPED[2]] }}
+        applicantName=""
+        userName=""
+        appLogo=""
+        categoriesTitle={{
+          [CREDENTIALS_MAPPED[2].summary.id]: 'Badges & Achievements',
+        }}
+        vcsStatus={{ [CREDENTIALS_MAPPED[2].summary.id]: 'Verified' as any }}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialsDetailsVcPreparedMissingData = () => {
+  const categoriesTitle = {
+    [CREDENTIALS_MAPPED[2].summary.id]: 'Badges & Achievements',
+    [CREDENTIALS_MAPPED[1].summary.id]: 'Employment History',
+  };
+  const vcsStatus = [CREDENTIALS_MAPPED[1]].reduce<{ [key: string]: string }>(
+    (acc, vc) => {
+      const { id } = vc.summary;
+      acc[id] = 'Verified';
+      return acc;
+    },
+    {}
+  );
+  const sidebarItemsMapped = [CREDENTIALS_MAPPED[1]].reduce<{
+    [key: string]: React.ReactNode[];
+  }>((acc, vc) => {
+    const { id } = vc.summary;
+    acc[id] = sidebarItems;
+    return acc;
+  }, {});
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{ vcsPrepared: CREDENTIALS_MAPPED }}
+        applicantName=""
+        userName="Jane Doe"
+        appLogo=""
+        categoriesTitle={categoriesTitle}
+        vcsStatus={vcsStatus as any}
+        sidebarItems={sidebarItemsMapped}
+      />
+    </Document>
+  );
+};
+export const PdfCredentialsDetailsVcsRawMissingData = () => {
+  const categoriesTitle = {
+    [CREDENTIALS[5].did]: 'Contacts',
+    [CREDENTIALS[4].did]: 'Documents',
+    [CREDENTIALS[3].did]: 'Employment History',
+    [CREDENTIALS[2].did]: 'Badges & Achievements',
+    [CREDENTIALS[1].did]: 'Contacts',
+  };
+  const vcsStatus = [CREDENTIALS[1]].reduce<{ [key: string]: string }>(
+    (acc, vc) => {
+      const { did } = vc;
+      acc[did] = 'Verified';
+      return acc;
+    },
+    {}
+  );
+  const sidebarItemsMapped = [CREDENTIALS[1]].reduce<{
+    [key: string]: React.ReactNode[];
+  }>((acc, vc) => {
+    const { did } = vc;
+    acc[did] = sidebarItems;
+    return acc;
+  }, {});
+  const oneIssuer = ISSUERS[CREDENTIALS[1].issuer.id];
+  return (
+    <Document>
+      <VcRendererPDF
+        vcsData={{
+          vcs: CREDENTIALS,
+          descriptors: DESCRIPTORS,
+          issuers: oneIssuer,
+        }}
+        applicantName="John Doe"
+        userName="Jane Doe"
+        appLogo={logo192}
+        categoriesTitle={categoriesTitle}
+        vcsStatus={vcsStatus as any}
+        sidebarItems={sidebarItemsMapped}
+      />
+    </Document>
+  );
+};