Storybook
With Storybook you can visualize different states of your UI components and develop them outside of your application.
An API is provided for external addons to provide documentation, interactivity and analytics on your components.
A command is provided to create a static version that can be deployed easily to github pages for example.
Here are 1,271 public repositories matching this topic...
@diegohaz - i noticed a couple of minor spelling errors on the main site:
Basic stack
It includes everything necessary to build a tipical web app with focus on productivity and developer experience.
Learn more about the recomended workflow
Should be typical, and recommended.
Just an FYI.
Thanks!
On the Build step of the tutorial when explaining about GlobalStyles and the addDecorator function it never actually says where to add the code. I ended up adding it to the config.js and that worked, but it doesn't tell you to do that in the tutorial. In the actual Docs on [Decorators](https://storybook.js.org/docs
This isn't really an issue, this is just a request
I am trying to learn how to build microservices with CQRS, ES, reactive programming and messaging, I have a good understanding of the theoretical part but there isn't much hands-on examples about this subject.
Reactive Trader Cloud is the most complete app that I could find which implements all these concepts (and much more), I am
add defaultValue and value props support for some form like components so that we can control the components switch between controlled and uncontrolled. it was used by some popular UI library like Material UI and antd. I have written a tiny module ([rc-value](https://github.com/beizh
Hi all.
I want to submit an issue.
When carousel is opened on a mobile, on android/chrome for example, vertical swiping on mobile screen causes carousel slide to be changed: swiped to next or prev.
-
Updated
Oct 12, 2018 - JavaScript
Running on Windows 7 (yes, sorry) I got next:
Command failed: docker run --rm -d -P --security-opt=seccomp=D:\react-js\react-js-tutorial\node_modules\@loki\target-chrome-docker\src/docker-seccomp.json -v D:\react-js\react-js-tutorial\storybook
-static:/var/loki --shm-size=1g -p 49952:49952 yukinying/chrome-headless:63.0.3230.2 --disable-datasaver-prompt --no-first-run --disable-extensions
-
Updated
Jun 1, 2020 - JavaScript
There is an import dependencie cycle between:
src/Interfaces/index.ts:
export * from '@Redux/IStore';
and
src/Redux/IStore.d.ts:
import { IHomePage } from '@Interfaces';
Eslint rule that detect the issue:
https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-cycle.md
-
Updated
Feb 8, 2018 - JavaScript
Would be nice to add an option for adding additional git push flags. In our case, something like --no-verify would be crucial.
Seems now we don't need this addon because most of the feature provided by stroybook-readme are implemented at storybook
https://medium.com/storybookjs/storybook-docspage-e185bc3622bf
-
Updated
Jan 4, 2020 - JavaScript
Hi, I have just discover ignite and wanted to give it a try.
First of all, this example is not working, it gives ✖ Cannot read property 'includes' of undefined
dka@dev-11:[~/workspace/tmp]: npm i -g ignite-cli
npm WARN npm npm does not support Node.js v13.0.1
npm WARN npm You should probThe docs are currently written for someone familiar with jest mocha and Enzyme.
- Perhaps add at the beginning:
Specsis an addon toStorybook.
Storybookallows the developer during development to visually see a component or part of it, and interactively see immediate changes to the code. It also helps document the project with visual examples.
Specsadds the ability to
Microsoft Edge should probably work out of the box since it's Chromium based, but we should make sure that it's officially supported.
-
Updated
Jul 29, 2019 - JavaScript
AddOn: v1.4.0
Node: v8.14.0
React:16.2.0
Storybook/react: 3.4.0
yarn screenshot
yarn run v1.12.3
$ storybook-chrome-screenshot -p 9001 --debug
DEBUG [CLI Options] { port: '9001',
host: 'localhost',
staticDir: undefined,
configDir: '.storybook',
outputDir: '__screenshots__',
filterKind: undefined,
filterStory: undefined,
browserTimeout: 30000,
par
To pass stories via the command line, the --stories argument needs to be parsed. It is simply merged into the config as a string here: https://github.com/chrisvxd/story2sketch/blob/master/src/server/index.js#L61
For it to work I had to add:
if (newConfig.stories && newConfig.stories !== 'all') {
newConfig.stories = JSON.parse(newConfig.stories);
}
to tidyConfig().
T
-
Updated
Apr 24, 2019 - TypeScript
When using apolloStorybookDecorator, I get an error from apollo client that "You must specify link & cache properties on the config object". Not sure what I can do to resolve this.
Feature request
We need a page in /pages/blog/index.js that acts as a system of listing the available blogs and rendering that list as pretty links that display meta data.
Proposed solution
The page should use SSG like the dynamic blog routes file to get a list of the articles and pass the array as a
Success Stories
In order to run the current examples we have to also run yarn add -W storybook-react-router
I do have lerna installed, unlike #25
Which version are you using?
master as of 17 March 2020
Are you using storybook-router with a react based project or a vue one?
React examples
Please describe the problem:
Documentation does not match what you actually need to run the exa
-
Updated
Jun 8, 2020 - TypeScript
-
Updated
Jun 7, 2020 - TypeScript
- build a page with govuk-react on codesandbox with a Page, H1, H2, DateField, Button (and more if you want)
- build the same page with govuk-frontend on another codesandbox
- do a pixel perfect comparison, e.g. using a Chrome extension or Photoshop
- if there are any differences, figur
The new gutter props that were added via #191 need to be documented.
It also should be detailed how shift works and how it adds a gutter.
Released March 31, 2016
- Repository
- storybooks/storybook
- Website
- storybook.js.org


Describe the bug
In the config.js
addParametersfunction, if I setisFullscreen: trueand open the webpage, it is fullscreen on startup. But if I setisFullscreen: falseand open the webpage again, it is still full-screen on startup.To Reproduce
isFullscreen: true, open the webpage,isFullscreen: false, open the webpa