pne-ui 3.0.2 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
[![NPM version][npm-image]][npm-url]
|
|
4
4
|
[![Build][github-build]][github-build-url]
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
Мега обертка над MUI
|
|
7
7
|
|
|
8
8
|
## Установка
|
|
9
9
|
|
|
@@ -123,6 +123,47 @@ export default i18n
|
|
|
123
123
|
После инициализации достаточно один раз импортировать `./i18n` в точке входа или Storybook; все компоненты `pne-ui`
|
|
124
124
|
подтянутся к уже созданному контексту и будут использовать зарегистрированные строки.
|
|
125
125
|
|
|
126
|
+
## Темизация компонентов MUI
|
|
127
|
+
|
|
128
|
+
`pne-ui` поставляет вспомогательную функцию `createPneTheme` и тип `Skin`.
|
|
129
|
+
`Skin` описывает корпоративные цвета Paynet (цвета хедера, меню и т.д.),
|
|
130
|
+
а `createPneTheme(skin)` на их основе строит расширенную MUI-тему с дополнительными палитрами:
|
|
131
|
+
`pnePrimary`, `pneNeutral`, `pnePrimaryLight`, `pneAccentuated`, `pneWhite`, `pneWarningLight`.
|
|
132
|
+
|
|
133
|
+
### Быстрый старт
|
|
134
|
+
|
|
135
|
+
1. Описываете skin (берете, например, из `window.PAYNET_SKIN`).
|
|
136
|
+
2. Создаёте тему `const theme = createPneTheme(skin)`.
|
|
137
|
+
3. Оборачиваете приложение в `<ThemeProvider theme={theme}>`, чтобы все компоненты `pne-ui` и стандартные MUI
|
|
138
|
+
получили одинаковые значения цветов и стили переопределений.
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
import React from 'react'
|
|
142
|
+
import { ThemeProvider } from '@mui/material'
|
|
143
|
+
import { createPneTheme, Skin, SearchUI } from 'pne-ui'
|
|
144
|
+
|
|
145
|
+
const skin: Skin = window.PAYNET_SKIN || {
|
|
146
|
+
headerBackgroundColor: '#18547b',
|
|
147
|
+
headerTextColor: '#fff',
|
|
148
|
+
headerBorder: '1px solid #3899d5',
|
|
149
|
+
menuBackgroundColor: '#fff',
|
|
150
|
+
/* ... */
|
|
151
|
+
experimentalColor: '#0a91bc',
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
const theme = createPneTheme(skin)
|
|
155
|
+
|
|
156
|
+
export const App = () => (
|
|
157
|
+
<ThemeProvider theme={theme}>
|
|
158
|
+
<SearchUI /* ... */ />
|
|
159
|
+
</ThemeProvider>
|
|
160
|
+
)
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
При необходимости можно передать второй аргумент `createPneTheme(skin, muiOverrides)` и дополнительно расширить
|
|
164
|
+
тему MUI (тип `ThemeOptions`). Обёрнутые компоненты получают как базовые цвета skin, так и кастомные
|
|
165
|
+
color overrides (`pneNeutral`, `pnePrimaryLight`, `pneAccentuated` и др.), объявленные в `src/index.ts`.
|
|
166
|
+
|
|
126
167
|
[npm-url]: https://www.npmjs.com/package/pne-ui
|
|
127
168
|
|
|
128
169
|
[npm-image]: https://img.shields.io/npm/v/pne-ui
|