-
+
diff --git a/src/stories/components/CalendarBottomBar.stories.tsx b/src/stories/components/CalendarBottomBar.stories.tsx
new file mode 100644
index 00000000..a1f1c5c7
--- /dev/null
+++ b/src/stories/components/CalendarBottomBar.stories.tsx
@@ -0,0 +1,101 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Course, Status } from '@shared/types/Course';
+import Instructor from '@shared/types/Instructor';
+import { CalendarBottomBar } from '@views/components/common/CalendarBottomBar/CalendarBottomBar';
+import { getCourseColors } from '../../shared/util/colors';
+
+const exampleGovCourse: Course = new Course({
+ courseName: 'Nope',
+ creditHours: 3,
+ department: 'GOV',
+ description: ['nah', 'aint typing this', 'corndog'],
+ flags: ['no flag for you >:)'],
+ fullName: 'GOV 312L Something something',
+ instructionMode: 'Online',
+ instructors: [
+ new Instructor({
+ firstName: 'Bevo',
+ lastName: 'Barrymore',
+ fullName: 'Bevo Barrymore',
+ }),
+ ],
+ isReserved: false,
+ number: '312L',
+ schedule: {
+ meetings: [],
+ },
+ semester: {
+ code: '12345',
+ season: 'Spring',
+ year: 2024,
+ },
+ status: Status.OPEN,
+ uniqueId: 12345,
+ url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+const examplePsyCourse: Course = new Course({
+ courseName: 'Nope Again',
+ creditHours: 3,
+ department: 'PSY',
+ description: ['nah', 'aint typing this', 'corndog'],
+ flags: ['no flag for you >:)'],
+ fullName: 'PSY 317L Yada yada',
+ instructionMode: 'Online',
+ instructors: [
+ new Instructor({
+ firstName: 'Bevo',
+ lastName: 'Etz',
+ fullName: 'Bevo Etz',
+ }),
+ ],
+ isReserved: false,
+ number: '317L',
+ schedule: {
+ meetings: [],
+ },
+ semester: {
+ code: '12346',
+ season: 'Spring',
+ year: 2024,
+ },
+ status: Status.CLOSED,
+ uniqueId: 12346,
+ url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+const meta = {
+ title: 'Components/Common/CalendarBottomBar',
+ component: CalendarBottomBar,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {},
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ courses: [
+ {
+ colors: getCourseColors('pink', 200),
+ courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0].lastName}`,
+ status: exampleGovCourse.status,
+ },
+ {
+ colors: getCourseColors('slate', 500),
+ courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0].lastName}`,
+ status: examplePsyCourse.status,
+ },
+ ],
+ },
+ render: props => (
+
+
+ ),
+};
diff --git a/src/stories/components/CalendarCourseCell.stories.tsx b/src/stories/components/CalendarCourseCell.stories.tsx
index 647a766d..61cbdd33 100644
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -1,10 +1,9 @@
+import { Course, Status } from '@shared/types/Course';
+import { getCourseColors } from '@shared/util/colors';
import { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+import { exampleCourse } from './PopupCourseBlock.stories';
const meta = {
title: 'Components/Common/CalendarCourseCell',
@@ -14,54 +13,102 @@ const meta = {
},
tags: ['autodocs'],
argTypes: {
- course: { control: 'object' },
- meetingIdx: { control: 'number' },
- color: { control: 'color' },
+ courseDeptAndInstr: { control: { type: 'text' } },
+ className: { control: { type: 'text' } },
+ status: { control: { type: 'select', options: Object.values(Status) } },
+ timeAndLocation: { control: { type: 'text' } },
+ colors: { control: { type: 'object' } },
},
render: (args: any) => (
-
+
;
export default meta;
type Story = StoryObj;
-export const Default: Story = {
- args: {
- course: new Course({
- uniqueId: 123,
- number: '311C',
- fullName: "311C - Bevo's Default Course",
- courseName: "Bevo's Default Course",
- department: 'BVO',
- creditHours: 3,
- status: Status.WAITLISTED,
- instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
- isReserved: false,
- url: '',
- flags: [],
- schedule: new CourseSchedule({
- meetings: [
- new CourseMeeting({
- days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
- startTime: 480,
- endTime: 570,
- location: {
- building: 'UTC',
- room: '123',
- },
- }),
- ],
- }),
- instructionMode: 'In Person',
- semester: {
- year: 2024,
- season: 'Spring',
- },
- }),
- meetingIdx: 0,
- color: 'red',
- },
+export const Default: Story = {};
+
+export const Variants: Story = {
+ render: props => (
+ ;
-
+ argTypes: {
+ saturdayClass: { control: 'boolean' },
+ },
+} satisfies Meta;
export default meta;
+
+const testData: CalendarGridCourse[] = [
+ {
+ calendarGridPoint: {
+ dayIndex: 0,
+ startIndex: 1,
+ endIndex: 2,
+ },
+ componentProps: {
+ courseDeptAndInstr: 'Course 1',
+ timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
+ status: Status.OPEN,
+ colors: getCourseColors('emerald', 500),
+ },
+ },
+ {
+ calendarGridPoint: {
+ dayIndex: 1,
+ startIndex: 2,
+ endIndex: 3,
+ },
+ componentProps: {
+ courseDeptAndInstr: 'Course 2',
+ timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+ status: Status.CLOSED,
+ colors: getCourseColors('emerald', 500),
+ },
+ },
+ // add more data as needed
+];
+
type Story = StoryObj;
-export const Default: Story = {};
\ No newline at end of file
+export const Default: Story = {
+ args: {
+ saturdayClass: true,
+ courseCells: testData,
+ },
+};
\ No newline at end of file
diff --git a/src/stories/components/CalendarGridCell.stories.tsx b/src/stories/components/CalendarGridCell.stories.tsx
new file mode 100644
index 00000000..20ac21d7
--- /dev/null
+++ b/src/stories/components/CalendarGridCell.stories.tsx
@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import CalendarCell from '@views/components/common/CalendarGridCell/CalendarGridCell';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+ title: 'Components/Common/CalendarGridCell',
+ component: CalendarCell,
+ parameters: {
+ // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+ layout: 'centered',
+ tags: ['autodocs'],
+ }
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
\ No newline at end of file
diff --git a/src/stories/components/CalendarHeader.stories.tsx b/src/stories/components/CalendarHeader.stories.tsx
new file mode 100644
index 00000000..047d8694
--- /dev/null
+++ b/src/stories/components/CalendarHeader.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+
+const meta = {
+ title: 'Components/Common/CalendarHeader',
+ component: CalendarHeader,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/components/CalendarSchedules.stories.tsx b/src/stories/components/CalendarSchedules.stories.tsx
new file mode 100644
index 00000000..0dd60e2f
--- /dev/null
+++ b/src/stories/components/CalendarSchedules.stories.tsx
@@ -0,0 +1,146 @@
+import { Course, Status } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CourseSchedule } from 'src/shared/types/CourseSchedule';
+import Instructor from 'src/shared/types/Instructor';
+import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
+
+const meta = {
+ title: 'Components/Common/CalendarSchedules',
+ component: CalendarSchedules,
+ parameters: {
+ layout: 'centered',
+ tags: ['autodocs'],
+ },
+ argTypes: {
+ dummySchedules: { control: 'object' },
+ dummyActiveIndex: { control: 'number' },
+
+ },
+ render: (args: any) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+const schedules = [
+ new UserSchedule({
+ courses: [
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Fall',
+ },
+ }),
+ ],
+ name: 'Main Schedule',
+ hours: 0, // Add the missing 'hours' property
+ }),
+ new UserSchedule({
+ courses: [
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Spring',
+ },
+ }),
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Fall',
+ },
+ }),
+ ],
+ name: 'Backup #3',
+ hours: 0, // Add the missing 'hours' property
+ }),
+];
+
+export const Default: Story = {
+ args: {
+ dummySchedules: schedules,
+ dummyActiveIndex: 0,
+
+ },
+};
diff --git a/src/stories/components/ConflictsWithWarning.stories.tsx b/src/stories/components/ConflictsWithWarning.stories.tsx
index f1f9855a..d81706a7 100644
--- a/src/stories/components/ConflictsWithWarning.stories.tsx
+++ b/src/stories/components/ConflictsWithWarning.stories.tsx
@@ -1,5 +1,96 @@
import { Meta, StoryObj } from '@storybook/react';
import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+import { Course, Status } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import Instructor from 'src/shared/types/Instructor';
+
+export const ExampleCourse: Course = new Course({
+ courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
+ creditHours: 3,
+ department: 'C S',
+ description: [
+ 'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
+ 'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
+ 'May be counted toward the Quantitative Reasoning flag requirement.',
+ 'Designed to accommodate 100 or more students.',
+ 'Taught as a Web-based course.',
+ ],
+ flags: ['Quantitative Reasoning'],
+ fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
+ instructionMode: 'Online',
+ instructors: [
+ new Instructor({
+ firstName: 'Bevo',
+ lastName: 'Bevo',
+ fullName: 'Bevo Bevo',
+ }),
+ ],
+ isReserved: false,
+ number: '303E',
+ schedule: {
+ meetings: [
+ new CourseMeeting({
+ days: ['Tuesday', 'Thursday'],
+ endTime: 660,
+ startTime: 570,
+ }),
+ ],
+ },
+ semester: {
+ code: '12345',
+ season: 'Spring',
+ year: 2024,
+ },
+ status: Status.WAITLISTED,
+ uniqueId: 12345,
+ url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+export const ExampleCourse2: Course = new Course({
+ courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
+ creditHours: 3,
+ department: 'C S',
+ description: [
+ 'Restricted to computer science majors.',
+ 'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
+ 'Computer Science 439 and 439H may not both be counted.',
+ 'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
+ 'May be counted toward the Independent Inquiry flag requirement.',
+ ],
+ flags: ['Independent Inquiry'],
+ fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
+ instructionMode: 'In Person',
+ instructors: [
+ new Instructor({
+ firstName: 'Allison',
+ lastName: 'Norman',
+ fullName: 'Allison Norman',
+ }),
+ ],
+ isReserved: false,
+ number: '439',
+ schedule: {
+ meetings: [
+ new CourseMeeting({
+ days: ['Tuesday', 'Thursday'],
+ startTime: 930,
+ endTime: 1050,
+ }),
+ new CourseMeeting({
+ days: ['Friday'],
+ startTime: 600,
+ endTime: 720,
+ }),
+ ],
+ },
+ semester: {
+ code: '12345',
+ season: 'Spring',
+ year: 2024,
+ },
+ status: Status.WAITLISTED,
+ uniqueId: 67890,
+ url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
const meta = {
title: 'Components/Common/ConflictsWithWarning',
@@ -9,8 +100,10 @@ const meta = {
},
tags: ['autodocs'],
argTypes: {
- ConflictingCourse: { control: 'string' },
- SectionNumber: { control: 'string' },
+ conflicts: { control: 'object' },
+ },
+ args: {
+ conflicts: [ExampleCourse, ExampleCourse2],
},
} satisfies Meta;
export default meta;
@@ -19,7 +112,6 @@ type Story = StoryObj;
export const Default: Story = {
args: {
- ConflictingCourse: 'BVO 311C',
- SectionNumber: '47280',
+ conflicts: [ExampleCourse, ExampleCourse2],
},
-};
\ No newline at end of file
+};
diff --git a/src/stories/components/Dropdown.stories.tsx b/src/stories/components/Dropdown.stories.tsx
new file mode 100644
index 00000000..ba9704a4
--- /dev/null
+++ b/src/stories/components/Dropdown.stories.tsx
@@ -0,0 +1,157 @@
+import { Course, Status } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Serialized } from 'chrome-extension-toolkit';
+import React from 'react';
+import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CourseSchedule } from 'src/shared/types/CourseSchedule';
+import Instructor from 'src/shared/types/Instructor';
+import Dropdown from 'src/views/components/common/Dropdown/Dropdown';
+import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
+
+const meta: Meta = {
+ title: 'Components/Common/Dropdown',
+ component: Dropdown,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+ argTypes: {
+ dummySchedules: { control: 'object' },
+ dummyActiveIndex: { control: 'number' },
+ scheduleComponents: { control: 'object' },
+ },
+ render: (args: any) => (
+ ;
+export default meta;
+
+type Story = StoryObj;
+
+const schedules = [
+ new UserSchedule({
+ courses: [
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Fall',
+ },
+ }),
+ ],
+ name: 'Main Schedule',
+ hours: 0,
+ } as Serialized),
+ new UserSchedule({
+ courses: [
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Fall',
+ },
+ }),
+ new Course({
+ uniqueId: 123,
+ number: '311C',
+ fullName: "311C - Bevo's Default Course",
+ courseName: "Bevo's Default Course",
+ department: 'BVO',
+ creditHours: 3,
+ status: Status.WAITLISTED,
+ instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+ isReserved: false,
+ url: '',
+ flags: [],
+ schedule: new CourseSchedule({
+ meetings: [
+ new CourseMeeting({
+ days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+ startTime: 480,
+ endTime: 570,
+ location: {
+ building: 'UTC',
+ room: '123',
+ },
+ }),
+ ],
+ }),
+ instructionMode: 'In Person',
+ semester: {
+ year: 2024,
+ season: 'Fall',
+ },
+ }),
+ ],
+ name: 'Backup #3',
+ hours: 0,
+ } as Serialized),
+];
+
+export const Hidden: Story = {
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=1579-5083&mode=dev',
+ },
+ },
+
+ args: {
+ dummySchedules: schedules,
+ dummyActiveIndex: 0,
+ scheduleComponents: schedules.map((schedule, index) => (
+ ;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/components/List.stories.tsx b/src/stories/components/List.stories.tsx
index 751ea864..99c1e9b3 100644
--- a/src/stories/components/List.stories.tsx
+++ b/src/stories/components/List.stories.tsx
@@ -9,7 +9,7 @@ import { test_colors } from './PopupCourseBlock.stories';
const numberOfCourses = 5;
-const generateCourses = count => {
+export const generateCourses = count => {
const courses = [];
for (let i = 0; i < count; i++) {
@@ -64,7 +64,7 @@ const generateCourses = count => {
const exampleCourses = generateCourses(numberOfCourses);
const generateCourseBlocks = (exampleCourses, colors) =>
exampleCourses.map((course, i) =>
+
+ ),
};
diff --git a/src/stories/components/CalendarGrid.stories.tsx b/src/stories/components/CalendarGrid.stories.tsx
index 6d8861b9..4e5d1ff8 100644
--- a/src/stories/components/CalendarGrid.stories.tsx
+++ b/src/stories/components/CalendarGrid.stories.tsx
@@ -1,19 +1,57 @@
-// Calendar.stories.tsx
-import React from 'react';
-import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import { getCourseColors } from 'src/shared/util/colors';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import { Status } from 'src/shared/types/Course';
const meta = {
- title: 'Components/Common/Calendar',
- component: Calendar,
- parameters: {
- // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
- layout: 'centered',
+ title: 'Components/Common/CalendarGrid',
+ component: CalendarGrid,
+ parameters: {
+ layout: 'centered',
+ },
tags: ['autodocs'],
- }
-} satisfies Meta
+
+ ),
+} satisfies Meta
+
+ ),
+} satisfies Meta
+
{test_colors.map((color, i) => (
;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+
+ },
+};
\ No newline at end of file
diff --git a/src/stories/components/ScheduleListItem.stories.tsx b/src/stories/components/ScheduleListItem.stories.tsx
new file mode 100644
index 00000000..80eb5871
--- /dev/null
+++ b/src/stories/components/ScheduleListItem.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
+
+export default {
+ title: 'Components/Common/ScheduleListItem',
+ component: ScheduleListItem,
+ parameters: {
+ layout: 'centered',
+ tags: ['autodocs'],
+ },
+ argTypes: {
+ active: { control: 'boolean' },
+ name: { control: 'text' },
+ },
+};
+
+export const Default = (args) => ;
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {},
+};
diff --git a/src/stories/injected/CoursePopup.stories.ts b/src/stories/injected/CoursePopup.stories.ts
index df4fa932..83377319 100644
--- a/src/stories/injected/CoursePopup.stories.ts
+++ b/src/stories/injected/CoursePopup.stories.ts
@@ -1,8 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
import { Course, Status } from 'src/shared/types/Course';
import { CourseMeeting } from 'src/shared/types/CourseMeeting';
import { UserSchedule } from 'src/shared/types/UserSchedule';
import CoursePopup from 'src/views/components/injected/CoursePopupOld/CoursePopup';
+import type { Meta, StoryObj } from '@storybook/react';
+import Instructor from 'src/shared/types/Instructor';
const exampleCourse: Course = new Course({
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
@@ -18,7 +19,20 @@ const exampleCourse: Course = new Course({
flags: ['Quantitative Reasoning'],
fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
instructionMode: 'Online',
- instructors: [],
+ instructors: [
+ new Instructor({
+ firstName: 'William',
+ lastName: 'Young',
+ middleInitial: 'D',
+ fullName: 'William D Young',
+ }),
+ new Instructor({
+ firstName: 'William',
+ lastName: 'Young',
+ middleInitial: 'D',
+ fullName: 'William D Young',
+ }),
+ ],
isReserved: false,
number: '303E',
schedule: {
@@ -43,6 +57,7 @@ const exampleCourse: Course = new Course({
const exampleSchedule: UserSchedule = new UserSchedule({
courses: [exampleCourse],
name: 'Example Schedule',
+ hours: 0,
});
const meta = {
@@ -82,6 +97,7 @@ export const Open: Story = {
activeSchedule: new UserSchedule({
courses: [],
name: 'Example Schedule',
+ hours: 0,
}),
},
};
diff --git a/src/views/components/ImportantLinks.tsx b/src/views/components/ImportantLinks.tsx
new file mode 100644
index 00000000..f301a54d
--- /dev/null
+++ b/src/views/components/ImportantLinks.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from './common/Text/Text';
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+
+type Props = {
+ className?: string;
+};
+
+/**
+ * The "Important Links" section of the calendar website
+ * @returns
+ */
+export default function ImportantLinks({ className }: Props) {
+ return (
+
+ Important Links
+
+ Spring Course Schedule
+ Summer Course Schedule
+ Registration Info Sheet
+ Register For Courses
+ Degree Audit
+
+ );
+}
diff --git a/src/views/components/PopupMain.tsx b/src/views/components/PopupMain.tsx
index fa97323d..f831ed77 100644
--- a/src/views/components/PopupMain.tsx
+++ b/src/views/components/PopupMain.tsx
@@ -1,24 +1,99 @@
-import { background } from '@shared/messages';
import React from 'react';
-import useSchedules from '../hooks/useSchedules';
-import { Button } from './common/Button/Button';
+import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
+import { StatusIcon } from '@shared/util/icons';
import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
+import Text from './common/Text/Text';
+import Divider from './common/Divider/Divider';
+import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
+import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
+import { generateCourses } from 'src/stories/components/List.stories';
export default function PopupMain() {
- const [activeSchedule, schedules] = useSchedules();
+ const courses = generateCourses(5);
- // TODO: Add a button to to switch the active schedule
- return (
-
-
-
- );
+ // Manually applying colors for the demonstration
+ const colors = {
+ OPEN: { primaryColor: '#34D399', secondaryColor: '#059669' },
+ CLOSED: { primaryColor: '#818cf8', secondaryColor: '#4f46e5' },
+ WAITLISTED: { primaryColor: '#F59E00', secondaryColor: '#B45309' },
+ CANCELLED: { primaryColor: '#EF4444', secondaryColor: '#b91c1c' },
+ TEMP: { primaryColor: '#fde047', secondaryColor: '#eab308' },
+ };
+
+ const draggableElements = courses.map((course) => (
+
+
+);
}
diff --git a/src/views/components/Settings.tsx b/src/views/components/Settings.tsx
new file mode 100644
index 00000000..b83e4373
--- /dev/null
+++ b/src/views/components/Settings.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+ className?: string;
+};
+
+/**
+ * Component to hold everything for the settings page
+ * @param props className
+ * @returns The content for the settings page
+ */
+export default function Settings({ className }: Props) {
+ return
+
+
+
+
+ 
+
+
+ UT Registration
+ Plus
+
+
+
+
+
+
+ MAIN SCHEDULE:
+
+ {/* Integrate the List component here */}
+
+ 22 HOURS
+ 8 Courses
+
+
+
+
+ WAITLISTED
+
+
+
+
+ CLOSED
+
+
+
+
+ CANCELLED
+
+
+
+
+
+
+ DATA UPDATED ON: 12:00 AM 02/01/2024
+
+ this will be finished laterrrrrrr
;
+}
diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx
index d2be0bd3..689281a2 100644
--- a/src/views/components/common/Button/Button.tsx
+++ b/src/views/components/common/Button/Button.tsx
@@ -1,7 +1,7 @@
import clsx from 'clsx';
import React from 'react';
-import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import type IconComponent from '~icons/material-symbols';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
import Text from '../Text/Text';
interface Props {
@@ -33,28 +33,24 @@ export function Button({
const Icon = icon;
const isIconOnly = !children && !!icon;
const colorHex = getThemeColorHexByName(color);
- const colorRgb = getThemeColorRgbByName(color).join(' ');
+ const colorRgb = getThemeColorRgbByName(color)?.join(' ');
return (