@kwantis-id3/frontend-library 1.0.0-rc.4 → 1.0.0-rc.41

package/dist/esm/types/components/MultiViewList/MultiViewListInterfaces.d.ts

@@ -1,6 +1,17 @@
-import React from "react";
 import { TCellValues, TTableProps, TTableRow } from "../Table";
+import { TDataGridProps, TDataGridRow } from "../DataGrid/DataGridInterfaces";
+import { Interpolation, Theme } from "@emotion/react";
 export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";
-    cardComponent: (item: Row) => React.ReactNode;
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
+};
+export type TMultiViewGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = TDataGridProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
 };

package/dist/esm/types/components/MultiViewList/MultiViewListStyled.d.ts

@@ -1,4 +1,7 @@
 export declare const StyledCardsContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
+} & {
+    $cardsWidth: string;
+    $cardsHeight: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/MultiViewList/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./MultiViewListInterfaces";
-export { MultiViewList } from "./MultiViewList";
+export * from "./MultiViewList";
+export * from "./MultiViewGrid";

package/dist/esm/types/components/SelectFilter/index.d.ts

@@ -1,2 +1,2 @@
-export { SingleSelect, SingleSelectProps } from "./SingleSelect";
-export { MultiSelect, MultiSelectProps } from "./MultiSelect";
+export * from "./SingleSelect";
+export * from "./MultiSelect";

package/dist/esm/types/components/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-export type SliderProps = {
+export type TSliderProps = {
     /** The values of the slider. */
     values: number[];
     /** The minimum value of the slider. */
@@ -30,4 +30,4 @@ export type SliderProps = {
     /** Wether the thumbs can overlap */
     allowOverlap?: boolean;
 };
-export declare const Slider: (props: SliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Slider: (props: TSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Slider/index.d.ts

@@ -1 +1 @@
-export { Slider, SliderProps } from "./Slider";
+export * from "./Slider";

package/dist/esm/types/components/Switch/Switch.d.ts

@@ -0,0 +1,2 @@
+import { TSwitchProps } from "./SwitchInterfaces";
+export declare const Switch: (props: TSwitchProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Switch/SwitchInterfaces.d.ts

@@ -0,0 +1,17 @@
+export type TSwitchProps = {
+    /** Whether the switch is checked (controlled) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback function when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** The color of switch when checked */
+    color?: string;
+    /** The label for the switch */
+    label?: string;
+    /** Size of switch */
+    size?: "small" | "medium" | "large";
+    /** HTML id */
+    htmlId?: string;
+    className?: string;
+};

package/dist/esm/types/components/Switch/SwitchStyled.d.ts

@@ -0,0 +1,35 @@
+export declare const SwitchContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchSlider: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const SwitchTrack: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $checkedColor: string;
+    $uncheckedColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchThumb: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $checked: boolean;
+    $thumbColor: string;
+    $size: "small" | "medium" | "large";
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SwitchLabel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/dist/esm/types/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Switch";
+export * from "./SwitchInterfaces";

package/dist/esm/types/components/Table/DebouncedFilter.d.ts

@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import { Column, Table } from "@tanstack/react-table";
-import { TCellValues, TTableRow } from "./TableInterfaces";
-export declare function DebouncedFilter<T extends TTableRow<TCellValues>>({ column, table, }: {
+export declare function DebouncedFilter<T>({ column, table, }: {
     column: Column<T, unknown>;
     table: Table<T>;
 }): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Table/DebouncedInput.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
     value: string | number;
     onChange: (value: string | number) => void;

package/dist/esm/types/components/Table/index.d.ts

@@ -1,2 +1,2 @@
 export * from "./TableInterfaces";
-export { Table, renderCell } from "./Table";
+export * from "./Table";

package/dist/esm/types/components/Tag/Tag.d.ts

@@ -1,24 +1,4 @@
+/** @jsxImportSource @emotion/react */
 import { FC } from "react";
-import { ITagColors } from "../ThemeContext/ThemeInterfaces";
-import { Interpolation } from "@emotion/styled";
-import { Theme } from "@emotion/react";
-export type TTagProps = {
-    text: string;
-    /**
-     * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
-     * Otherwise, the `variant` will be used to determine the colors.
-     *
-     * The variants are the keys of the interface `@see ITagColors`, which by default are:
-     * - `default`
-     * - `warm`
-     * - `cold`
-     * - `paper`
-     */
-    variant: keyof ITagColors | "custom";
-    /** To use this prop, the variant must be set to `custom` */
-    bgColor?: string;
-    /** To use this prop, the variant must be set to `custom` */
-    textColor?: string;
-    sx?: Interpolation<Theme>;
-};
+import { TTagProps } from "./TagInterfaces";
 export declare const Tag: FC<TTagProps>;

package/dist/esm/types/components/Tag/TagInterfaces.d.ts

@@ -0,0 +1,22 @@
+import { Interpolation } from "@emotion/react";
+import { Theme } from "@emotion/react/dist/declarations/src";
+import { ITagColors } from "../ThemeContext";
+export type TTagProps = {
+    text: string;
+    /**
+     * If `variant` is set to `custom`, `bgColor` and `textColor` will be used.
+     * Otherwise, the `variant` will be used to determine the colors.
+     *
+     * The variants are the keys of the interface `@see ITagColors`, which by default are:
+     * - `default`
+     * - `warm`
+     * - `cold`
+     * - `paper`
+     */
+    variant: keyof ITagColors | "custom";
+    /** To use this prop, the variant must be set to `custom` */
+    bgColor?: string;
+    /** To use this prop, the variant must be set to `custom` */
+    textColor?: string;
+    sx?: Interpolation<Theme>;
+};

package/dist/esm/types/components/Tag/TagStyled.d.ts

@@ -0,0 +1,7 @@
+export declare const StyledTag: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $bgColor: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/esm/types/components/Tag/index.d.ts

@@ -1 +1,2 @@
-export { Tag, TTagProps } from "./Tag";
+export * from "./Tag";
+export * from "./TagInterfaces";

package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
-import { IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
+import { PropsWithChildren, ReactElement } from "react";
+import { ICommonColors, IPalette, IThemeContextProps, IThemeContextValue } from "./ThemeInterfaces";
+export declare const commonColors: ICommonColors;
 export declare const defaultLightPalette: IPalette;
 export declare const defaultDarkPalette: IPalette;
-export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: React.PropsWithChildren<IThemeContextProps>) => JSX.Element;
+export declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactElement;
 export declare const useThemeContext: () => IThemeContextValue;

package/dist/esm/types/components/ThemeContext/ThemeInterfaces.d.ts

@@ -62,6 +62,8 @@ export interface IIndicatorColors {
     warningFill: string;
     error: string;
     errorFill: string;
+    neutral: string;
+    neutralFill: string;
 }
 export interface IPalette {
     /** Application background */

package/dist/esm/types/components/TreeView/ControlledTreeView.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource @emotion/react */
+import { FC } from "react";
+import { TControlledTreeViewProps } from "./TreeViewInterfaces";
+export declare const ControlledTreeView: FC<TControlledTreeViewProps>;

package/dist/esm/types/components/TreeView/TreeUtils.d.ts

@@ -0,0 +1,22 @@
+import { TTreeViewItem } from "./TreeViewInterfaces";
+/**
+ *
+ * @param items searchable nodes
+ * @returns all the root items
+ */
+export declare const getRootItems: (items: TTreeViewItem[]) => TTreeViewItem[];
+/**
+ *
+ * @param items searchable nodes
+ * @param parentId the id of the parent node
+ * @returns all the children of the parent node
+ */
+export declare const getChildrenItems: (items: TTreeViewItem[], parentId: string) => TTreeViewItem[];
+/**
+ *
+ * @param items searchable nodes
+ * @param searchTerm search term
+ * @returns all the matching nodes and their ancestors
+ */
+export declare function searchWithAncestors(items: TTreeViewItem[], searchTerm: string): TTreeViewItem[];
+export declare const isRootItem: (items: TTreeViewItem[], item: TTreeViewItem) => boolean;

package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts

@@ -0,0 +1,83 @@
+import { Interpolation, Theme } from "@emotion/react";
+/**
+ * A callback to customize how items are rendered
+ * @property isOpen: A boolean indicating if the item is expanded
+ * @property hasChildren: A boolean indicating if the item has children
+ * @property item: the entire item object
+ */
+export type TCustomRenderProps = {
+    isOpen: boolean;
+    item: TTreeViewItem;
+};
+/**
+ * A callback to customize how the content of the items is rendered
+ * @extends TCustomRenderProps
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
+ */
+export type TRenderTriggerProps = TCustomRenderProps & {
+    icon: React.ReactNode;
+    title: React.ReactNode;
+};
+type TTreeItemFunctions = {
+    /** A callback to customize how the titles are rendered */
+    renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the icons are rendered */
+    renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the content of the items is rendered */
+    renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
+    /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
+    onFocusItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
+    onSelectItems?: (item: string[]) => void;
+    /** A callback executed when an item is expanded */
+    onExpandItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is collapsed */
+    onCollapseItem?: (item: TTreeViewItem) => void;
+    /** A callback to handle the expansion of items without children */
+    onMissingChildren?: (item: TTreeViewItem) => void;
+};
+type TTreeViewProps = TTreeItemFunctions & {
+    /** An array representing the items that the tree needs to render */
+    items: TTreeViewItem[];
+    /** Disable multi-selection possibility */
+    isMultiSelectionDisabled?: boolean;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+};
+export type TUncontrolledTreeViewProps = TTreeViewProps & {
+    items: TTreeViewItem[];
+    /** A search string used to filter the items. */
+    searchString?: string;
+    /** The ids of the items that should be expanded by default */
+    defaultExpandedItems?: string[];
+    /** Only allow one root item to be expanded at a time */
+    singleRootExpand?: boolean;
+};
+export type TControlledTreeViewProps = TTreeViewProps & {
+    /** The current state of the Tree View. */
+    viewState: TViewState;
+};
+export type TViewState = {
+    /** The list of ids of items that are selected */
+    selectedItems?: string[];
+    /** The list of ids of items that are expanded */
+    expandedItems?: string[];
+    /** The focused item */
+    focusedItem?: string;
+};
+export type TTreeViewItem = TTreeItemFunctions & {
+    /** Item identifier */
+    id: string;
+    /** Item name */
+    name: string;
+    /** The possible children of this item */
+    children?: string[];
+    /** If the item should be rendered as a folder even with no children */
+    isFolder?: boolean;
+    /** A callback to fetch children asynchronously */
+    childrenAsync?: () => Promise<TTreeViewItem[]>;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+};
+export {};

package/dist/esm/types/components/TreeView/TreeViewSyled.d.ts

@@ -0,0 +1,24 @@
+export declare const TreeView: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItemsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const TreeItemTrigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isFocused: boolean;
+    $isExpanded: boolean;
+    $isSelected: boolean;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const TreeItemChildren: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    $isExpanded: boolean;
+}, {}, {}>;

package/dist/esm/types/components/TreeView/UncontrolledTreeView.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TUncontrolledTreeViewProps } from "./TreeViewInterfaces";
+export declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;

package/dist/esm/types/components/TreeView/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./TreeViewInterfaces";
+export * from "./ControlledTreeView";
+export * from "./UncontrolledTreeView";

package/dist/esm/types/components/index.d.ts

@@ -1,13 +1,18 @@
-export { Button, ButtonProps } from "./Button";
+export * from "./Button";
 export * from "./ThemeContext";
-export { Accordion, AccordionProps } from "./Accordion";
-export { InputField } from "./InputField";
-export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
-export { Slider, SliderProps } from "./Slider";
-export { Dropdown, DropdownProps, DropdownItem } from "./Dropdown";
-export { Modal } from "./Modal";
-export { TIndicatorProps, TIndicatorVariants, Indicator } from "./Indicator";
-export { Tag, TTagProps } from "./Tag";
-export { Card, CardHeader, CardContent, CardFooter, CardIndicators, CardMediaSection, TCardSectionProps, } from "./Card";
-export { Table, renderCell, TTableProps, TTableCell, TCellValues, TTableRow, } from "./Table";
-export { MultiViewList, TMultiViewListProps } from "./MultiViewList";
+export * from "./Accordion";
+export * from "./InputField";
+export * from "./SelectFilter";
+export * from "./Slider";
+export * from "./Dropdown";
+export * from "./Modal";
+export * from "./Indicator";
+export * from "./Tag";
+export * from "./Card";
+export * from "./Table";
+export * from "./DataGrid";
+export * from "./MultiViewList";
+export * from "./TreeView";
+export * from "./Drawer";
+export * from "./Checkbox";
+export * from "./Switch";

package/dist/esm/types/utils/colors.d.ts

@@ -6,15 +6,25 @@
 export declare const getContrastColor: (color: string) => string;
 /**
  *
- * @param color the color to darken
+ * @param color a color
  * @param strength the strength (0-100) to darken the color
  * @returns the color darkened by the strength
  */
 export declare const darkenColor: (color: string, strength?: number) => string;
 /**
  *
- * @param color the color to lighten
+ * @param color a color
  * @param strength the strength (0-100) to lighten the color
  * @returns the color lightened by the strength
  */
 export declare const lightenColor: (color: string, strength?: number) => string;
+/**
+ * @param color a color
+ * @returns the hover color, based on if the color is dark or light
+ */
+export declare const getHoverColor: (color: string) => string;
+/**
+ * @param color a color
+ * @returns the active color, based on if the color is dark or light
+ */
+export declare const getActiveColor: (color: string) => string;

package/dist/esm/types/utils/index.d.ts

@@ -1,7 +1,4 @@
-import useIsMobile from "./isMobile";
-export { transientOptions } from "./transientOptions";
-export { styled } from "./styled";
-export { useIsMobile };
-export { getContrastColor } from "./colors";
-export { darkenColor } from "./colors";
-export { lightenColor } from "./colors";
+export * from "./transientOptions";
+export * from "./isMobile";
+export * from "./colors";
+export * from "./usePrefersColorScheme";

package/dist/esm/types/utils/isMobile.d.ts

@@ -3,5 +3,4 @@
  * @param {number=} mobileBreakpoint breakpoint width to check against
  * @returns boolean
  */
-declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
-export default useIsMobile;
+export declare const useIsMobile: (mobileBreakpoint?: number) => boolean;

package/dist/esm/types/utils/testing.d.ts

@@ -1,8 +1,8 @@
 import { TCellValues, TTableRow } from "../components/index";
-import React from "react";
 import { IThemeContextProps } from "../components/ThemeContext/ThemeInterfaces";
 import { RenderHookResult, RenderResult } from "@testing-library/react";
 import { ColumnDef } from "@tanstack/react-table";
+import { TDataGridRow } from "../components/DataGrid/DataGridInterfaces";
 export declare const renderWithTheme: (ui: React.ReactElement, themeProps?: IThemeContextProps) => RenderResult;
 export declare function renderHookWithTheme<T, R>(hook: (props: T) => R, themeProps?: IThemeContextProps): RenderHookResult<R, T>;
 export declare const headingStyle: {
@@ -11,6 +11,25 @@ export declare const headingStyle: {
     fontWeight: string;
 };
 export declare const templateColumns: ColumnDef<TTableRow<TCellValues>, TCellValues>[];
+export declare const templateDataGridColumns: ColumnDef<TDataGridRow<TCellValues>, TCellValues>[];
+export type TWellData = {
+    [key: string]: string | number | boolean | null;
+    well_id: string;
+    id_t_well: number;
+    well_name: string;
+    data_quality: number;
+    is_live: boolean;
+    country: string;
+    business_unit: string;
+    spud_date: string;
+    rig_contractor: string;
+    rig_name: string;
+    rig_type: string;
+    last_sensordate: string | null;
+    last_ddr_date: string | null;
+    mudlog_data_quality: number;
+};
+export declare const templateDataGridData: TWellData[];
 export declare const templateTableData: {
     cells: {
         well_name: {
@@ -52,3 +71,4 @@ export declare const templateTableData: {
     };
 }[];
 export declare const TemplateCard: (item: TTableRow<TCellValues>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TemplateCardGrid: (item: TDataGridRow<TCellValues>) => import("@emotion/react/jsx-runtime").JSX.Element;