安裝

npm i storybook-mock-date-decorator

API

一旦將裝飾器新增到您的 Storybook，您可以在您的 stories 內使用參數名稱 date 來設定日期。

用法

此處的語法適用於每個各自的 Storybook 版本。如果您使用的是不同的版本，或是自上次更新以來有新版本發布，您可能需要查看官方文件。

Storybook 8

import { mockDateDecorator } from "storybook-mock-date-decorator";

/** @type { import('@storybook/react').Preview } */
const preview = {
  decorators: [mockDateDecorator],
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
      },
    },
  },
};

export default preview;

// stories/Button.stories.js

export default {
  title: 'Example/Button',
  component: Button,
  parameters: {
    date: new Date(1999, 10, 24),
  },
};

export const Primary = {
  args: {
    primary: true,
    label: 'Button',
  },
  parameters: {
    date: new Date(2021, 1, 1),
  }
};

Storybook 7

// .storybook/preview.js
import { mockDateDecorator } from "storybook-mock-date-decorator/legacy";

export let decorators = [mockDateDecorator];

Storybook 6

// .storybook/preview.js
import { addDecorator } from "@storybook/react";
import { mockDateDecorator } from "storybook-mock-date-decorator/legacy";

addDecorator(mockDateDecorator);

然後在您的 storybook 內，您可以使用以下程式碼來模擬/凍結元件的所有 stories 的日期

import { Meta } from "@storybook/react"
import { YourComponent } from "./your-component"

export default {
	title: "YourComponent",
	component: YourComponent,
	parameters: {
		date: new Date("March 10, 2021 10:00:00"),
	},
} as Meta

或者，您可以模擬/凍結特定 story 的日期

import { Meta } from "@storybook/react"
import { YourComponent } from "./your-component"

export default {
	title: "YourComponent",
	component: YourComponent,
} as Meta

export function Default() {
    return <div>hello world at {new Date().toLocaleString()}</div>
}

export function WithMockedDate() {
    return <div>hello world! with mocked date of March 10th at {new Date().toLocaleString()}</div>
}
WithMockedDate.parameters = {
    date: new Date("March 10, 2021 10:00:00"),
}