@codeleap/web 2.4.7 → 3.1.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.
Files changed (212) hide show
  1. package/package.json +20 -19
  2. package/src/components/ActionIcon/index.tsx +59 -0
  3. package/src/components/ActionIcon/styles.ts +9 -0
  4. package/src/components/ActivityIndicator/index.tsx +78 -0
  5. package/src/components/ActivityIndicator/styles.ts +11 -0
  6. package/src/components/Button/index.tsx +125 -0
  7. package/src/components/Button/styles.ts +22 -0
  8. package/src/components/Checkbox/index.tsx +138 -0
  9. package/src/components/Checkbox/styles.ts +20 -0
  10. package/src/components/Collapse/index.tsx +87 -0
  11. package/src/components/Collapse/styles.ts +8 -0
  12. package/src/components/Drawer/index.tsx +148 -0
  13. package/src/components/Drawer/styles.ts +8 -0
  14. package/src/components/FileInput.tsx +51 -0
  15. package/src/components/Icon/index.tsx +53 -0
  16. package/src/components/Icon/styles.ts +9 -0
  17. package/src/components/InputBase/index.tsx +104 -0
  18. package/src/components/InputBase/styles.ts +167 -0
  19. package/src/components/InputBase/types.ts +28 -0
  20. package/src/components/InputBase/utils.ts +41 -0
  21. package/src/components/Link/index.tsx +69 -0
  22. package/src/components/Link/styles.ts +11 -0
  23. package/src/components/List/index.tsx +103 -0
  24. package/src/components/List/styles.ts +8 -0
  25. package/src/components/LoadingOverlay/index.tsx +34 -0
  26. package/src/components/LoadingOverlay/styles.ts +12 -0
  27. package/src/components/Modal/index.tsx +189 -0
  28. package/src/components/Modal/styles.ts +26 -0
  29. package/src/components/NumberIncrement/index.tsx +292 -0
  30. package/src/components/NumberIncrement/styles.ts +15 -0
  31. package/src/components/Overlay/index.tsx +42 -0
  32. package/src/components/Overlay/styles.ts +8 -0
  33. package/src/components/RadioInput/index.tsx +155 -0
  34. package/src/components/RadioInput/styles.ts +14 -0
  35. package/src/components/Scroll/index.tsx +29 -0
  36. package/src/components/Scroll/styles.ts +8 -0
  37. package/src/components/Select/index.tsx +438 -0
  38. package/src/components/Select/styles.ts +179 -0
  39. package/src/components/Select/types.ts +100 -0
  40. package/src/components/Slider/index.tsx +303 -0
  41. package/src/components/Slider/styles.ts +11 -0
  42. package/src/components/Switch/index.tsx +128 -0
  43. package/src/components/Switch/styles.ts +20 -0
  44. package/src/components/Text/index.tsx +62 -0
  45. package/src/components/Text/styles.ts +9 -0
  46. package/src/components/TextInput/index.tsx +253 -0
  47. package/src/components/TextInput/mask.tsx +165 -0
  48. package/src/components/TextInput/styles.ts +15 -0
  49. package/src/components/Tooltip/index.tsx +155 -0
  50. package/src/components/Tooltip/styles.ts +9 -0
  51. package/src/components/Touchable/index.tsx +72 -0
  52. package/src/components/Touchable/styles.ts +11 -0
  53. package/src/components/View/index.tsx +94 -0
  54. package/src/components/View/styles.ts +8 -0
  55. package/src/components/components.ts +29 -0
  56. package/src/components/defaultStyles.ts +51 -0
  57. package/src/index.ts +6 -0
  58. package/src/lib/OSAlert.tsx +190 -0
  59. package/src/lib/Toast.ts +23 -0
  60. package/src/lib/hooks.ts +340 -0
  61. package/src/lib/index.ts +2 -0
  62. package/src/lib/logger.ts +13 -0
  63. package/src/lib/utils/cookies.ts +13 -0
  64. package/src/lib/utils/index.ts +4 -0
  65. package/src/lib/utils/pollyfils/scroll.ts +65 -0
  66. package/src/lib/utils/stopPropagation.ts +15 -0
  67. package/src/types/index.ts +1 -0
  68. package/src/types/utility.ts +3 -0
  69. package/dist/components/ActivityIndicator/index.d.ts +0 -12
  70. package/dist/components/ActivityIndicator/index.js +0 -57
  71. package/dist/components/ActivityIndicator/index.js.map +0 -1
  72. package/dist/components/ActivityIndicator/styles.d.ts +0 -53
  73. package/dist/components/ActivityIndicator/styles.js +0 -22
  74. package/dist/components/ActivityIndicator/styles.js.map +0 -1
  75. package/dist/components/Button.d.ts +0 -18
  76. package/dist/components/Button.js +0 -67
  77. package/dist/components/Button.js.map +0 -1
  78. package/dist/components/CenterWrapper.d.ts +0 -7
  79. package/dist/components/CenterWrapper.js +0 -28
  80. package/dist/components/CenterWrapper.js.map +0 -1
  81. package/dist/components/Checkbox/index.d.ts +0 -12
  82. package/dist/components/Checkbox/index.js +0 -58
  83. package/dist/components/Checkbox/index.js.map +0 -1
  84. package/dist/components/Checkbox/styles.d.ts +0 -53
  85. package/dist/components/Checkbox/styles.js +0 -64
  86. package/dist/components/Checkbox/styles.js.map +0 -1
  87. package/dist/components/Collapse.d.ts +0 -20
  88. package/dist/components/Collapse.js +0 -68
  89. package/dist/components/Collapse.js.map +0 -1
  90. package/dist/components/ContentView.d.ts +0 -10
  91. package/dist/components/ContentView.js +0 -52
  92. package/dist/components/ContentView.js.map +0 -1
  93. package/dist/components/Drawer.d.ts +0 -23
  94. package/dist/components/Drawer.js +0 -73
  95. package/dist/components/Drawer.js.map +0 -1
  96. package/dist/components/FileInput.d.ts +0 -8
  97. package/dist/components/FileInput.js +0 -69
  98. package/dist/components/FileInput.js.map +0 -1
  99. package/dist/components/HorizontalScroll.d.ts +0 -3
  100. package/dist/components/HorizontalScroll.js +0 -42
  101. package/dist/components/HorizontalScroll.js.map +0 -1
  102. package/dist/components/Icon.d.ts +0 -8
  103. package/dist/components/Icon.js +0 -55
  104. package/dist/components/Icon.js.map +0 -1
  105. package/dist/components/Link.d.ts +0 -7
  106. package/dist/components/Link.js +0 -63
  107. package/dist/components/Link.js.map +0 -1
  108. package/dist/components/List.d.ts +0 -18
  109. package/dist/components/List.js +0 -52
  110. package/dist/components/List.js.map +0 -1
  111. package/dist/components/Modal/index.d.ts +0 -21
  112. package/dist/components/Modal/index.js +0 -116
  113. package/dist/components/Modal/index.js.map +0 -1
  114. package/dist/components/Modal/styles.d.ts +0 -56
  115. package/dist/components/Modal/styles.js +0 -36
  116. package/dist/components/Modal/styles.js.map +0 -1
  117. package/dist/components/Overlay.d.ts +0 -10
  118. package/dist/components/Overlay.js +0 -41
  119. package/dist/components/Overlay.js.map +0 -1
  120. package/dist/components/RadioInput/index.d.ts +0 -21
  121. package/dist/components/RadioInput/index.js +0 -55
  122. package/dist/components/RadioInput/index.js.map +0 -1
  123. package/dist/components/RadioInput/styles.d.ts +0 -54
  124. package/dist/components/RadioInput/styles.js +0 -44
  125. package/dist/components/RadioInput/styles.js.map +0 -1
  126. package/dist/components/RouterPage/Menu.d.ts +0 -10
  127. package/dist/components/RouterPage/Menu.js +0 -36
  128. package/dist/components/RouterPage/Menu.js.map +0 -1
  129. package/dist/components/RouterPage/MenuItem.d.ts +0 -12
  130. package/dist/components/RouterPage/MenuItem.js +0 -42
  131. package/dist/components/RouterPage/MenuItem.js.map +0 -1
  132. package/dist/components/RouterPage/Router.d.ts +0 -8
  133. package/dist/components/RouterPage/Router.js +0 -27
  134. package/dist/components/RouterPage/Router.js.map +0 -1
  135. package/dist/components/RouterPage/index.d.ts +0 -29
  136. package/dist/components/RouterPage/index.js +0 -85
  137. package/dist/components/RouterPage/index.js.map +0 -1
  138. package/dist/components/RouterPage/styles.d.ts +0 -54
  139. package/dist/components/RouterPage/styles.js +0 -87
  140. package/dist/components/RouterPage/styles.js.map +0 -1
  141. package/dist/components/Scroll.d.ts +0 -5
  142. package/dist/components/Scroll.js +0 -24
  143. package/dist/components/Scroll.js.map +0 -1
  144. package/dist/components/Select/Custom.d.ts +0 -8
  145. package/dist/components/Select/Custom.js +0 -104
  146. package/dist/components/Select/Custom.js.map +0 -1
  147. package/dist/components/Select/Multi.d.ts +0 -3
  148. package/dist/components/Select/Multi.js +0 -105
  149. package/dist/components/Select/Multi.js.map +0 -1
  150. package/dist/components/Select/Native.d.ts +0 -17
  151. package/dist/components/Select/Native.js +0 -44
  152. package/dist/components/Select/Native.js.map +0 -1
  153. package/dist/components/Select/index.d.ts +0 -12
  154. package/dist/components/Select/index.js +0 -40
  155. package/dist/components/Select/index.js.map +0 -1
  156. package/dist/components/Select/styles.d.ts +0 -5
  157. package/dist/components/Select/styles.js +0 -57
  158. package/dist/components/Select/styles.js.map +0 -1
  159. package/dist/components/Select/types.d.ts +0 -49
  160. package/dist/components/Select/types.js +0 -3
  161. package/dist/components/Select/types.js.map +0 -1
  162. package/dist/components/Slider.d.ts +0 -5
  163. package/dist/components/Slider.js +0 -39
  164. package/dist/components/Slider.js.map +0 -1
  165. package/dist/components/Text.d.ts +0 -9
  166. package/dist/components/Text.js +0 -43
  167. package/dist/components/Text.js.map +0 -1
  168. package/dist/components/TextInput.d.ts +0 -150
  169. package/dist/components/TextInput.js +0 -125
  170. package/dist/components/TextInput.js.map +0 -1
  171. package/dist/components/Tooltip.d.ts +0 -12
  172. package/dist/components/Tooltip.js +0 -122
  173. package/dist/components/Tooltip.js.map +0 -1
  174. package/dist/components/Touchable.d.ts +0 -15
  175. package/dist/components/Touchable.js +0 -52
  176. package/dist/components/Touchable.js.map +0 -1
  177. package/dist/components/View.d.ts +0 -10
  178. package/dist/components/View.js +0 -62
  179. package/dist/components/View.js.map +0 -1
  180. package/dist/components/index.d.ts +0 -24
  181. package/dist/components/index.js +0 -37
  182. package/dist/components/index.js.map +0 -1
  183. package/dist/index.d.ts +0 -6
  184. package/dist/index.js +0 -25
  185. package/dist/index.js.map +0 -1
  186. package/dist/lib/OSAlert.d.ts +0 -21
  187. package/dist/lib/OSAlert.js +0 -140
  188. package/dist/lib/OSAlert.js.map +0 -1
  189. package/dist/lib/Toast.d.ts +0 -13
  190. package/dist/lib/Toast.js +0 -32
  191. package/dist/lib/Toast.js.map +0 -1
  192. package/dist/lib/hooks.d.ts +0 -28
  193. package/dist/lib/hooks.js +0 -183
  194. package/dist/lib/hooks.js.map +0 -1
  195. package/dist/lib/logger.d.ts +0 -2
  196. package/dist/lib/logger.js +0 -16
  197. package/dist/lib/logger.js.map +0 -1
  198. package/dist/lib/utils/cookies.d.ts +0 -6
  199. package/dist/lib/utils/cookies.js +0 -15
  200. package/dist/lib/utils/cookies.js.map +0 -1
  201. package/dist/lib/utils/index.d.ts +0 -4
  202. package/dist/lib/utils/index.js +0 -23
  203. package/dist/lib/utils/index.js.map +0 -1
  204. package/dist/lib/utils/pollyfils/scroll.d.ts +0 -1
  205. package/dist/lib/utils/pollyfils/scroll.js +0 -66
  206. package/dist/lib/utils/pollyfils/scroll.js.map +0 -1
  207. package/dist/lib/utils/stopPropagation.d.ts +0 -1
  208. package/dist/lib/utils/stopPropagation.js +0 -20
  209. package/dist/lib/utils/stopPropagation.js.map +0 -1
  210. package/dist/types/utility.d.ts +0 -2
  211. package/dist/types/utility.js +0 -3
  212. package/dist/types/utility.js.map +0 -1
@@ -0,0 +1,340 @@
1
+ import { AnyFunction, onMount, onUpdate, range, useUncontrolled } from '@codeleap/common'
2
+ import { useCallback, useMemo, useRef, useState } from 'react'
3
+ import { v4 } from 'uuid'
4
+ import { easeInOut, EasingFunction, AnimationProps, useAnimate, useAnimation, animate } from 'framer-motion'
5
+
6
+ export function useWindowSize() {
7
+ const [size, setSize] = useState([])
8
+
9
+ onMount(() => {
10
+ setSize([window.innerWidth, window.innerWidth])
11
+ })
12
+
13
+ function handleResize() {
14
+ setSize([window.innerWidth, window.innerHeight])
15
+ }
16
+
17
+ onUpdate(() => {
18
+ window.addEventListener('resize', handleResize)
19
+ return () => {
20
+ window.removeEventListener('resize', handleResize)
21
+ }
22
+ }, [])
23
+
24
+ return size
25
+ }
26
+
27
+ // type UseClickOutsideOpts = {
28
+ // customId?: string
29
+ // deps?: any[]
30
+ // }
31
+ // export function useClickOutside(
32
+ // callback: AnyFunction,
33
+ // deps?: UseClickOutsideOpts,
34
+ // ) {
35
+ // const id = useRef(deps?.customId || v4())
36
+
37
+ // const onClick = useCallback((e: Event) => {
38
+ // const element = document.getElementById(id.current)
39
+ // if (!element) return
40
+ // const isInside = element.contains(e.target as Node) || ((e.target as HTMLElement).id === id.current)
41
+
42
+ // // const iterNodes = (el:HTMLElement|Element) => {
43
+ // // if (isInside) return
44
+ // // for (let i = 0; i < el.children.length; i++) {
45
+ // // const node = el.children.item(i)
46
+
47
+ // // if (!node) return
48
+ // // const _isInside = node.contains(e.target as Node)
49
+ // // if (_isInside) {
50
+ // // isInside = _isInside
51
+ // // }
52
+ // // if (isInside) break
53
+
54
+ // // if (node.hasChildNodes()) {
55
+ // // iterNodes(node)
56
+ // // }
57
+
58
+ // // if (isInside) break
59
+ // // }
60
+ // // }
61
+
62
+ // // if (!isInside) {
63
+ // // iterNodes(element)
64
+ // // }
65
+
66
+ // if (!isInside) {
67
+ // callback(e)
68
+ // }
69
+ // }, deps?.deps || [])
70
+ // onUpdate(() => {
71
+
72
+ // document.addEventListener('click', onClick)
73
+ // return () => {
74
+ // document.removeEventListener('click', onClick)
75
+ // }
76
+ // }, [onClick])
77
+
78
+ // return id.current
79
+ // }
80
+
81
+ import { useEffect } from 'react'
82
+
83
+ const DEFAULT_EVENTS = ['mousedown', 'touchstart']
84
+
85
+ export function useClickOutside<T extends HTMLElement = any>(
86
+ handler: () => void,
87
+ events?: string[] | null,
88
+ nodes?: HTMLElement[],
89
+ ) {
90
+ const ref = useRef<T>()
91
+
92
+ useEffect(() => {
93
+ const listener = (event: any) => {
94
+ if (Array.isArray(nodes)) {
95
+ const shouldIgnore = event?.target?.hasAttribute('data-ignore-outside-clicks')
96
+ const shouldTrigger = nodes.every((node) => !!node && !node.contains(event.target))
97
+ shouldTrigger && !shouldIgnore && handler()
98
+ } else if (ref.current && !ref.current.contains(event.target)) {
99
+ handler()
100
+ }
101
+ };
102
+
103
+ (events || DEFAULT_EVENTS).forEach((fn) => document.addEventListener(fn, listener))
104
+
105
+ return () => {
106
+ (events || DEFAULT_EVENTS).forEach((fn) => document.removeEventListener(fn, listener))
107
+ }
108
+ }, [ref, handler, nodes])
109
+
110
+ return ref
111
+ }
112
+
113
+ export function useScrollEffect(
114
+ effect: (passed: boolean, current: number) => any,
115
+ breakpoint: number,
116
+ extraDependencies = [],
117
+ ) {
118
+ function handleScroll() {
119
+ const passed = window.scrollY > breakpoint
120
+ effect(passed, window.scrollY)
121
+ }
122
+
123
+ onUpdate(() => {
124
+ document.addEventListener('scroll', handleScroll)
125
+ return () => {
126
+ document.removeEventListener('scroll', handleScroll)
127
+ }
128
+ }, [breakpoint, ...extraDependencies])
129
+ }
130
+
131
+ export const DOTS = 'dots'
132
+
133
+ export interface PaginationParams {
134
+ /** Page selected on initial render, defaults to 1 */
135
+ initialPage?: number
136
+
137
+ /** Controlled active page number */
138
+ page?: number
139
+
140
+ /** Total amount of pages */
141
+ total: number
142
+
143
+ /** Siblings amount on left/right side of selected page, defaults to 1 */
144
+ siblings?: number
145
+
146
+ /** Amount of elements visible on left/right edges, defaults to 1 */
147
+ boundaries?: number
148
+
149
+ /** Callback fired after change of each page */
150
+ onChange?: (page: number) => void
151
+ }
152
+
153
+ export function usePagination({
154
+ total,
155
+ siblings = 1,
156
+ boundaries = 1,
157
+ page,
158
+ initialPage = 1,
159
+ onChange,
160
+ }: PaginationParams) {
161
+ const [activePage, setActivePage] = useUncontrolled({
162
+ value: page,
163
+ onChange,
164
+ defaultValue: initialPage,
165
+ finalValue: initialPage,
166
+ rule: (_page) => typeof _page === 'number' && _page <= total,
167
+ })
168
+
169
+ const setPage = (pageNumber: number) => {
170
+ if (pageNumber <= 0) {
171
+ setActivePage(1)
172
+ } else if (pageNumber > total) {
173
+ setActivePage(total)
174
+ } else {
175
+ setActivePage(pageNumber)
176
+ }
177
+ }
178
+
179
+ const next = () => setPage(activePage + 1)
180
+ const previous = () => setPage(activePage - 1)
181
+ const first = () => setPage(1)
182
+ const last = () => setPage(total)
183
+
184
+ const paginationRange = useMemo((): (number | 'dots')[] => {
185
+ // Pages count is determined as siblings (left/right) + boundaries(left/right) + currentPage + 2*DOTS
186
+ const totalPageNumbers = siblings * 2 + 3 + boundaries * 2
187
+
188
+ /*
189
+ * If the number of pages is less than the page numbers we want to show in our
190
+ * paginationComponent, we return the range [1..total]
191
+ */
192
+ if (totalPageNumbers >= total) {
193
+ return range(1, total)
194
+ }
195
+
196
+ const leftSiblingIndex = Math.max(activePage - siblings, boundaries)
197
+ const rightSiblingIndex = Math.min(activePage + siblings, total - boundaries)
198
+
199
+ /*
200
+ * We do not want to show dots if there is only one position left
201
+ * after/before the left/right page count as that would lead to a change if our Pagination
202
+ * component size which we do not want
203
+ */
204
+ const shouldShowLeftDots = leftSiblingIndex > boundaries + 2
205
+ const shouldShowRightDots = rightSiblingIndex < total - (boundaries + 1)
206
+
207
+ if (!shouldShowLeftDots && shouldShowRightDots) {
208
+ const leftItemCount = siblings * 2 + boundaries + 2
209
+ return [...range(1, leftItemCount), DOTS, ...range(total - (boundaries - 1), total)]
210
+ }
211
+
212
+ if (shouldShowLeftDots && !shouldShowRightDots) {
213
+ const rightItemCount = boundaries + 1 + 2 * siblings
214
+ return [...range(1, boundaries), DOTS, ...range(total - rightItemCount, total)]
215
+ }
216
+
217
+ return [
218
+ ...range(1, boundaries),
219
+ DOTS,
220
+ ...range(leftSiblingIndex, rightSiblingIndex),
221
+ DOTS,
222
+ ...range(total - boundaries + 1, total),
223
+ ]
224
+ }, [total, siblings, activePage])
225
+
226
+ return {
227
+ range: paginationRange,
228
+ active: activePage,
229
+ setPage,
230
+ next,
231
+ previous,
232
+ first,
233
+ last,
234
+ }
235
+ }
236
+
237
+
238
+ export interface UseMediaQueryOptions {
239
+ getInitialValueInEffect: boolean;
240
+ }
241
+
242
+ type MediaQueryCallback = (event: { matches: boolean; media: string }) => void;
243
+
244
+ /**
245
+ * Older versions of Safari (shipped withCatalina and before) do not support addEventListener on matchMedia
246
+ * https://stackoverflow.com/questions/56466261/matchmedia-addlistener-marked-as-deprecated-addeventlistener-equivalent
247
+ * */
248
+ function attachMediaListener(query: MediaQueryList, callback: MediaQueryCallback) {
249
+ try {
250
+ query.addEventListener('change', callback);
251
+ return () => query.removeEventListener('change', callback);
252
+ } catch (e) {
253
+ query.addListener(callback);
254
+ return () => query.removeListener(callback);
255
+ }
256
+ }
257
+
258
+ function getInitialValue(query: string, initialValue?: boolean) {
259
+ if (typeof initialValue === 'boolean') {
260
+ return initialValue;
261
+ }
262
+
263
+ if (typeof window !== 'undefined' && 'matchMedia' in window) {
264
+ return window.matchMedia(query).matches;
265
+ }
266
+
267
+ return false;
268
+ }
269
+
270
+ export function useMediaQuery(
271
+ query: string,
272
+ initialValue?: boolean,
273
+ { getInitialValueInEffect }: UseMediaQueryOptions = {
274
+ getInitialValueInEffect: true,
275
+ }
276
+ ) {
277
+
278
+ const _query = useMemo(() => {
279
+ return query.trim().replace('@media screen and ', '')
280
+
281
+ }, [query])
282
+ const [matches, setMatches] = useState(
283
+ getInitialValueInEffect ? initialValue : getInitialValue(_query, initialValue)
284
+ );
285
+ const queryRef = useRef<MediaQueryList>();
286
+
287
+ useEffect(() => {
288
+ if(query.trim() === '') return
289
+ if ('matchMedia' in window) {
290
+ queryRef.current = window.matchMedia(_query);
291
+ setMatches(queryRef.current.matches);
292
+ return attachMediaListener(queryRef.current, (event) => setMatches(event.matches));
293
+ }
294
+
295
+ return undefined;
296
+ }, [_query]);
297
+
298
+ return matches;
299
+ }
300
+
301
+ type SelectProperties<T extends Record<string|number|symbol, any>, K extends keyof T> = {
302
+ [P in K] : T[K]
303
+ }
304
+
305
+ export function useStaticAnimationStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(obj: T, keys: K[]) {
306
+ const styles = useRef({})
307
+
308
+ if (Object.keys(styles.current).length === 0) {
309
+ const mappedStyles = keys.map((k) => [k, { ...obj[k] }])
310
+
311
+ styles.current = Object.fromEntries(mappedStyles)
312
+ }
313
+
314
+ return styles.current as SelectProperties<T, K>
315
+ }
316
+
317
+ type UseAnimatedVariantStylesConfig<T extends Record<string|number|symbol, any>, K extends keyof T > = {
318
+ variantStyles: T
319
+ animatedProperties: K[]
320
+ updater: (states: SelectProperties<T, K>) => AnimationProps
321
+ dependencies?: any[]
322
+ }
323
+
324
+ export function useAnimatedVariantStyles<T extends Record<string|number|symbol, any>, K extends keyof T >(config: UseAnimatedVariantStylesConfig<T, K>) {
325
+ const { animatedProperties, updater, variantStyles, dependencies = [] } = config
326
+
327
+ const staticStyles = useStaticAnimationStyles(variantStyles, animatedProperties)
328
+
329
+ const initialState = updater(staticStyles)
330
+
331
+ const [animated, setAnimated] = useState(initialState)
332
+
333
+ onUpdate(() => {
334
+ const nextState = updater(staticStyles)
335
+
336
+ setAnimated(nextState)
337
+ }, dependencies)
338
+
339
+ return animated
340
+ }
@@ -0,0 +1,2 @@
1
+ export * from './utils'
2
+ export * from './hooks'
@@ -0,0 +1,13 @@
1
+ import { Logger } from '@codeleap/common'
2
+
3
+ export const logger = new Logger({
4
+ Environment: {
5
+ IsDev: true,
6
+ },
7
+ Sentry: {
8
+ enable: false,
9
+ },
10
+ Logger: {
11
+ Level: 'debug',
12
+ },
13
+ })
@@ -0,0 +1,13 @@
1
+ import Cookies from 'js-cookie'
2
+
3
+ const get = (key) => Cookies.get(key)
4
+
5
+ const set = (key, value) => Cookies.set(key, value, { expires: 365 })
6
+
7
+ const remove = (key) => Cookies.remove(key)
8
+
9
+ export default {
10
+ get,
11
+ set,
12
+ remove,
13
+ }
@@ -0,0 +1,4 @@
1
+ export * from './pollyfils/scroll'
2
+ export * from './stopPropagation'
3
+ export { default as url } from 'url-parse'
4
+ export { default as Cookies } from './cookies'
@@ -0,0 +1,65 @@
1
+ // native smooth scrolling for Chrome, Firefox & Opera
2
+ // @see: https://caniuse.com/#feat=css-scroll-behavior
3
+ const nativeSmoothScrollTo = (elem, pad = 0) => {
4
+ if (!window) return
5
+ window.scroll({
6
+ behavior: 'smooth',
7
+ left: 0,
8
+ top: elem.getBoundingClientRect().top + window.pageYOffset + pad,
9
+ })
10
+ }
11
+
12
+ // polyfilled smooth scrolling for IE, Edge & Safari
13
+ const smoothScrollTo = (to, duration) => {
14
+ if (!document) return
15
+ const element = document.scrollingElement || document.documentElement,
16
+ start = element.scrollTop,
17
+ change = to - start,
18
+ startDate = +new Date()
19
+
20
+ // t = current time
21
+ // b = start value
22
+ // c = change in value
23
+ // d = duration
24
+ const easeInOutQuad = (t, b, c, d) => {
25
+ t /= d / 2
26
+ if (t < 1) return (c / 2) * t * t + b
27
+ t--
28
+ return (-c / 2) * (t * (t - 2) - 1) + b
29
+ }
30
+
31
+ const animateScroll = () => {
32
+ const currentDate = +new Date()
33
+ const currentTime = currentDate - startDate
34
+ element.scrollTop = parseInt(
35
+ easeInOutQuad(currentTime, start, change, duration),
36
+ )
37
+ if (currentTime < duration) {
38
+ requestAnimationFrame(animateScroll)
39
+ } else {
40
+ element.scrollTop = to
41
+ }
42
+ }
43
+ animateScroll()
44
+ }
45
+
46
+ // detect support for the behavior property in ScrollOptions
47
+
48
+ // smooth scrolling stub
49
+ export const scrollToElem = (elemSelector, padOffsets = [0, 0]) => {
50
+ if (!document) return
51
+ const supportsNativeSmoothScroll =
52
+ 'scrollBehavior' in document.documentElement.style || {}
53
+ if (!elemSelector) {
54
+ return
55
+ }
56
+
57
+ const elem = document.querySelector(elemSelector)
58
+ if (elem) {
59
+ if (supportsNativeSmoothScroll) {
60
+ nativeSmoothScrollTo(elem, padOffsets[0])
61
+ } else {
62
+ smoothScrollTo(elem.offsetTop + padOffsets[0], 600)
63
+ }
64
+ }
65
+ }
@@ -0,0 +1,15 @@
1
+ import { AnyFunction } from '@codeleap/common'
2
+
3
+ export function stopPropagation(event: any) {
4
+ const tryCalls = [
5
+ event?.stopPropagation,
6
+ event?.preventDefault,
7
+ event.nativeEvent?.stopImmediatePropagation as AnyFunction,
8
+ ]
9
+
10
+ for (const call of tryCalls) {
11
+ try {
12
+ call()
13
+ } catch (e) {}
14
+ }
15
+ }
@@ -0,0 +1 @@
1
+ export * from './utility'
@@ -0,0 +1,3 @@
1
+ import { CSSInterpolation, CSSObject } from '@emotion/css'
2
+
3
+ export type StylesOf<C extends string> = Partial<Record<C, CSSInterpolation | CSSInterpolation[]>>
@@ -1,12 +0,0 @@
1
- /// <reference types="react" />
2
- import { CSSObject } from '@emotion/react';
3
- import { ComponentVariants, ActivityIndicatorStyles, ActivityIndicatorComposition } from '@codeleap/common';
4
- import { StylesOf } from '../../types/utility';
5
- export * from './styles';
6
- export declare type ActivityIndicatorProps = {
7
- animating?: boolean;
8
- hidesWhenStopped?: boolean;
9
- styles?: StylesOf<ActivityIndicatorComposition>;
10
- css?: CSSObject;
11
- } & ComponentVariants<typeof ActivityIndicatorStyles>;
12
- export declare const ActivityIndicator: React.FC<ActivityIndicatorProps>;
@@ -1,57 +0,0 @@
1
- "use strict";
2
- var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
- if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
- return cooked;
5
- };
6
- var __assign = (this && this.__assign) || function () {
7
- __assign = Object.assign || function(t) {
8
- for (var s, i = 1, n = arguments.length; i < n; i++) {
9
- s = arguments[i];
10
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
- t[p] = s[p];
12
- }
13
- return t;
14
- };
15
- return __assign.apply(this, arguments);
16
- };
17
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
18
- if (k2 === undefined) k2 = k;
19
- Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
20
- }) : (function(o, m, k, k2) {
21
- if (k2 === undefined) k2 = k;
22
- o[k2] = m[k];
23
- }));
24
- var __exportStar = (this && this.__exportStar) || function(m, exports) {
25
- for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
26
- };
27
- var __rest = (this && this.__rest) || function (s, e) {
28
- var t = {};
29
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
30
- t[p] = s[p];
31
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
32
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
33
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
34
- t[p[i]] = s[p[i]];
35
- }
36
- return t;
37
- };
38
- Object.defineProperty(exports, "__esModule", { value: true });
39
- exports.ActivityIndicator = void 0;
40
- var jsx_runtime_1 = require("@emotion/react/jsx-runtime");
41
- var View_1 = require("../View");
42
- var react_1 = require("@emotion/react");
43
- var common_1 = require("@codeleap/common");
44
- __exportStar(require("./styles"), exports);
45
- var spin = (0, react_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to{ \n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to{ \n transform: rotate(360deg);\n }\n"])));
46
- var ActivityIndicator = function (indicatorProps) {
47
- var _a = indicatorProps.animating, animating = _a === void 0 ? true : _a, _b = indicatorProps.hidesWhenStopped, hidesWhenStopped = _b === void 0 ? true : _b, variants = indicatorProps.variants, responsiveVariants = indicatorProps.responsiveVariants, styles = indicatorProps.styles, viewProps = __rest(indicatorProps, ["animating", "hidesWhenStopped", "variants", "responsiveVariants", "styles"]);
48
- var variantStyles = (0, common_1.useDefaultComponentStyle)('ActivityIndicator', {
49
- styles: styles,
50
- responsiveVariants: responsiveVariants,
51
- variants: variants,
52
- });
53
- return ((0, jsx_runtime_1.jsxs)(View_1.View, __assign({}, viewProps, { css: [variantStyles.wrapper, (!animating && hidesWhenStopped) && { visibility: 'hidden' }] }, { children: [(0, jsx_runtime_1.jsx)(View_1.View, { css: __assign(__assign({}, variantStyles.circle), variantStyles.backCircle) }, void 0), (0, jsx_runtime_1.jsx)(View_1.View, { css: __assign(__assign(__assign({}, variantStyles.circle), variantStyles.frontCircle), { animation: "".concat(spin, " 1s infinite"), animationPlayState: animating ? 'running' : 'paused' }) }, void 0)] }), void 0));
54
- };
55
- exports.ActivityIndicator = ActivityIndicator;
56
- var templateObject_1;
57
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ActivityIndicator/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gCAA8B;AAC9B,wCAAqD;AACrD,2CAKyB;AAGzB,2CAAwB;AAExB,IAAM,IAAI,OAAG,iBAAS,kLAAA,8GAOrB,IAAA,CAAA;AASM,IAAM,iBAAiB,GAAqC,UACjE,cAAc;IAGZ,IAAA,KAOE,cAAc,UAPA,EAAhB,SAAS,mBAAG,IAAI,KAAA,EAChB,KAME,cAAc,iBANO,EAAvB,gBAAgB,mBAAG,IAAI,KAAA,EAEvB,QAAQ,GAIN,cAAc,SAJR,EACR,kBAAkB,GAGhB,cAAc,mBAHE,EAClB,MAAM,GAEJ,cAAc,OAFV,EACH,SAAS,UACV,cAAc,EARZ,6EAQL,CADa,CACI;IAElB,IAAM,aAAa,GAAG,IAAA,iCAAwB,EAAC,mBAAmB,EAAE;QAClE,MAAM,QAAA;QACN,kBAAkB,oBAAA;QAClB,QAAQ,UAAA;KACT,CAAC,CAAA;IAEF,OAAO,CACL,wBAAC,WAAI,eAAK,SAAS,IAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC,SAAS,IAAI,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,iBAC7G,uBAAC,WAAI,IAAC,GAAG,wBAAO,aAAa,CAAC,MAAM,GAAK,aAAa,CAAC,UAAU,YAAM,EACvE,uBAAC,WAAI,IACH,GAAG,iCACE,aAAa,CAAC,MAAM,GACpB,aAAa,CAAC,WAAW,KAC5B,SAAS,EAAE,UAAG,IAAI,iBAAc,EAChC,kBAAkB,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,cAEtD,aACG,CACR,CAAA;AACH,CAAC,CAAA;AAhCY,QAAA,iBAAiB,qBAgC7B"}
@@ -1,53 +0,0 @@
1
- import { ActivityIndicatorComposition } from '@codeleap/common';
2
- export declare const WebActivityIndicatorStyles: {
3
- default: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
4
- fixed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
5
- block: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
6
- flex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
7
- absolute: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
8
- relative: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
9
- sticky: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
10
- row: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
11
- center: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
12
- column: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
13
- wrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
14
- inline: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
15
- inlineFlex: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
16
- hidden: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
17
- full: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
18
- noWrap: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
19
- fullWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
20
- fullHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
21
- fullView: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
22
- fullViewWidth: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
23
- fullViewHeight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
24
- whole: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
25
- centerRow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
26
- listStyles: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
27
- alignStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
28
- alignEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
29
- alignCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
30
- alignStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
31
- alignSelfCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
32
- alignSelfStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
33
- alignSelfStretch: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
34
- alignSelfEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
35
- justifyStart: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
36
- justifyEnd: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
37
- justifyCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
38
- justifySpaceBetween: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
39
- justifySpaceAround: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
40
- textRight: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
41
- textLeft: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
42
- textCenter: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
43
- blur: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
44
- elevated: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
45
- neumorphism: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
46
- scrollX: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
47
- scrollY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
48
- scrollXY: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
49
- debRed: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
50
- debGreen: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
51
- debBlue: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
52
- debYellow: (theme: import("@codeleap/common").ThemeColorScheme<import("@codeleap/common").AppTheme>, variant?: string) => Partial<Record<ActivityIndicatorComposition, any>>;
53
- };
@@ -1,22 +0,0 @@
1
- "use strict";
2
- var __assign = (this && this.__assign) || function () {
3
- __assign = Object.assign || function(t) {
4
- for (var s, i = 1, n = arguments.length; i < n; i++) {
5
- s = arguments[i];
6
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
- t[p] = s[p];
8
- }
9
- return t;
10
- };
11
- return __assign.apply(this, arguments);
12
- };
13
- Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.WebActivityIndicatorStyles = void 0;
15
- var common_1 = require("@codeleap/common");
16
- var createActivityIndicatorStyle = (0, common_1.createDefaultVariantFactory)();
17
- var getDefault = common_1.ActivityIndicatorStyles.default;
18
- exports.WebActivityIndicatorStyles = __assign(__assign({}, common_1.ActivityIndicatorStyles), { default: createActivityIndicatorStyle(function (theme) {
19
- var defaults = getDefault(theme);
20
- return defaults;
21
- }) });
22
- //# sourceMappingURL=styles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ActivityIndicator/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,2CAIyB;AAEzB,IAAM,4BAA4B,GAChC,IAAA,oCAA2B,GAAgC,CAAA;AAE7D,IAAM,UAAU,GAAG,gCAAuB,CAAC,OAAO,CAAA;AAErC,QAAA,0BAA0B,yBAClC,gCAAuB,KAC1B,OAAO,EAAE,4BAA4B,CAAC,UAAC,KAAK;QAC1C,IAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC,CAAA;QAElC,OAAO,QAAQ,CAAA;IACjB,CAAC,CAAC,IACH"}
@@ -1,18 +0,0 @@
1
- import { ButtonStyles, ComponentVariants, ButtonComposition, AnyFunction } from '@codeleap/common';
2
- import React, { ComponentPropsWithRef } from 'react';
3
- import { StylesOf } from '../types/utility';
4
- import { TouchableProps } from './Touchable';
5
- import { IconPlaceholder } from '@codeleap/common';
6
- declare type NativeButtonProps = ComponentPropsWithRef<'button'>;
7
- export declare type ButtonProps = NativeButtonProps & ComponentVariants<typeof ButtonStyles> & {
8
- text?: string;
9
- rightIcon?: IconPlaceholder;
10
- icon?: IconPlaceholder;
11
- onPress?: AnyFunction;
12
- styles?: StylesOf<ButtonComposition>;
13
- loading?: boolean;
14
- debugName?: string;
15
- debounce?: number;
16
- } & Partial<TouchableProps<any>>;
17
- export declare const Button: React.FC<ButtonProps>;
18
- export {};