@chayns-components/date 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 +366 -0
- package/package.json +5 -4
package/AI_USAGE.md
ADDED
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
# @chayns-components/date
|
|
2
|
+
|
|
3
|
+
React component package providing 3 documented components for chayns applications.
|
|
4
|
+
|
|
5
|
+
Documented components: `Calendar`, `DateInfo`, `OpeningTimes`.
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { Calendar, DateInfo, OpeningTimes } from '@chayns-components/date';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Typical Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Calendar
|
|
17
|
+
type={CalendarType.Single}
|
|
18
|
+
highlightedDates={[
|
|
19
|
+
{
|
|
20
|
+
dates: [
|
|
21
|
+
getDayOfCurrentMonth(-3),
|
|
22
|
+
getDayOfCurrentMonth(1),
|
|
23
|
+
getDayOfCurrentMonth(22),
|
|
24
|
+
],
|
|
25
|
+
style: { textColor: 'white', backgroundColor: 'blue' },
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
dates: [getDayOfCurrentMonth(21)],
|
|
29
|
+
style: { textColor: 'white', backgroundColor: 'red' },
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
|
|
33
|
+
style: { textColor: 'white', backgroundColor: 'green' },
|
|
34
|
+
},
|
|
35
|
+
]}
|
|
36
|
+
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
|
|
37
|
+
categories={[
|
|
38
|
+
{
|
|
39
|
+
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
|
|
40
|
+
color: 'green',
|
|
41
|
+
id: 'meeting',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
|
|
45
|
+
color: 'black',
|
|
46
|
+
id: 'holiday',
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
dates: [getDayOfCurrentMonth(14)],
|
|
50
|
+
color: 'purple',
|
|
51
|
+
id: 'birthday',
|
|
52
|
+
},
|
|
53
|
+
]}
|
|
54
|
+
/>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## Components
|
|
58
|
+
|
|
59
|
+
- `Calendar`
|
|
60
|
+
- `DateInfo`
|
|
61
|
+
- `OpeningTimes`
|
|
62
|
+
|
|
63
|
+
## Calendar
|
|
64
|
+
|
|
65
|
+
`Calendar` is exported by `@chayns-components/date` and should be imported from the public package entry point.
|
|
66
|
+
|
|
67
|
+
### Import
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { Calendar } from '@chayns-components/date';
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Examples
|
|
74
|
+
|
|
75
|
+
#### General
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
<Calendar
|
|
79
|
+
type={CalendarType.Single}
|
|
80
|
+
highlightedDates={[
|
|
81
|
+
{
|
|
82
|
+
dates: [
|
|
83
|
+
getDayOfCurrentMonth(-3),
|
|
84
|
+
getDayOfCurrentMonth(1),
|
|
85
|
+
getDayOfCurrentMonth(22),
|
|
86
|
+
],
|
|
87
|
+
style: { textColor: 'white', backgroundColor: 'blue' },
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
dates: [getDayOfCurrentMonth(21)],
|
|
91
|
+
style: { textColor: 'white', backgroundColor: 'red' },
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
|
|
95
|
+
style: { textColor: 'white', backgroundColor: 'green' },
|
|
96
|
+
},
|
|
97
|
+
]}
|
|
98
|
+
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
|
|
99
|
+
categories={[
|
|
100
|
+
{
|
|
101
|
+
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
|
|
102
|
+
color: 'green',
|
|
103
|
+
id: 'meeting',
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
|
|
107
|
+
color: 'black',
|
|
108
|
+
id: 'holiday',
|
|
109
|
+
},
|
|
110
|
+
{
|
|
111
|
+
dates: [getDayOfCurrentMonth(14)],
|
|
112
|
+
color: 'purple',
|
|
113
|
+
id: 'birthday',
|
|
114
|
+
},
|
|
115
|
+
]}
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
#### With Custom Thumb Colors
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<Calendar
|
|
123
|
+
type={CalendarType.Single}
|
|
124
|
+
highlightedDates={[
|
|
125
|
+
{
|
|
126
|
+
dates: [
|
|
127
|
+
getDayOfCurrentMonth(-3),
|
|
128
|
+
getDayOfCurrentMonth(1),
|
|
129
|
+
getDayOfCurrentMonth(22),
|
|
130
|
+
],
|
|
131
|
+
style: { textColor: 'white', backgroundColor: 'blue' },
|
|
132
|
+
},
|
|
133
|
+
{
|
|
134
|
+
dates: [getDayOfCurrentMonth(21)],
|
|
135
|
+
style: { textColor: 'white', backgroundColor: 'red' },
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
dates: [getDayOfCurrentMonth(20), getDayOfCurrentMonth(28)],
|
|
139
|
+
style: { textColor: 'white', backgroundColor: 'green' },
|
|
140
|
+
},
|
|
141
|
+
]}
|
|
142
|
+
disabledDates={[getDayOfCurrentMonth(10), getDayOfCurrentMonth(15)]}
|
|
143
|
+
categories={[
|
|
144
|
+
{
|
|
145
|
+
dates: [getDayOfCurrentMonth(35), getDayOfCurrentMonth(13)],
|
|
146
|
+
color: 'green',
|
|
147
|
+
id: 'meeting',
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
dates: [getDayOfCurrentMonth(3), getDayOfCurrentMonth(14)],
|
|
151
|
+
color: 'black',
|
|
152
|
+
id: 'holiday',
|
|
153
|
+
},
|
|
154
|
+
{
|
|
155
|
+
dates: [getDayOfCurrentMonth(14)],
|
|
156
|
+
color: 'purple',
|
|
157
|
+
id: 'birthday',
|
|
158
|
+
},
|
|
159
|
+
]}
|
|
160
|
+
customThumbColors={{
|
|
161
|
+
mainBackgroundColor: 'purple',
|
|
162
|
+
mainTextColor: 'white',
|
|
163
|
+
secondaryBackgroundColor: 'pink',
|
|
164
|
+
}}
|
|
165
|
+
/>
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
### Props
|
|
169
|
+
|
|
170
|
+
No prop documentation available.
|
|
171
|
+
|
|
172
|
+
### Types
|
|
173
|
+
|
|
174
|
+
No additional exported types documented.
|
|
175
|
+
|
|
176
|
+
### Usage Notes
|
|
177
|
+
|
|
178
|
+
- Import `Calendar` directly from `@chayns-components/date` instead of internal source paths.
|
|
179
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
180
|
+
|
|
181
|
+
### Anti Patterns
|
|
182
|
+
|
|
183
|
+
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.
|
|
184
|
+
## DateInfo
|
|
185
|
+
|
|
186
|
+
`DateInfo` is exported by `@chayns-components/date` and should be imported from the public package entry point.
|
|
187
|
+
|
|
188
|
+
### Import
|
|
189
|
+
|
|
190
|
+
```ts
|
|
191
|
+
import { DateInfo } from '@chayns-components/date';
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
### Examples
|
|
195
|
+
|
|
196
|
+
#### General
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
<DateInfo
|
|
200
|
+
date={new Date()}
|
|
201
|
+
/>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Props
|
|
205
|
+
|
|
206
|
+
No prop documentation available.
|
|
207
|
+
|
|
208
|
+
### Types
|
|
209
|
+
|
|
210
|
+
No additional exported types documented.
|
|
211
|
+
|
|
212
|
+
### Usage Notes
|
|
213
|
+
|
|
214
|
+
- Import `DateInfo` directly from `@chayns-components/date` instead of internal source paths.
|
|
215
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
216
|
+
|
|
217
|
+
### Anti Patterns
|
|
218
|
+
|
|
219
|
+
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.
|
|
220
|
+
## OpeningTimes
|
|
221
|
+
|
|
222
|
+
`OpeningTimes` is exported by `@chayns-components/date` and should be imported from the public package entry point.
|
|
223
|
+
|
|
224
|
+
### Import
|
|
225
|
+
|
|
226
|
+
```ts
|
|
227
|
+
import { OpeningTimes } from '@chayns-components/date';
|
|
228
|
+
```
|
|
229
|
+
|
|
230
|
+
### Examples
|
|
231
|
+
|
|
232
|
+
#### General
|
|
233
|
+
|
|
234
|
+
```tsx
|
|
235
|
+
<OpeningTimes
|
|
236
|
+
closedText={'geschlossen'}
|
|
237
|
+
weekdays={[
|
|
238
|
+
{ id: 0, name: 'Montag' },
|
|
239
|
+
{ id: 1, name: 'Dienstag' },
|
|
240
|
+
{ id: 2, name: 'Mittwoch' },
|
|
241
|
+
{ id: 3, name: 'Donnerstag' },
|
|
242
|
+
{ id: 4, name: 'Freitag' },
|
|
243
|
+
{ id: 5, name: 'Samstag' },
|
|
244
|
+
{ id: 6, name: 'Sonntag' },
|
|
245
|
+
]}
|
|
246
|
+
openingTimes={[
|
|
247
|
+
{
|
|
248
|
+
id: 'montag',
|
|
249
|
+
weekdayId: 0,
|
|
250
|
+
times: [{ start: '08:00', end: '18:00', id: '1' }],
|
|
251
|
+
isDisabled: true,
|
|
252
|
+
},
|
|
253
|
+
{
|
|
254
|
+
id: 'dienstag',
|
|
255
|
+
weekdayId: 1,
|
|
256
|
+
times: [
|
|
257
|
+
{ start: '08:00', end: '12:00', id: '2' },
|
|
258
|
+
{ start: '11:00', end: '18:00', id: '3' },
|
|
259
|
+
],
|
|
260
|
+
},
|
|
261
|
+
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
|
|
262
|
+
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
|
|
263
|
+
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
|
|
264
|
+
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
|
|
265
|
+
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
|
|
266
|
+
]}
|
|
267
|
+
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
|
|
268
|
+
/>
|
|
269
|
+
```
|
|
270
|
+
|
|
271
|
+
#### Edit Mode
|
|
272
|
+
|
|
273
|
+
```tsx
|
|
274
|
+
<OpeningTimes
|
|
275
|
+
closedText={'geschlossen'}
|
|
276
|
+
weekdays={[
|
|
277
|
+
{ id: 0, name: 'Montag' },
|
|
278
|
+
{ id: 1, name: 'Dienstag' },
|
|
279
|
+
{ id: 2, name: 'Mittwoch' },
|
|
280
|
+
{ id: 3, name: 'Donnerstag' },
|
|
281
|
+
{ id: 4, name: 'Freitag' },
|
|
282
|
+
{ id: 5, name: 'Samstag' },
|
|
283
|
+
{ id: 6, name: 'Sonntag' },
|
|
284
|
+
]}
|
|
285
|
+
openingTimes={[
|
|
286
|
+
{
|
|
287
|
+
id: 'montag',
|
|
288
|
+
weekdayId: 0,
|
|
289
|
+
times: [{ start: '08:00', end: '18:00', id: '1' }],
|
|
290
|
+
isDisabled: true,
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
id: 'dienstag',
|
|
294
|
+
weekdayId: 1,
|
|
295
|
+
times: [
|
|
296
|
+
{ start: '08:00', end: '12:00', id: '2' },
|
|
297
|
+
{ start: '11:00', end: '18:00', id: '3' },
|
|
298
|
+
],
|
|
299
|
+
},
|
|
300
|
+
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
|
|
301
|
+
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
|
|
302
|
+
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
|
|
303
|
+
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
|
|
304
|
+
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
|
|
305
|
+
]}
|
|
306
|
+
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
|
|
307
|
+
editMode
|
|
308
|
+
/>
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
#### Only Current Day
|
|
312
|
+
|
|
313
|
+
```tsx
|
|
314
|
+
<OpeningTimes
|
|
315
|
+
closedText={'geschlossen'}
|
|
316
|
+
weekdays={[
|
|
317
|
+
{ id: 0, name: 'Montag' },
|
|
318
|
+
{ id: 1, name: 'Dienstag' },
|
|
319
|
+
{ id: 2, name: 'Mittwoch' },
|
|
320
|
+
{ id: 3, name: 'Donnerstag' },
|
|
321
|
+
{ id: 4, name: 'Freitag' },
|
|
322
|
+
{ id: 5, name: 'Samstag' },
|
|
323
|
+
{ id: 6, name: 'Sonntag' },
|
|
324
|
+
]}
|
|
325
|
+
openingTimes={[
|
|
326
|
+
{
|
|
327
|
+
id: 'montag',
|
|
328
|
+
weekdayId: 0,
|
|
329
|
+
times: [{ start: '08:00', end: '18:00', id: '1' }],
|
|
330
|
+
isDisabled: true,
|
|
331
|
+
},
|
|
332
|
+
{
|
|
333
|
+
id: 'dienstag',
|
|
334
|
+
weekdayId: 1,
|
|
335
|
+
times: [
|
|
336
|
+
{ start: '08:00', end: '12:00', id: '2' },
|
|
337
|
+
{ start: '11:00', end: '18:00', id: '3' },
|
|
338
|
+
],
|
|
339
|
+
},
|
|
340
|
+
{ id: 'mittwoch', weekdayId: 2, times: [{ start: '08:00', end: '18:00', id: '4' }] },
|
|
341
|
+
{ id: 'donnerstag', weekdayId: 3, times: [{ start: '08:00', end: '18:00', id: '5' }] },
|
|
342
|
+
{ id: 'freitag', weekdayId: 4, times: [{ start: '08:00', end: '18:00', id: '6' }] },
|
|
343
|
+
{ id: 'samstag', weekdayId: 5, times: [{ start: '08:00', end: '18:00', id: '7' }] },
|
|
344
|
+
{ id: 'sonntag', weekdayId: 6, times: [{ start: '18:00', end: '08:00', id: '8' }] },
|
|
345
|
+
]}
|
|
346
|
+
hintText={'Einige der Öffnungszeiten überschneiden sich oder sind nicht in der richtigen Reihenfolge.'}
|
|
347
|
+
currentDayId={getCurrentDay()}
|
|
348
|
+
/>
|
|
349
|
+
```
|
|
350
|
+
|
|
351
|
+
### Props
|
|
352
|
+
|
|
353
|
+
No prop documentation available.
|
|
354
|
+
|
|
355
|
+
### Types
|
|
356
|
+
|
|
357
|
+
No additional exported types documented.
|
|
358
|
+
|
|
359
|
+
### Usage Notes
|
|
360
|
+
|
|
361
|
+
- Import `OpeningTimes` directly from `@chayns-components/date` instead of internal source paths.
|
|
362
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
363
|
+
|
|
364
|
+
### Anti Patterns
|
|
365
|
+
|
|
366
|
+
- Avoid imports from internal paths such as `@chayns-components/date/src/...`; always use the public package export.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/date",
|
|
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
|
"uuid": "^10.0.0"
|
|
75
76
|
},
|
|
76
77
|
"peerDependencies": {
|
|
@@ -83,5 +84,5 @@
|
|
|
83
84
|
"publishConfig": {
|
|
84
85
|
"access": "public"
|
|
85
86
|
},
|
|
86
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "7c7c2d7dacbc7c8031f3bcef885e4f63b8f49b1a"
|
|
87
88
|
}
|