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>

.eslintignore

@@ -92,4 +92,5 @@ typings/
 *.svg
 
 config
-.eslintrc.js
+.eslintrc.js
+!.storybook

.eslintrc

@@ -14,10 +14,11 @@
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:react-hooks/recommended",
+        "plugin:storybook/recommended",
         "airbnb-base",
         "airbnb/rules/react",
         "airbnb-typescript",
-        "prettier"
+        "prettier",
     ],
     "plugins": [
         "import",

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-designs'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {
+            builder: {
+                viteConfigPath: '.storybook/vite-storybook.config.ts',
+            },
+        },
+    },
+    docs: {
+        autodocs: 'tag',
+    },
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import ExtensionRoot from 'src/views/components/common/ExtensionRoot/ExtensionRoot';
+import type { Preview } from '@storybook/react';
+import React from 'react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <ExtensionRoot>
+        <Story />
+      </ExtensionRoot>
+    ),
+  ],
+};
+
+export default preview;

.storybook/vite-storybook.config.ts

@@ -0,0 +1,26 @@
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+const root = resolve(__dirname, '../src');
+const pagesDir = resolve(root, 'pages');
+const assetsDir = resolve(root, 'assets');
+const publicDir = resolve(__dirname, '../public');
+
+console.log(root);
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      src: root,
+      '@assets': assetsDir,
+      '@pages': pagesDir,
+      '@public': publicDir,
+      '@shared': resolve(root, 'shared'),
+      '@background': resolve(pagesDir, 'background'),
+      '@views': resolve(root, 'views'),
+    },
+  },
+});

package.json

@@ -12,7 +12,9 @@
         "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
         "preview": "vite preview",
         "devtools": "react-devtools",
-        "preinstall": "npx only-allow pnpm"
+        "preinstall": "npx only-allow pnpm",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
     },
     "dependencies": {
         "@types/sql.js": "^1.4.9",
@@ -30,6 +32,13 @@
     },
     "devDependencies": {
         "@crxjs/vite-plugin": "2.0.0-beta.21",
+        "@storybook/addon-designs": "^7.0.9",
+        "@storybook/addon-essentials": "^7.6.11",
+        "@storybook/addon-links": "^7.6.11",
+        "@storybook/blocks": "^7.6.11",
+        "@storybook/react": "^7.6.11",
+        "@storybook/react-vite": "^7.6.11",
+        "@storybook/test": "^7.6.11",
         "@types/chrome": "^0.0.254",
         "@types/node": "^20.10.5",
         "@types/prompts": "^2.4.9",
@@ -46,21 +55,24 @@
         "es-module-lexer": "^1.4.1",
         "eslint": "^8.56.0",
         "eslint-config-airbnb": "^19.0.4",
+        "eslint-config-airbnb-base": "^15.0.0",
         "eslint-config-airbnb-typescript": "^17.1.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsdoc": "^46.9.1",
-        "eslint-plugin-prettier": "^5.1.1",
+        "eslint-plugin-jsdoc": "^46.10.1",
+        "eslint-plugin-prettier": "^5.1.2",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-prefer-function-component": "^3.3.0",
         "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint-plugin-storybook": "^0.6.15",
         "path": "^0.12.7",
         "postcss": "^8.4.32",
         "prettier": "^3.1.1",
         "react-dev-utils": "^12.0.1",
         "react-devtools": "^4.27.1",
+        "storybook": "^7.6.11",
         "typescript": "^5.3.3",
         "vite": "^5.0.10",
         "vite-plugin-inspect": "^0.8.1"

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

tsconfig.json

@@ -52,6 +52,7 @@
         "src/manifest.ts",
         "package.json",
         ".eslintrc",
-        "postcss.config.cjs"
+        "postcss.config.cjs",
+        ".storybook"
     ]
 }