Typescript error with Input component: "Property 'css' is missing"

[danielp982]

• windmill-react-ui version: 0.6.0

Relevant code or config:

(Simplified example. Typescript 4.2.4 is used.)

import { Input } from '@windmill/react-ui';

const TestComponent = () => (
  <>
    <Input />
  <>
);
export default TestComponent;

What you did:

We were trying to import the Input component from the Windmill React library. We have Typescript 4.2.4 embedded into our project and it gives us the following error: "Property 'css' is missing" (see screenshot for the full error message). This error persists regardless of what standard properties we include in the declaration (e.g. type="checkbox"). If we add the css property to the code and provide it any value: (e.g. <Input css="" />), the Typescript error disappears. As far as I'm aware an input component has never required or even included a css property.

What happened:

Relevant screenshot providing the full error message:

Problem description:

The current behaviour with Typescript doesn't match any of the documentation, and leaving it as is causes our builds to fail. To work around this issue we've created a wrapper component to mask the css property from the rest of our code (see below), but it would be nice not to have this workaround as I'm sure this isn't an intended behaviour.

import { Input } from '@windmill/react-ui';
import { InputProps } from '@windmill/react-ui/dist/Input';

const InputWrapper = (props: InputProps) => (
  <Input css={null} {...props} />
);

export default InputWrapper;

Suggested solution:

I found within Input.d.ts that the Input component is declared with a "css" property. Maybe this shouldn't be part of the declaration?

Note:

I would like to mention that we've really been enjoying the library so far! Keep up the great work.

[awesomeunleashed]

I looked into this as well a little bit ago. The css property is coming from Storybook; I tried compiling the library without Storybook, and the property was gone. I'm not sure how to resolve that (short of removing Storybook), though.

Select and (I believe) Textarea also have this issue.

[xerod]

Confirm this happen on my machine too:

"dependencies": {
    "@windmill/react-ui": "^0.6.0",
}

there is this issue on the storybooks repo providing some temporary solution for their library (I've not tested it yet):
storybookjs/storybook#13436 (comment)

[deyanskiq]

It's happening regardless of Storybook usage. Any update?

[awesomeunleashed]

Adding "src/stories" to exclude in tsconfig.json would fix this issue. I don't know if it would negatively affect Storybook users, though, as I am not one.