feat(app): storybook upgrade and husky setup

- storybook upgraded to latest version
- husky pre-commit hook setup to reduce the chances of commits failing remote checks
- removed unnecessary `prepare` script since `build` script is called in `release` script
- fixed warning when running storybook
- replace deprecated `@storybook/addon-styling` package and `@storybook/addon-styling-webpack` and `@storybook/addon-themes` with associated setup

.husky/pre-commit

@@ -0,0 +1,4 @@
+pnpm prettier-check
+pnpm test
+pnpm build
+pnpm build-storybook

.storybook/main.ts

@@ -4,24 +4,50 @@ const config = {
         name: '@storybook/react-webpack5',
         options: {},
     },
+
     stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+
     addons: [
         '@storybook/addon-links',
         '@storybook/addon-essentials',
         '@storybook/addon-interactions',
         '@storybook/addon-docs',
         {
-            name: '@storybook/addon-styling',
+            name: '@storybook/addon-styling-webpack',
+
             options: {
-                postCss: {
-                    implementation: require.resolve('postcss'),
-                },
+                rules: [
+                    {
+                        test: /\.css$/,
+                        sideEffects: true,
+                        use: [
+                            require.resolve('style-loader'),
+                            {
+                                loader: require.resolve('css-loader'),
+                                options: {
+                                    importLoaders: 1,
+                                },
+                            },
+                            {
+                                loader: require.resolve('postcss-loader'),
+                                options: {
+                                    implementation: require.resolve('postcss'),
+                                },
+                            },
+                        ],
+                    },
+                ],
             },
         },
+        '@storybook/addon-themes',
+        '@storybook/addon-webpack5-compiler-babel',
+        '@chromatic-com/storybook',
     ],
+
     core: {
         builder: '@storybook/builder-webpack5',
     },
+
     webpackFinal: async config => {
         // Remove default rules for .md files
         config.module.rules = config.module.rules.filter(
@@ -70,6 +96,18 @@ const config = {
             },
         }
     },
+
+    typescript: {
+        reactDocgen: 'react-docgen-typescript',
+    },
+
+    env: config => ({
+        ...config,
+        GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID!,
+        GOOGLE_API_KEY: process.env.GOOGLE_API_KEY!,
+        GOOGLE_APP_ID: process.env.GOOGLE_APP_ID!,
+        ONEDRIVE_CLIENT_ID: process.env.ONEDRIVE_CLIENT_ID!,
+    }),
 }
 
 export default config

.storybook/preview.ts

@@ -1,16 +1,25 @@
-import type { Preview } from '@storybook/react'
+import { withThemeByClassName } from '@storybook/addon-themes'
+import { Preview, ReactRenderer } from '@storybook/react'
 import '../src/frontend/tailwind.css'
 
 const preview: Preview = {
     parameters: {
-        actions: { argTypesRegex: '^on[A-Z].*' },
         controls: {
             matchers: {
                 color: /(background|color)$/i,
                 date: /Date$/,
             },
         },
     },
+    decorators: [
+        withThemeByClassName<ReactRenderer>({
+            themes: {
+                light: '',
+                dark: 'dark',
+            },
+            defaultTheme: 'dark',
+        }),
+    ],
 }
 
 export default preview

package.json

@@ -65,7 +65,6 @@
         "test:ci": "jest --coverage --ci --maxWorkers=2",
         "lint": "eslint src/",
         "lint:fix": "eslint src/ --fix",
-        "prepare": "pnpm build",
         "size": "size-limit",
         "prettier-check": "prettier --check .",
         "prettier-write": "prettier --write .",
@@ -92,26 +91,30 @@
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
         "@changesets/cli": "^2.26.2",
+        "@chromatic-com/storybook": "^3",
+        "@emotion/is-prop-valid": "^1.3.1",
         "@eslint/compat": "^1.2.5",
         "@eslint/js": "^9.19.0",
         "@rollup/plugin-alias": "^5.1.1",
         "@rollup/plugin-node-resolve": "^15.3.0",
         "@rollup/plugin-replace": "^5.0.5",
         "@size-limit/preset-small-lib": "^10.0.3",
-        "@storybook/addon-docs": "^7.6.20",
-        "@storybook/addon-essentials": "^7.6.20",
-        "@storybook/addon-interactions": "^7.6.20",
-        "@storybook/addon-links": "^7.6.20",
-        "@storybook/addon-styling": "^1.3.7",
-        "@storybook/blocks": "^7.6.20",
-        "@storybook/react": "^7.6.20",
-        "@storybook/react-webpack5": "^7.6.20",
-        "@storybook/testing-library": "^0.2.2",
+        "@storybook/addon-docs": "^8.5.2",
+        "@storybook/addon-essentials": "^8.5.2",
+        "@storybook/addon-interactions": "^8.5.2",
+        "@storybook/addon-links": "^8.5.2",
+        "@storybook/addon-styling-webpack": "^1.0.1",
+        "@storybook/addon-themes": "^8.5.2",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
+        "@storybook/blocks": "^8.5.2",
+        "@storybook/react": "^8.5.2",
+        "@storybook/react-webpack5": "^8.5.2",
+        "@storybook/test": "^8.5.2",
+        "@tailwindcss/container-queries": "^0.1.1",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.0.1",
         "@testing-library/user-event": "^14.5.2",
         "@types/jest": "29.5.11",
-        "@tailwindcss/container-queries": "^0.1.1",
         "@types/node": "^20.10.0",
         "@types/pako": "^2.0.3",
         "@types/react": ">=16.8.0",
@@ -121,6 +124,7 @@
         "@typescript-eslint/parser": "^6.13.0",
         "autoprefixer": "^10.4.16",
         "babel-loader": "^9.1.3",
+        "css-loader": "^7.1.2",
         "eslint": "^9.19.0",
         "eslint-config-prettier": "^10.0.1",
         "eslint-plugin-prettier": "^5.2.3",
@@ -135,6 +139,7 @@
         "jest-environment-jsdom": "29.7.0",
         "lowlight": "1.20.0",
         "postcss": "^8.4.31",
+        "postcss-loader": "^8.1.1",
         "prettier": "3.0.3",
         "prettier-plugin-organize-imports": "^3.2.4",
         "prettier-plugin-tailwindcss": "^0.5.7",
@@ -145,7 +150,8 @@
         "rollup-plugin-analyzer": "^4.0.0",
         "rollup-plugin-postcss": "^4.0.2",
         "size-limit": "^10.0.3",
-        "storybook": "^7.5.3",
+        "storybook": "^8.5.2",
+        "style-loader": "^4.0.0",
         "tailwindcss": "^3.3.5",
         "ts-jest": "29.1.1",
         "tsdx": "^0.14.1",