Feat: add components flow to create a semester #878
Conversation
Preview Deployment Status✅ Storybook Preview: https://3a40ef8b.uabc-storybook.pages.dev ✅ Frontend Preview: https://ce7a7a82.uabc.pages.dev |
Coverage Report
File Coverage
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment.
Pull Request Overview
This PR implements a multi-step semester creation flow with four modal dialogs that collect semester information through a guided process. The flow progresses from semester naming to date selection for both the semester period and breaks, concluding with a success confirmation.
Key changes include:
- Implementation of four reusable popup components with form validation and user interaction handling
- A main orchestrator component that manages the entire flow state and step progression
- Comprehensive test coverage and Storybook documentation for all components
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/ui/src/components/Generic/index.ts | Exports the new CreateSemesterPopUpFlow component |
| packages/ui/src/components/Generic/CreateSemesterPopUpFlow/* | Core flow component and individual step components with tests and stories |
| packages/shared/src/types/semester.ts | Type definitions for semester popup form values |
| packages/shared/src/schemas/semester.ts | Zod validation schemas for semester popup forms |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| open={open && state.step === 2} | ||
| semesterName={state.semesterName || "Semester"} | ||
| subtitle={`Select the start and end dates for ${state.semesterName || "the semester"} break period`} | ||
| title={"Semester Break" + "\n" + "Start & End"} |
There was a problem hiding this comment.
String concatenation with newline characters should use template literals for better readability. Change to title={\Semester Break\nStart & End`}`.
| title={"Semester Break" + "\n" + "Start & End"} | |
| title={`Semester Break\nStart & End`} |
There was a problem hiding this comment.
I tried this, title={Semester Break\nStart & End}, but when I committed, it says that I should not add curly braces when there is no JFX.
JSX attribute value does not need to be wrapped in curly braces.
There was a problem hiding this comment.
Have you tried
title="Semester Break\nStart & End"
There was a problem hiding this comment.
Try it but it still shows the literal text.
I'll do
{title.replace(/\\n/g, '\n')} in the components and so we could just do this
title="Semester Break\nStart & End"
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Pull Request Overview
Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| textAlign="center" | ||
| whiteSpace="pre-line" | ||
| > | ||
| {title.replace(/\\n/g, "\n")} |
There was a problem hiding this comment.
The string replacement logic title.replace(/\\n/g, \"\n\") should be extracted to a utility function or handled more elegantly. Consider using a proper multiline string approach or a dedicated text formatting utility.
Description
Flow.Recording.mp4
Fixes #805 (issue)
Type of change
How Has This Been Tested?
Checklist before requesting a review