topic Re: Calcite Design System with React and TypeScript in ArcGIS JavaScript Maps SDK Questions

Calcite Design System with React and TypeScript

esride-nik — Thu, 17 Jun 2021 13:50:03 GMT

Dear community,

I've been struggling to integrate Calcite Design System in a React project with TypeScript. I followed the instructions, "calcite-components" is imported in my entry file, as well as the CSS and the components are working, but I don't get any typings. I see red squiggly lines in VS Code all over the place and the error message says "Property 'calcite-<element>' does not exist on type 'JSX.IntrinsicElements'."

Things I tried (with no success):

adding "components.d.ts" under tsconfig "files", as described for "preact.d.ts" in the instructions for "Preact with TypeScript"
adding the "calcite-components/dist/types/" directory under tsconfig "typeRoots"
adding "components.d.ts" as reference path (error msg: use import instead of triple slash) and/or reference types (msg: "Cannot find type definition file") in my React component
messing with the imports, e.g. trying to somehow import the exported stuff from "components.d.ts" (like the namespace "Components" and trying to do something with the interfaces in it or somehow getting a grip on the exported "LocalJSX as JSX")
...

My basic understanding is that there's a mapping from the calcite tags to the interfaces. The same thing btw happens in "preact.d.ts", as far as I can see. But somehow, in my React project, TypeScript doesn't see the JSX tags from "components.d.ts".
And then there's Stencil underneath, and I found an issue related to what I see: https://github.com/ionic-team/stencil/issues/1090. Tried the suggested fixes, but no luck.

Final notice: My calcite components are working, but I can only connect the events by dom. Is that intended?

Cheers
Nik

@JuliePowell Do you know someone who can help?

Re: Calcite Design System with React and TypeScript

JuliePowell — Thu, 17 Jun 2021 20:19:36 GMT

Hi Nik,

I will try and get you some help; I don't know the answer to this one. Stay tuned...

Julie

Re: Calcite Design System with React and TypeScript

esride-nik — Thu, 24 Jun 2021 13:48:21 GMT

Hi @JuliePowell,

I found a Github issue about @paulcpederson implementing this for Preact and it turns out, my problem was solved a week ago, yay 🎉
This is the link: https://github.com/Esri/calcite-components/issues/2336

Thanks!

Re: Calcite Design System with React and TypeScript

JaniYlikorpi — Mon, 28 Jun 2021 10:25:59 GMT

ESRI documentation in this matter, as always on every matter, is absolute garbage. For the life of me I can't even Loader to work with React, Typesript and this new component system to work. I have followed everything to the letter but when I try to import the loader (import CalciteLoader from bla bla lba calcite-components-react") I just get some bs like this:

Property '"label"' is missing in type '{ text: string; }' but required in type 'CalciteLoader'.  TS2741

Re: Calcite Design System with React and TypeScript

esride-nik — Mon, 28 Jun 2021 11:18:40 GMT

That's a bit harsh, I would say. The JSAPI documentation for example does a pretty good job. For this Beta product there is room for improvement though.
Please take a look here. You don't need the loader. There's a new separate package for this.

Re: Calcite Design System with React and TypeScript

JaniYlikorpi — Mon, 28 Jun 2021 11:32:36 GMT

I was trying to use the calcite-components-react. I was not trying to use loader as in component loader. I was trying to use Loader animation component as in CaliciteLoader (formelly known simply as Loader). I was using the Loader which was the "previous version" of the component but it started to fail (animation stuck inside some other components) and I was trying to "upgrade" but didn't want to fight with this new one and decided to go with MUI because I wasn't using Calicite for anything else anyway... So again, not the component loader - the loader animation web component

Re: Calcite Design System with React and TypeScript

esride-nik — Mon, 28 Jun 2021 12:12:34 GMT

Oh I see. Sorry to hear that. Quick test:

works for me.

But I don't know, maybe in your case, something's not right when the components are deeply nested..? So if you think you've found a bug you might be able to help the devs by filing an issue on GitHub. After all, it's a Beta product and I'm hoping for a stable UI lib in the end that better integrates with the look & feel of the default JSAPI widgets.

Re: Calcite Design System with React and TypeScript

JaniYlikorpi — Mon, 28 Jun 2021 12:33:52 GMT

Not quite sure but I don't believe documentation mentioned label been mandatory prop. But maybe next time I'll get it to work. Thanks