@cakemail-org/ui-components-v2 2.0.38

package/README.md

@@ -0,0 +1 @@
+# ui-componentsv2

package/dist/assets/scss/fonts.scss

@@ -0,0 +1,108 @@
+@font-face {
+    font-family: proxima-nova;
+    src: url(../fonts/ProximaNova-Bold.otf ) format("woff2"), url(../fonts/ProximaNova-Bold.otf) format("woff"), url(../fonts/ProximaNova-Bold.otf) format("opentype"), url(../fonts/ProximaNova-Bold.otf) format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: proxima-nova;
+    src: url(../fonts/ProximaNova-Semibold.otf) format("woff2"), url(../fonts/ProximaNova-Semibold.otf) format("woff"), url(../fonts/ProximaNova-Semibold.otf) format("opentype"), url(../fonts/ProximaNova-Semibold.otf) format("truetype");
+    font-weight: 600;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+
+@font-face {
+    font-family: proxima-nova;
+    src: url(../fonts/ProximaNova-Regular.otf) format("woff2"), url(../fonts/ProximaNova-Regular.otf) format("woff"), url(../fonts/ProximaNova-Regular.otf) format("opentype"), url(../fonts/ProximaNova-Regular.otf) format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: aller;
+    src: url(../fonts/Aller_Bd.ttf) format("woff2"), url(../fonts/Aller_Bd.ttf) format("woff"), url(../fonts/Aller_Bd.ttf) format("opentype"), url(../fonts/Aller_Bd.ttf) format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: aller;
+    src: url(../fonts/Aller_Rg.ttf) format("woff2"), url(../fonts/Aller_Rg.ttf) format("woff"), url(../fonts/Aller_Rg.ttf) format("opentype"), url(../fonts/Aller_Rg.ttf) format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: aller;
+    src: url(../fonts/Aller_Lt.ttf) format("woff2"), url(../fonts/Aller_Lt.ttf) format("woff"), url(../fonts/Aller_Lt.ttf) format("opentype"), url(../fonts/Aller_Lt.ttf) format("truetype");
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-Regular.ttf) format("truetype");
+    font-weight: 400;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-Italic.ttf) format("truetype");
+    font-weight: 400;
+    font-style: italic;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-Bold.ttf) format("truetype");
+    font-weight: 700;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-BoldItalic.ttf) format("truetype");
+    font-weight: 700;
+    font-style: italic;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-Light.ttf) format("truetype");
+    font-weight: 300;
+    font-style: normal;
+    font-stretch: normal;
+    font-display: auto;
+}
+
+@font-face {
+    font-family: mulish;
+    src: url(../fonts/Mulish-LightItalic.ttf) format("truetype");
+    font-weight: 300;
+    font-style: italic;
+    font-stretch: normal;
+    font-display: auto;
+}

package/dist/assets/scss/general.scss

@@ -0,0 +1,130 @@
+@forward "./vars.scss";
+@use "./vars.scss" as *;
+
+html {
+    font-size: 14px;
+}
+
+@media only screen and (min-width: $mediaMd) {
+    html {
+        font-size: 16px;
+    }
+}
+
+@mixin scrollBarv2() {
+    &::-webkit-scrollbar {
+        display: block;
+    }
+
+    &::-webkit-scrollbar-track:horizontal {
+        position: absolute;
+        bottom: -20px;
+    }
+
+    &::-webkit-scrollbar-track:vertical {
+        border-bottom-left-radius: 0 !important;
+        border-bottom-right-radius: 8px !important;
+        border-top-right-radius: 8px !important;
+    }
+
+    &::-webkit-scrollbar-track {
+        height: 2.5rem;
+        width: 2.5rem;
+        padding: 2rem;
+        background-clip: content-box;
+        border-bottom-left-radius: 8px;
+        //border-bottom-right-radius: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: $body-font-color-2;
+        border-radius: 24px;
+        border-top: 5px solid $background-color-1;
+        border-bottom: 5px solid $background-color-1;
+        border-right: 5px solid $background-color-1;
+        border-left: 5px solid $background-color-1;
+    }
+}
+
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.ui-kit-v2-wrapper,
+.MuiDialog-root,
+.MuiTooltip-popper,
+.MuiPopover-root,
+.MuiMenu-root,
+.base-Popper-root {
+
+    .hidden {
+        display: none;
+    }
+
+    .loading,
+    .disabled,
+    .inactive {
+        opacity: 0.65;
+        pointer-events: none;
+    }
+
+    .hoverAble {
+        cursor: pointer;
+
+        &:hover {
+            opacity: 0.65;
+        }
+    }
+
+    .squared {
+        border-radius: 8px !important;
+    }
+
+    .round {
+        border-radius: 100px !important;
+    }
+
+    .rotate-180 {
+        transform: rotate(180deg) !important;
+    }
+
+    .semiBold {
+        font-weight: 600 !important;
+    }
+
+    .bold {
+        font-weight: 700 !important;
+    }
+
+    .regular {
+        font-weight: 400 !important;
+    }
+
+
+    .uppercase {
+        text-transform: uppercase;
+    }
+
+    .showTooltip {
+        border-bottom: 1px dashed $body-font-color-2;
+        cursor: pointer;
+    }
+
+    .ellipsis {
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
+        text-wrap: nowrap !important;
+    }
+
+
+    //Old kit fix
+    li {
+        &::before {
+            content: unset;
+        }
+    }
+}

package/dist/assets/scss/vars.scss

@@ -0,0 +1,101 @@
+// Colors
+$grape: var(--grape, #69006E) !default;
+$teal: var(--teal, #0ABDAE) !default;
+$orange: var(--orange, #FF9E0E) !default;
+$rad-red: var(--rad-red, #FF4835) !default;
+
+// Standard colors, shades & tints (Helpers)
+$dark-matter: var(--dark-matter, #2B2B2B) !default;
+$silver: var(--silver, #9B9B9B) !default;
+
+$wild-sand: var(--wild-sand, #dddddd) !default;
+$white: var(--white, #FFFFFF) !default;
+$black: var(--black, #000000) !default;
+$cloud: var(--cloud, #F4F4F4) !default;
+$boulder: var(--boulder, #4A4A4A) !default;
+$pebble: var(--pebble, #EAEAEA) !default;
+
+
+$shade1000: var(--shade1000, #1B1A1A) !default;
+$shade950: var(--shade950, #272626) !default;
+$shade900: var(--shade900, #333232) !default;
+$shade850: var(--shade850, #3F3E3E) !default;
+$shade800: var(--shade800, #4B4A4A) !default;
+$shade750: var(--shade750, #575656) !default;
+$shade700: var(--shade700, #636262) !default;
+$shade650: var(--shade650, #6F6E6E) !default;
+$shade600: var(--shade600, #7B7A7A) !default;
+$shade550: var(--shade550, #878686) !default;
+$shade500: var(--shade500, #939292) !default;
+$shade450: var(--shade450, #9E9E9D) !default;
+$shade400: var(--shade400, #AAAAA9) !default;
+$shade350: var(--shade350, #B7B6B6) !default;
+$shade300: var(--shade300, #C3C2C2) !default;
+$shade250: var(--shade250, #CFCECE) !default;
+$shade200: var(--shade200, #DBDADA) !default;
+$shade150: var(--shade150, #E7E6E6) !default;
+$shade100: var(--shade100, #F3F2F2) !default;
+$shade50: var(--shade50, #FFFFFF) !default;
+
+// Typeface
+$heading-font: aller, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif !default;
+$text-font: proxima-nova, Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif !default;
+
+// Primary brand color
+$primary-brand-color: var(--primary-brand-color, $grape) !default;
+$secondary-brand-color: var(--secondary-brand-color, $teal) !default;
+
+$error-brand-color : var(--error-brand-color, $rad-red) !default;
+$warning-brand-color : var(--warning-brand-color, $orange) !default;
+$success-brand-color : var(--success-brand-color, $teal) !default;
+
+// Font color
+$body-font-color: var(--body-font-color, $dark-matter) !default;
+$body-font-color-2 : var(--body-font-color-2, $silver) !default;
+
+// Background color
+$background-color-1: var(--background-color-1, $white) !default;
+$background-color-2: var(--background-color-2, $pebble) !default;
+
+// Corner roundness
+$btn-radius: 100px !default;
+
+//Spacing
+$xxxxs: 0.25rem !default; // 4px
+$xxxs: 0.5rem !default; // 8px
+$xxs : 0.75rem !default; // 12px
+$xs: 1rem !default; // 16px
+$s : 1.25rem !default; // 20 px
+$m: 1.5rem !default; // 24px
+$ml: 1.75rem !default; // 28px
+$l: 2rem !default; // 32px
+$xl: 3rem !default; // 48px
+$xxl: 3.5rem !default; // 56px
+$xxxl: 4rem !default; // 64px
+
+//Media Query Sizes
+$mediaMobile : 0 !default;
+$mediaTablet : 600px !default;
+$mediaXm: 1024px !default;
+$mediaSm: 1336px !default;
+$mediaMd: 1440px !default;
+$mediaLg: 1920px !default;
+$mediaXl: 2560px !default;
+
+$breakpoints: sm $mediaSm,
+    md $mediaMd,
+    lg $mediaLg,
+    xl $mediaXl;
+
+//Z-index layers
+$zindex-tooltip: 1000;
+$zindex-coachmark: 1000;
+$zindex-dropdown: 1000;
+$zindex-datagrid-loading: 7000;
+$zindex-menu: 8000;
+$zindex-modal: 8500;
+$zindex-fullPageLoader: 8999;
+$zindex-overlay: 9000;
+$zindex-dialog: 9001;
+$zindex-popover: 10000;
+$zindex-max: 2147483647;

package/dist/assets/svg/tableCornerBL.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8 8C3.58172 8 -1.56562e-07 4.41828 -3.49691e-07 0L0 8L8 8Z" fill="white"/>
+</svg>

package/dist/assets/svg/tableCornerBR.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M8 0C8 4.41828 4.41828 8 0 8L8 8L8 0Z" fill="white"/>
+</svg>

package/dist/assets/svg/tableCornerTL.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M0 8C0 3.58173 3.58203 0 8 0H0V8Z" fill="#ffffff"/>
+</svg>

package/dist/assets/svg/tableCornerTR.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd" d="M0 -3.49691e-07C4.41828 -1.56562e-07 8 3.58172 8 8L8 0L0 -3.49691e-07Z" fill="white"/>
+</svg>

package/dist/cjs/components/actionBarContainer/index.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./styles.scss";
+import { TActionBarContainer } from "./types";
+export declare const ActionBarContainer: React.ForwardRefExoticComponent<TActionBarContainer & React.RefAttributes<unknown>>;
+export default ActionBarContainer;
+export * from "./types";

package/dist/cjs/components/actionBarContainer/types.d.ts

@@ -0,0 +1,18 @@
+import { TAdjustedPosition } from "../../types/generic";
+export type TActionBarContainer = {
+    className?: string;
+    open?: boolean;
+    adjustedPosition?: TAdjustedPosition;
+    bars?: TActionBar[] | any;
+    position?: "top" | "bottom";
+};
+export type TActionBar = {
+    className?: string;
+    manualContent?: boolean;
+    content: any;
+};
+export interface TActionBarContainerRef extends TActionBarContainer {
+    isShowing: () => boolean;
+    show: (newState?: TActionBarContainer) => void;
+    hide: (callback?: Function) => void;
+}

package/dist/cjs/components/assetManager/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./styles.scss";
+import { TAssetManager } from "./types";
+export declare function AssetManager({ className, options, textFieldProps, manageBtn, listMainBtn, listSecondaryBtn, createBtnProps, clearSelection, noAssetHeader, chooseAssetHeader }: TAssetManager): React.JSX.Element;
+export default AssetManager;

package/dist/cjs/components/assetManager/types.d.ts

@@ -0,0 +1,37 @@
+import { TButtonClick, TButtonRef } from "../button/types";
+import { TTextField, TTextFieldChange } from "../textField/types";
+export type TAssetManager = {
+    className?: string;
+    manageBtn?: {
+        onClick: TButtonClick;
+        text: string;
+    };
+    listMainBtn?: {
+        onClick: TAssetManagerListClick;
+        text: string;
+    };
+    listSecondaryBtn?: {
+        onClick: TAssetManagerListClick;
+        text: string;
+    };
+    createBtnProps?: {
+        onClick: TAssetManagerListClick;
+        text: string;
+    };
+    options?: TAssetManagerOption[];
+    clearSelection?: () => void;
+    noAssetHeader?: string;
+    chooseAssetHeader?: string;
+    textFieldProps?: TAssetmanagerTextFieldProps;
+};
+export type TAssetManagerListClick = (event: React.MouseEvent<HTMLButtonElement>, btnRef: TButtonRef, option: TAssetManagerOption) => void;
+export interface TAssetmanagerTextFieldProps extends Pick<TTextField, "value" | "onChange" | "placeholder" | "timeout"> {
+    value: string;
+    onChange: TTextFieldChange;
+}
+export type TAssetManagerOption = {
+    value: string;
+    fullMatch?: boolean;
+    partialMatch?: boolean;
+    text: string;
+};

package/dist/cjs/components/avatar/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TAvatar } from "./types";
+export declare function Avatar({ sizes, variant, className, email, firstName, lastName, showBadge, badgeOrigin, badgeColor, sx }: TAvatar): React.JSX.Element;
+export default Avatar;

package/dist/cjs/components/avatar/types.d.ts

@@ -0,0 +1,17 @@
+import { SxProps } from "@mui/material";
+import { TColors } from "../../types/generic";
+export type TAvatar = {
+    sizes?: number;
+    variant?: 'circular' | 'rounded' | 'square';
+    className?: string;
+    email?: string;
+    firstName?: string;
+    lastName?: string;
+    showBadge?: boolean;
+    badgeOrigin?: {
+        horizontal: 'left' | 'right';
+        vertical: 'bottom' | 'top';
+    };
+    badgeColor?: TColors;
+    sx?: SxProps;
+};

package/dist/cjs/components/brandWrapper/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./styles.scss";
+import { TBrandWrapper } from "./types";
+export declare function BrandWrapper({ onInit, onBrandSuccess, onBrandError, MUITheme, brandId, brandHost, children, noFetch, setPageHead, includeHandlers, brandThemeContext, styleOverride, }: TBrandWrapper): React.JSX.Element;
+export default BrandWrapper;

package/dist/cjs/components/brandWrapper/types.d.ts

@@ -0,0 +1,18 @@
+import { Theme } from "@mui/material";
+import { TBrandBaseStyles } from "../../factories/brands/types";
+export type TBrandWrapper = {
+    brandId?: string;
+    brandHost?: string;
+    MUITheme?: Theme;
+    children?: any;
+    onInit?: Function;
+    onBrandSuccess: TBrandWrapperSuccess;
+    onBrandError: TBrandWrapperError;
+    noFetch?: boolean;
+    setPageHead?: boolean;
+    includeHandlers?: boolean;
+    brandThemeContext?: string;
+    styleOverride?: TBrandBaseStyles;
+};
+export type TBrandWrapperSuccess = (fetchedBrand: any, muiTheme: any) => void;
+export type TBrandWrapperError = (error: any, defaultMuiTheme: any) => void;

package/dist/cjs/components/button/index.d.ts

@@ -0,0 +1,14 @@
+import React, { Component, MouseEvent } from "react";
+import { TButton } from "./types";
+export declare class Button extends Component<TButton, {
+    isLoading: boolean;
+    disabled: boolean;
+}> {
+    constructor(props: TButton);
+    handleOnClick(event: MouseEvent<HTMLButtonElement>): void;
+    disable(): void;
+    animate(): void;
+    reset(): void;
+    render(): React.JSX.Element;
+}
+export default Button;

package/dist/cjs/components/button/types.d.ts

@@ -0,0 +1,15 @@
+import { LoadingButtonProps } from "@mui/lab";
+import { MouseEvent } from "react";
+import { TColors } from "../../types/generic";
+export interface TButton extends Omit<LoadingButtonProps, 'onClick'> {
+    onClick?: TButtonClick;
+    color?: TColors;
+    animated?: boolean;
+    iconOnly?: boolean;
+}
+export type TButtonRef = {
+    animate: () => void;
+    reset: () => void;
+    disable: () => void;
+};
+export type TButtonClick = (event: MouseEvent<HTMLButtonElement>, btnRef: TButtonRef) => void;

package/dist/cjs/components/buttonMenu/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./styles.scss";
+import { ButtonMenuProps } from "./types";
+export declare function ButtonMenu({ children, buttonProps, options, iconProps }: ButtonMenuProps): React.JSX.Element;
+export default ButtonMenu;

package/dist/cjs/components/buttonMenu/types.d.ts

@@ -0,0 +1,14 @@
+import { ButtonProps } from '@mui/material/Button';
+import { TColors } from "../../types/generic";
+import { TDropMenuItem } from "../dropMenu/types";
+import { TIProps } from "../icon/types";
+interface TExtendedBtnProps extends ButtonProps {
+    color?: TColors;
+}
+export type ButtonMenuProps = {
+    iconProps?: TIProps | "default";
+    children?: string;
+    buttonProps?: TExtendedBtnProps;
+    options?: Array<TDropMenuItem>;
+};
+export {};

package/dist/cjs/components/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TCheckbox } from "./types";
+export declare function Checkbox({ color, ...props }: TCheckbox): React.JSX.Element;
+export default Checkbox;

package/dist/cjs/components/checkbox/types.d.ts

@@ -0,0 +1,5 @@
+import { CheckboxProps } from "@mui/material/Checkbox";
+import { TColors } from "../../types/generic";
+export interface TCheckbox extends CheckboxProps {
+    color?: TColors;
+}

package/dist/cjs/components/chip/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TChip } from "./types";
+export declare function Chip({ color, className, tinted, squared, lowerCased, ...props }: TChip): React.JSX.Element;
+export default Chip;

package/dist/cjs/components/chip/types.d.ts

@@ -0,0 +1,8 @@
+import { ChipProps } from "@mui/material";
+import { TColors } from "../../types/generic";
+export interface TChip extends ChipProps {
+    color?: TColors;
+    tinted?: boolean;
+    squared?: boolean;
+    lowerCased?: boolean;
+}

package/dist/cjs/components/circularProgress/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./styles.scss";
+import { TCircularProgress } from "./types";
+export declare function CircularProgress({ color, location, ...props }: TCircularProgress): React.JSX.Element;
+export default CircularProgress;

package/dist/cjs/components/circularProgress/types.d.ts

@@ -0,0 +1,6 @@
+import { CircularProgressProps } from "@mui/material";
+import { TColors } from "../../types/generic";
+export interface TCircularProgress extends CircularProgressProps {
+    color?: TColors;
+    location?: "content" | "container" | "page" | "default";
+}

package/dist/cjs/components/codeInput/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./styles.scss";
+import { TCodeInput } from "./types";
+export declare function CodeInput({ className, initValue, value, numInputs, shouldAutoFocus, placeholder, renderSeparator, inputType, onChange, onPaste }: TCodeInput): React.JSX.Element;
+export default CodeInput;

package/dist/cjs/components/codeInput/types.d.ts

@@ -0,0 +1,21 @@
+import { AllowedInputTypes } from "react-otp-input";
+export type TCodeInput = {
+    className?: string;
+    initValue?: string;
+    value?: string;
+    /** Number of OTP inputs to be rendered */
+    numInputs?: number;
+    /** Callback to be called when the OTP value changes */
+    onChange: TCodeInputFunction;
+    /** Callback to be called when pasting content into the component */
+    onPaste?: TCodeInputFunction;
+    /** Whether the first input should be auto focused */
+    shouldAutoFocus?: boolean;
+    /** Placeholder for the inputs */
+    placeholder?: string;
+    /** Function to render the separator */
+    renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;
+    /** The type that will be passed to the input being rendered */
+    inputType?: AllowedInputTypes;
+};
+export type TCodeInputFunction = (value: string) => void;

package/dist/cjs/components/contentSectionContainer/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import "./styles.scss";
+export declare function ContentSectionContainer({ className, children }: {
+    className?: string;
+    children: any;
+}): React.JSX.Element;
+export default ContentSectionContainer;