@lax-wp/design-system 0.1.8 → 0.2.0
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/design-system.css +1 -1
- package/dist/index.es.js +23279 -14720
- package/dist/index.umd.js +183 -61
- package/package.json +3 -1
- package/dist/components/data-display/badge/Badge.d.ts +0 -44
- package/dist/components/data-display/banner/Banner.d.ts +0 -41
- package/dist/components/data-display/code-editor/CodeEditor.d.ts +0 -4
- package/dist/components/data-display/code-editor/JsonGrid.d.ts +0 -14
- package/dist/components/data-display/code-editor/Tabs.d.ts +0 -12
- package/dist/components/data-display/pdf-viewer/PdfViewer.d.ts +0 -45
- package/dist/components/data-display/popper/Popper.d.ts +0 -57
- package/dist/components/data-display/status-color-mapping/StatusColorMapping.d.ts +0 -29
- package/dist/components/data-display/typography/Typography.d.ts +0 -15
- package/dist/components/feedback/toast/Toast.d.ts +0 -29
- package/dist/components/forms/checkbox/Checkbox.d.ts +0 -55
- package/dist/components/forms/color-picker/ColorPicker.d.ts +0 -60
- package/dist/components/forms/creatable-select/CreatableSelect.d.ts +0 -92
- package/dist/components/forms/currency-input/CurrencyInputField.d.ts +0 -73
- package/dist/components/forms/currency-input/currency.constant.d.ts +0 -6
- package/dist/components/forms/date-range/DateRange.d.ts +0 -72
- package/dist/components/forms/debounce-input/DebounceInputField.d.ts +0 -76
- package/dist/components/forms/input-field/InputField.d.ts +0 -62
- package/dist/components/forms/percentage-input/PercentageInputField.d.ts +0 -75
- package/dist/components/forms/text-field/TextField.d.ts +0 -48
- package/dist/components/forms/toggle/Toggle.d.ts +0 -71
- package/dist/components/tooltip/Tooltip.d.ts +0 -13
- package/dist/hooks/useOutsideClick.d.ts +0 -28
- package/dist/hooks/usePythonSyntax.d.ts +0 -28
- package/dist/hooks/useTheme.d.ts +0 -6
- package/dist/index.d.ts +0 -48
- package/dist/services/monacoManager.d.ts +0 -28
- package/dist/types/index.d.ts +0 -66
- package/dist/utils/messageConstants.d.ts +0 -16
- package/dist/utils/utilities.d.ts +0 -13
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Date range value type
|
|
3
|
-
*/
|
|
4
|
-
export interface DateRangeValue {
|
|
5
|
-
/** Start date */
|
|
6
|
-
startDate: Date | null;
|
|
7
|
-
/** End date */
|
|
8
|
-
endDate: Date | null;
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Props for the DateRange component
|
|
12
|
-
*/
|
|
13
|
-
export interface DateRangeProps {
|
|
14
|
-
/** Unique identifier for the date range */
|
|
15
|
-
id: string;
|
|
16
|
-
/** Label text to display above the date range */
|
|
17
|
-
label?: string;
|
|
18
|
-
/** Current date range value */
|
|
19
|
-
value?: DateRangeValue;
|
|
20
|
-
/** Default date range value */
|
|
21
|
-
defaultValue?: DateRangeValue;
|
|
22
|
-
/** Callback function called when date range changes */
|
|
23
|
-
onChange: (value: DateRangeValue) => void;
|
|
24
|
-
/** Whether the date range is disabled */
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
/** Whether the field is required */
|
|
27
|
-
required?: boolean;
|
|
28
|
-
/** Message to display below the date range */
|
|
29
|
-
message?: string;
|
|
30
|
-
/** Type of message to display */
|
|
31
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
32
|
-
/** Additional CSS classes for the wrapper container */
|
|
33
|
-
wrapperClassName?: string;
|
|
34
|
-
/** Additional CSS classes for the input containers */
|
|
35
|
-
inputClassName?: string;
|
|
36
|
-
/** Additional CSS classes for the label */
|
|
37
|
-
labelClassName?: string;
|
|
38
|
-
/** Help text to display below the label */
|
|
39
|
-
helpText?: string;
|
|
40
|
-
/** Size variant for the inputs */
|
|
41
|
-
size?: "small" | "medium" | "large";
|
|
42
|
-
/** Date format for display */
|
|
43
|
-
dateFormat?: string;
|
|
44
|
-
/** Minimum date allowed */
|
|
45
|
-
minDate?: Date;
|
|
46
|
-
/** Maximum date allowed */
|
|
47
|
-
maxDate?: Date;
|
|
48
|
-
/** Placeholder text for start date */
|
|
49
|
-
startPlaceholder?: string;
|
|
50
|
-
/** Placeholder text for end date */
|
|
51
|
-
endPlaceholder?: string;
|
|
52
|
-
/** Whether to allow clearing the selection */
|
|
53
|
-
allowClear?: boolean;
|
|
54
|
-
/** Additional props to pass to the input elements */
|
|
55
|
-
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
56
|
-
}
|
|
57
|
-
/**
|
|
58
|
-
* A highly customizable date range component with label, validation, and styling support.
|
|
59
|
-
* Features proper date handling, validation, and comprehensive prop support.
|
|
60
|
-
*
|
|
61
|
-
* @example
|
|
62
|
-
* ```tsx
|
|
63
|
-
* <DateRange
|
|
64
|
-
* id="event-dates"
|
|
65
|
-
* label="Event Duration"
|
|
66
|
-
* value={dateRange}
|
|
67
|
-
* onChange={(range) => setDateRange(range)}
|
|
68
|
-
* required
|
|
69
|
-
* />
|
|
70
|
-
* ```
|
|
71
|
-
*/
|
|
72
|
-
export declare const DateRange: import("react").ForwardRefExoticComponent<DateRangeProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Props for the DebounceInputField component
|
|
3
|
-
*/
|
|
4
|
-
export interface DebounceInputFieldProps {
|
|
5
|
-
/** Unique identifier for the input */
|
|
6
|
-
id: string;
|
|
7
|
-
/** Label text to display above the input */
|
|
8
|
-
label?: string;
|
|
9
|
-
/** Current value of the input */
|
|
10
|
-
value?: string;
|
|
11
|
-
/** Default value for the input */
|
|
12
|
-
defaultValue?: string;
|
|
13
|
-
/** Callback function called when value changes (debounced) */
|
|
14
|
-
onChange: (value: string) => void;
|
|
15
|
-
/** Callback function called on every keystroke (immediate) */
|
|
16
|
-
onImmediateChange?: (value: string) => void;
|
|
17
|
-
/** Whether the input is disabled */
|
|
18
|
-
disabled?: boolean;
|
|
19
|
-
/** Whether the field is required */
|
|
20
|
-
required?: boolean;
|
|
21
|
-
/** Placeholder text for the input */
|
|
22
|
-
placeholder?: string;
|
|
23
|
-
/** Message to display below the input */
|
|
24
|
-
message?: string;
|
|
25
|
-
/** Type of message to display */
|
|
26
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
27
|
-
/** Additional CSS classes for the wrapper container */
|
|
28
|
-
wrapperClassName?: string;
|
|
29
|
-
/** Additional CSS classes for the input */
|
|
30
|
-
inputClassName?: string;
|
|
31
|
-
/** Additional CSS classes for the label */
|
|
32
|
-
labelClassName?: string;
|
|
33
|
-
/** Help text to display below the label */
|
|
34
|
-
helpText?: string;
|
|
35
|
-
/** Size variant for the input */
|
|
36
|
-
size?: "small" | "medium" | "large";
|
|
37
|
-
/** Input type */
|
|
38
|
-
type?: "text" | "email" | "url" | "search" | "tel" | "password";
|
|
39
|
-
/** Debounce timeout in milliseconds */
|
|
40
|
-
debounceTimeout?: number;
|
|
41
|
-
/** Minimum value for number inputs */
|
|
42
|
-
min?: number;
|
|
43
|
-
/** Maximum value for number inputs */
|
|
44
|
-
max?: number;
|
|
45
|
-
/** Maximum length for text inputs */
|
|
46
|
-
maxLength?: number;
|
|
47
|
-
/** Pattern for input validation */
|
|
48
|
-
pattern?: string;
|
|
49
|
-
/** Additional props to pass to the input element */
|
|
50
|
-
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
51
|
-
/** Inline styles for the input element */
|
|
52
|
-
inputStyle?: React.CSSProperties;
|
|
53
|
-
/** Callback for key down events */
|
|
54
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
55
|
-
/** Callback for focus events */
|
|
56
|
-
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
57
|
-
/** Callback for blur events */
|
|
58
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
59
|
-
}
|
|
60
|
-
/**
|
|
61
|
-
* A highly customizable debounced input component with label, validation, and styling support.
|
|
62
|
-
* Features configurable debounce timing, immediate change callbacks, and comprehensive prop support.
|
|
63
|
-
*
|
|
64
|
-
* @example
|
|
65
|
-
* ```tsx
|
|
66
|
-
* <DebounceInputField
|
|
67
|
-
* id="search"
|
|
68
|
-
* label="Search"
|
|
69
|
-
* value={searchTerm}
|
|
70
|
-
* onChange={(value) => setSearchTerm(value)}
|
|
71
|
-
* debounceTimeout={300}
|
|
72
|
-
* placeholder="Type to search..."
|
|
73
|
-
* />
|
|
74
|
-
* ```
|
|
75
|
-
*/
|
|
76
|
-
export declare const DebounceInputField: import("react").ForwardRefExoticComponent<DebounceInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Props for the InputField component
|
|
4
|
-
*/
|
|
5
|
-
export interface InputFieldProps {
|
|
6
|
-
/** Unique identifier for the input field */
|
|
7
|
-
id: string;
|
|
8
|
-
/** The current value of the input field */
|
|
9
|
-
value?: string;
|
|
10
|
-
/** Callback function called when the input value changes */
|
|
11
|
-
onChange: (value: string) => void;
|
|
12
|
-
/** Callback function called on key down events */
|
|
13
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
14
|
-
/** Error message to display below the input */
|
|
15
|
-
message?: string;
|
|
16
|
-
/** Success message to display below the input */
|
|
17
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
18
|
-
/** Default value for the input field */
|
|
19
|
-
defaultValue?: string;
|
|
20
|
-
/** Whether the input field is disabled */
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
/** Maximum value for number inputs */
|
|
23
|
-
max?: number;
|
|
24
|
-
/** Minimum value for number inputs */
|
|
25
|
-
min?: number;
|
|
26
|
-
/** Whether the field is required */
|
|
27
|
-
required?: boolean;
|
|
28
|
-
/** Label text for the input field */
|
|
29
|
-
label?: string;
|
|
30
|
-
/** Input type (text, email, password, number, etc.) */
|
|
31
|
-
type?: string;
|
|
32
|
-
/** Placeholder text for the input */
|
|
33
|
-
placeholder?: string;
|
|
34
|
-
/** Icon or element to display at the end of the input */
|
|
35
|
-
fieldSuffix?: React.ReactNode;
|
|
36
|
-
/** Additional CSS classes for the wrapper container */
|
|
37
|
-
wrapperClassNames?: string;
|
|
38
|
-
/** Additional CSS classes for the input element */
|
|
39
|
-
inputClassNames?: string;
|
|
40
|
-
/** Inline styles for the input element */
|
|
41
|
-
inputStyle?: React.CSSProperties;
|
|
42
|
-
/** Additional props to pass to the input element */
|
|
43
|
-
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
44
|
-
}
|
|
45
|
-
/**
|
|
46
|
-
* A highly customizable input field component with label, validation, and styling support.
|
|
47
|
-
*
|
|
48
|
-
* @example
|
|
49
|
-
* ```tsx
|
|
50
|
-
* <InputField
|
|
51
|
-
* id="email"
|
|
52
|
-
* label="Email Address"
|
|
53
|
-
* type="email"
|
|
54
|
-
* value={email}
|
|
55
|
-
* onChange={setEmail}
|
|
56
|
-
* placeholder="Enter your email"
|
|
57
|
-
* required
|
|
58
|
-
* errorMessage={emailError}
|
|
59
|
-
* />
|
|
60
|
-
* ```
|
|
61
|
-
*/
|
|
62
|
-
export declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Props for the PercentageInputField component
|
|
3
|
-
*/
|
|
4
|
-
export interface PercentageInputFieldProps {
|
|
5
|
-
/** Unique identifier for the input */
|
|
6
|
-
id: string;
|
|
7
|
-
/** Label text to display above the input */
|
|
8
|
-
label?: string;
|
|
9
|
-
/** Current value of the input (number) */
|
|
10
|
-
value?: number | null;
|
|
11
|
-
/** Default value for the input */
|
|
12
|
-
defaultValue?: number | null;
|
|
13
|
-
/** Callback function called when value changes */
|
|
14
|
-
onChange: (value: number | null) => void;
|
|
15
|
-
/** Whether the input is disabled */
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/** Whether the field is required */
|
|
18
|
-
required?: boolean;
|
|
19
|
-
/** Placeholder text for the input */
|
|
20
|
-
placeholder?: string;
|
|
21
|
-
/** Message to display below the input */
|
|
22
|
-
message?: string;
|
|
23
|
-
/** Type of message to display */
|
|
24
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
25
|
-
/** Additional CSS classes for the wrapper container */
|
|
26
|
-
wrapperClassName?: string;
|
|
27
|
-
/** Additional CSS classes for the input */
|
|
28
|
-
inputClassName?: string;
|
|
29
|
-
/** Additional CSS classes for the label */
|
|
30
|
-
labelClassName?: string;
|
|
31
|
-
/** Help text to display below the label */
|
|
32
|
-
helpText?: string;
|
|
33
|
-
/** Size variant for the input */
|
|
34
|
-
size?: "small" | "medium" | "large";
|
|
35
|
-
/** Minimum value allowed */
|
|
36
|
-
min?: number;
|
|
37
|
-
/** Maximum value allowed */
|
|
38
|
-
max?: number;
|
|
39
|
-
/** Step value for incrementing */
|
|
40
|
-
step?: number;
|
|
41
|
-
/** Number of decimal places */
|
|
42
|
-
decimalPlaces?: number;
|
|
43
|
-
/** Whether to show percentage symbol */
|
|
44
|
-
showSymbol?: boolean;
|
|
45
|
-
/** Whether to allow negative values */
|
|
46
|
-
allowNegative?: boolean;
|
|
47
|
-
/** Additional props to pass to the input element */
|
|
48
|
-
inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
|
|
49
|
-
/** Inline styles for the input element */
|
|
50
|
-
inputStyle?: React.CSSProperties;
|
|
51
|
-
/** Callback for key down events */
|
|
52
|
-
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
53
|
-
/** Callback for focus events */
|
|
54
|
-
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
55
|
-
/** Callback for blur events */
|
|
56
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* A highly customizable percentage input component with label, validation, and styling support.
|
|
60
|
-
* Features percentage symbol, decimal control, and comprehensive validation.
|
|
61
|
-
*
|
|
62
|
-
* @example
|
|
63
|
-
* ```tsx
|
|
64
|
-
* <PercentageInputField
|
|
65
|
-
* id="discount"
|
|
66
|
-
* label="Discount Percentage"
|
|
67
|
-
* value={discount}
|
|
68
|
-
* onChange={(value) => setDiscount(value)}
|
|
69
|
-
* min={0}
|
|
70
|
-
* max={100}
|
|
71
|
-
* required
|
|
72
|
-
* />
|
|
73
|
-
* ```
|
|
74
|
-
*/
|
|
75
|
-
export declare const PercentageInputField: import("react").ForwardRefExoticComponent<PercentageInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import type { RefObject } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Props for the TextAreaField component
|
|
4
|
-
*/
|
|
5
|
-
export interface TextFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
|
|
6
|
-
/** The label text to display above the textarea */
|
|
7
|
-
label?: string;
|
|
8
|
-
/** Placeholder text for the textarea */
|
|
9
|
-
placeholder: string;
|
|
10
|
-
/** Current value of the textarea */
|
|
11
|
-
value?: string;
|
|
12
|
-
/** Callback function called when the textarea value changes */
|
|
13
|
-
onChange: (value: string) => void;
|
|
14
|
-
/** Number of visible text lines for the textarea */
|
|
15
|
-
rows?: number;
|
|
16
|
-
/** Message to display below the textarea */
|
|
17
|
-
message?: string;
|
|
18
|
-
/** Type of message to display */
|
|
19
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
20
|
-
/** Default value for the textarea */
|
|
21
|
-
defaultValue?: string;
|
|
22
|
-
/** Whether the field is required */
|
|
23
|
-
required?: boolean;
|
|
24
|
-
/** Whether the textarea is disabled */
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
/** Additional CSS classes for the wrapper container */
|
|
27
|
-
className?: string;
|
|
28
|
-
/** Ref object for the textarea element */
|
|
29
|
-
inputRef?: RefObject<HTMLTextAreaElement>;
|
|
30
|
-
/** Maximum character length allowed */
|
|
31
|
-
maxLength?: number;
|
|
32
|
-
/** Whether to preserve original case in the label */
|
|
33
|
-
originalCase?: boolean;
|
|
34
|
-
/** Whether to remove border styling */
|
|
35
|
-
noBorder?: boolean;
|
|
36
|
-
/** Unique identifier for the textarea */
|
|
37
|
-
id?: string;
|
|
38
|
-
/** Custom inline styles for the textarea */
|
|
39
|
-
inputStyle?: React.CSSProperties;
|
|
40
|
-
}
|
|
41
|
-
/**
|
|
42
|
-
* A customizable textarea field component with label, validation, and styling support.
|
|
43
|
-
* Features dark mode support, accessibility enhancements, and character count display.
|
|
44
|
-
*
|
|
45
|
-
* @param props - The props for the TextAreaField component
|
|
46
|
-
* @returns The rendered TextAreaField component
|
|
47
|
-
*/
|
|
48
|
-
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Toggle label direction options
|
|
4
|
-
*/
|
|
5
|
-
export type ToggleDirection = "top" | "left" | "right";
|
|
6
|
-
/**
|
|
7
|
-
* Props for the Toggle component
|
|
8
|
-
*/
|
|
9
|
-
export interface ToggleProps {
|
|
10
|
-
/** Unique identifier for the toggle */
|
|
11
|
-
id?: string;
|
|
12
|
-
/** Whether the toggle is checked */
|
|
13
|
-
checked: boolean;
|
|
14
|
-
/** Callback function called when toggle state changes */
|
|
15
|
-
onChange: (checked: boolean) => void;
|
|
16
|
-
/** Label text or element to display */
|
|
17
|
-
label?: ReactNode;
|
|
18
|
-
/** Whether the field is required */
|
|
19
|
-
required?: boolean;
|
|
20
|
-
/** Whether the toggle is disabled */
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
/** Message to display below the toggle */
|
|
23
|
-
message?: string;
|
|
24
|
-
/** Type of message to display */
|
|
25
|
-
messageType?: "success" | "error" | "info" | "default";
|
|
26
|
-
/** Additional CSS classes for the wrapper container */
|
|
27
|
-
wrapperClassName?: string;
|
|
28
|
-
/** Additional CSS classes for the toggle */
|
|
29
|
-
toggleClassName?: string;
|
|
30
|
-
/** Additional CSS classes for the label */
|
|
31
|
-
labelClassName?: string;
|
|
32
|
-
/** Help text to display below the label */
|
|
33
|
-
helpText?: string;
|
|
34
|
-
/** Size variant for the toggle */
|
|
35
|
-
size?: "small" | "medium" | "large";
|
|
36
|
-
/** Label direction relative to toggle */
|
|
37
|
-
labelDirection?: ToggleDirection;
|
|
38
|
-
/** Whether to hide the status text (Yes/No) */
|
|
39
|
-
hideStatus?: boolean;
|
|
40
|
-
/** Custom status text instead of Yes/No */
|
|
41
|
-
statusText?: string;
|
|
42
|
-
/** Whether to show icons in the toggle */
|
|
43
|
-
withIcon?: boolean;
|
|
44
|
-
/** Custom icons for checked/unchecked states */
|
|
45
|
-
icon?: {
|
|
46
|
-
checkedIcon: ReactNode;
|
|
47
|
-
uncheckedIcon: ReactNode;
|
|
48
|
-
};
|
|
49
|
-
/** Visual variant for the toggle */
|
|
50
|
-
variant?: "primary" | "secondary";
|
|
51
|
-
/** Whether to preserve original case in the label */
|
|
52
|
-
originalCase?: boolean;
|
|
53
|
-
/** Whether to stop click propagation */
|
|
54
|
-
stopClickPropagation?: boolean;
|
|
55
|
-
}
|
|
56
|
-
/**
|
|
57
|
-
* A highly customizable toggle component with label, validation, and styling support.
|
|
58
|
-
* Features multiple sizes, variants, icon support, and comprehensive prop support.
|
|
59
|
-
*
|
|
60
|
-
* @example
|
|
61
|
-
* ```tsx
|
|
62
|
-
* <Toggle
|
|
63
|
-
* id="notifications"
|
|
64
|
-
* label="Enable Notifications"
|
|
65
|
-
* checked={notificationsEnabled}
|
|
66
|
-
* onChange={(checked) => setNotificationsEnabled(checked)}
|
|
67
|
-
* required
|
|
68
|
-
* />
|
|
69
|
-
* ```
|
|
70
|
-
*/
|
|
71
|
-
export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import './styles.css';
|
|
2
|
-
import type { ReactNode } from 'react';
|
|
3
|
-
export interface TooltipProps {
|
|
4
|
-
children: ReactNode;
|
|
5
|
-
title?: string | ReactNode;
|
|
6
|
-
hideTooltip?: boolean;
|
|
7
|
-
delayShow?: boolean;
|
|
8
|
-
whiteSpace?: 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'initial' | 'inherit';
|
|
9
|
-
placement?: 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
10
|
-
className?: string;
|
|
11
|
-
}
|
|
12
|
-
declare const Tooltip: ({ children, title, hideTooltip, delayShow, whiteSpace, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
export default Tooltip;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { type RefObject } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* Props for the useOutsideClick hook
|
|
4
|
-
*/
|
|
5
|
-
export interface UseOutsideClickProps {
|
|
6
|
-
/** Reference to the element to detect outside clicks for */
|
|
7
|
-
ref: RefObject<HTMLElement>;
|
|
8
|
-
/** Handler function called when clicking outside the referenced element */
|
|
9
|
-
handler: () => void;
|
|
10
|
-
/** Whether the hook is active */
|
|
11
|
-
enabled?: boolean;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* Custom hook to detect clicks outside a referenced element
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* ```tsx
|
|
18
|
-
* const menuRef = useRef<HTMLDivElement>(null);
|
|
19
|
-
*
|
|
20
|
-
* useOutsideClick({
|
|
21
|
-
* ref: menuRef,
|
|
22
|
-
* handler: () => setIsOpen(false),
|
|
23
|
-
* enabled: isOpen
|
|
24
|
-
* });
|
|
25
|
-
* ```
|
|
26
|
-
*/
|
|
27
|
-
export declare const useOutsideClick: ({ ref, handler, enabled, }: UseOutsideClickProps) => void;
|
|
28
|
-
export default useOutsideClick;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { type Monaco } from '@monaco-editor/react';
|
|
2
|
-
export interface UsePythonSyntaxProps {
|
|
3
|
-
monacoEditor: Monaco | null;
|
|
4
|
-
currentEditorModel: any;
|
|
5
|
-
code: string;
|
|
6
|
-
setCode: (code: string) => void;
|
|
7
|
-
enable: boolean;
|
|
8
|
-
checkSyntaxAPI?: (code: string) => Promise<{
|
|
9
|
-
data: {
|
|
10
|
-
error?: {
|
|
11
|
-
message: string;
|
|
12
|
-
line?: number;
|
|
13
|
-
column?: number;
|
|
14
|
-
};
|
|
15
|
-
};
|
|
16
|
-
}>;
|
|
17
|
-
formatCodeAPI?: (code: string) => Promise<{
|
|
18
|
-
data: {
|
|
19
|
-
formatted_code?: string;
|
|
20
|
-
};
|
|
21
|
-
}>;
|
|
22
|
-
}
|
|
23
|
-
export declare const usePythonSyntax: ({ monacoEditor, currentEditorModel, code, setCode, enable, checkSyntaxAPI, formatCodeAPI }: UsePythonSyntaxProps) => {
|
|
24
|
-
pythonError: any;
|
|
25
|
-
pythonLoading: boolean;
|
|
26
|
-
handleCheckSyntax: () => Promise<void>;
|
|
27
|
-
handleFormatCode: () => Promise<void>;
|
|
28
|
-
};
|
package/dist/hooks/useTheme.d.ts
DELETED
package/dist/index.d.ts
DELETED
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
export { InputField } from "./components/forms/input-field/InputField";
|
|
2
|
-
export type { InputFieldProps } from "./components/forms/input-field/InputField";
|
|
3
|
-
export * from "./components/data-display/typography/Typography";
|
|
4
|
-
export { TextField } from "./components/forms/text-field/TextField";
|
|
5
|
-
export type { TextFieldProps } from "./components/forms/text-field/TextField";
|
|
6
|
-
export { Checkbox } from "./components/forms/checkbox/Checkbox";
|
|
7
|
-
export type { CheckboxComponentProps, TCheckboxComponentProps, } from "./components/forms/checkbox/Checkbox";
|
|
8
|
-
export { ColorPicker } from "./components/forms/color-picker/ColorPicker";
|
|
9
|
-
export type { ColorPickerProps, ColorPickerComponentProps, } from "./components/forms/color-picker/ColorPicker";
|
|
10
|
-
export { CreatableSelectField } from "./components/forms/creatable-select/CreatableSelect";
|
|
11
|
-
export type { CreatableSelectProps, SelectOption, TProps, } from "./components/forms/creatable-select/CreatableSelect";
|
|
12
|
-
export { CurrencyInputField } from "./components/forms/currency-input/CurrencyInputField";
|
|
13
|
-
export type { CurrencyInputFieldProps } from "./components/forms/currency-input/CurrencyInputField";
|
|
14
|
-
export { CURRENCIES, CURRENCY_SYMBOLS } from "./components/forms/currency-input/currency.constant";
|
|
15
|
-
export { DateRange } from "./components/forms/date-range/DateRange";
|
|
16
|
-
export type { DateRangeProps, DateRangeValue, } from "./components/forms/date-range/DateRange";
|
|
17
|
-
export { DebounceInputField } from "./components/forms/debounce-input/DebounceInputField";
|
|
18
|
-
export type { DebounceInputFieldProps } from "./components/forms/debounce-input/DebounceInputField";
|
|
19
|
-
export { PercentageInputField } from "./components/forms/percentage-input/PercentageInputField";
|
|
20
|
-
export type { PercentageInputFieldProps } from "./components/forms/percentage-input/PercentageInputField";
|
|
21
|
-
export { Toggle } from "./components/forms/toggle/Toggle";
|
|
22
|
-
export type { ToggleProps, ToggleDirection, } from "./components/forms/toggle/Toggle";
|
|
23
|
-
export { StatusColorMapping } from "./components/data-display/status-color-mapping/StatusColorMapping";
|
|
24
|
-
export type { StatusColorMappingProps, StatusColor, } from "./components/data-display/status-color-mapping/StatusColorMapping";
|
|
25
|
-
export { Badge } from "./components/data-display/badge/Badge";
|
|
26
|
-
export type { BadgeProps, BadgeStatus, BadgeAppearance, BadgeSize, } from "./components/data-display/badge/Badge";
|
|
27
|
-
export { Banner } from "./components/data-display/banner/Banner";
|
|
28
|
-
export type { BannerProps, BannerStatus, } from "./components/data-display/banner/Banner";
|
|
29
|
-
export { PdfViewer } from "./components/data-display/pdf-viewer/PdfViewer";
|
|
30
|
-
export type { PdfViewerProps } from "./components/data-display/pdf-viewer/PdfViewer";
|
|
31
|
-
export { Popper } from "./components/data-display/popper/Popper";
|
|
32
|
-
export type { PopperProps, PopperPlacement, } from "./components/data-display/popper/Popper";
|
|
33
|
-
export { default as Toast, toast } from "./components/feedback/toast/Toast";
|
|
34
|
-
export type { ToastContainerProps, ToastType, ToastPosition, } from "./components/feedback/toast/Toast";
|
|
35
|
-
export { CodeEditor } from "./components/data-display/code-editor/CodeEditor";
|
|
36
|
-
export type { CodeEditorProps } from "./types";
|
|
37
|
-
export { JsonGrid } from "./components/data-display/code-editor/JsonGrid";
|
|
38
|
-
export { Tabs } from "./components/data-display/code-editor/Tabs";
|
|
39
|
-
export type { TabsProps } from "./components/data-display/code-editor/Tabs";
|
|
40
|
-
export { monacoManager } from "./services/monacoManager";
|
|
41
|
-
export { usePythonSyntax } from "./hooks/usePythonSyntax";
|
|
42
|
-
export type { UsePythonSyntaxProps } from "./hooks/usePythonSyntax";
|
|
43
|
-
export { useTheme } from "./hooks/useTheme";
|
|
44
|
-
export { parseJson, filterTopLevelPaths, randomHexString } from "./utils/utilities";
|
|
45
|
-
export { systemMessages } from "./utils/messageConstants";
|
|
46
|
-
export type { JsonValue, JsonObject, JsonArray, Tab, ThemeContextType, PythonError, JsonGridContextType } from "./types";
|
|
47
|
-
export { useOutsideClick } from "./hooks/useOutsideClick";
|
|
48
|
-
export type { UseOutsideClickProps } from "./hooks/useOutsideClick";
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { type Monaco } from '@monaco-editor/react';
|
|
2
|
-
declare class MonacoManager {
|
|
3
|
-
private static instance;
|
|
4
|
-
private monaco;
|
|
5
|
-
private initialized;
|
|
6
|
-
private initializationPromise;
|
|
7
|
-
static getInstance(): MonacoManager;
|
|
8
|
-
initialize(): Promise<Monaco>;
|
|
9
|
-
private performInitialization;
|
|
10
|
-
getMonaco(): Monaco | null;
|
|
11
|
-
isInitialized(): boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Safely get an editor instance by index
|
|
14
|
-
*/
|
|
15
|
-
getEditorInstance(index?: number): any;
|
|
16
|
-
/**
|
|
17
|
-
* Get the first available editor instance
|
|
18
|
-
*/
|
|
19
|
-
getFirstEditorInstance(): Monaco | null;
|
|
20
|
-
/**
|
|
21
|
-
* Safely dispose of disposables with error handling
|
|
22
|
-
*/
|
|
23
|
-
static safeDispose(disposables: Array<{
|
|
24
|
-
dispose: () => void;
|
|
25
|
-
} | null | undefined>): void;
|
|
26
|
-
}
|
|
27
|
-
export declare const monacoManager: MonacoManager;
|
|
28
|
-
export type { Monaco };
|
package/dist/types/index.d.ts
DELETED
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
export type JsonValue = string | number | boolean | null | JsonObject | JsonArray;
|
|
2
|
-
export type JsonObject = {
|
|
3
|
-
[key: string]: JsonValue;
|
|
4
|
-
};
|
|
5
|
-
export type JsonArray = JsonValue[];
|
|
6
|
-
export interface Tab<T extends string> {
|
|
7
|
-
name: T;
|
|
8
|
-
is_default: boolean;
|
|
9
|
-
is_hidden: boolean;
|
|
10
|
-
is_pinned: boolean;
|
|
11
|
-
}
|
|
12
|
-
export interface CodeEditorProps {
|
|
13
|
-
value: string;
|
|
14
|
-
onChange?: (value: string) => void;
|
|
15
|
-
withFullScreen?: boolean;
|
|
16
|
-
withTheme?: boolean;
|
|
17
|
-
isEditMode?: boolean;
|
|
18
|
-
height?: string;
|
|
19
|
-
language?: 'json' | 'python';
|
|
20
|
-
monacoEditor?: any;
|
|
21
|
-
setIsDisableSave?: (flag: boolean) => void;
|
|
22
|
-
isShowCopy?: boolean;
|
|
23
|
-
isShowDownload?: boolean;
|
|
24
|
-
withJsonGrid?: boolean;
|
|
25
|
-
}
|
|
26
|
-
export interface ThemeContextType {
|
|
27
|
-
theme: 'light' | 'dark';
|
|
28
|
-
editorTheme: 'vs' | 'vs-dark';
|
|
29
|
-
setEditorTheme: (theme: 'vs' | 'vs-dark') => void;
|
|
30
|
-
}
|
|
31
|
-
export interface UsePythonSyntaxProps {
|
|
32
|
-
monacoEditor: any;
|
|
33
|
-
currentEditorModel: any;
|
|
34
|
-
code: string;
|
|
35
|
-
setCode: (code: string) => void;
|
|
36
|
-
enable: boolean;
|
|
37
|
-
}
|
|
38
|
-
export interface PythonError {
|
|
39
|
-
message: string;
|
|
40
|
-
line?: number;
|
|
41
|
-
column?: number;
|
|
42
|
-
}
|
|
43
|
-
export interface JsonGridContextType {
|
|
44
|
-
allExpanded: boolean;
|
|
45
|
-
toggleAll: () => void;
|
|
46
|
-
isEditMode: boolean;
|
|
47
|
-
isDarkMode: boolean;
|
|
48
|
-
selectedPaths: string[];
|
|
49
|
-
setSelectedPaths: (paths: string[]) => void;
|
|
50
|
-
selectedTopLevelPaths: string[];
|
|
51
|
-
setSelectedTopLevelPaths: (paths: string[]) => void;
|
|
52
|
-
selectedPathModification: string | null;
|
|
53
|
-
setSelectedPathModification: (path: string | null) => void;
|
|
54
|
-
selectedPathForEdit: string | null;
|
|
55
|
-
setSelectedPathForEdit: (path: string | null) => void;
|
|
56
|
-
jsonData: JsonObject | JsonArray;
|
|
57
|
-
setJsonData: (data: JsonObject | JsonArray) => void;
|
|
58
|
-
error: string | null;
|
|
59
|
-
setError: (error: string | null) => void;
|
|
60
|
-
handleDelete: (paths: string[]) => void;
|
|
61
|
-
handleDuplicate: (paths: string[]) => void;
|
|
62
|
-
handleCopy: (paths: string[]) => Promise<boolean>;
|
|
63
|
-
handleAddKey: (path: string, key: string, value: JsonValue | undefined) => Promise<void>;
|
|
64
|
-
setIsAddKeyModalOpen: (open: boolean) => void;
|
|
65
|
-
isAddKeyModalOpen: boolean;
|
|
66
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const systemMessages: {
|
|
2
|
-
createSuccess: (value: string) => string;
|
|
3
|
-
createFailure: (value: string) => string;
|
|
4
|
-
updateSuccess: (value: string) => string;
|
|
5
|
-
updateFailure: (value: string) => string;
|
|
6
|
-
copySuccess: (value: string) => string;
|
|
7
|
-
copyFailure: (value: string) => string;
|
|
8
|
-
copyToClipboard: (value: string) => string;
|
|
9
|
-
deleteSuccess: (value: string) => string;
|
|
10
|
-
deleteFailure: (value: string) => string;
|
|
11
|
-
errorMessage: string;
|
|
12
|
-
requiredFieldError: string;
|
|
13
|
-
noItemSelected: string;
|
|
14
|
-
invalidFileType: string;
|
|
15
|
-
formatFailed: string;
|
|
16
|
-
};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { type JsonValue } from '../types';
|
|
2
|
-
/**
|
|
3
|
-
* Parse JSON string safely
|
|
4
|
-
*/
|
|
5
|
-
export declare const parseJson: (value: string) => JsonValue;
|
|
6
|
-
/**
|
|
7
|
-
* Filter top level paths from an array of paths
|
|
8
|
-
*/
|
|
9
|
-
export declare const filterTopLevelPaths: (paths: string[]) => string[];
|
|
10
|
-
/**
|
|
11
|
-
* Generate a random hex string
|
|
12
|
-
*/
|
|
13
|
-
export declare const randomHexString: (length: number) => string;
|