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

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

@@ -0,0 +1,109 @@
+export type TColorScale = {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+};
+export interface ICommonColors {
+    red: TColorScale;
+    green: TColorScale;
+    blue: TColorScale;
+    yellow: TColorScale;
+    purple: TColorScale;
+    darkBlue: TColorScale;
+    orange: TColorScale;
+    gray: TColorScale;
+}
+export interface IBackgroundColors {
+    main: string;
+    radialGradient: string;
+}
+interface ISharedColorProperties {
+    /** Represents the color itself */
+    main: string;
+    /** A slightly different color derived from the main one */
+    variant: string;
+}
+export interface IStandardPaletteColor extends ISharedColorProperties {
+    /** The color to be used for text and elements that need to contrast with the main / variant */
+    contrast: string;
+}
+export interface ITagColors {
+    default: {
+        main: string;
+        text: string;
+    };
+    warm: {
+        main: string;
+        text: string;
+    };
+    cold: {
+        main: string;
+        text: string;
+    };
+    paper: {
+        main: string;
+        text: string;
+    };
+}
+export interface IIndicatorColors {
+    main: string;
+    mainFill: string;
+    success: string;
+    successFill: string;
+    warning: string;
+    warningFill: string;
+    error: string;
+    errorFill: string;
+}
+export interface IPalette {
+    /** Application background */
+    background: IBackgroundColors;
+    /** Primary Brand Color */
+    primary: IStandardPaletteColor;
+    /** Color config for actions solved with a success */
+    success: IStandardPaletteColor;
+    /** Color config for actions solved with a warning */
+    warning: IStandardPaletteColor;
+    /** Color config for actions solved with an error */
+    error: IStandardPaletteColor;
+    /** Color config for surfaces*/
+    surface: IStandardPaletteColor;
+    /** Color config for borders */
+    border: ISharedColorProperties;
+    /** Color config for tags */
+    tag: ITagColors;
+    /** Color config for indicators */
+    indicator: IIndicatorColors;
+}
+export type TThemeMode = "light" | "dark" | "system";
+export interface IThemeContextProps {
+    /** From this prop you can override (even partially) the palettes (dark and light) of the library. */
+    palettes?: {
+        light?: Partial<IPalette>;
+        dark?: Partial<IPalette>;
+    };
+    defaultMode?: TThemeMode;
+}
+export interface IThemeContextValue {
+    /** Which mode is currently active */
+    mode: TThemeMode;
+    /** Which mode is currently displayed.
+     * This is useful when the mode is set to "system" and the user has a dark mode preference.
+     */
+    displayedMode: "light" | "dark";
+    /** A collection of common Colors with variants */
+    commonColors: ICommonColors;
+    /** This will contain the palette of the correct color mode. */
+    activePalette: IPalette;
+    /** use this function to change the mode */
+    setMode: (mode: TThemeMode) => void;
+}
+export {};

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

@@ -1 +1,2 @@
-export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeProperties, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
+export * from "./ThemeContext";
+export * from "./ThemeInterfaces";

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

@@ -1,8 +1,13 @@
 export { Button, ButtonProps } from "./Button";
-export { ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeProperties, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
+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";

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

@@ -0,0 +1,20 @@
+/**
+ *
+ * @param color the color to get the contrast color for
+ * @returns the most readable color between black and white
+ */
+export declare const getContrastColor: (color: string) => string;
+/**
+ *
+ * @param color the color to darken
+ * @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 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;

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

@@ -2,3 +2,6 @@ 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";

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

@@ -1,39 +1,2 @@
-import { PropsOf } from "@emotion/react";
-import { CreateStyledComponent, StyledOptions, FilteringStyledOptions } from "@emotion/styled";
-import { ThemeContextProps } from "../components";
-export type StyledTags = {
-    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, JSX.IntrinsicElements[Tag]>;
-};
-export interface BaseCreateStyled {
-    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-        theme?: ThemeContextProps;
-    }, {}, {
-        ref?: React.Ref<InstanceType<C>>;
-    }>;
-    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
-        theme?: ThemeContextProps;
-    }, {}, {
-        ref?: React.Ref<InstanceType<C>>;
-    }>;
-    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
-        theme?: ThemeContextProps;
-    }>;
-    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
-        theme?: ThemeContextProps;
-    }>;
-    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
-    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
-        theme?: ThemeContextProps;
-        as?: React.ElementType;
-    }, JSX.IntrinsicElements[Tag]>;
-}
-interface CreateStyled extends BaseCreateStyled, StyledTags {
-}
+import { CreateStyled } from "@emotion/styled";
 export declare const styled: CreateStyled;
-export {};

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

@@ -0,0 +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/esm/types/utils/transientOptions.d.ts

@@ -1,2 +1,9 @@
 import { CreateStyled } from "@emotion/styled";
+/**
+ * emotion.js doesn't support transient options out of the box.
+ *
+ * Without them, you will get a warning in the console for every custom prop that you pass to a styled component, since it will be forwarded to the DOM.
+ * This specific opt-in utility copies the styled-component approach; if used, props starting with `$` will not be passed to the DOM.
+ * @see https://github.com/emotion-js/emotion/issues/2193#issuecomment-766173118
+ */
 export declare const transientOptions: Parameters<CreateStyled>[1];

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

@@ -0,0 +1 @@
+export declare function usePrefersColorScheme(): "light" | "dark";