From e44ec5025d3c3494a32cc62fafdae3d44dfd9516 Mon Sep 17 00:00:00 2001 From: nutboltu Date: Thu, 17 Aug 2023 01:17:32 +1000 Subject: [PATCH 1/2] fix: disableUsingOriginal bug --- packages/mock-addon/src/Panel.js | 8 +++++--- .../src/components/MockItem/index.js | 4 ++-- packages/mock-addon/src/withRoundTrip.js | 18 ++++++++++++++---- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/mock-addon/src/Panel.js b/packages/mock-addon/src/Panel.js index 568db7f..4d273e2 100644 --- a/packages/mock-addon/src/Panel.js +++ b/packages/mock-addon/src/Panel.js @@ -7,10 +7,10 @@ import { MockItem } from './components/MockItem'; import { ErrorItem } from './components/ErrorItem'; export const Panel = (props) => { - const [mockData, setState] = useAddonState(ADDON_ID, []); + const [state, setState] = useAddonState(ADDON_ID, { mockData: [], disableUsingOriginal: false }); const emit = useChannel({ - [EVENTS.SEND]: (newMockData) => { - setState(newMockData); + [EVENTS.SEND]: (newState) => { + setState(newState); }, }); @@ -18,6 +18,7 @@ export const Panel = (props) => { emit(EVENTS.UPDATE, { item, key, value }); }; + const { mockData, disableUsingOriginal } = state; if (!mockData || mockData.length === 0) { return ( @@ -51,6 +52,7 @@ export const Panel = (props) => { onChange={(key, value) => onChange(item, key, value) } + disableUsingOriginal={disableUsingOriginal} {...rest} /> ); diff --git a/packages/mock-addon/src/components/MockItem/index.js b/packages/mock-addon/src/components/MockItem/index.js index 7251e16..48a2cc6 100644 --- a/packages/mock-addon/src/components/MockItem/index.js +++ b/packages/mock-addon/src/components/MockItem/index.js @@ -1,6 +1,5 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { useParameter } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; import { ObjectControl, RangeControl } from '@storybook/blocks'; import { Form, Placeholder, TabsState } from '@storybook/components'; @@ -86,8 +85,8 @@ export const MockItem = ({ response, delay, onChange, + disableUsingOriginal, }) => { - const { disableUsingOriginal } = useParameter(); return ( onChange('skip', !value)} @@ -159,4 +158,5 @@ MockItem.propTypes = { response: PropTypes.any, delay: PropTypes.number.isRequired, onChange: PropTypes.func.isRequired, + disableUsingOriginal: PropTypes.bool.isRequired, }; diff --git a/packages/mock-addon/src/withRoundTrip.js b/packages/mock-addon/src/withRoundTrip.js index 74409ad..4f17ef1 100644 --- a/packages/mock-addon/src/withRoundTrip.js +++ b/packages/mock-addon/src/withRoundTrip.js @@ -18,8 +18,9 @@ export const withRoundTrip = (storyFn, context) => { const mockAddonConfigs = getParameter(parameters, GLOBAL_PARAM_KEY, { refreshStoryOnUpdate: false, globalMockData: [], + disableUsingOriginal: false, }); - const { globalMockData, refreshStoryOnUpdate } = mockAddonConfigs; + const { globalMockData, refreshStoryOnUpdate, disableUsingOriginal } = mockAddonConfigs; const data = [...globalMockData, ...paramData]; /** @@ -29,7 +30,10 @@ export const withRoundTrip = (storyFn, context) => { if (INITIAL_MOUNT_STATE) { faker.makeInitialRequestMap(data); - channel.emit(EVENTS.SEND, faker.getRequests()); + channel.emit(EVENTS.SEND, { + mockData: faker.getRequests(), + disableUsingOriginal, + }); channel.on(STORY_CHANGED, () => { STORY_CHANGED_STATE = true; @@ -38,7 +42,10 @@ export const withRoundTrip = (storyFn, context) => { channel.on(EVENTS.UPDATE, ({ item, key, value }) => { faker.update(item, key, value); const req = faker.getRequests(); - channel.emit(EVENTS.SEND, req); + channel.emit(EVENTS.SEND, { + mockData: req, + disableUsingOriginal, + }); refreshStoryOnUpdate && channel.emit(FORCE_RE_RENDER); }); @@ -51,7 +58,10 @@ export const withRoundTrip = (storyFn, context) => { */ if (STORY_CHANGED_STATE) { faker.makeInitialRequestMap(data); - channel.emit(EVENTS.SEND, faker.getRequests()); + channel.emit(EVENTS.SEND, { + mockData: faker.getRequests(), + disableUsingOriginal, + }); STORY_CHANGED_STATE = false; } return storyFn(context); From 38c7242ed812e7ca1b60894ea3216bdc77e84628 Mon Sep 17 00:00:00 2001 From: nutboltu Date: Thu, 17 Aug 2023 01:19:24 +1000 Subject: [PATCH 2/2] fix: linting --- packages/mock-addon/src/Panel.js | 5 ++++- packages/mock-addon/src/withRoundTrip.js | 3 ++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/mock-addon/src/Panel.js b/packages/mock-addon/src/Panel.js index 4d273e2..2a9dab1 100644 --- a/packages/mock-addon/src/Panel.js +++ b/packages/mock-addon/src/Panel.js @@ -7,7 +7,10 @@ import { MockItem } from './components/MockItem'; import { ErrorItem } from './components/ErrorItem'; export const Panel = (props) => { - const [state, setState] = useAddonState(ADDON_ID, { mockData: [], disableUsingOriginal: false }); + const [state, setState] = useAddonState(ADDON_ID, { + mockData: [], + disableUsingOriginal: false, + }); const emit = useChannel({ [EVENTS.SEND]: (newState) => { setState(newState); diff --git a/packages/mock-addon/src/withRoundTrip.js b/packages/mock-addon/src/withRoundTrip.js index 4f17ef1..65e7ff2 100644 --- a/packages/mock-addon/src/withRoundTrip.js +++ b/packages/mock-addon/src/withRoundTrip.js @@ -20,7 +20,8 @@ export const withRoundTrip = (storyFn, context) => { globalMockData: [], disableUsingOriginal: false, }); - const { globalMockData, refreshStoryOnUpdate, disableUsingOriginal } = mockAddonConfigs; + const { globalMockData, refreshStoryOnUpdate, disableUsingOriginal } = + mockAddonConfigs; const data = [...globalMockData, ...paramData]; /**