Skip to content

Commit 0fe8e32

Browse files
SamathingamajigSamathingamajig
committed
chore: merge branch 'hackathon' into sgunter/calendar-bottom-bar
2 parents c35054c + e7ba9c5 commit 0fe8e32

26 files changed

+4036
-1049
lines changed

‎package-lock.json

+3,080-522
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"react-window": "^1.8.10",
3131
"sass": "^1.70.0",
3232
"sql.js": "1.10.2",
33+
"styled-components": "^6.1.8",
3334
"uuid": "^9.0.1"
3435
},
3536
"devDependencies": {

‎pnpm-lock.yaml

+90-287
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/assets/icons/cal.svg

+8
Loading

‎src/assets/icons/png.svg

+8
Loading

‎src/stories/components/CalendarBottomBar.stories.tsx

+13-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
33
import { Course, Status } from '@shared/types/Course';
44
import Instructor from '@shared/types/Instructor';
55
import { CalendarBottomBar } from '@views/components/common/CalendarBottomBar/CalendarBottomBar';
6+
import { getCourseColors } from '../../shared/util/colors';
67

78
const exampleGovCourse: Course = new Course({
89
courseName: 'Nope',
@@ -79,7 +80,18 @@ type Story = StoryObj<typeof meta>;
7980

8081
export const Default: Story = {
8182
args: {
82-
courses: [exampleGovCourse, examplePsyCourse],
83+
courses: [
84+
{
85+
colors: getCourseColors('pink', 200),
86+
courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0].lastName}`,
87+
status: exampleGovCourse.status,
88+
},
89+
{
90+
colors: getCourseColors('slate', 500),
91+
courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0].lastName}`,
92+
status: examplePsyCourse.status,
93+
},
94+
],
8395
},
8496
render: props => (
8597
<div className='outline-red outline w-292.5!'>

‎src/stories/components/CalendarCourseCell.stories.tsx

+13-6
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,25 @@ const meta = {
1313
},
1414
tags: ['autodocs'],
1515
argTypes: {
16-
course: { control: 'object' },
17-
meetingIdx: { control: 'number' },
18-
colors: { control: 'object' },
16+
department: { control: { type: 'text' } },
17+
courseNumber: { control: { type: 'text' } },
18+
instructorLastName: { control: { type: 'text' } },
19+
status: { control: { type: 'select', options: Object.values(Status) } },
20+
meetingTime: { control: { type: 'text' } },
21+
colors: { control: { type: 'object' } },
1922
},
2023
render: (args: any) => (
2124
<div className='w-45'>
2225
<CalendarCourseCell {...args} />
2326
</div>
2427
),
2528
args: {
26-
course: exampleCourse,
27-
meetingIdx: 0,
29+
department: exampleCourse.department,
30+
courseNumber: exampleCourse.number,
31+
instructorLastName: exampleCourse.instructors[0].lastName,
32+
status: exampleCourse.status,
33+
meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
34+
2835
colors: getCourseColors('emerald', 500),
2936
},
3037
} satisfies Meta<typeof CalendarCourseCell>;
@@ -36,7 +43,7 @@ export const Default: Story = {};
3643

3744
export const Variants: Story = {
3845
render: props => (
39-
<div className='grid grid-cols-2 h-40 max-w-xl w-90vw gap-x-4 gap-y-2'>
46+
<div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
4047
<CalendarCourseCell
4148
{...props}
4249
course={new Course({ ...exampleCourse, status: Status.OPEN })}

‎src/stories/components/CalendarGrid.stories.tsx

+51-13
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,57 @@
1-
// Calendar.stories.tsx
2-
import React from 'react';
3-
import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
4-
import type { Meta, StoryObj } from '@storybook/react';
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
3+
import { getCourseColors } from 'src/shared/util/colors';
4+
import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
5+
import { Status } from 'src/shared/types/Course';
56

67
const meta = {
7-
title: 'Components/Common/Calendar',
8-
component: Calendar,
9-
parameters: {
10-
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
11-
layout: 'centered',
8+
title: 'Components/Common/CalendarGrid',
9+
component: CalendarGrid,
10+
parameters: {
11+
layout: 'centered',
12+
},
1213
tags: ['autodocs'],
13-
}
14-
} satisfies Meta<typeof Calendar>;
15-
14+
argTypes: {
15+
saturdayClass: { control: 'boolean' },
16+
},
17+
} satisfies Meta<typeof CalendarGrid>;
1618
export default meta;
19+
20+
const testData: CalendarGridCourse[] = [
21+
{
22+
calendarGridPoint: {
23+
dayIndex: 0,
24+
startIndex: 1,
25+
endIndex: 2,
26+
},
27+
componentProps: {
28+
courseDeptAndInstr: 'Course 1',
29+
timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
30+
status: Status.OPEN,
31+
colors: getCourseColors('emerald', 500),
32+
},
33+
},
34+
{
35+
calendarGridPoint: {
36+
dayIndex: 1,
37+
startIndex: 2,
38+
endIndex: 3,
39+
},
40+
componentProps: {
41+
courseDeptAndInstr: 'Course 2',
42+
timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
43+
status: Status.CLOSED,
44+
colors: getCourseColors('emerald', 500),
45+
},
46+
},
47+
// add more data as needed
48+
];
49+
1750
type Story = StoryObj<typeof meta>;
1851

19-
export const Default: Story = {};
52+
export const Default: Story = {
53+
args: {
54+
saturdayClass: true,
55+
courseCells: testData,
56+
},
57+
};

‎src/stories/components/CalendarHeader.stories.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
4+
5+
const meta = {
6+
title: 'Components/CalendarHeader',
7+
component: CalendarHeader,
8+
parameters: {
9+
layout: 'centered',
10+
},
11+
tags: ['autodocs'],
12+
} satisfies Meta<typeof CalendarHeader>;
13+
14+
export default meta;
15+
type Story = StoryObj<typeof meta>;
16+
17+
export const Default: Story = {};

‎src/stories/components/CalendarSchedules.stories.tsx

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import { Course, Status } from '@shared/types/Course';
2+
import { UserSchedule } from '@shared/types/UserSchedule';
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import React from 'react';
5+
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
6+
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
7+
import Instructor from 'src/shared/types/Instructor';
8+
import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
9+
10+
const meta = {
11+
title: 'Components/Common/CalendarSchedules',
12+
component: CalendarSchedules,
13+
parameters: {
14+
layout: 'centered',
15+
tags: ['autodocs'],
16+
},
17+
argTypes: {
18+
dummySchedules: { control: 'object' },
19+
dummyActiveIndex: { control: 'number' },
20+
},
21+
render: (args: any) => (
22+
<div>
23+
<CalendarSchedules {...args} />
24+
</div>
25+
),
26+
} satisfies Meta<typeof CalendarSchedules>;
27+
28+
export default meta;
29+
type Story = StoryObj<typeof meta>;
30+
31+
const schedules = [
32+
new UserSchedule({
33+
courses: [
34+
new Course({
35+
uniqueId: 123,
36+
number: '311C',
37+
fullName: "311C - Bevo's Default Course",
38+
courseName: "Bevo's Default Course",
39+
department: 'BVO',
40+
creditHours: 3,
41+
status: Status.WAITLISTED,
42+
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
43+
isReserved: false,
44+
url: '',
45+
flags: [],
46+
schedule: new CourseSchedule({
47+
meetings: [
48+
new CourseMeeting({
49+
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
50+
startTime: 480,
51+
endTime: 570,
52+
location: {
53+
building: 'UTC',
54+
room: '123',
55+
},
56+
}),
57+
],
58+
}),
59+
instructionMode: 'In Person',
60+
semester: {
61+
year: 2024,
62+
season: 'Fall',
63+
},
64+
}),
65+
],
66+
name: 'Main Schedule',
67+
}),
68+
new UserSchedule({
69+
courses: [
70+
new Course({
71+
uniqueId: 123,
72+
number: '311C',
73+
fullName: "311C - Bevo's Default Course",
74+
courseName: "Bevo's Default Course",
75+
department: 'BVO',
76+
creditHours: 3,
77+
status: Status.WAITLISTED,
78+
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
79+
isReserved: false,
80+
url: '',
81+
flags: [],
82+
schedule: new CourseSchedule({
83+
meetings: [
84+
new CourseMeeting({
85+
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
86+
startTime: 480,
87+
endTime: 570,
88+
location: {
89+
building: 'UTC',
90+
room: '123',
91+
},
92+
}),
93+
],
94+
}),
95+
instructionMode: 'In Person',
96+
semester: {
97+
year: 2024,
98+
season: 'Spring',
99+
},
100+
}),
101+
new Course({
102+
uniqueId: 123,
103+
number: '311C',
104+
fullName: "311C - Bevo's Default Course",
105+
courseName: "Bevo's Default Course",
106+
department: 'BVO',
107+
creditHours: 3,
108+
status: Status.WAITLISTED,
109+
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
110+
isReserved: false,
111+
url: '',
112+
flags: [],
113+
schedule: new CourseSchedule({
114+
meetings: [
115+
new CourseMeeting({
116+
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
117+
startTime: 480,
118+
endTime: 570,
119+
location: {
120+
building: 'UTC',
121+
room: '123',
122+
},
123+
}),
124+
],
125+
}),
126+
instructionMode: 'In Person',
127+
semester: {
128+
year: 2024,
129+
season: 'Fall',
130+
},
131+
}),
132+
],
133+
name: 'Backup #3',
134+
}),
135+
];
136+
137+
export const Default: Story = {
138+
args: {
139+
dummySchedules: schedules,
140+
dummyActiveIndex: 0,
141+
},
142+
};

‎src/stories/components/ScheduleListItem.stories.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
3+
4+
export default {
5+
title: 'Components/Common/ScheduleListItem',
6+
component: ScheduleListItem,
7+
parameters: {
8+
layout: 'centered',
9+
tags: ['autodocs'],
10+
},
11+
argTypes: {
12+
active: { control: 'boolean' },
13+
name: { control: 'text' },
14+
},
15+
};
16+
17+
export const Default = (args) => <ScheduleListItem {...args} />;
18+
19+
Default.args = {
20+
name: 'My Schedule',
21+
active: true,
22+
};
23+
24+
export const Active = (args) => <ScheduleListItem {...args} />;
25+
26+
Active.args = {
27+
name: 'My Schedule',
28+
active: true,
29+
};
30+
31+
export const Inactive = (args) => <ScheduleListItem {...args} />;
32+
33+
Inactive.args = {
34+
name: 'My Schedule',
35+
active: false,
36+
};

‎src/stories/components/Settings.stories.tsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import Settings from 'src/views/components/Settings';
3+
4+
const meta = {
5+
title: 'Components/Common/Settings',
6+
component: Settings,
7+
parameters: {
8+
layout: 'centered',
9+
},
10+
tags: ['autodocs'],
11+
argTypes: {},
12+
} satisfies Meta<typeof Settings>;
13+
export default meta;
14+
15+
type Story = StoryObj<typeof meta>;
16+
17+
export const Default: Story = {
18+
args: {},
19+
};

0 commit comments

Comments
 (0)