Typescript Integration - Phase 1

[daigof]

Scope:

1. Write RadianceUI code in TS and be able to convert all JS code into TS with a working build system : Includes: Stories, Components, Utils Functions and Constants.
2. Not included: SVG icons generation which will remain being generated in JS. (we may incorporate a custom declaration file for these later)
3. Convert utils and constants completely. Have a working build for converting Stories and Components: Converted Accordion component and story as example

Extras (mostly copied from PocketDerm repo)

• lint-staged configuration so we dont need to put all TS configs flags in package.json anymore and would pick up the regular tsconfig.json file
• Bump eslint rules (needed because new typescript eslint incorporation)

---

Background info:

There are 3 main Build Systems that needs to play nice together and consume the same tsconfig.json:

• Rollup: added the typescript plugin it worked fine. Note that we in an outdated version (0.66 compared to latest 2.3.4) both main rollup and compatible plugins.

• Babel: There are 2 babel configs: the one in the root is for SVG generation so we don't need TS plugin there. The one in src is to generate the lib folder for utils and constants, it worked fine with the babel plugin also had to add the TS extensions to the cli command.

• Storybook: Stories can be written in TS now and it has its own tsconfig.json. This is because we only want one config in the root project that generates the types delcarations. if we includes stories in this config it would mess up with the folder creation inside lib and also we don't need declarations for stories.

• Conclusion: we can run all build commands (storybook and build) and this has 0 impact in the library generation.

Type generation (how it would work in PocketDerm or other Projects consuming Radiance)

• tsc command added to the build command. With the new upgraded TS version we can have allowJs=true and generate declaration files automatically. We run this command in the build at the end which will place all .d.ts inside the lib folder.
• Added main library Types definition path in package.json
• For now and until all components are converted to TS it is recommended that we continue using declare module 'radiance-ui';
• Until we create a custom decalration file or solution for icons we should continue using declare module 'radiance-ui/lib/icons'; as well
• We should have full type support for constants and utils functions.

[michaeljaltamirano]

@daigof Do you know if anyone has any major changes coming down the pipeline for radiance-ui? I feel pretty comfortable getting this out there as a v7 next week, so we could do one v7 beta release as a sanity-check before going live with it. That way folks can continue to release Prod feature under v6, assuming those no major changes coming that would warrant a v7 release. Great job putting this all together--we can tweak stuff along the way but at a certain point we just have to get it in 🙂