Migrate from ShadCN to native XbyK components with redesigned UI #35
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Remove ShadCN dependencies (@radix-ui/react-slot, class-variance-authority, clsx, lucide-react, tailwind-merge, tailwindcss, tw-animate-css) - Migrate to native @kentico/xperience-admin-components (Card, Button, Stack, Row, Column, Headline, Spacing, Divider) - Remove Tailwind CSS configuration and PostCSS setup - Remove path aliases from tsconfig.json - Redesign UI with dashboard-style layout: - Hero carbon rating section with 120px rating display and gradient backgrounds - 2x2 stat cards grid showing key metrics (CO₂, Page Weight, Resources, Efficiency) - Collapsible resource lists (show 3 by default, expandable) - Resource breakdown sorted by size with percentage badges - XbyK-specific optimization tips (Image Variants, AIRA features) - Fix percentage calculation bug in resource groups - Reduce bundle size from ~55 KiB to 12.2 KiB (78% reduction) - Update CLAUDE.md with redesign details and future enhancements roadmap - Update README.md with new screenshot 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update version from 2.1.0 to 2.2.0 in csproj - Remove version line from CLAUDE.md to avoid maintenance burden 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Remove redundant sections: - "Recently Fixed" - historical information - "Future Enhancements" - now tracked in GitHub issues - "Testing Strategy" - generic recommendations - "Git Workflow" - not useful for development - "Related Resources" - better suited for README - "Creating a Release" - procedural info Reduced from 389 to 285 lines (27% reduction) while keeping essential architecture documentation, configuration, common tasks, and debugging tips. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Created 5 agent profiles in .claude/agents/: - xbyk-component-migration: UI component migration expertise - nuget-package-maintainer: Versioning and package management - documentation-maintainer: Doc accuracy and context optimization - react-admin-ui-developer: Admin UI best practices - playwright-integration: Browser automation patterns Updated .gitignore to allow .claude/agents/ and .claude/commands/ while keeping other .claude/ files ignored. These agents provide specialized expertise for common maintenance tasks and can be invoked when working on specific areas of the codebase. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR migrates the admin UI from ShadCN components to native Xperience by Kentico (XbyK) components, delivering a significant bundle size reduction (78%) and a modernized dashboard-style interface. The changes are purely internal implementation improvements with no breaking changes to the module's public API.
Key changes:
- Complete removal of ShadCN UI dependencies and migration to
@kentico/xperience-admin-components - Redesigned dashboard UI with hero carbon rating, stat cards grid, and collapsible resource lists
- Bundle optimization from ~55 KiB to 12.2 KiB
- Fixed percentage calculation bug in resource groups
- Added custom agent profiles for specialized development tasks
Reviewed Changes
Copilot reviewed 17 out of 24 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/XperienceCommunity.Sustainability.csproj | Version bump to 2.2.0 |
| src/Client/tsconfig.json | Removed path aliases for ShadCN components |
| src/Client/src/sustainability.css | Removed Tailwind CSS theme configuration |
| src/Client/src/entry.tsx | Removed CSS import for deleted Tailwind styles |
| src/Client/src/Sustainability/SustainabilityTabTemplate.tsx | Complete UI redesign using XbyK components and custom styled components |
| src/Client/postcss.config.mjs | Removed PostCSS configuration for Tailwind |
| src/Client/package.json | Removed ShadCN and Tailwind dependencies |
| src/Client/lib/utils.ts | Deleted utility file for Tailwind class merging |
| src/Client/components/ui/card.tsx | Deleted ShadCN Card component |
| src/Client/components/ui/button.tsx | Deleted ShadCN Button component |
| README.md | Updated screenshot reference path |
| CLAUDE.md | Streamlined documentation, removed version hardcoding and historical information |
| .claude/agents/xbyk-component-migration.md | Added XbyK component migration expertise profile |
| .claude/agents/react-admin-ui-developer.md | Added React admin UI development best practices profile |
| .claude/agents/playwright-integration.md | Added Playwright integration patterns profile |
| .claude/agents/nuget-package-maintainer.md | Added NuGet package versioning expertise profile |
| .claude/agents/documentation-maintainer.md | Added documentation maintenance guidelines profile |
Files not reviewed (1)
- src/Client/package-lock.json: Language not supported
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Extract inline styles from ResourceGroupCard component into a separate `resourceGroupCardStyles` object to improve maintainability and reduce duplication. Benefits: - Styles are now defined in one place - Easier to maintain and update - Better TypeScript type safety with 'as const' assertions - Addresses Copilot suggestion from PR review Bundle size: 12.5 KiB (minimal increase of 0.3 KiB for better code organization) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Replace the expand/collapse button in ResourceGroupCard with the native XbyK Button component for consistency with the rest of the UI. Benefits: - Better accessibility (XbyK Button has built-in ARIA attributes) - Consistent styling with other UI buttons - Simplified code (removed manual hover handlers) - Slightly smaller bundle size (12.5 KiB → 12.3 KiB) Changes: - Removed custom expandButton styles and hover handlers - Use XbyK Button with ButtonColor.Secondary and ButtonSize.S - Addresses second Copilot suggestion from PR review 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Improved button alignment by adding flexbox centering to the expandButtonContainer. The XbyK Button component was left-aligned by default, making it look out of place. Now properly centered for better visual balance. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Updated the UI screenshot to show the centered expand/collapse button after the recent alignment fix. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Complete migration from ShadCN UI components to native Xperience by Kentico admin components, with a comprehensive dashboard-style UI redesign.
Key Changes
@kentico/xperience-admin-componentsDependencies Removed
@radix-ui/react-slotclass-variance-authorityclsxlucide-reacttailwind-mergetailwindcsstw-animate-cssNew UI Features
Hero Carbon Rating Section
Stat Cards Grid
Collapsible Resource Lists
XbyK-Specific Optimization Tips
Custom Agent Profiles
Added specialized agent profiles in
.claude/agents/:xbyk-component-migration.md- UI component migration expertisenuget-package-maintainer.md- Versioning and package managementdocumentation-maintainer.md- Documentation accuracy and optimizationreact-admin-ui-developer.md- Admin UI best practicesplaywright-integration.md- Browser automation patternsTechnical Details
Components Used:
Card,Button,Stack,Row,Column,Headline,Spacing,DividerStatCard,ResourceGroupCard(specialized for sustainability metrics)Configuration Cleanup:
Breaking Changes
None - this is a purely internal implementation change. The module interface and integration remain unchanged.
Testing
Screenshots
See updated screenshot in repository:
src/images/SustainabilityReport-PageTab.jpeg🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com