TypeScript compile errors with CSF & Knobs

[Benwick91]

Describe the bug

TS Error with Knobs
If I use especially the select Option from Knobs with TypeScript, the TypeScript Compiler throws an error.

TS Error with CSF
The error Message with Knobs:
Type 'string' is not assignable to type '"secondary" | "inverted" | undefined'.

Also the compiler throws an error with the components, which only has a default export (I use declaration: true in the tsconfig) - Or can I exclude the stories when I compile?
error TS4082: Default export of the module has or is using private name 'ModalProps'.

 export default {
   ~~~~~~~~~~~~~~~~
12   component: Modal,
   ~~~~~~~~~~~~~~~~~~~
13   title: 'Modal',
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
14 };

Expected behavior
I want to use Knobs and the select Option with TypeScript and want to use the Components with default export without TypeScript Compile errors.

Code snippets
My usage of Knobs in the story:

import React, { FunctionComponent } from 'react';
import { select } from '@storybook/addon-knobs';
import Button from './Button';

export default {
  component: Button,
  title: 'Button',
};

const opt = {
  Primary: '',
  Secondary: 'secondary',
  Inverted: 'inverted',
};

export const Component: FunctionComponent = () => (
  <Button
    variant={select('Variant', opt, 'secondary')}
  >
    Text
  </Button>
);

My Components export:

import React, { FunctionComponent } from 'react';

interface ModalProps {
  small?: boolean;
  isOpen?: boolean;
}

const Modal: FunctionComponent<ModalProps> = (props: ModalProps) => {
  return (
    <div small={props.small}>
        {props.isOpen && <h1>Test</h1>}
    </div>
  );
};

export default Modal;

And Import in the story:
import Modal from './Modal';

The error doesn't come when I export the Interface, too:

export interface ModalProps {
  small?: boolean;
  isOpen?: boolean;
}

and export the default Component at the end:

export default Modal;
But this seems to be not a good way, or am I wrong?
System:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
  Binaries:
    Node: 12.16.1 - ~/.nvm/versions/node/v12.16.1/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.16.1/bin/npm
  Browsers:
    Chrome: 80.0.3987.163
    Firefox: 74.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-a11y: ^5.3.17 => 5.3.17 
    @storybook/addon-actions: ^5.3.17 => 5.3.17 
    @storybook/addon-console: ^1.2.1 => 1.2.1 
    @storybook/addon-docs: ^5.3.17 => 5.3.17 
    @storybook/addon-info: ^5.3.17 => 5.3.17 
    @storybook/addon-knobs: ^5.3.17 => 5.3.17 
    @storybook/addon-links: ^5.3.17 => 5.3.17 
    @storybook/addon-notes: ^5.3.17 => 5.3.17 
    @storybook/addon-storyshots: ^5.3.17 => 5.3.17 
    @storybook/addon-storysource: ^5.3.17 => 5.3.17 
    @storybook/addon-viewport: ^5.3.17 => 5.3.17 
    @storybook/addons: ^5.3.17 => 5.3.17 
    @storybook/preset-create-react-app: ^2.1.1 => 2.1.1 
    @storybook/react: ^5.3.17 => 5.3.17 

Can somebody help me? I can run storybook without problems, but I need to compile the TypeScript for a package and this doesn't work with these errors. Thank you very much!

[yannbf]

Hey @Benwick91, I might be able to help you with that!

1 - In your button, create a type for your variation and export it.

// Button.tsx
import React from 'react'

export type Variant = 'secondary' | 'inverted' | undefined

type Props = {
  variant: Variant
}

export const Button: React.FC<Props> = ({ variant }) => {
  return (
    <>...Your implementation with {variant} here...</>
  )
}

2 - In your story file, define the type of the option in the select function like: select<YourType>(....)

// Button.stories.tsx
import React, { FunctionComponent } from 'react'
import { select, withKnobs } from '@storybook/addon-knobs'

import { Button, Variant } from './Button'

const options: Record<string, Variant> = {
  Primary: undefined,
  Secondary: 'secondary',
  Inverted: 'inverted',
}

export const Simple: FunctionComponent = () => (
  <Button variant={select<Variant>('Variant', options, 'secondary')}>Text</Button>
)

export default {
  component: Button,
  title: 'Button',
}

3 - Make sure you are adding the withKnobs decorator, either globally or in the decorators property of your default export.

For the Modal issue, if you have the declaration flag on, and the story files are included in your tsconfig then you need to export whatever interface your code uses, otherwise the compiler will not be able to create the declaration files.
If you use type instead of interface though, your compiler will not complain anymore.

Also, small is not a valid property of div so that will also break your code.

[Benwick91]

@yannbf Thank you so much!!! That is the way to get it worked. Thanks for the good and detailed answer.

[yannbf]

No worries, happy to help!

[csantos-nydig]

I'm getting this error with the example components I get from npx sb init (https://storybook.js.org/docs/react/get-started/install)
is this fix @yannbf something that should be included as part of that init phase?