tot-ui-kit 1.0.2 → 1.0.4
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 +37 -6
- package/package.json +11 -8
package/README.md
CHANGED
|
@@ -7,19 +7,50 @@ UI-библиотека с `Layout`, `ScMainMenu` и поддержкой тем
|
|
|
7
7
|
## Установка
|
|
8
8
|
|
|
9
9
|
```bash
|
|
10
|
-
npm install tot-ui-kit
|
|
10
|
+
npm install tot-ui-kit @sberbusiness/triplex-next @sberbusiness/icons-next
|
|
11
11
|
```
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
## ⚠️ Критически важно: Подключение CSS
|
|
14
14
|
|
|
15
|
-
|
|
15
|
+
**Порядок и состав CSS импортов критичен для корректной работы!**
|
|
16
16
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
17
|
+
В входном файле приложения (`src/main.tsx`) импорты CSS должны быть:
|
|
18
|
+
1. **В начале файла** (до импорта React и компонентов)
|
|
19
|
+
2. **В строго определённом порядке**
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
// src/main.tsx
|
|
23
|
+
|
|
24
|
+
// 1. CSS импорты — ПЕРВЫМИ и в этом порядке!
|
|
20
25
|
import '@sberbusiness/icons-next/styles/icons.css'
|
|
26
|
+
import '@sberbusiness/triplex-next/styles/triplex-next.css'
|
|
27
|
+
import 'tot-ui-kit/global.css'
|
|
28
|
+
import 'tot-ui-kit/dist/index.css' // ← Обязательно! Без этого меню не отображается
|
|
29
|
+
import './styles/index.css' // ваши локальные стили последними
|
|
30
|
+
|
|
31
|
+
// 2. Только потом React и компоненты
|
|
32
|
+
import { StrictMode } from 'react'
|
|
33
|
+
import { createRoot } from 'react-dom/client'
|
|
34
|
+
import { BrowserRouter } from 'react-router-dom'
|
|
35
|
+
import App from './App'
|
|
36
|
+
|
|
37
|
+
createRoot(document.getElementById('root')!).render(
|
|
38
|
+
<StrictMode>
|
|
39
|
+
<BrowserRouter>
|
|
40
|
+
<App />
|
|
41
|
+
</BrowserRouter>
|
|
42
|
+
</StrictMode>,
|
|
43
|
+
)
|
|
21
44
|
```
|
|
22
45
|
|
|
46
|
+
### Частые ошибки
|
|
47
|
+
|
|
48
|
+
| Проблема | Симптом | Решение |
|
|
49
|
+
|----------|---------|---------|
|
|
50
|
+
| Отсутствует `tot-ui-kit/dist/index.css` | Меню отображается как текст без стилей, иконки в ряд сверху | Добавить импорт `import 'tot-ui-kit/dist/index.css'` |
|
|
51
|
+
| Неправильный порядок CSS | Стили перебиваются, меню выглядит сломанным | Соблюдать порядок: icons → triplex → tot-ui-kit → локальные |
|
|
52
|
+
| CSS после React импортов | Стили могут не применяться | CSS импорты должны быть в самом начале файла |
|
|
53
|
+
|
|
23
54
|
## Быстрый старт
|
|
24
55
|
|
|
25
56
|
```tsx
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tot-ui-kit",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4",
|
|
4
4
|
"description": "UI Kit with Layout, MainMenu, and theme support for React applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
"import": "./dist/index.js",
|
|
13
13
|
"require": "./dist/index.cjs"
|
|
14
14
|
},
|
|
15
|
-
"./global.css": "./src/global.css"
|
|
15
|
+
"./global.css": "./src/global.css",
|
|
16
|
+
"./styles": "./dist/index.css",
|
|
17
|
+
"./dist/index.css": "./dist/index.css"
|
|
16
18
|
},
|
|
17
19
|
"files": [
|
|
18
20
|
"dist",
|
|
@@ -24,7 +26,8 @@
|
|
|
24
26
|
"lint": "eslint .",
|
|
25
27
|
"lint:fix": "eslint . --fix",
|
|
26
28
|
"typecheck": "tsc --noEmit",
|
|
27
|
-
"prepublishOnly": "npm run build"
|
|
29
|
+
"prepublishOnly": "npm run build",
|
|
30
|
+
"publish": " npm publish --access public"
|
|
28
31
|
},
|
|
29
32
|
"keywords": [
|
|
30
33
|
"react",
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
},
|
|
42
45
|
"devDependencies": {
|
|
43
46
|
"@eslint/js": "^9.18.0",
|
|
44
|
-
"@sberbusiness/icons-next": "^1.
|
|
47
|
+
"@sberbusiness/icons-next": "^1.11.0",
|
|
45
48
|
"@sberbusiness/triplex-next": "^1.14.0",
|
|
46
49
|
"@types/react": "^18.3.26",
|
|
47
50
|
"@types/react-dom": "^18.3.7",
|
|
@@ -57,9 +60,9 @@
|
|
|
57
60
|
"typescript-eslint": "^8.22.0"
|
|
58
61
|
},
|
|
59
62
|
"peerDependencies": {
|
|
60
|
-
"@sberbusiness/icons-next": "^1.
|
|
61
|
-
"@sberbusiness/triplex-next": "^1.
|
|
62
|
-
"react": "^18.
|
|
63
|
-
"react-dom": "^18.
|
|
63
|
+
"@sberbusiness/icons-next": "^1.11.0",
|
|
64
|
+
"@sberbusiness/triplex-next": "^1.14.0",
|
|
65
|
+
"react": "^18.3.1",
|
|
66
|
+
"react-dom": "^18.3.1"
|
|
64
67
|
}
|
|
65
68
|
}
|