WIP: Ycard editor integration

[Dharp02]

This PR integrates a comprehensive yCard editor into the TimeHarbor Teams feature, enabling team management through a human-friendly YAML-based contact format with full vCard conversion and storage capabilities.

https://youtube.com/shorts/fnlwNIY4QtQ?si=5s6B8i51wgRW4eVK

Older one:

Youtube Short - https://www.youtube.com/shorts/c4pUEtdIJ4E

Major Changes:

1. yCard Editor UI (client/components/teams/TeamsPage.js)

New Editor Interface: Added a full-featured YAML editor for managing team member contact information

Toggle editor view with auto-population of existing team members
Real-time YAML validation with detailed error and warning messages
Code formatting functionality with structural cleanup and normalization
Reset functionality with sample template data
Status indicators for all operations

Smart User Autocomplete: Implemented intelligent user lookup system

Searches users as you type in the name: field (minimum 2 characters)
Auto-fills complete user data (name, email, phone, address, etc.) when selected
Positioned suggestions near cursor for better UX

Individual vCard Download: Added download buttons for each team member

Generates vCard v4.0 format for individual users
Downloads as .vcf file with proper naming convention
Converts from yCard → vCard on-the-fly

Comprehensive Validation:

Validates required fields (name, email)
Checks email format with regex
Validates data structures (phone arrays, address objects)
Provides detailed error messages with line numbers
Distinguishes between errors and warnings

2. Server-Side Methods (server/methods/teams.js)

Enhanced User Management:

getUsers(): Extended to include vCard data, phone, address, and team role information
searchUsersByName(): New method for autocomplete functionality with regex search
createUserFromYCard(): Helper function to create users from yCard data with default password

yCard Processing Pipeline (saveYCardData()):

Parses YAML to yCard format
Matches users by uid, email, or username
Creates new users or updates existing ones with full contact data
Stores vCard representation in user profiles (profile.vCardData)
Automatically adds users to team membership
Comprehensive error handling with detailed reporting
Returns processing statistics (total processed, errors, actions taken)

Data Retrieval:

getYCardData(): Fetches stored yCard data for a team

3. Package Dependencies (package.json)
   Added three new dependencies:

js-yaml: ^4.1.0 - YAML parsing and stringification
yaml: ^2.8.1 - Enhanced YAML processing
zod: ^4.1.11 - Schema validation (for yCard schema validation)

Key Features:
YAML-Based Contact Management

Human-readable contact format based on yCard specification
Supports full contact information: name, email, phone, address, title, organization
Multi-person management in a single document

Bidirectional Conversion

yCard (YAML) ↔ vCard conversion using imported converter functions
Version-specific vCard generation (v3.0 for downloads)
Preserves all contact data through conversion pipeline

Team Synchronization

Load existing team members into editor
Save changes back to user profiles with vCard storage
Automatic team membership updates
Creates new users with default password when needed

Developer Experience

Real-time validation feedback
Auto-formatting with structure correction
Smart autocomplete reduces manual data entry
Clear error messages with context

Technical Implementation:

Reactive Variables: Uses Meteor's ReactiveVar for real-time UI updates
Event Handlers: Comprehensive event handling for all editor interactions
Async/Await: Modern async patterns in server methods
Error Handling: Try-catch blocks with detailed error reporting
Data Validation: Schema checks with Match and custom validation logic
User Search: Regex-based search with field projection for performance

This integration transforms team management by providing a powerful, text-based interface for bulk contact management while maintaining compatibility with standard vCard formats.

[horner]

@Dharp02 where is the video?

[horner]

Added her video to the pr direct comment.

https://youtube.com/shorts/fnlwNIY4QtQ?si=5s6B8i51wgRW4eVK

Updating the ticket with the why for this PR.

[horner]

Always be linking your PR to the ticket.

[Dharp02]

I worked on the code editor section — it was taking up too much space on the page, so I changed its display to appear as a modal when triggered by a button. I also changed the color of the “Save Changes” button from green to cyan. Additionally, I added a form modal in the Collaborator section. Whenever we want to add a new collaborator, we can fill out the form, and they will be added to the project and the database. The collaborators can then be retrieved and viewed in both the Collaboration section and the yCard Editor as well.

[Dharp02]

Short for today's update : https://youtube.com/shorts/v0Tut5rxpQA?si=-UiSecXYxy0FvKsf

Component Architecture:
"I created a standalone editor component that's completely independent of TimeHarbor. This means you can use it in any Meteor project, not just this one."
CodeMirror Integration:
"I replaced my basic textarea with CodeMirror 6, which has all the professional features you mentioned in the issue - syntax highlighting, line numbers, code folding, and more."
Completed Features:
"I've implemented the log button that automatically tracks every change made in the editor. The theme toggle is also working - you can switch between light and dark modes."
Current Blockers:
"I'm a bit stuck on how to implement the diff functionality - comparing the original data with current changes. And I still need to add the save function that converts the YAML to vCard format."

[horner]

Is this necessary

[horner]

This looks like an unrelated change

[horner]

Oh. You made this meteor. I don't want this to be a meteor app. This should be a vanilla application.

[horner]

Are we destroying everybody every time we edit isn't dangerous because of references

[Dharp02]

Youtube Short- https://www.youtube.com/shorts/5B7Iv1AvYMo

I built a custom YAML editor using Monaco to make editing smoother and more user-friendly.

Then I added live validation with js-yaml so that any mistakes in the yCard format are caught instantly.

I included activity logs and a diff view to track every change and compare edits easily.

After that, I added save, refresh, and reset options using localStorage for a better workflow.

Finally, I integrated this new React-based editor into the TimeHarbour project, replacing the old Blaze editor with a more powerful and modern one.

Built one of my favorite features a live preview card for the YAML editor.
It has three main parts:

1. Cursor detection – it tracks which person block you’re editing by monitoring your cursor position and detecting the - uid: markers.
2. Data extraction – it uses yaml.load() to safely parse and fetch that person’s info like name, email, phone, and address.
3. Card display – a side panel shows a beautifully formatted card that updates instantly as you type.

[Dharp02]

YCardManager.js
A standalone business logic class that handles all yCard YAML operations including parsing, validation, person extraction, cursor position detection, and localStorage management - completely independent of any UI framework.
YCardEditor.jsx
A clean React component providing a Monaco-based YAML editor interface with real-time card preview, diff comparison, activity logging, and theme switching - uses YCardManager for all data operations.
Architecture
Separation of concerns design where YCardManager handles all business logic (reusable in any context) while YCardEditor focuses purely on UI rendering and user interactions, making both maintainable and testable independently.