@cerberus-design/react 0.12.0-next-635644c → 0.12.0-next-d7d547a
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/build/legacy/_tsup-dts-rollup.d.cts +81 -0
- package/build/legacy/context/notification-center.cjs +1 -1
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/hooks/useDate.cjs +122 -0
- package/build/legacy/hooks/useDate.cjs.map +1 -0
- package/build/legacy/index.cjs +100 -5
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +81 -0
- package/build/modern/{chunk-ZBMA5G54.js → chunk-7MM5KYEX.js} +4 -4
- package/build/modern/chunk-CZND26FC.js +98 -0
- package/build/modern/chunk-CZND26FC.js.map +1 -0
- package/build/modern/{chunk-3FCUTX4S.js → chunk-J4LOSTEP.js} +13 -13
- package/build/modern/{chunk-ON64MA6L.js → chunk-KFGI37CO.js} +12 -12
- package/build/modern/{chunk-PNR7ZUAR.js → chunk-KUT2YEEQ.js} +7 -7
- package/build/modern/chunk-KUT2YEEQ.js.map +1 -0
- package/build/modern/{chunk-IFD2BUUW.js → chunk-NCUHRVW2.js} +15 -15
- package/build/modern/components/FileStatus.js +2 -2
- package/build/modern/context/confirm-modal.js +5 -5
- package/build/modern/context/cta-modal.js +5 -5
- package/build/modern/context/notification-center.js +3 -3
- package/build/modern/context/prompt-modal.js +6 -6
- package/build/modern/hooks/useDate.js +14 -0
- package/build/modern/hooks/useDate.js.map +1 -0
- package/build/modern/index.js +39 -29
- package/build/modern/index.js.map +1 -1
- package/package.json +3 -3
- package/src/context/notification-center.tsx +1 -1
- package/src/hooks/useDate.ts +164 -0
- package/src/index.ts +1 -0
- package/build/modern/chunk-PNR7ZUAR.js.map +0 -1
- /package/build/modern/{chunk-ZBMA5G54.js.map → chunk-7MM5KYEX.js.map} +0 -0
- /package/build/modern/{chunk-3FCUTX4S.js.map → chunk-J4LOSTEP.js.map} +0 -0
- /package/build/modern/{chunk-ON64MA6L.js.map → chunk-KFGI37CO.js.map} +0 -0
- /package/build/modern/{chunk-IFD2BUUW.js.map → chunk-NCUHRVW2.js.map} +0 -0
package/build/modern/index.js
CHANGED
|
@@ -1,26 +1,32 @@
|
|
|
1
|
+
import {
|
|
2
|
+
PromptModal,
|
|
3
|
+
usePromptModal
|
|
4
|
+
} from "./chunk-NCUHRVW2.js";
|
|
1
5
|
import {
|
|
2
6
|
ThemeProvider,
|
|
3
7
|
useThemeContext
|
|
4
8
|
} from "./chunk-EB37HRCN.js";
|
|
9
|
+
import {
|
|
10
|
+
Toggle
|
|
11
|
+
} from "./chunk-NMNONSHU.js";
|
|
5
12
|
import {
|
|
6
13
|
Tooltip
|
|
7
14
|
} from "./chunk-KML4CTMK.js";
|
|
8
15
|
import {
|
|
9
16
|
ConfirmModal,
|
|
10
17
|
useConfirmModal
|
|
11
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-KFGI37CO.js";
|
|
12
19
|
import {
|
|
13
20
|
CTAModal,
|
|
14
21
|
useCTAModal
|
|
15
|
-
} from "./chunk-
|
|
22
|
+
} from "./chunk-J4LOSTEP.js";
|
|
16
23
|
import {
|
|
17
24
|
NotificationCenter,
|
|
18
25
|
useNotificationCenter
|
|
19
|
-
} from "./chunk-
|
|
26
|
+
} from "./chunk-KUT2YEEQ.js";
|
|
20
27
|
import {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
} from "./chunk-IFD2BUUW.js";
|
|
28
|
+
TabPanel
|
|
29
|
+
} from "./chunk-AYIRV5CL.js";
|
|
24
30
|
import {
|
|
25
31
|
Table,
|
|
26
32
|
Tr
|
|
@@ -44,8 +50,8 @@ import {
|
|
|
44
50
|
Thead
|
|
45
51
|
} from "./chunk-Y6QQCRQV.js";
|
|
46
52
|
import {
|
|
47
|
-
|
|
48
|
-
} from "./chunk-
|
|
53
|
+
Portal
|
|
54
|
+
} from "./chunk-K2PSHGS7.js";
|
|
49
55
|
import {
|
|
50
56
|
Radio
|
|
51
57
|
} from "./chunk-FTPZHG6J.js";
|
|
@@ -63,8 +69,8 @@ import {
|
|
|
63
69
|
TabList
|
|
64
70
|
} from "./chunk-UKPF7JOB.js";
|
|
65
71
|
import {
|
|
66
|
-
|
|
67
|
-
} from "./chunk-
|
|
72
|
+
ModalHeader
|
|
73
|
+
} from "./chunk-ZFAIE47A.js";
|
|
68
74
|
import {
|
|
69
75
|
ModalHeading
|
|
70
76
|
} from "./chunk-2UXE5PDG.js";
|
|
@@ -92,8 +98,8 @@ import {
|
|
|
92
98
|
NotificationHeading
|
|
93
99
|
} from "./chunk-SXIXDXG3.js";
|
|
94
100
|
import {
|
|
95
|
-
|
|
96
|
-
} from "./chunk-
|
|
101
|
+
FileUploader
|
|
102
|
+
} from "./chunk-W4DXACNV.js";
|
|
97
103
|
import {
|
|
98
104
|
Input
|
|
99
105
|
} from "./chunk-NKM6PISB.js";
|
|
@@ -119,8 +125,8 @@ import {
|
|
|
119
125
|
ModalDescription
|
|
120
126
|
} from "./chunk-Q7BRMIBR.js";
|
|
121
127
|
import {
|
|
122
|
-
|
|
123
|
-
} from "./chunk-
|
|
128
|
+
Checkbox
|
|
129
|
+
} from "./chunk-NB6DV4VA.js";
|
|
124
130
|
import {
|
|
125
131
|
CircularProgress
|
|
126
132
|
} from "./chunk-6QHOKCV3.js";
|
|
@@ -143,7 +149,7 @@ import {
|
|
|
143
149
|
import {
|
|
144
150
|
FileStatus,
|
|
145
151
|
processStatus
|
|
146
|
-
} from "./chunk-
|
|
152
|
+
} from "./chunk-7MM5KYEX.js";
|
|
147
153
|
import {
|
|
148
154
|
ProgressBar
|
|
149
155
|
} from "./chunk-KCANMM64.js";
|
|
@@ -154,8 +160,12 @@ import {
|
|
|
154
160
|
FieldMessage
|
|
155
161
|
} from "./chunk-JWIJHSI6.js";
|
|
156
162
|
import {
|
|
157
|
-
|
|
158
|
-
|
|
163
|
+
Field,
|
|
164
|
+
useFieldContext
|
|
165
|
+
} from "./chunk-UZDVOIW5.js";
|
|
166
|
+
import {
|
|
167
|
+
useModal
|
|
168
|
+
} from "./chunk-KGQG5JGW.js";
|
|
159
169
|
import {
|
|
160
170
|
MODE_KEY,
|
|
161
171
|
THEME_KEY,
|
|
@@ -175,19 +185,12 @@ import {
|
|
|
175
185
|
import {
|
|
176
186
|
Avatar
|
|
177
187
|
} from "./chunk-SPZYPRZ6.js";
|
|
178
|
-
import {
|
|
179
|
-
Button
|
|
180
|
-
} from "./chunk-EXGKZGML.js";
|
|
181
|
-
import {
|
|
182
|
-
Checkbox
|
|
183
|
-
} from "./chunk-NB6DV4VA.js";
|
|
184
|
-
import {
|
|
185
|
-
Field,
|
|
186
|
-
useFieldContext
|
|
187
|
-
} from "./chunk-UZDVOIW5.js";
|
|
188
188
|
import {
|
|
189
189
|
Show
|
|
190
190
|
} from "./chunk-BUVVRQLZ.js";
|
|
191
|
+
import {
|
|
192
|
+
Button
|
|
193
|
+
} from "./chunk-EXGKZGML.js";
|
|
191
194
|
import "./chunk-55J6XMHW.js";
|
|
192
195
|
import {
|
|
193
196
|
createNavTriggerProps
|
|
@@ -211,8 +214,11 @@ import "./chunk-F27AAKQ3.js";
|
|
|
211
214
|
import "./chunk-CP7OUC2Q.js";
|
|
212
215
|
import "./chunk-HVKM54BA.js";
|
|
213
216
|
import {
|
|
214
|
-
|
|
215
|
-
|
|
217
|
+
DateFormats,
|
|
218
|
+
formatMilitaryDate,
|
|
219
|
+
formatMilitaryToISO,
|
|
220
|
+
useDate
|
|
221
|
+
} from "./chunk-CZND26FC.js";
|
|
216
222
|
|
|
217
223
|
// src/index.ts
|
|
218
224
|
export * from "@dnd-kit/core";
|
|
@@ -227,6 +233,7 @@ export {
|
|
|
227
233
|
Checkbox,
|
|
228
234
|
CircularProgress,
|
|
229
235
|
ConfirmModal,
|
|
236
|
+
DateFormats,
|
|
230
237
|
Droppable,
|
|
231
238
|
FeatureFlag,
|
|
232
239
|
FeatureFlags,
|
|
@@ -287,12 +294,15 @@ export {
|
|
|
287
294
|
Tr,
|
|
288
295
|
createNavTriggerProps,
|
|
289
296
|
defineIcons,
|
|
297
|
+
formatMilitaryDate,
|
|
298
|
+
formatMilitaryToISO,
|
|
290
299
|
formatNotifyCount,
|
|
291
300
|
getPosition,
|
|
292
301
|
processStatus,
|
|
293
302
|
trapFocus,
|
|
294
303
|
useCTAModal,
|
|
295
304
|
useConfirmModal,
|
|
305
|
+
useDate,
|
|
296
306
|
useFeatureFlags,
|
|
297
307
|
useFieldContext,
|
|
298
308
|
useModal,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cerberus-design/react",
|
|
3
|
-
"version": "0.12.0-next-
|
|
3
|
+
"version": "0.12.0-next-d7d547a",
|
|
4
4
|
"description": "The Cerberus Design React component library.",
|
|
5
5
|
"browserslist": "> 0.25%, not dead",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"react": "^18",
|
|
27
27
|
"react-dom": "^18",
|
|
28
28
|
"tsup": "^8.1.0",
|
|
29
|
-
"@cerberus-design/
|
|
30
|
-
"@cerberus-design/
|
|
29
|
+
"@cerberus-design/configs": "0.0.0",
|
|
30
|
+
"@cerberus-design/styled-system": "0.12.0-next-d7d547a"
|
|
31
31
|
},
|
|
32
32
|
"publishConfig": {
|
|
33
33
|
"access": "public"
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
'use client'
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
useState,
|
|
5
|
+
useCallback,
|
|
6
|
+
ChangeEvent,
|
|
7
|
+
useMemo,
|
|
8
|
+
type InputHTMLAttributes,
|
|
9
|
+
} from 'react'
|
|
10
|
+
|
|
11
|
+
export interface UseDateBase {
|
|
12
|
+
/**
|
|
13
|
+
* The format of the date input
|
|
14
|
+
*/
|
|
15
|
+
format?: string
|
|
16
|
+
/**
|
|
17
|
+
* The callback to run when the date input changes
|
|
18
|
+
*/
|
|
19
|
+
onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface UseDateOptions extends UseDateBase {
|
|
23
|
+
/**
|
|
24
|
+
* The initial value of the date input
|
|
25
|
+
*/
|
|
26
|
+
initialValue?: string
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export interface UseDateReturn extends UseDateBase {
|
|
30
|
+
/**
|
|
31
|
+
* The ISO formatted date string
|
|
32
|
+
*/
|
|
33
|
+
ISO: string
|
|
34
|
+
/**
|
|
35
|
+
* The value of the date input
|
|
36
|
+
*/
|
|
37
|
+
value: string
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* A hook for formatting and validating date inputs. The date format defaults to US Military format.
|
|
42
|
+
* @example
|
|
43
|
+
* ```tsx
|
|
44
|
+
* const MyComponent = () => {
|
|
45
|
+
* const date = useDate({ initialValue: '01 JAN 2024' })
|
|
46
|
+
* return <input onChange={date.onChange} type="text" value={date.value} />
|
|
47
|
+
* }
|
|
48
|
+
*/
|
|
49
|
+
export function useDate(options?: UseDateOptions): UseDateReturn {
|
|
50
|
+
const initialValue = options?.initialValue ?? ''
|
|
51
|
+
const format = options?.format ?? DateFormats.USMilitary
|
|
52
|
+
const onChange = options?.onChange
|
|
53
|
+
const [value, setValue] = useState(initialValue)
|
|
54
|
+
|
|
55
|
+
const handleChange = useCallback(
|
|
56
|
+
(e: ChangeEvent<HTMLInputElement>) => {
|
|
57
|
+
const newValue = formatMilitaryDate(e.currentTarget.value)
|
|
58
|
+
if (onChange) onChange(e)
|
|
59
|
+
setValue(newValue)
|
|
60
|
+
},
|
|
61
|
+
[onChange],
|
|
62
|
+
)
|
|
63
|
+
|
|
64
|
+
return useMemo(
|
|
65
|
+
() => ({
|
|
66
|
+
format,
|
|
67
|
+
value,
|
|
68
|
+
ISO: formatMilitaryToISO(value),
|
|
69
|
+
onChange: handleChange,
|
|
70
|
+
}),
|
|
71
|
+
[format, value, handleChange],
|
|
72
|
+
)
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// helpers
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Converts a string in US Military format to ISO format. Used within the `useDate` hook.
|
|
79
|
+
* @param input The string to format
|
|
80
|
+
* @returns The formatted string in ISO format (YYYY-MM-DD)
|
|
81
|
+
*/
|
|
82
|
+
export function formatMilitaryToISO(input: string) {
|
|
83
|
+
const [day, month, year] = input.split(' ')
|
|
84
|
+
const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))
|
|
85
|
+
const monthNum = monthIndex + 1
|
|
86
|
+
return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(
|
|
87
|
+
2,
|
|
88
|
+
'0',
|
|
89
|
+
)}`
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Converts a string to US Military format. Used within the `useDate` hook.
|
|
94
|
+
* @param input The string to format
|
|
95
|
+
* @returns The formatted string in US Military format (DD MMM YYYY)
|
|
96
|
+
*/
|
|
97
|
+
export function formatMilitaryDate(input: string): string {
|
|
98
|
+
let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')
|
|
99
|
+
let day = ''
|
|
100
|
+
let month = ''
|
|
101
|
+
let year = ''
|
|
102
|
+
|
|
103
|
+
// Format day
|
|
104
|
+
if (formatted.length >= 2) {
|
|
105
|
+
day = formatted.replace(/[^0-9]/g, '').slice(0, 2)
|
|
106
|
+
const dayNum = parseInt(day, 10)
|
|
107
|
+
if (dayNum > 31) day = '31'
|
|
108
|
+
else if (dayNum === 0) day = '01'
|
|
109
|
+
formatted = formatted.slice(2)
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Format month
|
|
113
|
+
if (formatted.length >= 3) {
|
|
114
|
+
month = formatted.slice(0, 3)
|
|
115
|
+
const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))
|
|
116
|
+
if (monthIndex !== -1) {
|
|
117
|
+
month = MONTHS[monthIndex]
|
|
118
|
+
} else {
|
|
119
|
+
month = month.replace(/[^A-Z]/g, '')
|
|
120
|
+
}
|
|
121
|
+
formatted = formatted.slice(3)
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
// Format year
|
|
125
|
+
if (formatted.length > 0) {
|
|
126
|
+
year = formatted.slice(0, 4)
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
return [day, month, year].filter(Boolean).join(' ')
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Date formatting options
|
|
134
|
+
* @example
|
|
135
|
+
* ```tsx
|
|
136
|
+
* const date = new Date()
|
|
137
|
+
* const formatted = date.format(DateFormats.USMilitary)
|
|
138
|
+
*/
|
|
139
|
+
export const DateFormats = {
|
|
140
|
+
get ISO() {
|
|
141
|
+
return 'YYYY-MM-DD'
|
|
142
|
+
},
|
|
143
|
+
get USMilitary() {
|
|
144
|
+
return 'DD MMM YYYY'
|
|
145
|
+
},
|
|
146
|
+
get Months() {
|
|
147
|
+
return MONTHS
|
|
148
|
+
},
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const MONTHS = [
|
|
152
|
+
'JAN',
|
|
153
|
+
'FEB',
|
|
154
|
+
'MAR',
|
|
155
|
+
'APR',
|
|
156
|
+
'MAY',
|
|
157
|
+
'JUN',
|
|
158
|
+
'JUL',
|
|
159
|
+
'AUG',
|
|
160
|
+
'SEP',
|
|
161
|
+
'OCT',
|
|
162
|
+
'NOV',
|
|
163
|
+
'DEC',
|
|
164
|
+
]
|
package/src/index.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n /**\n * The palette of the notification.\n * @default 'info'\n */\n palette: 'info' | 'success' | 'warning' | 'danger'\n /**\n * The heading of the notification.\n */\n heading: string\n /**\n * The unique id of the notification.\n */\n id?: string\n /**\n * The description of the notification.\n */\n description?: ReactNode\n /**\n * The action to take when the notification is closed\n */\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA8GT,SAEI,KAFJ;AA3EV,IAAM,uBAAuB,cAAyC,IAAI;AA0BnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,MAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cAEE,GAAG;AAAA,cACJ,SAAS;AAAA;AAAA,YAFJ,OAAO;AAAA,UAGd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAOA,SAAS,kBAAkB,OAA+B;AACxD,QAAM,EAAE,SAAS,IAAI,SAAS,SAAS,YAAY,IAAI;AAEvD,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA;AAAA,UACA,MAAI;AAAA,UACJ,SAAQ;AAAA,UAER;AAAA,gCAAC,uBAAoB,SAAQ,WAAW,mBAAQ;AAAA,YAChD,oBAAC,2BAAwB,SAAQ,WAC9B,uBACH;AAAA;AAAA;AAAA,QARK;AAAA,MASP;AAAA,IAGJ,KAAK;AACH,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA;AAAA,UACA,MAAI;AAAA,UACJ,SAAQ;AAAA,UAER;AAAA,gCAAC,uBAAoB,SAAQ,WAAW,mBAAQ;AAAA,YAChD,oBAAC,2BAAwB,SAAQ,WAC9B,uBACH;AAAA;AAAA;AAAA,QARK;AAAA,MASP;AAAA,IAGJ,KAAK;AACH,aACE,qBAAC,gBAAa,IAAkB,SAAkB,MAAI,MAAC,SAAQ,UAC7D;AAAA,4BAAC,uBAAoB,SAAQ,UAAU,mBAAQ;AAAA,QAC/C,oBAAC,2BAAwB,SAAQ,UAC9B,uBACH;AAAA,WAJ0B,EAK5B;AAAA,IAGJ,KAAK;AAAA,IACL;AACE,aACE,qBAAC,gBAAa,IAAkB,SAAkB,MAAI,MAAC,SAAQ,QAC7D;AAAA,4BAAC,uBAAoB,SAAQ,QAAQ,mBAAQ;AAAA,QAC7C,oBAAC,2BAAwB,SAAQ,QAC9B,uBACH;AAAA,WAJ0B,EAK5B;AAAA,EAEN;AACF;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|