Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bitttttten/storybook-mock-date-decorator
Mock and freeze the dates in your stories.
https://github.com/bitttttten/storybook-mock-date-decorator
date datetime mock mockdate react storybook storybook-addon storybook-addons storybook-ui storybookjs
Last synced: 15 days ago
JSON representation
Mock and freeze the dates in your stories.
- Host: GitHub
- URL: https://github.com/bitttttten/storybook-mock-date-decorator
- Owner: bitttttten
- Created: 2022-03-02T19:35:06.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-28T09:58:50.000Z (7 months ago)
- Last Synced: 2025-01-16T23:05:30.177Z (23 days ago)
- Topics: date, datetime, mock, mockdate, react, storybook, storybook-addon, storybook-addons, storybook-ui, storybookjs
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/storybook-mock-date-decorator
- Size: 68.4 KB
- Stars: 19
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
✨⏰🥶 storybook-mock-date-decorator 🥶⏰✨
to help freeze time or mock dates in your stories
[](https://github.com/prettier/prettier)
[](https://github.com/bitttttten/storybook-mock-date-decorator/releases)
[](https://github.com/bitttttten/storybook-mock-date-decorator/compare/v2.0.5...main)
[](https://www.npmjs.com/package/storybook-mock-date-decorator)
## Install
```sh
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](https://storybook.js.org/basics/writing-stories/) if you are on a different version or a new one has come out since the last update.
### Storybook 8
```js
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;
```
```js
// 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
```js
// .storybook/preview.js
import { mockDateDecorator } from "storybook-mock-date-decorator/legacy";
export let decorators = [mockDateDecorator];
```
### Storybook 6
```js
// .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:
```js
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:
```js
import { Meta } from "@storybook/react"
import { YourComponent } from "./your-component"
export default {
title: "YourComponent",
component: YourComponent,
} as Meta
export function Default() {
return
hello world at {new Date().toLocaleString()}
}
export function WithMockedDate() {
return
hello world! with mocked date of March 10th at {new Date().toLocaleString()}
}
WithMockedDate.parameters = {
date: new Date("March 10, 2021 10:00:00"),
}
```