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]: find-implicit-spies codemod doesn't exist HOT 2
- [Project SfC]: Preview - Error screen adjustments HOT 1
- Could not resolve "./sb-preview/runtime.js" from "iframe.html"
- [Bug]: Cannot find module 'react-dom/client' with portable stories in React 17 projects. HOT 2
- [Bug]: next/font/local is not worked in storybook with vanilla Extract HOT 2
- [Project SfC]: Create the frontend to create a new story file from scratch
- [Bug]: The error message is that there is no default export. HOT 1
- [Bug]: Storybook Server 8.0.8 autodoc error - Element type is invalid
- [Bug]: `useParams` returns null in NextJS 14.2. Storybook 7 & 8 HOT 2
- [Bug]: Deploying to Github Pages is creating `assets/assets` path
- [Bug]: The accessibility scan encountered an error. {"name":"TypeError"} HOT 2
- [Bug]: Module parse failed: Unexpected token HOT 3
- [Bug]: Missing "./dist/react-18" after upgrading storybook to v8 with vitejs v5 HOT 2
- [Project SfC]: Testing
- [Bug]: Storybook doesn't run with tailwindcss in next.js HOT 2
- [Bug]: Vue3 After upgrading to V7 (and v8) controls are not reactive
- [Bug]: Mediquery problem with panelPosition on the right
- [Bug]: HMR of `preview.tsx` is not working HOT 1
- [Bug]: `userEvent.click()` not working as expected after upgrading Storybook to 8.x HOT 4
- [Bug]: Vite builder: Indirectly exported binding name 'default' cannot be resolved by star export entries. HOT 1
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.