4752f5860a
* fix(ui): fixed color switching on list reordering * chore: remove lock file * chore: add back lock file * feat(ui): fix color duplication issue and prevent scrolling beyond parent * feat(ui): add to storybook * fix(ui): remove white background while dragging * chore: remove dnd pangea from package.json * chore: rebuild lock file * chore: remove nested li element issue * fix(ui): allow grabbing cursor while dragging * fix(ui): address chromatic errors * fix(ui): address chromatic errors * fix(ui): address linting issues and pass tests * fix(ui): create hook for modifying the cursor globally * chore: add check for storybook env * chore: add back unused import to AddAllButton * fix: make cursor grabbing hook more explicit * chore: move sortable list item into sortable list file * fix: remove isStorybook prop from ScheduleListItem --------- Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
import { Course, Status } from '@shared/types/Course';
|
|
import { CourseMeeting } from '@shared/types/CourseMeeting';
|
|
import Instructor from '@shared/types/Instructor';
|
|
import { tailwindColorways } from '@shared/util/storybook';
|
|
import type { Meta, StoryObj } from '@storybook/react';
|
|
import PopupCourseBlock from '@views/components/common/PopupCourseBlock';
|
|
import type { BaseItem } from '@views/components/common/SortableList';
|
|
import { SortableList } from '@views/components/common/SortableList';
|
|
import React from 'react';
|
|
|
|
const numberOfCourses = 5;
|
|
|
|
/**
|
|
* Generates an array of courses.
|
|
*
|
|
* @param count - The number of courses to generate.
|
|
* @returns An array of generated courses.
|
|
*/
|
|
const generateCourses = (count: number): Course[] => {
|
|
const courses = [];
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const course = new Course({
|
|
courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
|
|
creditHours: 3,
|
|
department: 'C S',
|
|
scrapedAt: Date.now(),
|
|
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'],
|
|
core: ['Natural Science and Technology, Part I'],
|
|
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 + i, // Make uniqueId different for each course
|
|
url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
|
|
colors: tailwindColorways[i]!,
|
|
});
|
|
|
|
courses.push(course);
|
|
}
|
|
|
|
return courses;
|
|
};
|
|
|
|
const exampleCourses = generateCourses(numberOfCourses);
|
|
|
|
type CourseWithId = Course & BaseItem;
|
|
|
|
const meta = {
|
|
title: 'Components/Common/List',
|
|
component: SortableList,
|
|
parameters: {
|
|
layout: 'centered',
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof SortableList<CourseWithId>>;
|
|
export default meta;
|
|
|
|
type Story = StoryObj<Meta<typeof SortableList<CourseWithId>>>;
|
|
|
|
export const Default: Story = {
|
|
args: {
|
|
draggables: exampleCourses.map(course => ({
|
|
id: course.uniqueId,
|
|
...course,
|
|
getConflicts: course.getConflicts,
|
|
})),
|
|
onChange: () => {},
|
|
renderItem: course => <PopupCourseBlock key={course.id} course={course} colors={course.colors} />,
|
|
},
|
|
render: args => (
|
|
<div className='h-3xl w-3xl transform-none'>
|
|
<SortableList {...args} />
|
|
</div>
|
|
),
|
|
};
|