Add TypeScript Examples

[matamatanot]

🙋 Documentation Request

I'd like examples of TypeScript. Please consider adding.

For examples, React Hook Form api docs offer JS and TS examples.
You can switch the displayed code snippets with a button.

🧢 Your Company/Team

[matamatanot]

@devongovett
Do you have any thoughts?
If we implement a mechanism to display TS examples in the same way as the React Hook Form, Many users can contribute.

Of course I would like to contribute to the addition of examples.

[dannify]

Hey @matamatanot. I think this is something we would be happy to have in the docs but the main question would be how would it work? I think it would require some investigation to determine if it is possible with our current documentation builder/website. If you had any thoughts on this, we can discuss the options here. If it ends up proving to be a challenge, perhaps an RFC would be needed.

[aidan-keay]

Has there been any update on having TS examples?

[dannify]

This is not something the core team is able to take on any time soon. Happy to discuss contributions!

[aidan-keay]

This is not something the core team is able to take on any time soon. Happy to discuss contributions!

I'd be happy to contribute the ts examples although how easy would it be to add to the existing documentation?

[dannify]

I think the biggest hurdle to start with will be setting up the docs site to display and build ts examples. We have not done any investigations into this yet so I am not too sure how easy it will be.

[alveshelio]

How about, while we wait to know whether or not it's feasible in the site, to add some examples in Typescript to this repo so at least people looking for Typescript examples can find something.
This would simplify the process.

[xxKeefer]

Would Love to contribute some examples, I don't want to have to figure out how to integrate with your docs site however. I love typescript and react-aria however i have to say the current DX trying to get them to play nice together has been woeful. Would love to see the adobe team provide an outlet for TS dev looking to contribute TS examples

[devongovett]

I've been working on the setup for this in #3710. That will allow us to run TSC over the examples in the docs, which are in MDX files. I've only fixed the existing errors in that PR, so once it is merged, we'd need to go through each example and add type annotations where appropriate. We'd love help with that if people are looking to contribute!

[donaldpipowitch]

Until types in the examples are ready I have a really hard time to wrap my head around the usage of props in the existing examples. Is there some guidance on how to read the existing examples?

Example:

function CheckboxGroup(props) {
  let { children, label, description, errorMessage, validationState } = props;
  let state = useCheckboxGroupState(props);
  let { groupProps, labelProps, descriptionProps, errorMessageProps } =
    useCheckboxGroup(props, state);

What is "props' actually? I can see it has { children, label, description, errorMessage, validationState }, but shall this be read as the "complete" list of props that are supposed to be passed to CheckboxGroup?