@bit.rhplus/ui2.ai-button 0.0.3 → 0.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/package.json
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bit.rhplus/ui2.ai-button",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"homepage": "https://bit.cloud/remote-scope/ui2/ai-button",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "remote-scope",
|
|
8
8
|
"name": "ui2/ai-button",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.4"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"classnames": "^2.5.1"
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@teambit/react.react-env": "1.
|
|
15
|
+
"@teambit/react.react-env": "1.3.1"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
|
-
"react": "^17.0.0 || ^18.0.0"
|
|
18
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
19
19
|
},
|
|
20
20
|
"license": "SEE LICENSE IN UNLICENSED",
|
|
21
21
|
"optionalDependencies": {},
|
package/README.md
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# AI Rainbow Button - Optimalizované výkonnostní módy
|
|
2
|
-
|
|
3
|
-
## 🚀 Použití
|
|
4
|
-
|
|
5
|
-
```jsx
|
|
6
|
-
import AIButton from '@bit.rhplus/ui2.ai-button/_src';
|
|
7
|
-
|
|
8
|
-
// Default mód - optimalizovaný, plynulý
|
|
9
|
-
<AIButton label="AI" onClick={handleClick} />
|
|
10
|
-
|
|
11
|
-
// Stepped mód - ~50-60% rychlejší
|
|
12
|
-
<AIButton
|
|
13
|
-
label="AI"
|
|
14
|
-
performanceMode="stepped"
|
|
15
|
-
onClick={handleClick}
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
// Minimal mód - ~70-80% rychlejší
|
|
19
|
-
<AIButton
|
|
20
|
-
label="AI"
|
|
21
|
-
performanceMode="minimal"
|
|
22
|
-
onClick={handleClick}
|
|
23
|
-
/>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## 📊 Výkonnostní módy
|
|
27
|
-
|
|
28
|
-
### `performanceMode="default"`
|
|
29
|
-
- Plynulé animace (60fps)
|
|
30
|
-
- Box-shadow glow efekt
|
|
31
|
-
- Plný rainbow gradient
|
|
32
|
-
- **CPU zátěž:** ~3-6% (při zobrazení)
|
|
33
|
-
- **Doporučeno:** Jednotlivá tlačítka, hero sekce
|
|
34
|
-
|
|
35
|
-
### `performanceMode="stepped"`
|
|
36
|
-
- Skokové animace (24 kroků, ~15° rotace)
|
|
37
|
-
- Plný glow efekt
|
|
38
|
-
- Plný rainbow gradient
|
|
39
|
-
- **CPU zátěž:** ~1-2% (při zobrazení)
|
|
40
|
-
- **Doporučeno:** 2-5 tlačítek na stránce
|
|
41
|
-
|
|
42
|
-
### `performanceMode="minimal"`
|
|
43
|
-
- Velmi skokové animace (12 kroků, ~30° rotace)
|
|
44
|
-
- BEZ glow efektu
|
|
45
|
-
- Zjednodušený gradient (4 barvy)
|
|
46
|
-
- **CPU zátěž:** ~0.5-1% (při zobrazení)
|
|
47
|
-
- **Doporučeno:** 5+ tlačítek, mobilní zařízení
|
|
48
|
-
|
|
49
|
-
## ⚡ Automatické optimalizace
|
|
50
|
-
|
|
51
|
-
Všechny módy automaticky:
|
|
52
|
-
- ✅ Pausují animace mimo viewport (0% CPU)
|
|
53
|
-
- ✅ GPU akcelerace (will-change, translateZ)
|
|
54
|
-
- ✅ CSS containment
|
|
55
|
-
- ✅ React.memo (prevence re-renderů)
|
|
56
|
-
- ✅ Respektují `prefers-reduced-motion`
|
|
57
|
-
|
|
58
|
-
## 🎨 Props
|
|
59
|
-
|
|
60
|
-
| Prop | Typ | Default | Popis |
|
|
61
|
-
|------|-----|---------|-------|
|
|
62
|
-
| `label` | string | 'AI' | Text na tlačítku |
|
|
63
|
-
| `onClick` | function | - | Click handler |
|
|
64
|
-
| `size` | string/number | '110px' | Velikost |
|
|
65
|
-
| `ring` | string/number | '10px' | Tloušťka prstence |
|
|
66
|
-
| `performanceMode` | 'default' \| 'stepped' \| 'minimal' | 'default' | Výkonnostní mód |
|
|
67
|
-
| `disableVisibilityOptimization` | boolean | false | Vypne auto-pause |
|
|
68
|
-
| `disabled` | boolean | false | Zakázat tlačítko |
|
|
69
|
-
|
|
70
|
-
## 📈 Benchmark výsledky
|
|
71
|
-
|
|
72
|
-
Test: 10 tlačítek na stránce, Chrome DevTools Performance
|
|
73
|
-
|
|
74
|
-
| Mód | Idle CPU | Active CPU | Paint Time | Frame Drops |
|
|
75
|
-
|-----|----------|------------|------------|-------------|
|
|
76
|
-
| Default | 0% | ~30% | 3-4ms | Vzácné |
|
|
77
|
-
| Stepped | 0% | ~12% | 1-2ms | Velmi vzácné |
|
|
78
|
-
| Minimal | 0% | ~5% | <1ms | Žádné |
|
|
79
|
-
|
|
80
|
-
## 💡 Doporučení
|
|
81
|
-
|
|
82
|
-
**Použij `default`** když:
|
|
83
|
-
- Máš 1-2 tlačítka na stránce
|
|
84
|
-
- Chceš nejlepší vizuální zážitek
|
|
85
|
-
- Výkon není kritický
|
|
86
|
-
|
|
87
|
-
**Použij `stepped`** když:
|
|
88
|
-
- Máš 3-5 tlačítek
|
|
89
|
-
- Vyvažuješ vzhled a výkon
|
|
90
|
-
- Mobilní zařízení (střední výkon)
|
|
91
|
-
|
|
92
|
-
**Použij `minimal`** když:
|
|
93
|
-
- Máš 5+ tlačítek
|
|
94
|
-
- Výkon je priorita
|
|
95
|
-
- Starší/slabší zařízení
|
|
96
|
-
- Baterie je kritická (mobilní)
|
package/dist/README.md
DELETED
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
# AI Rainbow Button - Optimalizované výkonnostní módy
|
|
2
|
-
|
|
3
|
-
## 🚀 Použití
|
|
4
|
-
|
|
5
|
-
```jsx
|
|
6
|
-
import AIButton from '@bit.rhplus/ui2.ai-button/_src';
|
|
7
|
-
|
|
8
|
-
// Default mód - optimalizovaný, plynulý
|
|
9
|
-
<AIButton label="AI" onClick={handleClick} />
|
|
10
|
-
|
|
11
|
-
// Stepped mód - ~50-60% rychlejší
|
|
12
|
-
<AIButton
|
|
13
|
-
label="AI"
|
|
14
|
-
performanceMode="stepped"
|
|
15
|
-
onClick={handleClick}
|
|
16
|
-
/>
|
|
17
|
-
|
|
18
|
-
// Minimal mód - ~70-80% rychlejší
|
|
19
|
-
<AIButton
|
|
20
|
-
label="AI"
|
|
21
|
-
performanceMode="minimal"
|
|
22
|
-
onClick={handleClick}
|
|
23
|
-
/>
|
|
24
|
-
```
|
|
25
|
-
|
|
26
|
-
## 📊 Výkonnostní módy
|
|
27
|
-
|
|
28
|
-
### `performanceMode="default"`
|
|
29
|
-
- Plynulé animace (60fps)
|
|
30
|
-
- Box-shadow glow efekt
|
|
31
|
-
- Plný rainbow gradient
|
|
32
|
-
- **CPU zátěž:** ~3-6% (při zobrazení)
|
|
33
|
-
- **Doporučeno:** Jednotlivá tlačítka, hero sekce
|
|
34
|
-
|
|
35
|
-
### `performanceMode="stepped"`
|
|
36
|
-
- Skokové animace (24 kroků, ~15° rotace)
|
|
37
|
-
- Plný glow efekt
|
|
38
|
-
- Plný rainbow gradient
|
|
39
|
-
- **CPU zátěž:** ~1-2% (při zobrazení)
|
|
40
|
-
- **Doporučeno:** 2-5 tlačítek na stránce
|
|
41
|
-
|
|
42
|
-
### `performanceMode="minimal"`
|
|
43
|
-
- Velmi skokové animace (12 kroků, ~30° rotace)
|
|
44
|
-
- BEZ glow efektu
|
|
45
|
-
- Zjednodušený gradient (4 barvy)
|
|
46
|
-
- **CPU zátěž:** ~0.5-1% (při zobrazení)
|
|
47
|
-
- **Doporučeno:** 5+ tlačítek, mobilní zařízení
|
|
48
|
-
|
|
49
|
-
## ⚡ Automatické optimalizace
|
|
50
|
-
|
|
51
|
-
Všechny módy automaticky:
|
|
52
|
-
- ✅ Pausují animace mimo viewport (0% CPU)
|
|
53
|
-
- ✅ GPU akcelerace (will-change, translateZ)
|
|
54
|
-
- ✅ CSS containment
|
|
55
|
-
- ✅ React.memo (prevence re-renderů)
|
|
56
|
-
- ✅ Respektují `prefers-reduced-motion`
|
|
57
|
-
|
|
58
|
-
## 🎨 Props
|
|
59
|
-
|
|
60
|
-
| Prop | Typ | Default | Popis |
|
|
61
|
-
|------|-----|---------|-------|
|
|
62
|
-
| `label` | string | 'AI' | Text na tlačítku |
|
|
63
|
-
| `onClick` | function | - | Click handler |
|
|
64
|
-
| `size` | string/number | '110px' | Velikost |
|
|
65
|
-
| `ring` | string/number | '10px' | Tloušťka prstence |
|
|
66
|
-
| `performanceMode` | 'default' \| 'stepped' \| 'minimal' | 'default' | Výkonnostní mód |
|
|
67
|
-
| `disableVisibilityOptimization` | boolean | false | Vypne auto-pause |
|
|
68
|
-
| `disabled` | boolean | false | Zakázat tlačítko |
|
|
69
|
-
|
|
70
|
-
## 📈 Benchmark výsledky
|
|
71
|
-
|
|
72
|
-
Test: 10 tlačítek na stránce, Chrome DevTools Performance
|
|
73
|
-
|
|
74
|
-
| Mód | Idle CPU | Active CPU | Paint Time | Frame Drops |
|
|
75
|
-
|-----|----------|------------|------------|-------------|
|
|
76
|
-
| Default | 0% | ~30% | 3-4ms | Vzácné |
|
|
77
|
-
| Stepped | 0% | ~12% | 1-2ms | Velmi vzácné |
|
|
78
|
-
| Minimal | 0% | ~5% | <1ms | Žádné |
|
|
79
|
-
|
|
80
|
-
## 💡 Doporučení
|
|
81
|
-
|
|
82
|
-
**Použij `default`** když:
|
|
83
|
-
- Máš 1-2 tlačítka na stránce
|
|
84
|
-
- Chceš nejlepší vizuální zážitek
|
|
85
|
-
- Výkon není kritický
|
|
86
|
-
|
|
87
|
-
**Použij `stepped`** když:
|
|
88
|
-
- Máš 3-5 tlačítek
|
|
89
|
-
- Vyvažuješ vzhled a výkon
|
|
90
|
-
- Mobilní zařízení (střední výkon)
|
|
91
|
-
|
|
92
|
-
**Použij `minimal`** když:
|
|
93
|
-
- Máš 5+ tlačítek
|
|
94
|
-
- Výkon je priorita
|
|
95
|
-
- Starší/slabší zařízení
|
|
96
|
-
- Baterie je kritická (mobilní)
|
|
File without changes
|