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>

src/stories/components/Button.stories.tsx

@@ -0,0 +1,97 @@
+import { Button } from 'src/views/components/common/Button/Button';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Common/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  args: {
+    children: 'Button',
+  },
+  argTypes: {
+    children: { control: 'text' },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {},
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Grid: Story = {
+  render: props => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' />
+        <Button {...props} type='secondary' />
+        <Button {...props} type='tertiary' />
+        <Button {...props} type='danger' />
+        <Button {...props} type='warning' />
+        <Button {...props} type='success' />
+        <Button {...props} type='info' />
+      </div>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' disabled />
+        <Button {...props} type='secondary' disabled />
+        <Button {...props} type='tertiary' disabled />
+        <Button {...props} type='danger' disabled />
+        <Button {...props} type='warning' disabled />
+        <Button {...props} type='success' disabled />
+        <Button {...props} type='info' disabled />
+      </div>
+    </div>
+  ),
+};
+
+
+// TODO: Actually show the buttons as they appear in the design
+export const CourseButtons: Story = {
+  args: {
+    children: 'Add Course',
+  },
+  render: props => (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' />
+        <Button {...props} type='secondary' />
+        <Button {...props} type='tertiary' />
+        <Button {...props} type='danger' />
+        <Button {...props} type='warning' />
+        <Button {...props} type='success' />
+        <Button {...props} type='info' />
+      </div>
+      <div style={{ display: 'flex' }}>
+        <Button {...props} type='primary' disabled />
+        <Button {...props} type='secondary' disabled />
+        <Button {...props} type='tertiary' disabled />
+        <Button {...props} type='danger' disabled />
+        <Button {...props} type='warning' disabled />
+        <Button {...props} type='success' disabled />
+        <Button {...props} type='info' disabled />
+      </div>
+    </div>
+  ),
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
+    },
+  },
+};

src/stories/components/Card.stories.tsx

@@ -0,0 +1,23 @@
+import Card from 'src/views/components/common/Card/Card';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Common/Card',
+  component: Card,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  args: {
+    children: <div>Hello</div>,
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Divider.stories.ts

@@ -0,0 +1,18 @@
+import Divider from 'src/views/components/common/Divider/Divider';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Divider',
+  component: Divider,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Link.stories.ts

@@ -0,0 +1,24 @@
+import Link from 'src/views/components/common/Link/Link';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+  args: {
+    children: 'Link',
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/Spinner.stories.ts

@@ -0,0 +1,14 @@
+import Spinner from 'src/views/components/common/Spinner/Spinner';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/Spinner',
+  component: Spinner,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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 }),
+  },
+};