@storybook/theming causes type errors during tsc

Describe the bug Ok this is a fun one. Basically tsc complains about missing react typings, when trying to use create of @storybook/theming. This is because:

• @storybook/theming imports @emotion/*
• which in turn imports react
• which in turn requires @types/react
• which would have to be installed manually
• which would then declare global JSX namespace
• which would then conflict with the JSX namespace of Vue

To Reproduce

• create Vue project with TS support via Vue CLI 3
• Storybook via vue-cli-plugin-storybook (TS conversion and config must be done by hand)
• Vue JSX/TSX typings -> https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-typescript/generator/template/src/shims-tsx.d.ts
• Create theme:

import { create } from '@storybook/theming';

export default create({
  base: 'light',
  brandTitle: 'My Storybook',
});

• npx tsc

Expected behavior Use create from @storybook/theming without requiring react typings and therefore no JSX namespace conflicts.

System:

• OS: any
• Device: any
• Browser: any
• Framework: vue
• Version: 5

Additional context Workaround:

• dont use storybook theming
• or dont use vue jsx/tsx
• or run tsc with --skipLibCheck

Solution:

• provide a create theme function/module that does not use @emotion/*
• the only stuff that create requires from @emotion/* is import { css, keyframes } from '@emotion/core'; in animation.ts)
• where css type doesnt require react typings (so no problem here), but is imported from @emotion/core types, which imports react typings for other stuff (this is a problem) -> import css from @emotion/css
• where keyframes type doesnt require react typings (so no problem here), but its type is declared in @emotion/core type declaration file that imports react typings, but actually dont use react typings for keyframes itself (but for other stuff) -> ask for upstream change in emotion (which would maybe require some reorganisation of types/exports on their part) or reimplement/c&p keyframes into @storybook/theming or dont use keyframes during create

[backbone87]

still relevant

[blake-newman]

@shilman it looks like the @storybook/theming package doesn’t cause TS + JSX conflicts.

However it seems the @storybook/knobs package causes this issue still as it ships @types/react-color. I’m unsure if this is intentional.

The above causes the @types/react package to be installed when using the @storybook/knobs package. If the knobs addon can ship without this types dependency then this should resolve the Vue + TSX issues.