Chore: update angular documentation #228
Conversation
A recent pr that was merged will mislead people with angular. Generating errors in netlify that the dir does not exist.
|
I'll try this new version to review it next week. |
Fixed the issue with storyshots addon.
|
With the latest commit the angular version of the tutorial was updated to csf to align itself with the remainder of the documentation. Also the issue that i was experiencing with jest+ storyshots addon is now fixed and the Feel free to provide feedback |
| "outDir": "./out-tsc/spec", | ||
| "module": "commonjs", | ||
| "allowJs": true, | ||
| "types": ["jest", "jquery", "jsdom", "node"] |
There was a problem hiding this comment.
I would consider to be more specific about the changes as users might rely on the tutorial to integrate storybook to their project with already changes to this file.
| "moduleResolution": "node", | ||
| "importHelpers": true, | ||
| "target": "es2015", | ||
| "typeRoots": ["node_modules/@types"], |
There was a problem hiding this comment.
I would consider to be more specific about the changes as users might rely on the tutorial to integrate storybook to their project with already changes to this file.
There was a problem hiding this comment.
@geromegrignon probably a better wording for this could be:
In your tsconfig.spec.json add the following keys and values to the compilerOptions:
{
"compilerOptions": {
....
"module": "commonjs",
"allowJs": true,
}
}You'll also need to change the types to the following:
{
"compilerOptions": {
"types": ["jest", "jquery", "jsdom", "node"]
}
}Moving onto tsconfig.json. Once again under compilerOptions add the following key and value emitDecoratorMetadata: true
And finally in tsconfig.app.json add a reference to the folder you've created earlier to the exclude, turning its contents into:
{
"exclude": ["src/test.ts", "src/**/*.spec.ts", "**/*.stories.ts", "src/jest-config"]
}Do you agree with this change?
| ``` | ||
|
|
||
| <div class="aside"> | ||
| <p>We’ve used <code>svn</code> (Subversion) to easily download a folder of files from GitHub. If you don’t have subversion installed or want to just do it manually, you can grab the folders directly <a href="https://github.com/chromaui/learnstorybook-code/tree/master/public">here</a>.</p></div> |
There was a problem hiding this comment.
I would place this part before the commands to make it more accessible : explain then act.
And be more explicit about what users have to do once files are grabbed (ie copy them into the assets folder)
There was a problem hiding this comment.
@geromegrignon that section needs a bit of work, i've been thinking about this not only for this section but for the remainder of the documentation. Probably a better wording for this would be (posting it as i have it on my end):
## Add assets
To match the intended design, you'll need to download both the font and icon directories and place its contents inside your `assets` folder.<div class="aside">
<p>We’ve used <code>svn</code> (Subversion) to easily download a folder of files from GitHub. If you don’t have subversion installed or want to just do it manually, you can grab the folders directly <a href="https://github.com/chromaui/learnstorybook-code/tree/master/public">here</a>.</p></div>svn export https://github.com/chromaui/learnstorybook-code/branches/master/public/icon assets/icon
svn export https://github.com/chromaui/learnstorybook-code/branches/master/public/font assets/fontAfter adding styling and assets, the app will render a bit strangely. That’s OK. We aren’t working on the app right now. We’re starting off with building our first component!Do you agree with this? also @tmeasday and @domyen , do you both agree with the change?
| - `title` -- how to refer to the component in the sidebar of the Storybook app, | ||
| - `excludeStories` -- information required by the story, but should not be rendered by the Storybook app. | ||
|
|
||
| To define our stories, we export a function for each of our test states to generate a story. The story is a function that returns a rendered element (i.e. a component class with a set of props) in a given state---exactly like a React [Stateless Functional Component](https://reactjs.org/docs/components-and-props.html). |
There was a problem hiding this comment.
I would change the react link to the angular documentation : https://angular.io/guide/component-interaction
There was a problem hiding this comment.
@geromegrignon i left it temporarily. I was doing some research on this and it would seems that a better wording could be "....exactly like a Stateless Functional Component, leaving out React out of the "picture". Do you agree?
…thub.com/chromaui/learnstorybook.com into chore/intro_to_storybook_angular_updates
|
@geromegrignon i've incorporated the changes in the latest commit, care to take a look at them and see if that's ok with you? |
|
With the latest commit the documentation was updated to match Storybook version 5.3. I've updated the repo and everything is working fine, asides from the issue that i've experienced with the svelte documentation that despite the packages being bumped to 5.3.5 it still throws the same error. Feel free to provide feedback |
|
@jonniebigodes is this the same as the version I reviewed accidentally the other day? Then I am good with it. |
|
@tmeasday yes..yes it is...the pr for the other piece of documentation was made from this branch, so this angular documentation "tagged along" with it. Also if you're ok, i'm ok with it aswell. Feel free to merge this and i'll address the translation shortly. If you don't mind i'll go framework by framework |
With this pr, the intro to storybook tutorial for angular is updated. It was long overdue, and for that i would like to apologize to @geromegrignon for putting this on the "back burner" (pardon the bad pun).
It will close #213 #104 #227 and #60 .
The updated code is in here
Some caveats:
package-lock.jsonfile and go from there.