v0.8.0

BCFCODE Release v0.8.0

Release Date: July 23, 2025

We’re thrilled to announce BCFCODE v0.8.0, a dazzling update that supercharges the dashboard with new cards, dynamic animations, and a refined user experience! This release introduces CodewarsCard and TargetCard, enhances the DiamondsCell with a loading animation, optimizes responsive layouts, and streamlines user validation flows. With centralized context providers, improved performance, and a polished UI that pairs perfectly with your Lucy-themed VS Code setup, this release makes your kata project shine brighter than ever. Below, we detail the key features, improvements, and fixes that make this version a game-changer for coding enthusiasts.

---

🚀 What's New

1. New CodewarsCard and TargetCard Components

Introduced two powerful dashboard cards to showcase Codewars progress and daily targets:

• CodewarsCard (app/(dashboard)/components/Cards/CodewarsCard/index.tsx):
  • Displays total completed challenges with SolvedCount, growth percentage with PercentVsLastDay, and a pie chart with CodewarsPieChart.
  • Uses useCurrentUserQuery to fetch user data and useMemo to compute ranks (kyū distribution) and lastTwoDaysSolvedProblems.
  • Features a tooltip on the pie chart to clarify diamond challenge focus, styled with KYU_COLORS from theme.ts and a clickable Codewars logo linking to the user’s profile.
  • Integrated into page.tsx with responsive grid sizing (xs: 24, sm: 24, md: 12, lg: 8).
• TargetCard (app/(dashboard)/components/Cards/TargetCard/index.tsx):
  • Shows daily target metrics with TargetInEachDay (animated with CountUp) and BottomInfo (displaying target titles).
  • Wraps content in GaugeProvider for context-driven styling, with responsive gaugeInnerTextSX and gaugeFooterTextSX.
  • Includes DailyTarget with hoverable TargetSelector and Target components for interactive goal setting, enhanced with Fade transitions.
  • Integrated into page.tsx with full-width priority on smaller screens (xs: 24, sm: 24, md: 24, lg: 8).

File Additions:

• app/(dashboard)/components/Cards/CodewarsCard/CodewarsPieChart.tsx
• app/(dashboard)/components/Cards/CodewarsCard/PercentVsLastDay.tsx
• app/(dashboard)/components/Cards/CodewarsCard/SolvedCount.tsx
• app/(dashboard)/components/Cards/CodewarsCard/index.tsx
• app/(dashboard)/components/Cards/TargetCard/BottomInfo.tsx
• app/(dashboard)/components/Cards/TargetCard/TargetInEachDay.tsx
• app/(dashboard)/components/Cards/TargetCard/index.tsx
  File Moves:
• app/(dashboard)/Stats/DailyTarget/* → app/(dashboard)/components/Cards/TargetCard/DailyTarget/*
  File Changes:
• app/(dashboard)/page.tsx

Impact: Elevates the dashboard with engaging, data-driven visualizations for Codewars progress and daily targets, enhancing user motivation and interaction.

2. Enhanced DiamondsCell with Loading Animation

Revamped the leaderboard’s DiamondsCell to include a dynamic loading state and animation:

• Loading State: Added isLoading state with useState to track hover interactions, triggering setShowDiamondsCard only when diamondsSum > 0.
• Wave Animation: Introduced a wave keyframe animation (opacity 1 to 0.5 to 1 over 500ms) for a “Loading...” indicator, using Typography with counterStyles.
• Conditional Rendering: Switches between the loading indicator and the CountUp/DiamondIcon display based on isLoading and diamondsSum.
• Hover Integration: Shows DiamondsCard on hover with absolute positioning (right: -60, zIndex: 1), improving leaderboard interactivity.
• Prop Update: Added maxWidth prop to DiamondsCell for better table alignment, passed via Cells/index.tsx.

File Changes:

• app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/DiamondsCell.tsx
• app/(dashboard)/leaderboard/UsersTable/UserRow/Cells/index.tsx
• app/(dashboard)/leaderboard/styles.ts

Impact: Adds a polished, interactive experience to the leaderboard, with clear feedback during data loading, aligning with the vibrant Lucy theme aesthetic.

3. Refined Responsive Dashboard Layout

Optimized the dashboard’s grid layout for seamless responsiveness:

• Dynamic Display: Updated page.tsx to use display: { xs: "flex", sm: "block", md: "flex" } for Grid components, ensuring proper stacking on small screens and centering on others.
• Breakpoint Adjustments: Refined size props for TargetCard (xs: 24, sm: 24, md: 24, lg: 8) and DiamondsCard/CodewarsCard (xs: 24, sm: 24, md: 12, lg: 8) for balanced layouts.
• Gauge Margins: Enhanced SingleGauge.tsx with usePathname to conditionally apply negative marginTop for gauges (index > 1) only on the root path (/), with media queries (e.g., -10px at 200px, initial at 740px).
• Pointer Events: Moved pointerEvents: "none" to valueText and valueArc in SingleGauge.tsx for precise interaction control.

File Changes:

• app/(dashboard)/page.tsx
• app/(dashboard)/Stats/Gauges/GaugeView/SingleGauge.tsx

Impact: Creates a fluid, device-agnostic dashboard layout that enhances usability and visual appeal across screen sizes.

4. Streamlined User Validation Flow

Improved the Codewars reconnect process for a smoother user experience:

• ReconnectButton Enhancements (Reconnect.tsx):
  • Replaced Link with useRouter for programmatic navigation to /wars/validation/steps/1.
  • Added disabled prop to prevent premature clicks, controlled by UserInfoCard state.
  • Updated styling with color: "error", px: 4, py: 1.5, and boxShadow: 3 for a bold, clickable appearance.
• UserInfoCard Refactor (UserInfoCard/index.tsx):
  • Split into CodewarsInfo and Info components for modular data display, with consistent Typography styling.
  • Added isMe and isDisabled states to manage “That’s me”/“Not me” button logic, enabling/disabling ReconnectButton.
  • Integrated WarningMessage for reconnect warnings, styled with warning.main and a centered ⚠️ icon.
  • Moved Tip and ReconnectButton into UserInfoCard for a unified UI.
• Message Removal: Commented out Message.tsx and its Warning component, consolidating warnings into UserInfoCard for simplicity.
• Step3 Updates: Simplified UserInfoCard props in Steps/3/index.tsx to pass explicit values (e.g., codewarsUsername, codewarsHonor), improving type safety.

File Additions:

• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/UserInfoCard/CodewarsInfo.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/UserInfoCard/Info.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/UserInfoCard/index.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/Reconnect/WarningMessage.tsx
  File Deletions:
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/UserInfoCard.tsx
  File Changes:
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/Reconnect/Buttons/Reconnect.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/Reconnect/Message.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/Reconnect/index.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/Steps/3/index.tsx
• app/(dashboard)/wars/(codewars)/(user)/validation/steps/components/ui/LoadingPulseButton.tsx

Impact: Simplifies the reconnect process with clear feedback and modular components, enhancing user trust and interaction.

5. New EmailProvider for Context Management

Introduced a new context provider to streamline email prop passing:

• EmailProvider (app/context/providers/EmailProvider.tsx):
  • Created EmailContext to provide email to components like CodewarsCard, reducing prop drilling.
  • Used in CodewarsCard to wrap content, ensuring consistent data access.
• Context Exports: Updated contexts.ts to export EmailContext and GaugeContext for clarity and type safety.

File Additions:

• app/context/providers/EmailProvider.tsx
  File Changes:
• app/context/providers/contexts.ts

Impact: Improves code modularity and reduces repetitive prop passing, enhancing maintainability.

6. Dependency Addition: react-countup

Added react-countup for smooth number animations:

• New Dependency: Added react-countup@6.5.3 to package.json and updated pnpm-lock.yaml with countup.js@2.9.0.
• Usage: Integrated in DiamondsCell (CountUp for diamondsSum), TargetInEachDay (CountUp for label), and PercentVsLastDay for animated percentage displays.

File Changes:

• package.json
• pnpm-lock.yaml

Impact: Enhances visual feedback with smooth number transitions, improving user engagement.

7. Code Organization and Cleanup

Streamlined the codebase for clarity and maintainability:

• File Renames: Moved DiamondsPieChart, PercentVsLastWeek, and TotalDiamondsCount to app/(dashboard)/components/Cards/DiamondsCard/*, and renamed TotalDiamondsCount to TotalValue for clarity.
• Component Removal: Commented out DailyTarget in CodewarsStats/index.tsx and Message.tsx in Reconnect/index.tsx, pending future use.
• Style Updates: Added transition: 'opacity 1s ease' to diamondStyles and counterStyles in leaderboard/styles.ts for smooth visual effects.
• Database Schema: Added 8: 0 to diamond rank objects in db.ts and data.ts to support 8 kyū challenges.
• Commented Code: Removed unused fontSize properties in useGaugeDimensions.ts and commented-out Grid sections in page.tsx for future cards.

File Moves:

• app/(dashboard)/components/Card/* → app/(dashboard)/components/Cards/DiamondsCard/*
  File Changes:
• app/(dashboard)/components/Cards/DiamondsCard/*
• app/(dashboard)/Stats/hooks/useGaugeDimensions.ts
• app/seed/diamonds/data.ts
• app/services/db.ts
• app/components/CodewarsStats/index.tsx

Impact: Reduces technical debt, improves folder structure, and ensures schema consistency.

---

🐛 Bug Fixes

• DiamondsPieChart Index: Fixed rank indexing in DiamondsPieChart.tsx (ranks[7 - i] instead of ranks[ranks.length - i]) for correct kyū mapping.
• RoleBadge Styling: Replaced royalGold variable with #FFD700 in RoleBadge and DiamondsPieChart for consistent drop-shadow rendering.
• Gauge Styling: Removed commented-out backgroundColor and maxHeight in SingleGauge.tsx, and cleaned unused fontSize in useGaugeDimensions.ts.
• Loading Height: Reduced height from 100vh to 70vh in loading.tsx for better content visibility.
• TargetSelector Icons: Increased icon sizes (fontSize: 55 in TargetSelector.tsx, fontSize: 110 in Target.tsx) and opacity (80%) for better visibility.

---

🛠️ Technical Improvements

• Performance: Increased staleTime to 1 minute in useCurrentUserQuery.ts for better caching, reducing redundant fetches.
• Modularity: Exported gaugeInnerTextSXBreakpoints and gaugeFooterTextSXBreakpoints in UserRow/index.tsx for reuse in TargetCard.
• Animation: Added search keyframe animation in TargetInEachDay.tsx for a dynamic SearchSharpIcon on hover, enhancing interactivity.
• Type Safety: Improved UserInfoCard props in Steps/3/index.tsx and Reconnect/index.tsx with explicit fields (e.g., codewarsUsername), reducing reliance on session object.

---

📝 Upgrade Guide

To upgrade to v0.8.0, follow these steps:

1. Update Dependencies:

   • Run pnpm install to include react-countup@6.5.3 and its transitive dependencies (countup.js@2.9.0).
   • Verify package.json and pnpm-lock.yaml updates.

2. Integrate New Cards:

   • Add CodewarsCard and TargetCard to dashboard routes with email, label, and sx props.
   • Ensure CodewarsPieChart, PercentVsLastDay, SolvedCount, TargetInEachDay, and BottomInfo receive correct props.

3. Update DiamondsCell:

   • Pass maxWidth prop to DiamondsCell in Cells/index.tsx.
   • Test hover interactions to verify loading animation and DiamondsCard display.

4. Test Responsive Layout:

   • Check page.tsx grid behavior across breakpoints (xs, sm, md, lg).
   • Verify SingleGauge margin adjustments on root path (/) and transitions.

5. Update Validation Flow:

   • Replace UserInfoCard.tsx with new UserInfoCard/index.tsx and its subcomponents (CodewarsInfo, Info).
   • Test ReconnectButton with disabled prop and useRouter navigation.
   • Remove references to Message.tsx if unused.

6. Verify Animations:

   • Test wave animation in DiamondsCell and search animation in TargetInEachDay.
   • Ensure CountUp animations render smoothly in DiamondsCell, TargetInEachDay, and PercentVsLastDay.

7. Update Database Schema:

   • Add 8: 0 to diamond rank objects in db.ts and data.ts for 8 kyū support.
   • Validate calcDailySolvedProblemsGrowth in utils/dayjs.ts for correct growth calculations.

8. Clean Up:

   • Remove commented-out DailyTarget in CodewarsStats/index.tsx and Message.tsx in Reconnect/index.tsx if not needed.
   • Delete old UserInfoCard.tsx and update import paths for moved DiamondsCard components.

---

🙌 Contributing

A huge thank you to the BCFCODE community for your feedback and passion for coding katas! Special shoutout to contributors who helped shape the new cards and animations, making this release a true masterpiece. Want to join the fun? Dive into our GitHub Discussions.

---

📬 Feedback

We love hearing from you! Share your thoughts, report bugs, or suggest features in our GitHub Issues or on the BCFCODE community on X.

---

🤝 Get Involved

BCFCODE is a thriving hub for coding enthusiasts. Join us to code, collaborate, and conquer katas together!

Ready to level up your coding game? Join BCFCODE and make your mark!

Our Developers:

Team Members:

• Morteza Bakhshandeh
• Adib Khaki

© BCFCODE

Join our Telegram | Follow us on X