bitttttten/storybook-mock-date-decorator

Mock and freeze the dates in your stories.

✨⏰🥶 storybook-mock-date-decorator 🥶⏰✨

to help freeze time or mock dates in your stories

Install

npm i storybook-mock-date-decorator

API

Once the decorator has been added to your storybook, you can configure the date with the parameter name date inside your stories.

Usage

The syntax here is valid for each respective Storybook version. You may want to check the official docs if you are on a different version or a new one has come out since the last update.

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);

Then inside your storybook, you can use the following code to mock/freeze the date for all stories of a component:

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

Or you can mock/freeze the date for a specific 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"),
}

storybook-mock-date-decorator's Issues

@storybook/preview-api not found

If you are running into this issue, please try and import from the legacy export:

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/react has no member addDecorator

Hi there,

In you documentation, it says to import the react decorator: import { addDecorator } from '@storybook/react';. I get the error @storybook/react has no member addDecorator. I am on storybook version 7.

Thanks!

Types not found

error TS7016: Could not find a declaration file for module 'storybook-mock-date-decorator'. '/some/path/to/app/node_modules/storybook-mock-date-decorator/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/storybook-mock-date-decorator if it exists or add a new declaration (.d.ts) file containing declare module 'storybook-mock-date-decorator';

Maybe it needs a types declaration in package.json?

@storybook/addons does not exist anymore in Storybook v8

Storybook addons is replaced by @storybook/preview-api

`@storybook/addons` issues with Storybook 8 support

Hello @bitttttten, I see #4 fixed some issues, but there are new issues with the release of Storybook 8: It doesn't use @storybook/addons anymore and is contents have been moved to @storybook/preview-api. https://www.npmjs.com/package/@storybook/addons

Incorrect export name in decorator.js

index.js tries to import { decorator } from "./decorator";

but in decorator.js, export const generator = ...

Which is probably why 2.0.1 crashes and burns when you try to run a story using it.

Depends on old version of @storybook/addons

storybook-mock-date-decorator/package.json

Line 14 in 33066fe

"@storybook/addons": "^6.4.19",

While attempting an upgrade to Storybook 7.x, the automigrate/upgrade helper complains:

││   Critical: The following dependencies are duplicated and WILL cause unexpected behavior:                                                  
││ 
││   @storybook/core-events:                                                                                                                   
││   7.6.9, 6.5.16                                                                                                                             
||                                                                                                                                   
││   Attention: The following dependencies are duplicated which might cause unexpected behavior:                                               
││                                                                                                                                            
││   @storybook/channels:                                                                                                                      
││   7.6.9, 6.5.16

Running yarn why indicates this is because of the dependency in this package:

=> Found "@storybook/addons#@storybook/[email protected]"
info This module exists because "_project_#project-name#storybook-mock-date-decorator#@storybook#addons" depends on it.

=> Found "@storybook/addons#@storybook/[email protected]"
info This module exists because "_project_#project-name#storybook-mock-date-decorator#@storybook#addons" depends on it.

Maybe it should instead be a peer-dependency?