Replace manually-coded React icon components with SVGR-generated ones from shared SVG assets.
This establishes a maintainable, single-source-of-truth system for icons across the monorepo.
## Key Changes
### ✨ SVGR Integration
- Add @svgr/cli with custom configuration for React component generation
- Generate components from packages/core/icons/assets/ SVG files
- Implement custom templates with generation warnings and JSDoc @generated tags
- Replace manual src/icons/ with auto-generated src/generated-icons/
### 🎨 Complete Styling Support
- Add fill="currentColor" to all SVG source files in core package
- Configure replaceAttrValues to transform currentColor → {color} in React components
- Restore full color prop functionality (fill={color} on path elements)
- Maintain backwards compatibility with existing IconProps interface
### 📚 Developer Experience
- Add comprehensive README.md with usage examples and development workflow
- Include clear "DO NOT EDIT" warnings in all generated files
- Add .gitignore to exclude generated files from version control
- Provide detailed generation instructions and architecture explanation
### 🏗️ Build System Integration
- Update package.json scripts: npm run generate creates React components
- Integrate generation into build pipeline (npm run build runs generate first)
- Add SVGR dependencies: @svgr/cli, plugins, and babel-plugin-add-jsx-attribute
- Maintain existing rollup + TypeScript build chain
## Technical Implementation
- **Source**: SVG files in packages/core/icons/assets/ (single source of truth)
- **Generator**: SVGR v8 with custom TypeScript React templates
- **Output**: Auto-generated components in src/generated-icons/ with full JSDoc
- **Styling**: fill={color} props + currentColor inheritance for dynamic theming
- **Types**: Preserved IconProps interface with SVGAttributes<SVGElement> + color prop
## Verification
✅ Playwright testing confirms icons render correctly with proper colors
✅ All 5 icons (Play, Pause, VolumeHigh, VolumeLow, VolumeOff) generate successfully
✅ Color prop functionality verified (fill attribute updates dynamically)
✅ Build system integration working across full monorepo
✅ Backwards compatibility maintained with existing components
This implementation provides automatic React component generation while maintaining
full feature parity with the original manually-coded icons.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Convert @vjs-10/react-native packages to placeholder stubs for future implementation
- Move Video.tsx from @vjs-10/react-media-elements to @vjs-10/react package
- Fix React JSX compilation errors by changing jsx config from react-jsx to react
- Add React imports to all TSX files to resolve UMD global errors
- Remove React Native specific dependencies from package.json files
- Refactor @vjs-10/react-media-elements to export VideoElement/AudioElement with placeholders
- All packages now build successfully with monorepo architecture intact
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Migrate all prototype code from vjs10-prototype repository into the
monorepo structure following established dependency hierarchy and
package organization patterns.
Core packages migrated:
- @vjs-10/media-store: Complete media store with nanostores integration
- @vjs-10/playback-engine: HLS.js playback engine implementation
- @vjs-10/media: Core media state owner and interfaces
HTML packages migrated:
- @vjs-10/html-icons: Web component icons with proper base classes
- @vjs-10/html-media-elements: Context provider integration
- @vjs-10/html: Main HTML UI components, skins, and utilities
React packages migrated:
- @vjs-10/react-icons: React icon components
- @vjs-10/react-media-elements: Video component with state integration
- @vjs-10/react-media-store: MediaProvider and React hooks
- @vjs-10/react: Main React UI components and skins
Changes made:
- Updated all imports to use monorepo package names (@vjs-10/*)
- Distributed dependencies to specific packages that use them
- Preserved all prototype functionality and component structure
- Created proper index files for all packages
- Fixed workspace protocol usage for npm compatibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Set up monorepo structure with core, HTML, React, and React Native packages
- Add TypeScript configuration with project references
- Create foundational packages: media-store, playback-engine, media, icons
- Implement platform-specific packages for HTML, React, and React Native
- Add comprehensive documentation and development tooling
- Include CLAUDE.md with development guidelines and conventional commits
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Rahim