Skip to content

CARDS-MIGRATION.md

Latest commit

 

History

History
208 lines (167 loc) · 5.03 KB

CARDS-MIGRATION.md

File metadata and controls

208 lines (167 loc) · 5.03 KB

Cards Migration to Atoms Registry

Summary

Successfully migrated 12 card components from @src/components/root/cards/ to the atoms registry system.

What Was Done

1. Moved Card Files

✅ Moved 12 card components from src/components/root/cards/ to src/components/atom/

Cards Migrated:

  1. activity-goal.tsx
  2. calendar.tsx
  3. chat.tsx
  4. cookie-settings.tsx
  5. create-account.tsx
  6. data-table.tsx
  7. metric.tsx
  8. payment-method.tsx
  9. report-issue.tsx
  10. share.tsx
  11. stats.tsx
  12. team-members.tsx

2. Updated Import Paths

✅ Updated src/components/root/cards/index.tsx to re-export from @/components/atom/ instead of local files

Result: The import path @/components/root/cards still works for backward compatibility!

3. Added to Atoms Registry

✅ Added all 12 cards to src/registry/default/atoms/_registry.ts

Categories:

  • Display & Data: activity-goal, calendar, data-table, metric, stats
  • Interactive: chat, calendar, share
  • Forms: cookie-settings, create-account, payment-method, report-issue, team-members

4. Generated Documentation

✅ Created MDX documentation for all 12 cards in content/atoms/(root)/

Total Atoms: 43 (12 cards + 31 existing)

5. Built Registry

✅ Generated JSON files in public/r/styles/default/ and public/r/styles/new-york/

Usage

Browse Cards in Documentation

pnpm dev
# Visit: http://localhost:3000/atoms

Available card pages:

  • /atoms/activity-goal
  • /atoms/calendar
  • /atoms/chat
  • /atoms/cookie-settings
  • /atoms/create-account
  • /atoms/data-table
  • /atoms/metric
  • /atoms/payment-method
  • /atoms/report-issue
  • /atoms/share
  • /atoms/stats
  • /atoms/team-members

Install Cards via CLI

pnpm codebase add activity-goal
pnpm codebase add chat
pnpm codebase add payment-method

Use in Code (No Changes Required!)

// This still works! No changes needed in your app
import { CardsDemo } from "@/components/root/cards"

export default function Page() {
  return <CardsDemo />
}

The re-export in src/components/root/cards/index.tsx ensures backward compatibility.

File Structure

src/components/
├── atom/                          # ← Cards now here
│   ├── activity-goal.tsx
│   ├── calendar.tsx
│   ├── chat.tsx
│   ├── cookie-settings.tsx
│   ├── create-account.tsx
│   ├── data-table.tsx
│   ├── metric.tsx
│   ├── payment-method.tsx
│   ├── report-issue.tsx
│   ├── share.tsx
│   ├── stats.tsx
│   └── team-members.tsx
│
└── root/cards/
    ├── index.tsx                  # ← Re-exports from atom
    └── page.tsx                   # ← Unchanged

content/atoms/(root)/
├── activity-goal.mdx             # ← New documentation
├── calendar.mdx
├── chat.mdx
├── cookie-settings.mdx
├── create-account.mdx
├── data-table.mdx
├── metric.mdx
├── payment-method.mdx
├── report-issue.mdx
├── share.mdx
├── stats.mdx
├── team-members.mdx
└── ... (31 other atoms)

public/r/styles/default/
├── activity-goal.json            # ← Registry JSON
├── calendar.json
├── chat.json
└── ... (all card JSONs)

Testing

Verify Root Page Still Works

pnpm dev
# Visit: http://localhost:3000
# The CardsDemo should render correctly

Verify Atoms Page

# Visit: http://localhost:3000/atoms
# Should see all 43 atoms including the 12 cards

Verify CLI

pnpm codebase list
# Should show all 43 atoms including cards

pnpm codebase add calendar
# Should install the calendar card

What's Different

Before

  • Cards in src/components/root/cards/
  • No registry entries
  • No documentation
  • Not browsable in /atoms

After

  • Cards in src/components/atom/
  • Full registry support
  • Complete MDX documentation
  • Browsable at /atoms/[card-name]
  • Installable via CLI
  • Backward compatible imports

Benefits

  1. ✅ Unified System - All atoms in one place
  2. ✅ Documentation - Each card has full docs
  3. ✅ Registry - Can be installed via CLI
  4. ✅ Browsable - View cards at /atoms
  5. ✅ Backward Compatible - Existing code still works
  6. ✅ Discoverable - Shows up in pnpm codebase list

Next Steps

  1. Remove Old Files (Optional)

    • Can delete original files from src/components/root/cards/
    • Keep index.tsx and page.tsx for backward compatibility

  2. Enhance Documentation

    • Add live previews to MDX files
    • Add code examples
    • Add usage notes

  3. Add More Cards

    • Follow the same pattern
    • Add to _registry.ts
    • Run pnpm generate:docs
    • Run pnpm build:registry

Summary

🎉 Successfully migrated 12 cards to atoms registry!

  • Total Atoms: 43
  • Cards: 12
  • Other Atoms: 31
  • Documentation: 44 MDX files
  • Registry JSON: 86 files (43 × 2 styles)

The root page at / still works with CardsDemo, and all cards are now browsable at /atoms with full documentation and CLI support!