version-migration — Skillopedia

Skill: IDS Version Migration When to Use - Migrating from IDS v5 (or v4) to IDS v6 - Migrating from OUI ( ) to IDS v6 - Updating imports from to - Converting Formik forms to React Hook Form via / - Updating test files that use IDS v4 test utilities - Reviewing migration PRs for correctness Decision Table: Which Migration Path? | Current stack | Migration path | Complexity | Reference | | ------------- | ------------------------------------ | --------------------------------- | --------------------------------------------------------- | | OUI only | OUI→v6 guide | High (form architecture chang…

\\n'}${PAGES_ROUTES}\"\n fi\nfi\n\n# Convert to array\nif [[ -n \"$ROUTE_LIST\" ]]; then\n mapfile -t ROUTES \u003c\u003c\u003c \"$ROUTE_LIST\"\n ROUTES=($(printf '%s\\n' \"${ROUTES[@]}\" | sort -u))\n echo \" 📊 Found ${#ROUTES[@]} route(s)\"\nelse\n echo \" ℹ️ No routes detected, using example routes\"\n ROUTES=(\"/\" \"/about\" \"/contact\")\nfi\n\n# Generate test file\necho\necho \"📝 Generating e2e/components.spec.ts...\"\n\n# Generate route tests dynamically\nROUTE_TESTS=\"\"\nfor route in \"${ROUTES[@]}\"; do\n # Sanitize route for test name\n TEST_NAME=$(echo \"$route\" | sed 's|/|-|g;s|^-||;s|-$||')\n [[ -z \"$TEST_NAME\" ]] && TEST_NAME=\"home\"\n \n ROUTE_TESTS+=\"\n test('route: $route', async ({ page }) => {\n await page.goto('$route');\n await page.waitForLoadState('networkidle');\n await expect(page).toHaveScreenshot('route-$TEST_NAME.png', {\n fullPage: true,\n animations: 'disabled',\n });\n });\n\"\ndone\n\ncat > e2e/components.spec.ts \u003c\u003c EOF\nimport { test, expect } from '@playwright/test';\n\n/**\n * Visual Regression Tests for IDS v6 Migration\n * \n * Auto-generated based on detected routes ($ROUTER_TYPE)\n * \n * BEFORE MIGRATION:\n * Run: UPDATE_SNAPSHOTS=true npx playwright test\n * This captures baseline screenshots\n * \n * AFTER MIGRATION:\n * Run: npx playwright test\n * This compares new screenshots to baselines\n * Review diffs: npx playwright show-report\n */\n\ntest.describe('Page Routes Visual Regression', () => {$ROUTE_TESTS\n});\n\ntest.describe('Interactive Components', () => {\n // Add tests for interactive states\n test('button states', async ({ page }) => {\n await page.goto('/');\n await page.waitForLoadState('networkidle');\n \n // Find first button\n const button = page.getByRole('button').first();\n if (await button.count() > 0) {\n // Hover state\n await button.hover();\n await expect(page).toHaveScreenshot('button-hover.png', {\n animations: 'disabled',\n });\n \n // Focus state\n await button.focus();\n await expect(page).toHaveScreenshot('button-focus.png', {\n animations: 'disabled',\n });\n }\n });\n\n test('form validation', async ({ page }) => {\n await page.goto('/');\n await page.waitForLoadState('networkidle');\n \n // Find and submit first form\n const form = page.locator('form').first();\n if (await form.count() > 0) {\n const submitButton = form.getByRole('button', { name: /submit/i });\n if (await submitButton.count() > 0) {\n await submitButton.click();\n await page.waitForTimeout(500); // Wait for validation\n await expect(page).toHaveScreenshot('form-validation.png', {\n fullPage: true,\n animations: 'disabled',\n });\n }\n }\n });\n\n test('modal interaction', async ({ page }) => {\n await page.goto('/');\n await page.waitForLoadState('networkidle');\n \n // Find button that opens modal\n const modalTrigger = page.getByRole('button', { name: /open|show|modal/i }).first();\n if (await modalTrigger.count() > 0) {\n await modalTrigger.click();\n await page.waitForSelector('[role=\"dialog\"]', { state: 'visible' });\n await page.waitForTimeout(300); // Wait for animation\n await expect(page).toHaveScreenshot('modal-open.png', {\n animations: 'disabled',\n });\n }\n });\n});\n\ntest.describe('Responsive Layout', () => {\n const viewports = [\n { name: 'mobile', width: 375, height: 667 },\n { name: 'tablet', width: 768, height: 1024 },\n { name: 'desktop', width: 1280, height: 720 },\n ];\n\n for (const viewport of viewports) {\n test(\\`\\${viewport.name} viewport\\`, async ({ page }) => {\n await page.setViewportSize({ width: viewport.width, height: viewport.height });\n await page.goto('/');\n await page.waitForLoadState('networkidle');\n await expect(page).toHaveScreenshot(\\`layout-\\${viewport.name}.png\\`, {\n fullPage: true,\n animations: 'disabled',\n });\n });\n }\n});\nEOF\n\necho \" ✅ Created e2e/components.spec.ts\"\n[[ -n \"$ROUTER_TYPE\" ]] && echo \" 📍 Generated tests for ${#ROUTES[@]} route(s)\"\n\n# Update package.json scripts\necho\necho \"📝 Adding npm scripts...\"\nif [[ -f \"package.json\" ]]; then\n if ! grep -q '\"test:vrt\"' package.json; then\n # Add scripts (simplified - manual edit recommended)\n echo \" ℹ️ Add these scripts to package.json:\"\n echo ' \"test:vrt\": \"playwright test\",'\n echo ' \"test:vrt:update\": \"UPDATE_SNAPSHOTS=true playwright test\",'\n echo ' \"test:vrt:ui\": \"playwright test --ui\"'\n else\n echo \" ✅ VRT scripts already exist\"\n fi\nfi\n\n# Summary\necho\necho \"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\"\necho \"✅ Playwright VRT setup complete!\"\necho\necho \"📋 Next steps:\"\necho\necho \"1. Install Playwright:\"\necho \" npm install -D @playwright/test\"\necho \" npx playwright install\"\necho\necho \"2. Customize test routes in e2e/components.spec.ts\"\necho\necho \"3. BEFORE migration - capture baselines:\"\necho \" UPDATE_SNAPSHOTS=true npx playwright test\"\necho\necho \"4. Perform IDS v6 migration\"\necho\necho \"5. AFTER migration - run VRT:\"\necho \" npx playwright test\"\necho\necho \"6. Review visual diffs:\"\necho \" npx playwright show-report\"\necho\necho \"📖 Full guide: references/visual-regression-testing.md\"\n","content_type":"application/x-sh; charset=utf-8","language":"bash","size":8450,"content_sha256":"6e6798e9eea49441a800c7018b9a35f9c7cac8d776e1985ebaf7ecc89ceffc31"},{"filename":"scripts/validate-migration.sh","content":"#!/usr/bin/env bash\n# Post-migration validation checks\n\nset -euo pipefail\n\nERRORS=0\nWARNINGS=0\n\necho \"🔍 Running post-migration validation...\"\necho\n\n# 1. Check for old imports\necho \"1️⃣ Checking for old imports...\"\nOLD_IMPORTS=$(grep -r \"@iress/oui\\|@iress/components-react\" src/ 2>/dev/null || true)\nif [[ -n \"$OLD_IMPORTS\" ]]; then\n echo \" ❌ Found old imports:\"\n echo \"$OLD_IMPORTS\" | head -5\n [[ $(echo \"$OLD_IMPORTS\" | wc -l) -gt 5 ]] && echo \" ... and $(($(echo \"$OLD_IMPORTS\" | wc -l) - 5)) more\"\n ((ERRORS++))\nelse\n echo \" ✅ No old imports found\"\nfi\n\n# 2. Check for old test utils\necho\necho \"2️⃣ Checking for old test utilities...\"\nOLD_TEST_UTILS=$(grep -r \"idsFireEvent\\|mockLazyLoadedComponents\\|@iress/ids-react-test-utils\" src/ 2>/dev/null || true)\nif [[ -n \"$OLD_TEST_UTILS\" ]]; then\n echo \" ❌ Found old test utils:\"\n echo \"$OLD_TEST_UTILS\" | head -5\n [[ $(echo \"$OLD_TEST_UTILS\" | wc -l) -gt 5 ]] && echo \" ... and $(($(echo \"$OLD_TEST_UTILS\" | wc -l) - 5)) more\"\n ((ERRORS++))\nelse\n echo \" ✅ No old test utils found\"\nfi\n\n# 3. Check for deprecated props\necho\necho \"3️⃣ Checking for deprecated props...\"\nDEPRECATED_PROPS=$(grep -rE \"variant=|isOpen=|gutter=|mode=\\\"link\\\"|mode='link'|optional=|legend=\" src/ 2>/dev/null | grep -v \"node_modules\" || true)\nif [[ -n \"$DEPRECATED_PROPS\" ]]; then\n echo \" ⚠️ Found potentially deprecated props:\"\n echo \"$DEPRECATED_PROPS\" | head -5\n [[ $(echo \"$DEPRECATED_PROPS\" | wc -l) -gt 5 ]] && echo \" ... and $(($(echo \"$DEPRECATED_PROPS\" | wc -l) - 5)) more\"\n echo \" ℹ️ Review these manually - some may be false positives\"\n ((WARNINGS++))\nelse\n echo \" ✅ No obvious deprecated props found\"\nfi\n\n# 4. Check for required CSS import\necho\necho \"4️⃣ Checking for IDS v6 CSS import...\"\nCSS_IMPORT=$(grep -r \"@iress-oss/ids-components/dist/style.css\\|@iress-oss/ids-components/styled-system/styles.css\" src/ 2>/dev/null || true)\nif [[ -z \"$CSS_IMPORT\" ]]; then\n echo \" ❌ Missing CSS import\"\n echo \" Add to app entry: import '@iress-oss/ids-components/dist/style.css';\"\n ((ERRORS++))\nelse\n echo \" ✅ CSS import found\"\nfi\n\n# 5. Check for Formik remnants\necho\necho \"5️⃣ Checking for Formik usage...\"\nFORMIK=$(grep -r \"from 'formik'\\|from \\\"formik\\\"\" src/ 2>/dev/null || true)\nif [[ -n \"$FORMIK\" ]]; then\n echo \" ⚠️ Formik still in use:\"\n echo \"$FORMIK\" | head -3\n [[ $(echo \"$FORMIK\" | wc -l) -gt 3 ]] && echo \" ... and $(($(echo \"$FORMIK\" | wc -l) - 3)) more\"\n echo \" ℹ️ Consider migrating to IressForm + IressFormField\"\n ((WARNINGS++))\nelse\n echo \" ✅ No Formik usage found\"\nfi\n\n# 6. Check package.json\necho\necho \"6️⃣ Checking package.json...\"\nif grep -q \"@iress-oss/ids-components\" package.json; then\n VERSION=$(grep \"@iress-oss/ids-components\" package.json | grep -o '[0-9][^\"]*')\n echo \" ✅ IDS v6 in package.json: $VERSION\"\nelse\n echo \" ❌ @iress-oss/ids-components not in package.json\"\n ((ERRORS++))\nfi\n\n# Summary\necho\necho \"━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\"\nif [[ $ERRORS -eq 0 && $WARNINGS -eq 0 ]]; then\n echo \"✅ All validation checks passed!\"\nelif [[ $ERRORS -eq 0 ]]; then\n echo \"⚠️ Validation complete with $WARNINGS warning(s)\"\n echo \"Review warnings above - they may need attention\"\nelse\n echo \"❌ Validation failed with $ERRORS error(s) and $WARNINGS warning(s)\"\n echo \"Fix errors above before proceeding\"\n exit 1\nfi\n\necho\necho \"📋 Manual checks still needed:\"\necho \" • Visual inspection of all pages\"\necho \" • Form submission and validation\"\necho \" • Test suite passes\"\necho \" • Accessibility (keyboard nav, screen readers)\"\necho \" • Production build succeeds\"\n","content_type":"application/x-sh; charset=utf-8","language":"bash","size":3755,"content_sha256":"fbe3c6e824a1c603fa59cb6c08d4f6b10f7f3f72088b45e9522af99ea4cfb3be"}],"content_json":{"type":"doc","content":[{"type":"heading","attrs":{"level":1},"content":[{"text":"Skill: IDS Version Migration","type":"text"}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"When to Use","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Migrating from IDS v5 (or v4) to IDS v6","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Migrating from OUI (","type":"text"},{"text":"@iress/oui","type":"text","marks":[{"type":"code_inline"}]},{"text":") to IDS v6","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Updating imports from ","type":"text"},{"text":"@iress/components-react","type":"text","marks":[{"type":"code_inline"}]},{"text":" to ","type":"text"},{"text":"@iress-oss/ids-components","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Converting Formik forms to React Hook Form via ","type":"text"},{"text":"IressForm","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"IressFormField","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Updating test files that use IDS v4 test utilities","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Reviewing migration PRs for correctness","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Decision Table: Which Migration Path?","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Current stack","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Migration path","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Complexity","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Reference","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OUI only","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OUI→v6 guide","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"High (form architecture change)","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"prop-renames.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-renames.md","title":null}}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IDS v4 only","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"v4→v6 guide","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Medium (form architecture change)","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"prop-renames.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-renames.md","title":null}}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IDS v5 only","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"v5→v6 guide","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Low–Medium","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"v5-to-v6-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/v5-to-v6-migration.md","title":null}}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OUI + IDS v4","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Both OUI→v6 and v4→v6 guides","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"High (form architecture change)","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"prop-renames.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-renames.md","title":null}}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OUI + IDS v5","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"OUI→v6 guide + v5→v6 for IDS changes","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"High (form architecture change)","type":"text"}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"v5-to-v6-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/v5-to-v6-migration.md","title":null}}]}]}]}]}]},{"type":"paragraph","content":[{"text":"Full interactive guides with diff viewers are available in Storybook:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"v4→v5 guide","type":"text","marks":[{"type":"link","attrs":{"href":"https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/resources-migration-guides-from-v4-to-v5--docs","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"v5→v6 guide","type":"text","marks":[{"type":"link","attrs":{"href":"https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/resources-migration-guides-from-v5-to-v6--docs","title":null}}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"OUI→v6 guide","type":"text","marks":[{"type":"link","attrs":{"href":"https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/resources-migration-guides-from-oui-to-v6--docs","title":null}}]}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Pre-Migration Assessment","type":"text"}]},{"type":"paragraph","content":[{"text":"Before starting migration, run these scripts (or perform checks manually):","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Identify current version","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/detect-version.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — detects IDS/OUI version and recommends migration path","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Audit component usage","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/audit-components.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — generates component usage report","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check for deprecated props","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/find-deprecated-props.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — finds props that will break","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check form architecture","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/find-formik.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — identifies Formik forms needing migration","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Check test patterns","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/find-test-utils.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — finds old test utilities","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Review custom CSS","type":"text","marks":[{"type":"strong"}]},{"text":": Search for ","type":"text"},{"text":".oui-","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":".ids-","type":"text","marks":[{"type":"code_inline"}]},{"text":", or ","type":"text"},{"text":"iress-","type":"text","marks":[{"type":"code_inline"}]},{"text":" class selectors that may break","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Setup VRT (recommended)","type":"text","marks":[{"type":"strong"}]},{"text":": ","type":"text"},{"text":"scripts/setup-playwright-vrt.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" — generates Playwright visual regression tests","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Capture baseline screenshots","type":"text","marks":[{"type":"strong"}]},{"text":": Run VRT suite before migration to capture current state","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Create migration branch","type":"text","marks":[{"type":"strong"}]},{"text":": Ensure you can rollback if needed","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Quick Reference: Package Changes","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Import path","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"ts"},"content":[{"text":"// ❌ Old (IDS v4)\nimport { IressButton } from '@iress/components-react';\n\n// ❌ Old (OUI)\nimport { Button, Input } from '@iress/oui';\n\n// ✅ IDS v6 (install with @beta tag: npm install @iress-oss/ids-components@beta)\nimport { IressButton, IressInput } from '@iress-oss/ids-components';","type":"text"}]},{"type":"blockquote","content":[{"type":"paragraph","content":[{"text":"Important:","type":"text","marks":[{"type":"strong"}]},{"text":" IDS v6 is currently in beta. Install with the ","type":"text"},{"text":"@beta","type":"text","marks":[{"type":"code_inline"}]},{"text":" tag:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"bash"},"content":[{"text":"npm install @iress-oss/ids-components@beta\nnpm install @iress-oss/ids-tokens@beta # if using tokens directly","type":"text"}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"CSS entry point","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"ts"},"content":[{"text":"// ✅ Required in your app entry point\nimport '@iress-oss/ids-components/dist/style.css';","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Token package","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"ts"},"content":[{"text":"// ✅ Required for design tokens\nimport '@iress-oss/ids-tokens/build/css-vars.css';\nimport { cssVars } from '@iress-oss/ids-tokens';","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Key Migration Areas","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"v5 → v6 Migration","type":"text"}]},{"type":"paragraph","content":[{"text":"For migrations specifically from IDS v5 to v6, see ","type":"text"},{"text":"references/v5-to-v6-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/v5-to-v6-migration.md","title":null}}]},{"text":" for:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Package and CSS import changes","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Component renames (","type":"text"},{"text":"IressBadge","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressPill","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"IressFilter","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressDropdownMenu","type":"text","marks":[{"type":"code_inline"}]},{"text":", etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Prop changes by component (Button, Alert, Toggle, Field, Modal, Select)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Icon migration (FontAwesome → Material Symbols)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Form migration patterns","type":"text"}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Component renames","type":"text"}]},{"type":"paragraph","content":[{"text":"Components that changed names between versions (IDS and OUI → v6), plus removed and new components. See ","type":"text"},{"text":"references/component-renames.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/component-renames.md","title":null}}]},{"text":" for the full map.","type":"text"}]},{"type":"paragraph","content":[{"text":"Key renames: ","type":"text"},{"text":"IressBadge","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressPill","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"IressRichSelect","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressSelect","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"IressField","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressFormField","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"IressFilter","type":"text","marks":[{"type":"code_inline"}]},{"text":" → ","type":"text"},{"text":"IressDropdownMenu","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Prop renames (CRITICAL — verified against source code)","type":"text"}]},{"type":"paragraph","content":[{"text":"Using old prop names will silently fail. See ","type":"text"},{"text":"references/prop-renames.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/prop-renames.md","title":null}}]},{"text":" for the complete table.","type":"text"}]},{"type":"paragraph","content":[{"text":"Most common renames:","type":"text"}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Component","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Old prop (OUI)","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"New prop (v6)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Alert","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"context","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"status","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Modal","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"onHide","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"onShowChange","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Fieldset","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"RadioGroup","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"legend","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"label","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Label","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"optional","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"required","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"table","attrs":{"layout":null},"content":[{"type":"tr","content":[{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Component (IDS v4/v5)","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"Old prop","type":"text"}]}]},{"type":"th","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"New prop (v6)","type":"text"}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressButton","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"variant","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"mode","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressAlert","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"variant","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"status","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressModal","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"isOpen","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"show","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressModal","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"onClose","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"onShowChange","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressModal","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"title","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"heading","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressPanel","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"background","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"bg","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"tr","content":[{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"IressStack","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"IressInline","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"gutter","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"td","attrs":{"colspan":1,"rowspan":1,"colwidth":null,"alignment":""},"content":[{"type":"paragraph","content":[{"text":"gap","type":"text","marks":[{"type":"code_inline"}]}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Form migration (Formik → React Hook Form)","type":"text"}]},{"type":"paragraph","content":[{"text":"The most significant architectural change. Forms use ","type":"text"},{"text":"IressForm","type":"text","marks":[{"type":"code_inline"}]},{"text":" + ","type":"text"},{"text":"IressFormField","type":"text","marks":[{"type":"code_inline"}]},{"text":" with ","type":"text"},{"text":"render","type":"text","marks":[{"type":"code_inline"}]},{"text":" prop, replacing Formik's ","type":"text"},{"text":"\u003cField as={...}>","type":"text","marks":[{"type":"code_inline"}]},{"text":" pattern. Yup schemas become per-field ","type":"text"},{"text":"rules","type":"text","marks":[{"type":"code_inline"}]},{"text":" props.","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"references/form-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/form-migration.md","title":null}}]},{"text":" for validation mapping, before/after examples, and common patterns.","type":"text"}]},{"type":"paragraph","content":[{"text":"Quick example:","type":"text"}]},{"type":"code_block","attrs":{"wrap":false,"language":"tsx"},"content":[{"text":"\u003cIressForm defaultValues={{ email: '' }} onSubmit={handle}>\n \u003cIressFormField\n name=\"email\"\n label=\"Email\"\n render={(props) => \u003cIressInput {...props} type=\"email\" />}\n rules={{ required: 'Required' }}\n />\n \u003cIressButton type=\"submit\" mode=\"primary\">\n Submit\n \u003c/IressButton>\n\u003c/IressForm>","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Testing migration","type":"text"}]},{"type":"paragraph","content":[{"text":"IDS v6 uses standard React Testing Library — no special test utilities. Replace ","type":"text"},{"text":"idsFireEvent","type":"text","marks":[{"type":"code_inline"}]},{"text":" with ","type":"text"},{"text":"fireEvent","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"userEvent","type":"text","marks":[{"type":"code_inline"}]},{"text":", remove ","type":"text"},{"text":"mockLazyLoadedComponents","type":"text","marks":[{"type":"code_inline"}]},{"text":", prefer ","type":"text"},{"text":"getByRole","type":"text","marks":[{"type":"code_inline"}]},{"text":"/","type":"text"},{"text":"getByLabelText","type":"text","marks":[{"type":"code_inline"}]},{"text":" over ","type":"text"},{"text":"getByTestId","type":"text","marks":[{"type":"code_inline"}]},{"text":".","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"references/testing-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/testing-migration.md","title":null}}]},{"text":" for import changes, pattern mapping, config updates, and form test examples.","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Styling migration","type":"text"}]},{"type":"paragraph","content":[{"text":"OUI CSS classes and IDS v4 Stencil classes are removed. Use styling props (","type":"text"},{"text":"p","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"m","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"bg","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"gap","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"scrollable","type":"text","marks":[{"type":"code_inline"}]},{"text":") or design tokens (","type":"text"},{"text":"var(--iress-*)","type":"text","marks":[{"type":"code_inline"}]},{"text":"). Declare ","type":"text"},{"text":"@layer","type":"text","marks":[{"type":"code_inline"}]},{"text":" order if custom CSS is overridden.","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"references/styling-migration.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/styling-migration.md","title":null}}]},{"text":" for examples and AG Grid migration.","type":"text"}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Post-Migration Validation","type":"text"}]},{"type":"paragraph","content":[{"text":"After completing migration, run ","type":"text"},{"text":"scripts/validate-migration.sh","type":"text","marks":[{"type":"code_inline"}]},{"text":" or verify manually:","type":"text"}]},{"type":"ordered_list","attrs":{"order":1,"listStyle":"number"},"content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Automated checks","type":"text","marks":[{"type":"strong"}]},{"text":": Run validation script to check for common issues","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visual regression","type":"text","marks":[{"type":"strong"}]},{"text":": Run VRT suite and review all visual diffs (see ","type":"text"},{"text":"references/visual-regression-testing.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/visual-regression-testing.md","title":null}}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Visual check","type":"text","marks":[{"type":"strong"}]},{"text":": All components render without console errors or warnings","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Form functionality","type":"text","marks":[{"type":"strong"}]},{"text":": Submit forms and verify validation rules work correctly","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Test suite","type":"text","marks":[{"type":"strong"}]},{"text":": All tests pass with new testing patterns (no ","type":"text"},{"text":"idsFireEvent","type":"text","marks":[{"type":"code_inline"}]},{"text":", etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Accessibility","type":"text","marks":[{"type":"strong"}]},{"text":": Keyboard navigation and screen reader functionality intact","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Styling","type":"text","marks":[{"type":"strong"}]},{"text":": No missing styles, check responsive breakpoints","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Interactive states","type":"text","marks":[{"type":"strong"}]},{"text":": Hover, focus, disabled, loading states work as expected","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Build","type":"text","marks":[{"type":"strong"}]},{"text":": Production build completes without errors, check bundle size","type":"text"}]}]}]},{"type":"paragraph","content":[{"text":"The validation script checks for:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Old imports (","type":"text"},{"text":"@iress/oui","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"@iress/components-react","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Old test utils (","type":"text"},{"text":"idsFireEvent","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"mockLazyLoadedComponents","type":"text","marks":[{"type":"code_inline"}]},{"text":")","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Deprecated props (","type":"text"},{"text":"variant=","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"isOpen=","type":"text","marks":[{"type":"code_inline"}]},{"text":", ","type":"text"},{"text":"gutter=","type":"text","marks":[{"type":"code_inline"}]},{"text":", etc.)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Required CSS import","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Remaining Formik usage","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Common Gotchas","type":"text"}]},{"type":"paragraph","content":[{"text":"See ","type":"text"},{"text":"references/common-gotchas.md","type":"text","marks":[{"type":"link","attrs":{"href":"references/common-gotchas.md","title":null}}]},{"text":" for a comprehensive troubleshooting guide covering:","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Critical breaking changes (missing CSS, validation, renamed props)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"IDS v4 React → v6 React gotchas (test utils, slots, helpers, icons)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"OUI-specific gotchas (prop renames, removed components)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Component API changes (form fields, styling, composition patterns)","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Form architecture changes (Formik → React Hook Form)","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}},{"type":"heading","attrs":{"level":2},"content":[{"text":"Cross-References","type":"text"}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Generated migration guides (read these for full details)","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"v4→v5","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/guides/migration-guides-v5.md","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"v5→v6","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/guides/migration-guides-v6.md","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"OUI→v6","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/guides/migration-guides-oui.md","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Component and pattern docs","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Component docs","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/components/","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Pattern docs","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/patterns/","type":"text","marks":[{"type":"code_inline"}]}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Index","type":"text","marks":[{"type":"strong"}]},{"text":" — ","type":"text"},{"text":"node_modules/@iress-oss/ids-components/.ai/index.json","type":"text","marks":[{"type":"code_inline"}]}]}]}]},{"type":"heading","attrs":{"level":3},"content":[{"text":"Related skills","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"token-usage","type":"text","marks":[{"type":"strong"}]},{"text":" — Design token usage patterns","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ui-translation","type":"text","marks":[{"type":"strong"}]},{"text":" — Building new IDS v6 UIs from scratch","type":"text"}]}]},{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"ui-doctor","type":"text","marks":[{"type":"strong"}]},{"text":" — Auditing IDS compliance","type":"text"}]}]}]},{"type":"heading","attrs":{"level":2},"content":[{"text":"Reference","type":"text"}]},{"type":"bullet_list","content":[{"type":"list_item","content":[{"type":"paragraph","content":[{"text":"Storybook and Guidelines:","type":"text","marks":[{"type":"strong"}]},{"text":" https://main--691abcc79dfa560a36d0a74f.chromatic.com","type":"text"}]}]}]},{"type":"hr","attrs":{"markup":"---"}}]},"metadata":{"date":"2026-06-05","name":"version-migration","author":"@skillopedia","source":{"stars":0,"repo_name":"design-system","origin_url":"https://github.com/iress/design-system/blob/HEAD/.agents/skills/version-migration/SKILL.md","repo_owner":"iress","body_sha256":"1c815f2082f5853f0037abcf1a39657a579d676de529db8515a7f172dd17792e","cluster_key":"2927f1b473560512d4dfe3a20b1daf22a238155d21879a2979d2b4479c91caa2","clean_bundle":{"format":"clean-skill-bundle-v1","source":"iress/design-system/.agents/skills/version-migration/SKILL.md","attachments":[{"id":"3a4c0b69-4651-589d-a68f-165575735bfe","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/3a4c0b69-4651-589d-a68f-165575735bfe/attachment.md","path":"references/common-gotchas.md","size":12770,"sha256":"8f8f4043bc57bc56c5ce5a5878eb1b1473b824b3587f19ccbb24eb7960616b90","contentType":"text/markdown; charset=utf-8"},{"id":"555083cf-eb38-535a-ad2a-2b34b7552533","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/555083cf-eb38-535a-ad2a-2b34b7552533/attachment.md","path":"references/component-renames.md","size":10676,"sha256":"4abaa7729ead5e1bf3e359356db295c72447cb8673cab04382c404b88c6b4e48","contentType":"text/markdown; charset=utf-8"},{"id":"ceab943c-5c3c-5fe3-baf3-8ba3c5af97e6","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/ceab943c-5c3c-5fe3-baf3-8ba3c5af97e6/attachment.md","path":"references/form-migration.md","size":4222,"sha256":"fe1c1a00e4e97c3c1f3e4dec2e0339ef2d56b1cb4863f625f446134eab69e25e","contentType":"text/markdown; charset=utf-8"},{"id":"161ab803-be06-5405-ad99-dd641f6c158a","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/161ab803-be06-5405-ad99-dd641f6c158a/attachment.md","path":"references/prop-renames.md","size":25318,"sha256":"a5c0fd1c46459137b0fa48a3304f873ded9a63d92c805abca7432c9e8b4d65c2","contentType":"text/markdown; charset=utf-8"},{"id":"4644de4c-5d5b-5d2f-86f6-07f4067ce8f9","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/4644de4c-5d5b-5d2f-86f6-07f4067ce8f9/attachment.md","path":"references/styling-migration.md","size":1793,"sha256":"e77c69fc2f1089ee0e8f5777289711f347d2018fa8de184a0b64d3b3d1462fab","contentType":"text/markdown; charset=utf-8"},{"id":"68e17ed8-5996-5714-8658-77817d5736c2","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/68e17ed8-5996-5714-8658-77817d5736c2/attachment.md","path":"references/testing-migration.md","size":5189,"sha256":"2af2f3149ad98ab2590dadbb213105deb011b5fac3a1f7ab4017c59183141ead","contentType":"text/markdown; charset=utf-8"},{"id":"af37125a-7c66-53ad-b2aa-f7ee01d46543","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/af37125a-7c66-53ad-b2aa-f7ee01d46543/attachment.md","path":"references/v5-to-v6-migration.md","size":13783,"sha256":"47ce9c87a28adf068f1d173b9637c3bb56f773036971fb4f469b24024dfc9ba1","contentType":"text/markdown; charset=utf-8"},{"id":"6a276ca8-b4a7-57de-9f52-c376696d3715","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/6a276ca8-b4a7-57de-9f52-c376696d3715/attachment.md","path":"references/visual-regression-testing.md","size":5897,"sha256":"9e6298efddee3ecfa41b1eb2337cd9b1de36d96e462ef030a00dceb454b0e13a","contentType":"text/markdown; charset=utf-8"},{"id":"fbb1c6d7-cf6f-52fe-acf3-1700702d4c11","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/fbb1c6d7-cf6f-52fe-acf3-1700702d4c11/attachment.md","path":"scripts/README.md","size":2383,"sha256":"5adceab9d1abab64e658453d2248cbc3b5c333ad1e3f710f8dfd229aad3ed023","contentType":"text/markdown; charset=utf-8"},{"id":"0d5e85c5-73f6-5e7c-8be2-096cf1acc839","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/0d5e85c5-73f6-5e7c-8be2-096cf1acc839/attachment.sh","path":"scripts/audit-components.sh","size":2364,"sha256":"5c51c8b692a13806c710b78b1399120c7cb3acbbebbad28fac885f4ba6ece9c0","contentType":"application/x-sh; charset=utf-8"},{"id":"b0df253a-7a52-56a4-b132-ae8fd576707e","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/b0df253a-7a52-56a4-b132-ae8fd576707e/attachment.sh","path":"scripts/detect-version.sh","size":2238,"sha256":"383ac44a16adea8f13ee64c042ead99ab70d5ab3eaedc5a11509f455d1e1209b","contentType":"application/x-sh; charset=utf-8"},{"id":"963ae036-cbdc-559b-b993-9f21f77610b9","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/963ae036-cbdc-559b-b993-9f21f77610b9/attachment.sh","path":"scripts/find-deprecated-props.sh","size":2753,"sha256":"c1c695c322de45c77e4f522c0bfcf43c96dcf02870848f028c786b62151c2202","contentType":"application/x-sh; charset=utf-8"},{"id":"7fc9aca7-d381-54a7-ae9d-d37d3a52ada1","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/7fc9aca7-d381-54a7-ae9d-d37d3a52ada1/attachment.sh","path":"scripts/find-formik.sh","size":2182,"sha256":"d276f2313e3bd4b6e9c46d3f7393a6888e9c1f6148b00484a4d5efa6be6be61e","contentType":"application/x-sh; charset=utf-8"},{"id":"03afd1a6-be14-5574-9728-df72796f241b","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/03afd1a6-be14-5574-9728-df72796f241b/attachment.sh","path":"scripts/find-test-utils.sh","size":3218,"sha256":"69bf14c588c383b8efe2cf635fcd659a4e40895018b3e42b867d1257e1471b30","contentType":"application/x-sh; charset=utf-8"},{"id":"ee515051-653f-5d4b-b477-e277982b5898","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/ee515051-653f-5d4b-b477-e277982b5898/attachment.sh","path":"scripts/setup-playwright-vrt.sh","size":8450,"sha256":"6e6798e9eea49441a800c7018b9a35f9c7cac8d776e1985ebaf7ecc89ceffc31","contentType":"application/x-sh; charset=utf-8"},{"id":"00962bb5-30f3-50dc-8c50-026ac5a5bf43","key":"uploads/10433ee7-ad12-4ae0-b34e-97553e46c6c8/00962bb5-30f3-50dc-8c50-026ac5a5bf43/attachment.sh","path":"scripts/validate-migration.sh","size":3755,"sha256":"fbe3c6e824a1c603fa59cb6c08d4f6b10f7f3f72088b45e9522af99ea4cfb3be","contentType":"application/x-sh; charset=utf-8"}],"bundle_sha256":"1d07f1be405e5f68dbe555c286fedf6a7135e94168f481bfd060dd0c7f700050","attachment_count":16,"text_attachments":16,"attachment_storage":"skillopedia-attachments-v1","binary_attachments":0,"excluded_attachments":[]},"cluster_size":1,"skill_md_path":".agents/skills/version-migration/SKILL.md","import_metadata":{"date":"2026-06-05","author":"@skillopedia","version":"v1","category":"testing-qa","category_label":"Testing"},"exact_dupes_collapsed_into_this":0},"license":"Apache-2.0","version":"v1","category":"testing-qa","metadata":{"author":"iress","version":"1.0"},"import_tag":"clean-skills-v1","description":"Migrate applications between IDS (Iress Design System) major versions — including v4→v5, v5→v6, and OUI→v6. Covers component renaming, prop changes, form architecture migration (Formik→React Hook Form), testing updates, and common gotchas. Use when the user asks about upgrading, migrating, or updating IDS versions, or mentions OUI, v4, v5, or v6 migration.\n","allowed-tools":"Bash(grep:*) Bash(sed:*) Bash(find:*) Bash(scripts/*:*)","compatibility":"React 18+, TypeScript, @iress-oss/ids-components@beta"}},"renderedAt":1782979391819}

Important: agents should read /llm.txt, /llms.txt, or /.well-known/skills.json to discover the public Skillopedia API.