fix: code review findings

adrcotfas · adrcotfas · commit 221faa2e57c0 · 2026-05-11T14:40:55.000+03:00
diff --git a/src/components/Card/CardTitle.tsx b/src/components/Card/CardTitle.tsx
@@ -40,7 +40,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  titleVariant?: keyof typeof TypescaleKey;
+  titleVariant?: TypescaleKey;
   /**
    * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
    */
@@ -69,7 +69,7 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  subtitleVariant?: keyof typeof TypescaleKey;
+  subtitleVariant?: TypescaleKey;
   /**
    * Callback which returns a React element to display on the left side.
    */
diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -86,7 +86,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * @optional
    */
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
@@ -24,7 +24,6 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import MenuItem from './MenuItem';
 import { useInternalTheme } from '../../core/theming';
 import type { Elevation, Theme, ThemeProp } from '../../types';
-import { ElevationLevels } from '../../types';
 import { addEventListener } from '../../utils/addEventListener';
 import { BackHandler } from '../../utils/BackHandler/BackHandler';
 import Portal from '../Portal/Portal';
@@ -105,9 +104,14 @@ const EASING = Easing.bezier(0.4, 0, 0.2, 1);
 const WINDOW_LAYOUT = Dimensions.get('window');
 
 const DEFAULT_ELEVATION: Elevation = 2;
-export const ELEVATION_LEVELS_MAP = Object.values(
-  ElevationLevels
-) as ElevationLevels[];
+export const ELEVATION_LEVELS_MAP = [
+  'level0',
+  'level1',
+  'level2',
+  'level3',
+  'level4',
+  'level5',
+] as const;
 
 const DEFAULT_MODE = 'elevated';
 
diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
@@ -88,7 +88,7 @@ export type Props = {
    *
    *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
    */
-  labelVariant?: keyof typeof TypescaleKey;
+  labelVariant?: TypescaleKey;
   /**
    * Specifies the largest possible scale a label font can reach.
    */
diff --git a/src/components/Typography/types.tsx b/src/components/Typography/types.tsx
@@ -2,4 +2,4 @@ import type { TypescaleKey } from '../../types';
 
 export type VariantProp<T> =
   | (T extends string ? (string extends T ? never : T) : never)
-  | keyof typeof TypescaleKey;
+  | TypescaleKey;
diff --git a/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap b/src/components/__tests__/__snapshots__/ListSection.test.tsx.snap
@@ -188,16 +188,6 @@ exports[`renders list section with custom title style 1`] = `
         },
       },
       "roundness": 4,
-      "state": {
-        "opacity": {
-          "disabled": 0.38,
-          "dragged": 0.16,
-          "enabled": 1,
-          "focused": 0.1,
-          "hovered": 0.08,
-          "pressed": 0.1,
-        },
-      },
     }
   }
 >
@@ -740,16 +730,6 @@ exports[`renders list section with subheader 1`] = `
         },
       },
       "roundness": 4,
-      "state": {
-        "opacity": {
-          "disabled": 0.38,
-          "dragged": 0.16,
-          "enabled": 1,
-          "focused": 0.1,
-          "hovered": 0.08,
-          "pressed": 0.1,
-        },
-      },
     }
   }
 >
@@ -1290,16 +1270,6 @@ exports[`renders list section without subheader 1`] = `
         },
       },
       "roundness": 4,
-      "state": {
-        "opacity": {
-          "disabled": 0.38,
-          "dragged": 0.16,
-          "enabled": 1,
-          "focused": 0.1,
-          "hovered": 0.08,
-          "pressed": 0.1,
-        },
-      },
     }
   }
 >
diff --git a/src/deprecated.ts b/src/deprecated.ts
@@ -11,8 +11,7 @@
 import { DarkTheme } from './theme/schemes/DarkTheme';
 import { LightTheme } from './theme/schemes/LightTheme';
 import { Palette } from './theme/tokens';
-import { TypescaleKey } from './types';
-import type { Theme, Elevation } from './types';
+import type { Theme, Elevation, TypescaleKey } from './types';
 
 /**
  * @deprecated Use `LightTheme` instead. Will be removed in a future version.
@@ -32,8 +31,6 @@ export const MD3Colors = Palette;
 /**
  * @deprecated Use `TypescaleKey` instead. Will be removed in a future version.
  */
-export const MD3TypescaleKey = TypescaleKey;
-// eslint-disable-next-line no-redeclare
 export type MD3TypescaleKey = TypescaleKey;
 
 /**
diff --git a/src/theme/fonts.tsx b/src/theme/fonts.tsx
@@ -2,12 +2,8 @@ import { typescale } from './tokens';
 import type { TypescaleStyle, Typescale, TypescaleKey } from './types';
 
 type FontsConfig =
-  | {
-      [key in TypescaleKey]: Partial<TypescaleStyle>;
-    }
-  | {
-      [key: string]: TypescaleStyle;
-    }
+  | Record<TypescaleKey, Partial<TypescaleStyle>>
+  | Record<string, TypescaleStyle>
   | Partial<TypescaleStyle>;
 
 function configureFontsConfig(
diff --git a/src/theme/schemes/DarkTheme.tsx b/src/theme/schemes/DarkTheme.tsx
@@ -1,13 +1,11 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
-import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 export const DarkTheme: Theme = {
   ...baseTheme,
   dark: true,
   mode: 'adaptive',
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'dark' }),
-  state: defaultState,
 };
diff --git a/src/theme/schemes/DynamicTheme.android.tsx b/src/theme/schemes/DynamicTheme.android.tsx
@@ -2,7 +2,6 @@ import { Platform, PlatformColor } from 'react-native';
 
 import { DarkTheme } from './DarkTheme';
 import { LightTheme } from './LightTheme';
-import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 const isApi34 = (Platform.Version as number) >= 34;
@@ -495,11 +494,9 @@ const darkColors = {
 export const DynamicLightTheme: Theme = {
   ...LightTheme,
   colors: { ...LightTheme.colors, ...lightColors },
-  state: defaultState,
 };
 
 export const DynamicDarkTheme: Theme = {
   ...DarkTheme,
   colors: { ...DarkTheme.colors, ...darkColors },
-  state: defaultState,
 };
diff --git a/src/theme/schemes/LightTheme.tsx b/src/theme/schemes/LightTheme.tsx
@@ -1,12 +1,10 @@
 import { baseTheme } from './base';
 import { tokens } from '../tokens';
 import { buildScheme } from '../tokens/sys/color/roles';
-import { defaultState } from '../tokens/sys/state';
 import type { Theme } from '../types';
 
 export const LightTheme: Theme = {
   ...baseTheme,
   dark: false,
   colors: buildScheme(tokens.md.ref.palette, tokens.md.ref, { mode: 'light' }),
-  state: defaultState,
 };
diff --git a/src/theme/tokens/sys/state.ts b/src/theme/tokens/sys/state.ts
diff --git a/src/theme/types/elevation.ts b/src/theme/types/elevation.ts
@@ -1,14 +1,3 @@
 export type Elevation = 0 | 1 | 2 | 3 | 4 | 5;
 
-export enum ElevationLevels {
-  'level0',
-  'level1',
-  'level2',
-  'level3',
-  'level4',
-  'level5',
-}
-
-export type ElevationColors = {
-  [key in keyof typeof ElevationLevels]: string;
-};
+export type ElevationColors = Record<`level${Elevation}`, string>;
diff --git a/src/theme/types/index.ts b/src/theme/types/index.ts
@@ -1,7 +1,6 @@
 export * from './color';
 export * from './elevation';
 export * from './navigation';
-export * from './state';
 export * from './theme';
 export * from './typography';
 export * from './utils';
diff --git a/src/theme/types/state.ts b/src/theme/types/state.ts
diff --git a/src/theme/types/theme.ts b/src/theme/types/theme.ts
@@ -1,7 +1,6 @@
 import type { $DeepPartial } from '@callstack/react-theme-provider';
 
 import type { ThemeColors } from './color';
-import type { ThemeState } from './state';
 import type { Typescale } from './typography';
 
 type Mode = 'adaptive' | 'exact';
@@ -19,7 +18,6 @@ export type ThemeBase = {
 export type Theme = ThemeBase & {
   colors: ThemeColors;
   fonts: Typescale;
-  state: ThemeState;
 };
 
 export type InternalTheme = Theme;
diff --git a/src/theme/types/typography.ts b/src/theme/types/typography.ts
@@ -22,27 +22,22 @@ export type Fonts = {
   thin: Font;
 };
 
-export enum TypescaleKey {
-  displayLarge = 'displayLarge',
-  displayMedium = 'displayMedium',
-  displaySmall = 'displaySmall',
-
-  headlineLarge = 'headlineLarge',
-  headlineMedium = 'headlineMedium',
-  headlineSmall = 'headlineSmall',
-
-  titleLarge = 'titleLarge',
-  titleMedium = 'titleMedium',
-  titleSmall = 'titleSmall',
-
-  labelLarge = 'labelLarge',
-  labelMedium = 'labelMedium',
-  labelSmall = 'labelSmall',
-
-  bodyLarge = 'bodyLarge',
-  bodyMedium = 'bodyMedium',
-  bodySmall = 'bodySmall',
-}
+export type TypescaleKey =
+  | 'displayLarge'
+  | 'displayMedium'
+  | 'displaySmall'
+  | 'headlineLarge'
+  | 'headlineMedium'
+  | 'headlineSmall'
+  | 'titleLarge'
+  | 'titleMedium'
+  | 'titleSmall'
+  | 'labelLarge'
+  | 'labelMedium'
+  | 'labelSmall'
+  | 'bodyLarge'
+  | 'bodyMedium'
+  | 'bodySmall';
 
 export type TypescaleStyle = {
   fontFamily: string;
@@ -53,9 +48,6 @@ export type TypescaleStyle = {
   fontStyle?: Font['fontStyle'];
 };
 
-export type Typescale =
-  | {
-      [key in TypescaleKey]: TypescaleStyle;
-    } & {
-      ['default']: Omit<TypescaleStyle, 'lineHeight' | 'fontSize'>;
-    };
+export type Typescale = Record<TypescaleKey, TypescaleStyle> & {
+  default: Omit<TypescaleStyle, 'lineHeight' | 'fontSize'>;
+};

Original file line number	Diff line number	Diff line change
`@@ -86,7 +86,7 @@ export type Props = {`
`86`	`86`	`*`
`87`	`87`	* Body: `bodyLarge`, `bodyMedium`, `bodySmall`
`88`	`88`	`*/`
`89`		`- labelVariant?: keyof typeof TypescaleKey;`
	`89`	`+ labelVariant?: TypescaleKey;`
`90`	`90`	`/**`
`91`	`91`	`* @optional`
`92`	`92`	`*/`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@ export type Props = {`
`88`	`88`	`*`
`89`	`89`	* Body: `bodyLarge`, `bodyMedium`, `bodySmall`
`90`	`90`	`*/`
`91`		`- labelVariant?: keyof typeof TypescaleKey;`
	`91`	`+ labelVariant?: TypescaleKey;`
`92`	`92`	`/**`
`93`	`93`	`* Specifies the largest possible scale a label font can reach.`
`94`	`94`	`*/`
Original file line number	Diff line number	Diff line change
@@ -188,16 +188,6 @@ exports[`renders list section with custom title style 1`] = `
`188`	`188`	`},`
`189`	`189`	`},`
`190`	`190`	`"roundness": 4,`
`191`		`- "state": {`
`192`		`- "opacity": {`
`193`		`- "disabled": 0.38,`
`194`		`- "dragged": 0.16,`
`195`		`- "enabled": 1,`
`196`		`- "focused": 0.1,`
`197`		`- "hovered": 0.08,`
`198`		`- "pressed": 0.1,`
`199`		`- },`
`200`		`- },`
`201`	`191`	`}`
`202`	`192`	`}`
`203`	`193`	`>`
@@ -740,16 +730,6 @@ exports[`renders list section with subheader 1`] = `
`740`	`730`	`},`
`741`	`731`	`},`
`742`	`732`	`"roundness": 4,`
`743`		`- "state": {`
`744`		`- "opacity": {`
`745`		`- "disabled": 0.38,`
`746`		`- "dragged": 0.16,`
`747`		`- "enabled": 1,`
`748`		`- "focused": 0.1,`
`749`		`- "hovered": 0.08,`
`750`		`- "pressed": 0.1,`
`751`		`- },`
`752`		`- },`
`753`	`733`	`}`
`754`	`734`	`}`
`755`	`735`	`>`
@@ -1290,16 +1270,6 @@ exports[`renders list section without subheader 1`] = `
`1290`	`1270`	`},`
`1291`	`1271`	`},`
`1292`	`1272`	`"roundness": 4,`
`1293`		`- "state": {`
`1294`		`- "opacity": {`
`1295`		`- "disabled": 0.38,`
`1296`		`- "dragged": 0.16,`
`1297`		`- "enabled": 1,`
`1298`		`- "focused": 0.1,`
`1299`		`- "hovered": 0.08,`
`1300`		`- "pressed": 0.1,`
`1301`		`- },`
`1302`		`- },`
`1303`	`1273`	`}`
`1304`	`1274`	`}`
`1305`	`1275`	`>`