@true-tech-team/react-components 0.0.8 → 0.0.10
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/README.md +958 -0
- package/index.css +1 -1
- package/index.d.ts +15 -0
- package/index.js +1 -1
- package/index.mjs +10655 -8201
- package/lib/components/display/Accordion/index.d.ts +1 -1
- package/lib/components/display/Table/TableRow.d.ts +1 -1
- package/lib/components/display/Tabs/index.d.ts +1 -1
- package/lib/components/dnd/KanbanBoard/index.d.ts +1 -1
- package/lib/components/filters/index.d.ts +2 -2
- package/lib/components/inputs/Input/index.d.ts +1 -1
- package/lib/components/overlays/Alert/AlertProvider.d.ts +1 -1
- package/lib/components/overlays/Alert/index.d.ts +4 -4
- package/lib/components/overlays/Dialog/DialogProvider.d.ts +1 -1
- package/lib/components/overlays/Dialog/index.d.ts +3 -3
- package/lib/components/overlays/Toast/index.d.ts +2 -2
- package/lib/hooks/index.d.ts +16 -1
- package/lib/hooks/useClipboard/index.d.ts +2 -0
- package/lib/hooks/useClipboard/useClipboard.d.ts +67 -0
- package/lib/hooks/useIntersectionObserver/index.d.ts +2 -0
- package/lib/hooks/useIntersectionObserver/useIntersectionObserver.d.ts +103 -0
- package/lib/hooks/useInterval/index.d.ts +2 -0
- package/lib/hooks/useInterval/useInterval.d.ts +82 -0
- package/lib/hooks/useLocalStorage/index.d.ts +2 -0
- package/lib/hooks/useLocalStorage/useLocalStorage.d.ts +56 -0
- package/lib/hooks/useMediaQuery/index.d.ts +2 -0
- package/lib/hooks/useMediaQuery/useMediaQuery.d.ts +45 -0
- package/lib/hooks/usePopoverPosition/index.d.ts +1 -1
- package/lib/hooks/usePrevious/index.d.ts +1 -0
- package/lib/hooks/usePrevious/usePrevious.d.ts +35 -0
- package/lib/hooks/useTimeout/index.d.ts +2 -0
- package/lib/hooks/useTimeout/useTimeout.d.ts +70 -0
- package/lib/hooks/useUrlState/index.d.ts +2 -0
- package/lib/hooks/useUrlState/useUrlState.d.ts +83 -0
- package/lib/utils/index.d.ts +2 -2
- package/package.json +54 -55
|
@@ -2,5 +2,5 @@ export { Accordion, default } from './Accordion';
|
|
|
2
2
|
export type { AccordionProps, AccordionIconPosition } from './Accordion';
|
|
3
3
|
export { AccordionContainer } from './AccordionContainer';
|
|
4
4
|
export type { AccordionContainerProps, AccordionControlsPosition } from './AccordionContainer';
|
|
5
|
-
export { AccordionContext, useAccordionContext, useAccordionContextStrict } from './AccordionContext';
|
|
5
|
+
export { AccordionContext, useAccordionContext, useAccordionContextStrict, } from './AccordionContext';
|
|
6
6
|
export type { AccordionContextValue, AccordionMode } from './AccordionContext';
|
|
@@ -2,7 +2,7 @@ interface TableRowProps<T = Record<string, unknown>> {
|
|
|
2
2
|
row: T;
|
|
3
3
|
rowIndex: number;
|
|
4
4
|
}
|
|
5
|
-
export declare function TableRow<T extends Record<string, unknown>>({ row, rowIndex
|
|
5
|
+
export declare function TableRow<T extends Record<string, unknown>>({ row, rowIndex }: TableRowProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export declare namespace TableRow {
|
|
7
7
|
var displayName: string;
|
|
8
8
|
}
|
|
@@ -6,6 +6,6 @@ export { Tab } from './Tab';
|
|
|
6
6
|
export type { TabProps } from './Tab';
|
|
7
7
|
export { TabPanel } from './TabPanel';
|
|
8
8
|
export type { TabPanelProps } from './TabPanel';
|
|
9
|
-
export { TabsContext, useTabsContext, useTabsContextStrict
|
|
9
|
+
export { TabsContext, useTabsContext, useTabsContextStrict } from './TabsContext';
|
|
10
10
|
export type { TabsContextValue, TabsVariant } from './TabsContext';
|
|
11
11
|
export { default } from './Tabs';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { KanbanBoard, type KanbanBoardProps, type KanbanCardData, type KanbanColumnData } from './KanbanBoard';
|
|
1
|
+
export { KanbanBoard, type KanbanBoardProps, type KanbanCardData, type KanbanColumnData, } from './KanbanBoard';
|
|
2
2
|
export { KanbanColumn, type KanbanColumnProps } from './KanbanColumn';
|
|
3
3
|
export { KanbanCard, type KanbanCardProps, type KanbanCardRenderProps } from './KanbanCard';
|
|
4
4
|
export { KanbanBoardContext, useKanbanBoardContext, useKanbanBoardContextOptional, type KanbanBoardContextValue, type CardMoveEvent, } from './KanbanBoardContext';
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
33
|
export type { FilterType, FilterValue, FilterValueWithMeta, FilterOption, FilterOptionsLoader, FilterOptionsLoaderParams, FilterOptionsLoadResult, FilterDependency, FilterDependencyAction, FilterDefinition, FilterGroup, FilterState, FilterActions, FilterContextValue, FilterOptionsState, NumberRangeValue, DateRangeValue, SelectFilterConfig, MultiSelectFilterConfig, MultiSelectDisplayMode, TextFilterConfig, NumberFilterConfig, NumberRangeFilterConfig, NumberRangeDisplayMode, DateFilterConfig, DateRangeFilterConfig, DateRangePreset, RatingFilterConfig, ListSelectFilterConfig, FilterTypeConfig, FilterProviderProps, FilterFieldProps, FilterSectionProps, ActiveFiltersProps, FilterLayoutProps, FilterSidebarProps, FilterBarProps, FilterPopoverProps, FilterModalProps, FilterAccordionProps, } from './types';
|
|
34
|
-
export { FilterContext, useFilterContext, useFilterContextStrict
|
|
34
|
+
export { FilterContext, useFilterContext, useFilterContextStrict } from './FilterContext';
|
|
35
35
|
export { useFilter, useFilterDependencies, useFilterOptions, getDependencyValues, clearOptionsCache, } from './hooks';
|
|
36
36
|
export type { UseFilterOptions, UseFilterReturn, UseFilterDependenciesOptions, UseFilterDependenciesReturn, UseFilterOptionsOptions, UseFilterOptionsReturn, } from './hooks';
|
|
37
37
|
export { FilterProvider } from './core/FilterProvider';
|
|
@@ -40,4 +40,4 @@ export { FilterSection } from './core/FilterSection';
|
|
|
40
40
|
export { ActiveFilters } from './core/ActiveFilters';
|
|
41
41
|
export { SelectFilter, MultiSelectFilter, CheckboxFilter, ToggleFilter, TextFilter, DateFilter, DateRangeFilter, NumberFilter, NumberRangeFilter, RatingFilter, ListSelectFilter, } from './fields';
|
|
42
42
|
export type { SelectFilterProps, MultiSelectFilterProps, CheckboxFilterProps, ToggleFilterProps, TextFilterProps, DateFilterProps, DateRangeFilterProps, NumberFilterProps, NumberRangeFilterProps, RatingFilterProps, ListSelectFilterProps, } from './fields';
|
|
43
|
-
export { FilterSidebar, FilterBar, FilterPopover, FilterModal, FilterAccordion
|
|
43
|
+
export { FilterSidebar, FilterBar, FilterPopover, FilterModal, FilterAccordion } from './layouts';
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export { Input } from './Input';
|
|
2
|
-
export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType } from './Input';
|
|
2
|
+
export type { InputProps, ValidationResult, FormatMask, ValidationTiming, InputType, } from './Input';
|
|
3
3
|
export { default } from './Input';
|
|
@@ -34,7 +34,7 @@ export interface AlertProviderProps {
|
|
|
34
34
|
* };
|
|
35
35
|
* ```
|
|
36
36
|
*/
|
|
37
|
-
export declare function AlertProvider({ children, defaultAlertProps
|
|
37
|
+
export declare function AlertProvider({ children, defaultAlertProps }: AlertProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
38
38
|
export declare namespace AlertProvider {
|
|
39
39
|
var displayName: string;
|
|
40
40
|
}
|
|
@@ -5,7 +5,7 @@ export { Alert } from './Alert';
|
|
|
5
5
|
export type { AlertProps } from './Alert';
|
|
6
6
|
export { AlertProvider } from './AlertProvider';
|
|
7
7
|
export type { AlertProviderProps } from './AlertProvider';
|
|
8
|
-
export { AlertContext, useAlertContext, useAlertContextStrict
|
|
9
|
-
export type { AlertContextValue, AlertQueueItem
|
|
10
|
-
export { ALERT_PRESETS, getAlertPreset
|
|
11
|
-
export type { AlertVariant, AlertPreset
|
|
8
|
+
export { AlertContext, useAlertContext, useAlertContextStrict } from './AlertContext';
|
|
9
|
+
export type { AlertContextValue, AlertQueueItem } from './AlertContext';
|
|
10
|
+
export { ALERT_PRESETS, getAlertPreset } from './AlertPresets';
|
|
11
|
+
export type { AlertVariant, AlertPreset } from './AlertPresets';
|
|
@@ -24,7 +24,7 @@ export interface DialogProviderProps {
|
|
|
24
24
|
* </DialogProvider>
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
|
-
export declare function DialogProvider({ children, defaultDialogProps
|
|
27
|
+
export declare function DialogProvider({ children, defaultDialogProps }: DialogProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export declare namespace DialogProvider {
|
|
29
29
|
var displayName: string;
|
|
30
30
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Dialog component exports
|
|
3
3
|
*/
|
|
4
|
-
export { Dialog, DialogHeader, DialogBody, DialogFooter
|
|
4
|
+
export { Dialog, DialogHeader, DialogBody, DialogFooter } from './Dialog';
|
|
5
5
|
export type { DialogProps, DialogSize, DialogHeaderProps, DialogBodyProps, DialogFooterProps, } from './Dialog';
|
|
6
6
|
export { DialogProvider } from './DialogProvider';
|
|
7
7
|
export type { DialogProviderProps } from './DialogProvider';
|
|
8
|
-
export { DialogContext, useDialogContext, useDialogContextStrict
|
|
9
|
-
export type { DialogContextValue, DialogStackItem
|
|
8
|
+
export { DialogContext, useDialogContext, useDialogContextStrict } from './DialogContext';
|
|
9
|
+
export type { DialogContextValue, DialogStackItem } from './DialogContext';
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
* Toast component exports
|
|
3
3
|
*/
|
|
4
4
|
export { Toast } from './Toast';
|
|
5
|
-
export type { ToastProps, ToastPosition, ToastVariant, ToastAnimationState
|
|
5
|
+
export type { ToastProps, ToastPosition, ToastVariant, ToastAnimationState } from './Toast';
|
|
6
6
|
export { ToastContainer } from './ToastContainer';
|
|
7
7
|
export type { ToastContainerProps } from './ToastContainer';
|
|
8
8
|
export { ToastProvider } from './ToastProvider';
|
|
9
9
|
export type { ToastProviderProps } from './ToastProvider';
|
|
10
|
-
export { ToastContext, useToastContext, useToastContextStrict
|
|
10
|
+
export { ToastContext, useToastContext, useToastContextStrict } from './ToastContext';
|
|
11
11
|
export type { ToastContextValue, ToastData, ToastInstance, PromiseToastOptions, } from './ToastContext';
|
package/lib/hooks/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ export { useClickOutside } from './useClickOutside';
|
|
|
5
5
|
export { useEscapeKey } from './useEscapeKey';
|
|
6
6
|
export { useFocusTrap } from './useFocusTrap';
|
|
7
7
|
export { usePopoverPosition } from './usePopoverPosition';
|
|
8
|
-
export type { UsePopoverPositionOptions, UsePopoverPositionReturn
|
|
8
|
+
export type { UsePopoverPositionOptions, UsePopoverPositionReturn } from './usePopoverPosition';
|
|
9
9
|
export { useHover } from './useHover';
|
|
10
10
|
export type { UseHoverOptions, UseHoverReturn, HoverProps } from './useHover';
|
|
11
11
|
export { useDebounce } from './useDebounce';
|
|
@@ -19,3 +19,18 @@ export { useAsyncToast } from './useAsyncToast';
|
|
|
19
19
|
export type { UseAsyncToastReturn, AsyncToastConfig } from './useAsyncToast';
|
|
20
20
|
export { useResizeObserver } from './useResizeObserver';
|
|
21
21
|
export type { UseResizeObserverOptions, UseResizeObserverReturn } from './useResizeObserver';
|
|
22
|
+
export { useUrlState, urlStateSerializers } from './useUrlState';
|
|
23
|
+
export type { UseUrlStateOptions, UseUrlStateReturn, UrlStateSerializer } from './useUrlState';
|
|
24
|
+
export { useIntersectionObserver } from './useIntersectionObserver';
|
|
25
|
+
export type { UseIntersectionObserverOptions, UseIntersectionObserverReturn, } from './useIntersectionObserver';
|
|
26
|
+
export { useLocalStorage } from './useLocalStorage';
|
|
27
|
+
export type { UseLocalStorageOptions, UseLocalStorageReturn, LocalStorageSerializer, } from './useLocalStorage';
|
|
28
|
+
export { useMediaQuery } from './useMediaQuery';
|
|
29
|
+
export type { UseMediaQueryOptions, UseMediaQueryReturn } from './useMediaQuery';
|
|
30
|
+
export { usePrevious } from './usePrevious';
|
|
31
|
+
export { useClipboard } from './useClipboard';
|
|
32
|
+
export type { UseClipboardOptions, UseClipboardReturn } from './useClipboard';
|
|
33
|
+
export { useTimeout } from './useTimeout';
|
|
34
|
+
export type { UseTimeoutOptions, UseTimeoutReturn } from './useTimeout';
|
|
35
|
+
export { useInterval } from './useInterval';
|
|
36
|
+
export type { UseIntervalOptions, UseIntervalReturn } from './useInterval';
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for clipboard hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseClipboardOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Duration to show success state (ms)
|
|
7
|
+
* @default 2000
|
|
8
|
+
*/
|
|
9
|
+
successDuration?: number;
|
|
10
|
+
/**
|
|
11
|
+
* Callback on successful copy
|
|
12
|
+
*/
|
|
13
|
+
onSuccess?: (text: string) => void;
|
|
14
|
+
/**
|
|
15
|
+
* Callback on copy error
|
|
16
|
+
*/
|
|
17
|
+
onError?: (error: Error) => void;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Return type for clipboard hook
|
|
21
|
+
*/
|
|
22
|
+
export interface UseClipboardReturn {
|
|
23
|
+
/**
|
|
24
|
+
* Copy text to clipboard
|
|
25
|
+
*/
|
|
26
|
+
copy: (text: string) => Promise<boolean>;
|
|
27
|
+
/**
|
|
28
|
+
* Whether copy was recently successful
|
|
29
|
+
*/
|
|
30
|
+
copied: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Error if copy failed
|
|
33
|
+
*/
|
|
34
|
+
error: Error | null;
|
|
35
|
+
/**
|
|
36
|
+
* Reset copied state
|
|
37
|
+
*/
|
|
38
|
+
reset: () => void;
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Hook for copying text to clipboard with feedback
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* function CopyButton({ text }: { text: string }) {
|
|
46
|
+
* const { copy, copied } = useClipboard();
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <Button onClick={() => copy(text)}>
|
|
50
|
+
* {copied ? 'Copied!' : 'Copy'}
|
|
51
|
+
* </Button>
|
|
52
|
+
* );
|
|
53
|
+
* }
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
58
|
+
* // With callbacks
|
|
59
|
+
* const { copy, copied, error } = useClipboard({
|
|
60
|
+
* successDuration: 3000,
|
|
61
|
+
* onSuccess: () => toast.success('Copied!'),
|
|
62
|
+
* onError: (err) => toast.error(err.message),
|
|
63
|
+
* });
|
|
64
|
+
* ```
|
|
65
|
+
*/
|
|
66
|
+
export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
|
|
67
|
+
export default useClipboard;
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for intersection observer hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseIntersectionObserverOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Element that is used as the viewport for checking visibility
|
|
7
|
+
* @default null (browser viewport)
|
|
8
|
+
*/
|
|
9
|
+
root?: Element | null;
|
|
10
|
+
/**
|
|
11
|
+
* Margin around the root element
|
|
12
|
+
* @default '0px'
|
|
13
|
+
*/
|
|
14
|
+
rootMargin?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Threshold(s) at which to trigger callback (0-1)
|
|
17
|
+
* @default 0
|
|
18
|
+
*/
|
|
19
|
+
threshold?: number | number[];
|
|
20
|
+
/**
|
|
21
|
+
* Callback when intersection changes
|
|
22
|
+
*/
|
|
23
|
+
onChange?: (entry: IntersectionObserverEntry) => void;
|
|
24
|
+
/**
|
|
25
|
+
* Whether to disconnect after first intersection
|
|
26
|
+
* Useful for lazy loading
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
triggerOnce?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the observer is disabled
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Initial value for isIntersecting before observation starts
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
initialIsIntersecting?: boolean;
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Return type for intersection observer hook
|
|
43
|
+
*/
|
|
44
|
+
export interface UseIntersectionObserverReturn {
|
|
45
|
+
/**
|
|
46
|
+
* Ref callback to attach to observed element
|
|
47
|
+
*/
|
|
48
|
+
ref: (node: Element | null) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Whether element is currently intersecting
|
|
51
|
+
*/
|
|
52
|
+
isIntersecting: boolean;
|
|
53
|
+
/**
|
|
54
|
+
* The full IntersectionObserverEntry (null before first observation)
|
|
55
|
+
*/
|
|
56
|
+
entry: IntersectionObserverEntry | null;
|
|
57
|
+
/**
|
|
58
|
+
* The observed element
|
|
59
|
+
*/
|
|
60
|
+
element: Element | null;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Hook that observes element intersection using IntersectionObserver
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```tsx
|
|
67
|
+
* // Basic visibility detection
|
|
68
|
+
* const { ref, isIntersecting } = useIntersectionObserver();
|
|
69
|
+
*
|
|
70
|
+
* return (
|
|
71
|
+
* <div ref={ref}>
|
|
72
|
+
* {isIntersecting ? 'Visible!' : 'Not visible'}
|
|
73
|
+
* </div>
|
|
74
|
+
* );
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* ```tsx
|
|
79
|
+
* // Lazy loading with triggerOnce
|
|
80
|
+
* const { ref, isIntersecting } = useIntersectionObserver({
|
|
81
|
+
* triggerOnce: true,
|
|
82
|
+
* rootMargin: '100px',
|
|
83
|
+
* });
|
|
84
|
+
*
|
|
85
|
+
* return (
|
|
86
|
+
* <div ref={ref}>
|
|
87
|
+
* {isIntersecting ? <img src={src} /> : <Skeleton />}
|
|
88
|
+
* </div>
|
|
89
|
+
* );
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```tsx
|
|
94
|
+
* // Multiple thresholds for scroll animations
|
|
95
|
+
* const { ref, entry } = useIntersectionObserver({
|
|
96
|
+
* threshold: [0, 0.25, 0.5, 0.75, 1],
|
|
97
|
+
* });
|
|
98
|
+
*
|
|
99
|
+
* const opacity = entry?.intersectionRatio ?? 0;
|
|
100
|
+
* ```
|
|
101
|
+
*/
|
|
102
|
+
export declare function useIntersectionObserver(options?: UseIntersectionObserverOptions): UseIntersectionObserverReturn;
|
|
103
|
+
export default useIntersectionObserver;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for interval hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseIntervalOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Callback to execute on each interval
|
|
7
|
+
*/
|
|
8
|
+
callback: () => void;
|
|
9
|
+
/**
|
|
10
|
+
* Interval in milliseconds (null to pause/disable)
|
|
11
|
+
*/
|
|
12
|
+
delay: number | null;
|
|
13
|
+
/**
|
|
14
|
+
* Whether to run callback immediately on start
|
|
15
|
+
* @default false
|
|
16
|
+
*/
|
|
17
|
+
immediate?: boolean;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Return type for interval hook
|
|
21
|
+
*/
|
|
22
|
+
export interface UseIntervalReturn {
|
|
23
|
+
/**
|
|
24
|
+
* Reset the interval (restart timing)
|
|
25
|
+
*/
|
|
26
|
+
reset: () => void;
|
|
27
|
+
/**
|
|
28
|
+
* Clear the interval (stop)
|
|
29
|
+
*/
|
|
30
|
+
clear: () => void;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Declarative interval hook with cleanup
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* ```tsx
|
|
37
|
+
* // Auto-refresh data
|
|
38
|
+
* function Dashboard() {
|
|
39
|
+
* const [data, setData] = useState(null);
|
|
40
|
+
*
|
|
41
|
+
* useInterval({
|
|
42
|
+
* callback: async () => {
|
|
43
|
+
* const fresh = await fetchData();
|
|
44
|
+
* setData(fresh);
|
|
45
|
+
* },
|
|
46
|
+
* delay: 30000, // Every 30 seconds
|
|
47
|
+
* immediate: true, // Fetch immediately on mount
|
|
48
|
+
* });
|
|
49
|
+
*
|
|
50
|
+
* return <DataDisplay data={data} />;
|
|
51
|
+
* }
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* // Countdown timer
|
|
57
|
+
* function Countdown({ seconds }: { seconds: number }) {
|
|
58
|
+
* const [remaining, setRemaining] = useState(seconds);
|
|
59
|
+
*
|
|
60
|
+
* useInterval({
|
|
61
|
+
* callback: () => setRemaining(r => r - 1),
|
|
62
|
+
* delay: remaining > 0 ? 1000 : null, // Stop at 0
|
|
63
|
+
* });
|
|
64
|
+
*
|
|
65
|
+
* return <span>{remaining}s</span>;
|
|
66
|
+
* }
|
|
67
|
+
* ```
|
|
68
|
+
*
|
|
69
|
+
* @example
|
|
70
|
+
* ```tsx
|
|
71
|
+
* // Pausable animation
|
|
72
|
+
* const [isPaused, setIsPaused] = useState(false);
|
|
73
|
+
* const [frame, setFrame] = useState(0);
|
|
74
|
+
*
|
|
75
|
+
* const { reset } = useInterval({
|
|
76
|
+
* callback: () => setFrame(f => f + 1),
|
|
77
|
+
* delay: isPaused ? null : 16, // ~60fps when not paused
|
|
78
|
+
* });
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
81
|
+
export declare function useInterval(options: UseIntervalOptions): UseIntervalReturn;
|
|
82
|
+
export default useInterval;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Serializer for localStorage values
|
|
3
|
+
*/
|
|
4
|
+
export interface LocalStorageSerializer<T> {
|
|
5
|
+
/**
|
|
6
|
+
* Serialize value to string
|
|
7
|
+
*/
|
|
8
|
+
serialize: (value: T) => string;
|
|
9
|
+
/**
|
|
10
|
+
* Deserialize string to value
|
|
11
|
+
*/
|
|
12
|
+
deserialize: (value: string) => T;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Options for localStorage hook
|
|
16
|
+
*/
|
|
17
|
+
export interface UseLocalStorageOptions<T> {
|
|
18
|
+
/**
|
|
19
|
+
* Custom serializer/deserializer
|
|
20
|
+
* @default JSON.stringify/parse
|
|
21
|
+
*/
|
|
22
|
+
serializer?: LocalStorageSerializer<T>;
|
|
23
|
+
/**
|
|
24
|
+
* Sync value across browser tabs
|
|
25
|
+
* @default true
|
|
26
|
+
*/
|
|
27
|
+
syncTabs?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Return type for localStorage hook
|
|
31
|
+
*/
|
|
32
|
+
export type UseLocalStorageReturn<T> = [
|
|
33
|
+
/** Current value */
|
|
34
|
+
T,
|
|
35
|
+
/** Setter function (like useState) */
|
|
36
|
+
(value: T | ((prev: T) => T)) => void,
|
|
37
|
+
/** Remove from localStorage */
|
|
38
|
+
() => void
|
|
39
|
+
];
|
|
40
|
+
/**
|
|
41
|
+
* Hook that persists state to localStorage with cross-tab synchronization
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Basic usage
|
|
46
|
+
* const [theme, setTheme] = useLocalStorage('theme', 'light');
|
|
47
|
+
*
|
|
48
|
+
* // With object
|
|
49
|
+
* const [user, setUser, clearUser] = useLocalStorage<User | null>('user', null);
|
|
50
|
+
*
|
|
51
|
+
* // Disable cross-tab sync
|
|
52
|
+
* const [draft, setDraft] = useLocalStorage('draft', '', { syncTabs: false });
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
55
|
+
export declare function useLocalStorage<T>(key: string, defaultValue: T, options?: UseLocalStorageOptions<T>): UseLocalStorageReturn<T>;
|
|
56
|
+
export default useLocalStorage;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for media query hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseMediaQueryOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Default value for SSR or when media query can't be evaluated
|
|
7
|
+
* @default false
|
|
8
|
+
*/
|
|
9
|
+
defaultValue?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Callback when media query match changes
|
|
12
|
+
*/
|
|
13
|
+
onChange?: (matches: boolean) => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Return type for media query hook
|
|
17
|
+
*/
|
|
18
|
+
export interface UseMediaQueryReturn {
|
|
19
|
+
/**
|
|
20
|
+
* Whether the media query currently matches
|
|
21
|
+
*/
|
|
22
|
+
matches: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Hook that reacts to CSS media query changes
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* // Responsive breakpoints
|
|
30
|
+
* const { matches: isMobile } = useMediaQuery('(max-width: 768px)');
|
|
31
|
+
* const { matches: isTablet } = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
|
|
32
|
+
* const { matches: isDesktop } = useMediaQuery('(min-width: 1025px)');
|
|
33
|
+
*
|
|
34
|
+
* // User preferences
|
|
35
|
+
* const { matches: prefersDark } = useMediaQuery('(prefers-color-scheme: dark)');
|
|
36
|
+
* const { matches: prefersReducedMotion } = useMediaQuery('(prefers-reduced-motion: reduce)');
|
|
37
|
+
*
|
|
38
|
+
* // With callback
|
|
39
|
+
* const { matches } = useMediaQuery('(max-width: 768px)', {
|
|
40
|
+
* onChange: (isMobile) => console.log('Mobile:', isMobile),
|
|
41
|
+
* });
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): UseMediaQueryReturn;
|
|
45
|
+
export default useMediaQuery;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { usePopoverPosition } from './usePopoverPosition';
|
|
2
|
-
export type { UsePopoverPositionOptions, UsePopoverPositionReturn
|
|
2
|
+
export type { UsePopoverPositionOptions, UsePopoverPositionReturn } from './usePopoverPosition';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { usePrevious, default } from './usePrevious';
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Hook that returns the previous value of a state or prop
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* ```tsx
|
|
6
|
+
* function Counter({ count }: { count: number }) {
|
|
7
|
+
* const prevCount = usePrevious(count);
|
|
8
|
+
*
|
|
9
|
+
* return (
|
|
10
|
+
* <div>
|
|
11
|
+
* Current: {count}, Previous: {prevCount ?? 'N/A'}
|
|
12
|
+
* {prevCount !== undefined && count > prevCount && ' (increased)'}
|
|
13
|
+
* </div>
|
|
14
|
+
* );
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```tsx
|
|
20
|
+
* function UserProfile({ userId }: { userId: string }) {
|
|
21
|
+
* const prevUserId = usePrevious(userId);
|
|
22
|
+
*
|
|
23
|
+
* useEffect(() => {
|
|
24
|
+
* if (prevUserId && prevUserId !== userId) {
|
|
25
|
+
* // User changed, reset form or fetch new data
|
|
26
|
+
* resetForm();
|
|
27
|
+
* }
|
|
28
|
+
* }, [userId, prevUserId]);
|
|
29
|
+
*
|
|
30
|
+
* return <Profile userId={userId} />;
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function usePrevious<T>(value: T): T | undefined;
|
|
35
|
+
export default usePrevious;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for timeout hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseTimeoutOptions {
|
|
5
|
+
/**
|
|
6
|
+
* Callback to execute after delay
|
|
7
|
+
*/
|
|
8
|
+
callback: () => void;
|
|
9
|
+
/**
|
|
10
|
+
* Delay in milliseconds (null to pause/disable)
|
|
11
|
+
*/
|
|
12
|
+
delay: number | null;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Return type for timeout hook
|
|
16
|
+
*/
|
|
17
|
+
export interface UseTimeoutReturn {
|
|
18
|
+
/**
|
|
19
|
+
* Reset the timeout (restart from beginning)
|
|
20
|
+
*/
|
|
21
|
+
reset: () => void;
|
|
22
|
+
/**
|
|
23
|
+
* Clear the timeout (stop without executing)
|
|
24
|
+
*/
|
|
25
|
+
clear: () => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Declarative timeout hook with cleanup
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```tsx
|
|
32
|
+
* // Auto-hide notification
|
|
33
|
+
* function Notification({ message, onClose }: Props) {
|
|
34
|
+
* useTimeout({
|
|
35
|
+
* callback: onClose,
|
|
36
|
+
* delay: 5000,
|
|
37
|
+
* });
|
|
38
|
+
*
|
|
39
|
+
* return <div>{message}</div>;
|
|
40
|
+
* }
|
|
41
|
+
* ```
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Conditional timeout
|
|
46
|
+
* const [showHint, setShowHint] = useState(false);
|
|
47
|
+
*
|
|
48
|
+
* useTimeout({
|
|
49
|
+
* callback: () => setShowHint(true),
|
|
50
|
+
* delay: isNewUser ? 3000 : null, // null disables
|
|
51
|
+
* });
|
|
52
|
+
* ```
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* // With controls
|
|
57
|
+
* const { reset, clear } = useTimeout({
|
|
58
|
+
* callback: () => setIdle(true),
|
|
59
|
+
* delay: 30000,
|
|
60
|
+
* });
|
|
61
|
+
*
|
|
62
|
+
* // Reset on user activity
|
|
63
|
+
* useEffect(() => {
|
|
64
|
+
* window.addEventListener('mousemove', reset);
|
|
65
|
+
* return () => window.removeEventListener('mousemove', reset);
|
|
66
|
+
* }, [reset]);
|
|
67
|
+
* ```
|
|
68
|
+
*/
|
|
69
|
+
export declare function useTimeout(options: UseTimeoutOptions): UseTimeoutReturn;
|
|
70
|
+
export default useTimeout;
|