@kwantis-id3/frontend-library 1.0.0-rc.3 → 1.0.0-rc.5

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

@@ -1,37 +1,3 @@
-/** @jsxImportSource @emotion/react */
-import { Interpolation } from "@emotion/styled";
 import React from "react";
-import { Theme } from "@emotion/react";
-export type AccordionProps = {
-    /** Text of the accordion trigger */
-    title: string;
-    /** Content of the accordion */
-    children: React.ReactNode;
-    /** Custom trigger component */
-    customTrigger?: React.ReactNode;
-    /** Works only if uncontrolled (isOpen props is not present) */
-    defaultOpen?: boolean;
-    /** Color of the accordion */
-    color?: string;
-    /** Color of the icon */
-    iconColor?: string;
-    /** Color of the divider */
-    dividerColor?: string;
-    /** Hide the icon */
-    hideIcon?: boolean;
-    /** Hide the divider */
-    hideDivider?: boolean;
-    /** Pass your state value here if the Accordion needs to be Controlled */
-    isOpen?: boolean;
-    /** Lazy render the content of the accordion */
-    isLazy?: boolean;
-    /** onClick handler */
-    onClick?: () => void;
-    /** onOpen handler */
-    onOpen?: () => void;
-    /** onClose handler */
-    onClose?: () => void;
-    /** Custom styles */
-    sx?: Interpolation<Theme>;
-};
-export declare const Accordion: (props: AccordionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+import { TAccordionProps } from "./AccordionInterfaces";
+export declare const Accordion: React.FC<TAccordionProps>;

package/dist/esm/types/components/Accordion/AccordionInterfaces.d.ts

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from "react";
+export type TAccordionProps = PropsWithChildren & {
+    /** Title to be used if no custom trigger is passed */
+    title: string;
+    /** Pass your state value here if the Accordion needs to be Controlled */
+    isOpen?: boolean;
+    /** Default open state if the accordion is Uncontrolled */
+    defaultOpen?: boolean;
+    /** Callback function to be called when the Accordion is clicked */
+    onClick?: () => void;
+    /** Callback function to be called when the Accordion opens */
+    onOpen?: () => void;
+    /** Callback function to be called when the Accordion closes */
+    onClose?: () => void;
+    /** Custom trigger element */
+    trigger?: (isOpen: boolean) => React.ReactNode;
+    /** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
+     * @default "default"
+     */
+    variant?: "default" | "light";
+};

package/dist/esm/types/components/Accordion/AccordionStyled.d.ts

@@ -1,23 +1,32 @@
-export declare const Divider: import("@emotion/styled").StyledComponent<{
+export declare const AccordionGroup: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & {
-    $color: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TitleDiv: import("@emotion/styled").StyledComponent<{
+export declare const StyledAccordion: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    $color: string;
-    $textColor: string;
+    $variant: "default" | "light";
+    $isOpen: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+export declare const StyledAccordionHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    $iconColor: string;
+    $variant: "default" | "light";
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledAccordionContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isOpen: boolean;
+    $variant: "default" | "light";
+    $defaultHeight: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TitleH2: import("@emotion/styled").StyledComponent<{
+export declare const Icon: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
+} & {
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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

@@ -1 +1,2 @@
-export { Accordion, AccordionProps } from "./Accordion";
+export { Accordion } from "./Accordion";
+export * from "./AccordionInterfaces";

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

@@ -12,6 +12,8 @@ export type ButtonProps = {
     sx?: Interpolation<Theme>;
     /** Variant of the button, either `contained`, `outlined` or `text` */
     variant?: ButtonVariants;
+    /** The button size; either "large" or "small" */
+    size?: "small" | "large";
     /** onClick handler */
     onClick?: () => void;
     className?: string;

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

@@ -0,0 +1,3 @@
+import { TMultiViewListProps } from "./MultiViewListInterfaces";
+import { TCellValues, TTableRow } from "../Table";
+export declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { TCellValues, TTableProps, TTableRow } from "../Table";
+export type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row) => React.ReactNode;
+};

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

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

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

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

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

@@ -0,0 +1,7 @@
+/** @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, }: {
+    column: Column<T, unknown>;
+    table: Table<T>;
+}): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function DebouncedInput({ value: initialValue, onChange, debounce, ...props }: {
+    value: string | number;
+    onChange: (value: string | number) => void;
+    debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">): import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { TCellValues, TTableProps, TTableRow } from "./TableInterfaces";
+export declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const renderCell: (value: string | number | boolean | null) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import { ColumnDef } from "@tanstack/react-table";
+export type TCellValues = string | number | boolean | null;
+export type TTableProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = {
+    columns: ColumnDef<Row, Cell>[];
+    data: Row[] | undefined;
+};
+export type TTableCell<T extends TCellValues> = {
+    value: T;
+    bgColor?: string | null;
+    textColor?: string | null;
+};
+export type TTableRow<T extends TCellValues> = {
+    info?: {
+        bgColor?: string | null;
+        textColor?: string | null;
+        [key: string]: string | number | boolean | null | undefined;
+    };
+    cells: {
+        [key: string]: TTableCell<T>;
+    };
+};

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

@@ -0,0 +1,14 @@
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTable: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $mobileBreakpoint: number;
+}, import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const StyledCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

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

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

@@ -1,6 +1,6 @@
 export { Button, ButtonProps } from "./Button";
 export * from "./ThemeContext";
-export { Accordion, AccordionProps } from "./Accordion";
+export { Accordion, TAccordionProps } from "./Accordion";
 export { InputField } from "./InputField";
 export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";
 export { Slider, SliderProps } from "./Slider";
@@ -9,3 +9,5 @@ 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";

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

@@ -1,5 +1,54 @@
+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";
 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: {
+    padding: string;
+    margin: string;
+    fontWeight: string;
+};
+export declare const templateColumns: ColumnDef<TTableRow<TCellValues>, TCellValues>[];
+export declare const templateTableData: {
+    cells: {
+        well_name: {
+            value: string;
+        };
+        is_live: {
+            value: boolean;
+        };
+        well_profile: {
+            value: string;
+        };
+        country: {
+            value: string;
+        };
+        spud: {
+            value: string;
+        };
+        rig: {
+            value: string;
+        };
+        rig_type: {
+            value: string;
+        };
+        bu: {
+            value: string;
+        };
+        contractor: {
+            value: string;
+        };
+        data_quality: {
+            value: number;
+        };
+        last_sensors_data: {
+            value: string;
+        };
+        last_ddr: {
+            value: string;
+        };
+    };
+}[];
+export declare const TemplateCard: (item: TTableRow<TCellValues>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { FC, PropsWithChildren } from 'react';
+import React__default, { PropsWithChildren, FC } from 'react';
 import { Interpolation, CreateStyled } from '@emotion/styled';
 import { Theme, Interpolation as Interpolation$1 } from '@emotion/react';
+import { ColumnDef } from '@tanstack/react-table';
 
 type ButtonVariants = "contained" | "outlined" | "text";
 type ButtonProps = {
@@ -14,6 +15,8 @@ type ButtonProps = {
     sx?: Interpolation<Theme>;
     /** Variant of the button, either `contained`, `outlined` or `text` */
     variant?: ButtonVariants;
+    /** The button size; either "large" or "small" */
+    size?: "small" | "large";
     /** onClick handler */
     onClick?: () => void;
     className?: string;
@@ -140,39 +143,28 @@ declare const defaultDarkPalette: IPalette;
 declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: React__default.PropsWithChildren<IThemeContextProps>) => JSX.Element;
 declare const useThemeContext: () => IThemeContextValue;
 
-type AccordionProps = {
-    /** Text of the accordion trigger */
+type TAccordionProps = PropsWithChildren & {
+    /** Title to be used if no custom trigger is passed */
     title: string;
-    /** Content of the accordion */
-    children: React__default.ReactNode;
-    /** Custom trigger component */
-    customTrigger?: React__default.ReactNode;
-    /** Works only if uncontrolled (isOpen props is not present) */
-    defaultOpen?: boolean;
-    /** Color of the accordion */
-    color?: string;
-    /** Color of the icon */
-    iconColor?: string;
-    /** Color of the divider */
-    dividerColor?: string;
-    /** Hide the icon */
-    hideIcon?: boolean;
-    /** Hide the divider */
-    hideDivider?: boolean;
     /** Pass your state value here if the Accordion needs to be Controlled */
     isOpen?: boolean;
-    /** Lazy render the content of the accordion */
-    isLazy?: boolean;
-    /** onClick handler */
+    /** Default open state if the accordion is Uncontrolled */
+    defaultOpen?: boolean;
+    /** Callback function to be called when the Accordion is clicked */
     onClick?: () => void;
-    /** onOpen handler */
+    /** Callback function to be called when the Accordion opens */
     onOpen?: () => void;
-    /** onClose handler */
+    /** Callback function to be called when the Accordion closes */
     onClose?: () => void;
-    /** Custom styles */
-    sx?: Interpolation<Theme>;
+    /** Custom trigger element */
+    trigger?: (isOpen: boolean) => React__default.ReactNode;
+    /** Variant of the Accordion. Default has everything wrapped in borders, while light just renders the content and the title without setting colors
+     * @default "default"
+     */
+    variant?: "default" | "light";
 };
-declare const Accordion: (props: AccordionProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+declare const Accordion: React__default.FC<TAccordionProps>;
 
 interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     /** Classname given to the container div */
@@ -424,6 +416,37 @@ declare const CardFooter: FC<TCardSectionProps>;
 declare const CardIndicators: FC<TCardSectionProps>;
 declare const CardMediaSection: FC<TCardSectionProps>;
 
+type TCellValues = string | number | boolean | null;
+type TTableProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = {
+    columns: ColumnDef<Row, Cell>[];
+    data: Row[] | undefined;
+};
+type TTableCell<T extends TCellValues> = {
+    value: T;
+    bgColor?: string | null;
+    textColor?: string | null;
+};
+type TTableRow<T extends TCellValues> = {
+    info?: {
+        bgColor?: string | null;
+        textColor?: string | null;
+        [key: string]: string | number | boolean | null | undefined;
+    };
+    cells: {
+        [key: string]: TTableCell<T>;
+    };
+};
+
+declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const renderCell: (value: string | number | boolean | null) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row) => React__default.ReactNode;
+};
+
+declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
  * Hook to check if the screen is mobile. The default breakpoint is 768px.
  * @param {number=} mobileBreakpoint breakpoint width to check against
@@ -463,4 +486,4 @@ declare const darkenColor: (color: string, strength?: number) => string;
  */
 declare const lightenColor: (color: string, strength?: number) => string;
 
-export { Accordion, AccordionProps, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, TCardSectionProps, TColorScale, TIndicatorProps, TIndicatorVariants, TTagProps, TThemeMode, Tag, ThemeContextProvider, darkenColor, defaultDarkPalette, defaultLightPalette, getContrastColor, lightenColor, styled, transientOptions, useIsMobile, useThemeContext };
+export { Accordion, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, SliderProps, TAccordionProps, TCardSectionProps, TCellValues, TColorScale, TIndicatorProps, TIndicatorVariants, TMultiViewListProps, TTableCell, TTableProps, TTableRow, TTagProps, TThemeMode, Table, Tag, ThemeContextProvider, darkenColor, defaultDarkPalette, defaultLightPalette, getContrastColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "1.0.0-rc.3",
+  "version": "1.0.0-rc.5",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -55,7 +55,7 @@
     "@storybook/testing-library": "0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.0.33",
     "@types/testing-library__jest-dom": "^5.14.5",
     "@types/tinycolor2": "^1.4.3",
@@ -82,12 +82,14 @@
     "vitest": "^3.0.5"
   },
   "peerDependencies": {
+    "@tanstack/react-table": "^8.0.0",
     "react": ">= 17.0.2"
   },
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
-    "dist"
+    "dist",
+    "src/types"
   ],
   "types": "dist/index.d.ts",
   "dependencies": {

package/src/types/emotion.d.ts

@@ -0,0 +1,8 @@
+import "@emotion/styled";
+import { IThemeContextValue } from "../components/ThemeContext/ThemeInterfaces";
+
+// override the default theme
+declare module "@emotion/react" {
+  // eslint-disable-next-line
+  export interface Theme extends IThemeContextValue {}
+}

package/src/types/tanstack.d.ts

@@ -0,0 +1,7 @@
+import "@tanstack/react-table";
+
+declare module "@tanstack/react-table" {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    isHidden?: boolean;
+  }
+}