Storybook: add-on knobs has incompatible typings

[justindra]

Describe the bug
The add-on knobs has incompatible typings when used with Storybook 5 (Vue version).

To Reproduce

// .storybook/config.ts
import * as Storybook from '@storybook/vue';
import { withKnobs } from '@storybook/addon-knobs';

Storybook.addDecorator(withKnobs);

TSLint then complains with the following:

(alias) function withKnobs(storyFn: RenderFunction, context: StoryContext): React.ReactElement<WrapStoryProps, string | ((props: any) => React.ReactElement<any, string | ... | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<...>)>
import withKnobs
Argument of type '(storyFn: RenderFunction, context: StoryContext) => ReactElement<WrapStoryProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)>' is not assignable to parameter of type 'StoryDecorator'.
  Types of parameters 'storyFn' and 'story' are incompatible.
    Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | Element | Renderable[]'.
      Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>' is missing the following properties from type 'Element': type, key
ts(2345)

Expected behavior
TSLint should not complain

System:

• OS: OSX, Ubuntu
• Device: Macbook Pro 2018, Thinkpad X1 Carbon
• Browser: Chrome
• Framework: Vue
• Addons: Knobs
• Version: 5.0.3

[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]

@justindra we're in the process of migrating our codebase to typescript, so this problem should go away pretty soon

@kroeder @gaetanmaisse anybody have a workaround in the meantime?

[gaetanmaisse]

I think a quick workaround is to cast withKnobs as any:

// .storybook/config.ts
import * as Storybook from '@storybook/vue';
import { withKnobs } from '@storybook/addon-knobs';

Storybook.addDecorator(withKnobs as any);

Hope it will be migrated to TS soon 😉

[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!

[justindra]

Will close as @gaetanmaisse workaround works fine. But hopefully the TS migration will be done soon too 😄

[Al-un]

Workaround works fine but when I import import { number } from "@storybook/addon-knobs/vue";, I have

ERROR in [...some path here...]/node_modules/@types/react/index.d.ts(109,31):                                       
TS2344: Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
    Type 'number' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
      Type 'T' is not assignable to type 'string'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string'.
          Type 'number' is not assignable to type 'string'.
ERROR in [...some path here...]/src/shims-tsx.d.ts(6,15):
TS2320: Interface 'Element' cannot simultaneously extend types 'VNode' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode' and 'ReactElement<any, any>' are not identical.
Version: typescript 3.5.2
Time: 1179ms
webpack built 5da0e44734431b51e9d2 in 2481ms

I use storybook for Vue components by @storybook/ui drags down React dependencies...

[ndelangen]

@Al-un what version do you use?

Can you try importing from import { number } from "@storybook/addon-knobs';?

[Al-un]

@ndelangen
I use Storybook 5.1.9 and just adding the import (without using number) triggers the error :( Storybook still runs though

[Al-un]

One way to remove the error is to comment out the content of src/shims-tsx.d.ts. I initially planned to try JSX in storybook to prevent from having a huge string template but it seems we can deal without JSX.

[ffxsam]

This is still an issue.

[shilman]

@ffxsam knobs 5.2 has been migrated to typescript so the types should be up to date. Have you tried the beta?

[ffxsam]

I generally don't use beta packages, but it's ok since I found a workaround. I'll wait!

[DanielRamosAcosta]

Workaround works fine but when I import import { number } from "@storybook/addon-knobs/vue";, I have

ERROR in [...some path here...]/node_modules/@types/react/index.d.ts(109,31):                                       
TS2344: Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
    Type 'number' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
      Type 'T' is not assignable to type 'string'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string'.
          Type 'number' is not assignable to type 'string'.
ERROR in [...some path here...]/src/shims-tsx.d.ts(6,15):
TS2320: Interface 'Element' cannot simultaneously extend types 'VNode' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode' and 'ReactElement<any, any>' are not identical.
Version: typescript 3.5.2
Time: 1179ms
webpack built 5da0e44734431b51e9d2 in 2481ms

I use storybook for Vue components by @storybook/ui drags down React dependencies...

@Al-un how did you fix this error? I'm having the same.

ERROR in /Users/danielramos/Documents/Repos/Trabajo/AcidTango/myProject/dashboard/node_modules/@e
motion/styled-base/types/helper.d.ts(8,65):
8:65 Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => 
Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assig
nable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: an
y) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not
 assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.
     6 | export type PropsOf<
     7 |   C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
  >  8 | > = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
       |                                                                 ^
     9 | 
    10 | export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
    11 | export type Overwrapped<T, U> = Pick<T, Extract<keyof T, keyof U>>
ERROR in /Users/danielramos/Documents/Repos/Trabajo/AcidTango/myProject/dashboard/node_modules/@t
ypes/react/index.d.ts(116,31):
116:31 Type 'T' does not satisfy the constraint 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
    Type 'number' is not assignable to type 'string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)'.
      Type 'T' is not assignable to type 'string'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'string'.
          Type 'number' is not assignable to type 'string'.
    114 |         T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
    115 |         P = Pick<ComponentProps<T>, Exclude<keyof ComponentProps<T>, 'key' | 'ref'>>
  > 116 |     > extends ReactElement<P, T> { }
        |                               ^
    117 | 
    118 |     /**
    119 |      * @deprecated Please use `FunctionComponentElement`
ERROR in /Users/danielramos/Documents/Repos/Trabajo/AcidTango/myProject/dashboard/node_modules/emotion-theming/types/helper.d.ts(5,65):
5:65 Type 'C' does not satisfy the constraint 'ElementType<any>'.
  Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'ElementType<any>'.
    Type 'number' is not assignable to type 'ElementType<any>'.
      Type 'C' is not assignable to type 'FunctionComponent<any>'.
        Type 'string | number | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)' is not assignable to type 'FunctionComponent<any>'.
          Type 'string' is not assignable to type 'FunctionComponent<any>'.
    3 | export type PropsOf<
    4 |   C extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>
  > 5 | > = JSX.LibraryManagedAttributes<C, React.ComponentPropsWithRef<C>>
      |                                                                 ^
    6 | 
    7 | export type Omit<T, U> = T extends any ? Pick<T, Exclude<keyof T, U>> : never
    8 | export type AddOptionalTo<T, U> = Omit<T, U> &
ERROR in /Users/danielramos/Documents/Repos/Trabajo/AcidTango/myProject/dashboard/src/shims-tsx.d.ts(6,15):
6:15 Interface 'Element' cannot simultaneously extend types 'VNode' and 'ReactElement<any, any>'.
  Named property 'key' of types 'VNode' and 'ReactElement<any, any>' are not identical.
    4 |   namespace JSX {
    5 |     // tslint:disable no-empty-interface
  > 6 |     interface Element extends VNode {}
      |               ^
    7 |     // tslint:disable no-empty-interface
    8 |     interface ElementClass extends Vue {}
    9 |     interface IntrinsicElements {
Version: typescript 3.7.2
Time: 16376ms

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.1.36:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.