Comments (14)
view source - yes
edit source - no
from storybook.
Not sure if this is what everyone else had in mind but I'd rather see the component's implementation, not the source code. If I wanted to see the source code I'd look at the source code. If my story looked like this:
storiesOf('ProgressBar', module)
.add('25%', () => (
<ProgressBar progress={0.25} />
));
I'd like to see <ProgressBar progress={0.25} />
rendered somewhere in the storybook. Maybe as a separate panel above the action logger, or a separate tab?
from storybook.
Fixed with this addon
from storybook.
I don't think we should go ahead with this idea at this moment. react-storybook shouldn't take the component development out of the application. We should edit real files because otherwise using this module will become as good as using codepen or jsfiddle. At the same time as long as we are using this for development and not for component display, we can use devtools to see source code.
from storybook.
I would actually start to wonder the value of seeing even the source inline (other than to make this a complete component IDE of course).
Instead, what do you want Storybook to become? So far it is a place for seeing the different states a component might be in, while also providing hot-reloading, ideal for development. Does Storybook then become a living styleguide perhaps? A library so other developers on your team can see what components are available and how to use them? If this is the case, then there might be value in not necessarily story source code, but example usage source code? Could this be extracted from the story somehow and displayed, maybe?
from storybook.
@stewartduffy using rawLoaders is a pretty interesting idea. @mnmtanish Check this.
from storybook.
If there is talk of adding support for displaying code example - I think it's worth looking at how material ui do it in their docs. Quite a nice implemtation. They store their code example in external js module & import it in twice to their page. One using the raw webpack loader, they pass the result of this file into a markdown component & the pass the regular loaded example to their page component that renders the example. This way their code example stays in sync with actual component rendered. See https://github.com/callemall/material-ui/blob/master/docs/src/app/components/MarkdownElement.js & https://github.com/callemall/material-ui/blob/master/docs/src/app/components/pages/components/FlatButton/Page.js
from storybook.
@mnmtanish and @roonyh is working on project related to this.
See: https://github.com/kadirahq/react-storybook-story
We'll launch this soon. Anyway, you can use this right now as well.
from storybook.
@jeef3 It's too early to say where Storybook goes. Currently, it's only work as dev tool. But we are working on a static builder. See: #88
With that, we could publish our storybook into a set of static HTML files and publish to GitHub pages (or similar).
There is also an attempt to use markdown inside stories and render proptypes. See: #19 (comment)
So, React Storybook could be used as a living style guide too.
from storybook.
With that, we could publish our storybook into a set of static HTML files and publish to GitHub pages (or similar).
I'm using this and it's a great feature. View source / edit source is complex and I'm not sure what value it adds to react development workflows.
from storybook.
@willdady that's what I had in mind when stating this ticket.
from storybook.
@willdady exactly!
from storybook.
Or maybe a panel showing the state and props just like React Devtools
from storybook.
Yes, that's definitely something that is missing to see what actual properties were used to display component in such state. As of now it only relies to having good enough description of the story.
from storybook.
Related Issues (20)
- [Bug]: a11y ignoring SVG fill property
- [Bug]: type error for required props when reusing story definitions according to the docs
- [Project SfC]: Tracking Ticket for Bugs
- [Project SfC]: Bug - Editing or saving stories for CSF2
- [Project SfC]: Bug - Toolbar gets long when Controls panel is small
- [Project SfC]: Bug - Arror navigation not implemented
- [Project SfC]: Bug - Link to a story if it is already available
- [Project SfC]: Bug - Update Story Banner isn't sticky
- [Bug]: First story dispayed in place of every other one in Docs (sb8 webcomponent) HOT 2
- [Project SfC]: Bug - X button is a bit unaligned
- [Project SfC]: Bug - Search input caret position ignored
- On Setting viewport to 320*256 pixels, Keyboard focus is moving to the hidden controls.[Bug]:
- [Bug]: Vite HMR Issue
- [Bug]: Response cookies are not available from the middleware
- [Bug]: Failure in Upgrading Storybook
- [Bug]: Importing anything that contains a word `raw` in NextJS+Storybook project from ant-design makes every other import null HOT 1
- [Bug] :Storybook + vite shows "No Preview" but story still renders below
- Warn when a story is rendered in portable stories when there are lingering cleanup functions
- [Bug]: Module not found error when using CommonJS entry point in @storybook/test HOT 1
- [Bug]: v8 Loading @emotion/react more than once warning
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.