add typescript docs #3361

tsiq-swyx · 2018-04-05T15:59:12Z

Issue: #3270

What I did

Added typescript docs

How to test

its just docs :)

tsiq-swyx · 2018-04-05T15:59:33Z

cc @danielduan

danielduan · 2018-04-05T16:05:03Z

docs/src/pages/configurations/custom-webpack-config/index.md

 ## Using Your Existing Config

 You may have an existing Webpack config for your project. So, you may need to copy and paste some config items into Storybook's custom Webpack config file.

 But you don't need to. There are a few options:

-   Simply import your main Webpack config into Storybook's `webpack.config.js` and use the loaders and plugins used in that.
-   Create a new file with common Webpack options and use it in both inside the main Webpack config and inside Storybook's `webpack.config.js`.
+* Simply import your main Webpack config into Storybook's `webpack.config.js` and use the loaders and plugins used in that.


Can you remove this Simply?. If it's so simple, users wouldn't need to read the docs.

It should just say Import your main Webpack...

hahaha i didnt write that

danielduan · 2018-04-05T16:05:16Z

docs/src/pages/configurations/custom-webpack-config/index.md

@@ -19,19 +19,19 @@ Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. Th
 Simply add the following content to a file called `webpack.config.js` in your Storybook config directory (`.storybook` by default ).


same with this Simply

hahaha i didnt write that

danielduan · 2018-04-05T16:07:00Z

docs/src/pages/configurations/typescript-config/index.md

+
+```bash
+yarn add -D typescript
+yarn add -D awesome-typescript-loader # alternative to ts-loader


are these two loaders interchangeable in this guide? we should leave a note about it here.

danielduan · 2018-04-05T16:08:08Z

docs/src/pages/configurations/typescript-config/index.md

+
+## Setting up Typescript to work with Storybook
+
+We first have to use the [custom Webpack config in full control mode, extending default configs](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default):


I think relative URLs work here, so /configurations/custom...

danielduan · 2018-04-05T16:12:25Z

docs/src/pages/configurations/typescript-config/index.md

+
+## Related Issues and Helpful Resources
+
+* [Issue: Add proper typescript webpack setup in readme #1778](https://github.com/storybooks/storybook/issues/1778)


Let's leave these GitHub issues out of the docs. It's a lot of stuff to read through to get very little information. If you think there are useful information there, please copy and paste them to the doc instead.

danielduan

Thanks for the PR, really appreciate it! Just some minor fixes and we're good to go.

codecov · 2018-04-05T16:54:15Z

Codecov Report

Merging #3361 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #3361   +/-   ##
=======================================
  Coverage   36.82%   36.82%           
=======================================
  Files         458      458           
  Lines       10033    10033           
  Branches      905      908    +3     
=======================================
  Hits         3695     3695           
+ Misses       5793     5792    -1     
- Partials      545      546    +1

Impacted Files	Coverage Δ
addons/a11y/src/components/Tabs.js	`0% <0%> (ø)`	⬆️
...-native/src/preview/components/OnDeviceUI/index.js	`0% <0%> (ø)`	⬆️
.../ui/components/stories_panel/stories_tree/index.js	`40.55% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/containers/addon_panel.js	`23.52% <0%> (ø)`	⬆️
addons/jest/src/components/Indicator.js	`0% <0%> (ø)`	⬆️
addons/info/src/components/types/proptypes.js	`88.88% <0%> (ø)`	⬆️
lib/ui/src/libs/withLifecycleDecorator.js	`18.91% <0%> (ø)`	⬆️
lib/ui/src/modules/ui/configs/init_panels.js	`25% <0%> (ø)`	⬆️
lib/core/src/client/preview/config_api.js	`46.55% <0%> (ø)`	⬆️
addons/jest/src/components/Result.js	`0% <0%> (ø)`	⬆️
... and 57 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 119d16c...3925edd. Read the comment docs.

tsiq-swyx · 2018-04-05T16:54:31Z

I have updated with your requested fixes

estaub · 2018-04-05T17:18:34Z

In the tsconfig.json section, you've buried the lede: the main copy/paste content should work for the default configuration, where stories is a peer of src. The main takeaway there (I think) is to be sure to include the stories; this shouldn't be only in an easily-overlooked sentence below the code.

tsiq-swyx · 2018-04-05T17:59:12Z

I also wrote this https://dev.to/swyx/quick-guide-to-setup-your-react--typescript-storybook-design-system-1c51

ndelangen · 2018-04-05T20:39:04Z

@tsiq-swyx This is absolutely epic! Thank you a ton 🙇

When my batch of stickers arrive, I'm sending you some, contact me via twitter or slack to send me your address, if you'd like them 👍

tsiq-swyx · 2018-04-05T21:00:02Z

oh haha cant say no to that. twitter it is

swyxio · 2018-04-06T02:49:45Z

(not at all urgent, just curious) Whats the process for this being deployed to the live docs site? you guys dont use netlify for CD?

Hypnosphi · 2018-04-06T08:41:48Z

We deploy from release branch to avoid confusion, so I'll just pick this pr there now, and it'll be deployed authomatically

add typescript docs

Hypnosphi · 2018-04-06T12:02:10Z

And it's live https://storybook.js.org/configurations/typescript-config/

add typescript docs

c8af430

tsiq-swyx requested review from Hypnosphi, ndelangen and shilman as code owners April 5, 2018 15:59

danielduan reviewed Apr 5, 2018

View reviewed changes

danielduan requested changes Apr 5, 2018

View reviewed changes

danielduan added documentation typescript addon: info react labels Apr 5, 2018

incorporate danielduan comments

7d6e099

add ed staub fixes

0933c13

danielduan approved these changes Apr 5, 2018

View reviewed changes

Merge branch 'master' into addDocsTS

3925edd

ndelangen approved these changes Apr 5, 2018

View reviewed changes

ndelangen merged commit 5c84288 into storybookjs:master Apr 5, 2018

Hypnosphi added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Apr 6, 2018

Hypnosphi pushed a commit that referenced this pull request Apr 6, 2018

Merge pull request #3361 from sw-yx/addDocsTS

d51b21b

add typescript docs

Hypnosphi added the patch:done Patch/release PRs already cherry-picked to main/release branch label Apr 6, 2018

This was referenced Dec 23, 2020

[Snyk] Security upgrade axios from 0.18.1 to 0.21.1 Watemlifts/storybook#166

Closed

[Snyk] Security upgrade axios from 0.18.1 to 0.21.1 Watemlifts/storybook#167

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add typescript docs #3361

add typescript docs #3361

tsiq-swyx commented Apr 5, 2018

tsiq-swyx commented Apr 5, 2018

danielduan Apr 5, 2018

tsiq-swyx Apr 5, 2018

danielduan Apr 5, 2018

tsiq-swyx Apr 5, 2018

danielduan Apr 5, 2018 •

edited

Loading

tsiq-swyx Apr 5, 2018

danielduan Apr 5, 2018

tsiq-swyx Apr 5, 2018

danielduan Apr 5, 2018 •

edited

Loading

danielduan left a comment

codecov bot commented Apr 5, 2018 •

edited

Loading

tsiq-swyx commented Apr 5, 2018

estaub commented Apr 5, 2018

tsiq-swyx commented Apr 5, 2018

ndelangen commented Apr 5, 2018

tsiq-swyx commented Apr 5, 2018

swyxio commented Apr 6, 2018

Hypnosphi commented Apr 6, 2018

Hypnosphi commented Apr 6, 2018

		@@ -19,19 +19,19 @@ Let's say you want to add [SASS](http://sass-lang.com/) support to Storybook. Th
		Simply add the following content to a file called `webpack.config.js` in your Storybook config directory (`.storybook` by default ).


		## Setting up Typescript to work with Storybook

		We first have to use the [custom Webpack config in full control mode, extending default configs](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default):


		## Related Issues and Helpful Resources

		* [Issue: Add proper typescript webpack setup in readme #1778](https://github.com/storybooks/storybook/issues/1778)

add typescript docs #3361

add typescript docs #3361

Conversation

tsiq-swyx commented Apr 5, 2018

What I did

How to test

tsiq-swyx commented Apr 5, 2018

danielduan Apr 5, 2018

Choose a reason for hiding this comment

tsiq-swyx Apr 5, 2018

Choose a reason for hiding this comment

danielduan Apr 5, 2018

Choose a reason for hiding this comment

tsiq-swyx Apr 5, 2018

Choose a reason for hiding this comment

danielduan Apr 5, 2018 • edited Loading

Choose a reason for hiding this comment

tsiq-swyx Apr 5, 2018

Choose a reason for hiding this comment

danielduan Apr 5, 2018

Choose a reason for hiding this comment

tsiq-swyx Apr 5, 2018

Choose a reason for hiding this comment

danielduan Apr 5, 2018 • edited Loading

Choose a reason for hiding this comment

danielduan left a comment

Choose a reason for hiding this comment

codecov bot commented Apr 5, 2018 • edited Loading

Codecov Report

tsiq-swyx commented Apr 5, 2018

estaub commented Apr 5, 2018

tsiq-swyx commented Apr 5, 2018

ndelangen commented Apr 5, 2018

tsiq-swyx commented Apr 5, 2018

swyxio commented Apr 6, 2018

Hypnosphi commented Apr 6, 2018

Hypnosphi commented Apr 6, 2018

danielduan Apr 5, 2018 •

edited

Loading

danielduan Apr 5, 2018 •

edited

Loading

codecov bot commented Apr 5, 2018 •

edited

Loading