arsvendg/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/arsvendg/Stirling-PDF.git synced 2026-07-16 11:23:10 +02:00
Code Issues Actions 3 Packages Projects Releases 1 Wiki Activity

Remove CRA and use Vite instead

Browse Source
This commit is contained in:
Reece
2025-05-28 21:43:02 +01:00
parent d216811317
commit 15761ae743
21 changed files with 60136 additions and 15126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.js
-6
View File
@@ -1,6 +0,0 @@
import './index.css';
import HomePage from './pages/HomePage';
export default function App({ colorScheme, toggleColorScheme }) {
return <HomePage colorScheme={colorScheme} toggleColorScheme={toggleColorScheme} />;
}
frontend/src/App.tsx
+6
View File
@@ -0,0 +1,6 @@
import './index.css';
import React from 'react';
import HomePage from './pages/HomePage';
export default function App() {
return <HomePage/>;
}
frontend/src/components/FileManager.tsx
+2 -5
View File
@@ -1,13 +1,10 @@
import React, { useState, useEffect } from "react";
import { Card, Group, Text, Stack, Image, Badge, Button, Box, Flex, ThemeIcon } from "@mantine/core";
import { Dropzone, MIME_TYPES } from "@mantine/dropzone";
import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
GlobalWorkerOptions.workerSrc =
(import.meta as any).env?.PUBLIC_URL
? `${(import.meta as any).env.PUBLIC_URL}/pdf.worker.js`
: "/pdf.worker.js";
import { GlobalWorkerOptions } from "pdfjs-dist";
GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
export interface FileWithUrl extends File {
url?: string;
frontend/src/components/ToolPicker.tsx
+6 -20
View File
@@ -1,5 +1,5 @@
import React, { useState } from "react";
import { Box, Text, Stack, Button, TextInput } from "@mantine/core";
import { Box, Text, Stack, Button, TextInput, Group } from "@mantine/core";
type Tool = {
icon: React.ReactNode;
@@ -24,23 +24,7 @@ const ToolPicker: React.FC<ToolPickerProps> = ({ selectedToolKey, onSelect, tool
);
return (
<Box
style={{
width: 220,
borderRight: "1px solid #e9ecef",
minHeight: "100vh",
padding: 16,
position: "fixed",
left: 0,
top: 0,
bottom: 0,
zIndex: 100,
overflowY: "auto",
}}
>
<Text size="lg" fw={500} mb="md">
Tools
</Text>
<Box >
<TextInput
placeholder="Search tools..."
value={search}
@@ -48,7 +32,7 @@ const ToolPicker: React.FC<ToolPickerProps> = ({ selectedToolKey, onSelect, tool
mb="md"
autoComplete="off"
/>
<Stack gap="sm">
<Stack align="flex-start">
{filteredTools.length === 0 ? (
<Text c="dimmed" size="sm">
No tools found
@@ -59,9 +43,11 @@ const ToolPicker: React.FC<ToolPickerProps> = ({ selectedToolKey, onSelect, tool
key={id}
variant={selectedToolKey === id ? "filled" : "subtle"}
onClick={() => onSelect(id)}
fullWidth
size="md"
radius="md"
leftSection={icon}
fullWidth
justify="flex-start"
>
{name}
</Button>
frontend/src/components/Viewer.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ import ViewWeekIcon from "@mui/icons-material/ViewWeek"; // for dual page (book)
import DescriptionIcon from "@mui/icons-material/Description"; // for single page
import { useLocalStorage } from "@mantine/hooks";
GlobalWorkerOptions.workerSrc = `${process.env.PUBLIC_URL}/pdf.worker.js`;
GlobalWorkerOptions.workerSrc = "/pdf.worker.js";
export interface ViewerProps {
pdfFile: { file: File; url: string } | null;
frontend/src/index.js → frontend/src/index.tsx
+6 -4
View File
@@ -5,14 +5,17 @@ import { ColorSchemeScript, MantineProvider, mantineHtmlProps } from '@mantine/c
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root')); // Finds the root DOM element
const container = document.getElementById('root');
if (!container) {
throw new Error("Root container missing in index.html");
}
const root = ReactDOM.createRoot(container); // Finds the root DOM element
root.render(
<React.StrictMode>
<ColorSchemeScript />
<MantineProvider withGlobalStyles withNormalizeCSS>
<MantineProvider defaultColorScheme="auto">
<BrowserRouter>
<App />
</BrowserRouter>
@@ -20,4 +23,3 @@ root.render(
</React.StrictMode>
);
reportWebVitals();
frontend/src/pages/HomePage.tsx
+60 -36
View File
@@ -154,6 +154,7 @@ const TOOL_PARAMS = {
export default function HomePage() {
const [searchParams, setSearchParams] = useSearchParams();
const theme = useMantineTheme();
const { colorScheme } = useMantineColorScheme(); // <-- Call hook ONCE at the top
// Core app state
const [selectedToolKey, setSelectedToolKey] = useState<string>(searchParams.get("tool") || "split");
@@ -220,29 +221,51 @@ export default function HomePage() {
};
return (
<Group align="flex-start" gap={0} style={{ minHeight: "100vh" }}>
<Group
align="flex-start"
gap={0}
style={{
minHeight: "100vh",
width: "100vw",
overflow: "hidden",
flexWrap: "nowrap",
display: "flex",
}}
>
{/* Left: Tool Picker */}
{sidebarsVisible && (
<ToolPicker
selectedToolKey={selectedToolKey}
onSelect={handleToolSelect}
toolRegistry={toolRegistry}
/>
<Box
style={{
minWidth: 180,
maxWidth: 240,
width: "16vw",
height: "100vh",
borderRight: `1px solid ${colorScheme === "dark" ? theme.colors.dark[4] : "#e9ecef"}`,
background: colorScheme === "dark" ? theme.colors.dark[7] : "#fff",
zIndex: 101,
display: "flex",
flexDirection: "column",
}}
>
<ToolPicker
selectedToolKey={selectedToolKey}
onSelect={handleToolSelect}
toolRegistry={toolRegistry}
/>
</Box>
)}
{/* Middle: Main View (Viewer, Editor, Manager) */}
{/* Middle: Main View */}
<Box
style={{
width: sidebarsVisible
? "calc(100vw - 220px - 380px)"
: "100vw",
marginLeft: sidebarsVisible ? 220 : 0,
marginRight: sidebarsVisible ? 380 : 0,
position: "relative", // <-- important for absolute overlay
flex: 1,
height: "100vh",
minWidth:"20rem",
position: "relative",
display: "flex",
flexDirection: "column",
transition: "all 0.3s",
background: colorScheme === "dark" ? theme.colors.dark[6] : "#f8f9fa",
}}
>
{/* Overlayed View Switcher */}
@@ -254,21 +277,22 @@ export default function HomePage() {
display: "flex",
justifyContent: "center",
zIndex: 30,
pointerEvents: "none",
}}
>
<div style={{ pointerEvents: "auto" }}>
<SegmentedControl
data={VIEW_OPTIONS}
value={currentView}
onChange={setCurrentView}
color="blue"
radius="xl"
size="md"
fullWidth
/>
<SegmentedControl
data={VIEW_OPTIONS}
value={currentView}
onChange={setCurrentView}
color="blue"
radius="xl"
size="md"
fullWidth
/>
</div>
</div>
{/* Main content area with matching Paper */}
{/* Main content area */}
<Paper
radius="0 0 xl xl"
shadow="sm"
@@ -316,35 +340,35 @@ export default function HomePage() {
</Box>
</Paper>
</Box>
{/* Right: Tool Interaction */}
{sidebarsVisible && (
<Box
style={{
width: 380,
borderLeft: "1px solid #e9ecef",
minWidth: 260,
maxWidth: 400,
width: "22vw",
height: "100vh",
borderLeft: `1px solid ${colorScheme === "dark" ? theme.colors.dark[4] : "#e9ecef"}`,
background: colorScheme === "dark" ? theme.colors.dark[7] : "#fff",
padding: 24,
gap: 16,
position: "fixed",
right: 0,
top: 0,
bottom: 0,
zIndex: 100,
display: "flex",
flexDirection: "column",
}}
>
{selectedTool && selectedTool.component && (
<>
{renderTool()}
</>
)}
{selectedTool && selectedTool.component && renderTool()}
</Box>
)}
{/* Sidebar toggle button */}
<Button
variant="light"
color="blue"
size="xs"
style={{ position: "absolute", top: 16, right: 16, zIndex: 200 }}
onClick={() => setSidebarsVisible(v => !v)}
style={{ position: "fixed", top: 16, right: 16, zIndex: 200 }}
onClick={() => setSidebarsVisible((v) => !v)}
>
{sidebarsVisible ? "Hide Sidebars" : "Show Sidebars"}
</Button>
frontend/src/vite.config.ts
+6
View File
@@ -0,0 +1,6 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});