@bcrumbs.net/bc-ui 0.0.1

package/lib/overlay/index.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+export declare enum OverlayContentPosition {
+    CenterScreen = 0,
+    RightSide = 1
+}
+export type BCOverlayProps = {
+    children: ReactElement[] | ReactElement;
+    showCloseIcon?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    onCloseHandler: () => void;
+    stopPropagationOnClick?: boolean;
+    presumedHeight?: number;
+    zIndex?: number;
+    overlayContentPosition?: OverlayContentPosition;
+};
+/**
+ * This component is used to add an overlay in the application
+ */
+export declare function BCOverlay({ children, showCloseIcon, closeOnOverlayClick, closeOnEsc, onCloseHandler, stopPropagationOnClick, presumedHeight, zIndex, overlayContentPosition, }: BCOverlayProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/popup/index.d.ts

@@ -0,0 +1,34 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import IconType from '../constants/IconType';
+import { OverlayContentPosition } from '../overlay';
+export type BCPopupProps = {
+    onClose: () => void;
+    onEnter?: () => void;
+    header?: ReactElement[] | ReactElement;
+    buttons?: ReactElement[];
+    footerContent?: ReactElement[] | ReactElement;
+    width?: number;
+    minHeight?: number;
+    minWidth?: number;
+    showCloseIcon?: boolean;
+    closeOnOverlayClick?: boolean;
+    closeOnEsc?: boolean;
+    stopPropagationOnClick?: boolean;
+    icon?: IconType;
+    dataQA?: string;
+    className?: string;
+    padding?: string;
+    presumedHeight?: number;
+    overlayContentPosition?: OverlayContentPosition;
+};
+export declare const BCPopupContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    width?: number | undefined;
+    minHeight?: number | undefined;
+    minWidth?: number | undefined;
+    transparent?: boolean | undefined;
+    overlayContentPosition?: OverlayContentPosition | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare function BCPopup({ overlayContentPosition, header, children, buttons, width, minHeight, minWidth, showCloseIcon, closeOnOverlayClick, closeOnEsc, onClose, onEnter, stopPropagationOnClick, icon, dataQA, className, padding, presumedHeight, footerContent, }: PropsWithChildren<BCPopupProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/progress/index.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+import Color from '../constants/Color';
+export type ProgressBarProps = {
+    width?: string;
+    progressPercent: number;
+    color?: Color;
+};
+export declare function BCProgressBar({ progressPercent, width, color }: PropsWithChildren<ProgressBarProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/scrollArea/index.d.ts

@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import { Scrollbars, positionValues } from 'react-custom-scrollbars';
+export declare enum ScrollAreaSize {
+    S = "S",
+    L = "L",
+    XL = "XL"
+}
+type ScrollAreaSizeKeys = keyof typeof ScrollAreaSize | string;
+interface ScrollAreaSizeInterface {
+    size: number;
+}
+type ScrollAreaValuesType = {
+    [key in ScrollAreaSizeKeys]: ScrollAreaSizeInterface;
+};
+export declare const ScrollAreaValues: ScrollAreaValuesType;
+export type ScrollAreaProps = {
+    size: ScrollAreaSize;
+    children: ReactNode;
+    autoHide?: boolean;
+    /** used if autoHide is set to true */
+    autoHideTimeout?: number;
+    /** used if autoHide is set to true */
+    autoHideDuration?: number;
+    autoHeight?: boolean;
+    /** used if autoHeight is set to true */
+    autoHeightMin?: number | string;
+    /** used if autoHeight is set to true */
+    autoHeightMax?: number | string;
+    hideHorizontalTrack?: boolean;
+    hideVerticalTrack?: boolean;
+    renderScrollbarHorizontal?: any;
+    renderThumbHorizontal?: any;
+    onScrollFrame?: (values: positionValues) => void;
+    onUpdate?: (values: positionValues) => void;
+    onScrollStart?: () => void;
+    onScrollStop?: () => void;
+    onScroll?: () => void;
+    verticalTrackRightPosition?: number;
+};
+export declare const BCScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<Scrollbars>>;
+export {};

package/lib/searchbox/bcsearchbox.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface BCSearchboxProps {
+    className?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    name?: string;
+}
+export declare const BCSearchbox: ({ className, onChange, value, name, }: BCSearchboxProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCSearchbox;

package/lib/select/bcselect.d.ts

@@ -0,0 +1,10 @@
+export interface BCSelectProps {
+    className?: string;
+    onChange: () => any;
+    text: string;
+    disabled?: boolean;
+    options: any[];
+    selected: string;
+}
+export declare const BCSelect: (props: BCSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCSelect;

package/lib/table/bctable.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { BCDropListOptionsType } from '../dropList/bcdrop-list';
+export declare const ColumnTypes: {
+    Normal: string;
+    DropList: string;
+    Textbox: string;
+    Status: string;
+    Actions: string;
+    Custom: string;
+};
+export declare const StatusTypes: {
+    Active: string;
+    Pending: string;
+    Inactive: string;
+};
+export type Action = {
+    key: string;
+    icon: string;
+    handler?: () => any;
+    tooltip?: string;
+};
+export type Column = {
+    title?: string;
+    valueResolver?: (obj: Row) => string;
+    valueSetter?: (obj: Row, newValue: string) => void;
+    renderer?: (obj: Row) => JSX.Element;
+    type?: string;
+    list?: BCDropListOptionsType[];
+    actions?: Action[] | ((row: any) => Action[]);
+    sorted?: boolean;
+    hiddenXsClass?: boolean;
+};
+export type Row = {
+    [key: string]: unknown;
+} & {
+    id: any;
+};
+export type BCTableProps = {
+    className?: string;
+    rows: Row[];
+    columns: Column[];
+    dropListChanged?: (row: Row, choosedKey?: string) => void;
+    textboxChanged?: (row: Row) => void;
+    actionClicked?: (key: string, row: Row, index: number) => void;
+    builtInSearch?: boolean;
+    searchPattern?: string;
+    noItemsMessage?: string;
+};
+export declare const BCTable: {
+    ({ className, rows: inputRows, columns, dropListChanged, textboxChanged, actionClicked, builtInSearch, searchPattern, noItemsMessage, }: BCTableProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        className: string;
+        columns: never[];
+        rows: never[];
+        builtInSearch: boolean;
+        searchPattern: string;
+        noItemsMessage: string;
+    };
+};
+export default BCTable;

package/lib/tagsInput/bctags-input.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface BCTagsInputProps {
+    className?: string;
+    value: string[];
+    placeholder?: string;
+    onChange: () => void;
+    renderInput: () => ReactNode;
+}
+export declare const BCTagsInput: (props: BCTagsInputProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCTagsInput;

package/lib/text/bctext.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { Color, TextSize, TextWeight, TextStyle, WhiteSpace, TextAlign } from '../constants';
+export type BCTextProps = {
+    as?: 'span' | 'label';
+    htmlFor?: string;
+    size?: TextSize;
+    weight?: TextWeight;
+    style?: TextStyle;
+    align?: TextAlign;
+    whiteSpace?: WhiteSpace;
+    color?: Color;
+    uppercase?: boolean;
+    underline?: boolean;
+    ellipsis?: boolean;
+    className?: string;
+    title?: string;
+    dataQA?: string;
+    lineClamp?: number;
+    maxWidth?: string;
+    strikeThrough?: boolean;
+    breakWords?: boolean;
+};
+/**
+ * This component is used to add text in the application
+ */
+export declare function BCText({ as, htmlFor, children, size, weight, color, style, align, uppercase, underline, ellipsis, lineClamp, className, title, maxWidth, strikeThrough, whiteSpace, breakWords, }: PropsWithChildren<BCTextProps>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function BCError({ htmlFor, children, style, align, uppercase, underline, ellipsis, className, title, maxWidth, strikeThrough, whiteSpace, breakWords, }: PropsWithChildren<BCTextProps>): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/textbox/bctextbox.d.ts

@@ -0,0 +1,28 @@
+export interface BCTextboxProps {
+    className?: string;
+    name?: string;
+    onChange?: (val: string, event: any) => any;
+    onKeyPress?: () => any;
+    onKeyDown?: () => any;
+    value: string;
+    type: string;
+    disabled?: boolean;
+    placeholder?: string;
+    maxLength?: number;
+    autoCompleteList?: string[];
+    onBlur?: () => any;
+}
+export interface BCTextboxState {
+    showAutoComplete: boolean;
+}
+export declare const BCTextbox: {
+    ({ className, name, onChange, onKeyPress, onKeyDown, value, type, disabled, placeholder, maxLength, autoCompleteList, onBlur, }: BCTextboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    defaultProps: {
+        className: string;
+        value: string;
+        disabled: boolean;
+        placeholder: undefined;
+        maxLength: undefined;
+    };
+};
+export default BCTextbox;

package/lib/toaster/index.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ToastContainerProps } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { IconType } from '../constants';
+export declare enum ToastSize {
+    S = "small",
+    L = "large"
+}
+type ToastProps = {
+    closeToast?: () => void;
+    title: ReactNode;
+    onFirstButtonClick?: () => void;
+    firstButtonText?: string;
+    onSecondButtonClick?: () => void;
+    secondButtonText?: string;
+    onClose?: () => void;
+    description?: string;
+    autoClose?: number | false;
+    size?: ToastSize;
+    icon?: IconType;
+    titlePaddingRight?: number;
+    fullWidth?: boolean;
+};
+export declare const BCToastContainer: ({ className, ...rest }: ToastContainerProps & {
+    className?: string | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function triggerToast({ title, description, firstButtonText, onFirstButtonClick, onSecondButtonClick, secondButtonText, autoClose, onClose, size, icon, titlePaddingRight, fullWidth, }: ToastProps): import("react").ReactText;
+export declare function triggerErrorToast({ title, description, firstButtonText, onFirstButtonClick, onSecondButtonClick, secondButtonText, autoClose, onClose, size, icon, titlePaddingRight, fullWidth, }: ToastProps): import("react").ReactText;
+export declare function closeAllToast(): void;
+export {};

package/lib/tooltip/TooltipPlacement.d.ts

@@ -0,0 +1,18 @@
+export declare enum TooltipPlacement {
+    TOP = "top",
+    TOP_START = "top-start",
+    TOP_END = "top-end",
+    RIGHT = "right",
+    RIGHT_START = "right-start",
+    RIGHT_END = "right-end",
+    BOTTOM = "bottom",
+    BOTTOM_START = "bottom-start",
+    BOTTOM_END = "bottom-end",
+    LEFT = "left",
+    LEFT_START = "left-start",
+    LEFT_END = "left-end",
+    AUTO = "auto",
+    AUTO_START = "auto-start",
+    AUTO_END = "auto-end"
+}
+export default TooltipPlacement;

package/lib/tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,6 @@
+export declare enum TooltipTrigger {
+    HOVER = "mouseenter",
+    CLICK = "click",
+    FOCUS = "focus"
+}
+export default TooltipTrigger;

package/lib/tooltip/index.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import 'tippy.js/dist/tippy.css';
+import { TooltipPlacement } from './TooltipPlacement';
+import TooltipTrigger from './TooltipTrigger';
+export type TooltipProps = {
+    title: string | ReactElement | null | undefined;
+    placement?: TooltipPlacement;
+    trigger?: TooltipTrigger;
+    maxWidth?: number;
+    minWidth?: number;
+    children: ReactElement;
+    offset?: number;
+    distance?: number;
+    delay?: number;
+    borderRadius?: number;
+    padding?: string;
+    interactive?: boolean;
+    className?: string;
+};
+/**
+ * Tooltip is a component which renders a popup tip containing text or custom content.
+ */
+export declare const BCTooltip: ({ title, placement, trigger, children, maxWidth, minWidth, offset, distance, interactive, borderRadius, padding, delay, className, }: TooltipProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export * from './TooltipPlacement';
+export * from './TooltipTrigger';

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@bcrumbs.net/bc-ui",
+  "description": "The UI components of Bread Crumbs portals",
+  "version": "0.0.1",
+  "keyword": [
+    "bcrumbs",
+    "bc-ui"
+  ],
+  "peerDependencies": {
+    "react": "17.0.2",
+    "@emotion/react": "11.5.0",
+    "@emotion/styled": "11.3.0",
+    "styled-components": "^4.3.2",
+    "classnames": "^2.3.1",
+    "react-router-dom": "^5.2.0"
+  },
+  "dependencies": {
+    "react-loader-spinner": "^4.0.0",
+    "react-dropzone": "^3.13.4",
+    "react-custom-scrollbars": "^4.2.1",
+    "react-tagsinput": "^3.19.0",
+    "react-toastify": "^8.2.0",
+    "@tippyjs/react": "^4.1.0"
+  },
+  "author": {
+    "name": "Ahmad Mhaish"
+  },
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
+  "typings": "./index.d.ts"
+}