@lax-wp/design-system 0.3.88 → 0.3.89
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/dist/components/data-display/context-menu/ContextMenu.d.ts +42 -0
- package/dist/components/data-display/datatype-icon/DataTypeIcon.d.ts +104 -0
- package/dist/components/data-display/empty-state/NoDataFound.d.ts +27 -0
- package/dist/components/data-display/empty-state/PageNotFound.d.ts +38 -0
- package/dist/components/data-display/empty-state/UserNotFound.d.ts +28 -0
- package/dist/components/data-display/empty-state/index.d.ts +6 -0
- package/dist/components/data-display/json-grid-viewer/AddKeyModal.d.ts +7 -0
- package/dist/components/data-display/json-grid-viewer/JsonGridBulkFloatingBar.d.ts +2 -0
- package/dist/components/data-display/json-grid-viewer/JsonGridCore.d.ts +3 -0
- package/dist/components/data-display/json-grid-viewer/JsonGridViewer.d.ts +47 -0
- package/dist/components/data-display/json-grid-viewer/JsonGridViewerContext.d.ts +4 -0
- package/dist/components/data-display/json-grid-viewer/JsonValueDisplay.d.ts +8 -0
- package/dist/components/data-display/json-grid-viewer/NestedJsonGrid.d.ts +7 -0
- package/dist/components/data-display/json-grid-viewer/hooks.d.ts +6 -0
- package/dist/components/data-display/json-grid-viewer/index.d.ts +12 -0
- package/dist/components/data-display/json-grid-viewer/types.d.ts +64 -0
- package/dist/components/data-display/json-grid-viewer/utils.d.ts +4 -0
- package/dist/components/data-display/lottie-animation/LottieAnimation.d.ts +34 -0
- package/dist/components/data-display/permission-wrapper/PermissionWrapper.d.ts +28 -0
- package/dist/components/forms/file-upload-dragger/FileUploadDragger.d.ts +85 -0
- package/dist/components/forms/file-upload-dragger/icons.d.ts +12 -0
- package/dist/components/user-avatar/NameInitialLogo.d.ts +15 -0
- package/dist/components/user-avatar/UserProfilePic.d.ts +15 -0
- package/dist/components/user-avatar/index.d.ts +4 -0
- package/dist/index.d.ts +20 -0
- package/dist/index.es.js +35626 -26124
- package/dist/index.umd.js +117 -109
- package/package.json +2 -1
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface ContextMenuProps {
|
|
3
|
+
/** Whether the context menu is visible */
|
|
4
|
+
visible: boolean;
|
|
5
|
+
/** X position of the menu */
|
|
6
|
+
xPos: number;
|
|
7
|
+
/** Y position of the menu */
|
|
8
|
+
yPos: number;
|
|
9
|
+
/** Menu content */
|
|
10
|
+
children: ReactNode;
|
|
11
|
+
/** Custom CSS class name */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Container element ID for the portal (defaults to body) */
|
|
14
|
+
containerId?: string;
|
|
15
|
+
/** Test ID for testing */
|
|
16
|
+
'data-testid'?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* ContextMenu component creates a portal-based context menu at specified coordinates
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 });
|
|
24
|
+
*
|
|
25
|
+
* <div onContextMenu={(e) => {
|
|
26
|
+
* e.preventDefault();
|
|
27
|
+
* setContextMenu({ visible: true, x: e.clientX, y: e.clientY });
|
|
28
|
+
* }}>
|
|
29
|
+
* Right click me
|
|
30
|
+
* </div>
|
|
31
|
+
*
|
|
32
|
+
* <ContextMenu
|
|
33
|
+
* visible={contextMenu.visible}
|
|
34
|
+
* xPos={contextMenu.x}
|
|
35
|
+
* yPos={contextMenu.y}
|
|
36
|
+
* >
|
|
37
|
+
* <MenuItem onClick={() => console.log('clicked')}>Action</MenuItem>
|
|
38
|
+
* </ContextMenu>
|
|
39
|
+
* ```
|
|
40
|
+
*/
|
|
41
|
+
export declare const ContextMenu: FC<ContextMenuProps>;
|
|
42
|
+
export default ContextMenu;
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Available data types for the icon
|
|
4
|
+
*/
|
|
5
|
+
export declare const APP_DATA_TYPES: {
|
|
6
|
+
readonly BOOLEAN: "boolean";
|
|
7
|
+
readonly CHOICE: "choice";
|
|
8
|
+
readonly CURRENCY: "currency";
|
|
9
|
+
readonly DATE: "date";
|
|
10
|
+
readonly DATETIME: "datetime";
|
|
11
|
+
readonly DYNAMIC: "dynamic";
|
|
12
|
+
readonly EMAIL: "email";
|
|
13
|
+
readonly MASTER_DATA: "master data";
|
|
14
|
+
readonly NUMBER: "number";
|
|
15
|
+
readonly PERCENTAGE: "percentage";
|
|
16
|
+
readonly STRING: "string";
|
|
17
|
+
readonly TAG: "tag";
|
|
18
|
+
readonly TEXT: "text";
|
|
19
|
+
readonly URL: "url";
|
|
20
|
+
};
|
|
21
|
+
/**
|
|
22
|
+
* Options for data type select fields
|
|
23
|
+
*/
|
|
24
|
+
export declare const APP_DATA_TYPES_OPTIONS: ({
|
|
25
|
+
label: string;
|
|
26
|
+
value: "boolean";
|
|
27
|
+
} | {
|
|
28
|
+
label: string;
|
|
29
|
+
value: "choice";
|
|
30
|
+
} | {
|
|
31
|
+
label: string;
|
|
32
|
+
value: "currency";
|
|
33
|
+
} | {
|
|
34
|
+
label: string;
|
|
35
|
+
value: "date";
|
|
36
|
+
} | {
|
|
37
|
+
label: string;
|
|
38
|
+
value: "datetime";
|
|
39
|
+
} | {
|
|
40
|
+
label: string;
|
|
41
|
+
value: "dynamic";
|
|
42
|
+
} | {
|
|
43
|
+
label: string;
|
|
44
|
+
value: "email";
|
|
45
|
+
} | {
|
|
46
|
+
label: string;
|
|
47
|
+
value: "master data";
|
|
48
|
+
} | {
|
|
49
|
+
label: string;
|
|
50
|
+
value: "number";
|
|
51
|
+
} | {
|
|
52
|
+
label: string;
|
|
53
|
+
value: "percentage";
|
|
54
|
+
} | {
|
|
55
|
+
label: string;
|
|
56
|
+
value: "string";
|
|
57
|
+
} | {
|
|
58
|
+
label: string;
|
|
59
|
+
value: "tag";
|
|
60
|
+
} | {
|
|
61
|
+
label: string;
|
|
62
|
+
value: "text";
|
|
63
|
+
} | {
|
|
64
|
+
label: string;
|
|
65
|
+
value: "url";
|
|
66
|
+
})[];
|
|
67
|
+
/**
|
|
68
|
+
* Background colors for light mode
|
|
69
|
+
*/
|
|
70
|
+
export declare const BG_COLORS: Record<string, string>;
|
|
71
|
+
/**
|
|
72
|
+
* Background colors for light mode on hover
|
|
73
|
+
*/
|
|
74
|
+
export declare const BG_COLORS_HOVER: Record<string, string>;
|
|
75
|
+
/**
|
|
76
|
+
* Background colors for dark mode
|
|
77
|
+
*/
|
|
78
|
+
export declare const BG_COLORS_DARK: Record<string, string>;
|
|
79
|
+
/**
|
|
80
|
+
* Background colors for dark mode on hover
|
|
81
|
+
*/
|
|
82
|
+
export declare const BG_COLORS_DARK_HOVER: Record<string, string>;
|
|
83
|
+
export interface DataTypeIconProps {
|
|
84
|
+
/** The data type to display */
|
|
85
|
+
dataType?: string;
|
|
86
|
+
/** Custom tooltip content */
|
|
87
|
+
tooltip?: ReactNode;
|
|
88
|
+
/** Whether dark mode is enabled (passed as prop instead of using context) */
|
|
89
|
+
isDarkMode?: boolean;
|
|
90
|
+
/** Additional CSS class name */
|
|
91
|
+
className?: string;
|
|
92
|
+
/** Test ID for testing */
|
|
93
|
+
'data-testid'?: string;
|
|
94
|
+
}
|
|
95
|
+
/**
|
|
96
|
+
* DataTypeIcon displays an icon representing a data type with appropriate styling
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```tsx
|
|
100
|
+
* <DataTypeIcon dataType="text" isDarkMode={false} />
|
|
101
|
+
* <DataTypeIcon dataType="number" tooltip="Custom tooltip" isDarkMode={true} />
|
|
102
|
+
* ```
|
|
103
|
+
*/
|
|
104
|
+
export declare const DataTypeIcon: FC<DataTypeIconProps>;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface NoDataFoundProps {
|
|
3
|
+
/** Main text to display */
|
|
4
|
+
text: string;
|
|
5
|
+
/** Additional descriptive text */
|
|
6
|
+
additionaltext?: string;
|
|
7
|
+
/** Children elements (e.g., action buttons) */
|
|
8
|
+
children?: ReactNode;
|
|
9
|
+
/** Custom icon to display instead of default */
|
|
10
|
+
icon?: ReactNode;
|
|
11
|
+
/** Custom CSS class name */
|
|
12
|
+
className?: string;
|
|
13
|
+
/** Test ID for testing */
|
|
14
|
+
'data-testid'?: string;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* NoDataFound component displays an empty state message
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```tsx
|
|
21
|
+
* <NoDataFound
|
|
22
|
+
* text="No results found"
|
|
23
|
+
* additionaltext="Try adjusting your search or filters"
|
|
24
|
+
* />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export declare const NoDataFound: FC<NoDataFoundProps>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface PageNotFoundProps {
|
|
3
|
+
/** Custom icon to display */
|
|
4
|
+
icon?: ReactNode;
|
|
5
|
+
/** Link component for the back to home button (e.g., from react-router-dom) */
|
|
6
|
+
linkComponent?: FC<{
|
|
7
|
+
to: string;
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
}>;
|
|
10
|
+
/** Path to navigate on back to home click */
|
|
11
|
+
homePath?: string;
|
|
12
|
+
/** Custom back to home text */
|
|
13
|
+
backToHomeText?: string;
|
|
14
|
+
/** Custom 404 title */
|
|
15
|
+
title?: string;
|
|
16
|
+
/** Custom subtitle */
|
|
17
|
+
subtitle?: string;
|
|
18
|
+
/** Custom description */
|
|
19
|
+
description?: string;
|
|
20
|
+
/** Custom CSS class name */
|
|
21
|
+
className?: string;
|
|
22
|
+
/** Test ID for testing */
|
|
23
|
+
'data-testid'?: string;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* PageNotFound component displays a 404 error page
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* ```tsx
|
|
30
|
+
* import { Link } from 'react-router-dom';
|
|
31
|
+
*
|
|
32
|
+
* <PageNotFound
|
|
33
|
+
* linkComponent={Link}
|
|
34
|
+
* homePath="/home"
|
|
35
|
+
* />
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
export declare const PageNotFound: FC<PageNotFoundProps>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface UserNotFoundProps {
|
|
3
|
+
/** Custom CSS class name */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** Title text */
|
|
6
|
+
title?: ReactNode;
|
|
7
|
+
/** Description text */
|
|
8
|
+
description?: ReactNode;
|
|
9
|
+
/** Warning title */
|
|
10
|
+
warningTitle?: string;
|
|
11
|
+
/** Warning description */
|
|
12
|
+
warningDescription?: string;
|
|
13
|
+
/** Custom icon */
|
|
14
|
+
icon?: ReactNode;
|
|
15
|
+
/** Custom warning icon */
|
|
16
|
+
warningIcon?: ReactNode;
|
|
17
|
+
/** Test ID for testing */
|
|
18
|
+
'data-testid'?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* UserNotFound component displays when a user account is not linked
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <UserNotFound />
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare const UserNotFound: FC<UserNotFoundProps>;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export { NoDataFound } from './NoDataFound';
|
|
2
|
+
export type { NoDataFoundProps } from './NoDataFound';
|
|
3
|
+
export { PageNotFound } from './PageNotFound';
|
|
4
|
+
export type { PageNotFoundProps } from './PageNotFound';
|
|
5
|
+
export { UserNotFound } from './UserNotFound';
|
|
6
|
+
export type { UserNotFoundProps } from './UserNotFound';
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction, FC } from 'react';
|
|
2
|
+
export interface JsonGridViewerProps {
|
|
3
|
+
/** Whether the viewer is in full screen mode */
|
|
4
|
+
isFullScreen: boolean;
|
|
5
|
+
/** Whether all nodes are expanded */
|
|
6
|
+
allExpanded: boolean;
|
|
7
|
+
/** Toggle all nodes expanded/collapsed */
|
|
8
|
+
toggleAll: () => void;
|
|
9
|
+
/** Whether edit mode is enabled */
|
|
10
|
+
isEditMode: boolean;
|
|
11
|
+
/** Whether dark mode is enabled */
|
|
12
|
+
isDarkMode: boolean;
|
|
13
|
+
/** Custom styles for the grid */
|
|
14
|
+
style: React.CSSProperties;
|
|
15
|
+
/** JSON value as a string */
|
|
16
|
+
value: string;
|
|
17
|
+
/** Callback when the JSON value changes */
|
|
18
|
+
onChange?: (v: string) => void;
|
|
19
|
+
/** Setter for add key modal open state */
|
|
20
|
+
setIsAddKeyModalOpen: Dispatch<SetStateAction<boolean>>;
|
|
21
|
+
/** Whether the add key modal is open */
|
|
22
|
+
isAddKeyModalOpen: boolean;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* JsonGridViewer component provides a visual grid editor for JSON data
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* const [value, setValue] = useState('{"key": "value"}');
|
|
30
|
+
* const [allExpanded, setAllExpanded] = useState(false);
|
|
31
|
+
* const [isAddKeyModalOpen, setIsAddKeyModalOpen] = useState(false);
|
|
32
|
+
*
|
|
33
|
+
* <JsonGridViewer
|
|
34
|
+
* isFullScreen={false}
|
|
35
|
+
* allExpanded={allExpanded}
|
|
36
|
+
* toggleAll={() => setAllExpanded(!allExpanded)}
|
|
37
|
+
* isEditMode={true}
|
|
38
|
+
* isDarkMode={false}
|
|
39
|
+
* style={{ maxHeight: '500px' }}
|
|
40
|
+
* value={value}
|
|
41
|
+
* onChange={setValue}
|
|
42
|
+
* setIsAddKeyModalOpen={setIsAddKeyModalOpen}
|
|
43
|
+
* isAddKeyModalOpen={isAddKeyModalOpen}
|
|
44
|
+
* />
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export declare const JsonGridViewer: FC<JsonGridViewerProps>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { IJsonGridViewerContext } from './types';
|
|
2
|
+
export declare const JsonGridViewerContext: import("react").Context<IJsonGridViewerContext>;
|
|
3
|
+
export declare const JsonGridViewerContextProvider: import("react").Provider<IJsonGridViewerContext>;
|
|
4
|
+
export declare const useJsonGridViewerContext: () => IJsonGridViewerContext;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { JsonArray, JsonObject, JsonValue } from './types';
|
|
2
|
+
export declare const useCheckboxSelection: (selectedPaths: string[], setSelectedPaths: (paths: string[]) => void) => {
|
|
3
|
+
handleCheckboxChange: (fullPath: string, isChecked: boolean, value: JsonValue, isExpandable: boolean) => void;
|
|
4
|
+
isPathSelected: (path: string) => boolean;
|
|
5
|
+
getAllChildPaths: (parentPath: string, sourceData: JsonObject | JsonArray) => string[];
|
|
6
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
export { JsonGridViewer } from './JsonGridViewer';
|
|
2
|
+
export type { JsonGridViewerProps } from './JsonGridViewer';
|
|
3
|
+
export { JsonGridViewerContextProvider, useJsonGridViewerContext } from './JsonGridViewerContext';
|
|
4
|
+
export { JsonGridCore } from './JsonGridCore';
|
|
5
|
+
export { NestedJsonGrid } from './NestedJsonGrid';
|
|
6
|
+
export { JsonValueDisplay } from './JsonValueDisplay';
|
|
7
|
+
export { JsonGridBulkFloatingBar } from './JsonGridBulkFloatingBar';
|
|
8
|
+
export { AddKeyModal } from './AddKeyModal';
|
|
9
|
+
export type { AddKeyModalProps } from './AddKeyModal';
|
|
10
|
+
export { useCheckboxSelection } from './hooks';
|
|
11
|
+
export * from './types';
|
|
12
|
+
export * from './utils';
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
|
|
3
|
+
export type JsonObject = {
|
|
4
|
+
[key: string]: JsonValue;
|
|
5
|
+
};
|
|
6
|
+
export type JsonArray = JsonValue[];
|
|
7
|
+
export interface IJsonGridProps {
|
|
8
|
+
onChange?: (value: string) => void;
|
|
9
|
+
isEditMode?: boolean;
|
|
10
|
+
isDarkMode?: boolean;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
}
|
|
13
|
+
export interface IJsonGridViewerContext {
|
|
14
|
+
allExpanded: boolean;
|
|
15
|
+
toggleAll: () => void;
|
|
16
|
+
isEditMode: boolean;
|
|
17
|
+
isDarkMode: boolean;
|
|
18
|
+
selectedPaths: string[];
|
|
19
|
+
setSelectedPaths: Dispatch<SetStateAction<string[]>>;
|
|
20
|
+
selectedTopLevelPaths: string[];
|
|
21
|
+
setSelectedTopLevelPaths: Dispatch<SetStateAction<string[]>>;
|
|
22
|
+
selectedPathModification: string | null;
|
|
23
|
+
setSelectedPathModification: Dispatch<SetStateAction<string | null>>;
|
|
24
|
+
selectedPathForEdit: string | null;
|
|
25
|
+
setSelectedPathForEdit: Dispatch<SetStateAction<string | null>>;
|
|
26
|
+
jsonData: JsonObject | JsonArray;
|
|
27
|
+
setJsonData: Dispatch<SetStateAction<JsonObject | JsonArray>>;
|
|
28
|
+
error: string | null;
|
|
29
|
+
setError: Dispatch<SetStateAction<string | null>>;
|
|
30
|
+
handleDelete: (paths: string[]) => void;
|
|
31
|
+
handleDuplicate: (paths: string[]) => void;
|
|
32
|
+
handleCopy: (paths: string[]) => Promise<boolean>;
|
|
33
|
+
setIsAddKeyModalOpen: Dispatch<SetStateAction<boolean>>;
|
|
34
|
+
isAddKeyModalOpen: boolean;
|
|
35
|
+
handleAddKey: (path: string, key: string, v: string | number | boolean | null | JsonArray | JsonObject | undefined) => void;
|
|
36
|
+
}
|
|
37
|
+
export declare const DataType: {
|
|
38
|
+
readonly STRING: "string";
|
|
39
|
+
readonly NUMBER: "number";
|
|
40
|
+
readonly BOOLEAN: "boolean";
|
|
41
|
+
readonly NULL: "null";
|
|
42
|
+
readonly OBJECT: "object";
|
|
43
|
+
readonly ARRAY: "array";
|
|
44
|
+
};
|
|
45
|
+
export declare const DataTypeBadgeClass: Record<string, string>;
|
|
46
|
+
export declare const DataTypeOptions: ({
|
|
47
|
+
label: string;
|
|
48
|
+
value: "string";
|
|
49
|
+
} | {
|
|
50
|
+
label: string;
|
|
51
|
+
value: "number";
|
|
52
|
+
} | {
|
|
53
|
+
label: string;
|
|
54
|
+
value: "boolean";
|
|
55
|
+
} | {
|
|
56
|
+
label: string;
|
|
57
|
+
value: "null";
|
|
58
|
+
} | {
|
|
59
|
+
label: string;
|
|
60
|
+
value: "object";
|
|
61
|
+
} | {
|
|
62
|
+
label: string;
|
|
63
|
+
value: "array";
|
|
64
|
+
})[];
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export interface LottieAnimationProps {
|
|
3
|
+
/** Lottie animation JSON data */
|
|
4
|
+
animationData: any;
|
|
5
|
+
/** Width of the animation container */
|
|
6
|
+
width?: number | string;
|
|
7
|
+
/** Height of the animation container */
|
|
8
|
+
height?: number | string;
|
|
9
|
+
/** Whether the animation should loop */
|
|
10
|
+
loop?: boolean;
|
|
11
|
+
/** Whether the animation should autoplay */
|
|
12
|
+
autoplay?: boolean;
|
|
13
|
+
/** CSS class name */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Test ID for testing */
|
|
16
|
+
'data-testid'?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* LottieAnimation component renders Lottie animations
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* import animationData from './animation.json';
|
|
24
|
+
*
|
|
25
|
+
* <LottieAnimation
|
|
26
|
+
* animationData={animationData}
|
|
27
|
+
* width={200}
|
|
28
|
+
* height={200}
|
|
29
|
+
* loop={true}
|
|
30
|
+
* autoplay={true}
|
|
31
|
+
* />
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare const LottieAnimation: FC<LottieAnimationProps>;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface PermissionWrapperProps {
|
|
3
|
+
/** Whether the user has permission to view the content */
|
|
4
|
+
hasPermission: boolean;
|
|
5
|
+
/** Content to display when user has permission */
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
/** Custom title for the no permission message */
|
|
8
|
+
title?: string;
|
|
9
|
+
/** Custom subtitle for the no permission message */
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
/** Custom icon for the no permission state */
|
|
12
|
+
icon?: ReactNode;
|
|
13
|
+
/** Custom CSS class name */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Test ID for testing */
|
|
16
|
+
'data-testid'?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* PermissionWrapper component that shows content only if user has permission
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <PermissionWrapper hasPermission={user.canViewDashboard}>
|
|
24
|
+
* <Dashboard />
|
|
25
|
+
* </PermissionWrapper>
|
|
26
|
+
* ```
|
|
27
|
+
*/
|
|
28
|
+
export declare const PermissionWrapper: FC<PermissionWrapperProps>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Context interface for global agreement draggable functionality
|
|
4
|
+
*/
|
|
5
|
+
export interface GlobalAgreementDraggableContext {
|
|
6
|
+
isOpenedAnotherFileUpload?: boolean;
|
|
7
|
+
setIsOpenedAnotherFileUpload?: (value: boolean) => void;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* File upload service interface
|
|
11
|
+
*/
|
|
12
|
+
export interface FileUploadService {
|
|
13
|
+
uploadFileToFileServer: (formData: FormData, queryParams: string) => Promise<{
|
|
14
|
+
fileUrl: string;
|
|
15
|
+
fileName: string;
|
|
16
|
+
}>;
|
|
17
|
+
deleteFileFromFileServer: (fileName: string, queryParams: string) => Promise<void>;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* System messages interface
|
|
21
|
+
*/
|
|
22
|
+
export interface SystemMessages {
|
|
23
|
+
fileSizeLimit: (size: string, unit: string) => string;
|
|
24
|
+
}
|
|
25
|
+
export type FileUploadDraggerProps = {
|
|
26
|
+
/** Callback to receive the uploaded file */
|
|
27
|
+
getFile: (file: any, fileName?: string) => any;
|
|
28
|
+
/** Description text to display */
|
|
29
|
+
description?: string;
|
|
30
|
+
/** Error message to display */
|
|
31
|
+
errorMessage?: string;
|
|
32
|
+
/** Whether the upload is disabled */
|
|
33
|
+
disabled?: boolean;
|
|
34
|
+
/** Default file to display */
|
|
35
|
+
defaultFile?: any;
|
|
36
|
+
/** Accepted file types */
|
|
37
|
+
acceptedFiles?: string;
|
|
38
|
+
/** Whether loading state is active */
|
|
39
|
+
isLoading?: boolean;
|
|
40
|
+
/** Convert file to base64 */
|
|
41
|
+
asBase64?: boolean;
|
|
42
|
+
/** Upload to file server */
|
|
43
|
+
toFileServer?: boolean;
|
|
44
|
+
/** Whether file is currently uploading */
|
|
45
|
+
fileUploading?: boolean;
|
|
46
|
+
/** Callback to set file uploading state */
|
|
47
|
+
setFileUploading?: (fileUploading: boolean) => void;
|
|
48
|
+
/** Upload to document server path */
|
|
49
|
+
uploadToDocServer?: boolean;
|
|
50
|
+
/** Unique identifier for the upload */
|
|
51
|
+
id?: string;
|
|
52
|
+
/** Allow multiple file uploads */
|
|
53
|
+
multiple?: boolean;
|
|
54
|
+
/** Get original file name */
|
|
55
|
+
getRealFileName?: boolean;
|
|
56
|
+
/** Callback when file is deleted */
|
|
57
|
+
onDelete?: () => void;
|
|
58
|
+
/** Hide the selected file display */
|
|
59
|
+
hideSelectedFile?: boolean;
|
|
60
|
+
/** Maximum file size in bytes */
|
|
61
|
+
maxSize?: number;
|
|
62
|
+
/** Translation function */
|
|
63
|
+
t?: (key: string) => string;
|
|
64
|
+
/** Toast function for notifications */
|
|
65
|
+
toast?: {
|
|
66
|
+
error: (message: string, options?: {
|
|
67
|
+
toastId: string;
|
|
68
|
+
}) => void;
|
|
69
|
+
};
|
|
70
|
+
/** File upload service */
|
|
71
|
+
fileUploadService?: FileUploadService;
|
|
72
|
+
/** System messages */
|
|
73
|
+
systemMessages?: SystemMessages;
|
|
74
|
+
/** Build query params function */
|
|
75
|
+
buildQueryParams?: (params: Record<string, string | null>) => string;
|
|
76
|
+
/** Get token function */
|
|
77
|
+
getToken?: () => string | null;
|
|
78
|
+
/** Context for global agreement draggable */
|
|
79
|
+
globalAgreementDraggableContext?: GlobalAgreementDraggableContext;
|
|
80
|
+
/** Custom click to upload text */
|
|
81
|
+
clickToUploadText?: string;
|
|
82
|
+
/** Custom drag and drop text */
|
|
83
|
+
dragAndDropText?: string;
|
|
84
|
+
};
|
|
85
|
+
export declare const FileUploadDragger: FC<FileUploadDraggerProps>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { FC, SVGProps } from 'react';
|
|
2
|
+
interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
|
|
3
|
+
fill?: string;
|
|
4
|
+
size?: number;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const TrashOutlineIcon: FC<IconProps>;
|
|
8
|
+
export declare const DownloadIcon: FC<IconProps>;
|
|
9
|
+
export declare const FilePdfIcon: FC<IconProps>;
|
|
10
|
+
export declare const FileDescriptionIcon: FC<IconProps>;
|
|
11
|
+
export declare const SpinnerIcon: FC<IconProps>;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
export type NameInitialLogoProps = {
|
|
3
|
+
initials: string;
|
|
4
|
+
rounded: boolean;
|
|
5
|
+
className?: string;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* NameInitialLogo component displays user initials in a styled container
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <NameInitialLogo initials="JD" rounded={true} />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const NameInitialLogo: FC<NameInitialLogoProps>;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type UserProfilePicProps = {
|
|
3
|
+
url?: string;
|
|
4
|
+
className: string;
|
|
5
|
+
username?: string;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* UserProfilePic component displays a user's profile picture with fallback to initials
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* <UserProfilePic url="/avatar.jpg" username="John Doe" className="w-10 h-10 rounded-full" />
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
export declare const UserProfilePic: React.FC<UserProfilePicProps>;
|
|
@@ -7,3 +7,7 @@ export type { StatusInfoRowProps } from './StatusInfoRow';
|
|
|
7
7
|
export { PersonIcon } from './PersonIcon';
|
|
8
8
|
export { sizeClasses, getInitials } from './constants';
|
|
9
9
|
export { useDynamicPosition } from './useDynamicPosition';
|
|
10
|
+
export { NameInitialLogo } from './NameInitialLogo';
|
|
11
|
+
export type { NameInitialLogoProps } from './NameInitialLogo';
|
|
12
|
+
export { UserProfilePic } from './UserProfilePic';
|
|
13
|
+
export type { UserProfilePicProps } from './UserProfilePic';
|
package/dist/index.d.ts
CHANGED
|
@@ -179,3 +179,23 @@ export { Sidebar } from "./components/sidebar";
|
|
|
179
179
|
export type { SidebarProps } from "./components/sidebar";
|
|
180
180
|
export { UserAvatar, UserAvatarPopper, StatusInfoRow, PersonIcon, sizeClasses as userAvatarSizeClasses, getInitials, useDynamicPosition } from "./components/user-avatar";
|
|
181
181
|
export type { UserAvatarProps, UserAvatarSize, UserDetails, UserDetailsTeam, UserAvatarPopperProps, UserAvatarPopperPlacement, StatusInfoRowProps, } from "./components/user-avatar";
|
|
182
|
+
export { NameInitialLogo } from "./components/user-avatar";
|
|
183
|
+
export type { NameInitialLogoProps } from "./components/user-avatar";
|
|
184
|
+
export { UserProfilePic } from "./components/user-avatar";
|
|
185
|
+
export type { UserProfilePicProps } from "./components/user-avatar";
|
|
186
|
+
export { FileUploadDragger } from "./components/forms/file-upload-dragger/FileUploadDragger";
|
|
187
|
+
export type { FileUploadDraggerProps, } from "./components/forms/file-upload-dragger/FileUploadDragger";
|
|
188
|
+
export { LottieAnimation } from "./components/data-display/lottie-animation/LottieAnimation";
|
|
189
|
+
export type { LottieAnimationProps } from "./components/data-display/lottie-animation/LottieAnimation";
|
|
190
|
+
export { DataTypeIcon } from "./components/data-display/datatype-icon/DataTypeIcon";
|
|
191
|
+
export type { DataTypeIconProps } from "./components/data-display/datatype-icon/DataTypeIcon";
|
|
192
|
+
export { NoDataFound, PageNotFound, UserNotFound } from "./components/data-display/empty-state";
|
|
193
|
+
export type { NoDataFoundProps, PageNotFoundProps, UserNotFoundProps, } from "./components/data-display/empty-state";
|
|
194
|
+
export { ContextMenu } from "./components/data-display/context-menu/ContextMenu";
|
|
195
|
+
export type { ContextMenuProps, } from "./components/data-display/context-menu/ContextMenu";
|
|
196
|
+
export { PermissionWrapper } from "./components/data-display/permission-wrapper/PermissionWrapper";
|
|
197
|
+
export type { PermissionWrapperProps } from "./components/data-display/permission-wrapper/PermissionWrapper";
|
|
198
|
+
export { JsonGridViewer, JsonGridViewerContextProvider, useJsonGridViewerContext, JsonGridCore, NestedJsonGrid, JsonValueDisplay, JsonGridBulkFloatingBar, AddKeyModal, useCheckboxSelection, } from "./components/data-display/json-grid-viewer";
|
|
199
|
+
export type { JsonGridViewerProps, AddKeyModalProps, IJsonGridViewerContext, IJsonGridProps as JsonGridCoreProps, } from "./components/data-display/json-grid-viewer";
|
|
200
|
+
export { DataType as JsonGridDataType, DataTypeBadgeClass, DataTypeOptions as JsonGridDataTypeOptions, } from "./components/data-display/json-grid-viewer";
|
|
201
|
+
export { getDataType as jsonGridGetDataType, filterTopLevelPaths as jsonGridFilterTopLevelPaths, parseJson as jsonGridParseJson } from "./components/data-display/json-grid-viewer";
|