refactor(storybook): improve type safety without type assertions

Co-authored-by: Razboy20 <29903962+Razboy20@users.noreply.github.com>

README.md

@@ -216,5 +216,3 @@ Special thanks to the developers and contributors behind these amazing tools and
    <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=Longhorn-Developers/UT-Registration-Plus&type=Date" />
  </picture>
 </a>
-
-

package.json

@@ -142,7 +142,7 @@
         "prettier": "3.6.2",
         "react-dev-utils": "^12.0.1",
         "semantic-release": "^24.2.3",
-        "storybook": "^8.6.0",
+        "storybook": "^8.6.15",
         "typescript": "^5.7.3",
         "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",

src/stories/components/SortableList.stories.tsx

@@ -77,7 +77,7 @@ type CourseWithId = { course: Course } & BaseItem;
 
 const meta = {
     title: 'Components/Common/SortableList',
-    component: SortableList,
+    component: SortableList<CourseWithId>,
     parameters: {
         layout: 'centered',
     },
@@ -85,7 +85,7 @@ const meta = {
 } satisfies Meta<typeof SortableList<CourseWithId>>;
 export default meta;
 
-type Story = StoryObj<Meta<typeof SortableList<CourseWithId>>>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
     args: {
@@ -94,7 +94,9 @@ export const Default: Story = {
             course,
         })),
         onChange: () => {},
-        renderItem: ({ id, course }) => <PopupCourseBlock key={id} course={course} colors={course.colors} />,
+        renderItem: (item: CourseWithId) => (
+            <PopupCourseBlock key={item.id} course={item.course} colors={item.course.colors} />
+        ),
     },
     render: args => (
         <div className='h-3xl w-3xl transform-none'>

src/views/components/calendar/CalendarCourseCell.tsx

@@ -49,7 +49,6 @@ export default function CalendarCourseCell({
 
     const { colors, uniqueId: courseID } = blockData.course;
     const { dayIndex, startIndex } = blockData.calendarGridPoint;
-    const [courseDepartment, courseInstructor] = courseDeptAndInstr.split('–').map(part => part.trim());
 
     let selectedCourse = false;
     let selectedBlock = false;
@@ -132,7 +131,7 @@ export default function CalendarCourseCell({
                         'text-wrap': !timeAndLocation,
                     })}
                 >
-                    {courseDepartment}, {courseID} – {courseInstructor}
+                    {courseDeptAndInstr}
                 </Text>
                 {timeAndLocation && (
                     <Text variant='h3-course' as='p' className='whitespace-pre-line'>