@designcrowd/fe-shared-lib 1.6.9 → 1.6.10-voiceText-1
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/.claude/skills/playwright-cli/SKILL.md +278 -0
- package/.claude/skills/playwright-cli/references/request-mocking.md +87 -0
- package/.claude/skills/playwright-cli/references/running-code.md +232 -0
- package/.claude/skills/playwright-cli/references/session-management.md +169 -0
- package/.claude/skills/playwright-cli/references/storage-state.md +275 -0
- package/.claude/skills/playwright-cli/references/test-generation.md +88 -0
- package/.claude/skills/playwright-cli/references/tracing.md +139 -0
- package/.claude/skills/playwright-cli/references/video-recording.md +43 -0
- package/.playwright-cli/page-2026-04-13T02-23-08-374Z.yml +68 -0
- package/.playwright-cli/page-2026-04-13T02-23-13-730Z.yml +421 -0
- package/CLAUDE.md +35 -0
- package/index.js +2 -0
- package/package.json +3 -1
- package/public/css/tailwind-brandCrowd.css +25 -0
- package/public/css/tailwind-brandPage.css +21 -0
- package/public/css/tailwind-crazyDomains.css +25 -0
- package/public/css/tailwind-designCom.css +25 -0
- package/public/css/tailwind-designCrowd.css +25 -0
- package/src/atoms/components/Icon/Icon.vue +2 -0
- package/src/atoms/components/Icon/icons/microphone.vue +5 -0
- package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.stories.js +105 -0
- package/src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue +121 -0
- package/src/useVoiceToText.js +174 -0
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
- generic [ref=e3]:
|
|
2
|
+
- navigation "Global" [ref=e6]:
|
|
3
|
+
- generic [ref=e10]:
|
|
4
|
+
- generic [ref=e11]:
|
|
5
|
+
- link "Skip to canvas" [ref=e12] [cursor=pointer]:
|
|
6
|
+
- /url: "#storybook-preview-wrapper"
|
|
7
|
+
- link "Storybook" [ref=e14] [cursor=pointer]:
|
|
8
|
+
- /url: ./
|
|
9
|
+
- img "Storybook" [ref=e15]
|
|
10
|
+
- button "Shortcuts" [ref=e21] [cursor=pointer]:
|
|
11
|
+
- img [ref=e22]
|
|
12
|
+
- generic [ref=e25]: Search for components
|
|
13
|
+
- combobox "Search for components" [ref=e27]:
|
|
14
|
+
- generic:
|
|
15
|
+
- img
|
|
16
|
+
- searchbox "Search for components" [ref=e28]
|
|
17
|
+
- code: ⌃ K
|
|
18
|
+
- main [ref=e52]:
|
|
19
|
+
- generic [ref=e54]:
|
|
20
|
+
- generic [ref=e55]:
|
|
21
|
+
- button "Remount component" [ref=e56] [cursor=pointer]:
|
|
22
|
+
- img [ref=e57]
|
|
23
|
+
- button "Zoom in" [ref=e59] [cursor=pointer]:
|
|
24
|
+
- img [ref=e60]
|
|
25
|
+
- button "Zoom out" [ref=e63] [cursor=pointer]:
|
|
26
|
+
- img [ref=e64]
|
|
27
|
+
- button "Reset zoom" [ref=e67] [cursor=pointer]:
|
|
28
|
+
- img [ref=e68]
|
|
29
|
+
- button "Enable measure" [ref=e71] [cursor=pointer]:
|
|
30
|
+
- img [ref=e72]
|
|
31
|
+
- button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
|
|
32
|
+
- img [ref=e76]
|
|
33
|
+
- button "Change the size of the preview" [ref=e79] [cursor=pointer]:
|
|
34
|
+
- img [ref=e80]
|
|
35
|
+
- button "Vision simulator" [ref=e85] [cursor=pointer]:
|
|
36
|
+
- img [ref=e86]
|
|
37
|
+
- generic:
|
|
38
|
+
- img
|
|
39
|
+
- generic [ref=e90]:
|
|
40
|
+
- button "Go full screen" [ref=e91] [cursor=pointer]:
|
|
41
|
+
- img [ref=e92]
|
|
42
|
+
- link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
|
|
43
|
+
- /url: iframe.html?id=components-voicetotextbutton--prompt-input-demo
|
|
44
|
+
- img [ref=e95]
|
|
45
|
+
- button "Copy canvas link" [ref=e98] [cursor=pointer]:
|
|
46
|
+
- img [ref=e99]
|
|
47
|
+
- generic [ref=e103]:
|
|
48
|
+
- progressbar "Content is loading..." [ref=e105]
|
|
49
|
+
- generic [ref=e106]:
|
|
50
|
+
- link "Skip to sidebar" [ref=e107] [cursor=pointer]:
|
|
51
|
+
- /url: "#components-voicetotextbutton--prompt-input-demo"
|
|
52
|
+
- iframe [ref=e108]:
|
|
53
|
+
|
|
54
|
+
- generic [ref=e113]:
|
|
55
|
+
- tablist [ref=e115]:
|
|
56
|
+
- tab "Controls" [ref=e116] [cursor=pointer]:
|
|
57
|
+
- generic [ref=e118]: Controls
|
|
58
|
+
- tab "Actions" [ref=e119] [cursor=pointer]:
|
|
59
|
+
- generic [ref=e121]: Actions
|
|
60
|
+
- tab "Interactions" [ref=e122] [cursor=pointer]:
|
|
61
|
+
- generic [ref=e124]: Interactions
|
|
62
|
+
- tab "Accessibility" [ref=e125] [cursor=pointer]:
|
|
63
|
+
- generic [ref=e127]: Accessibility
|
|
64
|
+
- generic [ref=e130]:
|
|
65
|
+
- button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
|
|
66
|
+
- img [ref=e132]
|
|
67
|
+
- button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
|
|
68
|
+
- img [ref=e136]
|
|
@@ -0,0 +1,421 @@
|
|
|
1
|
+
- generic [ref=e3]:
|
|
2
|
+
- navigation "Global" [ref=e6]:
|
|
3
|
+
- generic [ref=e9]:
|
|
4
|
+
- generic [ref=e10]:
|
|
5
|
+
- generic [ref=e11]:
|
|
6
|
+
- link "Skip to canvas" [ref=e12] [cursor=pointer]:
|
|
7
|
+
- /url: "#storybook-preview-wrapper"
|
|
8
|
+
- link "Storybook" [ref=e14] [cursor=pointer]:
|
|
9
|
+
- /url: ./
|
|
10
|
+
- img "Storybook" [ref=e15]
|
|
11
|
+
- button "Shortcuts" [ref=e21] [cursor=pointer]:
|
|
12
|
+
- img [ref=e22]
|
|
13
|
+
- generic [ref=e25]: Search for components
|
|
14
|
+
- combobox "Search for components" [ref=e27]:
|
|
15
|
+
- generic:
|
|
16
|
+
- img
|
|
17
|
+
- searchbox "Search for components" [ref=e28]
|
|
18
|
+
- code: ⌃ K
|
|
19
|
+
- button "Tag filters" [ref=e143] [cursor=pointer]:
|
|
20
|
+
- img [ref=e144]
|
|
21
|
+
- generic [ref=e146]:
|
|
22
|
+
- img
|
|
23
|
+
- generic [ref=e147]:
|
|
24
|
+
- button "Components" [expanded] [ref=e148] [cursor=pointer]:
|
|
25
|
+
- img [ref=e150]
|
|
26
|
+
- text: Components
|
|
27
|
+
- button "Collapse" [ref=e152] [cursor=pointer]:
|
|
28
|
+
- img [ref=e153]
|
|
29
|
+
- button "AiPoweredLoader" [ref=e156] [cursor=pointer]:
|
|
30
|
+
- generic [ref=e157]:
|
|
31
|
+
- img [ref=e159]
|
|
32
|
+
- img [ref=e161]
|
|
33
|
+
- text: AiPoweredLoader
|
|
34
|
+
- button "Buttons" [ref=e164] [cursor=pointer]:
|
|
35
|
+
- generic [ref=e165]:
|
|
36
|
+
- img [ref=e167]
|
|
37
|
+
- img [ref=e169]
|
|
38
|
+
- text: Buttons
|
|
39
|
+
- button "ButtonGroup" [ref=e172] [cursor=pointer]:
|
|
40
|
+
- generic [ref=e173]:
|
|
41
|
+
- img [ref=e175]
|
|
42
|
+
- img [ref=e177]
|
|
43
|
+
- text: ButtonGroup
|
|
44
|
+
- button "Carousel" [ref=e180] [cursor=pointer]:
|
|
45
|
+
- generic [ref=e181]:
|
|
46
|
+
- img [ref=e183]
|
|
47
|
+
- img [ref=e185]
|
|
48
|
+
- text: Carousel
|
|
49
|
+
- button "Checkbox" [ref=e188] [cursor=pointer]:
|
|
50
|
+
- generic [ref=e189]:
|
|
51
|
+
- img [ref=e191]
|
|
52
|
+
- img [ref=e193]
|
|
53
|
+
- text: Checkbox
|
|
54
|
+
- button "Checktile" [ref=e196] [cursor=pointer]:
|
|
55
|
+
- generic [ref=e197]:
|
|
56
|
+
- img [ref=e199]
|
|
57
|
+
- img [ref=e201]
|
|
58
|
+
- text: Checktile
|
|
59
|
+
- button "CollapsiblePanel" [ref=e204] [cursor=pointer]:
|
|
60
|
+
- generic [ref=e205]:
|
|
61
|
+
- img [ref=e207]
|
|
62
|
+
- img [ref=e209]
|
|
63
|
+
- text: CollapsiblePanel
|
|
64
|
+
- button "Color Picker" [ref=e212] [cursor=pointer]:
|
|
65
|
+
- generic [ref=e213]:
|
|
66
|
+
- img [ref=e215]
|
|
67
|
+
- img [ref=e217]
|
|
68
|
+
- text: Color Picker
|
|
69
|
+
- button "CopyToClipboardText" [ref=e220] [cursor=pointer]:
|
|
70
|
+
- generic [ref=e221]:
|
|
71
|
+
- img [ref=e223]
|
|
72
|
+
- img [ref=e225]
|
|
73
|
+
- text: CopyToClipboardText
|
|
74
|
+
- button "Dropdown" [ref=e228] [cursor=pointer]:
|
|
75
|
+
- generic [ref=e229]:
|
|
76
|
+
- img [ref=e231]
|
|
77
|
+
- img [ref=e233]
|
|
78
|
+
- text: Dropdown
|
|
79
|
+
- button "HelloBar" [ref=e236] [cursor=pointer]:
|
|
80
|
+
- generic [ref=e237]:
|
|
81
|
+
- img [ref=e239]
|
|
82
|
+
- img [ref=e241]
|
|
83
|
+
- text: HelloBar
|
|
84
|
+
- button "Icons" [ref=e244] [cursor=pointer]:
|
|
85
|
+
- generic [ref=e245]:
|
|
86
|
+
- img [ref=e247]
|
|
87
|
+
- img [ref=e249]
|
|
88
|
+
- text: Icons
|
|
89
|
+
- button "Masonry" [ref=e252] [cursor=pointer]:
|
|
90
|
+
- generic [ref=e253]:
|
|
91
|
+
- img [ref=e255]
|
|
92
|
+
- img [ref=e257]
|
|
93
|
+
- text: Masonry
|
|
94
|
+
- button "Hash Router Modal" [ref=e260] [cursor=pointer]:
|
|
95
|
+
- generic [ref=e261]:
|
|
96
|
+
- img [ref=e263]
|
|
97
|
+
- img [ref=e265]
|
|
98
|
+
- text: Hash Router Modal
|
|
99
|
+
- button "Modal" [ref=e268] [cursor=pointer]:
|
|
100
|
+
- generic [ref=e269]:
|
|
101
|
+
- img [ref=e271]
|
|
102
|
+
- img [ref=e273]
|
|
103
|
+
- text: Modal
|
|
104
|
+
- button "Notice" [ref=e276] [cursor=pointer]:
|
|
105
|
+
- generic [ref=e277]:
|
|
106
|
+
- img [ref=e279]
|
|
107
|
+
- img [ref=e281]
|
|
108
|
+
- text: Notice
|
|
109
|
+
- button "Number Stepper" [ref=e284] [cursor=pointer]:
|
|
110
|
+
- generic [ref=e285]:
|
|
111
|
+
- img [ref=e287]
|
|
112
|
+
- img [ref=e289]
|
|
113
|
+
- text: Number Stepper
|
|
114
|
+
- button "Picture" [ref=e292] [cursor=pointer]:
|
|
115
|
+
- generic [ref=e293]:
|
|
116
|
+
- img [ref=e295]
|
|
117
|
+
- img [ref=e297]
|
|
118
|
+
- text: Picture
|
|
119
|
+
- button "Pill" [ref=e300] [cursor=pointer]:
|
|
120
|
+
- generic [ref=e301]:
|
|
121
|
+
- img [ref=e303]
|
|
122
|
+
- img [ref=e305]
|
|
123
|
+
- text: Pill
|
|
124
|
+
- button "PillBar" [ref=e308] [cursor=pointer]:
|
|
125
|
+
- generic [ref=e309]:
|
|
126
|
+
- img [ref=e311]
|
|
127
|
+
- img [ref=e313]
|
|
128
|
+
- text: PillBar
|
|
129
|
+
- button "Price" [ref=e316] [cursor=pointer]:
|
|
130
|
+
- generic [ref=e317]:
|
|
131
|
+
- img [ref=e319]
|
|
132
|
+
- img [ref=e321]
|
|
133
|
+
- text: Price
|
|
134
|
+
- button "PromoCard" [ref=e324] [cursor=pointer]:
|
|
135
|
+
- generic [ref=e325]:
|
|
136
|
+
- img [ref=e327]
|
|
137
|
+
- img [ref=e329]
|
|
138
|
+
- text: PromoCard
|
|
139
|
+
- button "Search Bar" [ref=e332] [cursor=pointer]:
|
|
140
|
+
- generic [ref=e333]:
|
|
141
|
+
- img [ref=e335]
|
|
142
|
+
- img [ref=e337]
|
|
143
|
+
- text: Search Bar
|
|
144
|
+
- button "Select" [ref=e340] [cursor=pointer]:
|
|
145
|
+
- generic [ref=e341]:
|
|
146
|
+
- img [ref=e343]
|
|
147
|
+
- img [ref=e345]
|
|
148
|
+
- text: Select
|
|
149
|
+
- button "Slider" [ref=e348] [cursor=pointer]:
|
|
150
|
+
- generic [ref=e349]:
|
|
151
|
+
- img [ref=e351]
|
|
152
|
+
- img [ref=e353]
|
|
153
|
+
- text: Slider
|
|
154
|
+
- button "SparkleIcon" [ref=e356] [cursor=pointer]:
|
|
155
|
+
- generic [ref=e357]:
|
|
156
|
+
- img [ref=e359]
|
|
157
|
+
- img [ref=e361]
|
|
158
|
+
- text: SparkleIcon
|
|
159
|
+
- button "Star Rating" [ref=e364] [cursor=pointer]:
|
|
160
|
+
- generic [ref=e365]:
|
|
161
|
+
- img [ref=e367]
|
|
162
|
+
- img [ref=e369]
|
|
163
|
+
- text: Star Rating
|
|
164
|
+
- button "Tab Menu" [ref=e372] [cursor=pointer]:
|
|
165
|
+
- generic [ref=e373]:
|
|
166
|
+
- img [ref=e375]
|
|
167
|
+
- img [ref=e377]
|
|
168
|
+
- text: Tab Menu
|
|
169
|
+
- button "Text Copy Field" [ref=e380] [cursor=pointer]:
|
|
170
|
+
- generic [ref=e381]:
|
|
171
|
+
- img [ref=e383]
|
|
172
|
+
- img [ref=e385]
|
|
173
|
+
- text: Text Copy Field
|
|
174
|
+
- button "Text Input" [ref=e388] [cursor=pointer]:
|
|
175
|
+
- generic [ref=e389]:
|
|
176
|
+
- img [ref=e391]
|
|
177
|
+
- img [ref=e393]
|
|
178
|
+
- text: Text Input
|
|
179
|
+
- button "Textarea" [ref=e396] [cursor=pointer]:
|
|
180
|
+
- generic [ref=e397]:
|
|
181
|
+
- img [ref=e399]
|
|
182
|
+
- img [ref=e401]
|
|
183
|
+
- text: Textarea
|
|
184
|
+
- button "Toggle" [ref=e404] [cursor=pointer]:
|
|
185
|
+
- generic [ref=e405]:
|
|
186
|
+
- img [ref=e407]
|
|
187
|
+
- img [ref=e409]
|
|
188
|
+
- text: Toggle
|
|
189
|
+
- button "Tooltip" [ref=e412] [cursor=pointer]:
|
|
190
|
+
- generic [ref=e413]:
|
|
191
|
+
- img [ref=e415]
|
|
192
|
+
- img [ref=e417]
|
|
193
|
+
- text: Tooltip
|
|
194
|
+
- button "VoiceToTextButton" [expanded] [ref=e420] [cursor=pointer]:
|
|
195
|
+
- generic [ref=e421]:
|
|
196
|
+
- img [ref=e423]
|
|
197
|
+
- img [ref=e425]
|
|
198
|
+
- text: VoiceToTextButton
|
|
199
|
+
- generic [ref=e427]:
|
|
200
|
+
- link "Prompt Input Demo" [ref=e428] [cursor=pointer]:
|
|
201
|
+
- /url: /?path=/story/components-voicetotextbutton--prompt-input-demo
|
|
202
|
+
- img [ref=e430]
|
|
203
|
+
- text: Prompt Input Demo
|
|
204
|
+
- link "Skip to canvas" [ref=e432] [cursor=pointer]:
|
|
205
|
+
- /url: "#storybook-preview-wrapper"
|
|
206
|
+
- link "Prompt Variant States" [ref=e434] [cursor=pointer]:
|
|
207
|
+
- /url: /?path=/story/components-voicetotextbutton--prompt-variant-states
|
|
208
|
+
- img [ref=e436]
|
|
209
|
+
- text: Prompt Variant States
|
|
210
|
+
- button "DesignCom" [ref=e439] [cursor=pointer]:
|
|
211
|
+
- generic [ref=e440]:
|
|
212
|
+
- img [ref=e442]
|
|
213
|
+
- img [ref=e444]
|
|
214
|
+
- text: DesignCom
|
|
215
|
+
- button "SignIn" [ref=e447] [cursor=pointer]:
|
|
216
|
+
- generic [ref=e448]:
|
|
217
|
+
- img [ref=e450]
|
|
218
|
+
- img [ref=e452]
|
|
219
|
+
- text: SignIn
|
|
220
|
+
- button "PaymentConfigList" [ref=e455] [cursor=pointer]:
|
|
221
|
+
- generic [ref=e456]:
|
|
222
|
+
- img [ref=e458]
|
|
223
|
+
- img [ref=e460]
|
|
224
|
+
- text: PaymentConfigList
|
|
225
|
+
- button "PublishBrandPageModal" [ref=e463] [cursor=pointer]:
|
|
226
|
+
- generic [ref=e464]:
|
|
227
|
+
- img [ref=e466]
|
|
228
|
+
- img [ref=e468]
|
|
229
|
+
- text: PublishBrandPageModal
|
|
230
|
+
- button "SellDomainNameListModal" [ref=e471] [cursor=pointer]:
|
|
231
|
+
- generic [ref=e472]:
|
|
232
|
+
- img [ref=e474]
|
|
233
|
+
- img [ref=e476]
|
|
234
|
+
- text: SellDomainNameListModal
|
|
235
|
+
- button "SellDomainNameSearchWithResults" [ref=e479] [cursor=pointer]:
|
|
236
|
+
- generic [ref=e480]:
|
|
237
|
+
- img [ref=e482]
|
|
238
|
+
- img [ref=e484]
|
|
239
|
+
- text: SellDomainNameSearchWithResults
|
|
240
|
+
- button "SellDomainNameWidget" [ref=e487] [cursor=pointer]:
|
|
241
|
+
- generic [ref=e488]:
|
|
242
|
+
- img [ref=e490]
|
|
243
|
+
- img [ref=e492]
|
|
244
|
+
- text: SellDomainNameWidget
|
|
245
|
+
- button "UploadYourLogoApplication" [ref=e495] [cursor=pointer]:
|
|
246
|
+
- generic [ref=e496]:
|
|
247
|
+
- img [ref=e498]
|
|
248
|
+
- img [ref=e500]
|
|
249
|
+
- text: UploadYourLogoApplication
|
|
250
|
+
- button "UploadYourLogoDropzone" [ref=e503] [cursor=pointer]:
|
|
251
|
+
- generic [ref=e504]:
|
|
252
|
+
- img [ref=e506]
|
|
253
|
+
- img [ref=e508]
|
|
254
|
+
- text: UploadYourLogoDropzone
|
|
255
|
+
- button "LogoBusinessBrandColours" [ref=e511] [cursor=pointer]:
|
|
256
|
+
- generic [ref=e512]:
|
|
257
|
+
- img [ref=e514]
|
|
258
|
+
- img [ref=e516]
|
|
259
|
+
- text: LogoBusinessBrandColours
|
|
260
|
+
- button "LogoKeywords" [ref=e519] [cursor=pointer]:
|
|
261
|
+
- generic [ref=e520]:
|
|
262
|
+
- img [ref=e522]
|
|
263
|
+
- img [ref=e524]
|
|
264
|
+
- text: LogoKeywords
|
|
265
|
+
- button "UploadedLogoSearchResultCard" [ref=e527] [cursor=pointer]:
|
|
266
|
+
- generic [ref=e528]:
|
|
267
|
+
- img [ref=e530]
|
|
268
|
+
- img [ref=e532]
|
|
269
|
+
- text: UploadedLogoSearchResultCard
|
|
270
|
+
- button "WebsitesContextualUpgradeModal" [ref=e535] [cursor=pointer]:
|
|
271
|
+
- generic [ref=e536]:
|
|
272
|
+
- img [ref=e538]
|
|
273
|
+
- img [ref=e540]
|
|
274
|
+
- text: WebsitesContextualUpgradeModal
|
|
275
|
+
- generic [ref=e542]:
|
|
276
|
+
- button "Experiences" [expanded] [ref=e543] [cursor=pointer]:
|
|
277
|
+
- img [ref=e545]
|
|
278
|
+
- text: Experiences
|
|
279
|
+
- button "Collapse" [ref=e547] [cursor=pointer]:
|
|
280
|
+
- img [ref=e548]
|
|
281
|
+
- button "SideNavigationPanel" [ref=e551] [cursor=pointer]:
|
|
282
|
+
- generic [ref=e552]:
|
|
283
|
+
- img [ref=e554]
|
|
284
|
+
- img [ref=e556]
|
|
285
|
+
- text: SideNavigationPanel
|
|
286
|
+
- link "Storybook 10.3 Learn what's new in Storybook" [ref=e560] [cursor=pointer]:
|
|
287
|
+
- /url: /?path=/settings/whats-new
|
|
288
|
+
- img [ref=e562]
|
|
289
|
+
- generic [ref=e564]:
|
|
290
|
+
- generic "Storybook 10.3" [ref=e565]
|
|
291
|
+
- generic [ref=e566]: Learn what's new in Storybook
|
|
292
|
+
- button "Dismiss notification" [ref=e567]:
|
|
293
|
+
- img [ref=e568]
|
|
294
|
+
- main [ref=e52]:
|
|
295
|
+
- generic [ref=e54]:
|
|
296
|
+
- generic [ref=e55]:
|
|
297
|
+
- button "Remount component" [ref=e56] [cursor=pointer]:
|
|
298
|
+
- img [ref=e57]
|
|
299
|
+
- button "Zoom in" [ref=e59] [cursor=pointer]:
|
|
300
|
+
- img [ref=e60]
|
|
301
|
+
- button "Zoom out" [ref=e63] [cursor=pointer]:
|
|
302
|
+
- img [ref=e64]
|
|
303
|
+
- button "Reset zoom" [ref=e67] [cursor=pointer]:
|
|
304
|
+
- img [ref=e68]
|
|
305
|
+
- button "Apply a grid to the preview" [ref=e570] [cursor=pointer]:
|
|
306
|
+
- img [ref=e571]
|
|
307
|
+
- button "Change the background of the preview" [ref=e574] [cursor=pointer]:
|
|
308
|
+
- img [ref=e575]
|
|
309
|
+
- button "Enable measure" [ref=e71] [cursor=pointer]:
|
|
310
|
+
- img [ref=e72]
|
|
311
|
+
- button "Apply outlines to the preview" [ref=e75] [cursor=pointer]:
|
|
312
|
+
- img [ref=e76]
|
|
313
|
+
- button "Change the size of the preview" [ref=e79] [cursor=pointer]:
|
|
314
|
+
- img [ref=e80]
|
|
315
|
+
- button "Vision simulator" [ref=e85] [cursor=pointer]:
|
|
316
|
+
- img [ref=e86]
|
|
317
|
+
- generic:
|
|
318
|
+
- img
|
|
319
|
+
- button "brandCrowd theme" [ref=e579] [cursor=pointer]:
|
|
320
|
+
- img [ref=e580]
|
|
321
|
+
- generic [ref=e582]: brandCrowd theme
|
|
322
|
+
- button "🇺🇸 English (US)" [ref=e585] [cursor=pointer]:
|
|
323
|
+
- img [ref=e586]
|
|
324
|
+
- text: 🇺🇸 English (US)
|
|
325
|
+
- generic [ref=e90]:
|
|
326
|
+
- button "Go full screen" [ref=e91] [cursor=pointer]:
|
|
327
|
+
- img [ref=e92]
|
|
328
|
+
- link "Open canvas in new tab" [ref=e94] [cursor=pointer]:
|
|
329
|
+
- /url: iframe.html?globals=&id=components-voicetotextbutton--prompt-input-demo
|
|
330
|
+
- img [ref=e95]
|
|
331
|
+
- button "Copy canvas link" [ref=e98] [cursor=pointer]:
|
|
332
|
+
- img [ref=e99]
|
|
333
|
+
- generic [ref=e106]:
|
|
334
|
+
- link "Skip to sidebar" [ref=e107] [cursor=pointer]:
|
|
335
|
+
- /url: "#components-voicetotextbutton--prompt-input-demo"
|
|
336
|
+
- iframe [ref=e108]:
|
|
337
|
+
- generic [active] [ref=f1e1]:
|
|
338
|
+
- generic [ref=f1e3]:
|
|
339
|
+
- heading "Design anything with AI" [level=1] [ref=f1e4]
|
|
340
|
+
- paragraph [ref=f1e5]: Design a logo, a website, or anything else in seconds with the power of AI
|
|
341
|
+
- generic [ref=f1e6]:
|
|
342
|
+
- textbox "What would you like to design?" [ref=f1e7]
|
|
343
|
+
- button "Start voice input" [ref=f1e8] [cursor=pointer]:
|
|
344
|
+
- img [ref=f1e10]
|
|
345
|
+
- button [ref=f1e12] [cursor=pointer]:
|
|
346
|
+
- img [ref=f1e13]
|
|
347
|
+
- generic [ref=f1e15]:
|
|
348
|
+
- generic "Toggle devtools panel" [ref=f1e16] [cursor=pointer]:
|
|
349
|
+
- img [ref=f1e17]
|
|
350
|
+
- generic "Toggle Component Inspector" [ref=f1e22] [cursor=pointer]:
|
|
351
|
+
- img [ref=f1e23]
|
|
352
|
+
- generic [ref=e111]:
|
|
353
|
+
- generic [ref=e113]:
|
|
354
|
+
- tablist [ref=e115]:
|
|
355
|
+
- tab "Controls 5" [ref=e588] [cursor=pointer]:
|
|
356
|
+
- generic [ref=e117]:
|
|
357
|
+
- generic [ref=e118]: Controls
|
|
358
|
+
- generic [ref=e589]: "5"
|
|
359
|
+
- tab "Actions" [ref=e119] [cursor=pointer]:
|
|
360
|
+
- generic [ref=e121]: Actions
|
|
361
|
+
- tab "Interactions" [ref=e122] [cursor=pointer]:
|
|
362
|
+
- generic [ref=e124]: Interactions
|
|
363
|
+
- tab "Accessibility 5" [ref=e644] [cursor=pointer]:
|
|
364
|
+
- generic [ref=e126]:
|
|
365
|
+
- generic [ref=e127]: Accessibility
|
|
366
|
+
- generic [ref=e645]: "5"
|
|
367
|
+
- generic [ref=e130]:
|
|
368
|
+
- button "Change addon orientation [alt D]" [ref=e131] [cursor=pointer]:
|
|
369
|
+
- img [ref=e132]
|
|
370
|
+
- button "Hide addons [alt A]" [ref=e135] [cursor=pointer]:
|
|
371
|
+
- img [ref=e136]
|
|
372
|
+
- table [ref=e594]:
|
|
373
|
+
- rowgroup [ref=e595]:
|
|
374
|
+
- row "Name Control" [ref=e596]:
|
|
375
|
+
- columnheader "Name" [ref=e597]
|
|
376
|
+
- columnheader "Control" [ref=e598]:
|
|
377
|
+
- generic [ref=e599]:
|
|
378
|
+
- text: Control
|
|
379
|
+
- button "Reset controls" [ref=e600] [cursor=pointer]:
|
|
380
|
+
- img [ref=e601]
|
|
381
|
+
- rowgroup [ref=e603]:
|
|
382
|
+
- row "Hide props items props Hide props items" [ref=e604]:
|
|
383
|
+
- cell "Hide props items props" [ref=e605]:
|
|
384
|
+
- button "Hide props items" [ref=e606]
|
|
385
|
+
- generic [ref=e607]:
|
|
386
|
+
- img [ref=e608]
|
|
387
|
+
- text: props
|
|
388
|
+
- cell "Hide props items" [ref=e610]:
|
|
389
|
+
- button "Hide props items" [ref=e611]
|
|
390
|
+
- row "lang -" [ref=e612]:
|
|
391
|
+
- cell "lang" [ref=e613]
|
|
392
|
+
- cell "-" [ref=e614]
|
|
393
|
+
- row "disabled -" [ref=e615]:
|
|
394
|
+
- cell "disabled" [ref=e616]
|
|
395
|
+
- cell "-" [ref=e617]
|
|
396
|
+
- row "size -" [ref=e618]:
|
|
397
|
+
- cell "size" [ref=e619]
|
|
398
|
+
- cell "-" [ref=e620]
|
|
399
|
+
- row "Hide events items events Hide events items" [ref=e621]:
|
|
400
|
+
- cell "Hide events items events" [ref=e622]:
|
|
401
|
+
- button "Hide events items" [ref=e623]
|
|
402
|
+
- generic [ref=e624]:
|
|
403
|
+
- img [ref=e625]
|
|
404
|
+
- text: events
|
|
405
|
+
- cell "Hide events items" [ref=e627]:
|
|
406
|
+
- button "Hide events items" [ref=e628]
|
|
407
|
+
- row "on-transcript -" [ref=e629]:
|
|
408
|
+
- cell "on-transcript" [ref=e630]
|
|
409
|
+
- cell "-" [ref=e631]
|
|
410
|
+
- row "on-interim-transcript -" [ref=e632]:
|
|
411
|
+
- cell "on-interim-transcript" [ref=e633]
|
|
412
|
+
- cell "-" [ref=e634]
|
|
413
|
+
- row "on-start -" [ref=e635]:
|
|
414
|
+
- cell "on-start" [ref=e636]
|
|
415
|
+
- cell "-" [ref=e637]
|
|
416
|
+
- row "on-stop -" [ref=e638]:
|
|
417
|
+
- cell "on-stop" [ref=e639]
|
|
418
|
+
- cell "-" [ref=e640]
|
|
419
|
+
- row "on-error -" [ref=e641]:
|
|
420
|
+
- cell "on-error" [ref=e642]
|
|
421
|
+
- cell "-" [ref=e643]
|
package/CLAUDE.md
CHANGED
|
@@ -78,6 +78,41 @@ Themes are compiled into separate CSS files via `tailwind.build.js` → `dist/cs
|
|
|
78
78
|
- Stories pattern: `src/**/components/**/*.stories.@(js|jsx|ts|tsx)`
|
|
79
79
|
- Supports theme switching (5 brands) and locale switching (8 languages)
|
|
80
80
|
|
|
81
|
+
## Verifying UI Changes
|
|
82
|
+
|
|
83
|
+
After modifying Vue components or Storybook stories, verify changes visually using playwright-cli.
|
|
84
|
+
|
|
85
|
+
### Workflow
|
|
86
|
+
|
|
87
|
+
1. **Start Storybook** (runs in background):
|
|
88
|
+
```bash
|
|
89
|
+
npm start
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
2. **Wait for availability** - Storybook runs on http://localhost:6006. Check with:
|
|
93
|
+
```bash
|
|
94
|
+
curl -s -o /dev/null -w "%{http_code}" http://localhost:6006
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
3. **Navigate and screenshot** using playwright-cli:
|
|
98
|
+
```bash
|
|
99
|
+
playwright-cli open "http://localhost:6006/?path=/story/components-buttonname--default"
|
|
100
|
+
playwright-cli snapshot # See page structure
|
|
101
|
+
playwright-cli screenshot f1e4 --filename=component.png # Screenshot specific element
|
|
102
|
+
playwright-cli close
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Story URL Pattern
|
|
106
|
+
|
|
107
|
+
Stories are accessed via: `http://localhost:6006/?path=/story/{title-path}--{story-name}`
|
|
108
|
+
- Title path: lowercase, hyphens instead of spaces/slashes (e.g., `Components/VoiceToTextButton` becomes `components-voicetotextbutton`)
|
|
109
|
+
- Story name: lowercase export name (e.g., `Default` becomes `default`)
|
|
110
|
+
|
|
111
|
+
### Common Issues
|
|
112
|
+
|
|
113
|
+
- **package.json parse errors**: Ensure valid JSON (watch for missing commas after version changes)
|
|
114
|
+
- **React dependency errors**: Storybook 9 requires `react` and `react-dom` as devDependencies
|
|
115
|
+
|
|
81
116
|
## Local Development
|
|
82
117
|
|
|
83
118
|
Use `npm link` for local development with consumer projects:
|
package/index.js
CHANGED
|
@@ -22,6 +22,7 @@ export { default as WebsiteContextualUpgradeModal } from './src/experiences/comp
|
|
|
22
22
|
export { WEBSITE_UPGRADE_CONTEXT_TYPES } from './src/experiences/models/websiteContextualModel';
|
|
23
23
|
|
|
24
24
|
export { setSharedLibLocaleAsync, tr } from './src/useSharedLibTranslate';
|
|
25
|
+
export { useVoiceToText } from './src/useVoiceToText';
|
|
25
26
|
|
|
26
27
|
export { default as Button } from './src/atoms/components/Button/Button.vue';
|
|
27
28
|
export { default as ButtonGroup } from './src/atoms/components/ButtonGroup/ButtonGroup.vue';
|
|
@@ -59,4 +60,5 @@ export { default as Select } from './src/atoms/components/Select/Select.vue';
|
|
|
59
60
|
export { default as NumberStepper } from './src/atoms/components/NumberStepper/NumberStepper.vue';
|
|
60
61
|
export { default as CopyToClipboardText } from './src/atoms/components/CopyToClipboardText/CopyToClipboardText.vue';
|
|
61
62
|
export { default as SparkleIcon } from './src/atoms/components/SparkleIcon/SparkleIcon.vue';
|
|
63
|
+
export { default as VoiceToTextButton } from './src/atoms/components/VoiceToTextButton/VoiceToTextButton.vue';
|
|
62
64
|
export { default as SideNavigationPanel } from './src/experiences/components/SideNavigationPanel/SideNavigationPanel.vue';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designcrowd/fe-shared-lib",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.10-voiceText-1",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"start": "run-p storybook watch:translation",
|
|
6
6
|
"build": "npm run build:css --production",
|
|
@@ -71,6 +71,8 @@
|
|
|
71
71
|
"postcss-import": "16.0.0",
|
|
72
72
|
"postcss-nested": "6.0.1",
|
|
73
73
|
"prettier": "3.2.4",
|
|
74
|
+
"react": "^19.2.5",
|
|
75
|
+
"react-dom": "^19.2.5",
|
|
74
76
|
"storybook": "9.0.4",
|
|
75
77
|
"stylelint": "16.2.1",
|
|
76
78
|
"stylelint-config-standard": "36.0.0",
|
|
@@ -1896,6 +1896,10 @@ video {
|
|
|
1896
1896
|
--tw-text-opacity: 1;
|
|
1897
1897
|
color: rgb(145 16 38 / var(--tw-text-opacity));
|
|
1898
1898
|
}
|
|
1899
|
+
.theme-brandCrowd .tw-text-grayscale-400 {
|
|
1900
|
+
--tw-text-opacity: 1;
|
|
1901
|
+
color: rgb(230 230 230 / var(--tw-text-opacity));
|
|
1902
|
+
}
|
|
1899
1903
|
.theme-brandCrowd .tw-text-grayscale-500 {
|
|
1900
1904
|
--tw-text-opacity: 1;
|
|
1901
1905
|
color: rgb(208 208 208 / var(--tw-text-opacity));
|
|
@@ -2049,6 +2053,11 @@ video {
|
|
|
2049
2053
|
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
|
|
2050
2054
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
2051
2055
|
}
|
|
2056
|
+
.theme-brandCrowd .tw-transition-all {
|
|
2057
|
+
transition-property: all;
|
|
2058
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2059
|
+
transition-duration: 150ms;
|
|
2060
|
+
}
|
|
2052
2061
|
.theme-brandCrowd .tw-transition-colors {
|
|
2053
2062
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
2054
2063
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -2076,6 +2085,10 @@ video {
|
|
|
2076
2085
|
.theme-brandCrowd .tw-ease-out {
|
|
2077
2086
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
2078
2087
|
}
|
|
2088
|
+
.theme-brandCrowd .hover\:tw-border-grayscale-300:hover {
|
|
2089
|
+
--tw-border-opacity: 1;
|
|
2090
|
+
border-color: rgb(239 239 239 / var(--tw-border-opacity));
|
|
2091
|
+
}
|
|
2079
2092
|
.theme-brandCrowd .hover\:tw-border-grayscale-400:hover {
|
|
2080
2093
|
--tw-border-opacity: 1;
|
|
2081
2094
|
border-color: rgb(230 230 230 / var(--tw-border-opacity));
|
|
@@ -2240,6 +2253,18 @@ video {
|
|
|
2240
2253
|
outline: 2px solid transparent;
|
|
2241
2254
|
outline-offset: 2px;
|
|
2242
2255
|
}
|
|
2256
|
+
.theme-brandCrowd .focus\:tw-ring-2:focus {
|
|
2257
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2258
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
2259
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
2260
|
+
}
|
|
2261
|
+
.theme-brandCrowd .focus\:tw-ring-primary-500:focus {
|
|
2262
|
+
--tw-ring-opacity: 1;
|
|
2263
|
+
--tw-ring-color: rgb(242 27 63 / var(--tw-ring-opacity));
|
|
2264
|
+
}
|
|
2265
|
+
.theme-brandCrowd .focus\:tw-ring-offset-2:focus {
|
|
2266
|
+
--tw-ring-offset-width: 2px;
|
|
2267
|
+
}
|
|
2243
2268
|
.theme-brandCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
|
|
2244
2269
|
--tw-text-opacity: 1;
|
|
2245
2270
|
color: rgb(0 151 215 / var(--tw-text-opacity));
|
|
@@ -1736,6 +1736,10 @@ video {
|
|
|
1736
1736
|
--tw-text-opacity: 1;
|
|
1737
1737
|
color: rgb(0 0 0 / var(--tw-text-opacity));
|
|
1738
1738
|
}
|
|
1739
|
+
.theme-brandPage .tw-text-grayscale-400 {
|
|
1740
|
+
--tw-text-opacity: 1;
|
|
1741
|
+
color: rgb(230 230 230 / var(--tw-text-opacity));
|
|
1742
|
+
}
|
|
1739
1743
|
.theme-brandPage .tw-text-grayscale-500 {
|
|
1740
1744
|
--tw-text-opacity: 1;
|
|
1741
1745
|
color: rgb(208 208 208 / var(--tw-text-opacity));
|
|
@@ -1837,6 +1841,11 @@ video {
|
|
|
1837
1841
|
--tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
|
|
1838
1842
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1839
1843
|
}
|
|
1844
|
+
.theme-brandPage .tw-transition-all {
|
|
1845
|
+
transition-property: all;
|
|
1846
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
1847
|
+
transition-duration: 150ms;
|
|
1848
|
+
}
|
|
1840
1849
|
.theme-brandPage .tw-transition-colors {
|
|
1841
1850
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
|
1842
1851
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -1864,6 +1873,10 @@ video {
|
|
|
1864
1873
|
.theme-brandPage .tw-ease-out {
|
|
1865
1874
|
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
1866
1875
|
}
|
|
1876
|
+
.theme-brandPage .hover\:tw-border-grayscale-300:hover {
|
|
1877
|
+
--tw-border-opacity: 1;
|
|
1878
|
+
border-color: rgb(239 239 239 / var(--tw-border-opacity));
|
|
1879
|
+
}
|
|
1867
1880
|
.theme-brandPage .hover\:tw-border-grayscale-400:hover {
|
|
1868
1881
|
--tw-border-opacity: 1;
|
|
1869
1882
|
border-color: rgb(230 230 230 / var(--tw-border-opacity));
|
|
@@ -1916,6 +1929,14 @@ video {
|
|
|
1916
1929
|
outline: 2px solid transparent;
|
|
1917
1930
|
outline-offset: 2px;
|
|
1918
1931
|
}
|
|
1932
|
+
.theme-brandPage .focus\:tw-ring-2:focus {
|
|
1933
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1934
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1935
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1936
|
+
}
|
|
1937
|
+
.theme-brandPage .focus\:tw-ring-offset-2:focus {
|
|
1938
|
+
--tw-ring-offset-width: 2px;
|
|
1939
|
+
}
|
|
1919
1940
|
@media (min-width: 640px) {
|
|
1920
1941
|
.theme-brandPage .sm\:tw-absolute {
|
|
1921
1942
|
position: absolute;
|