Generate .tsx stories in typescript projects

[shilman]

Splitting out "generate tsx stories" as a feature request out of #5028

What

sb init has a --story-format option, which can be csf | csf-ts | mdx. csf-ts templates exist for a few of the different project types. We should have csf-ts templates for all of the different project types.

The default format is csf. But if the user doesn't specify a format, and sb init detects that it's a typescript project, it should use the csf-ts format. It looks like a dependency or devDependency on typescript and the presence of a tsconfig.json is a reasonable heuristic.

It should fallback to csf format if csf-ts is unavailable for the given project type, since we can't guarantee that new project types will always have a csf-ts template.

[Keraito]

I went through the quick start guides of all relevant frameworks/setups:

Framework/Setup	Indications of TypeScript
CRA2 w/TS	typescript devDependency, tsconfig.json optional. The React starter on the TS documentation site uses a version of CRA that lacked TS support.
Angular	tsconfig.json, tslint.json, typescript devDependency
Babel	tsconfig.json, typescript devDependency
React Native	tsconfig.json, typescript devDependency
Vue	tsconfig.json, typescript devDependency
Knockout	tsconfig.json, typescript devDependency
JS -> TS	tsconfig.json, typescript devDependency

The most straightforward way to detect a TS project is to check devDependencies on typescript. If we want to cover cases where the previous condition might not be inclusive enough (global install of typescript for example), we could also check for the existence of tsconfig.json.

[Keraito]

I looked into this: currently, we're using merge-dirs to copy the generator template files (which are js files) over to the user's directory. We can either create new TypeScript templates for every generator (not preferable), or just change the extensions.

• We can either change (rename the files) the extension before the merging is done. This would mean that we need to duplicate + apply those changes at the user's local side. I'm not sure how well this goes with usages via npx f.e. and personally I don't like this approach.
• We can try to do it after, but the structure of the generator templates are all different, so it would require a lot of effort to distinguish between Storybook specific files or existing user's files.
• Or we can do it during the merging, which is prefered. But currently this while process is managed by merge-dirs. I've opened a PR (Add file modification before merging binocarlos/merge-dirs#8) that allows us to apply changes onto files during merge, which should make generating TypeScript files way easier. The repo doesn't seem to be quite maintained anymore, so we will have to see if any progress will be made in the PR.

[shilman]

@Keraito We could also switch to using recursive-copy which already supports this feature:

https://www.npmjs.com/package/recursive-copy

[Keraito]

Yeah that sounds good @shilman, since the PR I created at merge-dirs still hasn't received any attention.

[Keraito]

Took a bit longer, but I started working on this again :)

…

On Sun, 3 Mar 2019 at 15:42, Michael Shilman ***@***.***> wrote: @Keraito <https://github.com/Keraito> We could also switch to using recursive-copy which already supports this feature: https://www.npmjs.com/package/recursive-copy — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#5050 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFrfcaUOFrFthjUID42Vn6t5hlT9VBpiks5vS99agaJpZM4ZadBp> .

[shilman]

@Keraito #7100

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.44 containing PR #10547 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.