Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update dependencies and enhance ToolRequestForm with hybrid input type #213

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from

Conversation

cemilozdemir
Copy link

@cemilozdemir cemilozdemir commented Jan 2, 2025

Description

This PR introduces a new reusable HybridInput component, a versatile solution for handling multiple input types in forms. As its first implementation, it's integrated with the presentation generation tool.

Images

image
image
image
image

  1. HybridInput Component

    • Unified interface for text and file inputs
    • Dynamic file type selection with custom icon support
    • Multiple/single file upload handling
    • Visual file chips with delete functionality
    • YouTube URL integration
    • Built with forwardRef and react-hook-form-mui
    • Comprehensive state management
    • Reusable across different tools
  2. Component Features

    • Material-UI integration with custom styling
    • Intuitive dropdown menu for file type selection
    • Real-time visual feedback
    • Format-specific validation
    • Accessibility compliant
    • Responsive design
    • Extensive prop customization
  3. Integration Example

    • Implemented in Presentation Generator tool
    • Removed PrimaryFileUpload and FileTypeSelecotr from the tool.
    • Updated seed_data.json configurations
    • Added file type constants and icons
    • Connected with form validation system

Related Issue

Issue #187

Type of Change

  • New feature: Reusable HybridInput component
  • Enhancement: Advanced input handling capabilities
  • Integration: Example implementation in Presentation Generator

Proposed Solution

The HybridInput component solves several common input handling challenges:

  • Eliminates need for separate text and file input components
  • Provides consistent UI for different input types
  • Handles multiple file formats elegantly
  • Offers extensive customization options
  • Maintains clean, user-friendly interface
  • Follows Figma design specifications

How to Test

  1. Core Component Testing

    • Text input functionality
    • File type selection dropdown
    • File upload for various formats
    • File chip display and deletion
    • YouTube URL handling
    • Multiple file upload mode
    • Validation feedback
  2. Integration Testing

    • Form submission with different input types
    • Error handling
    • State management
    • File processing
    • UI responsiveness

Unit Tests

  • Initial implementation without unit tests
  • Test coverage planned for next iteration

Documentation Updates

  • Yes
  • No
  • Component documentation planned

Checklist

  • Component self-review completed
  • Added inline documentation
  • Verified responsive design
  • Tested all input scenarios
  • Verified file handling
  • Checked browser compatibility
  • Confirmed accessibility compliance

Additional Information

The HybridInput component is designed to be the standard solution for complex input handling across our platform. Its first implementation in the Presentation Generator tool demonstrates its versatility and potential for reuse in other features.

cemilozdemir added 2 commits January 2, 2025 14:41
- Added 'file-saver' and 'pptxgenjs' dependencies in package.json and package-lock.json.
- Introduced a new hybrid input type in ToolRequestForm to allow selection between PDF and CSV formats.
- Updated seed_data.json to reflect changes in input types for presentation generation.
- Registered the new hybrid input type in constants.
- Integrated the PresentationGeneratorResponse in outputs.

These changes improve the functionality of the ToolRequestForm and enhance the overall project structure.
@poojithreddy28
Copy link

Hi @cemilozdemir,

Is this PR built on top of PR #210 as an enhancement? If yes, please note that PR #210 has been reviewed and requires some code adjustments. Could you provide some clarity on how this builds upon or differs from PR #210?

Looking forward to your response!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants