@snack-uikit/skeleton 0.6.9-preview-2ce82c96.0 → 0.6.10
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/CHANGELOG.md +21 -1
- package/README.md +53 -11
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## <small>0.6.10 (2026-01-19)</small>
|
|
7
|
+
|
|
8
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
9
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
10
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## 0.6.9 (2025-09-01)
|
|
17
|
+
|
|
18
|
+
### Only dependencies have been changed
|
|
19
|
+
* [@snack-uikit/utils@4.0.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## 0.6.8 (2025-07-16)
|
|
7
26
|
|
|
8
27
|
### Only dependencies have been changed
|
|
@@ -172,7 +191,8 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
|
|
|
172
191
|
|
|
173
192
|
## 0.1.4 (2023-06-23)
|
|
174
193
|
|
|
175
|
-
|
|
194
|
+
### Only dependencies have been changed
|
|
195
|
+
* [@snack-uikit/utils@4.0.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/utils/CHANGELOG.md)
|
|
176
196
|
|
|
177
197
|
## 0.1.3 (2023-06-20)
|
|
178
198
|
|
package/README.md
CHANGED
|
@@ -5,19 +5,61 @@
|
|
|
5
5
|
|
|
6
6
|
[Changelog](./CHANGELOG.md)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Description
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
- Пакет `@snack-uikit/skeleton` предоставляет компоненты для отображения индикаторов загрузки (скелетонов) во время асинхронных операций.
|
|
11
|
+
- `Skeleton` — базовый компонент для создания блочных скелетонов произвольной формы с настраиваемыми размерами (ширина, высота) и радиусом скругления.
|
|
12
|
+
- `SkeletonText` — специализированный компонент для имитации текстового контента: отображает несколько строк скелетона с учётом типографики (размер шрифта, межстрочный интервал), что позволяет точно соответствовать реальному тексту по высоте и визуальному стилю.
|
|
13
|
+
- `WithSkeleton` — компонент-обёртка для группировки блоков скелетона: принимает JSX-ноду скелетона в проп `skeleton` и контент в `children`, автоматически переключаясь между ними в зависимости от состояния загрузки.
|
|
14
|
+
- `SkeletonContextProvider` — контекст-провайдер для централизованного управления состоянием загрузки: находящиеся внутри этого контекста компоненты `Skeleton` и `SkeletonText` автоматически получают значение `loading` из контекста и не требуют явной передачи этого пропа.
|
|
15
|
+
- Все компоненты поддерживают работу как с явным пропом `loading`, так и с контекстом: если проп не передан, значение берётся из `SkeletonContextProvider`.
|
|
11
16
|
|
|
12
|
-
##
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
## Example
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { Skeleton, SkeletonText, SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';
|
|
21
|
+
|
|
22
|
+
function Example() {
|
|
23
|
+
const isLoading = true;
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<>
|
|
27
|
+
{/* Базовое использование Skeleton */}
|
|
28
|
+
<Skeleton loading={isLoading} width={200} height={100} borderRadius={8}>
|
|
29
|
+
<div>Контент после загрузки</div>
|
|
30
|
+
</Skeleton>
|
|
31
|
+
|
|
32
|
+
{/* Использование SkeletonText с типографикой */}
|
|
33
|
+
<SkeletonText loading={isLoading} lines={3} typography="body-m" width="100%">
|
|
34
|
+
<p>Текст, который появится после загрузки</p>
|
|
35
|
+
</SkeletonText>
|
|
36
|
+
|
|
37
|
+
{/* Централизованное управление через контекст */}
|
|
38
|
+
<SkeletonContextProvider loading={isLoading}>
|
|
39
|
+
<Skeleton width={100} height={100} borderRadius={50}>
|
|
40
|
+
<Avatar />
|
|
41
|
+
</Skeleton>
|
|
42
|
+
<SkeletonText lines={2}>
|
|
43
|
+
<Title />
|
|
44
|
+
</SkeletonText>
|
|
45
|
+
</SkeletonContextProvider>
|
|
46
|
+
|
|
47
|
+
{/* Группировка блоков с WithSkeleton */}
|
|
48
|
+
<SkeletonContextProvider loading={isLoading}>
|
|
49
|
+
<WithSkeleton
|
|
50
|
+
skeleton={
|
|
51
|
+
<div>
|
|
52
|
+
<Skeleton width={100} height={100} borderRadius={50} />
|
|
53
|
+
<SkeletonText lines={3} />
|
|
54
|
+
</div>
|
|
55
|
+
}
|
|
56
|
+
>
|
|
57
|
+
<Card />
|
|
58
|
+
</WithSkeleton>
|
|
59
|
+
</SkeletonContextProvider>
|
|
60
|
+
</>
|
|
61
|
+
);
|
|
62
|
+
}
|
|
21
63
|
```
|
|
22
64
|
|
|
23
65
|
[//]: DOCUMENTATION_SECTION_START
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Skeleton",
|
|
7
|
-
"version": "0.6.
|
|
7
|
+
"version": "0.6.10",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/utils": "
|
|
39
|
+
"@snack-uikit/utils": "4.0.1",
|
|
40
40
|
"classnames": "2.5.1"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "84371bbf91915f650a852df849cd71d416c5b7b2"
|
|
43
43
|
}
|