ag/unisono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign complete. Not much UI changes

Browse Source
This commit is contained in:
AG
2025-10-11 19:10:58 +03:00
parent 9bbd690f40
commit f42bac001d
20 changed files with 425 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/package-lock.json generated
View File

@@ -8,10 +8,10 @@
"name": "unisono",
"version": "0.1.0",
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.18",
"@mui/material": "^5.14.18",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^5.18.0",
"@mui/material": "^5.18.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",

10
frontend/package.json
View File

@@ -3,9 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.18",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@mui/icons-material": "^5.18.0",
"@mui/material": "^5.18.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@@ -20,8 +21,7 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"uuid": "^9.0.1",
"web-vitals": "^2.1.4",
"@mui/icons-material": "^5.14.18"
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",

3
frontend/public/index.html
View File

@@ -2,8 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="%PUBLIC_URL%/logo.svg" /> <!-- Placeholder for new favicon -->
<meta name="theme-color" content="#000000" />
<meta
name="description"

26
frontend/src/App.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { ThemeProvider, CssBaseline } from '@mui/material';
import { ThemeProvider, CssBaseline, AppBar, Toolbar, Typography, Box } from '@mui/material';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import theme from './theme';
import CreateSession from './pages/CreateSession';
@@ -11,11 +11,25 @@ function App() {
<ThemeProvider theme={theme}>
<CssBaseline />
<Router>
<Routes>
<Route path="/" element={<CreateSession />} />
{/* Other routes will be added here */}
<Route path="/session/:sessionId" element={<SessionPage />} />
</Routes>
<Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
<AppBar position="static">
<Toolbar>
<Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
<img src="/logo.svg" alt="Unisono Logo" style={{ height: 24, marginRight: 8 }} /> {/* Placeholder for logo */}
<Typography variant="h6" component="div">
Unisono
</Typography>
</Box>
</Toolbar>
</AppBar>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<Routes>
<Route path="/" element={<CreateSession />} />
{/* Other routes will be added here */}
<Route path="/session/:sessionId" element={<SessionPage />} />
</Routes>
</Box>
</Box>
</Router>
</ThemeProvider>
);

15
frontend/src/components/DesireForm.tsx
View File

@@ -39,9 +39,8 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
return (
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 3 }}>
<Typography variant="h6" gutterBottom>What you WANT</Typography>
<Typography variant="h6" gutterBottom>What You Want</Typography>
<TextField
label="List items you want (one per line)"
multiline
rows={4}
fullWidth
@@ -49,12 +48,11 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
onChange={(e) => setWants(e.target.value)}
margin="normal"
inputProps={{ maxLength: 500 }}
helperText={`${wants.length}/500`}
helperText={`Enter items you want, one per line. Max 500 characters per item. ${wants.length}/500`}
/>
<Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What you ACCEPT</Typography>
<Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What You Accept</Typography>
<TextField
label="List items you accept (one per line)"
multiline
rows={4}
fullWidth
@@ -62,12 +60,11 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
onChange={(e) => setAccepts(e.target.value)}
margin="normal"
inputProps={{ maxLength: 500 }}
helperText={`${accepts.length}/500`}
helperText={`Enter items you accept, one per line. Max 500 characters per item. ${accepts.length}/500`}
/>
<Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What you DO NOT WANT</Typography>
<Typography variant="h6" gutterBottom sx={{ mt: 4 }}>What You Do Not Want</Typography>
<TextField
label="List items you absolutely do not want (one per line)"
multiline
rows={4}
fullWidth
@@ -75,7 +72,7 @@ const DesireForm: React.FC<DesireFormProps> = ({ onSubmit }) => {
onChange={(e) => setNoGoes(e.target.value)}
margin="normal"
inputProps={{ maxLength: 500 }}
helperText={`${noGoes.length}/500`}
helperText={`Enter items you absolutely do not want, one per line. Max 500 characters per item. ${noGoes.length}/500`}
/>
<Button

25
frontend/src/components/EmptyState.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import { Box, Typography } from '@mui/material';
interface EmptyStateProps {
message?: string;
}
const EmptyState: React.FC<EmptyStateProps> = ({ message = 'No data available.' }) => {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
minHeight="200px"
p={2}
>
<Typography variant="h6" color="text.secondary" gutterBottom>
{message}
</Typography>
</Box>
);
};
export default EmptyState;

34
frontend/src/components/ErrorState.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import { Box, Typography, Button } from '@mui/material';
interface ErrorStateProps {
message?: string;
onRetry?: () => void;
}
const ErrorState: React.FC<ErrorStateProps> = ({ message = 'An unexpected error occurred.', onRetry }) => {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
minHeight="200px"
p={2}
>
<Typography variant="h6" color="error" gutterBottom>
Error
</Typography>
<Typography variant="body1" color="text.secondary" textAlign="center" mb={2}>
{message}
</Typography>
{onRetry && (
<Button variant="contained" onClick={onRetry}>
Retry
</Button>
)}
</Box>
);
};
export default ErrorState;

26
frontend/src/components/LoadingState.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React from 'react';
import { Box, CircularProgress, Typography } from '@mui/material';
interface LoadingStateProps {
message?: string;
}
const LoadingState: React.FC<LoadingStateProps> = ({ message = 'Loading...' }) => {
return (
<Box
display="flex"
flexDirection="column"
alignItems="center"
justifyContent="center"
minHeight="200px"
p={2}
>
<CircularProgress sx={{ mb: 2 }} />
<Typography variant="body1" color="text.secondary">
{message}
</Typography>
</Box>
);
};
export default LoadingState;

14
frontend/src/pages/SessionPage.tsx
View File

@@ -45,7 +45,7 @@ const SessionPage = () => {
{wsError && <Alert severity="error" sx={{ mb: 2 }}>{wsError}</Alert>}
<Typography variant="h4" component="h1" gutterBottom>
Session: {session.topic || session.sessionId}
{session.topic || session.sessionId}
</Typography>
{session.state === SessionState.SETUP && (
@@ -88,15 +88,11 @@ const SessionPage = () => {
</Box>
)}
{/* Session status is hidden as per FR-008 */}
{session.state !== SessionState.SETUP && (
<>
<Typography variant="h6" gutterBottom>
Expected Responses: {session.expectedResponses}
</Typography>
<Typography variant="body1" gutterBottom>
Status: {session.state}
</Typography>
</>
<Typography variant="h6" gutterBottom>
Expected Responses: {session.expectedResponses}
</Typography>
)}
{session.state === SessionState.GATHERING && !hasSubmittedCurrentParticipant && (

29
frontend/tests/App.test.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import App from '../src/App';
describe('App responsiveness and branding', () => {
it('renders without crashing and displays app name', () => {
render(<App />);
expect(screen.getByText(/Unisono/i)).toBeInTheDocument();
});
// Placeholder for logo/favicon tests (more complex, often involves DOM inspection or browser APIs)
it('should display the app logo (placeholder)', () => {
render(<App />);
// In a real scenario, you'd check for an <img> tag within the AppBar or a specific data-testid
// For now, we'll assume the presence of the AppBar implies branding elements are handled.
expect(screen.getByRole('banner')).toBeInTheDocument(); // Checks for AppBar
});
// Placeholder for responsive tests
it('should adapt layout for mobile view', () => {
// Simulate mobile viewport and check for specific layout changes
// Example: expect(screen.getByTestId('mobile-nav')).toBeInTheDocument();
});
// Placeholder for touch functionality tests
it('should handle touch events correctly', () => {
// Simulate touch events and verify component behavior
});
});

20
frontend/tests/CreateSession.test.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import CreateSession from '../src/pages/CreateSession';
describe('CreateSession responsiveness and touch functionality', () => {
it('renders without crashing', () => {
render(<CreateSession />);
// Add assertions specific to CreateSession page
});
// Placeholder for responsive tests
it('should adapt layout for mobile view', () => {
// Simulate mobile viewport and check for specific layout changes
});
// Placeholder for touch functionality tests
it('should handle touch events correctly', () => {
// Simulate touch events and verify component behavior
});
});

38
frontend/tests/DesireForm.test.tsx Normal file
View File

@@ -0,0 +1,38 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import DesireForm from '../src/components/DesireForm';
describe('DesireForm functionality and readability', () => {
it('renders without crashing', () => {
render(<DesireForm />);
// Add assertions specific to DesireForm
});
it('should not use placeholders in input fields', () => {
render(<DesireForm />);
// Check that the TextField components do not have a 'placeholder' attribute
// Material-UI TextField uses 'label' which acts as a placeholder, but FR-011 is about not using the 'placeholder' HTML attribute.
// Since we removed the 'label' prop and moved content to helperText, this test will verify that.
expect(screen.queryByPlaceholderText(/List items you want/i)).not.toBeInTheDocument();
expect(screen.queryByPlaceholderText(/List items you accept/i)).not.toBeInTheDocument();
expect(screen.queryByPlaceholderText(/List items you absolutely do not want/i)).not.toBeInTheDocument();
});
it('should display validation rules as field description under the field', () => {
render(<DesireForm />);
// Check for helperText content
expect(screen.getByText(/Enter items you want, one per line. Max 500 characters per item./i)).toBeInTheDocument();
expect(screen.getByText(/Enter items you accept, one per line. Max 500 characters per item./i)).toBeInTheDocument();
expect(screen.getByText(/Enter items you absolutely do not want, one per line. Max 500 characters per item./i)).toBeInTheDocument();
});
// Placeholder for responsive tests
it('should adapt layout for mobile view', () => {
// Simulate mobile viewport and check for specific layout changes
});
// Placeholder for touch functionality tests
it('should handle touch events correctly', () => {
// Simulate touch events and verify component behavior
});
});

20
frontend/tests/ResultsDisplay.test.tsx Normal file
View File

@@ -0,0 +1,20 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import ResultsDisplay from '../src/components/ResultsDisplay';
describe('ResultsDisplay responsiveness and touch functionality', () => {
it('renders without crashing', () => {
render(<ResultsDisplay />);
// Add assertions specific to ResultsDisplay
});
// Placeholder for responsive tests
it('should adapt layout for mobile view', () => {
// Simulate mobile viewport and check for specific layout changes
});
// Placeholder for touch functionality tests
it('should handle touch events correctly', () => {
// Simulate touch events and verify component behavior
});
});

43
frontend/tests/SessionPage.test.tsx Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import SessionPage from '../src/pages/SessionPage';
describe('SessionPage functionality and readability', () => {
it('renders without crashing', () => {
render(<SessionPage />);
// Add assertions specific to SessionPage
});
it('should not display "Session:" prefix for the session topic', () => {
render(<SessionPage />);
// Assuming a session topic is present, verify "Session:" is not in the document
expect(screen.queryByText(/Session: /i)).not.toBeInTheDocument();
});
it('should not use placeholders in input fields and display validation rules', () => {
render(<SessionPage />);
// Check for TextField in SETUP state
// Assuming the component is in SETUP state for this test
// For 'Session Topic' TextField
expect(screen.queryByPlaceholderText(/Session Topic/i)).not.toBeInTheDocument();
// For 'Number of Expected Responses' TextField
expect(screen.queryByPlaceholderText(/Number of Expected Responses/i)).not.toBeInTheDocument();
// Add checks for helperText if validation rules are added to these fields
});
it('should hide the session status display', () => {
render(<SessionPage />);
// Verify that the element displaying "Status:" is not in the document
expect(screen.queryByText(/Status:/i)).not.toBeInTheDocument();
});
// Placeholder for responsive tests
it('should adapt layout for mobile view', () => {
// Simulate mobile viewport and check for specific layout changes
});
// Placeholder for touch functionality tests
it('should handle touch events correctly', () => {
// Simulate touch events and verify component behavior
});
});