Document using typescript for storybook configuration files

[simonwep]

Is your feature request related to a problem? Please describe
Currently there are several issues / PR's regarding using typescript to configure storybook including:

• Add support for .storybook/main.ts file #9765 - Initial request to support typescript in the main config file.
• Examples: Change main.js to main.ts to show it's possible #9775 - Small demonstration of that it works, somehow?
• CLI: Typings for main.ts #11843 - Exposing official (?) types to be used in a main.ts file.
• ...and possibly more

Under docs/configure only a main.js is talked about. It's nowhere mentioned that it's possible (?!) to use typescript to configure storybook. It'd be nice to have examples and a guide for how to set it up / make it work - it's really helpful to have auto-completion for config stuff.

This might also be related to #14429 since I'm also having troubles using .mdx files...

Describe the solution you'd like

I think it'd be helpful to mention that it's possible to use typescript under docs/configure - right now it's only about main.js and I, by chance, found out that it's somehow possible to use typescript?!

I tried following the steps from #9765 but I'm getting the following errors:

info @storybook/vue3 v6.4.0-alpha.36
info 
✔ Port 6006 is not available. Would you like to run Storybook on port 6007 instead? … yes
ERR! SyntaxError: xxx/.storybook/main.ts: Unexpected token, expected "," (16:18)
ERR! 
ERR!   14 |     'builder': 'storybook-builder-vite'
ERR!   15 |   },
ERR! > 16 |   viteFinal(config: UserConfig) {
ERR!      |                   ^
ERR!   17 |     return {
ERR!   18 |       ...config,
ERR!   19 |       resolve: {
ERR!     at Parser._raise (xxx/node_modules/@babel/parser/lib/index.js:808:17)
ERR!     at Parser.raiseWithData (xxx/node_modules/@babel/parser/lib/index.js:801:17)
ERR!     at Parser.raise (xxx/node_modules/@babel/parser/lib/index.js:762:17)
ERR!     at Parser.unexpected (xxx/node_modules/@babel/parser/lib/index.js:3267:16)
ERR!     at Parser.expect (xxx/node_modules/@babel/parser/lib/index.js:3241:28)
ERR!     at Parser.parseBindingList (xxx/node_modules/@babel/parser/lib/index.js:10553:14)
ERR!     at Parser.parseFunctionParams (xxx/node_modules/@babel/parser/lib/index.js:13571:24)
ERR!     at Parser.parseMethod (xxx/node_modules/@babel/parser/lib/index.js:12213:10)
ERR!     at Parser.parseObjectMethod (xxx/node_modules/@babel/parser/lib/index.js:12142:19)
ERR!     at Parser.parseObjPropValue (xxx/node_modules/@babel/parser/lib/index.js:12175:23)
ERR!     at Parser.parsePropertyDefinition (xxx/node_modules/@babel/parser/lib/index.js:12099:10)
ERR!     at Parser.parseObjectLike (xxx/node_modules/@babel/parser/lib/index.js:11988:25)
ERR!     at Parser.parseExprAtom (xxx/node_modules/@babel/parser/lib/index.js:11479:23)
ERR!     at Parser.parseExprSubscripts (xxx/node_modules/@babel/parser/lib/index.js:11125:23)
ERR!     at Parser.parseUpdate (xxx/node_modules/@babel/parser/lib/index.js:11105:21)
ERR!     at Parser.parseMaybeUnary (xxx/node_modules/@babel/parser/lib/index.js:11083:23)

After adding ts-node and cross-env:

info @storybook/vue3 v6.4.0-alpha.36
info 
✔ Port 6006 is not available. Would you like to run Storybook on port 6007 instead? … yes
ERR! xxx/.storybook/main.ts:1
ERR! import { resolve } from 'path';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1001:16)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1049:27)
ERR!     at Module.m._compile (xxx/node_modules/ts-node/src/index.ts:1310:23)
ERR!     at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (xxx/node_modules/ts-node/src/index.ts:1313:12)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:92:18)
ERR!     at interopRequireDefault (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (xxx/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (xxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:71)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async buildDev (xxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:160:5)
ERR!  xxx/.storybook/main.ts:1
ERR! import { resolve } from 'path';
ERR! ^^^^^^
ERR! 
ERR! SyntaxError: Cannot use import statement outside a module
ERR!     at wrapSafe (internal/modules/cjs/loader.js:1001:16)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1049:27)
ERR!     at Module.m._compile (xxx/node_modules/ts-node/src/index.ts:1310:23)
ERR!     at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (xxx/node_modules/ts-node/src/index.ts:1313:12)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:92:18)
ERR!     at interopRequireDefault (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (xxx/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (xxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:71)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async buildDev (xxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:160:5)

Even though it does type-check the files:

✔ Port 6006 is not available. Would you like to run Storybook on port 6007 instead? … yes
ERR! TSError: ⨯ Unable to compile TypeScript:
ERR! .storybook/main.ts:16:13 - error TS7006: Parameter 'config' implicitly has an 'any' type.
ERR! 
ERR! 16   viteFinal(config) {
ERR!                ~~~~~~
ERR! 
ERR!     at createTSError (xxx/node_modules/ts-node/src/index.ts:692:12)
ERR!     at reportTSError (xxx/node_modules/ts-node/src/index.ts:696:19)
ERR!     at getOutput (xxx/node_modules/ts-node/src/index.ts:883:36)
ERR!     at Object.compile (xxx/node_modules/ts-node/src/index.ts:1185:30)
ERR!     at Module.m._compile (xxx/node_modules/ts-node/src/index.ts:1309:30)
ERR!     at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR!     at Object.require.extensions.<computed> [as .ts] (xxx/node_modules/ts-node/src/index.ts:1313:12)
ERR!     at Module.load (internal/modules/cjs/loader.js:950:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:790:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:974:19)
ERR!     at require (internal/modules/cjs/helpers.js:92:18)
ERR!     at interopRequireDefault (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:64:16)
ERR!     at serverRequire (xxx/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js:101:10)
ERR!     at getPreviewBuilder (xxx/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js:25:55)
ERR!     at buildDevStandalone (xxx/node_modules/@storybook/core-server/dist/cjs/build-dev.js:101:71)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!  .storybook/main.ts:16:13 - error TS7006: Parameter 'config' implicitly has an 'any' type.
ERR! 
ERR! 16   viteFinal(config) {
ERR!                ~~~~~~
ERR! 

I did the following:

• Adding ".storybook/**/*.ts" to include in tsconfig.json.
• Install ts-node and cross-env (although I don't really see a connection here tbh).
• Make main/preview.js a typescript file and, since I'm using the vite-builder, imported vites config type to extend it as mentioned here.

I'm pretty sure mine way is not correct in any way, therefore it'd be nice to have an actual explanation of how I can effectively use typescript to configure storybook. Anyways, I can create a dummy repository if requested.

Describe alternatives you've considered
Right now, just changing the file-extension to .ts and not using types at all (which defeats it's purpose).

Are you able to assist to bring the feature to reality?

Unfortunately no, storybook is rather new to me.

Additional context

• OS: Ubuntu 21.04
• Node / NPM: v14.17.1 / v7.18.1
• Typescript: v4.4.3
• Vite: v2.5.7
• Dependencies:
  • @storybook/vue3: v6.4.0-alpha.36
  • @storybook/addon-essentials: v6.4.0-alpha.36
  • @storybook/addon-a11y: v6.4.0-alpha.36
  • @storybook/theming: v6.4.0-alpha.36
  • storybook-builder-vite: v0.0.12

[shilman]

cc @jonniebigodes

[joshwooding]

Right now I'm using the vite-builder and typescript configuration files using:

interface ExtendCoreConfig extends Omit<CoreConfig, "builder"> {
  builder?: CoreConfig["builder"] | "storybook-builder-vite";
}

interface ExtendedStorybookConfig extends Omit<StorybookConfig, "core"> {
  core?: ExtendCoreConfig;
  viteFinal?: (
    config: UserConfig,
    { configType }: { configType: "DEVELOPMENT" | "PRODUCTION" }
  ) => Promise<UserConfig>;

would be nice for an official solution but this works for me currently.