chromaui / learnstorybook.com Goto Github PK
View Code? Open in Web Editor NEWStatic site and content for Storybook tutorials
Home Page: https://storybook.js.org/tutorials/
License: MIT License
Static site and content for Storybook tutorials
Home Page: https://storybook.js.org/tutorials/
License: MIT License
Just followed the first step on the tutorial at https://www.learnstorybook.com/get-started/ and when opening the storybook at http://localhost:6006/ an Uncaught TypeError error is thrown and the page is blank.
{
"name": "tasklist",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.3.1",
"react-dom": "^16.3.1",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"@kadira/storybook": "^2.21.0"
}
}
what are the diffrences between testing tool storybook and mocha or jest
When following the Documentation steps in Design Systems for Developers, I came across a build error with @babel/parser
when I changed the config to import the new mdx file Avatar.stories.mdx
Via the instructions here, adding babel-loader
as a dev dependency seems to solve the issue. Not sure if this is 100% needed but I wasn't able to get it working without it.
Add yarn add -D babel-loader
as a step when integrating MDX.
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 that is actually what is suggested to do.
Wording should be added that says something like "For this tutorial we will add this code to the ./storybook/config.js
file."
Hello,
I have been through the tutorial and I have a problem with the Hot Reload that does not work. I mean the project is working but I have to restart storybook (npm run storybook) everytime I make one change on a file to see it appear.
I have already check/try :
storiesOf('TaskList', module)
)I have the same problem on two differents storybook projects.
Do you have any tips on how I can fix this?
Thanks in advance :)
Once we start to use requireContext in .storybook/config.js, running the storybook is giving me an error, I was following the exact steps mentioned in tutorial.
if I start to use const req = require.context('../src', true, /.stories.js$/);
, the stuffs work fine
PFB my package.json
{
"name": "taskbox1",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "^5.1.7",
"@storybook/addon-links": "^5.1.7",
"@storybook/addon-storyshots": "^5.1.7",
"@storybook/addons": "^5.1.7",
"@storybook/react": "^5.1.7",
"react-test-renderer": "^16.8.6",
"require-context.macro": "^1.0.4"
}
}
node version : v10.13.0
yarn version: v1.15.2
I am not able to run yarn test after setting up the .storybook/config.js file in the simple component chapter.
The issue is that it won't find the require.context function that seems to be webpack specific.
TypeError: require.context is not a function
2 | import '../src/index.css';
3 |
> 4 | const req = require.context('../src', true, /.stories.js$/);
| ^
5 |
changes made to App.js in the following commit should be mentioned in the tutorial here
chromaui/learnstorybook-code@9c50472
Otherwise the following error is shown in storybook
Could not find "store" in the context of "Connect(PureTaskList)".
Hi
In following your excellent tutorial, I ran into a roadblock on the Addons section. Doing yarn add @storybook/addon-knobs
gives me the latest addon-knobs (v4.x), and that causes an "Accessing non-existent channel" error when going to Storybook.
After a comparing your code @ chromaui/learnstorybook-code@f4d933#diff-f5db38d9ba5560598e902c026311b340, I updated my package.json to "@storybook/addon-knobs": "^3.3.15"
, reinstalled, and everything worked fine.
TypeScript is coming fast for Vue. Already at this point, it may not be such a good idea to start a new Vue project without TypeScript...
Could you please update Vue tutorial to show proper configurations for working with TypeScript also?
Lovely tutorial, but I've hit a bit of a roadblock.
Working through the "Wire in data" section, my Storybook tests predictably stop working when TaskList
is renamed to PureTaskList
- however, the solution given still doesn't work. Instead, I'm just given the following error:
Invariant Violation: Could not find "store" in the context of "Connect(PureTaskList)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(PureTaskList) in connect options.
I've gone over all of my code and, as far as I can tell, it's identical to that shown in the article. I also had a look at the linked commit and noticed that App.js
now wraps the TaskList
component in a Provider
with access to the store, which isn't mentioned in the article. Adding that leaves the app itself working correctly - does something similar need to happen in the component's story?
Cheers.
Following instructions through https://www.learnstorybook.com/react/en/simple-component/, the icon font fails to load in the application, with console warnings:
iframe.html?selectedKind=Task&selectedStory=archived:1 Failed to decode downloaded font: http://localhost:9009/icon/percolate.woff?5w3um4
iframe.html?selectedKind=Task&selectedStory=archived:1 OTS parsing error: invalid version tag
iframe.html?selectedKind=Task&selectedStory=archived:1 Failed to decode downloaded font: http://localhost:9009/icon/percolate.woff?5w3um4
iframe.html?selectedKind=Task&selectedStory=archived:1 OTS parsing error: invalid version tag
iframe.html?selectedKind=Task&selectedStory=archived:1 Failed to decode downloaded font: http://localhost:9009/icon/percolate.ttf?5w3um4
iframe.html?selectedKind=Task&selectedStory=archived:1 OTS parsing error: invalid version tag
iframe.html?selectedKind=Task&selectedStory=archived:1 Failed to decode downloaded font: http://localhost:9009/icon/percolate.ttf?5w3um4
iframe.html?selectedKind=Task&selectedStory=archived:1 OTS parsing error: invalid version tag
The Get Started part of the Angular version of the documentation includes a screenshot of a react starter page.
As it's a .png composed with 2 other screenshots (command line and storybook starter), does one of the maintainers still have the original screenshots to make a new version for Angular?
If needed, here is a link to an Angular starter page to make the missing screenshot : https://nostalgic-noether-13b323.netlify.com/
I think due to the new angular CLI version, when following the instructions on https://www.learnstorybook.com/angular/en/simple-component/ to install and use jest, I get babel errors -- maybe we need to setup jest slightly differently?
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
โข To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
โข If you need a custom transformation specify a "transform" option in your config.
โข If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/private/tmp/taskbox-angular-sb3/src/app/app.component.spec.ts:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { TestBed, async } from '@angular/core/testing';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
NOTE: this is with @storybook/angular@rc
-- the 4.0 version. SB3.4 doesn't work with the new angular CLI at all.
SECOND NOTE: to get storyshots working again there are some other small changes required, see this commit for hints: https://github.com/chromaui/learnstorybook.com/pull/59/files#diff-4501e37952bca452aa3f7d49ac721bee
While working through the Distribute instructions, I ran into a babel issue when the package was building after install (unfortunately I didn't get a screenshot of this before I fixed it). It was an unknown option
error to the build script "BABEL_ENV=production babel src -d dist"
.
After looking through the example code base, I realized that @babel/cli
was a dependency. I added it to my own package and published. This totally fixed the issue.
PROPOSED CHANGE:
Add instructions around adding @babel/cli
as a dependency.
I ran through this issue within the two example repos, as well as my personal repo
I realized that the example repo is using the prepare
script from npm which is run BEFORE the package is packed and published. This causes an issue wherever the build is run because Babel is going to include the import statements with the wrong direct path.
Screenshot of issue:
Which then hits the following error once the stories are imported (for each file):
This example has the build context from within the users local build, but when publishing through auto
, the build is run in the context of CircleCI causing the direct path to be something like home/circleci/node_modules...
PROPOSED CHANGE:
Changing the prepare script to postinstall
solves this issue as it only runs the build within the correct context (within the node_modules directory of the app in which its installed)
There currently is no documentation surrounding the need for a build to run once the package is installed to create the dist
folder within the node module. I think there should be some documentation around having the correct script run after the package is installed (with postinstall
).
I also noticed that after installing the example package created by @tmeasday that the index.js file had incorrect paths to the components. It seems to be fixed in the repo, but probably needs to be published with the updated chage.
This is the discussion for the Spanish version of Learn Storybook. Use this issue to divvy up translation, request feedback, etc. For more info about the translation project and to get involved checkout #3
Please target your PRs at branch language-spanish
. ๐
cc @icarlossz and @luchux
Hey there,
not sure if this is the right way to approach you with the subject, so feel free to close this issue, if not.
First of all, thank you for providing this great resource. Did the tutorial for react and really enjoyed it.
Anyhow, I was wondering, if you are planning to add Storybook HTML (in combination with a templating system like mustache) to your curriculum any time soon?
We're considering using it at work but learning resources are quite rare...
Best wishes!
Astrid
@tmeasday and I are creating a new Storybook guide! ๐ It'll be launched with the website refresh that @kylesuss is working on here.
Overview
โDesign systems for developersโ is a free 9-chapter guide that teaches professional developers about the design system infrastructure and production workflows used by the smartest frontend teams. It focuses on Storybook and includes real code + example repositories.
Feedback areas
General feedback is definitely appreciated. Here are some specific areas that could use extra attention:
We'd love early feedback from contributors ๐
@jonniebigodes @icarlossz @alterx @luchux @danielduan @chinanf-boy
This one has been on the back burner for quite some time and sorry for that.
Here are the questions:
While i was working in translating the documentation, one thing kept me wondering and that was about the addons
section, react has it but vue and angular doesn't, is this section left out by omission, probably due to the fact that probably no one made a pr for it? Should it be a good thing to revisit this and try and standardize the whole documentation? More even now that #91 is currently underway.
I was thinking about having a copy code snippet button added to the documentation, is this doable in a near future? After the refresh of the site is gone through and possibly expand it to #137.
Feel free to provide feedback
Thanks in advance
Hi I am using css from this link as written in document.
However the icon star is not shown. I think I need more link from css not only that link. This is not really critical and unimportant but I want to fix it. Whatever documents or css. Thanks if you give me any comments please.
Many people would benefit from a tutorial on add-on integration
Many people would love knobs (very widely utilized add-on)
I'm down to work on content. Just wanted to make sure this is something that's desired.
In the following section of the Angular tutorial:
When prompted to restart the Storybook server with yarn run storybook
the following errors are generated:
ERROR in ./src/styles.less (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/less-loader/dist/cjs.js??ref--10-3!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/styles.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
var content = require("!!../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./styles.less");
^
Unrecognised input
in /Users/blah/blah/blah/blah/taskbox/src/styles.less (line 2, column 12)
@ ./src/styles.less 2:14-356 21:1-42:3 22:19-361
@ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./src/styles.less
248 Notice as well that this test is quite brittle. It's possible that as the project matures, and the exact implementation of the
Task
changes --perhaps using a different classname or atextarea
rather than aninput
--the test will fail, and need to be updated.
Need more clarity about this line. I can work on enhancing this line if the intended meaning was conveyed.
This issue documents "advanced" topics that readers have inquired about in the past. These topics will be incorporated into the sequel to Learn Storybook's intro guide. Feel free to suggest topics for the team to consider.
Related issues: #67
When I followed the instructions for adding webpack.config.js
into .storybook
, which pushes the loader rule for addon-storybook
, it caused the build to error in every .stories
file with the error Import in body of module; reorder to top import/first
.
After researching the issue, I found that this comment seems to solve the problem: storybookjs/storybook#6974 (comment)
Original:
//And update your webpack config in .storybook/webpack.config.js:
module.exports = function({ config }) {
config.module.rules.push({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
return config;
`};
Fixed:
//And update your webpack config in .storybook/webpack.config.js:
module.exports = function({ config }) {
config.module.rules.unshift({
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
});
return config;
`};
In progress here: #91
Hello, I would like to help with the translation of the tutorial into Spanish but would like an explanation on how to do it in the same way it can be useful for anyone who also intends to help translate.
Greetings,
Carlos
It would likely be a good idea to host the demo Storybook project described in the deploy step:
Linking it in the following locations seem like good ideas:
https://github.com/hichroma/learnstorybook.com/blob/master/content/deploy.md
https://github.com/hichroma/learnstorybook.com/blob/master/content/conclusion.md#conclusion
It seems that saving a MD file causes it to update for those that have prettier enabled. I think that is expected, but maybe we can do 1 big PR where all of the files are reformatted at once so it doesn't just happen sporadically in smaller PRs.
I think it will be great if there is a guide for React Native Storybook! There is a massive lack of guides on RN, and right now, there are vast differences in terms of expectations and implementations of Storybook for React vs React Native which the current Storybook website fails to highlight.
e.g.
There is a typo in build.md
in which there is an unterminated string in the config example.
Issue:
// automatically import all files ending in *.stories.js
configure(require.context('../src, true, /\.stories\.js$/), module);
should be:
// automatically import all files ending in *.stories.js
configure(require.context('../src', true, /\.stories\.js$/), module);
I tried opening a PR but I didn't have permission to create the PR ๐ข
I just completed the tutorial and enjoyed learning about storybook.
However I noticed a mix of npm
and yarn
commands throughout the tutorial. Would you be interested in a PR consolidating the commands to use either npm
or yarn
throughout for consistency? And if so, which?
Update Jun 13
Thanks to @mattrothenberg we have the example UI code ported to Vue. ๐ค
Vue UI example code
Contributors wanted
Port the prose to Vue. This is mostly find & replace in Markdown with a bit of extra explanation for Vue-specific concepts.
yarn && yarn dev
I thought this might be because the yarn.lock
file has not been updated in parity with the package-lock.json
file; however, after deleting it locally and adding a fresh lockfile, the error persisted. There also exists a lint error on line 66 of src/pages/index.js
, but fixing this also does not resolve the screenshotted issue. I'll be submitting a PR soon in regards to #21 but I'll just keep it to content ๐
Learn Storybook is read by over 300,000 developers! We need help translating the tutorial to other languages.
Translating is manageable for one person. The content length is the equivalent to one long blog post (5โ6k words). Ideally, we try to have 2 people to collaborate on writing and proofreading, but that shouldn't prevent you from getting started.
Note: React/English is the "master" edition that is updated often. Please use React/English as the source-of-truth in your translations. ๐
/react/jp
).Language | Contributors | Discussion | Status |
---|---|---|---|
๐ฒ๐ฝ Spanish | @lmac-1 @icarlossz, @luchux | ๐ Live | |
๐จ๐ณ Simplified Chinese | @chinanf-boy,@stpace | ๐ Live | |
๐น๐ผ ๐ญ๐ฐTraditional Chinese | @ymcheung | ๐ Live | |
๐ต๐น๐ง๐ท Portuguese | @jonniebigodes | ๐ Live | |
๐ณ๐ฑ๐ง๐ช Dutch | @Robin-Hoodie, @ghengeveld | ๐ Live | |
๐ฉ๐ช German | @renet @jonathanherdt | ๐ Live | |
๐ฏ๐ต Japanese | @chameleonhead, @match5121 | ๐ Live | |
๐ซ๐ท French | @Draketheb4dass , @rjussserand | ๐ Live | |
๐ฎ๐น Italian | @ludovicobesana , @giowhatever | ๐ Live | |
๐ฐ๐ท Korean | @katepark1009, @jinho6225 | ๐ Live | |
๐ฒ๐ฆ Arabic | @eihabkhan, @merodiro | ๐ Live |
Language | Contributors | Discussion | Status |
---|---|---|---|
๐ฒ๐ฝ Spanish | @IvanSotelo | ||
๐ต๐น๐ง๐ท Portuguese | @Wanderson77, @pablolucas890 | ๐ Live |
Language | Contributors | Discussion | Status |
---|---|---|---|
๐ฒ๐ฝ Spanish | @josegarciamanez | #478 | ๐ Live |
๐ต๐น Portuguese | @jonniebigodes | ๐ Live | |
๐ฏ๐ต Japanese | @nagashimam, @chameleonhead | ๐ Live |
Language | Contributors | Discussion | Status |
---|---|---|---|
๐ต๐น๐ง๐ท Portuguese | @jonniebigodes | ๐ Live | |
๐ฒ๐ฝ Spanish | @IvanSotelo | ๐ Live | |
๐ซ๐ท French | @jeanphibaconnais | ๐ Live | |
๐จ๐ณ Simplified Chinese | @zydmayday, @fengnzl | #680 | ๐ Live |
๐ฎ๐น Italian | @Archetipo95 , @ludovicobesana | ๐ Live |
Language | Contributors | Discussion | Status |
---|---|---|---|
๐ฒ๐ฝ Spanish | @IvanSotelo | ๐ Live |
The code snippet about jest test, import react in vue version.
I followed through the chapter Wire In Data on wiring in data. I couldn't help notice that the data in the store did not appear to be used in the final code, or show up in Storybook.
Indeed it doesn't even appear in the screenshots which accompany the chapter and subsequent chapters.
I know it is possible to make this happen because I am currently the client on a live SB project which is using a data store to display data.
Not suggesting this is an error but perhaps an explanation would be helpful.
Everything was ok until i got to https://www.learnstorybook.com/vue/en/data/
This section and forward:
Then we'll update our TaskList to read data out of the store. First let's move our existing presentational version to the file src/components/PureTaskList (renaming the component to pure-task-list), and wrap it with a container in src/containers/TaskList.vue:
ERROR in ./src/components/PureTaskList
Module build failed: Error: ENOENT: no such file or directory, open '~./taskbox/src/components/PureTaskList'
To keep confusion down and amplify clarity can you list the filename above the code snips clearly?
filename.extension
...some code
Plus I'm working on the vue version, but towards the end of the page, the screenshot is a duplicate from the last chapter but should show task being pulled from the store. Then the jest example is written for react not vue.
The whole concept of storybook, component library and using in the application is very cool. I was looking at something which could be used in other projects too as a npm package and use the components from the component library. Is there a way to do it ?
While giving the finishing touches to the translation regarding the "Design Systems for Developers", when i've reached the "Document page" it seems that one image is missing. The markdown has the following content:
![alt_text](/design-systems-for-developers/Feedback-wanted53.png)
Checking the static
folder where the assets are stored, the image in question as you can see in the screenshot below:
On the left is the folder with the assets and on the right is the live version.
I've checked the repo and the image is also not there.
I'm going to leave it as is and hope that soon the image is added.
Feel free to provide feedback
In the UI, Dutch should appear as 'Nederlands' and not the country code nl
.
@ghengeveld can you confirm that this is how the language is printed in Dutch (as a native speaker). See the screenshot below.
In the Storybook official documentation, it says
Storybook runs outside of your app.
But in the intro of your guide, it says
Storybook runs alongside your app in development mode.
Can you talk about this discrepancy?
Tweet: I'm learning Storybook! It's a great dev tool for UI components.
It's just something with a large font size, first page, users wouldn't want to share it even if they'd gloss over a mistake in the actual tutorial, easy fix, bada bing, bada boom.
Angular users, we need your help converting the LearnStorybook example code. ๐
The example is currently written in React and Redux. If you use Angular (and a little React) and have a grasp on its state management ecosystem help us introduce Storybook to that community.
Comment below!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.