TS Migration: addon-notes

[kroeder]

Issue: N/A

What I did

@ndelangen and I talked about doing a POC for TypeScript in Storybook

This POC needs to answer the following questions:

• How does the transition from *.js to *.ts looks like for an example addon (I took addon-notes)
  • I had to configure a couple of things that are now available for the next packages we might move to ts
  • Renaming *.js to *.ts also might cause a couple of red lines. Mostly imports that must be used differently or type mismatches.
  • Rewriting the code base took me about 1-2 hours. Most of the time I worked on this I had issues with the initial configuration
• CI must pass with everything else working as usual
  • I guess except Danger everything's green 🙂
• eslint must play along with tslint. They should not get in conflict
  • It seems that tslint was already configured. I have not noticed any weird linting errors
• Performance of yarn dev should not get significantly slower as it is right now
  • Just running yarn dev:ts is super fast, yarn dev is slow as usual ;)

What I found out

• tslint.json already exists in the root directory, must check if it works
• yarn dev:ts already searches for tsconfig.json files inside all workspaces. If it found one, it compiles the project to .js
• .tsx files can be compiled to .js as well

Some side notes

• The current implementation has room for e.g. outsourcing the interfaces in a seperate file or even re-use them in other files but since I'm not familiar with the actual implementation I decided to not make this as clean as possible in the POC
• Some things might be not correct because I am not familiar with react but I've added todos on everything I need to figure out

[kroeder]

Currently working on a fix for imports

It should import from
import { withNotes } from '@storybook/addon-notes'
but instead this happens
import {withNotes} from '@storybook/addon-notes/dist/addon';

[kroeder]

@ndelangen I added comments to my initial post. Feel free to check the changes and ask me questions - or lets talk later this week 🙂

[apastuhov]

Nice start! I've added a few comments about React-TS specific stuff.

[codecov]

Codecov Report

Merging #4758 into next will increase coverage by 0.12%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             next    #4758      +/-   ##
==========================================
+ Coverage   34.94%   35.06%   +0.12%     
==========================================
  Files         566      563       -3     
  Lines        7020     6970      -50     
  Branches      937      932       -5     
==========================================
- Hits         2453     2444       -9     
+ Misses       4071     4031      -40     
+ Partials      496      495       -1

---

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 aac9138...1a4e510. Read the comment docs.

[igor-dv]

Lgtm

[kroeder]

As discussed here https://stackoverflow.com/questions/41746028/proptypes-in-a-typescript-react-application#comment80415295_43187969 I should add prop types again because non-typescript consumers don't profit from definition files

[apastuhov]

LGTM, otherwise there is one small comment to improve.