fix(core): storybook stability for date (#6300)

tests/storybook/package.json

@@ -50,6 +50,7 @@
     "serve": "^14.2.1",
     "storybook": "^7.6.17",
     "storybook-dark-mode": "^3.0.3",
+    "storybook-mock-date-decorator": "^1.0.2",
     "wait-on": "^7.2.0"
   },
   "peerDependencies": {

tests/storybook/src/stories/core.stories.tsx

@@ -9,6 +9,7 @@ import {
   reactRouterParameters,
   withRouter,
 } from 'storybook-addon-react-router-v6';
+import { mockDateDecorator } from 'storybook-mock-date-decorator';
 
 const FakeApp = () => {
   const location = useLocation();
@@ -196,7 +197,7 @@ ImportPage.play = async ({ canvasElement }) => {
   });
   await userEvent.click(screen.getByTestId('editor-option-menu-import'));
 };
-ImportPage.decorators = [withRouter];
+ImportPage.decorators = [withRouter, mockDateDecorator];
 ImportPage.parameters = {
   reactRouter: reactRouterParameters({
     routing: reactRouterOutlets(topLevelRoutes),
@@ -204,6 +205,7 @@ ImportPage.parameters = {
       path: '/',
     },
   }),
+  date: new Date('Mon, 25 Mar 2024 08:39:07 GMT'),
 };
 
 export const OpenAppPage: StoryFn = () => {

tests/storybook/src/stories/image-preview-modal.stories.tsx

@@ -1,6 +1,6 @@
 import { BlockSuiteEditor } from '@affine/core/components/blocksuite/block-suite-editor';
 import { ImagePreviewModal } from '@affine/core/components/image-preview';
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 import type { Doc } from '@toeverything/infra';
 import {
   initEmptyPage,
@@ -11,13 +11,14 @@ import {
 } from '@toeverything/infra';
 import { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
+import { mockDateDecorator } from 'storybook-mock-date-decorator';
 
 export default {
   title: 'Component/ImagePreviewModal',
   component: ImagePreviewModal,
 } satisfies Meta;
 
-export const Default = () => {
+export const Default: StoryFn = () => {
   const workspace = useService(Workspace);
   const pageManager = useService(PageManager);
 
@@ -64,7 +65,7 @@ export const Default = () => {
   }, [pageManager, workspace]);
 
   if (!page) {
-    return null;
+    return <div />;
   }
 
   return (
@@ -88,3 +89,8 @@ export const Default = () => {
     </ServiceProviderContext.Provider>
   );
 };
+
+Default.decorators = [mockDateDecorator];
+Default.parameters = {
+  date: new Date('Mon, 25 Mar 2024 08:39:07 GMT'),
+};

yarn.lock

@@ -798,6 +798,7 @@ __metadata:
     storybook: "npm:^7.6.17"
     storybook-addon-react-router-v6: "npm:^2.0.10"
     storybook-dark-mode: "npm:^3.0.3"
+    storybook-mock-date-decorator: "npm:^1.0.2"
     wait-on: "npm:^7.2.0"
   peerDependencies:
     "@blocksuite/blocks": "*"
@@ -27865,6 +27866,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mockdate@npm:^3.0.5":
+  version: 3.0.5
+  resolution: "mockdate@npm:3.0.5"
+  checksum: 10/ff74f43f56a12e1339e838aee623e37b6e4c378173905697f2a006a5c581eea9c71da54fcea76c27e7e744422e49395c668932bf09e67f024841240ffef91fd2
+  languageName: node
+  linkType: hard
+
 "modern-ahocorasick@npm:^1.0.0":
   version: 1.0.1
   resolution: "modern-ahocorasick@npm:1.0.1"
@@ -32896,6 +32904,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-mock-date-decorator@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "storybook-mock-date-decorator@npm:1.0.2"
+  dependencies:
+    mockdate: "npm:^3.0.5"
+  peerDependencies:
+    "@storybook/addons": ">=6"
+  checksum: 10/c8e8b6966b58bd830c4837e6940328b9d32776c216bfcbc9f55bb38c5c192ab511670ff77505577737589bf83a7ad98538da1e62a2aa9c628e42e5998f2f6147
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^7.6.17":
   version: 7.6.17
   resolution: "storybook@npm:7.6.17"