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]: SB_CORE-COMMON_0001 (MissingFrameworkFieldError): Could not find a 'framework' field in Storybook config. HOT 1
- [Bug]: next/navigation#useParams returns null when using @storybook/nextjs HOT 1
- [Bug]: Module parse failed: Unexpected token (17:1) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file HOT 1
- [Bug]: A sandbox created with a version specifier will have a caret for all versions
- [Bug]: Storybook/HTML upgrade to v8 - Vite internal server error: this.getData is not a function HOT 4
- [Bug]: Boolean prop set to 'false' for subcomponent is not showing up in show code section.
- [Bug]: "Types of property 'typescript' are incompatible" with @storybook/react-webpack5
- [Bug]: Challenges with Rails and import maps
- [Bug]: code blocks not working in mdx HOT 1
- [Bug]: `react-docgen` not correctly populating Description column if props are `Readonly`
- [Bug]: Unable to connect Tailwind CSS
- [Bug]: Interactions-Addon still uses deprecated Button props HOT 1
- [Bug]: Webcomponents with no render function shows empty source code in Canvas
- [Bug]: Parameter with function as value is not available in Manager API
- [Tracking] React-docgen related issues
- [Bug]: Unable to display emails as stories using react-email HOT 1
- [Bug]: @storybook/addon-themes withThemeByDataAttribute decorator not working
- [Bug]: Can't resolve 'next/dist/shared/lib/app-router-context.shared-runtime'
- [Bug]: @storybook/html doesn't support Autodocs HOT 2
- [Documentation]: Missing Vue documentation for Doc Blocks HOT 3
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.