fix: ChipProps thanks to @0xAlunara

curvefi · Jan 30, 2025 · ebbef25 · ebbef25
1 parent 43ee75c
commit ebbef25
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 26 deletions.
diff --git a/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts b/packages/curve-ui-kit/src/themes/chip/mui-chip-overrides.d.ts
@@ -1,26 +1,18 @@
-declare module '@mui/material/Chip' {
-  export interface ChipPropsColorOverrides {
-    // used both for badges and chips
-    active: true
+import '@mui/material/Chip'
 
-    // colors usually for badges
-    alert: true
-    default: true
-    highlight: true
-    warning: true
-    accent: true
+export type ChipColors = 'active' | 'alert' | 'default' | 'highlight' | 'warning' | 'accent' | 'inactive'
+type DisabledChipColors = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
 
-    // colors usually for chips
-    inactive: true
-  }
+type NewChipColorOverrides = { [key in ChipColors]: true }
+type DisabledChipColorsOverrides = { [key in DisabledChipColors]: false }
 
-  export interface ChipPropsSizeOverrides {
-    extraSmall: true
-    small: true
-    medium: true
-    large: true
-    extraLarge: true
-  }
+type ChipSizes = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge'
+type ChipSizeOverrides = { [key in ChipSizes]: true }
+
+declare module '@mui/material/Chip' {
+  export interface ChipPropsColorOverrides extends NewChipColorOverrides, DisabledChipColorsOverrides {}
+
+  export interface ChipPropsSizeOverrides extends ChipSizeOverrides {}
 
   export interface ChipPropsVariantOverrides {
     filled: false

diff --git a/packages/curve-ui-kit/src/themes/chip/mui-chip.ts b/packages/curve-ui-kit/src/themes/chip/mui-chip.ts
@@ -1,5 +1,5 @@
 import type { Components } from '@mui/material'
-import type { ChipProps } from '@mui/material/Chip'
+import type { ChipProps } from '@mui/material/Chip/Chip'
 import { DesignSystem } from '@ui-kit/themes/design'
 import { Grays } from '@ui-kit/themes/design/0_primitives'
 import { TypographyVariantKey } from '@ui-kit/themes/typography'
@@ -13,7 +13,9 @@ const { Sizing, IconSize } = SizesAndSpaces
 
 type ChipSizeDefinition = { font: TypographyVariantKey; height: Responsive }
 
-const chipSizes: Record<ChipProps['size'], ChipSizeDefinition> = {
+type ChipSizes = NonNullable<ChipProps['size']>
+
+const chipSizes: Record<ChipSizes, ChipSizeDefinition> = {
   extraSmall: { font: 'bodyXsBold', height: IconSize.md },
   small: { font: 'buttonXs', height: IconSize.md },
   medium: { font: 'buttonXs', height: Sizing.md },
@@ -22,7 +24,7 @@ const chipSizes: Record<ChipProps['size'], ChipSizeDefinition> = {
 }
 
 // overrides for clickable chips
-const chipSizeClickable: Record<ChipProps['size'], Partial<ChipSizeDefinition>> = {
+const chipSizeClickable: Record<ChipSizes, Partial<ChipSizeDefinition>> = {
   extraSmall: {},
   small: { height: Sizing.md },
   medium: { font: 'buttonS' },
@@ -100,14 +102,14 @@ export const defineMuiChip = (
     },
 
     ...Object.entries(chipSizes).map(([size, { font, height }]) => ({
-      props: { size: size as ChipProps['size'] },
+      props: { size: size as ChipSizes },
       style: {
         ...typography[font],
         ...handleBreakpoints({ height }),
       },
     })),
     ...Object.entries(chipSizeClickable).map(([size, { font, height }]) => ({
-      props: { size: size as ChipProps['size'], clickable: true },
+      props: { size: size as ChipSizes, clickable: true },
       style: {
         ...(font && typography[font]),
         ...(height && handleBreakpoints({ height })),

diff --git a/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx b/packages/curve-ui-kit/src/themes/stories/Chip.stories.tsx
@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack'
 import Typography from '@mui/material/Typography'
 import Box from '@mui/material/Box'
 import { fn } from '@storybook/test'
-import { ChipProps } from '@mui/material/Chip'
+import type { ChipProps } from '@mui/material/Chip'
 
 type ChipStoryProps = {
   color: ChipProps['color']