Почему MUI не предоставляет подсказок для пользовательских настроек?

Question

[GabbereX]

Пытаюсь кастомизировать MUI через createTheme, в мои планы входит расширение вариантов для компонента Typography. Добавил следующие пользовательские варианты: 'buttonLarge', 'buttonMedium', 'buttonSmall', 'inputLable', 'inputText', 'helperText', 'avatarInitials', 'chip', 'tooltip', 'alertTitle', 'tableHeader', 'badgeLabel', 'toast'. Следуя рекомендациям в документации MUI для компонента Typography расширяю типы:

import { CSSProperties } from 'react'

import { TypographyVariants } from '@themes/typography/typography.consts'

type CustomVariants = typeof TypographyVariants[number]

declare module '@mui/material/styles' {
  interface TypographyVariants extends Record<CustomVariants, CSSProperties> {}
  interface TypographyVariantsOptions extends Partial<Record<CustomVariants, CSSProperties>> {}
}

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

Все хорошо, TypeScript теперь их видит и не ругается, варианты применяются верно, но есть неприятная проблема. Когда я пытаюсь прописать вариант, автоподсказки предлагают только нативные варианты, моих пользовательских будто нет:



Странно, но если я строку беру в фигурные скобки, то мои пользовательские варианты есть:



Прошу заметить, что если я вручную ввожу пользовательский вариант TS не ругается в обоих случаях, если ошибусь то подсветит ошибку.

Далее StoryBook не видит пользовательских вариантов, только те что по умолчанию:



Проверил в PHPStorm и VSCode, передал проект знакомому - результаты те же.
Пошел на GitHub писать ишью по моей проблеме. Разработчик продемонстрировал видео, где у него все работает, а то что в StoryBook нет, посоветовал туда и писать по текущей проблеме. Но в качестве эксперимента создал новый проект CRA + TS + MUI и прокинул свои настройки - без изменений:

<Typography variant='ctrl+space=варианты_только_по_умолчанию'>

<Typography variant={'ctrl+space=все_варианты'}>

То есть доказано опытным путем, что проблема ни в StoryBook и ни в Vite.

Зависимости в проекте:

"dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.10",
    "@mui/material": "^5.15.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.16",
    "@storybook/addon-interactions": "^7.6.16",
    "@storybook/addon-links": "^7.6.16",
    "@storybook/addon-themes": "^7.6.16",
    "@storybook/blocks": "^7.6.16",
    "@storybook/react": "^7.6.16",
    "@storybook/react-vite": "^7.6.16",
    "@storybook/test": "^7.6.16",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-airbnb-typescript": "^17.1.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "eslint-plugin-storybook": "^0.6.15",
    "sass": "^1.71.0",
    "storybook": "^7.6.16",
    "typescript": "^5.3.3",
    "unplugin-fonts": "^1.1.1",
    "vite": "^5.1.3"
  }

Репозиторий на GitHub

Версия Node 20.10.0
В чем может быть проблема?

Comments

[WbICHA]

Ты уверен, что в первом случае у тебя вообще никогда кастомные варианты не подгружаются? Я только что твой проект у себя запустил и да, вначале они не подгрузились, но когда я на фигурные скобки поменял и обратно, то всё появилось.

[GabbereX]

WbICHA, если без фигурных скобок то кастомных вариантов нет всегда. В фигурных скобках есть всегда. Важнее в данном случае то, что я кастомных вариантов не вижу в StoryBook, да и при разработке кастомные варианты должны быть без обводки в фигурные скобки, иначе некая сложность и странность, они же должны быть.

[WbICHA]

GabbereX, ну, у меня есть. Попробуй вскод переустановить и на чистом попробовать.

[GabbereX]

WbICHA, не вариант так или иначе. У меня PHPStorm, у моего партнера VSCode и у обоих аналогичная ситуация. Если лепить боевой проект на базе этой сборки не вариант обнулять иде/визуальный редактор, скипать все настройки, расширения - это еще большая беда. Я подозреваю, что вполне возможно из-за версии TypeScript или Node (что вряд ли).

[WbICHA]

GabbereX, ну хз, у меня всё работает и сломать у меня не получается никак.
Можешь попробовать такой вариант:

declare module '@mui/material/Typography/Typography' {
  interface TypographyPropsVariantOverrides
    extends Record<CustomVariants, true> {}
}

Всё же интерфейс конкретно в этом файле лежит.

А вообще это, судя по всему, баг тс экстеншена, поскольку в очень специфическом моменте он отрабатывает некорректно, при этом типы подтягиваются как надо.

[GabbereX]

WbICHA, невероятно, сдвиг с мертвой точки :) Спасибо Вам добрый человек! Путь '@mui/material/Typography/Typography' вместо '@mui/material/Typography' пролечил автозаполнение в строке, теперь подсказывает мои пользовательские варианты как и должно быть. Пытался поменять путь, но видимо именно так сделать не додумался.
Но к сожалению по неизвестным причинам StoryBook все равно не хочет подхватывать пользовательские варианты в демо, но в variant он видит все варианты:

export const Typography: Story = {
  args: {
    variant: 'body1',
    children: 'Example Text'
  }
}

Приходится костылить:

import { FC, ReactElement } from 'react'

import { Typography, TypographyProps } from '@mui/material'

interface IProps extends TypographyProps {
  variant?:
  'h1' |
  'h2' |
  'h3' |
  'h4' |
  'h5' |
  'h6' |
  'subtitle1' |
  'subtitle2' |
  'body1' |
  'body2' |
  'caption' |
  'overline' |
  'buttonLarge' |
  'buttonMedium' |
  'buttonSmall' |
  'inputLable' |
  'inputText' |
  'helperText' |
  'avatarInitials' |
  'chip' |
  'tooltip' |
  'alertTitle' |
  'tableHeader' |
  'badgeLabel' |
  'toast'
}

const MuiTypography: FC<IProps> = ({ children, ...rest }): ReactElement => (
  <Typography { ...rest }>
    { children }
  </Typography>
)

export default MuiTypography

Ему прям явно нужно указать все варианты, но странно, ведь он подхватывает базовые без проблем, после вашей подсказки пользовательские подхватились на всем проекте, но сторибук не захотел

[WbICHA]

GabbereX, по сторибуку не смогу помочь, т.к. его в целом никогда реально не использовал. Тут надо смотреть откуда он берёт значения, не факт, что из тса. Как минимум дефолтные варианты в проптайпах прописаны в самом типограф компоненте. Если же он берёт таки из тса, то, возможно, он просто не видит этот д.тс файл (хотя сомнительно, конечно). В общем, тут надо искать инфу как она всё это подтягивает.

Answer 1

[GabbereX]

Спасибо WbICHA , по проблеме где нет автозаполнения пользовательских вариантов в стоке, проблема в пути декларирования.

Нужно это:

declare module '@mui/material/Typography/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

Вместо этого:

declare module '@mui/material/Typography' {
  interface TypographyPropsVariantOverrides extends Record<CustomVariants, true> {}
}

В StoryBook не видит расширенных типов, так как и не смотрит в d.ts. Помогло в конфиге .storybook/main.ts:

// ...
reactDocgenTypescriptOptions: {
      include: [
        '**/**.tsx',
        'src/themes/typography/typography.types.d.ts',
      ],
      tsconfigPath: '../tsconfig.json',
// ...