Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook for HTML snippets #3475

Merged
merged 62 commits into from
May 7, 2018
Merged

Storybook for HTML snippets #3475

merged 62 commits into from
May 7, 2018

Conversation

Hypnosphi
Copy link
Member

@Hypnosphi Hypnosphi commented Apr 22, 2018

Issue: #3157
Live example

Todo:

  • Docs
  • Addons support
  • Netlify
  • Acceptance story
  • CI

e.preventDefault();
linkTo(kind, story)();
}
});
Copy link
Member Author

Choose a reason for hiding this comment

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

We could incorporate something like this into links addon

Copy link
Member

Choose a reason for hiding this comment

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

I can't see how it will work with a real-world example, because probably your components won't be coupled to the "story"/"kind"

Copy link
Member Author

Choose a reason for hiding this comment

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

We can use some namespace, like data-sb-story

Copy link
Member Author

Choose a reason for hiding this comment

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

The idea is, if you want a link to other story, you just add corresponding data-attribute to the element that you want to be the link

.add('button', () => {
const button = document.createElement('button');
button.innerText = 'Hello Button';
button.addEventListener('click', action('Click'));
Copy link
Member Author

@Hypnosphi Hypnosphi Apr 22, 2018

Choose a reason for hiding this comment

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

I have some thoughts on adding a decorator with backbone-style event listeners hash:

.addDecorator(withActions({
  dblclick : 'Double click',
  'click .icon.doc':   'Doc icon click',
  'contextmenu .icon.doc': 'Doc icon right click'
}))

Copy link
Member Author

Choose a reason for hiding this comment

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

Did that: 100985b

@Hypnosphi Hypnosphi requested a review from igor-dv as a code owner April 22, 2018 19:30
@codecov
Copy link

codecov bot commented Apr 22, 2018

Codecov Report

Merging #3475 into master will increase coverage by 54.88%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master   #3475       +/-   ##
==========================================
+ Coverage   37.61%   92.5%   +54.88%     
==========================================
  Files         459       6      -453     
  Lines       10377      40    -10337     
  Branches      928       2      -926     
==========================================
- Hits         3903      37     -3866     
+ Misses       5932       2     -5930     
+ Partials      542       1      -541
Impacted Files Coverage Δ
lib/core/src/client/preview/story_store.js
...ents/stories_panel/stories_tree/tree_decorators.js
addons/info/src/components/types/Shape.js
addons/info/src/components/types/Signature.js
app/mithril/src/server/index.js
lib/ui/src/libs/withLifecycleDecorator.js
addons/links/src/react/components/link.js
addons/viewport/src/manager/components/Panel.js
app/angular/src/server/config/webpack.config.js
addons/info/src/components/types/PropertyLabel.js
... and 414 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 3539625...10fa1dc. Read the comment docs.

Copy link
Member

@igor-dv igor-dv left a comment

Choose a reason for hiding this comment

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

🔥
Do you need any help with addons support?

e.preventDefault();
linkTo(kind, story)();
}
});
Copy link
Member

Choose a reason for hiding this comment

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

I can't see how it will work with a real-world example, because probably your components won't be coupled to the "story"/"kind"

@Hypnosphi
Copy link
Member Author

Hypnosphi commented Apr 23, 2018

Do you need any help with addons support?

I'd appreciate any. I'll create a slack channel to coordinate

@Hypnosphi Hypnosphi requested a review from z4o4z as a code owner May 3, 2018 23:58
@Hypnosphi
Copy link
Member Author

Ok I think it's ready for final review
CC @storybooks/team

@Hypnosphi Hypnosphi added the ready label May 4, 2018
.add('button', () => {
const button = document.createElement('button');
button.innerText = 'Hello Button';
// eslint-disable-next-line no-console
Copy link
Member

Choose a reason for hiding this comment

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

Should we remove eslint stuff from docs?

Copy link
Member Author

Choose a reason for hiding this comment

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

Makes sense

Copy link
Member

@wuweiweiwu wuweiweiwu left a comment

Choose a reason for hiding this comment

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

Looks awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants