build: update storybook (#214)

* chore: Update updatedAt dates in schedules

Set updatedAt dates to be fixed to '2024-01-01 12:00' for all schedules in
UserScheduleStore.

* build: update storybook

* chore: Removed unnecessary eslint-disable-next-line statements.

.storybook/main.ts

@@ -2,7 +2,13 @@ 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'],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-designs',
+        '@storybook/test',
+        '@chromatic-com/storybook',
+    ],
     framework: {
         name: '@storybook/react-vite',
         options: {

.storybook/preview.tsx

@@ -1,10 +1,10 @@
+import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
 import type { Preview } from '@storybook/react';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 import React from 'react';
 
 const preview: Preview = {
     parameters: {
-        actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
@@ -166,4 +166,13 @@ globalThis.chrome = {
     },
 } as typeof chrome;
 
+// set updatedAt dates to be fixed
+
+UserScheduleStore.get('schedules').then(schedules => {
+    schedules.forEach(schedule => {
+        schedule.updatedAt = new Date('2024-01-01 12:00').getTime();
+    });
+    UserScheduleStore.set('schedules', schedules);
+});
+
 export default preview;

chromatic.config.json

@@ -0,0 +1,5 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:65c5172964f36dcf207985bf",
+  "zip": true
+}

package.json

@@ -35,33 +35,34 @@
         "html-to-image": "^1.11.11",
         "husky": "^9.0.11",
         "nanoid": "^5.0.6",
-        "react": "^18.2.0",
+        "react": "^18.3.1",
-        "react-dom": "^18.2.0",
+        "react-dom": "^18.3.1",
         "sass": "^1.71.1",
         "sql.js": "1.10.2"
     },
     "devDependencies": {
+        "@chromatic-com/storybook": "^1.4.0",
         "@commitlint/cli": "^18.6.1",
         "@commitlint/config-conventional": "^18.6.2",
         "@commitlint/types": "^19.0.3",
         "@crxjs/vite-plugin": "2.0.0-beta.21",
+        "@iconify-json/bi": "^1.1.23",
         "@iconify-json/material-symbols": "^1.1.73",
         "@iconify-json/ri": "^1.1.20",
-        "@iconify-json/bi": "^1.1.23",
+        "@storybook/addon-designs": "^8.0.1",
-        "@storybook/addon-designs": "^7.0.9",
+        "@storybook/addon-essentials": "^8.1.1",
-        "@storybook/addon-essentials": "^7.6.17",
+        "@storybook/addon-links": "^8.1.1",
-        "@storybook/addon-links": "^7.6.17",
+        "@storybook/blocks": "^8.1.1",
-        "@storybook/blocks": "^7.6.17",
+        "@storybook/react": "^8.1.1",
-        "@storybook/react": "^7.6.17",
+        "@storybook/react-vite": "^8.1.1",
-        "@storybook/react-vite": "^7.6.17",
+        "@storybook/test": "^8.1.1",
-        "@storybook/test": "^7.6.17",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
-        "@types/chrome": "^0.0.260",
+        "@types/chrome": "^0.0.268",
-        "@types/node": "^20.11.24",
+        "@types/node": "^20.12.12",
         "@types/prompts": "^2.4.9",
-        "@types/react": "^18.2.61",
+        "@types/react": "^18.3.2",
-        "@types/react-dom": "^18.2.19",
+        "@types/react-dom": "^18.3.0",
         "@types/semver": "^7.5.8",
         "@types/sql.js": "^1.4.9",
         "@typescript-eslint/eslint-plugin": "^6.21.0",
@@ -76,7 +77,7 @@
         "@vitejs/plugin-react-swc": "^3.6.0",
         "@vitest/coverage-v8": "^1.3.1",
         "@vitest/ui": "^1.3.1",
-        "chromatic": "^10.9.6",
+        "chromatic": "^11.3.5",
         "cssnano": "^6.0.5",
         "cssnano-preset-advanced": "^6.0.5",
         "dotenv": "^16.4.5",
@@ -96,12 +97,12 @@
         "eslint-plugin-react-prefer-function-component": "^3.3.0",
         "eslint-plugin-react-refresh": "^0.4.5",
         "eslint-plugin-simple-import-sort": "^12.0.0",
-        "eslint-plugin-storybook": "^0.6.15",
+        "eslint-plugin-storybook": "^0.8.0",
         "path": "^0.12.7",
         "postcss": "^8.4.35",
         "prettier": "^3.2.5",
         "react-dev-utils": "^12.0.1",
-        "storybook": "^7.6.17",
+        "storybook": "^8.1.1",
         "typescript": "^5.4.3",
         "unocss": "^0.58.6",
         "unocss-preset-primitives": "0.0.2-beta.0",

src/stories/components/Dropdown.stories.tsx

@@ -38,23 +38,11 @@ const meta: Meta<typeof ScheduleDropdown> = {
         layout: 'centered',
     },
     tags: ['autodocs'],
-    argTypes: {
-        defaultOpen: {
-            control: {
-                type: 'boolean',
-            },
-        },
-        children: {
-            control: {
-                type: 'node',
-            },
-        },
-    },
     render: (args: ScheduleDropdownProps) => {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
         const [activeSchedule, schedules] = useSchedules();
 
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
         useEffect(() => {
             console.log(activeSchedule);
         }, [activeSchedule]);

src/stories/components/ScheduleListItem.stories.tsx

@@ -12,13 +12,6 @@ const meta = {
     parameters: {
         layout: 'centered',
     },
-    argTypes: {
-        schedule: {
-            control: {
-                type: 'UserSchedule',
-            },
-        },
-    },
     args: {
         schedule: exampleSchedule,
     },
@@ -30,7 +23,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Active: Story = {
     render(args) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
         const [activeSchedule] = useSchedules();
 
         return (

src/stories/components/calendar/CalendarBottomBar.stories.tsx

@@ -117,6 +117,7 @@ export const Default: Story = {
 export const Empty: Story = {
     args: {
         courseCells: [],
+        setCourse: () => {},
     },
     render: props => (
         <div className='outline-red outline w-292.5!'>

src/stories/components/calendar/CalendarGrid.stories.tsx

@@ -135,5 +135,6 @@ export const Default: Story = {
     args: {
         saturdayClass: true,
         courseCells: testData,
+        setCourse: () => {},
     },
 };

src/stories/injected/CourseCatalogInjectedPopup.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
     },
     tags: ['autodocs'],
     render(args) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
+         
         const [isOpen, setIsOpen] = useState(args.open);
 
         return <CourseCatalogInjectedPopup {...args} open={isOpen} onClose={() => setIsOpen(false)} />;