Typescript issues when trying to upgrade from grommet 2.17.5 to 2.25 in react 17 #6219
Description
Hey,
My organization is trying to upgrade its components library based on grommet. We are currently using react 17.0.2 and we encountered several problems regarding Typescript definitions, such as interfaces with the same name (fixed in 2.25.0) and a weird error on the analog clock type definition in base.d.ts. You can find the conversation I had with Jessica Filben on the Grommet Slack here
Expected Behavior
I should be able to upgrade grommet library without type conflict
Actual Behavior
When I build my project I have this error on all digital clock sizes
node_modules/grommet/themes/base.d.ts:629:9 - error TS2411: Property 'xsmall' of type '{ size?: string | undefined; height?: number | undefined; } | undefined' is not assignable to string index type '{ size?: string | undefined; height?: number | undefined; }'
With the help of Jessica we identified the problem on this generic type definition
// base.d.ts:653
[key: string]: {
size?: string;
height?: number;
};
Steps to Reproduce
I tried to create a sandbox which would be as close a possible from the issue, but it seems that the version of grommet in codesandbox doesn't have the generic key above... Thus It's not really relevant
Possible solution
I was able to build my project with a local grommet where I applied this the diff below. It seems to me that it resolves both my problem and the need to have a generic key form digital clock size...
diff --git a/src/js/themes/base.d.ts b/src/js/themes/base.d.ts
index 4e05e8b83..15885d70f 100644
--- a/src/js/themes/base.d.ts
+++ b/src/js/themes/base.d.ts
@@ -242,6 +242,15 @@ interface FormFieldLabelType extends TextProps {
requiredIndicator?: boolean | JSX.Element | string;
}
+type DigitalTexts =
+ | 'xsmall'
+ | 'small'
+ | 'medium'
+ | 'large'
+ | 'xlarge'
+ | 'xxlarge'
+ | string;
+
export interface ThemeType {
global?: {
active?: {
@@ -626,31 +635,7 @@ export interface ThemeType {
};
digital?: {
text?: {
- xsmall?: {
- size?: string;
- height?: number;
- };
- small?: {
- size?: string;
- height?: number;
- };
- medium?: {
- size?: string;
- height?: number;
- };
- large?: {
- size?: string;
- height?: number;
- };
- xlarge?: {
- size?: string;
- height?: number;
- };
- xxlarge?: {
- size?: string;
- height?: number;
- };
- [key: string]: {
+ [key in DigitalTexts]: {
size?: string;
height?: number;
};
Your Environment
- Grommet version: 2.25.0
- React, React-DOM 17.0.2
- Typescript 4.3.5
- Browser Name and version: Chrome 103.0.5060.53
- Operating System and version (desktop or mobile): MacOS 12.3.1