Typescript

[akmaluddin]

I am wondering is there a full example of working typescript

I keep bumping into type issues that seems to convoluted to fix and most working examples and docs doesn't fully document the types or even worse, the running examples are from a previous version that doesn't match to the latest

Would love to have this implemented but now its just too difficult and I am not comfortable in using any type just as an escape hatch

[snowystinger]

Do you have a specific issue that you're running into? All of our examples on our docs have as much TS as they need in order to be functional. It is definitely minimal and we do have a goal to expand them. #865

Can you point to an example that is running on a previous version?

[akmaluddin]

Sure! I am currently following the examples of Combobox found here, the code examples have very minimal type reference so its very difficult to nail the right types.

So I head to the running examples here and noticed that the type imports are different as well as the package versions

e.g. in the running example

import type { AriaPopoverProps } from "@react-aria/overlays";

should be I guess

import type { AriaPopoverProps } from "react-aria";

[akmaluddin]

I am running react-aria: 3.27.0 btw, sorry should have included this

[snowystinger]

Huh... I don't see any errors in the codesandbox. Here's one with the versions bumped to the same as you've indicated https://codesandbox.io/s/hopeful-silence-hydq6z?file=/src/App.tsx

[akmaluddin]

Hmmm, this is what I am getting after tsc

> tsc

src/search-box/search-box.tsx:7:39 - error TS2307: Cannot find module '@react-aria/overlays' or its corresponding type declarations.

7 import type { AriaPopoverProps } from '@react-aria/overlays';

for brevity, here are what I might think are salient packages installed as deps

"dependencies": {
        "react": "^18.2.0",
        "@types/react": "^18.2.14",
        "react-aria": "^3.27.0",
        "react-aria-components": "1.0.0-alpha.6",
        "react-icons": "^4.7.1",
        "react-stately": "^3.25.0"
    },

[snowystinger]

I think if you haven't declared an explicit dependency on @react-aria/overlays it's better to import it from react-aria. That way you aren't relying on it being installed via some implicit dependency. Maybe that's why your TS is complaining?

[akmaluddin]

It could be, but somehow in the code sandbox you provided that behaviour is not being observed. 🤷‍♂️. JS can be weird

[hastebrot]

I use this .npmrc so vscode/tsc finds the files:

# let pnpm include @react-aria/* and @react-stately/* in node_modules.
public-hoist-pattern[]=*react-aria*
public-hoist-pattern[]=*react-stately*

works with npm and pnpm. bun automatically does this.

[akmaluddin]

Also just to double check with the code examples

import {Item, useComboBoxState} from 'react-stately';

Is Item an export from react-stately or RAC?

[snowystinger]

Yeah, you do have to click through a little, we do have them documented. If you follow the link in the Dynamic Collection section over to https://react-spectrum.adobe.com/react-stately/collections.html#static-collections, at the bottom of this section, we have an API popover for Item.
Is that what you're asking for to be improved? I agree this is non-obvious. Does your editor take you to the right declaration if you CMD+click on an Item? (shortcut key may change depending on OS and Editor)

[akmaluddin]

Ahh, that was not apparent for me 😅!. Yep I can follow through the definitions through my IDE and can quickly identify the types but would be nice if its documented clearly under react-stately as I am not so sure if its stable to be used.

Also, I am in the midst of introducing react-aria into the codebase, and some of the junior developers will have trouble understanding what props are part of it.

[snowystinger]

No worries, it is quite stable. I think we can definitely feature it a little more prominently somewhere. The trick will just be where.

[akmaluddin]

Somewhere in react stately? Since its imported from react-stately. This is just my opinion 😁

[snowystinger]

I've opened an issue #5038