@kwantis-id3/frontend-library 1.0.0-rc.3 → 1.0.0-rc.31
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 +6 -332
- package/dist/esm/index.js +377 -127
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Accordion/Accordion.d.ts +3 -37
- package/dist/esm/types/components/Accordion/AccordionInterfaces.d.ts +21 -0
- package/dist/esm/types/components/Accordion/AccordionStyled.d.ts +19 -10
- package/dist/esm/types/components/Accordion/index.d.ts +4 -1
- package/dist/esm/types/components/Button/Button.d.ts +2 -24
- package/dist/esm/types/components/Button/ButtonInterfaces.d.ts +24 -0
- package/dist/esm/types/components/Button/ButtonStyled.d.ts +41 -0
- package/dist/esm/types/components/Button/index.d.ts +2 -1
- package/dist/esm/types/components/Card/CardInterfaces.d.ts +1 -1
- package/dist/esm/types/components/Card/index.d.ts +2 -2
- package/dist/esm/types/components/DataGrid/DataGrid.d.ts +3 -0
- package/dist/esm/types/components/DataGrid/DataGridInterfaces.d.ts +9 -0
- package/dist/esm/types/components/DataGrid/index.d.ts +2 -0
- package/dist/esm/types/components/Drawer/Drawer.d.ts +3 -0
- package/dist/esm/types/components/Drawer/DrawerInterfaces.d.ts +33 -0
- package/dist/esm/types/components/Drawer/DrawerStyled.d.ts +28 -0
- package/dist/esm/types/components/Drawer/index.d.ts +2 -0
- package/dist/esm/types/components/Dropdown/Dropdown.d.ts +2 -43
- package/dist/esm/types/components/Dropdown/DropdownInterfaces.d.ts +52 -0
- package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts +1 -0
- package/dist/esm/types/components/Dropdown/index.d.ts +2 -1
- package/dist/esm/types/components/Indicator/IndicatorInterfaces.d.ts +1 -1
- package/dist/esm/types/components/Indicator/NeutralIndicator.d.ts +3 -0
- package/dist/esm/types/components/Indicator/index.d.ts +2 -2
- package/dist/esm/types/components/InputField/InputField.d.ts +3 -11
- package/dist/esm/types/components/InputField/InputFieldInterfaces.d.ts +9 -0
- package/dist/esm/types/components/InputField/index.d.ts +2 -1
- package/dist/esm/types/components/Modal/Modal.d.ts +3 -19
- package/dist/esm/types/components/Modal/ModalInterfaces.d.ts +16 -0
- package/dist/esm/types/components/Modal/index.d.ts +2 -2
- package/dist/esm/types/components/MultiViewList/MultiViewGrid.d.ts +5 -0
- package/dist/esm/types/components/MultiViewList/MultiViewList.d.ts +4 -0
- package/dist/esm/types/components/MultiViewList/MultiViewListInterfaces.d.ts +17 -0
- package/dist/esm/types/components/MultiViewList/MultiViewListStyled.d.ts +7 -0
- package/dist/esm/types/components/MultiViewList/index.d.ts +3 -0
- package/dist/esm/types/components/SelectFilter/index.d.ts +2 -2
- package/dist/esm/types/components/Slider/Slider.d.ts +2 -2
- package/dist/esm/types/components/Slider/index.d.ts +1 -1
- package/dist/esm/types/components/Table/DebouncedFilter.d.ts +6 -0
- package/dist/esm/types/components/Table/DebouncedInput.d.ts +5 -0
- package/dist/esm/types/components/Table/Table.d.ts +3 -0
- package/dist/esm/types/components/Table/TableInterfaces.d.ts +21 -0
- package/dist/esm/types/components/Table/TableStyled.d.ts +14 -0
- package/dist/esm/types/components/Table/index.d.ts +2 -0
- package/dist/esm/types/components/Tag/Tag.d.ts +2 -22
- package/dist/esm/types/components/Tag/TagInterfaces.d.ts +22 -0
- package/dist/esm/types/components/Tag/TagStyled.d.ts +7 -0
- package/dist/esm/types/components/Tag/index.d.ts +2 -1
- package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts +4 -3
- package/dist/esm/types/components/ThemeContext/ThemeInterfaces.d.ts +2 -0
- package/dist/esm/types/components/TreeView/ControlledTreeView.d.ts +4 -0
- package/dist/esm/types/components/TreeView/TreeUtils.d.ts +21 -0
- package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts +79 -0
- package/dist/esm/types/components/TreeView/TreeViewSyled.d.ts +24 -0
- package/dist/esm/types/components/TreeView/UncontrolledTreeView.d.ts +3 -0
- package/dist/esm/types/components/TreeView/index.d.ts +3 -0
- package/dist/esm/types/components/index.d.ts +15 -10
- package/dist/esm/types/utils/colors.d.ts +12 -2
- package/dist/esm/types/utils/index.d.ts +4 -7
- package/dist/esm/types/utils/isMobile.d.ts +1 -2
- package/dist/esm/types/utils/testing.d.ts +70 -1
- package/dist/index.d.ts +272 -66
- package/package.json +32 -26
- package/src/types/emotion.d.ts +8 -0
- package/src/types/tanstack.d.ts +7 -0
- package/changelog.md +0 -197
- package/dist/esm/types/utils/styled.d.ts +0 -2
- /package/dist/esm/types/components/InputField/{StyledInputField.d.ts → InputFieldStyled.d.ts} +0 -0
- /package/dist/esm/types/components/Modal/{StyledModal.d.ts → ModalStyled.d.ts} +0 -0
|
@@ -1,37 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import { Theme } from "@emotion/react";
|
|
5
|
-
export type AccordionProps = {
|
|
6
|
-
/** Text of the accordion trigger */
|
|
7
|
-
title: string;
|
|
8
|
-
/** Content of the accordion */
|
|
9
|
-
children: React.ReactNode;
|
|
10
|
-
/** Custom trigger component */
|
|
11
|
-
customTrigger?: React.ReactNode;
|
|
12
|
-
/** Works only if uncontrolled (isOpen props is not present) */
|
|
13
|
-
defaultOpen?: boolean;
|
|
14
|
-
/** Color of the accordion */
|
|
15
|
-
color?: string;
|
|
16
|
-
/** Color of the icon */
|
|
17
|
-
iconColor?: string;
|
|
18
|
-
/** Color of the divider */
|
|
19
|
-
dividerColor?: string;
|
|
20
|
-
/** Hide the icon */
|
|
21
|
-
hideIcon?: boolean;
|
|
22
|
-
/** Hide the divider */
|
|
23
|
-
hideDivider?: boolean;
|
|
24
|
-
/** Pass your state value here if the Accordion needs to be Controlled */
|
|
25
|
-
isOpen?: boolean;
|
|
26
|
-
/** Lazy render the content of the accordion */
|
|
27
|
-
isLazy?: boolean;
|
|
28
|
-
/** onClick handler */
|
|
29
|
-
onClick?: () => void;
|
|
30
|
-
/** onOpen handler */
|
|
31
|
-
onOpen?: () => void;
|
|
32
|
-
/** onClose handler */
|
|
33
|
-
onClose?: () => void;
|
|
34
|
-
/** Custom styles */
|
|
35
|
-
sx?: Interpolation<Theme>;
|
|
36
|
-
};
|
|
37
|
-
export declare const Accordion: (props: AccordionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { TAccordionProps } from "./AccordionInterfaces";
|
|
3
|
+
export declare const Accordion: FC<TAccordionProps>;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
export type TAccordionProps = PropsWithChildren & {
|
|
3
|
+
/** Title to be used if no custom trigger is passed */
|
|
4
|
+
title: string;
|
|
5
|
+
/** Pass your state value here if the Accordion needs to be Controlled */
|
|
6
|
+
isOpen?: boolean;
|
|
7
|
+
/** Default open state if the accordion is Uncontrolled */
|
|
8
|
+
defaultOpen?: boolean;
|
|
9
|
+
/** Callback function to be called when the Accordion is clicked */
|
|
10
|
+
onClick?: () => void;
|
|
11
|
+
/** Callback function to be called when the Accordion opens */
|
|
12
|
+
onOpen?: () => void;
|
|
13
|
+
/** Callback function to be called when the Accordion closes */
|
|
14
|
+
onClose?: () => void;
|
|
15
|
+
/** Custom trigger element */
|
|
16
|
+
trigger?: (isOpen: boolean) => React.ReactNode;
|
|
17
|
+
/** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
|
|
18
|
+
* @default "default"
|
|
19
|
+
*/
|
|
20
|
+
variant?: "default" | "light";
|
|
21
|
+
};
|
|
@@ -1,23 +1,32 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const AccordionGroup: import("@emotion/styled").StyledComponent<{
|
|
2
2
|
theme?: import("@emotion/react").Theme;
|
|
3
3
|
as?: React.ElementType;
|
|
4
|
-
} & {
|
|
5
|
-
$color: string;
|
|
6
4
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
7
|
-
export declare const
|
|
5
|
+
export declare const StyledAccordion: import("@emotion/styled").StyledComponent<{
|
|
8
6
|
theme?: import("@emotion/react").Theme;
|
|
9
7
|
as?: React.ElementType;
|
|
10
8
|
} & {
|
|
11
|
-
$
|
|
12
|
-
$
|
|
9
|
+
$variant: "default" | "light";
|
|
10
|
+
$isOpen: boolean;
|
|
13
11
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
14
|
-
export declare const
|
|
12
|
+
export declare const StyledAccordionHeader: import("@emotion/styled").StyledComponent<{
|
|
15
13
|
theme?: import("@emotion/react").Theme;
|
|
16
14
|
as?: React.ElementType;
|
|
17
15
|
} & {
|
|
18
|
-
$
|
|
16
|
+
$variant: "default" | "light";
|
|
17
|
+
$isOpen: boolean;
|
|
18
|
+
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
19
|
+
export declare const StyledAccordionContent: import("@emotion/styled").StyledComponent<{
|
|
20
|
+
theme?: import("@emotion/react").Theme;
|
|
21
|
+
as?: React.ElementType;
|
|
22
|
+
} & {
|
|
23
|
+
$isOpen: boolean;
|
|
24
|
+
$variant: "default" | "light";
|
|
25
|
+
$defaultHeight: string;
|
|
19
26
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
20
|
-
export declare const
|
|
27
|
+
export declare const Icon: import("@emotion/styled").StyledComponent<{
|
|
21
28
|
theme?: import("@emotion/react").Theme;
|
|
22
29
|
as?: React.ElementType;
|
|
23
|
-
}
|
|
30
|
+
} & {
|
|
31
|
+
$isOpen: boolean;
|
|
32
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
@@ -1,25 +1,3 @@
|
|
|
1
1
|
/** @jsxImportSource @emotion/react */
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
import { Theme } from "@emotion/react";
|
|
5
|
-
export type ButtonVariants = "contained" | "outlined" | "text";
|
|
6
|
-
export type ButtonProps = {
|
|
7
|
-
/** Color of the button */
|
|
8
|
-
color?: string;
|
|
9
|
-
/** Type of the button */
|
|
10
|
-
type?: "button" | "submit" | "reset";
|
|
11
|
-
/** Custom styles */
|
|
12
|
-
sx?: Interpolation<Theme>;
|
|
13
|
-
/** Variant of the button, either `contained`, `outlined` or `text` */
|
|
14
|
-
variant?: ButtonVariants;
|
|
15
|
-
/** onClick handler */
|
|
16
|
-
onClick?: () => void;
|
|
17
|
-
className?: string;
|
|
18
|
-
/** HTML id */
|
|
19
|
-
htmlId?: string;
|
|
20
|
-
/** Disabled state */
|
|
21
|
-
disabled?: boolean;
|
|
22
|
-
/** Elements to render as children */
|
|
23
|
-
children?: React.ReactNode;
|
|
24
|
-
};
|
|
25
|
-
export declare const Button: (props: ButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
2
|
+
import { TButtonProps } from "./ButtonInterfaces";
|
|
3
|
+
export declare const Button: (props: TButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { Interpolation } from "@emotion/react";
|
|
2
|
+
import { Theme } from "@emotion/react/dist/declarations/src";
|
|
3
|
+
export type TButtonVariants = "contained" | "outlined" | "text";
|
|
4
|
+
export type TButtonProps = {
|
|
5
|
+
/** Color of the button */
|
|
6
|
+
color?: string;
|
|
7
|
+
/** Type of the button */
|
|
8
|
+
type?: "button" | "submit" | "reset";
|
|
9
|
+
/** Custom styles */
|
|
10
|
+
sx?: Interpolation<Theme>;
|
|
11
|
+
/** Variant of the button, either `contained`, `outlined` or `text` */
|
|
12
|
+
variant?: TButtonVariants;
|
|
13
|
+
/** The button size; either "large" or "small" */
|
|
14
|
+
size?: "small" | "large";
|
|
15
|
+
/** onClick handler */
|
|
16
|
+
onClick?: () => void;
|
|
17
|
+
className?: string;
|
|
18
|
+
/** HTML id */
|
|
19
|
+
htmlId?: string;
|
|
20
|
+
/** Disabled state */
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/** Elements to render as children */
|
|
23
|
+
children?: React.ReactNode;
|
|
24
|
+
};
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
export declare const StylishButton: import("@emotion/styled").StyledComponent<{
|
|
2
|
+
theme?: import("@emotion/react").Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
} & {
|
|
5
|
+
$size: "small" | "large";
|
|
6
|
+
$disabled?: boolean;
|
|
7
|
+
}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
|
|
8
|
+
export declare const ContainedButton: import("@emotion/styled").StyledComponent<{
|
|
9
|
+
theme?: import("@emotion/react").Theme;
|
|
10
|
+
as?: React.ElementType;
|
|
11
|
+
} & {
|
|
12
|
+
$size: "small" | "large";
|
|
13
|
+
$disabled?: boolean;
|
|
14
|
+
} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
15
|
+
theme?: import("@emotion/react").Theme;
|
|
16
|
+
} & {
|
|
17
|
+
$color: string;
|
|
18
|
+
$textColor: string;
|
|
19
|
+
}, {}, {}>;
|
|
20
|
+
export declare const OutlinedButton: import("@emotion/styled").StyledComponent<{
|
|
21
|
+
theme?: import("@emotion/react").Theme;
|
|
22
|
+
as?: React.ElementType;
|
|
23
|
+
} & {
|
|
24
|
+
$size: "small" | "large";
|
|
25
|
+
$disabled?: boolean;
|
|
26
|
+
} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
27
|
+
theme?: import("@emotion/react").Theme;
|
|
28
|
+
} & {
|
|
29
|
+
$color: string;
|
|
30
|
+
}, {}, {}>;
|
|
31
|
+
export declare const TextButton: import("@emotion/styled").StyledComponent<{
|
|
32
|
+
theme?: import("@emotion/react").Theme;
|
|
33
|
+
as?: React.ElementType;
|
|
34
|
+
} & {
|
|
35
|
+
$size: "small" | "large";
|
|
36
|
+
$disabled?: boolean;
|
|
37
|
+
} & import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
38
|
+
theme?: import("@emotion/react").Theme;
|
|
39
|
+
} & {
|
|
40
|
+
$color: string;
|
|
41
|
+
}, {}, {}>;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from "./Button";
|
|
2
|
+
export * from "./ButtonInterfaces";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Interpolation, Theme } from "@emotion/react";
|
|
2
|
-
import
|
|
2
|
+
import { PropsWithChildren } from "react";
|
|
3
3
|
export type TCardSectionProps = PropsWithChildren & {
|
|
4
4
|
sx?: Interpolation<Theme>;
|
|
5
5
|
onClick?: (e: React.MouseEvent<HTMLElement>) => void;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export * from "./Card";
|
|
2
|
+
export * from "./CardInterfaces";
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { TCellValues } from "../Table";
|
|
2
|
+
import { TDataGridProps, TDataGridRow } from "./DataGridInterfaces";
|
|
3
|
+
export declare const DataGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TDataGridProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ColumnDef } from "@tanstack/react-table";
|
|
2
|
+
import { TCellValues } from "../Table";
|
|
3
|
+
export type TDataGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = {
|
|
4
|
+
columns: ColumnDef<TDataGridRow<Cell>, Cell>[];
|
|
5
|
+
data: Row[] | undefined;
|
|
6
|
+
};
|
|
7
|
+
export type TDataGridRow<Cell extends TCellValues> = {
|
|
8
|
+
[key: string]: Cell;
|
|
9
|
+
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
import { TDrawerProps } from "./DrawerInterfaces";
|
|
3
|
+
export declare const Drawer: ({ anchor, isOpen: isOpenProp, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerColor, triggerHoverColor, onOpen, onClose, zIndex, hideTrigger, sx, }: TDrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Interpolation, Theme } from "@emotion/react";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
export type TDrawerProps = {
|
|
4
|
+
/** Position of the drawer */
|
|
5
|
+
anchor: "top" | "right" | "bottom" | "left";
|
|
6
|
+
/** Optional state value to control the component */
|
|
7
|
+
isOpen?: boolean;
|
|
8
|
+
/** Trigger showed when drawer is closed */
|
|
9
|
+
closedTrigger?: ReactNode;
|
|
10
|
+
/** Trigger showed when drawer is open */
|
|
11
|
+
openTrigger?: ReactNode;
|
|
12
|
+
/** Component to be rendered when Drawer is open */
|
|
13
|
+
openContent?: ReactNode;
|
|
14
|
+
/** Component to be rendered when Drawer is closed */
|
|
15
|
+
closedContent?: ReactNode;
|
|
16
|
+
/** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
|
|
17
|
+
minOpen?: number;
|
|
18
|
+
/** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
|
|
19
|
+
maxOpen?: number;
|
|
20
|
+
/** Background color */
|
|
21
|
+
bgColor?: string;
|
|
22
|
+
/** Trigger Color */
|
|
23
|
+
triggerColor?: string;
|
|
24
|
+
/** Trigger hover color */
|
|
25
|
+
triggerHoverColor?: string;
|
|
26
|
+
/** Hide the default thumb trigger */
|
|
27
|
+
hideTrigger?: boolean;
|
|
28
|
+
/** Set a custom z-index */
|
|
29
|
+
zIndex?: number;
|
|
30
|
+
sx?: Interpolation<Theme>;
|
|
31
|
+
onOpen?: () => void;
|
|
32
|
+
onClose?: () => void;
|
|
33
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export declare const DrawerBody: import("@emotion/styled").StyledComponent<{
|
|
2
|
+
theme?: import("@emotion/react").Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
} & {
|
|
5
|
+
$anchor: "top" | "right" | "bottom" | "left";
|
|
6
|
+
$isOpen: boolean;
|
|
7
|
+
$minOpen?: string;
|
|
8
|
+
$maxOpen?: string;
|
|
9
|
+
$bgColor?: string;
|
|
10
|
+
$zIndex?: number;
|
|
11
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
12
|
+
export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
|
|
13
|
+
theme?: import("@emotion/react").Theme;
|
|
14
|
+
as?: React.ElementType;
|
|
15
|
+
} & {
|
|
16
|
+
$anchor: "top" | "right" | "bottom" | "left";
|
|
17
|
+
$isOpen: boolean;
|
|
18
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
19
|
+
export declare const Trigger: import("@emotion/styled").StyledComponent<{
|
|
20
|
+
theme?: import("@emotion/react").Theme;
|
|
21
|
+
as?: React.ElementType;
|
|
22
|
+
} & {
|
|
23
|
+
$anchor: "top" | "right" | "bottom" | "left";
|
|
24
|
+
$bgColor?: string;
|
|
25
|
+
$triggerColor?: string;
|
|
26
|
+
$triggerHoverColor?: string;
|
|
27
|
+
$hideTrigger: boolean;
|
|
28
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,43 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @property {string} value - The value displayed in the dropdown item
|
|
5
|
-
* @property {string} color - The color of the dropdown item
|
|
6
|
-
* @property {string} textColor - The text color of the dropdown item
|
|
7
|
-
* @property {DropdownItem[]} children - The children of the dropdown item
|
|
8
|
-
* @property {() => void} onClick - The onClick handler of the dropdown item
|
|
9
|
-
*/
|
|
10
|
-
export type DropdownItem = {
|
|
11
|
-
/** The value displayed in the item */
|
|
12
|
-
value: string;
|
|
13
|
-
/** The color of the item */
|
|
14
|
-
bgColor?: string;
|
|
15
|
-
/** The text color of the item */
|
|
16
|
-
textColor?: string;
|
|
17
|
-
/** The hover color of the item */
|
|
18
|
-
hoverColor?: string;
|
|
19
|
-
/** The children of the item */
|
|
20
|
-
children?: DropdownItem[];
|
|
21
|
-
/** Wether the item is hidden or not */
|
|
22
|
-
isHidden?: boolean;
|
|
23
|
-
/** Wether the dropdown should close when the item is clicked */
|
|
24
|
-
closeOnClick?: boolean;
|
|
25
|
-
/** The onClick handler of the item */
|
|
26
|
-
onClick?: () => void;
|
|
27
|
-
};
|
|
28
|
-
export type DropdownProps = {
|
|
29
|
-
/** The content of the dropdown */
|
|
30
|
-
content: DropdownItem[];
|
|
31
|
-
/** The trigger element of the dropdown. Clicking on this item will open the dropdown */
|
|
32
|
-
trigger: React.ReactNode;
|
|
33
|
-
/** The color of the dropdown */
|
|
34
|
-
bgColor?: string;
|
|
35
|
-
/** The hover color of the dropdown */
|
|
36
|
-
hoverColor?: string;
|
|
37
|
-
/** Controls wether the dropdown should extend towards the left or the right */
|
|
38
|
-
direction?: "left" | "right";
|
|
39
|
-
/** The mobile breakpoint, by default it's 768px */
|
|
40
|
-
mobileBreakpoint?: number;
|
|
41
|
-
};
|
|
42
|
-
export declare const DropdownDesktop: (props: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
43
|
-
export declare const Dropdown: (props: DropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { TDropdownProps } from "./DropdownInterfaces";
|
|
2
|
+
export declare const Dropdown: (props: TDropdownProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @property {string} value - The value displayed in the dropdown item
|
|
3
|
+
* @property {string} color - The color of the dropdown item
|
|
4
|
+
* @property {string} textColor - The text color of the dropdown item
|
|
5
|
+
* @property {DropdownItem[]} children - The children of the dropdown item
|
|
6
|
+
* @property {() => void} onClick - The onClick handler of the dropdown item
|
|
7
|
+
*/
|
|
8
|
+
export type TDropdownItem = {
|
|
9
|
+
/** The value displayed in the item */
|
|
10
|
+
value: string;
|
|
11
|
+
/** The color of the item */
|
|
12
|
+
bgColor?: string;
|
|
13
|
+
/** The text color of the item */
|
|
14
|
+
textColor?: string;
|
|
15
|
+
/** The hover color of the item */
|
|
16
|
+
hoverColor?: string;
|
|
17
|
+
/** The children of the item */
|
|
18
|
+
children?: TDropdownItem[];
|
|
19
|
+
/** Wether the item is hidden or not */
|
|
20
|
+
isHidden?: boolean;
|
|
21
|
+
/** Wether the dropdown should close when the item is clicked */
|
|
22
|
+
closeOnClick?: boolean;
|
|
23
|
+
/** The onClick handler of the item */
|
|
24
|
+
onClick?: () => void;
|
|
25
|
+
};
|
|
26
|
+
export type TDropdownProps = {
|
|
27
|
+
/** The content of the dropdown */
|
|
28
|
+
content: TDropdownItem[];
|
|
29
|
+
/** The trigger element of the dropdown. Clicking on this item will open the dropdown */
|
|
30
|
+
trigger: React.ReactNode;
|
|
31
|
+
/** The color of the dropdown */
|
|
32
|
+
bgColor?: string;
|
|
33
|
+
/** The hover color of the dropdown */
|
|
34
|
+
hoverColor?: string;
|
|
35
|
+
/** The border color */
|
|
36
|
+
borderColor?: string;
|
|
37
|
+
/** The border width */
|
|
38
|
+
borderWidth?: string;
|
|
39
|
+
/** Controls wether the dropdown should extend towards the left or the right */
|
|
40
|
+
direction?: "left" | "right";
|
|
41
|
+
/** Controls whether the dropdown body should have absolute or fixed position
|
|
42
|
+
* By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
|
|
43
|
+
* Use fixed if you want the body to be above the entire page, regardless of the parent element.
|
|
44
|
+
*/
|
|
45
|
+
menuPosition?: "absolute" | "fixed";
|
|
46
|
+
/** The mobile breakpoint, by default it's 768px */
|
|
47
|
+
mobileBreakpoint?: number;
|
|
48
|
+
};
|
|
49
|
+
export type TDropdownItemProps = TDropdownItem & {
|
|
50
|
+
direction?: string;
|
|
51
|
+
closeBody: () => void;
|
|
52
|
+
};
|
|
@@ -13,6 +13,7 @@ export declare const DropdownBody: import("@emotion/styled").StyledComponent<{
|
|
|
13
13
|
$direction: string;
|
|
14
14
|
$isOpen: boolean;
|
|
15
15
|
$bgColor: string;
|
|
16
|
+
$position: "absolute" | "fixed";
|
|
16
17
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
17
18
|
export declare const DropdownItemInnerContainer: import("@emotion/styled").StyledComponent<{
|
|
18
19
|
theme?: import("@emotion/react").Theme;
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from "./Dropdown";
|
|
2
|
+
export * from "./DropdownInterfaces";
|
|
@@ -8,4 +8,4 @@ export type TIndicatorInstanceProps = {
|
|
|
8
8
|
export type TIndicatorProps = {
|
|
9
9
|
variant: TIndicatorVariants;
|
|
10
10
|
} & TIndicatorInstanceProps;
|
|
11
|
-
export type TIndicatorVariants = "live" | "success" | "warning" | "error";
|
|
11
|
+
export type TIndicatorVariants = "live" | "success" | "warning" | "error" | "neutral";
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export * from "./IndicatorInterfaces";
|
|
2
|
+
export * from "./Indicator";
|
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
-
/** Classname given to the container div */
|
|
1
|
+
export declare const InputField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
|
|
4
2
|
containerClassName?: string;
|
|
5
|
-
/** Disables the input */
|
|
6
|
-
isDisabled?: boolean;
|
|
7
|
-
/** The color of the input */
|
|
8
3
|
color?: string;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
12
|
-
export declare const InputField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
|
|
13
|
-
export {};
|
|
4
|
+
sx?: import("@emotion/react").Interpolation<import("@emotion/react").Theme>;
|
|
5
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Interpolation, Theme } from "@emotion/react";
|
|
2
|
+
export type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
+
/** Classname given to the container div */
|
|
4
|
+
containerClassName?: string;
|
|
5
|
+
/** The color of the input */
|
|
6
|
+
color?: string;
|
|
7
|
+
/** Change the styles of the input field */
|
|
8
|
+
sx?: Interpolation<Theme>;
|
|
9
|
+
};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from "./InputField";
|
|
2
|
+
export * from "./InputFieldInterfaces";
|
|
@@ -1,19 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
children: React.ReactNode;
|
|
5
|
-
/** Cointrols whether the modal should be open or not. */
|
|
6
|
-
isOpen: boolean;
|
|
7
|
-
/** The handler to be called when the modal is closed */
|
|
8
|
-
onClose: () => void;
|
|
9
|
-
/** The handler to be called when the modal is opened */
|
|
10
|
-
onOpen?: () => void;
|
|
11
|
-
/** custom width */
|
|
12
|
-
width?: string;
|
|
13
|
-
/** custom height */
|
|
14
|
-
height?: string;
|
|
15
|
-
/** custom css */
|
|
16
|
-
sx?: React.CSSProperties;
|
|
17
|
-
}
|
|
18
|
-
declare const Modal: React.FC<ModalProps>;
|
|
19
|
-
export default Modal;
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { TModalProps } from "./ModalInterfaces";
|
|
3
|
+
export declare const Modal: FC<TModalProps>;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export type TModalProps = {
|
|
2
|
+
/** The content of the modal */
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
/** Cointrols whether the modal should be open or not. */
|
|
5
|
+
isOpen: boolean;
|
|
6
|
+
/** The handler to be called when the modal is closed */
|
|
7
|
+
onClose: () => void;
|
|
8
|
+
/** The handler to be called when the modal is opened */
|
|
9
|
+
onOpen?: () => void;
|
|
10
|
+
/** custom width */
|
|
11
|
+
width?: string;
|
|
12
|
+
/** custom height */
|
|
13
|
+
height?: string;
|
|
14
|
+
/** custom css */
|
|
15
|
+
sx?: React.CSSProperties;
|
|
16
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
1
|
+
export * from "./Modal";
|
|
2
|
+
export * from "./ModalInterfaces";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
import { TMultiViewGridProps } from "./MultiViewListInterfaces";
|
|
3
|
+
import { TCellValues } from "../Table";
|
|
4
|
+
import { TDataGridRow } from "../DataGrid";
|
|
5
|
+
export declare const MultiViewGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TMultiViewGridProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/** @jsxImportSource @emotion/react */
|
|
2
|
+
import { TMultiViewListProps } from "./MultiViewListInterfaces";
|
|
3
|
+
import { TCellValues, TTableRow } from "../Table";
|
|
4
|
+
export declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { TCellValues, TTableProps, TTableRow } from "../Table";
|
|
2
|
+
import { TDataGridProps, TDataGridRow } from "../DataGrid/DataGridInterfaces";
|
|
3
|
+
import { Interpolation, Theme } from "@emotion/react";
|
|
4
|
+
export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
|
|
5
|
+
mode: "table" | "cards";
|
|
6
|
+
cardComponent: (item: Row, index: number) => React.ReactNode;
|
|
7
|
+
cardsWidth?: string;
|
|
8
|
+
cardsHeight?: string;
|
|
9
|
+
sx?: Interpolation<Theme>;
|
|
10
|
+
};
|
|
11
|
+
export type TMultiViewGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = TDataGridProps<Cell, Row> & {
|
|
12
|
+
mode: "table" | "cards";
|
|
13
|
+
cardComponent: (item: Row, index: number) => React.ReactNode;
|
|
14
|
+
cardsWidth?: string;
|
|
15
|
+
cardsHeight?: string;
|
|
16
|
+
sx?: Interpolation<Theme>;
|
|
17
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export declare const StyledCardsContainer: import("@emotion/styled").StyledComponent<{
|
|
2
|
+
theme?: import("@emotion/react").Theme;
|
|
3
|
+
as?: React.ElementType;
|
|
4
|
+
} & {
|
|
5
|
+
$cardsWidth: string;
|
|
6
|
+
$cardsHeight: string;
|
|
7
|
+
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
1
|
+
export * from "./SingleSelect";
|
|
2
|
+
export * from "./MultiSelect";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export type
|
|
1
|
+
export type TSliderProps = {
|
|
2
2
|
/** The values of the slider. */
|
|
3
3
|
values: number[];
|
|
4
4
|
/** The minimum value of the slider. */
|
|
@@ -30,4 +30,4 @@ export type SliderProps = {
|
|
|
30
30
|
/** Wether the thumbs can overlap */
|
|
31
31
|
allowOverlap?: boolean;
|
|
32
32
|
};
|
|
33
|
-
export declare const Slider: (props:
|
|
33
|
+
export declare const Slider: (props: TSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from "./Slider";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
|
|
2
|
+
value: string | number;
|
|
3
|
+
onChange: (value: string | number) => void;
|
|
4
|
+
debounce?: number;
|
|
5
|
+
} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { TCellValues, TTableProps, TTableRow } from "./TableInterfaces";
|
|
2
|
+
export declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const renderCell: (value: string | number | boolean | null) => import("@emotion/react/jsx-runtime").JSX.Element;
|