Interactive Component Documentation with Code Examples

[princexpoddar]

Problem

The components page currently only displays visual components without showing the actual code or usage instructions. Developers need to see both the component and its implementation code to effectively use the library, but there's no way to access this information.

Proposed Solution

Create an interactive component showcase where clicking on any component opens a modal containing live component preview, copyable code examples, comprehensive props documentation, and usage examples. This will provide developers with everything they need to implement components in their projects.

Implementation Details

Create a reusable ComponentShowcase component that displays components in a grid layout. When clicked, each component opens a modal with the following sections:

Modal Layout:

• Preview Section: Live component display
• Code Section: Syntax-highlighted, copyable code examples
• Props Table: Complete documentation of all available props with types and descriptions
• Examples Section: Multiple usage scenarios with different configurations
• Interactive Controls: Live prop controls to see real-time changes

Technical Requirements:

• Modal with smooth open/close animations
• Copy-to-clipboard functionality with success feedback
• Syntax highlighting for JSX code
• Responsive design for mobile and desktop
• Keyboard navigation support (ESC to close)
• Click outside modal to close

Component Data Structure:
Each component needs comprehensive metadata including code examples, props documentation, and usage scenarios. For example, PrimaryButton would include basic usage, click handlers, disabled states, and size variations.

Files to Create:

• src/components/ComponentShowcase.jsx - Main showcase component
• src/components/CodeBlock.jsx - Code display with syntax highlighting
• src/components/PropsTable.jsx - Props documentation table
• src/data/componentData.js - Component metadata and examples

Files to Modify:

• src/app/components/page.jsx - Update to use showcase components

Acceptance Criteria

• All 11 components (5 buttons + 6 cards) have interactive documentation
• Modal opens/closes smoothly with proper animations
• Code examples are accurate, copyable, and syntax-highlighted
• Props documentation includes types, descriptions, and required/optional status
• Multiple usage examples per component showing different configurations
• Responsive design works on all devices
• Copy-to-clipboard functionality works across different browsers
• No console errors or warnings
• Consistent styling with existing design system

Impact

This enhancement will significantly improve the developer experience by providing clear usage examples, copyable code snippets, comprehensive documentation, and interactive component exploration, making the library much more accessible and useful for contributors and users.

Labels

hacktoberfest, enhancement, documentation, frontend, interactive

[github-actions]

Welcome, @princexpoddar! Thanks for raising the issue.
Soon the maintainers/owner will review it and provide you with feedback/suggestions.
Make sure to star this awesome repository and follow the account!

[DeepenNehra]

hi @princexpoddar assign this issue to me i will handle it properly.

[Gyanthakur]

Sure, @DeepenNehra @princexpoddar!
Issue assigned to you
Looking forward to your contribution. Make sure to attach a screenshot after pushing your changes.