Comments (17)
Started implementation of the following tasks:
- Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
- We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
from storybook.
@arunoda Yep, sounds like a good solution. I like idea of separate components doing its stuff only. So, will implement on my account then, as a separate component which you can you later.
from storybook.
@nicksp We discuss a bit about this in our office. So, we thought rather than doing any changes to Storybook core, may be we can use some helper components to achieve these. See some sample code:
import React from 'react';
import { storiesOf, action } from '@kadira/storybook';
import { Button } from '../button';
import { Container, Markdown, PropTable } from '@you/storybook-helpers';
storiesOf('Button', module)
.add('with a text', () => (
<Container>
<Markdown>
## Rendering a button
This is how you can render a button.
</Markdown>
<Button>Button Name</Button>
<PropTable component={Button} />
</Container>
));
from storybook.
One of other things that I'm working on to add for my team is markdown description. Perhaps I can send another PR on that?
I don't quite understand point 2. Mind to elaborate more?
from storybook.
We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
That's a great idea!
from storybook.
@sammkj yes please 👍
We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
Basically, with this we are just reading propTypes for a given component class and just list them. It's kind of a documentation for a component.
@glenjamin Thanks.
from storybook.
We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
Other than a property name, there's not enough reflective data in Reacts PropTypes to extract that information. Facebook uses (and recommends) static analysis to access that data: facebook/react#4794
from storybook.
Also, why do you not recommend writing tests inside of stories?
from storybook.
@arunoda Hi there,
Have some local groundwork for exactly these two features that I'd like to integrate in your tool :)
- Allow to add a markdown description for each story. (Technically, there can be stories with just the markdown)
- We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
How shall i put a note that i started to work on it? And what do you think if i'll develop it?
from storybook.
@nicksp awesome.
Technically, there can be stories with just the markdown.
Yes. That's what we can start with. Something like this.
import { storiesOf, markdown } from '@kadira/storybook';
storiesOf('Something')
.add('description', markdown(`
## This is the a great component.
...
`));
This markdown will return a React element. So, it will work without any additional setup.
We can also show proptypes and what are they for a given React component. It's nice, if we can show them with a story.
Yes. It's nice to show this with the user's component. This is also same for the markdown description as well. I think it's great if we can create a new panel just below the iframe which shows these information if it contains within a story.
from storybook.
@arunoda How shall i start? I mean do i need to create and issues and mark that i'm working on it or what?
So, since this is a relatively complex task, i cat start with little things first and go further step by step. And in the meantime we can discuss the implemented stuff and alter it if needed.
from storybook.
@nicksp just add a note and start working on it. May be just work on a simple task.
Once you done something, just create a PR and link to this issue.
(PR doesn't need to be complete)
from storybook.
@arunoda Sounds good. Will ad a note right here then, in that specific issue. But since i don't have that much free time unfortunately, it won't be fast development process... just so you know. But i'll do my best. Would really love to pimp that project.
from storybook.
@nicksp No problem. Take your time. If we are working on that, I will let you know.
from storybook.
The only catch with something like that, would be if you're still wanting that component resizer (#17) . That resizes the whole iframe
I think currently?
So you would end up possibly needing another helper to wrap the component (and then only resize that?).
<Container>
<Markdown>
## Rendering a button
This is how you can render a button.
</Markdown>
<Component>
<Button>Text name</Button>
</Component>
<PropTable component={Button} />
</Container>
from storybook.
@jeef3 That's a good point.
from storybook.
I'm going to close this since we'll be working on some of these features as extensions to react storybook.
See: https://github.com/kadirahq/react-storybook-story for an example.
We'll be launching an addon API soon.
from storybook.
Related Issues (20)
- [Bug]: Since 8.1.0, Storybook is now failing trying to resolve every file in my codebase
- [Bug]: Vue KeepAlive onActivated dose NOT work in storybook decorators
- [Bug]: Example Code Not Functioning Without 'args' Variable
- [Bug]: DeprecationWarning: The `punycode` module is deprecated
- [Bug]: Updating to 8.1.0 of addon-controls or addon-essentials is causing an error with ARGTYPES_INFO_REQUEST HOT 5
- [Bug]: Nested CSS warning after updating to latest release
- [Bug]: Line highlighting in onboarding is slightly misaligned HOT 1
- [Bug]: Testing Nissuer HOT 1
- [Bug]: Autodocs not working when a React component returns a portal HOT 1
- [Bug]: Test issue, please ignore. HOT 1
- [Bug]: Chromatic TurboSnap incompatible with preview-stats.json generated from builder-vite
- [Bug]: @storybook/test cause logging warning messages on @testing-library/dom@v10 and @testing-library/user-event
- [Bug]: tailwind styles not loading for a next.js app
- [Bug]: 7.6 -> 8 upgrade fails on legacy decorators with Vite/React HOT 1
- [Bug]: MDX breaks when importing a CSF from node_modules HOT 1
- [Documentation]: using children as an arg section missing completely from docs
- [Bug]: Disabled toc in story produces error spam on scroll
- [Bug]: In 8.1.1 the empty state of controls addon has a bottom bar which wasn’t there before. HOT 1
- [Bug]: test issue HOT 1
- [BUG] Addon backgrounds - There is no "Reset background" option
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook.