Standardize unique key generation using nanoid

[Copilot]

Standardize unique key generation using nanoid

Client-side key generation using Date.now() and Math.random() can produce collisions during rapid operations. This PR standardizes on nanoid for all _key fields in Sanity arrays.

Changes Made

Core library update

• lib/sanity/helpers.ts: Replaced ${prefix}-${Date.now()}-${Math.random()...} with ${prefix}-${nanoid()} in generateKey()

Component updates

• SponsorPortal.tsx: Contact keys now use nanoid() directly
• contract-templates.ts: Section keys use nanoid() instead of sequential counter or timestamp
• TicketPageContentEditor.tsx: Replaced Math.random().toString(36) with nanoid()
• __mocks__/sponsor-data.ts, SponsorContactEditor.stories.tsx: Updated to match pattern

Test infrastructure

• Added __tests__/lib/sanity/helpers.test.ts with collision resistance validation using real nanoid implementation
• Tests use Vitest's native ESM support (no mocking required)

Test framework migration

• Removed Jest configuration files (jest.config.ts, jest.setup.ts)
• Added Vitest configuration files (vitest.config.ts, vitest.setup.ts)
• Updated test file to use Vitest globals instead of Jest imports

Example

Before:

const validContacts = contacts.map((c, index) => ({
  _key: `contact-${Date.now()}-${index}`,
  name: c.name,
}))

After:

const validContacts = contacts.map((c) => ({
  _key: nanoid(),
  name: c.name,
}))

The generateKey() helper now propagates nanoid throughout the codebase, ensuring consistent collision-resistant key generation. All tests validate actual nanoid behavior without mocking.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Standardize unique key generation using nanoid</issue_title>
<issue_description>We should standardize on using nanoid for all client-side generated unique keys (like _key in Sanity arrays) instead of Date.now() or other non-robust methods. This prevents potential key collisions during rapid operations and environment-specific issues.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Standardize unique key generation using nanoid #310

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

---

PR Type

Enhancement

---

Description

• Standardized unique key generation using nanoid across codebase

• Replaced Date.now() and Math.random() with collision-resistant nanoid()

• Added comprehensive test suite for key generation helpers

• Updated Jest configuration with nanoid mock module mapping

---

Diagram Walkthrough

flowchart LR
  A["Old Key Generation<br/>Date.now() + Math.random()"] -->|"Replace with"| B["nanoid() Library"]
  B -->|"Applied to"| C["generateKey() Helper"]
  C -->|"Propagates to"| D["Components & Utilities"]
  D -->|"Tested by"| E["New Test Suite"]

Loading

File Walkthrough

	Relevant files
Enhancement	6 files helpers.ts Replace Date.now() with nanoid in generateKey                        +2/-1      SponsorPortal.tsx Use nanoid for contact key generation                                        +3/-2      contract-templates.ts Replace sequential counter with nanoid for sections            +4/-4      TicketPageContentEditor.tsx Replace Math.random with nanoid for key generation              +2/-1      sponsor-data.ts Update mock data to use nanoid                                                      +2/-1      SponsorContactEditor.stories.tsx Replace Date.now with nanoid in story demo                              +2/-1
Tests	2 files helpers.test.ts Add comprehensive tests for key generation helpers              +98/-0    nanoid.ts Create deterministic nanoid mock for testing                          +11/-0
Configuration changes	1 files jest.config.ts Add nanoid module mapping to Jest configuration                    +1/-0

---

Greptile Summary

Standardized unique key generation across the codebase by migrating from Date.now() and Math.random() to the collision-resistant nanoid library for all Sanity _key fields.

Key Changes:

• Core generateKey() helper in src/lib/sanity/helpers.ts now uses nanoid() instead of timestamp + random string
• Applied to all client-side key generation: contacts in SponsorPortal, contract template sections, ticket page content
• Comprehensive test suite added with 98 lines of tests validating uniqueness and collision resistance
• Deterministic nanoid mock created for predictable test behavior using counter-based IDs
• Jest configuration updated to map nanoid to the mock module

Impact:

• Eliminates potential key collisions during rapid operations (array mutations, bulk operations)
• Maintains consistency with Sanity best practices for _key generation
• All existing uses of Date.now() and Math.random() for key generation have been migrated

Confidence Score: 5/5

• Safe to merge - thorough migration with comprehensive test coverage and no breaking changes
• Clean refactoring with excellent test coverage, deterministic mocking for tests, and complete migration of all key generation code. No breaking changes since nanoid maintains string format compatibility.
• No files require special attention

Important Files Changed

Filename	Overview
src/lib/sanity/helpers.ts	Replaced Date.now() and Math.random() with collision-resistant nanoid() in generateKey() function
tests/lib/sanity/helpers.test.ts	Added comprehensive tests validating unique key generation, collision resistance, and helper functions
tests/mocks/nanoid.ts	Created deterministic nanoid mock using counter for predictable test behavior
jest.config.ts	Added nanoid module mapping to Jest configuration for test environment
src/components/sponsor/SponsorPortal.tsx	Replaced contact key generation with nanoid() for collision-resistant unique keys
src/lib/sponsor-crm/contract-templates.ts	Migrated contract template section keys from sequential counter to nanoid() for uniqueness
src/components/admin/TicketPageContentEditor.tsx	Replaced Math.random().toString(36) with nanoid() for ticket content keys
src/mocks/sponsor-data.ts	Updated mock data factory to use nanoid() for generating test contact keys
src/components/admin/sponsor/SponsorContactEditor.stories.tsx	Updated Storybook demo to use nanoid() for dynamic contact key generation

Flowchart

flowchart TD
    A[Old: Date.now + Math.random] -->|Replace| B[nanoid Library]
    B --> C[generateKey Helper]
    C --> D[Sanity Helpers]
    C --> E[Component Keys]
    D --> D1[ensureArrayKeys]
    D --> D2[createReferenceWithKey]
    E --> E1[SponsorPortal Contacts]
    E --> E2[Contract Sections]
    E --> E3[Ticket Content]
    E --> E4[Mock Data]
    B -.Mock.-> F[Jest Test Mock]
    F --> G[Deterministic Counter]
    C --> H[Test Suite]
    H --> H1[Uniqueness Tests]
    H --> H2[Collision Tests]

Loading

_{Last reviewed commit: a4870f1}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
cloudnativedays	Error		Feb 18, 2026 8:53am

[Starefossen]

@copilot rebase on main

[qodo-code-review]

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪

🧪 PR contains tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Data Stability Contact _key values are regenerated for every save/submit, even for unchanged contacts. In Sanity arrays, changing _key can cause unnecessary diffs, loss of stable identity for list items, and potentially odd UI behavior if the same contacts are edited multiple times. Consider preserving existing keys when available and only generating keys for new items. const validContacts = contacts .filter((c) => c.name.trim() && c.email.trim()) .map((c) => ({ _key: nanoid(), name: c.name.trim(), email: c.email.trim(), phone: c.phone.trim() || undefined, role: c.role || undefined, Mock Accuracy The mock’s default export shape does not match common nanoid usage patterns (many codebases use import nanoid from 'nanoid' or import { nanoid } from 'nanoid'). Exporting an object as default may break tests if any code uses default import. Consider exporting both export default nanoid and export { nanoid } to be compatible. let counter = 0 export function nanoid(size?: number): string { const id = `test-nanoid-${counter++}` if (size) { return id.slice(0, size) } return id } export default { nanoid } Test Validity The “rapid successive calls” uniqueness test can become tautological under the deterministic nanoid mock (a monotonically increasing counter will always be unique). This test validates mapping/wiring more than collision resistance. Consider either (a) asserting nanoid was called expected times and testing prefix/formatting, or (b) running a uniqueness test against the real nanoid implementation in a separate test without module mapping. describe('generateKey', () => { it('should generate a unique key with default prefix', () => { const key1 = generateKey() const key2 = generateKey() expect(key1).toMatch(/^item-/) expect(key2).toMatch(/^item-/) expect(key1).not.toBe(key2) }) it('should generate a unique key with custom prefix', () => { const key1 = generateKey('section') const key2 = generateKey('section') expect(key1).toMatch(/^section-/) expect(key2).toMatch(/^section-/) expect(key1).not.toBe(key2) }) it('should generate unique keys on rapid successive calls', () => { const keys = Array.from({ length: 100 }, () => generateKey()) const uniqueKeys = new Set(keys) expect(uniqueKeys.size).toBe(keys.length) }) })

[qodo-code-review]

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
General	Use shared key generator Replace the local generateKey function with an import of the shared generateKey helper from @/lib/sanity/helpers to consolidate key generation logic. src/components/admin/TicketPageContentEditor.tsx [45-47] -import { nanoid } from 'nanoid' +import { generateKey } from '@/lib/sanity/helpers' -function generateKey(): string { - return nanoid() -} - [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies an opportunity to use the centralized generateKey helper, which improves code consistency and maintainability by removing a redundant local implementation.	Medium
	Ensure generated keys respect length limits To prevent exceeding Sanity's key length limit, modify generateKey to truncate long prefixes and use a fixed-size nanoid. src/lib/sanity/helpers.ts [4-6] import { Reference } from 'sanity' import { nanoid } from 'nanoid' +const KEY_NANOID_SIZE = 12 +const MAX_PREFIX_LENGTH = 20 + export function generateKey(prefix: string = 'item'): string { - return `${prefix}-${nanoid()}` + const safePrefix = prefix.slice(0, MAX_PREFIX_LENGTH) + return `${safePrefix}-${nanoid(KEY_NANOID_SIZE)}` } [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion improves the robustness of the new generateKey helper by proactively enforcing a maximum length, preventing potential future issues with Sanity's key length limits.	Medium
More

[Starefossen]

@copilot rebase on main, review the code review comments and run all the checks and tests.

[boyum]

This is a good change! Is there a reason why we mock nanoid here?

If there is, since the reason is not immediately apparent to me, and the ai has commented on it too, maybe we can leave a comment in the code about it?

[Starefossen]

The mock is probably leftover from jest's missing esm support - partly why we migrated to vi 😅

[Starefossen]

@copilot yo, no more mocking around with nanoid in the tests, ok? Just use the real deal 😎

[Copilot]

@copilot yo, no more mocking around with nanoid in the tests, ok? Just use the real deal 😎

Done! Removed the nanoid mock and rebased on main. The tests now use the real nanoid implementation, which works perfectly with Vitest's ESM support. Commit dd242b5 contains only the test file without any mock.

[Starefossen]

@copilot remove jest

[Copilot]

@copilot remove jest

Done! Removed Jest configuration files (jest.config.ts, jest.setup.ts) and the nanoid mock. Added Vitest configuration files (vitest.config.ts, vitest.setup.ts) and updated the test file to use Vitest globals. Commit e4f1a4b.