Skip to content

Latest commit

 

History

History
1024 lines (695 loc) · 243 KB

CHANGELOG.md

File metadata and controls

1024 lines (695 loc) · 243 KB

CHANGELOG

All notable changes to this project will be documented in this file.

[2025-06-10]

  • Fixes storybook test failures (32 subtasks completed)
    • Fix act() warnings in src/components/ui/accordion/accordion.stories.tsx. Tests pass but have act() warnings from Framer Motion's AnimatePresence component. The warnings occur in the Presence component when accordion items expand/collapse. Use waitFor or wrap accordion interactions in act(). Read ./tmp/tests/accordion.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/accordion/accordion.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/aspect-ratio/aspect-ratio.stories.tsx. Read the error log at ./tmp/tests/aspect-ratio.stories.log to identify any warnings or failures. May include act() warnings or component rendering issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/aspect-ratio/aspect-ratio.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/blog-post-detail/blog-post-detail.stories.tsx. Read the error log at ./tmp/tests/blog-post-detail.stories.log to identify any warnings or failures. May include act() warnings or component rendering issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/blog-post-detail/blog-post-detail.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/box/box.stories.tsx. Read the error log at ./tmp/tests/box.stories.log to identify any warnings or failures. May include act() warnings or component rendering issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/box/box.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/brand-logo-bar/brand-logo-bar.stories.tsx. Read the error log at ./tmp/tests/brand-logo-bar.stories.log to identify any warnings or failures. May include act() warnings or component rendering issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/brand-logo-bar/brand-logo-bar.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/carousel/carousel-block.stories.tsx. Read the error log at ./tmp/tests/carousel-block.stories.log to identify any warnings or failures. May include act() warnings or component rendering issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/carousel/carousel-block.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/center/center.stories.tsx. Tests pass but have act() warnings likely from ScrollArea component used in stories. The warnings indicate state updates not wrapped in act(). Check if Center component uses ScrollArea and wrap interactions accordingly. Read ./tmp/tests/center.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/center/center.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/date-picker/date-picker.stories.tsx. Read the error log at ./tmp/tests/date-picker.stories.log to identify any warnings or failures. May include act() warnings from calendar interactions or date selection state updates. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/date-picker/date-picker.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/dialog/dialog.stories.tsx. Tests pass but have multiple act() warnings from Radix UI's Presence component in portals. The warnings occur when dialog opens/closes. Use waitFor for portal content or wrap dialog interactions in act(). Read ./tmp/tests/dialog.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/dialog/dialog.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/drawer/drawer.stories.tsx. Read the error log at ./tmp/tests/drawer.stories.log to identify any warnings or failures. Likely has act() warnings similar to dialog component due to portal usage. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/drawer/drawer.stories.tsx' to verify fixes.
    • Fix testing environment warning in src/components/ui/form/form.stories.tsx. Tests pass but show warning: 'The current testing environment is not configured to support act(...)'. This is different from other act() warnings and suggests a configuration issue. Check test setup and form component implementation. Read ./tmp/tests/form.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/form/form.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/map/google-map.stories.tsx. Read the error log at ./tmp/tests/google-map.stories.log to identify any warnings or failures. May include async loading issues or iframe-related warnings. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/map/google-map.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/group/group.stories.tsx. Read the error log at ./tmp/tests/group.stories.log to identify any warnings or failures. May include act() warnings or layout-related issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/group/group.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/header/header.stories.tsx. Read the error log at ./tmp/tests/header.stories.log to identify any warnings or failures. May include act() warnings from navigation menu or mobile menu interactions. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/header/header.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/blocks/hero/hero.stories.tsx. Tests pass but have act() warnings from ScrollArea component. Multiple stories use ScrollArea which triggers state updates. Wrap ScrollArea interactions in act() or use waitFor. Read ./tmp/tests/hero.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/hero/hero.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/icon/icon.stories.tsx. Read the error log at ./tmp/tests/icon.stories.log to identify any warnings or failures. May include act() warnings or icon loading issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/icon/icon.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/image/image.stories.tsx. Tests pass but Gallery story has multiple act() warnings from ScrollArea component. The warnings occur when ScrollArea updates its scroll state. Use waitFor or wrap scroll interactions in act(). Read ./tmp/tests/image.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/image/image.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/input-otp/input-otp.stories.tsx. Read the error log at ./tmp/tests/input-otp.stories.log to identify any warnings or failures. May include act() warnings from input focus/blur or OTP state updates. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/input-otp/input-otp.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/latest-news/latest-news.stories.tsx. Read the error log at ./tmp/tests/latest-news.stories.log to identify any warnings or failures. May include act() warnings or data fetching issues. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/latest-news/latest-news.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/location-hours/location-hours.stories.tsx. Read the error log at ./tmp/tests/location-hours.stories.log to identify any warnings or failures. May include act() warnings or time-related state updates. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/location-hours/location-hours.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/masonry/masonry.stories.tsx. Tests pass but have act() warnings from both Masonry and ScrollArea components. The Masonry component likely updates layout state during render. Wrap layout calculations in act() or use waitFor. Read ./tmp/tests/masonry.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/masonry/masonry.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/navigation-menu/navigation-menu.stories.tsx. Read the error log at ./tmp/tests/navigation-menu.stories.log to identify any warnings or failures. May include act() warnings from menu open/close animations. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/navigation-menu/navigation-menu.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/newsletter-signup/newsletter-signup.stories.tsx. Read the error log at ./tmp/tests/newsletter-signup.stories.log to identify any warnings or failures. May include act() warnings from form submission or validation state. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/newsletter-signup/newsletter-signup.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/page-section/page-section.stories.tsx. Read the error log at ./tmp/tests/page-section.stories.log to identify any warnings or failures. May include act() warnings if section contains interactive elements. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/page-section/page-section.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/pagination/pagination.stories.tsx. Read the error log at ./tmp/tests/pagination.stories.log to identify any warnings or failures. May include act() warnings from page navigation state updates. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/pagination/pagination.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/popover/popover.stories.tsx. Tests pass but have act() warnings from Radix UI's Presence component in portals. Similar to dialog, warnings occur when popover opens/closes. Use waitFor for portal content or wrap popover interactions in act(). Read ./tmp/tests/popover.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/popover/popover.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/pricing-table/pricing-table.stories.tsx. Read the error log at ./tmp/tests/pricing-table.stories.log to identify any warnings or failures. May include act() warnings from interactive pricing toggles or animations. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/pricing-table/pricing-table.stories.tsx' to verify fixes.
    • Fix act() warnings in src/components/ui/scroll-area/scroll-area.stories.tsx. Tests pass but likely have significant act() warnings as ScrollArea is the source of warnings in many other components. Focus on wrapping scroll state updates in act(). Read ./tmp/tests/scroll-area.stories.log for details. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/scroll-area/scroll-area.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/ui/sheet/sheet.stories.tsx. Read the error log at ./tmp/tests/sheet.stories.log to identify any warnings or failures. Likely has act() warnings similar to dialog/drawer due to portal and animation usage. Run 'VITEST_STORYBOOK=true npx vitest run src/components/ui/sheet/sheet.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/stat-block/stat-block.stories.tsx. Read the error log at ./tmp/tests/stat-block.stories.log to identify any warnings or failures. May include act() warnings if stats have animations or counters. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/stat-block/stat-block.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/testimonial/testimonial.stories.tsx. Read the error log at ./tmp/tests/testimonial.stories.log to identify any warnings or failures. May include act() warnings from carousel or animation effects. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/testimonial/testimonial.stories.tsx' to verify fixes.
    • Investigate test issues in src/components/blocks/typewriter-text/typewriter-text.stories.tsx. Read the error log at ./tmp/tests/typewriter-text.stories.log to identify any warnings or failures. Likely has act() warnings from typewriter animation state updates. Run 'VITEST_STORYBOOK=true npx vitest run src/components/blocks/typewriter-text/typewriter-text.stories.tsx' to verify fixes.

[2025-06-09]

  • Implement dual-mode story functionality for TypewriterText component. CRITICAL: The args MUST use type 'TypewriterText' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (animated text, cursor, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Timeline component. CRITICAL: The args MUST use type 'Timeline' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (timeline items, dates, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Testimonial component. CRITICAL: The args MUST use type 'Testimonial' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (quote text, author, role, avatar, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for TeamGrid component. CRITICAL: The args MUST use type 'TeamGrid' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (team member cards, names, roles, images, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for StatBlock component. CRITICAL: The args MUST use type 'StatBlock' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (stat values, labels, icons, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for SocialShareBar component. CRITICAL: The args MUST use type 'SocialShareBar' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (share buttons, icons, links, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Sidebar component. CRITICAL: The args MUST use type 'Sidebar' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (sidebar content, navigation items, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for ServiceList component. CRITICAL: The args MUST use type 'ServiceList' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (service items, icons, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for RestaurantMenu component. CRITICAL: The args MUST use type 'RestaurantMenu' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (menu sections, items, prices, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for ProductShowcase component. CRITICAL: The args MUST use type 'ProductShowcase' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (product images, features, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for ProcessSteps component. CRITICAL: The args MUST use type 'ProcessSteps' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (step numbers, titles, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PricingTable component. CRITICAL: The args MUST use type 'PricingTable' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (pricing tiers, features, prices, CTA buttons, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PortfolioCaseStudies component. CRITICAL: The args MUST use type 'PortfolioCaseStudies' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (case study cards, titles, images, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PhotoGallery component. CRITICAL: The args MUST use type 'PhotoGallery' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (images, captions, grid layout, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PhotoFlipCard component. CRITICAL: The args MUST use type 'PhotoFlipCard' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (front/back content, images, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PageSection component. CRITICAL: The args MUST use type 'PageSection' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (section content, padding, background, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for PageHeroHeader component. CRITICAL: The args MUST use type 'PageHeroHeader' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (hero title, subtitle, CTA buttons, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for NewsletterSignup component. CRITICAL: The args MUST use type 'NewsletterSignup' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (email input, submit button, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for GoogleMap component. CRITICAL: The args MUST use type 'GoogleMap' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (map iframe, markers, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Map component. CRITICAL: The args MUST use type 'Map' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (map container, markers, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for LocationHours component. CRITICAL: The args MUST use type 'LocationHours' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (location names, hours, addresses, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for LatestNews component. CRITICAL: The args MUST use type 'LatestNews' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (news items, dates, summaries, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for JobListings component. CRITICAL: The args MUST use type 'JobListings' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (job titles, descriptions, locations, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Icon component. CRITICAL: The args MUST use type 'Icon' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (icon svg, size, color, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Header component. CRITICAL: The args MUST use type 'Header' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (logo, navigation, menu items, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Implement dual-mode story functionality for Footer component. CRITICAL: The args MUST use type 'Footer' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (links, copyright, social icons, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identified.

[2025-06-09]

  • Implement dual-mode story functionality for Features component. CRITICAL: The args MUST use type 'Features' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (feature list, icons, descriptions, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-09]

  • Fixes storybook test failures (30 subtasks completed)
    • Investigate test errors and warnings in src/components/ui/accordion/accordion.stories.tsx. Read the error log at ./tmp/tests/accordion.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- accordion.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/avatar/avatar.stories.tsx. Read the error log at ./tmp/tests/avatar.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- avatar.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/blog-post-detail/blog-post-detail.stories.tsx. Read the error log at ./tmp/tests/blog-post-detail.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- blog-post-detail.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/brand-logo-bar/brand-logo-bar.stories.tsx. Read the error log at ./tmp/tests/brand-logo-bar.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- brand-logo-bar.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/carousel/carousel-block.stories.tsx. Read the error log at ./tmp/tests/carousel-block.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- carousel-block.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/chart/chart.stories.tsx. Read the error log at ./tmp/tests/chart.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- chart.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/combobox/combobox.stories.tsx. Read the error log at ./tmp/tests/combobox.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- combobox.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/contact-form-block/contact-form-block.stories.tsx. Read the error log at ./tmp/tests/contact-form-block.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- contact-form-block.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/context-menu/context-menu.stories.tsx. Read the error log at ./tmp/tests/context-menu.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- context-menu.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/date-picker/date-picker.stories.tsx. Read the error log at ./tmp/tests/date-picker.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- date-picker.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/dialog/dialog-enhanced.stories.tsx. Read the error log at ./tmp/tests/dialog-enhanced.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- dialog-enhanced.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/dialog/dialog.stories.tsx. Read the error log at ./tmp/tests/dialog.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- dialog.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/drawer/drawer.stories.tsx. Read the error log at ./tmp/tests/drawer.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- drawer.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/dropdown-menu/dropdown-menu-sdui.stories.tsx. Read the error log at ./tmp/tests/dropdown-menu-sdui.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- dropdown-menu-sdui.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/hover-card/hover-card.stories.tsx. Read the error log at ./tmp/tests/hover-card.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- hover-card.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/image/image.stories.tsx. Read the error log at ./tmp/tests/image.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- image.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/input-otp/input-otp.stories.tsx. Read the error log at ./tmp/tests/input-otp.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- input-otp.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/masonry/masonry.stories.tsx. Read the error log at ./tmp/tests/masonry.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- masonry.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/navigation-menu/navigation-menu.stories.tsx. Read the error log at ./tmp/tests/navigation-menu.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- navigation-menu.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/newsletter-signup/newsletter-signup.stories.tsx. Read the error log at ./tmp/tests/newsletter-signup.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- newsletter-signup.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/page-section/page-section.stories.tsx. Read the error log at ./tmp/tests/page-section.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- page-section.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/pagination/pagination.stories.tsx. Read the error log at ./tmp/tests/pagination.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- pagination.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/photo-gallery/photo-gallery.stories.tsx. Read the error log at ./tmp/tests/photo-gallery.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- photo-gallery.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/popover/popover.stories.tsx. Read the error log at ./tmp/tests/popover.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- popover.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/sheet/sheet.stories.tsx. Read the error log at ./tmp/tests/sheet.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- sheet.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/slider/slider.stories.tsx. Read the error log at ./tmp/tests/slider.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- slider.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/stat-block/stat-block.stories.tsx. Read the error log at ./tmp/tests/stat-block.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- stat-block.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/team-grid/team-grid.stories.tsx. Read the error log at ./tmp/tests/team-grid.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- team-grid.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/blocks/testimonial/testimonial.stories.tsx. Read the error log at ./tmp/tests/testimonial.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- testimonial.stories' to verify any fixes.
    • Investigate test errors and warnings in src/components/ui/tooltip/tooltip.stories.tsx. Read the error log at ./tmp/tests/tooltip.stories.log to understand the issues. May include act() warnings, test failures, or other warnings that need resolution. Some may be false positives. Run 'npm run test-storybook -- tooltip.stories' to verify any fixes.

[2025-06-09]

  • Fixed DatePicker component test failures - DatePicker now properly controls its popover open state, closing automatically when a date is selected. Updated test assertions and added proper timeouts to handle animation timing.

  • Implement dual-mode story functionality for FeatureCard component. CRITICAL: The args MUST use type 'FeatureCard' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (icon, title, description, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-08]

  • Implement dual-mode story functionality for FAQ component. CRITICAL: The args MUST use type 'FAQ' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (questions, answers, accordion functionality, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-08]

  • Implement dual-mode story functionality for EventListings component. CRITICAL: The args MUST use type 'EventListings' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (event titles, dates, locations, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-08]

  • Implement dual-mode story functionality for ErrorPage component. CRITICAL: The args MUST use type 'ErrorPage' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (error code, message, back button, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-08]

  • Implement dual-mode story functionality for CookieConsentBanner component. CRITICAL: The args MUST use type 'CookieConsentBanner' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (consent text, accept/decline buttons, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-08]

  • Implement dual-mode story functionality for ContactForm component. CRITICAL: The args MUST use type 'ContactForm' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Add play() functions that verify actual content renders (form fields, submit button, etc). Test by viewing both React and SDUI tabs in Storybook - they should be identical.

[2025-06-07]

  • FIX CURRENT IMPLEMENTATION: ContactFormBlock stories have type errors. The args MUST use type 'ContactFormBlock'. Fix the enhanceStoryForDualMode usage to properly type the story. The SDUI view should render EXACTLY the same as the React view showing form fields, labels, and submit button. Ensure the play() functions verify that form elements actually render. Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: Carousel stories are using incorrect SDUI format. The args MUST use the actual component type 'CarouselBlock' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'CarouselBlock' and ensure the play() functions verify that content actually renders (e.g., slides, navigation buttons). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: CallToAction stories are using incorrect SDUI format. The args MUST use the actual component type 'CallToAction' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'CallToAction' and ensure the play() functions verify that content actually renders (e.g., heading, description, buttons). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: BrandLogoBar stories are using incorrect SDUI format. The args MUST use the actual component type 'BrandLogoBar' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'BrandLogoBar' and ensure the play() functions verify that content actually renders (e.g., logos, brand names). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: BlogPostGrid stories are using incorrect SDUI format. The args MUST use the actual component type 'BlogPostGrid' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'BlogPostGrid' and ensure the play() functions verify that content actually renders (e.g., blog posts, titles, excerpts). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: BlogPostDetail stories are using incorrect SDUI format. The args MUST use the actual component type 'BlogPostDetail' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'BlogPostDetail' and ensure the play() functions verify that content actually renders (e.g., title, author, content, tags). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • FIX BROKEN IMPLEMENTATION: AnnouncementBar stories are using incorrect SDUI format. The args MUST use the actual component type 'AnnouncementBar' NOT 'component'. The SDUI view should render EXACTLY the same as the React view. Update all stories to have proper args.type = 'AnnouncementBar' and ensure the play() functions verify that content actually renders (e.g., announcement text, links, close button). Test by running stories and checking that BOTH React and SDUI tabs show the same rendered component.

[2025-06-07]

  • Implement dual-mode story functionality for ContactFormBlock component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/contact-form-block/contact-form-block.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for Carousel component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/carousel/carousel-block.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for CallToAction component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/call-to-action/call-to-action.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for BrandLogoBar component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/brand-logo-bar/brand-logo-bar.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for BlogPostGrid component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/blog-post-grid/blog-post-grid.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for BlogPostDetail component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/blog-post-detail/blog-post-detail.stories.tsx

[2025-06-07]

  • Implement dual-mode story functionality for AnnouncementBar component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/blocks/announcement-bar/announcement-bar.stories.tsx

[2025-06-07]

  • TASK: Implement comprehensive form validation system for SDUI mode. CRITICAL ISSUE: Form 'With Validation' story - submit button does nothing in SDUI mode. Form validation is completely non-functional. SEVERITY: Critical - form validation is essential for any application. SCOPE: This requires building validation infrastructure for SDUI from scratch. ACTION REQUIRED: 1) Design validation system architecture for SDUI mode. 2) Implement field-level validation with error messages. 3) Support common validators: required, email, min/max length, patterns. 4) Implement form-level validation and submit handling. 5) Show validation errors inline with fields. 6) Create comprehensive documentation in Storybook showing validation patterns. 7) Support async validation and custom validators. EXPECTED OUTCOME: Full-featured form validation system in SDUI with extensive documentation and examples.

[2025-06-07]

  • TASK: Fix Table component styling inconsistencies in SDUI mode. ISSUE 1 - Striped: 'Striped' variant doesn't show alternating row colors in SDUI. ISSUE 2 - Bordered: Missing borders and incorrect header background in SDUI. ISSUE 3 - Spacing: 'Minimal' and 'Compact' variants have too much spacing in SDUI (React spacing is correct). ISSUE 4 - Modern Style: 'Modern' variant looks completely different in SDUI vs React. ISSUE 5 - Hover Effect: 'No Hover Effect' variant shows hover effects in SDUI but shouldn't (React is correct). ACTION REQUIRED: 1) Ensure stripe styles are applied in SDUI mode. 2) Fix border and header background styles. 3) Correct spacing for compact variants. 4) Match modern variant styling to React. 5) Remove hover effects where not intended. 6) Test all table variants thoroughly. EXPECTED OUTCOME: All table styling variants in SDUI should match React exactly.

[2025-06-07]

  • TASK: Fix Resizable component styling and icon issues in SDUI mode. ISSUE 1 - Text Color: IDE Layout story shows black text in SDUI (https://i.imgur.com/Eh2WkRq.png) but white text in React (https://i.imgur.com/4CVhL4H.png). This breaks the IDE theme appearance. ISSUE 2 - Missing Icons: Icons don't render at all in SDUI mode for resizable panels. IMPORTANT: Emojis are NOT valid icons - SDUI must render actual icon components (SVGs) just like React mode. ACTION REQUIRED: 1) Fix text color inheritance - ensure dark theme styles apply in SDUI. 2) Implement actual SVG icon rendering for resize handles and panel content. 3) Ensure resize functionality works identically in both modes. 4) Test with nested resizable panels and different orientations. 5) Verify drag handles and cursors work properly. EXPECTED OUTCOME: Resizable panels in SDUI should match React appearance and functionality exactly with proper SVG icons.

[2025-06-07]

  • **TASK: Fix multiple NavigationMenu rendering issues in SDUI mode. ISSUE 1 - Hover Styling: On hover, shows white text on grey background making text unreadable, dropdown is all white (https://i.imgur.com/eHkc352.png). ISSUE 2 - Missing Badge: 'With Icons And Badges' story doesn't show badges in SDUI. ISSUE 3 - Alignment: 'With Full Width Content' story is left-aligned in SDUI but should be horizontally centered like React. ISSUE 4 - Missing Elements: 'With Branding And CTA' story missing branding text 'ACME' and CTA buttons in SDUI. ACTION REQUIRED: 1) Fix hover state styling - ensure readable contrast and proper dropdown styling. 2) Implement badge rendering within navigation items. 3) Fix alignment issues - ensure center alignment matches React. 4) Ensure all navigation elements render: branding, buttons, badges, icons. IMPORTANT: Icons must be actual SVG components, NOT emojis. 5) Test responsive behavior and all navigation patterns. EXPECTED OUTCOME: NavigationMenu in SDUI should match React exactly for styling, alignment, and all child elements including proper SVG icons.

[2025-06-07]

  • TASK: Fix ToggleGroup component hover and icon issues. NOTE: Originally reported as 'HoverGroup' - verify correct component name. ISSUE 1 - Hover Background: Hover state shows harsh black background (https://i.imgur.com/9wkJADK.png) instead of subtle effect. ISSUE 2 - Missing Icons: Icons don't render in SDUI mode - shows emojis instead. IMPORTANT: Emojis are NOT valid icons - SDUI must render actual icon components (SVGs) just like React mode. ACTION REQUIRED: 1) Fix hover state to use subtle background color, not black. 2) Implement proper SVG icon rendering for toggle items. 3) Ensure toggle selection state is clearly visible. 4) Support both single and multiple selection modes. 5) Test keyboard navigation between toggles. 6) Remove ALL emoji fallbacks. EXPECTED OUTCOME: ToggleGroup with subtle hover effects and proper SVG icon rendering matching React mode.

[2025-06-07]

  • TASK: Fix Select component rendering and interaction issues. ISSUE 1 - Flash: Select flashes on initial render (similar to DatePicker/Combobox). ISSUE 2 - Default Value: 'With Default Value' story doesn't show the selected default in SDUI. ISSUE 3 - Hover Style: Dropdown hover shows harsh black background (https://i.imgur.com/tAjsHRc.png) instead of subtle gray. ACTION REQUIRED: 1) Fix initial render flash - review mounting and state initialization. 2) Ensure defaultValue/value props work in SDUI mode. 3) Fix hover styles to use subtle gray background (not black). 4) Test keyboard navigation and selection. 5) Ensure selected state is properly indicated. 6) Verify dropdown positioning and animations. EXPECTED OUTCOME: Smooth rendering, proper default values, and subtle hover effects matching React.

[2025-06-07]

  • TASK: Implement SDUI support for KeyboardNavigationMenu component. ISSUE: KeyboardNavigationMenu has no SDUI rendering support. Keyboard-navigable menus are not available in SDUI mode. APPROACH: May be able to enhance Command component as it already has keyboard navigation patterns. ACTION REQUIRED: 1) Assess if KeyboardNavigationMenu can be implemented in SDUI. 2) Consider extending Command component for keyboard navigation patterns. 3) Implement arrow key navigation, Enter/Space selection. 4) Support focus management and ARIA attributes. 5) Ensure Tab key navigation works properly. EXPECTED OUTCOME: Keyboard-navigable menus working in SDUI mode with full accessibility support.

[2025-06-07]

  • TASK: Fix Tabs component cursor and rendering issues. CRITICAL ISSUE 1 - Cursor: Tab items need cursor-pointer style for better UX. CRITICAL ISSUE 2 - SDUI Rendering: Multiple stories render nothing in SDUI: 'Vertical Tabs', 'Disabled Tabs', 'With Icons', 'Manual Activation', 'With Form Content', 'Without Animation'. Complete failure of these variants. SEVERITY: Critical - tabs are fundamental navigation components. ACTION REQUIRED: 1) Add cursor-pointer to all tab triggers in both modes. 2) Debug why specific tab variants fail in SDUI. 3) Implement vertical orientation support in SDUI. 4) Fix disabled state handling in SDUI. 5) Implement icon support within tabs. IMPORTANT: Icons must be actual SVG components, NOT emojis. 6) Fix manual activation mode and animation toggles. 7) Ensure form content renders properly in tab panels. EXPECTED OUTCOME: All tab variants fully functional in SDUI with proper cursor styles and SVG icon support.
    • ✅ COMPLETED: Fixed all Tabs component issues:
      • Added cursor-pointer style to TabsTrigger for better UX
      • Added missing renderSpec definitions for all failing stories (VerticalOrientation, WithDisabledTab, WithIcons, ManualActivation, WithFormContent, WithoutAnimation)
      • Implemented proper icon support using Icon component with registered SVG icons
      • Fixed vertical orientation, disabled states, and manual activation in SDUI
      • Fixed form content rendering with proper Input, Label, and Checkbox components
      • All tab variants now fully functional in SDUI mode

[2025-06-07]

  • TASK: Fix SkeletonLoader component rendering and documentation. CRITICAL ISSUE 1 - No Documentation: SkeletonLoader has no autodocs page in Storybook. CRITICAL ISSUE 2 - SDUI Failure: SDUI views render nothing at all - complete component failure. SEVERITY: Critical - skeleton loaders are essential for loading states. ACTION REQUIRED: 1) Add proper story documentation for SkeletonLoader. 2) Debug why SkeletonLoader fails to render in SDUI mode. 3) Implement full SkeletonLoader support in SDUI renderer. 4) Ensure animations work properly in both modes. 5) Support all skeleton variants: text, avatar, card, custom shapes. 6) Add comprehensive stories showing different use cases. EXPECTED OUTCOME: Complete documentation and fully functional skeleton loaders in both React and SDUI modes.

[2025-06-07]

  • TASK: Fix InputOTP component issues in SDUI mode. ISSUE 1 - Digit Count: 'Four Digit PIN' renders 6 digits in SDUI instead of 4. Same for 'Custom Separator' and 'Password' variants. ISSUE 2 - Default Value: 'With Default Value' story doesn't show the default value in SDUI. ISSUE 3 - Disabled State: 'Disabled' variant isn't actually disabled in SDUI mode. ACTION REQUIRED: 1) Fix maxLength/length prop handling in SDUI to show correct digit count. 2) Ensure defaultValue prop is properly passed and rendered. 3) Implement disabled state handling in SDUI mode. 4) Test all InputOTP configurations thoroughly. 5) Ensure input restrictions (numeric only) work in SDUI. EXPECTED OUTCOME: InputOTP in SDUI should match React behavior for digit count, default values, and disabled state.

[2025-06-07]

  • TASK: Implement SDUI support for ExtendedHeadManager component. ISSUE: ExtendedHeadManager (for managing document head/meta tags) has no SDUI support. This limits SEO and meta tag management in SDUI applications. CONSIDERATIONS: This might be architectural - SDUI may not support dynamic head management by design. ACTION REQUIRED: 1) Determine if head management is architecturally possible in SDUI mode. 2) If possible, implement meta tag, title, and link tag management. 3) If not possible due to SDUI limitations, document this clearly. 4) Consider alternative approaches for SEO in SDUI applications. EXPECTED OUTCOME: Either working head management in SDUI or clear documentation explaining the limitation with recommended alternatives.
    • ✅ COMPLETED: Verified that ExtendedHeadManager already works fully in SDUI mode. The component was already registered in the component resolver and functions correctly. Created comprehensive documentation explaining SDUI usage, supported schemas, and best practices. ExtendedHeadManager provides complete SEO and metadata management capabilities through JSON specifications with no limitations.

[2025-06-07]

  • TASK: Fix Sheet component issues in both React and SDUI modes. CRITICAL ISSUE 1 - React Flash: 'Open Sheet' button flashes on initial load in React mode. CRITICAL ISSUE 2 - SDUI Non-functional: Sheet triggers don't work at all in SDUI - clicking does nothing. SEVERITY: Critical for SDUI, Medium for React flash. ACTION REQUIRED: 1) Fix React flash issue - likely CSS or hydration timing. 2) Debug why sheet triggers don't work in SDUI mode. 3) Implement proper event binding for sheet triggers in SDUI. 4) Ensure sheet animations and positions work in SDUI. 5) Support all sheet features: sizes, positions, close button, backdrop. 6) Test keyboard interactions and focus management. EXPECTED OUTCOME: Smooth rendering in React mode and fully functional sheets in SDUI mode.
    • ✅ COMPLETED: Implemented SheetWrapper component to handle SDUI state management and event handlers. Added support for onOpenChangeAction prop in Sheet schema. Fixed React flash issue by simplifying SheetTrigger component. Ensured asChild pattern works correctly with SheetTrigger in SDUI mode. All sheet features now work properly in both React and SDUI modes.

[2025-06-07]

  • TASK: Fix Sheet component trigger and initial render issues in SDUI mode. ISSUE: Sheet component has two problems - 1) Buttons/elements flash on initial load due to opacity animation. 2) SDUI trigger with asChild might not work correctly. ROOT CAUSE: SheetTrigger component had mounted state management that interfered with asChild prop functionality. ACTION REQUIRED: 1) Remove opacity state management from SheetTrigger. 2) Let trigger render immediately without transitions. 3) Ensure asChild works properly in SDUI mode. EXPECTED OUTCOME: Sheet triggers render immediately without flash and work correctly with asChild in SDUI mode.

    • ✅ COMPLETED: Removed SheetTrigger's opacity state management to fix initial render flash and asChild compatibility issues

  • TASK: Fix Masonry grid layout in SDUI mode. ISSUE: Masonry component renders cards in a vertical stack instead of proper masonry grid layout. React mode shows correct masonry layout with staggered columns. ROOT CAUSE: CSS Grid or Flexbox properties for masonry layout aren't being applied in SDUI mode. ACTION REQUIRED: 1) Investigate why masonry CSS isn't applied in SDUI. 2) Ensure grid-auto-flow and column properties work in SDUI. 3) Implement proper height calculations for masonry items. 4) Support responsive column counts. 5) Test with various content heights to ensure proper staggering. 6) Verify gap/spacing properties work correctly. EXPECTED OUTCOME: SDUI masonry layout should match React with proper multi-column staggered grid.

[2025-06-07]

  • TASK: Fix Toast notification system in SDUI mode. CRITICAL ISSUE: Toast trigger buttons don't work at all in SDUI mode - clicking shows no toast notifications. Complete failure of the toast system. SEVERITY: Critical - toasts are essential for user feedback. ROOT CAUSE: Toast system likely relies on global state or context that isn't available in SDUI mode. ACTION REQUIRED: 1) Debug why toast triggers don't work in SDUI. 2) Implement toast notification system for SDUI mode. 3) Ensure toast positioning, animations, and auto-dismiss work. 4) Support all toast variants: success, error, warning, info. 5) Implement toast action buttons and close functionality. 6) Handle multiple toasts and positioning. EXPECTED OUTCOME: Fully functional toast notifications in SDUI mode matching React behavior.

[2025-06-07]

  • TASK: Fix Popover hover/click interactions in SDUI mode. CRITICAL ISSUE: Popover triggers don't work at all in SDUI mode - hovering/clicking does nothing. Popovers are completely non-functional. SEVERITY: Critical - popovers are essential for contextual information. ROOT CAUSE: Event handlers (hover or click based on trigger mode) are not connected in SDUI rendering. ACTION REQUIRED: 1) Debug why popover triggers aren't working in SDUI. 2) Implement both hover and click trigger modes for SDUI. 3) Ensure proper positioning and arrow pointing. 4) Support dismiss on outside click and ESC key. 5) Handle viewport boundary detection. 6) Test with various trigger types and content. EXPECTED OUTCOME: Fully functional popovers in SDUI mode with both hover and click triggers working.

    • ✅ COMPLETED: Fixed Popover component in SDUI mode by implementing proper event handler conversion

  • TASK: Fix Toast notifications not working in SDUI mode. CRITICAL ISSUE: Toast notifications don't work at all in SDUI mode - clicking buttons that should show toasts does nothing. Toast system is completely non-functional. SEVERITY: Critical - toasts are essential for user feedback. ROOT CAUSE: The toast function from Sonner is not available in the global scope where SDUI event handlers look for it. ACTION REQUIRED: 1) Make toast function globally accessible. 2) Support all toast variants (success, error, warning, info). 3) Ensure auto-dismiss and positioning work. 4) Support toast actions and dismiss. EXPECTED OUTCOME: Fully functional toast notifications in SDUI mode.

    • ✅ COMPLETED: Implemented toast manager to expose toast functions globally, enhanced event handlers to support function calls with arguments, created imperative API registry for SDUI mode

[2025-06-06]

  • TASK: Implement SDUI support for DropdownMenu component. ISSUE: DropdownMenu component has no SDUI/JSON rendering support. Dropdown menus are not available in SDUI mode. APPROACH: Consider enhancing Command component to handle dropdown menu patterns if direct implementation is complex, as they share similar item selection patterns. ACTION REQUIRED: 1) Assess if DropdownMenu can be directly implemented in SDUI. 2) If complex, extend Command component to support dropdown patterns. 3) Implement trigger button click handling and menu positioning. 4) Support menu items, separators, sub-menus, and disabled states. 5) Ensure keyboard navigation works properly. EXPECTED OUTCOME: Working dropdown menus in SDUI mode with full feature parity with React mode.

[2025-06-06]

  • TASK: Fix DatePicker flashing issue on initial render. ISSUE: DatePicker component flashes during initial render (visible → invisible → visible sequence) in BOTH React and SDUI modes. This creates a poor user experience and appears broken. ROOT CAUSE: Likely related to hydration, initial state setup, or CSS loading timing. ACTION REQUIRED: 1) Debug the render lifecycle to identify what causes the flash. 2) Check if it's related to portal rendering, positioning calculations, or style loading. 3) Implement proper initial state to prevent the flash. 4) May need to adjust CSS or use visibility instead of display properties. 5) Test across different scenarios and ensure smooth initial render. EXPECTED OUTCOME: DatePicker should render smoothly without any flashing in both React and SDUI modes.

[2025-06-06]

  • TASK: Fix DataTable rendering issues in SDUI mode. ISSUE 1 - Missing Checkboxes: Selection checkboxes don't appear at all in SDUI mode, breaking row selection functionality. ISSUE 2 - Status Badge Rendering: Status badges render as plain text instead of styled badge components, losing visual hierarchy and meaning. ROOT CAUSE: Complex components (Checkbox, Badge) within DataTable cells are not being properly processed by SDUI renderer. ACTION REQUIRED: 1) Fix checkbox rendering within table cells - ensure Checkbox component works inside DataTable. 2) Fix badge rendering - status columns should show proper Badge components, not plain text. 3) Ensure all DataTable features work: sorting, filtering, pagination, selection. 4) Test with various data types and column configurations. EXPECTED OUTCOME: DataTable in SDUI mode should have fully functional checkboxes and proper badge rendering matching React mode.

[2025-06-06]

  • TASK: Fix HoverCard hover interactions in SDUI mode. CRITICAL ISSUE: HoverCard component hover interactions don't work at all in SDUI mode - hovering over triggers shows nothing. This breaks tooltip-like information display. SEVERITY: Critical - hover interactions are essential for HoverCard. ROOT CAUSE: Mouse event handlers (onMouseEnter/onMouseLeave) are not properly connected in SDUI rendering. ACTION REQUIRED: 1) Debug why hover events aren't triggering in SDUI mode. 2) Implement proper mouse event handler binding for SDUI. 3) Ensure hover delay timing works correctly. 4) Support hover card positioning and animations. 5) Handle edge cases: viewport boundaries, rapid hover/unhover. 6) Test with various trigger elements and card content. EXPECTED OUTCOME: HoverCards should appear on hover in SDUI mode exactly as they do in React mode.

[2025-06-06]

  • TASK: Implement SDUI support for ContextMenu component. ISSUE: ContextMenu component has no SDUI/JSON rendering support at all. Right-click context menus are not available in SDUI mode. APPROACH: Since context menus share similarities with command palettes, consider enhancing the Command component to handle context menu use cases if direct implementation is complex. ACTION REQUIRED: 1) Assess feasibility of direct ContextMenu SDUI implementation. 2) If complex, enhance Command component to support context menu patterns. 3) Implement right-click event handling in SDUI mode. 4) Support nested menu items, dividers, disabled items, and icons. IMPORTANT: Icons must be actual SVG components, NOT emojis. 5) Ensure proper positioning and dismiss behavior. EXPECTED OUTCOME: Working context menus in SDUI mode with proper SVG icon support, either through direct implementation or Command component enhancement.

[2025-06-06]

  • TASK: Implement icon support for Command palette component in SDUI mode. ISSUE: Command component (command palette) displays emoji characters instead of proper icons in SDUI views. This affects the usability and professional appearance of the command palette. IMPACT: Command palettes typically show icons for commands, search, categories - all showing emojis instead. IMPORTANT: Emojis are NOT valid icons - SDUI must render actual icon components (SVGs) just like React mode. ACTION REQUIRED: 1) Analyze command.tsx structure and how icons are passed to command items. 2) Update SDUI renderer to handle actual SVG icon components within Command palette items. 3) Ensure icons work for: command items, categories, search icon, keyboard shortcuts. 4) Remove ALL emoji fallback logic entirely. 5) Test command palette with various icon types and positions. EXPECTED OUTCOME: Command palette in SDUI mode should display proper SVG icons matching the React implementation, maintaining the professional appearance.

[2025-06-06]

  • TASK: Fix complete Calendar component failure in SDUI mode. CRITICAL ISSUE: Calendar component is completely invisible/non-functional in ALL SDUI views. This is a major component failure where the entire calendar widget fails to render in JSON mode. SEVERITY: Critical - entire component non-functional. ROOT CAUSE ANALYSIS NEEDED: 1) Calendar might use complex state management not supported in SDUI. 2) Date picker libraries may not be compatible with SDUI rendering. 3) Event handlers might not be properly wired in JSON mode. ACTION REQUIRED: 1) Debug why Calendar fails to render at all in SDUI mode. 2) Investigate if this is due to third-party library incompatibility. 3) Implement full Calendar support in SDUI renderer including date selection, month navigation, and event handling. 4) Add comprehensive tests for Calendar in both React and SDUI modes. 5) Ensure all calendar features work: date selection, disabled dates, date ranges, etc. EXPECTED OUTCOME: Full calendar functionality in SDUI mode matching React mode.

[2025-06-06]

  • TASK: Fix complete Collapsible component failure in SDUI mode. CRITICAL ISSUE: None of the Collapsible component stories render in SDUI mode - complete component failure. The collapsible functionality is entirely broken in JSON rendering. SEVERITY: Critical - entire component non-functional. POTENTIAL CAUSES: 1) State management for open/closed states not working in SDUI. 2) Animation/transition handlers not properly connected. 3) Event handlers for expand/collapse not wired in JSON mode. ACTION REQUIRED: 1) Debug the root cause of why Collapsible fails to render in SDUI. 2) Implement proper state management for collapsible open/closed states in SDUI. 3) Ensure click handlers and animations work in JSON mode. 4) Support all collapsible features: default open state, disabled state, custom triggers. 5) Add tests to prevent regression. EXPECTED OUTCOME: Fully functional collapsible components in SDUI mode with smooth animations and proper state management.

[2025-06-06]

  • TASK: Fix Drawer component trigger functionality in SDUI mode. CRITICAL ISSUE: Drawer trigger buttons in SDUI mode don't open drawers - complete functionality failure. Clicking drawer triggers has no effect. SEVERITY: Critical - drawers are essential for navigation and forms. ROOT CAUSE: Similar to dialogs, event handlers and state management for drawers are not functioning in SDUI mode. ACTION REQUIRED: 1) Debug the drawer trigger mechanism in SDUI mode. 2) Implement proper event handler binding for drawer triggers. 3) Ensure drawer state management works in JSON rendering. 4) Support all drawer positions (left, right, top, bottom). 5) Implement proper animations, backdrop, and dismiss behaviors. 6) Test with various drawer sizes and content types. EXPECTED OUTCOME: Fully functional drawers in SDUI mode with smooth animations and all interactions working.

[2025-06-06]

  • TASK: Fix Combobox component flash on initial render. ISSUE: Combobox flashes/flickers when first rendered, creating a poor user experience. Similar to DatePicker flash issue. LIKELY CAUSE: Initial state setup, portal rendering, or CSS transitions on mount. ACTION REQUIRED: 1) Debug the initial render lifecycle of Combobox. 2) Check for portal mounting issues or position calculations. 3) Review initial state and default values. 4) May need to adjust opacity/visibility instead of display. 5) Ensure smooth render without flash in both modes. 6) Test with various initial states (open/closed, with/without value). EXPECTED OUTCOME: Smooth initial render without any flashing or flickering.

[2025-06-06]

  • TASK: Fix RadioGroup hover state visibility. ISSUE: RadioGroup has the same hover visibility issue as Checkbox - hover effect is barely noticeable. Users can't tell when hovering over radio options. ACTION REQUIRED: 1) Review current radio button hover styles. 2) Increase hover state visibility to match checkbox improvements. 3) Ensure consistency between checkbox and radio hover states. 4) Test with different color schemes and themes. 5) Verify hover state meets accessibility standards. 6) Apply to both individual radios and group container if needed. EXPECTED OUTCOME: Clear, visible hover state on radio buttons consistent with checkboxes.

[2025-06-06]

  • TASK: Fix Progress component layout issues in Storybook. ISSUE: Progress component stories appear visually squashed/compressed (https://i.imgur.com/PL6G0v5.png). The progress bars don't have proper height or spacing. LIKELY CAUSE: Container sizing or story decorators not providing adequate space. ACTION REQUIRED: 1) Review progress.stories.tsx layout and decorators. 2) Ensure proper minimum height for progress bars. 3) Add appropriate spacing between story variants. 4) Check if this affects both React and SDUI views. 5) May need to adjust story container styles or add wrapper elements. EXPECTED OUTCOME: Progress bars should display with proper height and spacing in Storybook.

[2025-06-06]

  • TASK: Fix Dialog component trigger functionality in SDUI mode. CRITICAL ISSUE: Dialog trigger buttons in SDUI mode don't open dialogs at all - clicking does nothing. This is a complete failure of the dialog system in JSON rendering. SEVERITY: Critical - dialogs are essential UI components. ROOT CAUSE: Event handlers for dialog triggers are not properly wired in SDUI mode, or dialog state management is not functioning. ACTION REQUIRED: 1) Debug why click events on dialog triggers don't work in SDUI. 2) Implement proper event handler binding for SDUI dialog triggers. 3) Ensure dialog state (open/closed) is managed correctly in JSON mode. 4) Support all dialog features: close button, backdrop click, ESC key, focus management. 5) Test nested dialogs and various trigger types. EXPECTED OUTCOME: Fully functional dialogs in SDUI mode with all interactions working identically to React mode.

[2025-06-06]

  • TASK: Implement proper icon rendering for Button component in SDUI mode. ISSUE: Both 'With Icon' and 'Icon Only' button stories fail to render icons in SDUI mode, falling back to emoji characters instead. This is a critical issue as buttons are fundamental UI components that frequently use icons. ROOT CAUSE: The SDUI rendering pipeline cannot process icon components within buttons, likely due to missing icon component mapping or improper prop handling. IMPORTANT: Emojis are NOT valid icons - SDUI must render actual icon components (SVGs) just like React mode. ACTION REQUIRED: 1) Analyze button.tsx to understand how icons are integrated (likely as children or icon prop). 2) Update the SDUI renderer to properly handle actual SVG icon components within Button elements. 3) Ensure icon positioning (left/right) is maintained in SDUI mode. 4) Support both icon-with-text and icon-only button variants. 5) Remove ALL emoji fallback code. 6) Test all button variants with icons. EXPECTED OUTCOME: Buttons in SDUI mode should render actual SVG icon components exactly as they appear in React mode.

[2025-06-06]

  • TASK: Fix Breadcrumb component icon support and ellipsis functionality in SDUI mode. SOLUTION: The new SDUI icon system supports icon rendering. Use { type: 'Icon', name: 'icon-name', size: 16 } for breadcrumb icons. ACTION REQUIRED: 1) Update breadcrumb stories to use icon references in SDUI renderSpec. 2) Common breadcrumb icons: 'home' for home, 'chevron-right' for separators, 'folder' for categories. 3) Remove ALL emoji fallbacks and replace with icon references. 4) Fix the ellipsis rendering logic for SDUI - ensure collapsed state works properly. 5) Test all breadcrumb stories with proper icons and ellipsis behavior. EXPECTED OUTCOME: SDUI breadcrumbs should have full SVG icon support and working ellipsis functionality matching React mode.

[2025-06-06]

  • TASK: Fix Checkbox hover state visibility. ISSUE: Checkbox hover effect is barely visible - appears to have a strange or too-subtle hover state that users can't see. This affects usability as users can't tell when they're hovering. ACTION REQUIRED: 1) Review current checkbox hover styles. 2) Increase hover state contrast/visibility. 3) Ensure hover effect is consistent with design system. 4) May need border color change, background tint, or shadow. 5) Test in both light and dark modes. 6) Ensure hover state is accessible (sufficient contrast). EXPECTED OUTCOME: Clear, visible hover state on checkboxes that matches the design system.

[2025-06-06]

  • TASK: Fix Badge component icon rendering and appearance in SDUI mode. SOLUTION: The new SDUI icon system is now available. Use { type: 'Icon', name: 'icon-name', size: 16 } to include icons in badges. Some badge stories have been updated, but more work is needed. ACTION REQUIRED: 1) Update remaining badge stories to use the new icon system in SDUI renderSpec. 2) Replace ANY remaining emoji fallbacks with proper icon references. 3) For status badges, use appropriate icons: 'circle' for status indicators, 'check' for verified, etc. 4) Ensure icon sizing and alignment match React mode by adjusting the size prop. 5) Test all badge variants with icons for visual consistency. EXPECTED OUTCOME: Badges in SDUI should render actual SVG icons identically to React mode with NO emoji fallbacks.

[2025-06-06]

  • TASK: Fix AspectRatio component rendering issues in SDUI mode. ISSUE 1 - Text Color: In 'With Content' story, React mode displays white text (correct) - https://i.imgur.com/siOxsp6.png, but SDUI mode shows black text (incorrect) - https://i.imgur.com/xBEgTpf.png. The text should be white and smaller in SDUI to match React. ISSUE 2 - Video Support: 'With Video' story shows error message 'Video content cannot be rendered in SDUI mode' instead of rendering the video content. ACTION REQUIRED: 1) For text color issue: investigate why SDUI is not applying the correct text color classes, ensure the className or style props are properly passed through JSON. 2) For video support: implement video rendering capability in SDUI mode - if React can render it, SDUI should too. May require adding video element support to the SDUI renderer. 3) Test all AspectRatio stories to ensure consistent rendering. EXPECTED OUTCOME: SDUI mode should match React mode exactly for both text styling and video content rendering.

[2025-06-06]

  • TASK: Fix Alert component icon rendering in SDUI mode. SOLUTION: A comprehensive icon system has been implemented for SDUI. Use the new icon functionality by including icon references as children: { type: 'Icon', name: 'icon-name', size: 16 }. Available icon names include: 'alert-circle', 'alert-triangle', 'check', 'check-circle', 'info', 'terminal', etc. See src/lib/icons/lucide-icons.ts for full list. ACTION REQUIRED: 1) Update remaining Alert stories to use the new icon system in SDUI renderSpec. 2) For example, replace any emoji fallbacks with: { type: 'Icon', name: 'alert-circle', size: 16 }. 3) Ensure all Alert variants (success, warning, error, info) use proper icon references. 4) Test that icons render correctly in both React and SDUI modes. EXPECTED OUTCOME: Alert components in SDUI mode should display actual SVG icons identical to React mode.

[2025-06-06]

  • TASK: Implement comprehensive icon rendering system for SDUI/JSON mode. CRITICAL ISSUE: System-wide problem - many components fall back to emojis instead of rendering proper icons in SDUI mode. This affects Alert, Badge, Breadcrumb, Button, Command, DataTable, NavigationMenu, Resizable, Tabs, Input, ToggleGroup, and potentially others. ROOT CAUSE: The SDUI rendering system cannot process icon components from the JSON specification. IMPACT: Major usability and professional appearance issues across the entire component library. IMPORTANT CLARIFICATION: Emojis (🚀, ⚠️, ✓, etc.) are NOT valid icons. SDUI components MUST be able to render actual SVG icon components just like React mode does. Icons should be proper vector graphics, not emoji characters. ACTION REQUIRED: 1) Design icon component architecture for SDUI (icon library mapping, icon registry, or inline SVG support). 2) Implement icon renderer that can handle common icon libraries (Lucide, Heroicons, etc.). 3) Create icon mapping system to translate icon names/components to renderable SVG elements. 4) Update all affected components to use the new icon system. 5) Remove ALL emoji fallback code throughout the codebase - emojis are NOT acceptable substitutes for icons. 6) Support icon props: size, color, strokeWidth, className. 7) Document the icon system for SDUI usage. 8) Add comprehensive tests for icon rendering. EXPECTED OUTCOME: Full SVG icon support in SDUI mode matching React exactly, with NO emoji fallbacks anywhere in the system. All icons must be proper vector graphics.

[2025-06-06]

  • TASK: Replace Skeleton component animation with Tailwind pulse. ISSUE: Skeleton elements expand/contract on render making them look broken. Current Framer Motion implementation causes unwanted size changes. SOLUTION: Replace with Tailwind's simple pulse animation utility. ACTION REQUIRED: 1) Remove Framer Motion animation from Skeleton component. 2) Apply Tailwind's 'animate-pulse' class instead. 3) Ensure consistent sizing without expansion effects. 4) Test performance with multiple skeletons. 5) Verify animation works in both React and SDUI modes. REFERENCE: Tailwind pulse animation example - https://i.imgur.com/4CVhL4H.png. EXPECTED OUTCOME: Smooth pulse animation without size changes using Tailwind utilities.

[2025-06-06]

  • TASK: Update all placeholder images across the entire codebase. ISSUE: Currently using picsum.photos and unsplash.com for placeholder images which may have availability/performance issues. SCOPE: Search ALL story files (*.stories.tsx) throughout the codebase. ACTION REQUIRED: 1) Find all instances of picsum.photos URLs and unsplash.com URLs in story files. 2) Replace each URL with placehold.co format: https://placehold.co/{width}x{height}/EEE/31343C. 3) Preserve the original dimensions from each image URL when replacing. EXAMPLE: Replace 'https://picsum.photos/200/300' with 'https://placehold.co/200x300/EEE/31343C'. EXPECTED OUTCOME: All story files use consistent, reliable placeholder images from placehold.co.

[2025-06-06]

  • Implement dual-mode Storybook rendering for all UI components, allowing stories to display both native React components and SDUI (JSON-rendered) views with automatic testing of both modes. This ensures complete parity between direct React usage and the SDUI render() function. Each component's stories should be enhanced with the dual-mode decorator and comprehensive play functions that test both rendering modes. (63 subtasks completed)
    • Implement dual-mode story functionality for Box component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/box/box.stories.tsx
    • Implement dual-mode story functionality for Separator component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/separator/separator.stories.tsx
    • Implement dual-mode story functionality for Spacer component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/spacer/spacer.stories.tsx
    • Implement dual-mode story functionality for Skeleton component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/skeleton/skeleton.stories.tsx
    • Implement dual-mode story functionality for Loading component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/loading/loading.stories.tsx
    • Implement dual-mode story functionality for Container component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/container/container.stories.tsx
    • Implement dual-mode story functionality for Flex component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/flex/flex.stories.tsx
    • Implement dual-mode story functionality for Grid component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/grid/grid.stories.tsx
    • Implement dual-mode story functionality for Stack component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/stack/stack.stories.tsx
    • Implement dual-mode story functionality for Center component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/center/center.stories.tsx
    • Implement dual-mode story functionality for Group component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/group/group.stories.tsx
    • Implement dual-mode story functionality for SimpleGrid component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/simple-grid/simple-grid.stories.tsx
    • Implement dual-mode story functionality for AspectRatio component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/aspect-ratio/aspect-ratio.stories.tsx
    • Implement dual-mode story functionality for Heading component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/heading/heading.stories.tsx
    • Implement dual-mode story functionality for BlockQuote component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/blockquote/blockquote.stories.tsx
    • Implement dual-mode story functionality for Label component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/label/label.stories.tsx
    • Implement dual-mode story functionality for Badge component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/badge/badge.stories.tsx
    • Implement dual-mode story functionality for Button component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/button/button.stories.tsx
    • Implement dual-mode story functionality for Image component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/image/image.stories.tsx
    • Implement dual-mode story functionality for Avatar component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/avatar/avatar.stories.tsx
    • Implement dual-mode story functionality for Input component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/input/input.stories.tsx
    • Implement dual-mode story functionality for Textarea component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/textarea/textarea.stories.tsx
    • Implement dual-mode story functionality for Checkbox component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/checkbox/checkbox.stories.tsx
    • Implement dual-mode story functionality for Switch component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/switch/switch.stories.tsx
    • Implement dual-mode story functionality for Toggle component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/toggle/toggle.stories.tsx
    • Implement dual-mode story functionality for Slider component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/slider/slider.stories.tsx
    • Implement dual-mode story functionality for Progress component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/progress/progress.stories.tsx
    • Implement dual-mode story functionality for ScrollArea component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/scroll-area/scroll-area.stories.tsx
    • Implement dual-mode story functionality for Card component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/card/card.stories.tsx
    • Implement dual-mode story functionality for Alert component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/alert/alert.stories.tsx
    • Implement dual-mode story functionality for Toast component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/toast/toast.stories.tsx
    • Implement dual-mode story functionality for Tooltip component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/tooltip/tooltip.stories.tsx
    • Implement dual-mode story functionality for Collapsible component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/collapsible/collapsible.stories.tsx
    • Implement dual-mode story functionality for Accordion component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/accordion/accordion.stories.tsx
    • Implement dual-mode story functionality for Tabs component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/tabs/tabs.stories.tsx
    • Implement dual-mode story functionality for ToggleGroup component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/toggle-group/toggle-group.stories.tsx
    • Implement dual-mode story functionality for RadioGroup component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/radio-group/radio-group.stories.tsx
    • Implement dual-mode story functionality for Select component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/select/select.stories.tsx
    • Implement dual-mode story functionality for NavigationMenu component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/navigation-menu/navigation-menu.stories.tsx
    • Implement dual-mode story functionality for Breadcrumb component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/breadcrumb/breadcrumb.stories.tsx
    • Implement dual-mode story functionality for Pagination component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/pagination/pagination.stories.tsx
    • Implement dual-mode story functionality for Popover component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/popover/popover.stories.tsx
    • Implement dual-mode story functionality for HoverCard component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/hover-card/hover-card.stories.tsx
    • Implement dual-mode story functionality for Dialog component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/dialog/dialog.stories.tsx
    • Implement dual-mode story functionality for AlertDialog component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/alert-dialog/alert-dialog.stories.tsx
    • Implement dual-mode story functionality for Drawer component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/drawer/drawer.stories.tsx
    • Implement dual-mode story functionality for Sheet component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/sheet/sheet.stories.tsx
    • Implement dual-mode story functionality for Command component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/command/command.stories.tsx
    • Implement dual-mode story functionality for Combobox component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/combobox/combobox.stories.tsx
    • Implement dual-mode story functionality for DatePicker component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/date-picker/date-picker.stories.tsx
    • Implement dual-mode story functionality for Calendar component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/calendar/calendar.stories.tsx
    • Implement dual-mode story functionality for InputOTP component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/input-otp/input-otp.stories.tsx
    • Implement dual-mode story functionality for Form component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/form/form.stories.tsx
    • Implement dual-mode story functionality for Table component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/table/table.stories.tsx
    • Implement dual-mode story functionality for DataTable component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/data-table/data-table.stories.tsx
    • Implement dual-mode story functionality for Resizable component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/resizable/resizable.stories.tsx
    • Implement dual-mode story functionality for Masonry component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/masonry/masonry.stories.tsx
    • Implement dual-mode story functionality for Chart component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/chart/chart.stories.tsx
    • Implement dual-mode story functionality for Hero component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/hero/hero.stories.tsx
    • Implement dual-mode story functionality for Testimonial component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/testimonial/testimonial.stories.tsx
    • Implement dual-mode story functionality for Markdown component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/markdown/markdown.stories.tsx
    • Implement dual-mode story functionality for SkeletonLoader component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/skeleton-loader/skeleton-loader.stories.tsx
    • Implement dual-mode story functionality for HeadManager component. Read TESTING-STORYBOOK-DUALMODE-SETUP.md before starting. Use src/components/ui/text/text.stories.tsx as an example of a completed dual-mode implementation. Enhance all stories with enhanceStoryForDualMode wrapper. Add play() functions to ALL stories that don't have them - these should test that the component renders correctly in both React and SDUI modes. For stories with custom render functions, provide equivalent renderSpec JSON. Ensure all tests pass by running: npx vitest run src/components/ui/head-manager/head-manager.stories.tsx

[2025-06-05]

  • Theres quite a few components that need a bit of polish, either just the component itself or storybook. You can take multiple of these subtasks simultaneously to help speed up development. For all subtasks, where appropriate, make sure stories are updated, and relevant pages in the showcase examples app (./examples). Feel free to pick multiple sub tasks at the same time to speed up development. (48 subtasks completed)
    • The ToggleGroup component default story goes black bg when hover - this looks awful, it should be a lot more subtle (very light grey for example). Textarea, input fields etc. have the WORST grey background on hover - they either shouldn't have any hover background, or should be VERY subtle (i.e. if main bg is white, should hover to bg-gray-50 or something (or whatever that equivalent is). This impacts Textarea, Input, Select. Like honestly, its the worst thing I've ever seen.
    • The Accordion component items go dark grey bg when hover - this looks awful, it should be a lot more subtle (very light grey for example). Also, text kind of jumps - i guessing there is no padding, and then when you hover there is padding, causing text to jump. Honestly, you are so far from the mark on this component. Redo all of the UI to make it way sexier, way more 🔥 (while still being really clean). Use framer motion/animations/transition etc. to make it all really, really nice.
    • Can you animate the transition of the Switch component. Make it optional as a prop (default to animate, but have a prop to disable animation). Update the storybook page.
    • When I click the Select box and the dropdown comes down, the main Select box 'flickers'. It goes invisible, visible, moves, etc. Please take a look and make sure it doesnt flicker or whatever and is very clean and functional. This also affects the ComboBox component.
    • The RadioGroup options should have cursor-pointer on hover. ALso, when I hover over a RadioGroup option, the 'circle' element disappears for some reason. Both of these issues also impact the CheckBox component.
    • The Masonry component has a 'Pinterest Gallery' story/variant. When you hover over, the image kind of zooms, text appears, etc. It just 'appears' and looks weird - this should all transition in smoothly with framer motion.
    • Why, in the Grid component storybooks, are most of the boxes fading in and out? Remove this
    • The Form component storybook has a With Initial Errors story. I dont actually see any errors in this variant/state. Can you investigate and confirm whether its a storybook issue or component issue. If component issue, fix it.
    • The following component stories contain images that 404. Can you update with images from Picsum (if photo) or placehold.co (if not photo). You can see examples from other component storybooks: Box ('Box With Backdrop Blur')
    • When I first load the Tooltip stories, all of the buttons (Hover me) 'flicker' - theyre visible, then go invisible and back to visible. Please fix. Also - when I hover, I dont see the tooltip. This component seems REALLY buggy, please investigate and fix.
    • When I first load the DropdownMenu stories, all of the buttons (Open Menu) 'flicker' - theyre visible, then go invisible and back to visible. Please fix.
    • When I first load the Drawer stories, all of the buttons (Open Drawer) 'flicker' - theyre visible, then go invisible and back to visible. Please fix.
    • When I first load the Dialog stories, all of the buttons (Open Dialog) 'flicker' - theyre visible, then go invisible and back to visible. Please fix.
    • When I first load the AlertDialog stories, all of the buttons (Show Dialog) 'flicker' - theyre visible, then go invisible and back to visible. Please fix.
    • When I first load the Dialog stories, all of the buttons (Pick a date) 'flicker' - theyre visible, then go invisible and back to visible. Please fix.
    • When I first load the Collapsible stories, all of the buttons (Toggle Content) 'flicker' - theyre visible, then go invisible and back to visible. Please fix. Theres also a weird flicker effect when content appears and disappears
    • Im not sure whaats going on with the Toast component, but when I click the buttons on storybook, the toasts show up, but they either have no bg, or z-index is messed up or something, as the button is over it or visible or something. Please invvestigate and fix.
    • Can you update the tabs component to 'animate' between tab transitions (both the tabs and the content). Add a prop to disable this, but enable by default (make sure to update storybook). Can you also update the UI of tabs component to make it look a lot more modern and nicer visually? (while still being really clean, simple and sexy)
    • The UI of the table component absolutely blows. Can you completely update the UI of the Table component to make it look way nicer, sexier (while still being really clean and modern). Feel free to add multiple style variants. Make sure to update storybook with all variants and the showcase page in the example app (./examples).
    • The following component storybooks dont have a 'Docs' story (all of them should): SkeletonLoader, Loading
    • We define basic components like buttons as Components and more advanced components (like TeamGrid) as Blocks. Currently, Sidebar is in the components dir and classified as a component. Can you move this code to the blocks dir, update the storybook to be in the Blocks category, and move it from the Components showcase (in example app ./examples) to the blocks components showcase in the example app?
    • When I first load the Sheet stories, all of the buttons (Open Sheet) 'flicker' - theyre visible, then go invisible and back to visible. Please fix. Also - the sheet should animate/transition out (framer motion?) rather than just 'appear'. It looks awful. Also - the Sheet title/subtitle? is padded (good), but the sheet content isnt (bad). Please fix.
    • I can't see some of the Progress stories - not sure why. Please investigate and fix: Default, Empty, Quarter, Half, Three Quarters, Complete. I can see all of the rest
    • When I click the buttons on the Popover storybook page, the button flickers into and out of existence (and kind of moves). Not sure why - fix.
    • Increase the height of all of the NavigationMenu storybook containers (manually set them to 600px or something). I cant see the dropdown menues. Also, when you hover over a menu item in the NavigationMenu, I DONT want it to be underlined. Also - when an item has a dropdown, there is again that really fucking annoying flicker where it goes visible and then not visible, and the fucking text is WHITE ON A GREY BACKGROUND - CANT READ IT. This component needs to be restyled to be a lot sexier, cleaner, more modern and brandable.
    • I don't know what this MenuBar component is, but it sucks. Remove it, stories, remove it from the examples app, component map, docs, etc. Get rid of it.
    • The Markdown component looks REALLY nice. FOr some reason though, there is a 'grey' border or somerthing around the code example? The code examples look sick, not sure why there is that gray border around them.
    • I don't know whats going on, but when I hover over the KeyboardNavigationMenu component the background color goes black for some ridiculous reason.
    • In the Gallery story of the Image component, when I hover over the image there is some sort of zoom effect. It should animate/transition in with something like framer rather than be instant.
    • The Card component has a 'With Zoom Image' story/variant. The zoom should animate/transition in with something like framer, and be a bit slower
    • The Hero component block default stories have this really weird effect on the main title where it kind fades from right to left or something - get rid of it. It looks awful. Otherwise, looks good.
    • Can you redo all of the ui/styles for the StatBlock component? Its way too basic - just text on plain background. Make it more visual, modern, beautiful (but still simple and clean). Maybe add more variants. Update storybook and showcase examples app.
    • The RestaurantMenuBlock component - the default story has categories/filters or something - this isn't centered horizontally (it should) - the container should be 100% width of the parent, and all of the buttons/filters centered horizontally. At the moment it doesn't align with the title/subtitle/search. Also - quite a few images on this page 404. Can you use photos from picsum (see examples in other storybooks).
    • The ProductShowcase component has a lot of really strange flickering going on. Can you investigate and fix. Quite a few images on this page 404 (storybooks) - can you make sure theyre using images from picsum.
    • The line on the ProcessSteps component block don't go all the way (both horizontally and vertically). Please fix - also the UI looks quite.. bleh. Old, dates. Please make it a lot sexier (still clean and simple though).
    • Can you make sure when I hover over a card on the PortfolioCaseStudies component, the image that 'zooms' transitions/animates in with something like framer motion? Can you also slow it down so its quite noticable. Can you make sure the button on this component (View Case Study) has cursor pointer, as do buttons for pagination (on hover etc.). If this is an issue on the Button component - update it there
    • Can you make sure when I hover over an image in the PhotoGallery component, the image that 'zooms' transitions/animates in with something like framer motion? Can you also slow it down so its quite noticable. Also - not sure whats going on, but half the tag isnt visible (its overflowing outside of the container)
    • When you flip the photo flip card, it flips and there is a white background/shadow while its flipping. This kind of ruins the flip effect. Please somehow fix, or use transparent background/no shadow on the container. Some of the images on the storybooks page for this component 404 - please use Picsum (see other component stories for examples).
    • Love this component/block. Can you add another option to configure an 'overlay'? Use case: 'Fullscreen With Background Image' - I would like an overlay (either black or white, default black) where I can control the opacity (default it) to make the text more legible over the image. Make this configurable, update stories and showcase examples page (./examples)
    • I can't see any maps in some of the stories for the Map component (Default, Flat Style, Street Style, Satellite Style, Minimal, With Custom Styling, Single Location Minimal, Event Venue). Theres more actually - please investigate and fix. Also, when scrolling using my mousewheel, and I scroll over a map, it stops and starts zooming in/out the map. I think you can disable this behaviour with leaflet - please do. Also - is it possible to remove the Leaflet/carto copyright? If so, can you do it.
    • Can you make sure when I hover over an image in the Latest News component, the image that 'zooms' transitions/animates in with something like framer motion? Can you also slow it down so its quite noticable.
    • Some images in Header block component stories 404 - can you use placehold.co (see other storybooks for examples). ALso - menu is awful. Hovering over a menu item with dropdown flickers it, its white text on a light gray background, the text is underlined (it shuoldnt be). The buttons on the right should also have cursor-pointer. If these are issues in reusable components, please ensure theyre fixed in the reusable components
    • Can you make sure any element in the FAQ component that is clickable has cursor-pointer (next prev buttons, + symbol etc.). On the carousel variant, there is a really weird pink/red dot or something bottom left (is it meant to be a tag or something, because barely any of it is visible - it overflows outside of the container with hidden overflow)
    • A lot of the images in the EventListings storybook 404 - update all to use picsum
    • Can you make the ErrorPage component look way sexier, and make different variations for different styles of websites (blog, ecommerce platform, magazine, restaurant, etc.)
    • I can't see any images in some of the Carousel component stories. Not sure what the issue is, please investigate. Also please update all iamges to use picsum (see examples elsewhere)
    • Make sure the buttons are centered horizontally in the CallToAction component (the cta buttons Start Free Trial watch demo). The container needs to be 100% width and buttons centered within it.
    • Update the BlogPostDetail component to render markdown (and use our Markdown component we have already built internally). Update storybook and showcase example app (./examples)

[2025-06-04]

  • Theres quite a few components that need a bit of polish, either just the component itself or storybook. You can take multiple of these subtasks simultaneously to help speed up development. For all subtasks, where appropriate, make sure stories are updated, and relevant pages in the showcase examples app (./examples). Feel free to pick multiple sub tasks at the same time to speed up development. (29 subtasks completed)
    • The Accordion component looks quite awful. When you hover it goes a dark gray? Is this our theme or default styles. It should look a lot nicer, cleaner, modern. When you hover over one, the text also jumps to the right as though there is a padding change, and has underlined text on hover (shouldnt). When you expand/minimize it jumps around a lot and looks awful, should be a lot smoother using framer. Overall, this component should be a lot nicer, cleaner, modern, beautiful.
    • When I click Show Dialog button on the default story of the AlertDialog component, the button 'flashes' to visible, not visible etc. (button that was used to open it). Looks weird..
    • Can you update the styles/ui of the Alert component to look a lot nicer, cleaner, more modern. It looks a bit dated.
    • The BlockQuote component has a couple of variants where the text is barely legible (its the 3rd and 4th in the variants story). Can you make sure in all variants the text is clearly legible relative to the bg color.
    • For some reason, the Button component are all grouped in a Button directory in storybook. It should be flat like all other components - remove Tests stories.
    • For some reason, when I hover over a Card component in storybook, the title disappears. Its like it transitions to white or something when the bg is white. This shouldn't happen, as you can't read the text. Can you also add a prop for an image in the header (and if an image is passed through, there should be no padding at top of the card). Add some additional props/variants for header image styling, i.e. zoom effects when hovering, image by itself, image with the header text etc. over it (versus underneath) etc. Add more stories.
    • I can't see any of the Charts on the Chart component storybooks. I'm not sure if its an issue with the component, storybook issue (container height?) but not visible.
    • The Command component has a storybook file, but I cant use any of it. When I go there on web, its already up with an overlay, and I Cant dismiss, interact with it, etc. Storybook needs to be setup in schh a way that I can see all of the stories/variants and interface with all of them individually.
    • I can't see any examples of the AnnouncementBar components in storybook - I'm not sure why. Is it a styling conflict? Is there styling on the announcement bar that means its not visible in the box for whatever reason? You can see it here: https://i.imgur.com/GOdVgki.png
    • The BlogPostDetail component looks nice, but the markdown is styled terribly (see: https://i.imgur.com/2f6jU81.png). Are we using the Markdown component we have? Also - above the title in this component there are some tags. Can you make sure these tags are centered horizontally? They're currently left aligned.
    • A lot of cards have images first (BlogPostGrid, BlogPostDetail at the bottom, there's tonnes of them). When there is an image, there is a weird padding at the top. If a card has an image first, there should be no padding at the top of the card. Fix the ones I listed, but also search throughout the codebase for all examples of cards with images and make sure there is no padding at the top of the card in these situations. Its the same for loading states with cards (i.e. BlogPostGrid loading state hover)
    • Quite a lot of images in the example app (./examples) and storybook files use placeholders, however many of them 404. Can you ensure for all images where you want a photo we use picsum.photos (url format is: https://picsum.photos/200/300 where 200 is width and 300 is height), and when you don't want a photo use https://placehold.co/600x600/EEE/31343C (600x600 - first is width second is height). Can you also add a note to docs/directory-structure.md to use these images for placeholders.
    • When you over over images on the BlogPostGrid component it 'zooms'. This is a nice effect, but its instant. It should transition/animate smoothly when zooming. Also, when I hover over the BlogPostGrid cards, the title disappears (I assume there is some sort of hover change to title text, maybe it goes to white? Im not sure why it would go to white when the bg is white. I tend to get this hover issue on quite a few cards, so investigate whether its an issue with the Card component itself and, if so, fix it there so it fixes it everywhere.
    • The BrandLogoBar component looks awful. Can you use placeholder images from picsum.photos. When you mouse over, it jumps, etc. looks really awful. This is meant to be the component that is often put under a page hero section, where there is generally either a static list of logos, or scrolling list, common variations inlude grayscale, zoom on hover, sometimes there is a title either above, to left (e.g. Trusted by Top Companies). e.g. https://i.imgur.com/B8kS8Rd.png - can you make sure this component works as expected.
    • The CallToAction component has buttons towards the bottom (i.e. Start Free Trial ->, Watch Demo). These should be centered horizontally in the default state, however they're left aligned for some reason. Looking at the Storybook variants, they should be centered on Default, Centered, With Background Image (already are), Gradient Animated, Bold, With Background Video, With Background Pattern, Custom Gradient, With Custom Shapes, Glass Morphism. It feels like default state should be to center it. On the Newsletter Custom Form variant/story, the input text is gray - barely legible over the blue bg from the parent container
    • The ErrorPage component for the most part looks good. However, it doesnt appear to be centered. It should be 100% of the container width, and everything centered horizontally on the screen.
    • The EventListings component block is pretty good. However, up the top it looks like there is some sort of filter (i.e. I see 'All CategoriesConferenceWorkshopWebinarMeetupNetworking' on the default story). These are just plain text - theyre not functional. If its a filter, implement a filter. Also, the 'Featured Event' variant/story is incredibly too in-your-face. Its all blue. It should be cleaner and more subtle, while still prominent. Make sure all images on this page use picsum.photos (though this may have been implemented by a prior task)
    • The FAQ component is awful. Styles are awful, greys everywhere etc. looks awful. I just want a simple carousel style FAQ component, with a bunch of different variants. Carousel states should smoothly transition and animate etc. Make it simple, clean and sexy.
    • Does the FeatureCard component have icons? For many of the stories I dont see icons (i.e. the Icon Positions story). For the Tabbed Categories variation, the filter styles should be a bit cleaner and nicer looking, and when you go between categories it should animate using framer. In the Icon Focused story/variation, everything is centered except the icon. The icon should be centered in the card
    • In the default FooterBlock (may have been renamed to Footer) block component, when I hover over the social icons, they transition to white (disappear since bg is white). This is a bug. In the 'Standard' variation/story, I assume its dark deliberately (even on light mode). This is fine, but the text 'Building modern React interfaces with JSON specifications' is black and barely legible over the dark background. Same as the 'Get the latest updates on new features and releases' text under the Stay Updated section and the copyright text. Can you confirm the text is legible on all stories and variations.
    • The Header block component has a few bugs: When you hover over a link in the menu (i.e. Docs in the default story), the text should not be underlined. When you hover over a menu item with children items, the text goes white and is barely legible over the light gray background. It also 'jumps' when the dropdown shows. I also can't see the dropdown in the storybook stories as the container is small (height wise). Can you either update the dropdown component to ensure it displays, or inrease the height of the containers in storybook. Can you also confirm the style of the dropdown is fine - even though I can't see it, it looks like there might be some issues i.e. width. Make sure the company logo uses a placeholder image (this may have been fixed in a prior task) in variations with a logo. The FullWidth and CustomGradient stories/variations have links that I can't read - they have a white bg or something which is weird when over the background color and white text. Can you also add a variation (and option/props) with icons or something in the dropdown menu - there should be multiple variations of the dropdown menu, from single vertical list one column stacked, to multi columns, icons, title/icon/desription etc. Needs to be really clean, fresh and modern.
    • In the latest news component there is a With Category Tabs variation/story. Here, the the filter/category styles should be a bit cleaner and nicer looking, and when you go between categories it should animate using framer. When you hover over images in cards, they should zoom with an animation/transition. This may have been implemented prior to this task, but please confirm and, if not, implement.
    • The LocationHours component looks awful - its just a wall of text. I still want clean, simple, sexy UI, but make it look more beautiful - more visual
    • Can you rename the existing Map component to GoogleMap, and then create a new Map component using Leaflet. Make sure you include all of the variations/examples (stories, showcase page in example (./examples) app etc.), and make it look really clean and nice (I like flat style maps, so not the default leaflet). Update other components/blocks that use Map (renaming to GoogleMap) to now use the new Map (leaflet) component
    • Can you ensure the PageHeroHeader component is 100% of the container width and everything is centered horizontally (in the default story). In the 'Fullscreen With Background Image' story, the container height/image is way too big - can you reduce the height. The 'Colorful Background' story looks awful - text is barely legible over background, text and images etc. feel like they should be centered. In all of these examples, unless a variation explicitly should have left aligned text (i.e. two col), all text, headers, buttons etc. should be centered horizontally.
    • Can you update the PageSection component stories to use more examples that are commonly used on websites/marketing websites. Some features: alternating sections (i.e. alternating background color to make them stand out), left/right, more visual variations (i.e. common pattern is image on left/right (alternating), title (h2 default), text underneath, ctas, etc.). Make sure it all looks really nice, storybooks with stories, and update variations/props accordingly (and showcase page).
    • The PhotoFlipCard is a bit strange. It flips to an empty background with a button. It feels like this isnt common pattern. By default, can we 'flip' and have the same image (w/overlay) on the other side as well? I dont know - whatever most modern sites use, we should do that, but flipping to just a white background with button looks awful. Update all images on this page to use placeholder images from picsum.photos (this may have been done in a prior task).
    • When you hover over an image in the PhotoGallery component, it should animate/transition in as it zooms, not happen instantly (this may have been implemented in a prior task, but if it hasnt, implement it). Also - these image cards look a bit poo. There is some weird gray element at the bottom? And half of the tag isn't visible - it goes beyond the container height and is cut off. Also, I'm not sure if there is an issue with the Carousel variation/story implementation, or its just storybook, but I cant see left/right etc. and can't navigate the carousel in storybook. The 'With Actions' variations have a few buttons - these should have cursor pointer.
    • The header in the RestaurantMenuBlock doesn't seem to be 100% width + centered - it looks weird. The Search Menu Items input also should be centered horizontally.

[2025-06-04]

  • We have a large list of components and blocks (advanced components) and theyre all accessible in storybook. However, we need to polish off a few of these components and the storybook configuration. For all subtasks, where appropriate, make sure stories are updated, and relevant pages in the showcase examples app (./examples). Feel free to pick multiple sub tasks at the same time to speed up development. (2 subtasks completed)
    • Two carousel components for some reason - the one in blocks looks more recent - remove the other implementation, make sure you remove it from the component map and showcase example app as well (./examples). The following components under Components/* in storybook are more advanced components (I'd class them as blocks) - move to be under Blocks in storybook, make sure theyre in the blocks directory, not ui directory, make sure in the showcase example app (./examples) theyre on the Blocks showcase page and not the general Components showcase page: Components/Footer (is this a dupliacte of the FooterBlock? If so, I think FooterBlock is more recent, so remove the old Footer component, rename FooterBlock to footer),
    • Is it possible to update the icon component storybook (and potentially showcase page in the showcase/example app) to iterate over and display ALL of the icons, and maybe even tooltip with the icon id/name to use to help embed (and potentially even a search). Storybook says there is an IconGallery block (https://storybook.js.org/docs/api/doc-blocks/doc-block-icongallery) with a section to automate icon documentation

[2025-06-04]

  • We have a large list of components and blocks (advanced components) and theyre all accessible in storybook. However, we need to polish off a few of these components and the storybook configuration. (2 subtasks completed)
    • I want to re-categorize many of the components in storybook. What is currently under 'Blocks' is good (i.e. AnnouncementBar). There are some under Component/Blocks/* that need to be moved to the Blocks category (Carousel, FAQ, Timeline). There are a lot of subcategories under Components - I dont want this Components top level category. I want to move everything under Components/UI/* (i.e. Accordion, Badge) to top level under Components (i.e. Components/Accordion). Everything under Components/Overlay/* (i.e. AlertDialog) should just be under Components, same for Components/Feedback/* (Alert to Components, no Feedback category), Components/Media/* (i.e. AspectRatio), Components/Typography/* (i.e. BlockQuote), Components/Layout/* (i.e. Box) (layout components can go to a new Layout Components category, i.e. 'Layout Components/Box), Components/Navigation/* to Components/, Components/DataDisplay/ to Components/, Components/Form/ to Form Components/, Components/Marketing/ should be moved to Blocks/* (these are advanced components i.e. Blocks), UI/* (i.e. Loading) can just go to Components/. Move DataFetcher story from Core/ to Utility/* (similar to HeadManager). Same as Library/Data/* (optimistic updates) to Utility/*. Basically I want to flatten everything.
    • A lot of storybook components have a Docs story where I can see them all - this is really good (i.e. look at AnnouncementBar, BlogPostDetail etc.). However, some don't (this is bad) (i.e. Look at ContactForm, ErrorPage). I want you to look at all stories and identify those that don't have a Docs page, and systematically go through and create one.

[2025-06-04]

  • We have a great foundation of core library components (i.e. button etc.) however I want to introduce new, more advanced components (we call 'blocks'). These more advanced components should allow users to create fully functioning websites. All 'advanced' components should be in ./src/components/blocks, should be added to the component map, should have storybook files, should be added to the example site (create an 'Component Blocks' link under the 'Components' link in the header, and make sure each 'advanced' component/block has its own dedicated page, as well as being added to a new /showcase/blocks page). (39 subtasks completed)
    • Create a new /showcase/blocks page in the example app (./examples). Add 'Component Blocks' link to the navigation menu under the existing 'Components' dropdown. The blocks showcase page should display all the advanced block components in an organized grid or list format with links to individual block demo pages. Include a hero section explaining what blocks are (pre-built, advanced components for quickly building websites). Style it consistently with the existing showcase pages.
    • Create a 'header' block - this is meant to be the header (with logo, navigation, light/dark mode toggle, fixed/floating) etc. that is at the top of all pages. There should be quite a few different variants and options (i.e. logo might be an image, text, etc. they might not want light/dark mode toggle, might not want it floating/sticky, might want buttons on right to login, signup etc. etc.) - it should be really flexible, while still looking really nice, clean and modern. Internally it should use existing components (i.e. menu, nav, button etc.). Should be mobile responsive
    • Create a new 'page-hero-header' component. This is the component that should be the 'main' hero on a page (i.e. think marketing website). It should have many different props and variants to be really flexible and to suit many different types of websites (i.e. title, description, options for ctas, options for fullscreen image, option for right aligned image only, etc. etc.). Just image its a flexible component for most different types of websites. It should look really sexy, real clean, simple, modern.
    • Move the existing footer component to the new blocks directory (src/components/blocks/footer). Remove it from the showcase page in the example app and add it to the new blocks showcase page. Enhance it with: multiple column layouts (2-6 columns), social icon integration (install react-icons library), newsletter signup section, company info section, legal links row, and multiple variants (minimal, standard, expanded). Make it fully responsive with mobile-first design. Create comprehensive Storybook stories showing all variants.
    • Move the existing FeatureCard component to blocks directory. Create multiple variants: icon-top, icon-left, icon-background, card-hover-effects, with/without CTA buttons. Add support for: custom icons (via react-icons), gradient backgrounds, border variants, shadow options, and animation on scroll. Create grid layout options (2x2, 3x1, 3x2) in Storybook. Add to blocks showcase with interactive examples.
    • Move existing PricingTable to blocks directory. Enhance with: monthly/yearly toggle, feature comparison matrix, recommended tier highlighting, custom badge support, tiered pricing (starter/pro/enterprise), and currency formatting. Create variants: cards layout, comparison table, minimal cards, with testimonials. Add hover states, smooth transitions, and mobile-optimized views. Include 'Contact Sales' option for enterprise.
    • Move CallToAction component to blocks. Create variants: centered, split-screen, with background image, gradient backgrounds, with form integration, minimal, and bold. Support: multiple button styles, optional subtitle, background patterns/shapes, icon support, and statistics/trust indicators. Make fully responsive with different mobile layouts. Add entrance animations and hover effects.
    • Create new Timeline block component. Variants: vertical centered, vertical alternating, horizontal (desktop only), minimal dots, with images. Features: date/time stamps, icons for each event, connecting lines (solid/dashed), milestone markers, and content cards. Support both past/future events with different styling. Add scroll-triggered animations. Create both company history and roadmap examples.
    • Move Testimonial component to blocks. Create variants: single card, carousel, grid (2x2, 3x1), with video, minimal quote, and with ratings. Features: customer photos, company logos, job titles, star ratings, quote marks styling, and source links. Add navigation for carousel variant and auto-play option. Support long-form and short testimonials. Include social proof elements.
    • Move Carousel to blocks directory. Enhance with variants: image gallery, content cards, testimonials, product showcase, and fullscreen. Features: dots/arrows navigation, thumbnails strip, auto-play with pause on hover, swipe support, infinite loop, and variable items per view. Add Ken Burns effect for images, lazy loading, and zoom on click. Create mobile-optimized touch interactions.
    • Create new FAQ block component. Variants: accordion style, grid cards, two-column, with categories, and with search. Features: expand/collapse animations, category filtering, search functionality, anchor links, and most helpful voting. Support rich content in answers (lists, links, code). Add 'Contact Support' CTA and related articles. Create smooth height transitions and mobile-optimized layouts.
    • Create Team Grid block. Variants: grid cards, list view, minimal circles, with hover bio, and department groups. Features: profile photos with fallback, name/role/bio, social links (LinkedIn, Twitter), department tags, and direct contact options. Add filter by department, search by name, and optional org chart view. Include hover effects and modal bio option.
    • Create Blog Post Grid block. Variants: cards with image, minimal list, magazine style, with sidebar, and masonry. Features: featured image, category tags, read time, author info, excerpt, and publish date. Add pagination, category filtering, search, and sort options (date, popularity). Support featured/sticky posts, loading states, and infinite scroll option.
    • Create Blog Post Detail block. Variants: centered article, with sidebar, magazine layout, and minimal. Features: hero image, table of contents, share buttons, author bio box, related posts, and comments section placeholder. Add reading progress bar, estimated read time, syntax highlighting for code blocks, and image lightbox. Include prev/next navigation.
    • Create Brand Logo Bar block for trust/social proof. Variants: scrolling marquee, static grid, with heading, grayscale with color on hover, and compact. Features: logo sizing options, spacing controls, optional 'Trusted by' heading, and link support. Add smooth infinite scroll animation, pause on hover, and mobile responsive layouts. Support both light/dark logos with automatic switching.
    • Create Service List block. Variants: cards grid, list with icons, alternating image/text, tabs layout, and accordion. Features: service icon/image, title, description, feature lists, pricing info, and CTA buttons. Add hover effects, optional badges (Popular, New), and comparison mode. Support both product features and service offerings layouts.
    • Create Page Section wrapper block for marketing pages. Variants: full-width, contained, split background, angled/curved edges, and with patterns. Features: background colors/gradients/images, padding options, optional heading, and content alignment. Add parallax scrolling option, intersection observer for animations, and divider shapes. This wraps other blocks to create cohesive page sections.
    • Create Contact Form block. Variants: simple contact, detailed inquiry, with map, split screen, and minimal. Features: form validation, field types (text, email, phone, textarea, select), optional fields, and file upload. Add reCAPTCHA support, success/error states, loading states, and thank you message. Include office info sidebar option with map integration.
    • Create Latest News/Articles block for homepages. Variants: featured + list, cards row, minimal links, with images, and magazine style. Features: article thumbnails, categories, dates, author, and excerpt. Add 'View All' link, optional newsletter signup, and loading skeleton. Support 3-6 articles display with responsive layouts. Include optional category tabs.
    • Create Newsletter Signup block. Variants: inline form, modal popup, slide-in, footer bar, and with incentive. Features: email validation, name field option, GDPR checkbox, success confirmation, and loading states. Add integration points for email services, optional background images/patterns, and exit intent trigger option. Include privacy policy link and benefits list.
    • Create Social Share Bar block for content sharing. Variants: horizontal bar, vertical sidebar, floating buttons, modal overlay, and minimal icons. Features: popular platforms (Twitter, Facebook, LinkedIn, Reddit, email), custom share text, URL sharing, copy link button, and share counts. Add sticky positioning options, slide-in animations, and platform-specific optimizations. Support both page and custom content sharing with Open Graph integration.
    • Create interactive Map block for location display. Variants: embedded with info overlay, fullscreen modal, with contact details sidebar, minimal marker, and multi-location. Features: Google Maps integration, custom markers, business info popup, directions link, zoom controls, and satellite/terrain views. Add responsive iframe fallback, accessibility controls, and location search. Style with modern flat design and custom marker icons.
    • Create enhanced Contact Form block with advanced features. Variants: simple contact, detailed inquiry, with map integration, split screen layout, and wizard steps. Features: multi-region phone formatting, conditional field display, file upload support, CAPTCHA integration, and real-time validation. Add custom field types (dropdown, checkbox, radio), optional fields configuration, and CRM integration points. Include success/error states and thank you redirects.
    • Create comprehensive Icon component using react-icons library. Variants: different sizes, colors, filled/outlined, with backgrounds, and animated states. Features: complete icon library showcase, search functionality, category filtering, copy-to-clipboard, and sizing options. Add hover effects, loading states, and accessibility labels. Create dedicated showcase page displaying all available icons organized by category (arrows, social, business, etc.) with live preview and code examples.
    • Create stunning Photo Gallery block for image showcases. Variants: masonry grid, perfect grid, carousel slider, lightbox modal, and Instagram-style. Features: lazy loading, image optimization, zoom functionality, fullscreen viewing, and category filtering. Add smooth transitions, touch gestures, keyboard navigation, and thumbnail strips. Include watermark support, download options, and social sharing. Design with modern flat aesthetics and elegant hover effects.
    • Create Restaurant Menu block for food service websites. Variants: categorized sections, single column, two-column, grid cards, and prix fixe. Features: menu categories (appetizers, mains, desserts), item images, descriptions, prices, dietary indicators (vegan, gluten-free), and allergen warnings. Add search/filter functionality, daily specials highlighting, and nutritional information. Include elegant typography and appetizing image layouts.
    • Create Photo Flip Card block with elegant hover animations. Variants: vertical flip, horizontal flip, fade transition, slide reveal, and 3D rotation. Features: front image display, back overlay content, smooth CSS animations, touch device support, and custom transition timing. Add text overlay options, gradient backgrounds, call-to-action buttons, and multiple card sizes. Design with modern flat styling and sophisticated hover effects.
    • Create Statistics Counter block for showcasing key metrics. Variants: number counters, progress bars, circular progress, icon stats, and comparison stats. Features: animated counting effects, percentage displays, custom icons, trend indicators, and prefix/suffix support. Add scroll-triggered animations, customizable speeds, and formatting options (K, M, B abbreviations). Include multiple layout options (horizontal, grid, cards) with clean, modern design.
    • Create Typewriter Text block for dynamic text animations. Variants: typing effect, deleting and retyping, cursor blinking, multiple phrases rotation, and speed variations. Features: customizable typing speed, pause delays, cursor styling, infinite loop option, and text color transitions. Add multiple text strings cycling, character-by-character reveal, and responsive text sizing. Include modern fonts and smooth animations with accessibility considerations for reduced motion preferences.
    • Create Process Steps block for 'How it works' visual workflows. Variants: horizontal timeline, vertical steps, circular process, numbered cards, and branching paths. Features: step icons, connecting lines/arrows, progress indicators, interactive hover states, and optional animations. Add customizable numbering, icon library integration, responsive layouts, and step completion states. Include modern flat design with clean typography and smooth transitions.
    • Create Product Showcase block for e-commerce displays. Variants: grid cards, list view, featured product, comparison table, and category showcase. Features: product images, pricing, variants (size/color), quick add to cart, wishlist, and rating display. Add hover effects, sale badges, stock indicators, and filtering options. Include modern product card design with clean layouts and smooth interactions.
    • Create Job Listings block for career pages. Variants: card grid, list view, featured positions, department groups, and minimal listings. Features: job title, department, location, salary range, employment type, and application buttons. Add filtering by department/location/type, search functionality, and application form integration. Include modern job card design with clear hierarchy and easy application flow.
    • Create Portfolio/Case Studies block for showcasing work. Variants: project grid, detailed case study cards, before/after showcase, client spotlight, and timeline format. Features: project images, client details, technology used, results metrics, and view details links. Add category filtering, project search, and lightbox galleries. Include elegant project cards with hover effects and professional presentation.
    • Create Cookie Consent Banner block for GDPR compliance. Variants: bottom banner, top bar, modal overlay, corner popup, and minimal notice. Features: customizable text, accept/reject buttons, settings panel, cookie categories, and privacy policy links. Add slide-in animations, remember preferences, and accessibility compliance. Include modern flat design with clear call-to-actions and legal compliance features.
    • Create Announcement Bar block for important notices. Variants: top banner, floating bar, slide-in notification, countdown timer, and dismissible alert. Features: custom messages, action buttons, auto-hide timers, close functionality, and urgency styling. Add animation effects, sticky positioning, and multiple color schemes. Include modern alert design with clear typography and attention-grabbing styles.
    • Create Error Page block for 404/500 pages. Variants: friendly 404, technical error, maintenance mode, coming soon, and search suggestions. Features: error illustrations, helpful navigation, search functionality, popular pages links, and contact information. Add animated graphics, breadcrumb trails, and return-to-home options. Include modern error page design with engaging visuals and clear recovery paths.
    • Create comprehensive Features block for showcasing product/service capabilities. Variants: grid layout, alternating rows, tabbed sections, icon-focused, and comparison table. Features: feature icons, titles, descriptions, benefit highlights, and optional media (images/videos). Add interactive hover states, category filtering, feature comparison mode, and 'coming soon' badges. Include modern card designs with clean typography, subtle animations, and responsive layouts for SaaS features, company capabilities, and service offerings.
    • Create Event Listings block for showcasing upcoming events and activities. Variants: calendar view, list cards, featured event, timeline format, and category grid. Features: event titles, dates/times, locations, descriptions, speaker info, and registration buttons. Add calendar integration, event filtering by type/date, search functionality, and RSVP tracking. Include modern event cards with countdown timers, capacity indicators, and responsive layouts for conferences, webinars, workshops, and company events.
    • Create Location Hours block for business operating information. Variants: single location, multiple locations, minimal hours, detailed info cards, and map integration. Features: business hours, special schedules, holiday hours, contact information, and directions links. Add timezone support, current status indicators (open/closed), location search/filtering, and appointment booking integration. Include modern flat design with clear typography, interactive maps, and mobile-optimized layouts for service businesses.

[2025-06-04]

  • We have a great foundation of core library components (i.e. button etc.) however I want to introduce new, more advanced components (we call 'blocks'). These more advanced components should allow users to create fully functioning websites. All 'advanced' components should be in ./src/components/blocks, should be added to the component map, should have storybook files, should be added to the example site (create an 'Component Blocks' link under the 'Components' link in the header, and make sure each 'advanced' component/block has its own dedicated page, as well as being added to a new /showcase/blocks page). (39 subtasks completed)
    • Create a new /showcase/blocks page in the example app (./examples). Add 'Component Blocks' link to the navigation menu under the existing 'Components' dropdown. The blocks showcase page should display all the advanced block components in an organized grid or list format with links to individual block demo pages. Include a hero section explaining what blocks are (pre-built, advanced components for quickly building websites). Style it consistently with the existing showcase pages.
    • Create a 'header' block - this is meant to be the header (with logo, navigation, light/dark mode toggle, fixed/floating) etc. that is at the top of all pages. There should be quite a few different variants and options (i.e. logo might be an image, text, etc. they might not want light/dark mode toggle, might not want it floating/sticky, might want buttons on right to login, signup etc. etc.) - it should be really flexible, while still looking really nice, clean and modern. Internally it should use existing components (i.e. menu, nav, button etc.). Should be mobile responsive
    • Create a new 'page-hero-header' component. This is the component that should be the 'main' hero on a page (i.e. think marketing website). It should have many different props and variants to be really flexible and to suit many different types of websites (i.e. title, description, options for ctas, options for fullscreen image, option for right aligned image only, etc. etc.). Just image its a flexible component for most different types of websites. It should look really sexy, real clean, simple, modern.
    • Move the existing footer component to the new blocks directory (src/components/blocks/footer). Remove it from the showcase page in the example app and add it to the new blocks showcase page. Enhance it with: multiple column layouts (2-6 columns), social icon integration (install react-icons library), newsletter signup section, company info section, legal links row, and multiple variants (minimal, standard, expanded). Make it fully responsive with mobile-first design. Create comprehensive Storybook stories showing all variants.
    • Move the existing FeatureCard component to blocks directory. Create multiple variants: icon-top, icon-left, icon-background, card-hover-effects, with/without CTA buttons. Add support for: custom icons (via react-icons), gradient backgrounds, border variants, shadow options, and animation on scroll. Create grid layout options (2x2, 3x1, 3x2) in Storybook. Add to blocks showcase with interactive examples.
    • Move existing PricingTable to blocks directory. Enhance with: monthly/yearly toggle, feature comparison matrix, recommended tier highlighting, custom badge support, tiered pricing (starter/pro/enterprise), and currency formatting. Create variants: cards layout, comparison table, minimal cards, with testimonials. Add hover states, smooth transitions, and mobile-optimized views. Include 'Contact Sales' option for enterprise.
    • Move CallToAction component to blocks. Create variants: centered, split-screen, with background image, gradient backgrounds, with form integration, minimal, and bold. Support: multiple button styles, optional subtitle, background patterns/shapes, icon support, and statistics/trust indicators. Make fully responsive with different mobile layouts. Add entrance animations and hover effects.
    • Create new Timeline block component. Variants: vertical centered, vertical alternating, horizontal (desktop only), minimal dots, with images. Features: date/time stamps, icons for each event, connecting lines (solid/dashed), milestone markers, and content cards. Support both past/future events with different styling. Add scroll-triggered animations. Create both company history and roadmap examples.
    • Move Testimonial component to blocks. Create variants: single card, carousel, grid (2x2, 3x1), with video, minimal quote, and with ratings. Features: customer photos, company logos, job titles, star ratings, quote marks styling, and source links. Add navigation for carousel variant and auto-play option. Support long-form and short testimonials. Include social proof elements.
    • Move Carousel to blocks directory. Enhance with variants: image gallery, content cards, testimonials, product showcase, and fullscreen. Features: dots/arrows navigation, thumbnails strip, auto-play with pause on hover, swipe support, infinite loop, and variable items per view. Add Ken Burns effect for images, lazy loading, and zoom on click. Create mobile-optimized touch interactions.
    • Create new FAQ block component. Variants: accordion style, grid cards, two-column, with categories, and with search. Features: expand/collapse animations, category filtering, search functionality, anchor links, and most helpful voting. Support rich content in answers (lists, links, code). Add 'Contact Support' CTA and related articles. Create smooth height transitions and mobile-optimized layouts.
    • Create Team Grid block. Variants: grid cards, list view, minimal circles, with hover bio, and department groups. Features: profile photos with fallback, name/role/bio, social links (LinkedIn, Twitter), department tags, and direct contact options. Add filter by department, search by name, and optional org chart view. Include hover effects and modal bio option.
    • Create Blog Post Grid block. Variants: cards with image, minimal list, magazine style, with sidebar, and masonry. Features: featured image, category tags, read time, author info, excerpt, and publish date. Add pagination, category filtering, search, and sort options (date, popularity). Support featured/sticky posts, loading states, and infinite scroll option.
    • Create Blog Post Detail block. Variants: centered article, with sidebar, magazine layout, and minimal. Features: hero image, table of contents, share buttons, author bio box, related posts, and comments section placeholder. Add reading progress bar, estimated read time, syntax highlighting for code blocks, and image lightbox. Include prev/next navigation.
    • Create Brand Logo Bar block for trust/social proof. Variants: scrolling marquee, static grid, with heading, grayscale with color on hover, and compact. Features: logo sizing options, spacing controls, optional 'Trusted by' heading, and link support. Add smooth infinite scroll animation, pause on hover, and mobile responsive layouts. Support both light/dark logos with automatic switching.
    • Create Service List block. Variants: cards grid, list with icons, alternating image/text, tabs layout, and accordion. Features: service icon/image, title, description, feature lists, pricing info, and CTA buttons. Add hover effects, optional badges (Popular, New), and comparison mode. Support both product features and service offerings layouts.
    • Create Page Section wrapper block for marketing pages. Variants: full-width, contained, split background, angled/curved edges, and with patterns. Features: background colors/gradients/images, padding options, optional heading, and content alignment. Add parallax scrolling option, intersection observer for animations, and divider shapes. This wraps other blocks to create cohesive page sections.
    • Create Contact Form block. Variants: simple contact, detailed inquiry, with map, split screen, and minimal. Features: form validation, field types (text, email, phone, textarea, select), optional fields, and file upload. Add reCAPTCHA support, success/error states, loading states, and thank you message. Include office info sidebar option with map integration.
    • Create Latest News/Articles block for homepages. Variants: featured + list, cards row, minimal links, with images, and magazine style. Features: article thumbnails, categories, dates, author, and excerpt. Add 'View All' link, optional newsletter signup, and loading skeleton. Support 3-6 articles display with responsive layouts. Include optional category tabs.
    • Create Newsletter Signup block. Variants: inline form, modal popup, slide-in, footer bar, and with incentive. Features: email validation, name field option, GDPR checkbox, success confirmation, and loading states. Add integration points for email services, optional background images/patterns, and exit intent trigger option. Include privacy policy link and benefits list.
    • Create Social Share Bar block for content sharing. Variants: horizontal bar, vertical sidebar, floating buttons, modal overlay, and minimal icons. Features: popular platforms (Twitter, Facebook, LinkedIn, Reddit, email), custom share text, URL sharing, copy link button, and share counts. Add sticky positioning options, slide-in animations, and platform-specific optimizations. Support both page and custom content sharing with Open Graph integration.
    • Create interactive Map block for location display. Variants: embedded with info overlay, fullscreen modal, with contact details sidebar, minimal marker, and multi-location. Features: Google Maps integration, custom markers, business info popup, directions link, zoom controls, and satellite/terrain views. Add responsive iframe fallback, accessibility controls, and location search. Style with modern flat design and custom marker icons.
    • Create enhanced Contact Form block with advanced features. Variants: simple contact, detailed inquiry, with map integration, split screen layout, and wizard steps. Features: multi-region phone formatting, conditional field display, file upload support, CAPTCHA integration, and real-time validation. Add custom field types (dropdown, checkbox, radio), optional fields configuration, and CRM integration points. Include success/error states and thank you redirects.
    • Create comprehensive Icon component using react-icons library. Variants: different sizes, colors, filled/outlined, with backgrounds, and animated states. Features: complete icon library showcase, search functionality, category filtering, copy-to-clipboard, and sizing options. Add hover effects, loading states, and accessibility labels. Create dedicated showcase page displaying all available icons organized by category (arrows, social, business, etc.) with live preview and code examples.
    • Create stunning Photo Gallery block for image showcases. Variants: masonry grid, perfect grid, carousel slider, lightbox modal, and Instagram-style. Features: lazy loading, image optimization, zoom functionality, fullscreen viewing, and category filtering. Add smooth transitions, touch gestures, keyboard navigation, and thumbnail strips. Include watermark support, download options, and social sharing. Design with modern flat aesthetics and elegant hover effects.
    • Create Restaurant Menu block for food service websites. Variants: categorized sections, single column, two-column, grid cards, and prix fixe. Features: menu categories (appetizers, mains, desserts), item images, descriptions, prices, dietary indicators (vegan, gluten-free), and allergen warnings. Add search/filter functionality, daily specials highlighting, and nutritional information. Include elegant typography and appetizing image layouts.
    • Create Photo Flip Card block with elegant hover animations. Variants: vertical flip, horizontal flip, fade transition, slide reveal, and 3D rotation. Features: front image display, back overlay content, smooth CSS animations, touch device support, and custom transition timing. Add text overlay options, gradient backgrounds, call-to-action buttons, and multiple card sizes. Design with modern flat styling and sophisticated hover effects.
    • Create Statistics Counter block for showcasing key metrics. Variants: number counters, progress bars, circular progress, icon stats, and comparison stats. Features: animated counting effects, percentage displays, custom icons, trend indicators, and prefix/suffix support. Add scroll-triggered animations, customizable speeds, and formatting options (K, M, B abbreviations). Include multiple layout options (horizontal, grid, cards) with clean, modern design.
    • Create Typewriter Text block for dynamic text animations. Variants: typing effect, deleting and retyping, cursor blinking, multiple phrases rotation, and speed variations. Features: customizable typing speed, pause delays, cursor styling, infinite loop option, and text color transitions. Add multiple text strings cycling, character-by-character reveal, and responsive text sizing. Include modern fonts and smooth animations with accessibility considerations for reduced motion preferences.
    • Create Process Steps block for 'How it works' visual workflows. Variants: horizontal timeline, vertical steps, circular process, numbered cards, and branching paths. Features: step icons, connecting lines/arrows, progress indicators, interactive hover states, and optional animations. Add customizable numbering, icon library integration, responsive layouts, and step completion states. Include modern flat design with clean typography and smooth transitions.
    • Create Product Showcase block for e-commerce displays. Variants: grid cards, list view, featured product, comparison table, and category showcase. Features: product images, pricing, variants (size/color), quick add to cart, wishlist, and rating display. Add hover effects, sale badges, stock indicators, and filtering options. Include modern product card design with clean layouts and smooth interactions.
    • Create Job Listings block for career pages. Variants: card grid, list view, featured positions, department groups, and minimal listings. Features: job title, department, location, salary range, employment type, and application buttons. Add filtering by department/location/type, search functionality, and application form integration. Include modern job card design with clear hierarchy and easy application flow.
    • Create Portfolio/Case Studies block for showcasing work. Variants: project grid, detailed case study cards, before/after showcase, client spotlight, and timeline format. Features: project images, client details, technology used, results metrics, and view details links. Add category filtering, project search, and lightbox galleries. Include elegant project cards with hover effects and professional presentation.
    • Create Cookie Consent Banner block for GDPR compliance. Variants: bottom banner, top bar, modal overlay, corner popup, and minimal notice. Features: customizable text, accept/reject buttons, settings panel, cookie categories, and privacy policy links. Add slide-in animations, remember preferences, and accessibility compliance. Include modern flat design with clear call-to-actions and legal compliance features.
    • Create Announcement Bar block for important notices. Variants: top banner, floating bar, slide-in notification, countdown timer, and dismissible alert. Features: custom messages, action buttons, auto-hide timers, close functionality, and urgency styling. Add animation effects, sticky positioning, and multiple color schemes. Include modern alert design with clear typography and attention-grabbing styles.
    • Create Error Page block for 404/500 pages. Variants: friendly 404, technical error, maintenance mode, coming soon, and search suggestions. Features: error illustrations, helpful navigation, search functionality, popular pages links, and contact information. Add animated graphics, breadcrumb trails, and return-to-home options. Include modern error page design with engaging visuals and clear recovery paths.
    • Create comprehensive Features block for showcasing product/service capabilities. Variants: grid layout, alternating rows, tabbed sections, icon-focused, and comparison table. Features: feature icons, titles, descriptions, benefit highlights, and optional media (images/videos). Add interactive hover states, category filtering, feature comparison mode, and 'coming soon' badges. Include modern card designs with clean typography, subtle animations, and responsive layouts for SaaS features, company capabilities, and service offerings.
    • Create Event Listings block for showcasing upcoming events and activities. Variants: calendar view, list cards, featured event, timeline format, and category grid. Features: event titles, dates/times, locations, descriptions, speaker info, and registration buttons. Add calendar integration, event filtering by type/date, search functionality, and RSVP tracking. Include modern event cards with countdown timers, capacity indicators, and responsive layouts for conferences, webinars, workshops, and company events.
    • Create Location Hours block for business operating information. Variants: single location, multiple locations, minimal hours, detailed info cards, and map integration. Features: business hours, special schedules, holiday hours, contact information, and directions links. Add timezone support, current status indicators (open/closed), location search/filtering, and appointment booking integration. Include modern flat design with clear typography, interactive maps, and mobile-optimized layouts for service businesses.

[2025-06-03]

  • Polish and enhancement tasks to improve the core library functionality, particularly around SEO/metadata handling and templating capabilities for the render function. (3 subtasks completed)
    • Ensure SEO and metadata configuration can be serialized and passed through the render function. Currently the example app shows React component usage, but we need everything to work through JSON specification since APIs send down JSON specs. Tasks: 1) Check if SEO/structured data config is already serializable via render function options, 2) If not, implement serialization support for page titles, meta descriptions, Open Graph tags, Twitter cards, and structured data, 3) Update the /examples/seo-metadata page with clear instructions on how to configure SEO via JSON through render function, 4) Add a new comprehensive SEO documentation page to /documentation section explaining JSON-based SEO configuration with examples.
    • Implement a templating engine to support variables in JSON specifications. Use case: components/blocks can use placeholders like {{currentYear}}, {{companyName}}, {{userEmail}} etc. instead of hardcoding values. Tasks: 1) Research and choose between creating custom engine or using lightweight open-source solution (e.g. mustache, handlebars-lite), 2) Implement variable substitution in render function with support for nested properties, 3) Add reserved/special variables (currentYear, currentDate, timestamp, etc.), 4) Update render function to accept variables parameter, 5) Add comprehensive tests for templating, 6) Update README.md with templating documentation, 7) Create new documentation page at /documentation/templating with examples and variable reference.
    • Create a Markdown component as a core UI component in src/components/ui/. Research and select a lightweight, modern React markdown library (consider: react-markdown, markdown-to-jsx, or similar - prioritize bundle size and active maintenance). Component should: 1) Accept markdown string as input and render formatted content, 2) Support common markdown features (headings, lists, links, code blocks, tables, images), 3) Allow custom component overrides for elements, 4) Support syntax highlighting for code blocks, 5) Be fully typed with TypeScript. Tasks: Create component with proper error handling, add comprehensive Storybook stories showing all markdown features, add to component showcase page, create dedicated showcase page at /showcase/markdown with live editor demo, ensure it works with the render function via JSON specification.

[2025-06-03]

  • There is a /showcase page in the example app that showcases all of the react-jedi components (remember, react jedi is a SDUI library that renders components from JSON). I want to create a nested page for EVERY component that gives: table of contents, basic usage/description, different variations and examples, description of props/options. I then want to make a change to the /showcase page to link these components to their nested page as well. Remember - they should render the SDUI component (from JSON) on the nested page. (63 subtasks completed)
    • Create a nested page in the example app to showcase the button component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the button component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the CallToAction component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the CallToAction component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Card component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Card component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Carousel component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Carousel component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the FeatureCard component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the FeatureCard component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Footer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Footer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Hero component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Hero component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Image component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Image component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Input component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Input component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Label component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Label component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the NavigationMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the NavigationMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Pagination component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Pagination component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the PricingTable component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the PricingTable component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Progress component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Progress component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the RadioGroup component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the RadioGroup component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Select component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Select component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Slider component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Slider component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Switch component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Switch component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Tabs component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Tabs component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Testimonial component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Testimonial component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Text component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Text component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Toast component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Toast component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Tooltip component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Tooltip component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Container component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Container component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Box component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Box component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Grid component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Grid component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Flex component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Flex component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Stack component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Stack component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Group component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Group component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Center component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Center component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the SimpleGrid component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the SimpleGrid component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Masonry component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Masonry component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Spacer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Spacer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Textarea component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Textarea component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Checkbox component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Checkbox component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Toggle component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Toggle component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the ToggleGroup component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the ToggleGroup component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Form component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Form component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Separator component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Separator component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Badge component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Badge component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Heading component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Heading component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the BlockQuote component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the BlockQuote component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the AspectRatio component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the AspectRatio component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Avatar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Avatar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Skeleton component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Skeleton component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Alert component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Alert component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the AlertDialog component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the AlertDialog component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Collapsible component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Collapsible component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Table component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Table component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DataTable component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DataTable component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Chart component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Chart component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Popover component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Popover component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the HoverCard component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the HoverCard component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Drawer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Drawer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DropdownMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DropdownMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the ContextMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the ContextMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Menubar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Menubar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Breadcrumb component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Breadcrumb component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Command component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Command component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Calendar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Calendar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DatePicker component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DatePicker component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Combobox component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Combobox component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the InputOTP component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the InputOTP component example has a link to the nested page as well.

[2025-06-03]

  • There is a /showcase page in the example app that showcases all of the react-jedi components (remember, react jedi is a SDUI library that renders components from JSON). I want to create a nested page for EVERY component that gives: table of contents, basic usage/description, different variations and examples, description of props/options. I then want to make a change to the /showcase page to link these components to their nested page as well. Remember - they should render the SDUI component (from JSON) on the nested page. (63 subtasks completed)
    • Create a nested page in the example app to showcase the button component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the button component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the CallToAction component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the CallToAction component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Card component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Card component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Carousel component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Carousel component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the FeatureCard component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the FeatureCard component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Footer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Footer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Hero component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Hero component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Image component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Image component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Input component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Input component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Label component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Label component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the NavigationMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the NavigationMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Pagination component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Pagination component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the PricingTable component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the PricingTable component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Progress component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Progress component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the RadioGroup component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the RadioGroup component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Select component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Select component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Slider component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Slider component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Switch component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Switch component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Tabs component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Tabs component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Testimonial component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Testimonial component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Text component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Text component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Toast component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Toast component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Tooltip component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Tooltip component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Container component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Container component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Box component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Box component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Grid component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Grid component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Flex component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Flex component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Stack component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Stack component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Group component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Group component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Center component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Center component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the SimpleGrid component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the SimpleGrid component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Masonry component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Masonry component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Spacer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Spacer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Textarea component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Textarea component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Checkbox component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Checkbox component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Toggle component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Toggle component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the ToggleGroup component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the ToggleGroup component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Form component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Form component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Separator component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Separator component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Badge component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Badge component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Heading component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Heading component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the BlockQuote component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the BlockQuote component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the AspectRatio component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the AspectRatio component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Avatar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Avatar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Skeleton component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Skeleton component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Alert component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Alert component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the AlertDialog component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the AlertDialog component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Collapsible component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Collapsible component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Table component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Table component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DataTable component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DataTable component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Chart component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Chart component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Popover component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Popover component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the HoverCard component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the HoverCard component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Drawer component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Drawer component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DropdownMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DropdownMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the ContextMenu component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the ContextMenu component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Menubar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Menubar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Breadcrumb component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Breadcrumb component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Command component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Command component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Calendar component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Calendar component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the DatePicker component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the DatePicker component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the Combobox component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the Combobox component example has a link to the nested page as well.
    • Create a nested page in the example app to showcase the InputOTP component - it should render from SDUI (i.e. the JSON), it should have: table of contents, basic usage/description, different variations and examples, description of props/options. Then, update the /showcase page to make sure that the InputOTP component example has a link to the nested page as well.

[2025-06-02]

  • Fix CSS color issues with Tailwind v4 oklch format
    • Updated CSS variables to use bare oklch values instead of wrapped format
    • Fixed primary color from near-black (0.205 0 0) to blue (0.5918 0.2132 263.83)
    • Updated all CSS variable references to wrap with oklch() function
    • Added CSS diagnostics page for debugging color issues
    • Removed unused button test component
  • Fix useAnimation AnimationProvider error on stagger animations page (/examples/stagger-animations). The Stagger component in src/lib/animation/stagger.tsx:56:18 is trying to use the useAnimation hook but it's not wrapped in an AnimationProvider. Need to ensure the stagger animations page properly wraps components using animation hooks with AnimationProvider.
  • Fix unknown event handler property warning for onValueChange in slider component. On the stagger animations page, there's a React warning about 'onValueChange' on a div element in src/components/ui/slider.tsx:19:48. This suggests that the onValueChange prop is being passed directly to a DOM element instead of being handled properly. Need to ensure the slider component doesn't pass non-standard props to DOM elements.
  • Verify React Router error boundary is properly handling animation errors from the stagger animations page. While the error boundary is catching errors as expected, we should verify that it provides a good user experience when these errors occur, rather than just showing a blank page or generic error message.

[2025-06-02]

  • Verify React Router error boundary is properly handling animation errors from the stagger animations page. While the error boundary is catching errors as expected, we should verify that it provides a good user experience when these errors occur, rather than just showing a blank page or generic error message.

[2025-06-02]

  • Fix unknown event handler property warning for onValueChange in slider component. On the stagger animations page, there's a React warning about 'onValueChange' on a div element in src/components/ui/slider.tsx:19:48. This suggests that the onValueChange prop is being passed directly to a DOM element instead of being handled properly. Need to ensure the slider component doesn't pass non-standard props to DOM elements.

[2025-06-02]

  • Fix useAnimation AnimationProvider error on stagger animations page (/examples/stagger-animations). The Stagger component in src/lib/animation/stagger.tsx:56:18 is trying to use the useAnimation hook but it's not wrapped in an AnimationProvider. Need to ensure the stagger animations page properly wraps components using animation hooks with AnimationProvider.

[2025-06-02]

  • Fix all console errors found in the React Jedi example app (0 subtasks completed)

[2025-06-02]

  • Fix all console errors found in the React Jedi example app (0 subtasks completed)

[2025-06-02]

  • Fix all console errors found in the React Jedi example app (5 subtasks completed)
    • Fix validateDOMNesting error: cannot appear as a descendant of . This error occurs in the Tooltip component when a button is used as a tooltip trigger, creating nested buttons. Found on pages: /showcase, /showcase/popover, /showcase/tooltip. The issue is in src/components/ui/button/button.tsx:50 and src/components/ui/tooltip/tooltip.tsx:56
    • Fix 'No QueryClient set, use QueryClientProvider to set one' error. This error occurs when using data fetching features without proper QueryClient setup. Found on pages: /examples/data-fetching, /examples/optimistic-updates. The error originates from src/hooks/use-data-sources.ts:103 when useQuery is called without QueryClientProvider context
    • Fix 'Invalid UISpecification: Missing root property' error. This occurs when JSON schemas are missing the required 'root' property. Found on pages: /showcase/alert, /showcase/grid, /showcase/image, /showcase/testimonial, /showcase/text. The specification parser expects a 'root' property containing a ComponentSpec
    • Fix 'Element type is invalid. Received a promise that resolves to: undefined' error. This is a lazy loading issue where components aren't properly exported. Found on pages: /examples/stagger-animations, /showcase/tabs. The lazy element type must resolve to a valid React component
    • Fix 'Each child in a list should have a unique key prop' warning. This occurs in the Carousel component when rendering carousel items without unique keys. Found on page: /showcase/carousel

[2025-06-01]

  • Update README.md with clear instructions on how to import and use the styles when using react-jedi as a third-party dependency. Need to ensure styles are being published to npm and provide documentation on the correct import path and any required setup steps for consuming applications to properly load the CSS styles.

[2025-06-01]

  • When publishing to npm and installing in another repo, installation fails with an error about playwright or chromium not being installed. There appears to be a postinstall script that should only run for local development, not for consumers installing the published package. Need to investigate and fix the postinstall script to ensure it doesn't run when the package is installed as a dependency in other projects.

[2025-05-31]

  • Fix various UI issues and enhance the example app with better styling, placeholder images, syntax highlighting, search functionality, and other improvements. (11 subtasks completed)
    • Remove @shadcn/ui text from all cards on the /showcase page in the example app (./examples). Check all component cards and remove any references to @shadcn/ui since React Jedi is its own SDUI library. Update card titles and descriptions to only reference React Jedi components.
    • Update all images in the example app (./examples) to use placeholder images from https://placehold.co service. Replace broken or missing images with URLs like https://placehold.co/600x400/EEE/31343C where 600 is width and 400 is height. Check all pages including showcase pages, component examples, and any other pages with images. Ensure consistent placeholder image sizes appropriate for each context.
    • On the /showcase page in the example app (./examples), some cards only have text like 'Data Table - Advanced sortable table' without actual component examples. Find all such text-only cards and either add proper SDUI component examples to them or create links to their respective showcase pages if they exist. Ensure all cards on /showcase have consistent presentation.
    • Fix the /documentation page header in the example app (./examples) to remove excessive purple and other colors. Make the header consistent with other pages in the app - use the same color scheme, styling, and layout as pages like /showcase or /examples. Ensure clean, professional appearance without random color variations.
    • Fix all nested documentation pages (e.g., /documentation/getting-started) in the example app (./examples). Issues to fix: 1) Remove 100% width that makes content stretch edge-to-edge, 2) Remove random colors like green that don't match the app's design system, 3) Add a proper documentation layout with sidebar navigation, 4) Add previous/next navigation buttons, 5) Ensure consistent styling with main documentation page. Make it look like standard documentation sites.
    • Fix the floating side menu on the /examples page in the example app (./examples). The menu gets cut off by the fixed header. Add proper offset/margin-top to account for the header height so the floating menu is fully visible and doesn't overlap with or get hidden behind the header.
    • Add a syntax highlighting plugin (like Prism.js or highlight.js) to the example app (./examples) for code and JSON examples. Apply syntax highlighting to: 1) Code blocks on the /documentation page, 2) All JSON examples on the /showcase page, 3) All JSON code on individual showcase pages (e.g., /showcase/button, /showcase/group), 4) Any other code snippets throughout the app. Ensure consistent and attractive code formatting.
    • Investigate and confirm that the main @alexberriman/react-jedi library styles are being properly loaded in the example app (./examples). Check: 1) Import statements for library styles, 2) Build configuration, 3) Console for any style loading errors, 4) Verify components are rendering with proper styles from the SDUI library. Fix any issues preventing library styles from loading correctly.
    • Confirm the example app (./examples) is set up to not be indexable by search engines. Check for: 1) robots.txt file with proper disallow rules, 2) Meta tags with noindex/nofollow in HTML head, 3) Any other SEO prevention measures. Add any missing configurations to ensure the example app is not indexed by search engines.
    • Add a search component to the header in the example app (./examples) with real-time search results. Requirements: 1) Search input that looks sexy and matches the app design, 2) Real-time filtering as user types, 3) Search through all pages/routes in the app, 4) Show results in a dropdown (e.g., typing 'bo' shows 'Box' page), 5) Clicking a result navigates to that page, 6) Include keyboard navigation support, 7) Style it to look modern and professional.
    • Change the hardcoded '2024' year in the footer of the example app (./examples) to dynamically show the current year using JavaScript's new Date().getFullYear(). Find all instances of hardcoded 2024 in the footer and replace with dynamic year generation.
  • Fix various styling issues in the example app to improve consistency and user experience (7 subtasks completed)
    • On the Homepage in the Getting Started section, ensure all code examples use our syntax highlighting component for consistent code presentation
    • Remove the gradient/weird style effect on the /documentation page header. Use standard header styling consistent with other pages like /examples. Apply this to all documentation/* pages
    • Replace the horizontal navigation bar on /documentation with a vertical sidebar navigation (standard for doc sites like https://magicui.design/docs)
    • Fix weird styling on nested documentation pages (documentation/*): remove green headers (use dark theme), remove weird underlines/overlines, fix button gradients (see /documentation/layout-components), fix container styling. Ensure clean, consistent UI matching our home page styles
    • On the /showcase page, apply syntax highlighting to the show/hide JSON feature for each component using our syntax highlighting component
    • On the /examples page, change the floating menu color from purple to violet/blue to maintain consistency (we don't use blue elsewhere)
    • On the /examples page, remove all 'new' and 'stable' badges from components. Everything will be in the initial release

[2025-05-31]

  • Additional UI/UX fixes for the example app (./examples) to improve usability and consistency (5 subtasks completed)
    • Remove the 'React Jedi Documentation' hero section on the /documentation page in the example app (./examples). This includes the purple/gradient background section with 'Get Started' and 'View Components' buttons. Keep only the clean documentation content below.
    • Add previous/next navigation buttons at the bottom of each documentation page in the example app (./examples). Style them nicely to match the app design. First page (Getting Started) should only have 'Next' button leading to Component System. Last page should only have 'Previous' button. All other pages should have both. Include page titles in the buttons.
    • Fix the floating navigation bar on the /showcase page in the example app (./examples). The floating nav is hidden behind the fixed header. Add proper top offset/margin to account for the fixed header height so the floating navigation is fully visible and accessible.
    • Investigate why styles from the main library (./src) aren't being applied in the example app (./examples). All buttons appear black instead of styled. Check: 1) Import paths for @alexberriman/react-jedi styles, 2) Build process and dist folder, 3) Vite config for style handling, 4) Console errors, 5) Whether library CSS is being bundled correctly. Fix the root cause to ensure SDUI components render with proper styling.
    • Update the root README.md file. Analyze the entire repository structure and create a simple, sexy, straightforward README with: 1) Clear project description, 2) Table of contents, 3) Installation instructions, 4) Quick start guide, 5) Key features, 6) Examples, 7) Documentation links, 8) Contributing guidelines. Make it professional and appealing for developers discovering the project.

[2025-05-30]

  • Polish and improve the example app (./examples) user experience, navigation, and overall design quality. Remove redundant pages, fix UI issues, and enhance the documentation and performance pages. (12 subtasks completed)
    • Fix the header dropdown menu in the example app (./examples) - it's glitchy when you click on parent items with children. Clicking on parent items should have no effect (only hover should trigger show/hide). Also add cursor-pointer styling to interactive elements.
    • Remove the 'Interactive Components Now Available!' container at the bottom of the /showcase page in the example app (./examples).
    • Remove the 'Advanced Layout Components' page (/showcase/layout) from the example app (./examples) since we've added detailed pages for every component. Also remove this link from the header navigation.
    • Remove the '/showcase/overlay-interactive' page ('Interactive Overlay Components') from the example app (./examples) as we've created detailed pages for each component. Also remove this link from the header navigation.
    • Remove the '/showcase/interactive' page ('Interactive Component Showcase') from the example app (./examples). Also remove this link from the header navigation.
    • Redesign the /examples page in the example app (./examples) to look nicer. The current box/card layout doesn't work well with many items. Create a cleaner, more organized layout.
    • Remove the '/examples/form-validation' page from the example app (./examples) and also remove it from the header navigation.
    • Remove the '/examples/landing' page from the example app (./examples) and also remove it from the header navigation.
    • Remove the '/examples/navigation' page from the example app (./examples) and also remove it from the header navigation.
    • Move the Documentation page to the first link in the header menu (before components) in the example app (./examples). Redesign it to look way nicer and more like a traditional documentation page. Add syntax highlighting for JSON/TypeScript code using a 3rd party plugin. Break content into logical sections (Introduction, Getting Started, etc.). Avoid content duplication by linking to existing pages. Make the documentation look professional and sexy.
    • Redesign the /performance page in the example app (./examples) to look way nicer with clean, simple, flat, and sexy UI design.
    • Update the footer menu in the example app (./examples) to be current and reflective of the updated site structure after removing and reorganizing pages.