slideshare/src/App.tsx
Michael Mainguy b4b61ad761 Consolidate button components and eliminate barrel exports
## Button Component System
- Create dedicated components/ui/buttons directory with 6 specialized button components:
  - Button.tsx: Universal button with variants (primary, secondary, danger, link) and sizes
  - ActionButton.tsx: Action buttons matching existing patterns
  - BackButton.tsx: Navigation back buttons
  - CancelLink.tsx: Cancel/link style buttons
  - CloseButton.tsx: Modal/preview close buttons with variants
  - NavigationButton.tsx: Presentation navigation buttons
- Update key components to use new button system (SlideEditor, ContentEditor, Modal, AlertDialog, ConfirmDialog)
- Replace inline styled-jsx with proper CSS files for AlertDialog and ConfirmDialog

## Barrel Export Elimination
- Remove all barrel export files violating IMPORT_STANDARDS.md:
  - src/themes/index.ts
  - src/components/themes/index.ts
  - src/components/presentations/index.ts
  - src/components/slide-editor/index.ts
- Update 15+ files to use direct imports from themeLoader.ts instead of barrel exports
- Fix function naming conflict in ThemeDetailPage.tsx (loadTheme shadowing)
- Follow project standards: direct imports with .tsx extensions for better Vite performance

## Benefits
- Improved Vite tree shaking and module resolution performance
- Consistent, reusable button system across application
- Adherence to project coding standards and import conventions
- Reduced bundle size through elimination of barrel export overhead

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-21 11:42:42 -05:00

43 lines
2.2 KiB
TypeScript

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { ThemeBrowser } from './components/themes/ThemeBrowser.tsx';
import { ThemeDetailPage } from './components/themes/ThemeDetailPage.tsx';
import { LayoutDetailPage } from './components/themes/LayoutDetailPage.tsx';
import { LayoutPreviewPage } from './components/themes/LayoutPreviewPage.tsx';
import { NewPresentationPage } from './components/presentations/NewPresentationPage.tsx';
import { PresentationViewer } from './components/presentations/PresentationViewer.tsx';
import { PresentationMode } from './components/presentations/PresentationMode.tsx';
import { PresentationEditor } from './components/presentations/PresentationEditor.tsx';
import { SlideEditor } from './components/slide-editor/SlideEditor.tsx';
import { PresentationsList } from './components/presentations/PresentationsList.tsx';
import { AppHeader } from './components/AppHeader.tsx';
import { Welcome } from './components/Welcome.tsx';
import './App.css'
import './components/themes/ThemeBrowser.css'
function App() {
return (
<Router>
<div className="app-root">
<AppHeader />
<main className="app-main">
<Routes>
<Route path="/" element={<Welcome />} />
<Route path="/presentations" element={<PresentationsList />} />
<Route path="/presentations/new" element={<NewPresentationPage />} />
<Route path="/presentations/:presentationId/edit/slides/:slideNumber" element={<PresentationEditor />} />
<Route path="/presentations/:presentationId/view/slides/:slideNumber" element={<PresentationViewer />} />
<Route path="/presentations/:presentationId/present/:slideNumber" element={<PresentationMode />} />
<Route path="/presentations/:presentationId/slide/:slideId/edit" element={<SlideEditor />} />
<Route path="/themes" element={<ThemeBrowser />} />
<Route path="/themes/:themeId" element={<ThemeDetailPage />} />
<Route path="/themes/:themeId/layouts/:layoutId" element={<LayoutDetailPage />} />
<Route path="/themes/:themeId/layouts/:layoutId/preview" element={<LayoutPreviewPage />} />
</Routes>
</main>
</div>
</Router>
)
}
export default App