Refactoring of withX wrappers withNotes and withInfo #1538

shilman · 2017-07-28T09:00:03Z

What I did

make withX signatures consistent
make string-only variant of withNotes/withInfo
simplify withInfo code

I have documented the rationale behind this change here:

https://gist.github.com/shilman/792dc25550daa9c2bf37238f4ef7a398#options-types

Will obviously put this into a more permanent place in the docs if we converge on this convention and migrate things over to it.

How to test

yarn && yarn boostrap
cd examples cra-kitchen-sink
yarn storybook

- make signatures consistent - make string-only variant of withNotes/withInfo - simplify withInfo code

ndelangen · 2017-07-28T09:08:32Z

addons/notes/src/index.js

  const channel = addons.getChannel();

+  const text = typeof textOrOptions === 'string' ? textOrOptions : textOrOptions.text;


extract into a function

ndelangen · 2017-07-28T09:11:10Z

examples/cra-kitchen-sink/src/stories/index.js

@@ -135,8 +135,8 @@ storiesOf('Button', module)
  )
  .add(
    'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes({ notes: 'Composition: Info(Notes())' })(context =>
+    withInfo({ text: 'see Notes panel for composition info' })(


This is the example we show to users, do you think it makes sense like this?
I think the less verbose syntax:
withInfo('see Notes panel for composition info')
makes more sense tbh.

We should document these options somewhere, but the example should showcase the common use case here, I think.

ndelangen · 2017-07-28T09:16:23Z

addons/info/src/index.js

-  addWithInfo: deprecate(function addWithInfo(storyName, info, storyFn, _options) {
-    return this.add(storyName, withInfo(info, _options)(storyFn));
+  addWithInfo: deprecate(function addWithInfo(storyName, text, storyFn, options) {
+    if (typeof storyFn !== 'function') {


Could use a bit of refactoring,
in some cases the const text is actually the storyFn. I find this confusing.

I'd prefer using abstract names or simply an argument array to do detection, and only assign to a const when we are sure what it is.

ndelangen · 2017-07-28T09:20:28Z

addons/info/src/index.js

  const options = {
    ...defaultOptions,
-    ..._options,
+    ...infoOptions,


Also merge in:

if (!options.propTables) { options.propTables = null; }

how would you merge this in? see the comment above in the code.

ndelangen · 2017-07-28T09:21:31Z

This will be backwards compatible? or not?

tmeasday · 2017-07-28T10:23:23Z

I think both withX functions are new in 3.2 -- It's only incompatible in sense that the old way is deprecated. But @shilman can answer for sure.

tmeasday · 2017-07-28T10:25:40Z

addons/info/src/index.js

-export const withInfo = (info, _options) =>
-  addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
+export const withInfo = textOrOptions => {
+  if (typeof textOrOptions === 'string') {


Why not just:

const options = (typeof textOrOptions === 'string') ? { text: textOrOptions } : textOrOptions;

codecov · 2017-07-28T16:18:15Z

Codecov Report

Merging #1538 into master will increase coverage by 0.02%.
The diff coverage is 69.23%.

@@            Coverage Diff             @@
##           master    #1538      +/-   ##
==========================================
+ Coverage   20.52%   20.55%   +0.02%     
==========================================
  Files         241      241              
  Lines        5222     5220       -2     
  Branches      643      657      +14     
==========================================
+ Hits         1072     1073       +1     
+ Misses       3667     3639      -28     
- Partials      483      508      +25

Impacted Files	Coverage Δ
addons/notes/src/index.js	`0% <0%> (ø)`	⬆️
addons/info/src/index.js	`90.9% <90%> (-0.4%)`	⬇️
lib/ui/src/modules/ui/libs/hierarchy.js	`45.45% <0%> (ø)`	⬆️
addons/events/src/components/Event.js	`0% <0%> (ø)`	⬆️
addons/knobs/src/react/WrapStory.js	`12% <0%> (ø)`	⬆️
app/react/src/client/preview/element_check.js	`41.17% <0%> (ø)`	⬆️
addons/info/src/components/Props.js	`37.2% <0%> (ø)`	⬆️
addons/knobs/src/KnobManager.js	`35.41% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/configs/init_panels.js	`25% <0%> (ø)`	⬆️
addons/knobs/src/components/types/Color.js	`8% <0%> (ø)`	⬆️
... and 26 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b02fec0...ee6204e. Read the comment docs.

ndelangen

Great work!

usulpro

Looks good to me!

usulpro · 2017-07-29T17:42:48Z

addons/notes/src/index.js


  return getStory => context => {
    // send the notes to the channel before the story is rendered
-    channel.emit('storybook/notes/add_notes', notes);
+    channel.emit('storybook/notes/add_notes', options.text);


If we mean that this addon could have other options in the future (or even if we want to keep it as an addon example) why don't pass all 'options' object here?

I think we can emit those options once we handle them on the other end.

There may be "preview-side" options, so I don't think it's necessarily the case that we'd want to emit them all.

usulpro · 2017-07-29T17:56:21Z

addons/info/src/index.js

@@ -34,20 +28,10 @@ const defaultMarksyConf = {
  ul: UL,
 };

-export function addInfo(storyFn, context, info, _options) {


Is there any reason to not export this function to users? Maybe our documentation shouldn't encourage people to use it, but there could be some "advanced" use cases when this form is more convenient! Especially it makes sense after #1501

IMHO, we should never export a function to users if we don't need to, because then we are stuck supporting it unless we want to break the API.

usulpro · 2017-07-29T18:18:10Z

addons/info/src/index.js

@@ -83,12 +67,25 @@ export function addInfo(storyFn, context, info, _options) {
  );
 }

-export const withInfo = (info, _options) =>
-  addonCompose((storyFn, context) => addInfo(storyFn, context, info, _options));
+export const withInfo = textOrOptions => {


IMO, it would be nice to provide here such an option as well:

withInfo('text info', { options })

There are two reasons for that:

1.1. We might want to use different text info with the same other options:

.add('Button', withInfo('Default Button', widgetInfoOptions)(() => <Button />))

1.2. We might want to use multiline template string for `text info` and such syntax would be less verbose

It's relevant to the previous behavior of .addWithInfo when we could pass (or not) text info as a separate argument

@usulpro the reason @tmeasday wanted to keep it to a single argument is for this API:

https://gist.github.com/shilman/792dc25550daa9c2bf37238f4ef7a398#options-types

The API described in the gist is obviously just a proposal, but we think having a single argument makes stuff like this simple to implement. If we have two arguments it gets complicated fast.

tmeasday

LGTM

Refactoring of withX wrappers withNotes and withInfo

a50a8e8

- make signatures consistent - make string-only variant of withNotes/withInfo - simplify withInfo code

shilman requested review from tmeasday, ndelangen and usulpro July 28, 2017 09:00

ndelangen reviewed Jul 28, 2017

View reviewed changes

ndelangen assigned shilman Jul 28, 2017

tmeasday requested changes Jul 28, 2017

View reviewed changes

Respond to review comments and update addon-info README

1810a98

ndelangen approved these changes Jul 28, 2017

View reviewed changes

usulpro reviewed Jul 29, 2017

View reviewed changes

Merge branch 'master' into 1147-addon-info-refactor

ba2793e

tmeasday approved these changes Jul 30, 2017

View reviewed changes

Merge branch 'master' into 1147-addon-info-refactor

ee6204e

shilman merged commit f98a950 into master Jul 31, 2017

shilman deleted the 1147-addon-info-refactor branch July 31, 2017 00:07

This was referenced Jan 12, 2018

puppeteer versions available: 1.0.0 #2731

Closed

puppeteer versions available: 1.0.0 #2732

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refactoring of withX wrappers withNotes and withInfo #1538

Refactoring of withX wrappers withNotes and withInfo #1538

shilman commented Jul 28, 2017 •

edited

Loading

ndelangen Jul 28, 2017

ndelangen Jul 28, 2017

tmeasday Jul 28, 2017

ndelangen Jul 28, 2017

ndelangen Jul 28, 2017

shilman Jul 28, 2017

ndelangen commented Jul 28, 2017

tmeasday commented Jul 28, 2017 •

edited

Loading

tmeasday Jul 28, 2017 •

edited by ndelangen

Loading

codecov bot commented Jul 28, 2017 •

edited

Loading

ndelangen left a comment

usulpro left a comment

usulpro Jul 29, 2017

tmeasday Jul 30, 2017

usulpro Jul 29, 2017

shilman Jul 29, 2017

usulpro Jul 29, 2017

shilman Jul 29, 2017

tmeasday left a comment

		const channel = addons.getChannel();

		const text = typeof textOrOptions === 'string' ? textOrOptions : textOrOptions.text;

Refactoring of withX wrappers withNotes and withInfo #1538

Refactoring of withX wrappers withNotes and withInfo #1538

Conversation

shilman commented Jul 28, 2017 • edited Loading

What I did

How to test

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ndelangen commented Jul 28, 2017

tmeasday commented Jul 28, 2017 • edited Loading

tmeasday Jul 28, 2017 • edited by ndelangen Loading

Choose a reason for hiding this comment

codecov bot commented Jul 28, 2017 • edited Loading

Codecov Report

ndelangen left a comment

Choose a reason for hiding this comment

usulpro left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tmeasday left a comment

Choose a reason for hiding this comment

shilman commented Jul 28, 2017 •

edited

Loading

tmeasday commented Jul 28, 2017 •

edited

Loading

tmeasday Jul 28, 2017 •

edited by ndelangen

Loading

codecov bot commented Jul 28, 2017 •

edited

Loading