安装

适用于 Storybook 9.0+

npm i storybook-mock-date-decorator@3 -D

适用于 Storybook 6、7 或 8

npm i storybook-mock-date-decorator@2 -D

注意：如果您正在使用 Storybook 6、7 或 8，您必须使用 /legacy 导入路径。请参阅 v2.x README 以获取完整的用法说明。

API

将装饰器添加到您的 Storybook 后，您可以在故事中通过参数名称 date 配置日期。

用法

Storybook 9

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 中，您可以使用以下代码来模拟/冻结组件所有故事的日期

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

或者您可以模拟/冻结特定故事的日期

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"),
}

版本兼容性

Storybook 版本	包版本	导入路径	文档
9.0+	@3	storybook-mock-date-decorator	本 README
8.x	@2	storybook-mock-date-decorator/legacy	v2.x README
6.x, 7.x	@2	storybook-mock-date-decorator/legacy	v2.x README

重要提示：对于 Storybook 6、7 和 8，您必须使用 /legacy 导入路径，并遵循 v2.x 文档 中的设置说明。