refactor(storybook): improve type safety without type assertions

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

package.json

@@ -35,39 +35,39 @@
         "@dnd-kit/sortable": "^10.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@headlessui/react": "^2.2.0",
-        "@octokit/rest": "^22.0.1",
+        "@octokit/rest": "^21.1.1",
         "@phosphor-icons/react": "^2.1.7",
-        "@sentry/react": "^10.39.0",
+        "@sentry/react": "^8.55.0",
         "@tanstack/react-query": "^5.69.0",
         "@tsparticles/engine": "^3.9.1",
         "@tsparticles/react": "^3.0.0",
         "@tsparticles/slim": "^3.9.1",
         "@unocss/vite": "^0.63.6",
-        "@vitejs/plugin-react": "^5.1.4",
+        "@vitejs/plugin-react": "^4.3.4",
         "clsx": "^2.1.1",
-        "conventional-changelog": "^7.1.1",
+        "conventional-changelog": "^6.0.0",
         "date-fns": "^4.1.0",
-        "highcharts": "^12.5.0",
+        "highcharts": "^11.4.8",
         "highcharts-react-official": "^3.2.1",
         "html-to-image": "^1.11.13",
         "husky": "^9.1.7",
         "kc-dabr-wasm": "^0.1.2",
         "nanoid": "^5.1.2",
-        "react": "^19.2.4",
-        "react-dom": "^19.2.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-loading-skeleton": "^3.5.0",
-        "react-markdown": "^10.1.0",
-        "react-syntax-highlighter": "^16.1.0",
+        "react-markdown": "^9.1.0",
+        "react-syntax-highlighter": "^15.6.1",
         "remark-gfm": "^4.0.1",
         "sass": "^1.85.1",
         "simple-git": "^3.27.0",
         "sql.js": "1.11.0"
     },
     "devDependencies": {
-        "@chromatic-com/storybook": "^5.0.1",
-        "@commitlint/cli": "^20.4.1",
-        "@commitlint/config-conventional": "^20.4.1",
-        "@commitlint/types": "^20.4.0",
+        "@chromatic-com/storybook": "^2.0.2",
+        "@commitlint/cli": "^19.7.1",
+        "@commitlint/config-conventional": "^19.7.1",
+        "@commitlint/types": "^19.5.0",
         "@crxjs/vite-plugin": "2.0.0-beta.21",
         "@iconify-json/bi": "^1.2.2",
         "@iconify-json/ic": "^1.2.2",
@@ -75,81 +75,81 @@
         "@iconify-json/material-symbols": "^1.2.14",
         "@iconify-json/ri": "^1.2.5",
         "@iconify-json/streamline": "^1.2.2",
-        "@semantic-release/exec": "^7.1.0",
-        "@sentry/types": "^10.39.0",
-        "@storybook/addon-designs": "^11.1.2",
+        "@semantic-release/exec": "^6.0.3",
+        "@sentry/types": "^8.55.0",
+        "@storybook/addon-designs": "^8.2.0",
         "@storybook/addon-essentials": "^8.6.0",
-        "@storybook/addon-links": "^10.2.8",
+        "@storybook/addon-links": "^8.6.0",
         "@storybook/blocks": "^8.6.0",
-        "@storybook/react": "^10.2.8",
-        "@storybook/react-vite": "^10.2.8",
+        "@storybook/react": "^8.6.0",
+        "@storybook/react-vite": "^8.6.0",
         "@storybook/test": "^8.6.0",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/chrome": "^0.0.273",
-        "@types/conventional-changelog": "^6.0.1",
+        "@types/conventional-changelog": "^3.1.5",
         "@types/gulp": "^4.0.17",
         "@types/gulp-zip": "^4.0.4",
-        "@types/node": "^25.2.3",
+        "@types/node": "^22.13.5",
         "@types/prompts": "^2.4.9",
-        "@types/react": "^19.2.14",
-        "@types/react-dom": "^19.2.3",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
         "@types/react-syntax-highlighter": "^15.5.13",
         "@types/semantic-release": "^20.0.6",
         "@types/semver": "^7.5.8",
         "@types/sql.js": "^1.4.9",
-        "@typescript-eslint/eslint-plugin": "^8.55.0",
-        "@typescript-eslint/parser": "^8.55.0",
-        "@unocss/eslint-config": "^66.6.0",
-        "@unocss/postcss": "^66.6.0",
-        "@unocss/preset-uno": "^66.6.0",
-        "@unocss/preset-web-fonts": "^66.6.0",
-        "@unocss/reset": "^66.6.0",
-        "@unocss/transformer-directives": "^66.6.0",
-        "@unocss/transformer-variant-group": "^66.6.0",
-        "@vitejs/plugin-react-swc": "^4.2.3",
-        "@vitest/coverage-v8": "^4.0.18",
-        "@vitest/ui": "^4.0.18",
+        "@typescript-eslint/eslint-plugin": "^7.18.0",
+        "@typescript-eslint/parser": "^7.18.0",
+        "@unocss/eslint-config": "^0.63.6",
+        "@unocss/postcss": "^0.63.6",
+        "@unocss/preset-uno": "^0.63.6",
+        "@unocss/preset-web-fonts": "^0.63.6",
+        "@unocss/reset": "^0.63.6",
+        "@unocss/transformer-directives": "^0.63.6",
+        "@unocss/transformer-variant-group": "^0.63.6",
+        "@vitejs/plugin-react-swc": "^3.8.0",
+        "@vitest/coverage-v8": "^2.1.9",
+        "@vitest/ui": "^2.1.9",
         "chalk": "^5.4.1",
-        "chromatic": "^15.1.0",
+        "chromatic": "^11.26.0",
         "cssnano": "^7.0.6",
         "cssnano-preset-advanced": "^7.0.6",
-        "dotenv": "^17.3.1",
-        "es-module-lexer": "^2.0.0",
-        "eslint": "^10.0.0",
+        "dotenv": "^16.4.7",
+        "es-module-lexer": "^1.6.0",
+        "eslint": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^18.0.0",
-        "eslint-config-prettier": "^10.1.8",
-        "eslint-import-resolver-typescript": "^4.4.4",
+        "eslint-config-prettier": "^9.1.0",
+        "eslint-import-resolver-typescript": "^3.8.3",
         "eslint-plugin-import": "^2.31.0",
         "eslint-plugin-import-essentials": "^0.2.1",
-        "eslint-plugin-jsdoc": "^62.5.5",
+        "eslint-plugin-jsdoc": "^50.6.3",
         "eslint-plugin-prettier": "^5.2.3",
         "eslint-plugin-react": "^7.37.4",
-        "eslint-plugin-react-hooks": "^7.0.1",
-        "eslint-plugin-react-prefer-function-component": "^5.0.0",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "eslint-plugin-react-prefer-function-component": "^3.4.0",
         "eslint-plugin-react-refresh": "^0.4.19",
         "eslint-plugin-simple-import-sort": "^12.1.1",
-        "eslint-plugin-storybook": "^10.2.8",
+        "eslint-plugin-storybook": "^0.9.0",
         "eslint-plugin-tsdoc": "^0.3.0",
         "gulp": "^5.0.0",
-        "gulp-execa": "^8.0.1",
+        "gulp-execa": "^7.0.1",
         "gulp-zip": "^6.1.0",
         "jsdom": "^28.0.0",
         "path": "^0.12.7",
         "postcss": "^8.5.3",
         "prettier": "3.6.2",
         "react-dev-utils": "^12.0.1",
-        "semantic-release": "^25.0.3",
-        "storybook": "^10.2.8",
+        "semantic-release": "^24.2.3",
+        "storybook": "^8.6.15",
         "typescript": "^5.7.3",
-        "unocss": "^66.6.0",
+        "unocss": "^0.63.6",
         "unocss-preset-primitives": "0.0.2-beta.1",
-        "unplugin-icons": "^23.0.1",
-        "vite": "^7.3.1",
-        "vite-plugin-inspect": "^11.3.3",
-        "vitest": "^4.0.18"
+        "unplugin-icons": "^0.19.3",
+        "vite": "^5.4.20",
+        "vite-plugin-inspect": "^0.8.9",
+        "vitest": "^2.1.9"
     },
     "engineStrict": true,
     "engines": {

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/CalendarHeader/CalendarHeader.tsx

@@ -1,5 +1,5 @@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
-import { CalendarDots, Export, FileCode, FilePng, FileText, Sidebar } from '@phosphor-icons/react';
+import { CalendarDots, Export, FileCode, FilePng, Sidebar } from '@phosphor-icons/react';
 import styles from '@views/components/calendar/CalendarHeader/CalendarHeader.module.scss';
 import { Button } from '@views/components/common/Button';
 import DialogProvider from '@views/components/common/DialogProvider/DialogProvider';
@@ -11,7 +11,7 @@ import useSchedules from '@views/hooks/useSchedules';
 import clsx from 'clsx';
 import React from 'react';
 
-import { handleExportJson, saveAsCal, saveAsText, saveCalAsPng } from '../utils';
+import { handleExportJson, saveAsCal, saveCalAsPng } from '../utils';
 
 interface CalendarHeaderProps {
     sidebarOpen?: boolean;
@@ -111,18 +111,6 @@ export default function CalendarHeader({ sidebarOpen, onSidebarToggle }: Calenda
                                         Save as .json
                                     </Button>
                                 </MenuItem>
-                                <MenuItem>
-                                    <Button
-                                        className='w-full flex justify-start'
-                                        onClick={saveAsText}
-                                        color='ut-black'
-                                        size='small'
-                                        variant='minimal'
-                                        icon={FileText}
-                                    >
-                                        Save as .txt
-                                    </Button>
-                                </MenuItem>
                                 {/* <MenuItem>
                                     <Button color='ut-black' size='small' variant='minimal' icon={FileTxt}>
                                         Export Unique IDs

src/views/components/calendar/utils.ts

@@ -245,27 +245,6 @@ export const scheduleToIcsString = (schedule: Serialized<UserSchedule>) => {
     return icsString;
 };
 
-/**
- * Returns the provided schedule in a human readable/copyable text format
- * @param schedule - The schedule object
- * @returns
- */
-export const scheduleToText = (schedule: Serialized<UserSchedule>) => {
-    const lines: string[] = [];
-
-    lines.push(`Schedule: ${schedule.name}`);
-    lines.push('');
-
-    for (const c of schedule.courses) {
-        lines.push(c.fullName);
-        lines.push(`${c.creditHours} Credit Hours`);
-        lines.push(`${c.uniqueId}`);
-        lines.push('');
-    }
-
-    return lines.join('\n');
-};
-
 /**
  * Saves the current schedule as a calendar file in the iCalendar format (ICS).
  * Fetches the current active schedule and converts it into an ICS string.
@@ -283,25 +262,6 @@ export const saveAsCal = async () => {
     downloadBlob(icsString, 'CALENDAR', 'schedule.ics');
 };
 
-/**
- * Save current schedule as a plain text file consisting of
- * Course Name - Course ID
- * Course Time
- * Unique Number
- * Line Break
- * Repeat
- */
-export const saveAsText = async () => {
-    const schedule = await getSchedule();
-
-    if (!schedule) {
-        throw new Error('No schedule found');
-    }
-
-    const scheduleText = scheduleToText(schedule);
-    downloadBlob(scheduleText, 'TEXT', 'schedule.txt');
-};
-
 /**
  * Saves current schedule to JSON that can be imported on other devices.
  * @param id - Provided schedule ID to download