feat: Storybook for Vite (#52)

* feat: storybook * feat: option to add figma links * refactor: resolve pr comments * chore: fix storybook build --------- Co-authored-by: Sriram Hariharan <sghsri@gmail.com>
2024-01-30 16:43:30 -06:00
parent 0560a01a55
commit 9cc299ced6
14 changed files with 6340 additions and 95 deletions
--- a/src/stories/injected/CoursePopup.stories.ts
+++ b/src/stories/injected/CoursePopup.stories.ts
@@ -0,0 +1,99 @@
+import { Course, Status } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import { UserSchedule } from 'src/shared/types/UserSchedule';
+import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const exampleCourse: Course = new Course({
+  courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
+  creditHours: 3,
+  department: 'C S',
+  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'],
+  fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
+  instructionMode: 'Online',
+  instructors: [],
+  isReserved: false,
+  number: '303E',
+  schedule: {
+    meetings: [
+      new CourseMeeting({
+        days: ['Tuesday', 'Thursday'],
+        endTime: 660,
+        startTime: 570,
+      }),
+    ],
+  },
+  semester: {
+    code: '12345',
+    season: 'Spring',
+    year: 2024,
+  },
+  status: Status.CANCELLED,
+  uniqueId: 12345,
+  url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+const exampleSchedule: UserSchedule = new UserSchedule({
+  courses: [exampleCourse],
+  name: 'Example Schedule',
+});
+
+const meta = {
+  title: 'Components/Injected/CoursePopup',
+  component: CoursePopup,
+  // tags: ['autodocs'],
+  args: {
+    course: exampleCourse,
+    activeSchedule: exampleSchedule,
+  },
+  argTypes: {
+    course: {
+      control: {
+        type: 'other',
+      },
+    },
+    activeSchedule: {
+      control: {
+        type: 'other',
+      },
+    },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
+    },
+  },
+} satisfies Meta<typeof CoursePopup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {
+  args: {
+    course: new Course({ ...exampleCourse, status: Status.OPEN }),
+    activeSchedule: new UserSchedule({
+      courses: [],
+      name: 'Example Schedule',
+    }),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    course: new Course({ ...exampleCourse, status: Status.CLOSED }),
+  },
+};
+
+export const Cancelled: Story = {
+  args: {
+    course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
+  },
+};