feat: abhinavchadaga/course-catalog-popup (#128)
* some work * some work on course popup update the stories and create the header component * use chip component in header * complete CourseHeaderAndActions Component added course buttons, using proper subcomponents now. * Change test course to 314 * Add rmp callback * some unocss updates * add course button onclick handlers * add todo for calendar button * Rename CoursePopup Old one to "Old", remove "2" from new one * description stuff done * Modify story to use proper course info * Add Grade Distribution Stuff * Minor tweaks change style in header * Add TODO replace current grade colors with a tailwind palette * Fix syllabi url Remove unused variable and unnecessary args to url * Bunch of renaming * Kinda complete the handlers * change grade distribution colors to match updated figma * change from reducer pattern to state variables, remove chartData from state * add additional story * disabled add when course is not open * use array fill * Some changes with the instructor names * trying to get the CES stuff to work * CES button is working * remove a todo * add actual color for dminus * fix description, start no distribution state * post merge fixes * small fixes * fix: import as type * fix: some better typescript stuff i think * fix: manifest.ts * fix: pr feedback * fix: remove old CoursePopup component * fix: course catalog injected popup story should useScott's 314 class since it actually has data * fix: build error in background.ts: * chore: run eslint autofix on CourseCatalogInjectedPopup.stories.ts * chore: run prettier on CourseCatalogInjectedPopup.stories.ts
This commit is contained in:
Abhinav Chadaga
doprz
@@ -1,111 +1,59 @@
|
||||
/* eslint-disable storybook/story-exports */
|
||||
// import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
// import type { Meta, StoryObj } from '@storybook/react';
|
||||
// import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
|
||||
import type { Course } from '@shared/types/Course';
|
||||
import { Status } from '@shared/types/Course';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import CourseCatalogInjectedPopup from '@views/components/injected/CourseCatalogInjectedPopup/CourseCatalogInjectedPopup';
|
||||
|
||||
// import { exampleCourse } from './mocked';
|
||||
import { bevoCourse, bevoScheule, MikeScottCS314Course, MikeScottCS314Schedule } from './mocked';
|
||||
|
||||
// const exampleSchedule: UserSchedule = new UserSchedule({
|
||||
// courses: [exampleCourse],
|
||||
// name: 'Example Schedule',
|
||||
// hours: 0,
|
||||
// });
|
||||
// TODO (achadaga): import this after
|
||||
// https://github.com/Longhorn-Developers/UT-Registration-Plus/pull/106 is merged
|
||||
// const bevoCourse: Course = new Course({
|
||||
// uniqueId: 47280,
|
||||
// number: '311C',
|
||||
// fullName: "BVO 311C BEVO'S SEMINAR LONGHORN CARE",
|
||||
// courseName: "BEVO'S SEMINAR LONGHORN CARE",
|
||||
// department: 'BVO',
|
||||
// creditHours: 3,
|
||||
// status: Status.OPEN,
|
||||
// instructors: [new Instructor({ fullName: 'BEVO', firstName: '', lastName: 'BEVO', middleInitial: '' })],
|
||||
// isReserved: false,
|
||||
// description: [
|
||||
// 'Restricted to Students in the School of Longhorn Enthusiasts',
|
||||
// 'Immerse yourself in the daily routine of a longhorn—sunrise pasture walks and the best shady spots for a midday siesta. Understand the behavioral science behind our mascot’s stoic demeanor during games.',
|
||||
// 'BVO 311C and 312H may not both be counted.',
|
||||
// 'Prerequisite: Grazing 311 or 311H.',
|
||||
// 'May be counted toward the Independent Inquiry flag requirement. May be counted toward the Writing flag requirement',
|
||||
// 'Offered on the letter-grade basis only.',
|
||||
// ],
|
||||
// schedule: new CourseSchedule({
|
||||
// meetings: [
|
||||
// new CourseMeeting({
|
||||
// days: ['Tuesday', 'Thursday'],
|
||||
// startTime: 480,
|
||||
// endTime: 570,
|
||||
// location: { building: 'UTC', room: '123' },
|
||||
// }),
|
||||
// new CourseMeeting({
|
||||
// days: ['Thursday'],
|
||||
// startTime: 570,
|
||||
// endTime: 630,
|
||||
// location: { building: 'JES', room: '123' },
|
||||
// }),
|
||||
// ],
|
||||
// }),
|
||||
// url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
// flags: ['Independent Inquiry', 'Writing'],
|
||||
// instructionMode: 'In Person',
|
||||
// semester: {
|
||||
// code: '12345',
|
||||
// year: 2024,
|
||||
// season: 'Spring',
|
||||
// },
|
||||
// });
|
||||
const meta = {
|
||||
title: 'Components/Injected/CourseCatalogInjectedPopup',
|
||||
component: CourseCatalogInjectedPopup,
|
||||
args: {
|
||||
onClose: () => {},
|
||||
},
|
||||
argTypes: {
|
||||
course: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
activeSchedule: {
|
||||
control: {
|
||||
type: 'object',
|
||||
},
|
||||
},
|
||||
onClose: {
|
||||
control: {
|
||||
type: 'function',
|
||||
},
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CourseCatalogInjectedPopup>;
|
||||
|
||||
// const meta = {
|
||||
// title: 'Components/Injected/CourseCatalogInjectedPopup',
|
||||
// component: CourseCatalogInjectedPopup,
|
||||
// args: {
|
||||
// course: exampleCourse,
|
||||
// activeSchedule: exampleSchedule,
|
||||
// onClose: () => {},
|
||||
// },
|
||||
// argTypes: {
|
||||
// course: {
|
||||
// control: {
|
||||
// type: 'object',
|
||||
// },
|
||||
// },
|
||||
// activeSchedule: {
|
||||
// control: {
|
||||
// type: 'object',
|
||||
// },
|
||||
// },
|
||||
// onClose: {
|
||||
// control: {
|
||||
// type: 'function',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// } satisfies Meta<typeof CourseCatalogInjectedPopup>;
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
// export default meta;
|
||||
// type Story = StoryObj<typeof meta>;
|
||||
export const OpenCourse: Story = {
|
||||
args: {
|
||||
course: MikeScottCS314Course,
|
||||
activeSchedule: MikeScottCS314Schedule,
|
||||
},
|
||||
};
|
||||
|
||||
// export const OpenCourse: Story = {
|
||||
// args: {
|
||||
// course: exampleCourse,
|
||||
// activeSchedule: exampleSchedule,
|
||||
// onClose: () => {},
|
||||
// },
|
||||
// };
|
||||
export const ClosedCourse: Story = {
|
||||
args: {
|
||||
course: {
|
||||
...MikeScottCS314Course,
|
||||
status: Status.CLOSED,
|
||||
} as Course,
|
||||
activeSchedule: new UserSchedule({ courses: [], name: '', hours: 0 }),
|
||||
},
|
||||
};
|
||||
|
||||
// export const ClosedCourse: Story = {
|
||||
// args: {
|
||||
// course: {
|
||||
// ...exampleCourse,
|
||||
// status: Status.CLOSED,
|
||||
// } satisfies Course,
|
||||
// },
|
||||
// };
|
||||
|
||||
// export const CourseWithNoData: Story = {
|
||||
// args: {
|
||||
// course: bevoCourse,
|
||||
// },
|
||||
// };
|
||||
export default {};
|
||||
export const CourseWithNoData: Story = {
|
||||
args: {
|
||||
course: bevoCourse,
|
||||
activeSchedule: bevoScheule,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,60 +0,0 @@
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
import type { Meta, StoryObj } from '@storybook/react';
|
||||
import CoursePopup from '@views/components/injected/CoursePopupOld/CoursePopup';
|
||||
|
||||
import { exampleCourse, exampleSchedule } from './mocked';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/Injected/CoursePopup',
|
||||
component: CoursePopup,
|
||||
// tags: ['autodocs'],
|
||||
args: {
|
||||
course: exampleCourse,
|
||||
activeSchedule: exampleSchedule,
|
||||
},
|
||||
argTypes: {
|
||||
course: {
|
||||
control: {
|
||||
type: 'other',
|
||||
},
|
||||
},
|
||||
activeSchedule: {
|
||||
control: {
|
||||
type: 'other',
|
||||
},
|
||||
},
|
||||
},
|
||||
parameters: {
|
||||
design: {
|
||||
type: 'figma',
|
||||
url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
|
||||
},
|
||||
},
|
||||
} satisfies Meta<typeof CoursePopup>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Open: Story = {
|
||||
args: {
|
||||
course: new Course({ ...exampleCourse, status: Status.OPEN }),
|
||||
activeSchedule: new UserSchedule({
|
||||
courses: [],
|
||||
name: 'Example Schedule',
|
||||
hours: 0,
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
export const Closed: Story = {
|
||||
args: {
|
||||
course: new Course({ ...exampleCourse, status: Status.CLOSED }),
|
||||
},
|
||||
};
|
||||
|
||||
export const Cancelled: Story = {
|
||||
args: {
|
||||
course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
|
||||
},
|
||||
};
|
||||
@@ -1,5 +1,5 @@
|
||||
import { Course, Status } from '@shared/types/Course';
|
||||
import { CourseMeeting } from '@shared/types/CourseMeeting';
|
||||
import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
|
||||
import Instructor from '@shared/types/Instructor';
|
||||
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||
|
||||
@@ -47,7 +47,7 @@ export const exampleCourse: Course = new Course({
|
||||
season: 'Spring',
|
||||
year: 2024,
|
||||
},
|
||||
status: Status.CANCELLED,
|
||||
status: Status.OPEN,
|
||||
uniqueId: 12345,
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
});
|
||||
@@ -55,5 +55,106 @@ export const exampleCourse: Course = new Course({
|
||||
export const exampleSchedule: UserSchedule = new UserSchedule({
|
||||
courses: [exampleCourse],
|
||||
name: 'Example Schedule',
|
||||
hours: 0,
|
||||
hours: 3,
|
||||
});
|
||||
|
||||
export const bevoCourse: Course = new Course({
|
||||
uniqueId: 47280,
|
||||
number: '311C',
|
||||
fullName: "BVO 311C BEVO'S SEMINAR LONGHORN CARE",
|
||||
courseName: "BEVO'S SEMINAR LONGHORN CARE",
|
||||
department: 'BVO',
|
||||
creditHours: 3,
|
||||
status: Status.OPEN,
|
||||
instructors: [new Instructor({ fullName: 'BEVO', firstName: '', lastName: 'BEVO', middleInitial: '' })],
|
||||
isReserved: false,
|
||||
description: [
|
||||
'Restricted to Students in the School of Longhorn Enthusiasts',
|
||||
'Immerse yourself in the daily routine of a longhorn—sunrise pasture walks and the best shady spots for a midday siesta. Understand the behavioral science behind our mascot’s stoic demeanor during games.',
|
||||
'BVO 311C and 312H may not both be counted.',
|
||||
'Prerequisite: Grazing 311 or 311H.',
|
||||
'May be counted toward the Independent Inquiry flag requirement. May be counted toward the Writing flag requirement',
|
||||
'Offered on the letter-grade basis only.',
|
||||
],
|
||||
schedule: {
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: ['Tuesday', 'Thursday'],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: { building: 'UTC', room: '123' },
|
||||
}),
|
||||
new CourseMeeting({
|
||||
days: ['Thursday'],
|
||||
startTime: 570,
|
||||
endTime: 630,
|
||||
location: { building: 'JES', room: '123' },
|
||||
}),
|
||||
],
|
||||
},
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
||||
flags: ['Independent Inquiry', 'Writing'],
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
code: '12345',
|
||||
year: 2024,
|
||||
season: 'Spring',
|
||||
},
|
||||
});
|
||||
|
||||
export const bevoScheule: UserSchedule = new UserSchedule({
|
||||
courses: [bevoCourse],
|
||||
name: 'Bevo Schedule',
|
||||
hours: 3,
|
||||
});
|
||||
|
||||
export const MikeScottCS314Course: Course = new Course({
|
||||
uniqueId: 50805,
|
||||
number: '314',
|
||||
fullName: 'C S 314 DATA STRUCTURES',
|
||||
courseName: 'DATA STRUCTURES',
|
||||
department: 'C S',
|
||||
creditHours: 3,
|
||||
status: Status.OPEN,
|
||||
instructors: [
|
||||
new Instructor({ fullName: 'SCOTT, MICHAEL', firstName: 'MICHAEL', lastName: 'SCOTT', middleInitial: 'D' }),
|
||||
],
|
||||
isReserved: true,
|
||||
description: [
|
||||
'Second part of a two-part sequence in programming. Introduction to specifications, simple unit testing, and debugging; building and using canonical data structures; algorithm analysis and reasoning techniques such as assertions and invariants.',
|
||||
'Computer Science 314 and 314H may not both be counted.',
|
||||
'BVO 311C and 312H may not both be counted.',
|
||||
'Prerequisite: Computer Science 312 or 312H with a grade of at least C-.',
|
||||
'May be counted toward the Quantitative Reasoning flag requirement.',
|
||||
],
|
||||
schedule: {
|
||||
meetings: [
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.T, DAY_MAP.TH],
|
||||
startTime: 480,
|
||||
endTime: 570,
|
||||
location: { building: 'UTC', room: '123' },
|
||||
}),
|
||||
new CourseMeeting({
|
||||
days: [DAY_MAP.TH],
|
||||
startTime: 570,
|
||||
endTime: 630,
|
||||
location: { building: 'JES', room: '123' },
|
||||
}),
|
||||
],
|
||||
},
|
||||
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/50825/',
|
||||
flags: ['Writing', 'Independent Inquiry'],
|
||||
instructionMode: 'In Person',
|
||||
semester: {
|
||||
code: '12345',
|
||||
year: 2024,
|
||||
season: 'Spring',
|
||||
},
|
||||
});
|
||||
|
||||
export const MikeScottCS314Schedule: UserSchedule = new UserSchedule({
|
||||
courses: [MikeScottCS314Course],
|
||||
name: 'Mike Scott CS314 Schedule',
|
||||
hours: 3,
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user