feat: create storybook.ts and move tailwindColorways there

src/shared/util/colors.ts

@@ -56,9 +56,3 @@ export function getCourseColors(colorway: keyof typeof theme.colors, index = 600
         secondaryColor: theme.colors[colorway][index + offset] as string,
     };
 }
-
-export const TestColors = Object.keys(theme.colors)
-    // check that the color is a colorway (is an object)
-    .filter(color => typeof theme.colors[color] === 'object')
-    .slice(0, 17)
-    .map(color => getCourseColors(color as keyof typeof theme.colors));

src/shared/util/storybook.ts

@@ -0,0 +1,9 @@
+import { theme } from 'unocss/preset-mini';
+
+import { getCourseColors } from './colors';
+
+export const tailwindColorways = Object.keys(theme.colors)
+    // check that the color is a colorway (is an object)
+    .filter(color => typeof theme.colors[color] === 'object')
+    .slice(0, 17)
+    .map(color => getCourseColors(color as keyof typeof theme.colors));

src/stories/components/List.stories.tsx

@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import List from '@views/components/common/List/List';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
-
-import { TestColors } from './PopupCourseBlock.stories';
+import { tailwindColorways } from 'src/shared/util/storybook';
 
 const numberOfCourses = 5;
 
@@ -71,7 +70,7 @@ export const GenerateCourses = count => {
 const exampleCourses = GenerateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
     exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, TestColors);
+export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, tailwindColorways);
 
 const meta = {
     title: 'Components/Common/List',

src/stories/components/PopupCourseBlock.stories.tsx

@@ -1,10 +1,11 @@
 import { Course, Status } from '@shared/types/Course';
 import { CourseMeeting } from '@shared/types/CourseMeeting';
 import Instructor from '@shared/types/Instructor';
-import { getCourseColors, TestColors } from '@shared/util/colors';
+import { getCourseColors } from '@shared/util/colors';
 import type { Meta, StoryObj } from '@storybook/react';
 import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 import React from 'react';
+import { tailwindColorways } from 'src/shared/util/storybook';
 
 /**
  * Represents an example course.
@@ -103,7 +104,7 @@ export const Variants: Story = {
 export const AllColors: Story = {
     render: props => (
         <div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
-            {TestColors.map((color, i) => (
+            {tailwindColorways.map((color, i) => (
                 <PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
             ))}
         </div>

src/views/components/PopupMain.tsx

@@ -1,6 +1,5 @@
 import logoImage from '@assets/logo.png'; // Adjust the path as necessary
 import { Status } from '@shared/types/Course';
-import { TestColors } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
 import Divider from '@views/components/common/Divider/Divider';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
@@ -11,6 +10,7 @@ import { handleOpenCalendar } from '@views/components/injected/CourseCatalogInje
 import useSchedules from '@views/hooks/useSchedules';
 import { openTabFromContentScript } from '@views/lib/openNewTabFromContentScript';
 import React from 'react';
+import { tailwindColorways } from 'src/shared/util/storybook';
 
 import CalendarIcon from '~icons/material-symbols/calendar-month';
 import RefreshIcon from '~icons/material-symbols/refresh';
@@ -24,7 +24,7 @@ export default function PopupMain() {
     const [activeSchedule] = useSchedules();
 
     const draggableElements = activeSchedule?.courses.map((course, i) => (
-        <PopupCourseBlock key={course.uniqueId} course={course} colors={TestColors[i]} />
+        <PopupCourseBlock key={course.uniqueId} course={course} colors={tailwindColorways[i]} />
     ));
 
     const handleOpenOptions = async () => {