@chayns-components/typewriter 5.0.33 → 5.0.34
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/AI_USAGE.md +235 -0
- package/package.json +5 -4
package/AI_USAGE.md
ADDED
|
@@ -0,0 +1,235 @@
|
|
|
1
|
+
# @chayns-components/typewriter
|
|
2
|
+
|
|
3
|
+
React component package providing `Typewriter` for chayns applications.
|
|
4
|
+
|
|
5
|
+
Documented components: `Typewriter`.
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { Typewriter } from '@chayns-components/typewriter';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Typical Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Typewriter>
|
|
17
|
+
{'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.'}
|
|
18
|
+
</Typewriter>
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Typewriter
|
|
22
|
+
|
|
23
|
+
`Typewriter` is exported by `@chayns-components/typewriter` and should be imported from the public package entry point.
|
|
24
|
+
|
|
25
|
+
### Import
|
|
26
|
+
|
|
27
|
+
```ts
|
|
28
|
+
import { Typewriter } from '@chayns-components/typewriter';
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Examples
|
|
32
|
+
|
|
33
|
+
#### General
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<Typewriter>
|
|
37
|
+
{'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.'}
|
|
38
|
+
</Typewriter>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
#### Custom Elements
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Typewriter>
|
|
45
|
+
{
|
|
46
|
+
<>
|
|
47
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
48
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
49
|
+
<button onClick={() => alert('Der Button funktioniert')}>Button</button>
|
|
50
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
51
|
+
sea takimata sanctus est.
|
|
52
|
+
</>
|
|
53
|
+
}
|
|
54
|
+
</Typewriter>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Empty
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Typewriter>
|
|
61
|
+
{''}
|
|
62
|
+
</Typewriter>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
#### HTMLText
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
<Typewriter>
|
|
69
|
+
{
|
|
70
|
+
<>
|
|
71
|
+
Lorem ipsum dolor sit amet,
|
|
72
|
+
<b>consetetur sadipcing elitr</b>, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
73
|
+
dolore magna aliquyam erat, sed diam voluptua.
|
|
74
|
+
<s>
|
|
75
|
+
<b>At vero eos et accusam et justo duo dolores et ea rebum.</b>
|
|
76
|
+
</s>
|
|
77
|
+
Stet clita kasd gubergren, no sea takimata sanctus est.
|
|
78
|
+
<u>Lorem ipsum</u>
|
|
79
|
+
dolor sit amet.
|
|
80
|
+
</>
|
|
81
|
+
}
|
|
82
|
+
</Typewriter>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
#### Multiple Texts
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
<Typewriter
|
|
89
|
+
cursorType={CursorType.Thin}
|
|
90
|
+
speed={TypewriterSpeed.Slow}
|
|
91
|
+
resetSpeed={TypewriterSpeed.Fast}
|
|
92
|
+
shouldUseResetAnimation
|
|
93
|
+
>
|
|
94
|
+
{
|
|
95
|
+
[
|
|
96
|
+
'Habt ihr am Dienstag geöffnet?',
|
|
97
|
+
'Ich würde gerne einen Tisch reservieren.',
|
|
98
|
+
'Kann ich auch ohne Termin vorbeikommen?',
|
|
99
|
+
]
|
|
100
|
+
}
|
|
101
|
+
</Typewriter>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### With Own Styles
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<Typewriter
|
|
108
|
+
speed={150}
|
|
109
|
+
textStyle={{
|
|
110
|
+
color: 'red',
|
|
111
|
+
}}
|
|
112
|
+
>
|
|
113
|
+
{'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod.'}
|
|
114
|
+
</Typewriter>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
#### With Code Highlighter
|
|
118
|
+
|
|
119
|
+
```tsx
|
|
120
|
+
<Typewriter>
|
|
121
|
+
{
|
|
122
|
+
<>
|
|
123
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
124
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
125
|
+
<CodeHighlighter
|
|
126
|
+
shouldShowLineNumbers
|
|
127
|
+
code={code}
|
|
128
|
+
language={'tsx'}
|
|
129
|
+
copyButtonText="Code kopieren"
|
|
130
|
+
/>
|
|
131
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
132
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
133
|
+
<button onClick={() => alert('Button clicked')}>Button</button>
|
|
134
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
135
|
+
sea takimata sanctus est.
|
|
136
|
+
</>
|
|
137
|
+
}
|
|
138
|
+
</Typewriter>
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
#### Inside Text Area
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
<Typewriter>
|
|
145
|
+
{'Nachricht eingeben'}
|
|
146
|
+
</Typewriter>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
#### Inside Input
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
<Typewriter
|
|
153
|
+
cursorType={CursorType.Thin}
|
|
154
|
+
speed={TypewriterSpeed.Slow}
|
|
155
|
+
resetSpeed={TypewriterSpeed.Fast}
|
|
156
|
+
shouldUseResetAnimation
|
|
157
|
+
>
|
|
158
|
+
{
|
|
159
|
+
[
|
|
160
|
+
'Habt ihr am Dienstag geöffnet?',
|
|
161
|
+
'Ich würde gerne einen Tisch reservieren.',
|
|
162
|
+
'Kann ich auch ohne Termin vorbeikommen?',
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
</Typewriter>
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
#### With Ignore Tags
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
<Typewriter>
|
|
172
|
+
{
|
|
173
|
+
<>
|
|
174
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ullamcorper eget ligula
|
|
175
|
+
fermentum congue. Fusce ut lectus vitae orci ultricies tincidunt. Nulla tristique tortor
|
|
176
|
+
sit amet est egestas ultricies. Pellentesque augue dui, cursus quis ex sit amet,
|
|
177
|
+
ultricies tristique metus. Ut efficitur quis mauris eget eleifend. Donec vulputate
|
|
178
|
+
efficitur nisi, at semper purus molestie et. Proin non odio nec ligula commodo euismod
|
|
179
|
+
at quis dolor. Morbi ornare sed lorem vitae aliquam. Interdum et malesuada fames ac ante
|
|
180
|
+
ipsum primis in faucibus. Donec tempor justo at tristique interdum. Aenean eget massa
|
|
181
|
+
quis nunc pellentesque tempus. Proin mollis hendrerit nulla et dictum. Vivamus vulputate
|
|
182
|
+
posuere dignissim. Pellentesque lobortis ex vitae ligula eleifend, vitae egestas felis
|
|
183
|
+
finibus. Cras molestie nisi vitae dui congue mollis. Aliquam tortor augue, tincidunt nec
|
|
184
|
+
rhoncus non, cursus vitae purus. Praesent eget metus sed neque hendrerit tempus commodo
|
|
185
|
+
in odio. In tortor sapien, bibendum id ligula vel, pretium fringilla lorem. Quisque
|
|
186
|
+
facilisis erat vel orci semper tempus. Fusce a purus ac risus ullamcorper gravida sed in
|
|
187
|
+
libero. In eu diam nec eros egestas iaculis.
|
|
188
|
+
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
|
189
|
+
{/* @ts-ignore */}
|
|
190
|
+
<tw-ignore>
|
|
191
|
+
Donec dignissim urna eget luctus sagittis. Class aptent taciti sociosqu ad litora
|
|
192
|
+
torquent per conubia nostra, per inceptos himenaeos. Donec ut ex a mi accumsan
|
|
193
|
+
pretium at sit amet nulla. Integer non mi sollicitudin, luctus elit eget, commodo
|
|
194
|
+
tortor. Duis vehicula lorem ante, eu fringilla purus vehicula et. Nunc sit amet
|
|
195
|
+
blandit turpis. Morbi eget ipsum sit amet erat bibendum porttitor.
|
|
196
|
+
{/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
|
|
197
|
+
{/* @ts-ignore */}
|
|
198
|
+
</tw-ignore>
|
|
199
|
+
Pellentesque sit amet odio orci. Donec nibh elit, pellentesque ut ultrices quis, dictum
|
|
200
|
+
in erat. Pellentesque a nibh placerat, eleifend augue at, iaculis urna. In et mi
|
|
201
|
+
viverra, faucibus erat mattis, dapibus mi. Nam euismod ornare facilisis. Cras
|
|
202
|
+
consectetur rhoncus neque. Quisque sed nunc augue. Ut at metus iaculis, lacinia libero
|
|
203
|
+
sit amet, commodo diam. Duis vel congue neque.
|
|
204
|
+
</>
|
|
205
|
+
}
|
|
206
|
+
</Typewriter>
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
#### Auto Speed
|
|
210
|
+
|
|
211
|
+
```tsx
|
|
212
|
+
<Typewriter
|
|
213
|
+
shouldCalcAutoSpeed
|
|
214
|
+
shouldUseAnimationHeight
|
|
215
|
+
>
|
|
216
|
+
{'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor sit amet.'}
|
|
217
|
+
</Typewriter>
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
### Props
|
|
221
|
+
|
|
222
|
+
No prop documentation available.
|
|
223
|
+
|
|
224
|
+
### Types
|
|
225
|
+
|
|
226
|
+
No additional exported types documented.
|
|
227
|
+
|
|
228
|
+
### Usage Notes
|
|
229
|
+
|
|
230
|
+
- Import `Typewriter` directly from `@chayns-components/typewriter` instead of internal source paths.
|
|
231
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
232
|
+
|
|
233
|
+
### Anti Patterns
|
|
234
|
+
|
|
235
|
+
- Avoid imports from internal paths such as `@chayns-components/typewriter/src/...`; always use the public package export.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/typewriter",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.34",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
"test": "__tests__"
|
|
34
34
|
},
|
|
35
35
|
"files": [
|
|
36
|
-
"lib"
|
|
36
|
+
"lib",
|
|
37
|
+
"AI_USAGE.md"
|
|
37
38
|
],
|
|
38
39
|
"repository": {
|
|
39
40
|
"type": "git",
|
|
@@ -70,7 +71,7 @@
|
|
|
70
71
|
"typescript": "^5.9.3"
|
|
71
72
|
},
|
|
72
73
|
"dependencies": {
|
|
73
|
-
"@chayns-components/core": "^5.0.
|
|
74
|
+
"@chayns-components/core": "^5.0.34"
|
|
74
75
|
},
|
|
75
76
|
"peerDependencies": {
|
|
76
77
|
"chayns-api": ">=2.2.0",
|
|
@@ -82,5 +83,5 @@
|
|
|
82
83
|
"publishConfig": {
|
|
83
84
|
"access": "public"
|
|
84
85
|
},
|
|
85
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "7c7c2d7dacbc7c8031f3bcef885e4f63b8f49b1a"
|
|
86
87
|
}
|