Calendar schedules component (clicking on storybook not working)
This commit is contained in:
Casey Charleston
142
src/stories/components/CalendarSchedules.stories.tsx
Normal file
142
src/stories/components/CalendarSchedules.stories.tsx
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
import { Course, Status } from '@shared/types/Course';
|
||||||
|
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react';
|
||||||
|
import React from 'react';
|
||||||
|
import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
|
||||||
|
import { CourseSchedule } from 'src/shared/types/CourseSchedule';
|
||||||
|
import Instructor from 'src/shared/types/Instructor';
|
||||||
|
import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/Common/CalendarSchedules',
|
||||||
|
component: CalendarSchedules,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
tags: ['autodocs'],
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
dummySchedules: { control: 'object' },
|
||||||
|
dummyActiveIndex: { control: 'number' },
|
||||||
|
},
|
||||||
|
render: (args: any) => (
|
||||||
|
<div>
|
||||||
|
<CalendarSchedules {...args} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
} satisfies Meta<typeof CalendarSchedules>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
const schedules = [
|
||||||
|
new UserSchedule({
|
||||||
|
courses: [
|
||||||
|
new Course({
|
||||||
|
uniqueId: 123,
|
||||||
|
number: '311C',
|
||||||
|
fullName: "311C - Bevo's Default Course",
|
||||||
|
courseName: "Bevo's Default Course",
|
||||||
|
department: 'BVO',
|
||||||
|
creditHours: 3,
|
||||||
|
status: Status.WAITLISTED,
|
||||||
|
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||||
|
isReserved: false,
|
||||||
|
url: '',
|
||||||
|
flags: [],
|
||||||
|
schedule: new CourseSchedule({
|
||||||
|
meetings: [
|
||||||
|
new CourseMeeting({
|
||||||
|
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||||
|
startTime: 480,
|
||||||
|
endTime: 570,
|
||||||
|
location: {
|
||||||
|
building: 'UTC',
|
||||||
|
room: '123',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
instructionMode: 'In Person',
|
||||||
|
semester: {
|
||||||
|
year: 2024,
|
||||||
|
season: 'Fall',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
name: 'Main Schedule',
|
||||||
|
}),
|
||||||
|
new UserSchedule({
|
||||||
|
courses: [
|
||||||
|
new Course({
|
||||||
|
uniqueId: 123,
|
||||||
|
number: '311C',
|
||||||
|
fullName: "311C - Bevo's Default Course",
|
||||||
|
courseName: "Bevo's Default Course",
|
||||||
|
department: 'BVO',
|
||||||
|
creditHours: 3,
|
||||||
|
status: Status.WAITLISTED,
|
||||||
|
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||||
|
isReserved: false,
|
||||||
|
url: '',
|
||||||
|
flags: [],
|
||||||
|
schedule: new CourseSchedule({
|
||||||
|
meetings: [
|
||||||
|
new CourseMeeting({
|
||||||
|
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||||
|
startTime: 480,
|
||||||
|
endTime: 570,
|
||||||
|
location: {
|
||||||
|
building: 'UTC',
|
||||||
|
room: '123',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
instructionMode: 'In Person',
|
||||||
|
semester: {
|
||||||
|
year: 2024,
|
||||||
|
season: 'Spring',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
new Course({
|
||||||
|
uniqueId: 123,
|
||||||
|
number: '311C',
|
||||||
|
fullName: "311C - Bevo's Default Course",
|
||||||
|
courseName: "Bevo's Default Course",
|
||||||
|
department: 'BVO',
|
||||||
|
creditHours: 3,
|
||||||
|
status: Status.WAITLISTED,
|
||||||
|
instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
|
||||||
|
isReserved: false,
|
||||||
|
url: '',
|
||||||
|
flags: [],
|
||||||
|
schedule: new CourseSchedule({
|
||||||
|
meetings: [
|
||||||
|
new CourseMeeting({
|
||||||
|
days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
|
||||||
|
startTime: 480,
|
||||||
|
endTime: 570,
|
||||||
|
location: {
|
||||||
|
building: 'UTC',
|
||||||
|
room: '123',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
instructionMode: 'In Person',
|
||||||
|
semester: {
|
||||||
|
year: 2024,
|
||||||
|
season: 'Fall',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
name: 'Backup #3',
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
args: {
|
||||||
|
dummySchedules: schedules,
|
||||||
|
dummyActiveIndex: 0,
|
||||||
|
},
|
||||||
|
};
|
||||||
36
src/stories/components/ScheduleListItem.stories.tsx
Normal file
36
src/stories/components/ScheduleListItem.stories.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/Common/ScheduleListItem',
|
||||||
|
component: ScheduleListItem,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
tags: ['autodocs'],
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
active: { control: 'boolean' },
|
||||||
|
name: { control: 'text' },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Default = (args) => <ScheduleListItem {...args} />;
|
||||||
|
|
||||||
|
Default.args = {
|
||||||
|
name: 'My Schedule',
|
||||||
|
active: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Active = (args) => <ScheduleListItem {...args} />;
|
||||||
|
|
||||||
|
Active.args = {
|
||||||
|
name: 'My Schedule',
|
||||||
|
active: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Inactive = (args) => <ScheduleListItem {...args} />;
|
||||||
|
|
||||||
|
Inactive.args = {
|
||||||
|
name: 'My Schedule',
|
||||||
|
active: false,
|
||||||
|
};
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import { UserSchedule } from '@shared/types/UserSchedule';
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import AddSchedule from '~icons/material-symbols/add';
|
||||||
|
import List from '../List/List';
|
||||||
|
import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
|
||||||
|
import Text from '../Text/Text';
|
||||||
|
|
||||||
|
export type Props = {
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
dummySchedules?: UserSchedule[];
|
||||||
|
dummyActiveIndex?: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function CalendarSchedules(props: Props) {
|
||||||
|
const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
|
||||||
|
const [schedules, setSchedules] = useState(props.dummySchedules || []);
|
||||||
|
|
||||||
|
let scheduleComponents = schedules.map((schedule, index) => (
|
||||||
|
<div onClick={() => setActiveScheduleIndex(index)}>
|
||||||
|
<ScheduleListItem
|
||||||
|
active={index === activeScheduleIndex}
|
||||||
|
name={schedule.name}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ ...props.style }} className='items-center'>
|
||||||
|
<div className='m0 m-b-2 w-full flex justify-between'>
|
||||||
|
<Text variant='h3'>MY SCHEDULES</Text>
|
||||||
|
<div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
|
||||||
|
<Text variant='h3'>
|
||||||
|
<AddSchedule />
|
||||||
|
</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={0} listWidth={240} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import clsx from 'clsx';
|
||||||
|
import React from 'react';
|
||||||
|
import DropdownDrag from '~icons/material-symbols/drag-indicator';
|
||||||
|
import Text from '../Text/Text';
|
||||||
|
|
||||||
|
|
||||||
|
export type Props = {
|
||||||
|
style?: React.CSSProperties;
|
||||||
|
active?: boolean;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is a reusable dropdown component that can be used to toggle the visiblity of information
|
||||||
|
*/
|
||||||
|
export default function ScheduleListItem(props: Props) {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ ...props.style }} className='items-center'>
|
||||||
|
<li
|
||||||
|
className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'
|
||||||
|
>
|
||||||
|
<div className='group flex justify-center'>
|
||||||
|
<DropdownDrag className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
|
||||||
|
<div className='inline-flex items-center justify-center gap-1.5'>
|
||||||
|
<div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
|
||||||
|
{
|
||||||
|
'scale-0! opacity-0 ease-in-out! duration-200!': !props.active
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Text variant='p'>{props.name}</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user