Skip to content

Commit

Permalink
docs: update readme and version bump to 3.0.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@nutboltu
nutboltu committed Sep 30, 2022
1 parent dd685ec commit 80a7979
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 151 deletions.
172 changes: 22 additions & 150 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,164 +20,36 @@

[![NPM](https://nodei.co/npm/storybook-addon-mock.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/storybook-addon-mock/)

> <h4> 📣 We are working on Version 3.0.0 with a more robust UI and validation. Please stay tuned. The new major version will be released soon!
</h4>

This addon allows you to mock fetch or XMLHttprequest requests in storybook. If your component depends on backend requests, and your backend requests are not ready yet to feed your component, this addon provides mock response to build your component.
This addon allows you to mock fetch or XMLHttprequest requests in [storybook](https://storybook.js.org/).
If your component depends on backend requests, and your backend requests are not ready yet to feed your component,
this addon provides mock response to build your component.

[Live Demo :rocket:](https://nutboltu.github.io/storybook-addon-mock)

## Why we need this
### Purpose

There are few packages those help the developers to mock the backend requests while building components. But those packages aren't integrated properly in storybook and also there's no scope to play with those requests in the storybook. `storybook-addon-mock` provides a dedicated panel in the storybook which helps the developers to update the status and the response on the fly.
There are few packages those help the developers to mock the backend requests while building components.
But those packages aren't integrated properly in storybook and also there's no scope to play with those requests in the storybook.
Mostly, there's no playground to modify the response and see the changes in the storybook.

### Mock data properties
### Highlights

| Property | Description | Required | Default |
| ---------- | :------------------------------------------------------------------------------------------ | :------- | :------ |
| `url` | Supports both **named parameters** (`/:foo/:bar`) and **query parameters**.(`/foo?bar=true`) | Y | - |
| `method` | Supports `GET`, `POST`, `PUT`, `PATCH` and `DELETE` methods. | - | `GET` |
| `status` | All possible HTTP status codes. | - | `200` |
| `response` | JSON format or function. <br/> <br/> Response function is a function that contains request object as a parameter. See the **Custom Response** section for example. | Y | - |
| `delay` | Emulate delayed response time in milliseconds. | - | `0` |
`storybook-addon-mock` provides the following features.

<ul>
<li> You can mock <strong>fetch or XMLHttpRequest</strong>.</li>
<li> A <strong>dedicated panel</strong> where you can see the list of mock requests.</li>
<li> An <strong>on/off button for each request</strong> which can turn off the mock and try the real request.</li>
<li> A <strong>dropdown list of status code</strong> where you can change the status and experience the difference.</li>
<li> A <strong>response JSON object which can be modified in the panel.</strong> You can see the changes straight away in the story.</li>
<li> A <strong>delay option which helps you delaying the response</strong> so that you can test any kind of loading behaviour.</li>
</ul>

> You can change the **status**, **response** and **delay** from the storybook panel on the fly! :rocket:
### Documentation

---
[See the documentation](https://storybook-addon-mock.vercel.app)

## How to use

Install the addon in your project as dev dependencies.

```bash
yarn add -D storybook-addon-mock
```

### Using Storybook 6

Add the decorator in your addons, in `.storybook/main.js`:

```js
module.exports = {
addons: ['storybook-addon-mock/register'],
};
```

Add decorator in the stories.

```js
import React from 'react';
import withMock from 'storybook-addon-mock';
import Component from './Component';

export default {
title: 'Component',
component: Component,
decorators: [withMock],
};

const Template = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.parameters = {
mockData: [
{
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
status: 200,
response: {
data: 'Hello storybook-addon-mock!',
},
},
],
};
```

Thanks to [shilman](https://github.com/storybookjs/storybook/issues/14817) for this solution

### Using older versions of Storybook

Add the register in your `.storybook/addons.js` file

```js
import 'storybook-addon-mock/register';
```

Add `withMock` as a decorator in the stories.

```js
import React from 'react';
import withMock from 'storybook-addon-mock';

storiesOf('Mock Response Story', module)
.addDecorator(withMock)
.add('Story Item', () => <ComponentWithAPICall />, {
mockData: [
{
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
status: 200,
response: {
data: 'Hello storybook-addon-mock!',
},
},
],
});
```

### Custom Response

```js
import React from 'react';
import withMock from 'storybook-addon-mock';
import Component from './Component';

export default {
title: 'Component',
component: Component,
decorators: [withMock],
};

const Template = (args) => <Component {...args} />;

export const Default = Template.bind({});
Default.parameters = {
mockData: [
{
url: 'https://jsonplaceholder.typicode.com/todos/1',
method: 'GET',
status: 200,
response: (request) => {
const {
url,
method,
body,
searchParams,
} = request;

if (searchParams.id == 1) {
return {
data: 'Custom data for id 1',
};
} else if (body.name === 'mock') {
return {
data: 'Custom data for name mock',
}
}
return {
data: 'Default data',
}
},
},
],
};
```

## User guide


[See the documentation - User guide](https://nutboltu.github.io/storybook-addon-mock)

## License
[Older(2.*) version documentation](https://github.com/nutboltu/storybook-addon-mock/blob/2.4.1/README.md)
### License

This project is licensed under the MIT License - see the LICENSE file in the source code for details.
2 changes: 1 addition & 1 deletion packages/mock-addon/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "storybook-addon-mock",
"version": "3.0.0-beta.1",
"version": "3.0.0",
"description": "A storybook addon to mock fetch/XHR request",
"keywords": [
"storybook",
Expand Down

1 comment on commit 80a7979

@vercel
Copy link

@vercel vercel bot commented on 80a7979 Sep 30, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

storybook-addon-mock – ./

storybook-addon-mock.vercel.app
storybook-addon-mock-nutboltu.vercel.app
storybook-addon-mock-git-master-nutboltu.vercel.app

Please sign in to comment.