next: Tailwind 4 + Storybook (#1837)

* Upgrade to tailwind 4

* Add storybook (copied from new sveltekit project)

* Removed unplug icons, only was using two icons both deprecated and not supported by storybook

* Updated storybook

* Added stack trace

* WIP: Fixing tests

* Added some real stack traces for stories

* Fixed unit test

* Updated package

* Fixed lock file

* Fixed build warnings.

* Added test cases

* Fixed linting

* Fixed streams page

Author: niemyjski

src/Exceptionless.Web/ClientApp/.gitignore

@@ -1,3 +1,4 @@
+test-results
 node_modules
 
 # Output

src/Exceptionless.Web/ClientApp/.storybook/main.ts

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+    addons: [
+        '@storybook/addon-svelte-csf',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-a11y'
+    ],
+    framework: {
+        name: '@storybook/sveltekit',
+        options: {}
+    },
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)']
+};
+export default config;

src/Exceptionless.Web/ClientApp/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/svelte';
+
+import '../src/app.css';
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    }
+};
+
+export default preview;

src/Exceptionless.Web/ClientApp/.vscode/launch.json

@@ -31,6 +31,14 @@
             "webRoot": "${workspaceFolder}",
             "preLaunchTask": "npm run dev:api"
         },
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Storybook (Edge)",
+            "url": "http://localhost:6006",
+            "webRoot": "${workspaceFolder}",
+            "preLaunchTask": "npm run storybook"
+        },
         {
             "type": "chrome",
             "request": "launch",
@@ -46,6 +54,14 @@
             "url": "http://localhost:5173/next",
             "webRoot": "${workspaceFolder}",
             "preLaunchTask": "npm run dev:api"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Storybook (Chrome)",
+            "url": "http://localhost:6006",
+            "webRoot": "${workspaceFolder}",
+            "preLaunchTask": "npm run storybook"
         }
     ]
 }

src/Exceptionless.Web/ClientApp/.vscode/settings.json

@@ -2,6 +2,7 @@
     "debug.allowBreakpointsEverywhere": true,
     "cSpell.words": [
         "acacode",
+        "autodocs",
         "classvalidator",
         "clsx",
         "cmdk",

src/Exceptionless.Web/ClientApp/.vscode/tasks.json

@@ -122,6 +122,18 @@
             "script": "test:unit",
             "problemMatcher": [],
             "label": "npm run test:unit"
+        },
+        {
+            "type": "npm",
+            "script": "test:e2e",
+            "problemMatcher": [],
+            "label": "npm run test:e2e"
+        },
+        {
+            "type": "npm",
+            "script": "storybook",
+            "problemMatcher": [],
+            "label": "npm run storybook"
         }
     ]
 }

src/Exceptionless.Web/ClientApp/e2e/index.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from '@playwright/test';
+
+test('default route should redirect to login page when unauthorized', async ({ page }) => {
+    await page.goto('/next');
+    await page.waitForURL('/next/login');
+    await expect(page.getByRole('button', { name: 'Login' })).toBeVisible();
+});

src/Exceptionless.Web/ClientApp/eslint.config.js

@@ -1,14 +1,17 @@
-import eslint from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
 import prettier from 'eslint-config-prettier';
 import perfectionist from 'eslint-plugin-perfectionist';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
-import tseslint from 'typescript-eslint';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript-eslint';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-export default tseslint.config(
-    eslint.configs.recommended,
-    ...tseslint.configs.recommended,
+export default ts.config(
+    includeIgnoreFile(gitignorePath),
+    js.configs.recommended,
+    ...ts.configs.recommended,
     ...svelte.configs['flat/recommended'],
     perfectionist.configs['recommended-natural'],
     prettier,
@@ -25,7 +28,7 @@ export default tseslint.config(
         files: ['**/*.svelte'],
         languageOptions: {
             parserOptions: {
-                parser: tseslint.parser
+                parser: ts.parser
             }
         }
     },