Get rid of all logs and cleanup

.storybook-vite/preview.tsx

@@ -4,32 +4,30 @@ import { initialize, mswLoader } from 'msw-storybook-addon'
 import * as MockDate from 'mockdate'
 import { initializeDB } from '#lib/db.mock'
 
-initialize({ onUnhandledRequest: 'bypass', quiet: false })
+initialize({ onUnhandledRequest: 'bypass', quiet: true })
 
 const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
-        test: {
-            // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
-            // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
-            dangerouslyIgnoreUnhandledErrors: true,
-        },
-        nextjs: { appDirectory: true },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
-    loaders: [() => {
-    }, mswLoader, () => {
-    }],
-    beforeEach() {
-        // Fixed dates for consistent screenshots
-        MockDate.set('2024-04-18T12:24:02Z')
-        // reset the database to avoid hanging state between stories
-        initializeDB()
+    test: {
+      // This is needed until Next will update to the React 19 beta: https://github.com/vercel/next.js/pull/65058
+      // In the React 19 beta ErrorBoundary errors (such as redirect) are only logged, and not thrown.
+      dangerouslyIgnoreUnhandledErrors: true,
     },
+    nextjs: { appDirectory: true },
+  },
+  loaders: [mswLoader],
+  beforeEach() {
+    // Fixed dates for consistent screenshots
+    MockDate.set('2024-04-18T12:24:02Z')
+    // reset the database to avoid hanging state between stories
+    initializeDB()
+  },
 }
 
 export default preview

.storybook-vite/storybook.setup.ts

@@ -1,26 +1,10 @@
-import { beforeAll, beforeEach } from 'vitest'
+import { beforeAll } from 'vitest'
 import { setProjectAnnotations } from '@storybook/nextjs'
-import * as rendererDocsAnnotations from '@storybook/react/dist/entry-preview-docs.mjs'
 import * as rscAnnotations from '@storybook/react/dist/entry-preview-rsc.mjs'
-import * as addonActionsAnnotations from '@storybook/addon-actions/preview'
-import * as addonInteractionsAnnotations from '@storybook/addon-interactions/preview'
 import * as projectAnnotations from './preview'
-import "./polyfills/promise-with-resolvers";
+// promise with resolveres polyfill
+import '@ungap/with-resolvers'
 
-
-const { cleanup, render: testingLibraryRender } = await import(
-  '@testing-library/react/pure'
-)
-
-beforeEach(cleanup)
-
-const annotations = setProjectAnnotations([
-  rscAnnotations,
-  rendererDocsAnnotations,
-  addonActionsAnnotations,
-  addonInteractionsAnnotations,
-  projectAnnotations,
-  { testingLibraryRender },
-])
+const annotations = setProjectAnnotations([projectAnnotations, rscAnnotations])
 
 beforeAll(annotations.beforeAll!)

.storybook-vite/vitest.config.mts

@@ -11,18 +11,6 @@ export default defineConfig({
     storybookTest({
       storybookScript: 'pnpm run storybook --ci',
     }),
-    {
-      name: 'crypto-polyfill',
-      config(config) {
-        if (!config.test?.browser?.enabled) {
-          return {
-            test: {
-              setupFiles: ['./.storybook-vite/vitest.setup.crypto.ts'],
-            },
-          }
-        }
-      },
-    },
   ],
   publicDir: './public',
   test: {
@@ -36,6 +24,5 @@ export default defineConfig({
       screenshotFailures: false,
     },
     setupFiles: ['./.storybook-vite/storybook.setup.ts'],
-    environment: 'happy-dom',
   },
 })

.storybook/main.ts

@@ -12,9 +12,6 @@ const config: StorybookConfig = {
     name: '@storybook/nextjs',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   features: {
     experimentalRSC: true,
   },

components/note-preview.tsx

@@ -1,22 +1,7 @@
 import React from 'react'
 // @ts-expect-error add types/upgrade dep
 import marked from 'marked'
-// @ts-expect-error add types/upgrade dep
-import sanitizeHtml from 'sanitize-html'
-
-const allowedTags = sanitizeHtml.defaults.allowedTags.concat([
-  'img',
-  'h1',
-  'h2',
-  'h3',
-])
-const allowedAttributes = Object.assign(
-  {},
-  sanitizeHtml.defaults.allowedAttributes,
-  {
-    img: ['alt', 'src'],
-  },
-)
+import { sanitizeHtml } from '#lib/sanitize-html'
 
 export default function NotePreview({
   children,
@@ -28,10 +13,7 @@ export default function NotePreview({
       <div
         className="text-with-markdown"
         dangerouslySetInnerHTML={{
-          __html: sanitizeHtml(marked(children || ''), {
-            allowedTags,
-            allowedAttributes,
-          }),
+          __html: sanitizeHtml(marked(children || '')),
         }}
       />
     </div>

lib/sanitize-html.mock.ts

@@ -0,0 +1,3 @@
+// This module gives a lot of warnings when run in the browser.
+// See https://github.com/apostrophecms/sanitize-html/issues/664
+export const sanitizeHtml = (html: string) => html

lib/sanitize-html.ts

@@ -0,0 +1,22 @@
+import _sanitizeHtml from 'sanitize-html'
+
+const allowedTags = _sanitizeHtml.defaults.allowedTags.concat([
+  'img',
+  'h1',
+  'h2',
+  'h3',
+])
+const allowedAttributes = Object.assign(
+  {},
+  _sanitizeHtml.defaults.allowedAttributes,
+  {
+    img: ['alt', 'src'],
+  },
+)
+
+export const sanitizeHtml = (html: string) => {
+  return _sanitizeHtml(html, {
+    allowedTags,
+    allowedAttributes,
+  })
+}

package.json

@@ -1,5 +1,8 @@
 {
   "private": true,
+  "engines": {
+    "node": ">=20"
+  },
   "imports": {
     "#app/actions": {
       "storybook": "./app/actions.mock.ts",
@@ -13,6 +16,10 @@
       "storybook": "./lib/db.mock.ts",
       "default": "./lib/db.ts"
     },
+    "#lib/sanitize-html": {
+      "storybook": "./lib/sanitize-html.mock.ts",
+      "default": "./lib/sanitize-html.ts"
+    },
     "#*": [
       "./*",
       "./*.ts",
@@ -73,6 +80,8 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/sanitize-html": "^2.11.0",
+    "@ungap/with-resolvers": "^0.1.0",
     "@vitest/browser": "^2.0.4",
     "chromatic": "^11.3.0",
     "concurrently": "^8.2.2",