[LC-1081] Properly handle alignments field #799

smurflo2 · 2025-08-28T20:10:56Z

Overview

🎟 Relevant Jira Issues

📚 What is the context and goal of this PR?

We had some handling for the alignments field, but it wasn't quite right. So this is mostly just changing the field name from alignment to alignments. It also adds updates some types and adds the alignments field to the storybook AllFieldsCredential test credential

🥴 TL; RL:

Properly handle Obv3 alignments field

💡 Feature Breakdown (screenshots & videos encouraged!)

🛠 Important tradeoffs made:

🔍 Types of Changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Chore (refactor, documentation update, etc)

💳 Does This Create Any New Technical Debt? ( If yes, please describe and add JIRA TODOs )

No
Yes

Testing

🔬 How Can Someone QA This?

pnpm storybook (from LearnCard dir)
Check CertificateDisplayCard and VCDisplayCard2 -> All Fields Test
On the back (Details) of the credential, you should see the Alignments box

📱 🖥 Which devices would you like help testing on?

🧪 Code Coverage

Documentation

📜 Gitbook

📊 Storybook

✅ PR Checklist

Related to a Jira issue (create one if not)
My code follows style guidelines (eslint / prettier)
I have manually tested common end-2-end cases
I have reviewed my code
I have commented my code, particularly where ambiguous
New and existing unit tests pass locally with my changes
I have made corresponding changes to gitbook documentation

🚀 Ready to squash-and-merge?:

Code is backwards compatible
There is not a "Do Not Merge" label on this PR
I have thoughtfully considered the security implications of this change.
This change does not expose new public facing endpoints that do not have authentication

✨ PR Description

Purpose: Add OBv3 alignments field support to VC templates and React components to properly display credential alignments.
Main changes:

Updated VC templates to include optional alignments field and proper conditional rendering
Fixed component naming inconsistencies between AlignmentsBox and AlignmentRow
Added type definitions for Alignment import from @learncard/types
Added test credential with alignments field for storybook demonstration

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using. We'd love your feedback! 🚀}

changeset-bot · 2025-08-28T20:11:01Z

🦋 Changeset detected

Latest commit: ef94948

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@learncard/vc-templates-plugin	Patch
@learncard/react	Patch
@learncard/init	Patch
@learncard/network-brain-service	Patch
@learncard/learn-cloud-service	Patch
@learncard/chapi-example	Patch
@learncard/snap-chapi-example	Patch
@learncard/create-http-bridge	Patch
@learncard/cli	Patch
learn-card-discord-bot	Patch
@learncard/network-brain-client	Patch
@learncard/learn-cloud-client	Patch
@learncard/learn-cloud-plugin	Patch
@learncard/network-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2025-08-28T20:11:02Z

✅ Deploy Preview for learncarddocs canceled.

Name	Link
🔨 Latest commit	`ef94948`
🔍 Latest deploy log	https://app.netlify.com/projects/learncarddocs/deploys/68caf6494b57d7000742d5d0

gitstream-cm

✨ PR Review

The PR properly implements the change from 'alignment' to 'alignments' field throughout the codebase. The changes are consistent across components and templates, with appropriate type updates and test data additions.

1 issues detected:

🧹 Maintainability - Code is removed and immediately re-added in identical form, creating unnecessary version history noise.

Details: The address field code is removed and then immediately re-added in the exact same form, creating unnecessary diff noise without functional changes.
File: packages/plugins/vc-templates/src/templates.ts

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using. We'd love your feedback! 🚀}

gitstream-cm · 2025-08-28T20:13:24Z

🥷 Code experts: gerardopar, TaylorBeeston

gerardopar, TaylorBeeston have most 👩‍💻 activity in the files.
smurflo2, gerardopar have most 🧠 knowledge in the files.

See details

packages/plugins/vc-templates/src/templates.ts

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	558 additions & 534 deletions	191 additions & 563 deletions
JUN
MAY
APR

Knowledge based on git-blame:
gerardopar: 22%

packages/plugins/vc-templates/src/types.ts

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	3 additions & 0 deletions	4 additions & 1 deletions
JUN
MAY
APR

Knowledge based on git-blame:
gerardopar: 58%

packages/react-learn-card/src/components/CertificateDisplayCard/AlignmentRow.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN
MAY
APR

Knowledge based on git-blame:

packages/react-learn-card/src/components/CertificateDisplayCard/AlignmentsBox.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN
MAY
APR

Knowledge based on git-blame:

packages/react-learn-card/src/components/CertificateDisplayCard/CertificateBackFace.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	7 additions & 2 deletions
JUN
MAY
APR

Knowledge based on git-blame:
smurflo2: 58%
gerardopar: 39%

packages/react-learn-card/src/components/CertificateDisplayCard/CertificateDisplayCard.stories.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN
MAY
APR

Knowledge based on git-blame:
smurflo2: 100%

packages/react-learn-card/src/components/MeritBadgeDisplayCard/AlignmentRow.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN
MAY
APR

Knowledge based on git-blame:
smurflo2: 100%

packages/react-learn-card/src/components/MeritBadgeDisplayCard/AlignmentsBox.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN
MAY
APR

Knowledge based on git-blame:
smurflo2: 100%

packages/react-learn-card/src/components/MeritBadgeDisplayCard/MeritBadgeBackFace.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	7 additions & 2 deletions
JUN
MAY
APR

Knowledge based on git-blame:
smurflo2: 95%
gerardopar: 5%

packages/react-learn-card/src/components/VCDisplayCard2/VC2BackFace.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	5 additions & 0 deletions
JUN
MAY
APR

Knowledge based on git-blame:
gerardopar: 55%
smurflo2: 36%

packages/react-learn-card/src/components/svgs/ThreeDotVertical.tsx

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL	41 additions & 0 deletions
JUN
MAY
APR

Knowledge based on git-blame:
gerardopar: 100%

packages/react-learn-card/src/helpers/test.helpers.ts

Activity based on git-commit:

	gerardopar	TaylorBeeston
SEP
AUG
JUL
JUN		62 additions & 0 deletions
MAY
APR

Knowledge based on git-blame:
smurflo2: 91%

✨ Comment /gs review for LinearB AI review. Learn how to automate it here.

gitstream-cm

✨ PR Review

The PR properly implements the transition from singular alignment to plural alignments field to comply with Open Badges v3 specification. The changes are consistent across the codebase and include proper test data updates.

2 issues detected:

🧾 Readability - Type and component names should follow consistent naming conventions for better code readability and maintainability.

Details: The type interface is named AlignmentsRowProps while the component function is named AlignmentRow, creating inconsistent naming convention that differs from the CertificateDisplayCard version which uses AlignmentRowProps.
File: packages/react-learn-card/src/components/MeritBadgeDisplayCard/AlignmentRow.tsx (4-4)

🧹 Maintainability - Duplicated code across multiple components increases maintenance burden and risk of inconsistent updates.

Details: The AlignmentRow component in MeritBadgeDisplayCard is identical to the one in CertificateDisplayCard, creating unnecessary code duplication that increases maintenance overhead and potential for inconsistencies.
File: packages/react-learn-card/src/components/MeritBadgeDisplayCard/AlignmentRow.tsx

Generated by LinearB AI and added by gitStream.
_{AI-generated content may contain inaccuracies. Please verify before using. We'd love your feedback! 🚀}

gitstream-cm · 2025-09-17T17:58:57Z

packages/react-learn-card/src/components/MeritBadgeDisplayCard/AlignmentRow.tsx

 import React from 'react';
 import CaretRightFilled from '../../assets/images/CaretRightFilled.svg';

 type AlignmentsRowProps = {


🧾 Readability - Inconsistent Naming: Rename the type from AlignmentsRowProps to AlignmentRowProps to maintain consistency with the component name and match the pattern used in the CertificateDisplayCard version.

Suggested change

type AlignmentsRowProps = {

type AlignmentRowProps = {

smurflo2 added 3 commits August 27, 2025 11:36

Update for alignments

136c296

add storybook tests

aca861e

changeset

f3e39f6

smurflo2 requested review from goblincore, TaylorBeeston, gerardopar and rhen92 August 28, 2025 20:10

smurflo2 temporarily deployed to ci-tests August 28, 2025 20:11 — with GitHub Actions Inactive

gitstream-cm bot reviewed Aug 28, 2025

View reviewed changes

gitstream-cm bot added the 5 min review label Aug 28, 2025

fix react svg

ef94948

smurflo2 temporarily deployed to ci-tests September 17, 2025 17:56 — with GitHub Actions Inactive

gitstream-cm bot reviewed Sep 17, 2025

View reviewed changes

gitstream-cm bot added the 10 min review label Sep 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[LC-1081] Properly handle alignments field #799

[LC-1081] Properly handle alignments field #799

smurflo2 commented Aug 28, 2025 •

edited by gitstream-cm bot

Loading

Uh oh!

changeset-bot bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

netlify bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

gitstream-cm bot left a comment

Uh oh!

gitstream-cm bot commented Aug 28, 2025 •

edited

Loading

Uh oh!

gitstream-cm bot left a comment

Uh oh!

gitstream-cm bot Sep 17, 2025

Uh oh!

Uh oh!

[LC-1081] Properly handle alignments field #799

Are you sure you want to change the base?

[LC-1081] Properly handle alignments field #799

Conversation

smurflo2 commented Aug 28, 2025 • edited by gitstream-cm bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

🎟 Relevant Jira Issues

📚 What is the context and goal of this PR?

🥴 TL; RL:

💡 Feature Breakdown (screenshots & videos encouraged!)

🛠 Important tradeoffs made:

🔍 Types of Changes

💳 Does This Create Any New Technical Debt? ( If yes, please describe and add JIRA TODOs )

Testing

🔬 How Can Someone QA This?

📱 🖥 Which devices would you like help testing on?

🧪 Code Coverage

Documentation

📜 Gitbook

📊 Storybook

✅ PR Checklist

🚀 Ready to squash-and-merge?:

✨ PR Description

Uh oh!

changeset-bot bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for learncarddocs canceled.

Uh oh!

gitstream-cm bot left a comment

Choose a reason for hiding this comment

✨ PR Review

Uh oh!

gitstream-cm bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gitstream-cm bot left a comment

Choose a reason for hiding this comment

✨ PR Review

Uh oh!

gitstream-cm bot Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

smurflo2 commented Aug 28, 2025 •

edited by gitstream-cm bot

Loading

changeset-bot bot commented Aug 28, 2025 •

edited

Loading

netlify bot commented Aug 28, 2025 •

edited

Loading

gitstream-cm bot commented Aug 28, 2025 •

edited

Loading