Storybook: Portability typescript error with @storybook/theming

[AndrewOCC]

Describe the bug
When using @storybook/theming outside of the repo, components created with styled cannot resolve types correctly – as

An example of the error returned is below:
The inferred type of 'StorybookStyledComponent' cannot be named without a reference to '@storybook/theming/node_modules/@emotion/styled-base'. This is likely not portable. A type annotation is necessary.ts(2742)

A work-around would be to import StyledComponents manually and pass in the three generic types expected, but doing so relies knowledge of the internal Emotion API and requires Emotion to be added as a direct dependency. It also prevents @storybook/theming from acting as a pure wrapper around Emotion.

To Reproduce
Steps to reproduce the behavior:

1. Import styled from @storybook/theming into a new project using typescript
2. Create a component using the styled API, with or without themes or styled props
3. Typescript should error out with the above error type

Expected behavior
It should be possible to import styled from @storybook/theming and type it without importing Emotion's internal types.

Code snippets

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

export const StorybookStyledComponent = styled.span`
  color: black;
`;

System:
System: OS: macOS 10.15.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Binaries: Node: 12.3.1 - ~/.nvm/versions/node/v12.3.1/bin/node Yarn: 1.22.0 - ~/Documents/Code/atlassian-frontend/build/storybook-addon-performance/node_modules/.bin/yarn npm: 6.9.0 - ~/.nvm/versions/node/v12.3.1/bin/npm Browsers: Chrome: 80.0.3987.162 Firefox: 74.0 Safari: 13.1 npmPackages: @storybook/addons: ^5.3.14 => 5.3.14 @storybook/components: ^5.3.17 => 5.3.17 @storybook/react: ^6.0.0-alpha.19 => 6.0.0-alpha.27 @storybook/theming: ^5.3.17 => 5.3.17

[shilman]

cc @ndelangen @gaetanmaisse @kroeder

@AndrewOCC probably unrelated, but you should keep all your @storybook/* at the same version. so either 6.0-alpha.27 OR 5.3.17, but not mixed.

[ndelangen]

I've seen the The inferred type of '...' cannot be named without a reference to '...'. This is likely not portable. A type annotation is necessary.ts(2742) inside the monorepo a few times also, but I'm unsure how to solve it.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

• Release 6.0.0-beta.12+
• Migration instructions
• Updated docs

Thanks for your help and support getting this stable for release!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!