robbyson-frontend-library 0.0.1-rc10 → 0.0.1-rc12

package/dist/utils/timer.utils.js

@@ -0,0 +1,22 @@
+var TimerUtils = /** @class */ (function () {
+    function TimerUtils() {
+    }
+    TimerUtils.delay = function (time) {
+        return new Promise(function (resolve) {
+            return setTimeout(function () { return resolve(undefined); }, time);
+        });
+    };
+    TimerUtils.stopwatch = (function SetInterval() {
+        var interval;
+        return function () { return ({
+            initInterval: function (func, time) {
+                interval = setInterval(func, time);
+            },
+            clearInterval: function () {
+                clearInterval(interval);
+            },
+        }); };
+    })();
+    return TimerUtils;
+}());
+export { TimerUtils };

package/index.d.ts

@@ -42,9 +42,28 @@ export * from "./src/components/upload";
 export * from "./src/components/balloon";
 export * from "./src/components/pdf-viewer";
 export * from "./src/components/toggle-icon-button";
+export * from "./src/components/terms-of-use";
 export * from "./src/components/overlay";
 export * from "./src/components/header-context-menu";
 export * from "./src/components/sort";
-export * from "./src/components/mobile-filter";
+export * from "./src/components/drawer";
 export * from "./src/components/loading";
+export * from "./src/components/date-picker";
+export * from "./src/components/range-date-picker";
+export * from "./src/components/tree-date-picker";
+export * from "./src/components/tab";
 export * from "./src/components/filter";
+export * from "./src/components/time-picker";
+export * from "./src/components/circular-indicator-goal";
+export * from "./src/components/circular-general-level";
+export * from "./src/components/text-area";
+export * from "./src/components/result-chart";
+export * from "./src/components/insight-chart";
+export * from "./src/components/mountain-chart";
+export * from "./src/components/daily-chart";
+export * from "./src/components/weekly-chart";
+export * from "./src/components/circular-indicator-goal";
+export * from "./src/components/circular-general-level";
+export * from "./src/components/text-area";
+export * from "./src/components/dropdown";
+export * from "./src/components/circular-progress";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "robbyson-frontend-library",
-    "version": "0.0.1-rc10",
+    "version": "0.0.1-rc12",
     "description": "Robbyson frontend Library",
     "main": "./dist/index.js",
     "license": "MIT",
@@ -19,7 +19,8 @@
     "devDependencies": {
         "@types/axios": "^0.14.0",
         "@types/crypto-js": "^4.1.1",
-        "@types/react": "^18.0.27",
+        "@types/lodash": "^4.14.199",
+        "@types/react": "~18.2.0",
         "@types/styled-components": "^5.1.26",
         "styled-components": "^5.3.9",
         "typescript": "^4.9.5"
@@ -27,14 +28,15 @@
     "dependencies": {
         "axios": "^1.3.5",
         "crypto-js": "^4.1.1",
+        "history": "^5.3.0",
         "localforage": "^1.10.0",
+        "lodash": "^4.17.21",
         "moment": "^2.29.4",
+        "query-string": "^8.1.0",
         "react": "^18.2.0",
         "react-inlinesvg": "^3.0.2",
-        "query-string": "^8.1.0",
         "react-toastify": "^9.1.2",
         "redux-micro-frontend": "^1.3.0",
-        "redux-persist": "^6.0.0",
-        "history": "^5.3.0"
+        "redux-persist": "^6.0.0"
     }
-}
+}

package/src/components/balloon/balloon.interface.ts

@@ -8,7 +8,7 @@ export interface IBalloonProps<T> extends React.HTMLAttributes<T>, IBaseComponen
         | "bottom-left"
         | "left-top"
         | "left-bottom";
-    width: string;
-    height: string;
+    width?: string;
+    height?: string;
     titleLocaleHandle: string;
 }

package/src/components/basic-button/basic-button.interface.ts

@@ -1,10 +1,12 @@
 import { IconHandle } from "../../models";
 import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export type BasicButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
 export interface IBasicButtonProps<T> extends React.ButtonHTMLAttributes<T>, IBaseComponentProp {
     iconAlign?: string;
-    hasIcon?: Boolean;
     iconHandle?: IconHandle;
     textLocaleHandle?: string;
-    variant: 'primary' | 'secondary' | 'tertiary'
+    variant: BasicButtonVariant
     shape?: 'round' | 'square'
 }

package/src/components/checkbox/checkbox.interface.ts

@@ -4,5 +4,7 @@ export interface ICheckboxProps<T> extends React.InputHTMLAttributes<T>, IBaseCo
     indeterminate?: boolean;
     labelLocaleHandle?: string;
     infoTextLocaleHandle?: string;
+    errorTextLocaleHandle?: string;
+    hasError?: boolean;
     id: string;
 }

package/src/components/circular-general-level/circular-general-level.interface.ts

@@ -0,0 +1,13 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { ReactNode } from "react";
+
+export interface ICircularGeneralLevelProps extends IBaseComponentProp {
+    percentage: number;
+    nextStepValue?: number;
+    color: string;
+    iconHandle?: IconHandle;
+    nextIconHandle?: IconHandle;
+    centeredElement?: ReactNode
+    profileImage?: string;
+}

package/src/components/circular-general-level/circular-general-level.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module 'styleguide/CircularGeneralLevel' {
+    import { ICircularGeneralLevelProps } from "robbyson-frontend-library";
+    const CircularGeneralLevel: React.ComponentType<ICircularGeneralLevelProps>;
+
+    export default CircularGeneralLevel;
+}

package/src/components/circular-general-level/index.d.ts

@@ -0,0 +1 @@
+export * from './circular-general-level.interface';

package/src/components/circular-indicator-goal/circular-indicator-goal.interface.ts

@@ -0,0 +1,13 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { ReactNode } from "react";
+
+export interface ICircularIndicatorGoalProps extends IBaseComponentProp {
+    value: number;
+    total: number;
+    color: string;
+    iconHandle?: IconHandle;
+    nextIconHandle?: IconHandle;
+    centeredElement?: ReactNode
+    fullPercentage?: boolean;
+}

package/src/components/circular-indicator-goal/circular-indicator-goal.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module 'styleguide/CircularIndicatorGoal' {
+    import { ICircularIndicatorGoalProps } from "robbyson-frontend-library";
+    const CircularIndicatorGoal: React.ComponentType<ICircularIndicatorGoalProps>;
+
+    export default CircularIndicatorGoal;
+}

package/src/components/circular-indicator-goal/index.d.ts

@@ -0,0 +1 @@
+export * from './circular-indicator-goal.interface';

package/src/components/circular-progress/circular-progress.interface.ts

@@ -0,0 +1,12 @@
+import {IBaseComponentProp} from "../base-component.prop.interface";
+import {IconHandle} from "../../models";
+
+export interface ICircularProgressProps extends IBaseComponentProp {
+    iconHandle: IconHandle;
+    color: string;
+    value: number;
+    total: number;
+    time?: string;
+    totalTime?: string;
+}
+

package/src/components/circular-progress/circular-progress.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/CircularProgressComponent" {
+    import { ICircularProgressProps } from "robbyson-frontend-library";
+    const CircularProgressComponent: React.ComponentType<ICircularProgressProps>;
+
+    export default CircularProgressComponent;
+}

package/src/components/circular-progress/index.d.ts

@@ -0,0 +1 @@
+export * from './circular-progress.interface';

package/src/components/daily-chart/daily-chart.interface.ts

@@ -0,0 +1,22 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IDailyChartProps extends IBaseComponentProp {
+    titleLocaleHandle: string;
+    updatedAt:string;
+    money: string;
+    totalMoney: string;
+    minute: string;
+    totalMinute: string;
+    data: IChartData;
+    colorDivision: number[];
+}
+
+export type IChartData = {
+    percentage?: number;
+    date: string;
+    fullDate: string;
+    hour?: string;
+    metaHour?: string;
+    icon?: IconHandle;
+}

package/src/components/daily-chart/daily-chart.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/DailyChart" {
+    import { IDailyChartProps } from "robbyson-frontend-library";
+    const DailyChart: React.ComponentType<IDailyChartProps>;
+
+    export default DailyChart;
+}

package/src/components/daily-chart/index.d.ts

@@ -0,0 +1 @@
+export * from './daily-chart.interface';

package/src/components/date-picker/date-picker.interface.ts

@@ -0,0 +1,15 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { ITextFieldProps } from "../text-field";
+
+export interface IDatePickerProps extends IBaseComponentProp {
+    onConfirm: (date: Date) => void;
+    selectedDate: Date | null;
+    customInputOptions?: Omit<ITextFieldProps, "value"> & {
+        isDisabled?: boolean;
+    };
+    maxDate?: Date;
+}
+
+export interface IDatePickerState {
+    selectedDate: Date | null;
+}

package/src/components/date-picker/date-picker.types.d.ts

@@ -0,0 +1,10 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/DatePicker" {
+    import { IDatePickerProps } from "robbyson-frontend-library";
+    
+    const DatePicker: React.ComponentType<IDatePickerProps>;
+
+    export default DatePicker;
+}

package/src/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./date-picker.interface"

package/src/components/{mobile-filter/mobile-filter.interface.ts → drawer/drawer.interface.ts}

@@ -1,8 +1,10 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
-export interface IMobileFilterProps extends IBaseComponentProp {
+export interface IDrawerProps extends IBaseComponentProp {
     showOverlay: boolean;
     onClick(): void;
     scrollBoxHeight: string;
     children: React.ReactNode;
+    overlayZindex?: string;
+    titleLocaleHandle?: string;
 }

package/src/components/drawer/drawer.types.d.ts

@@ -0,0 +1,10 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/Drawer" {
+    import { IDrawerProps } from "robbyson-frontend-library";
+    
+    const Drawer: React.ComponentType<IDrawerProps>;
+
+    export default Drawer;
+}

package/src/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from './drawer.interface';

package/src/components/dropdown/dropdown.interface.ts

@@ -0,0 +1,52 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { IScrollBoxProps } from "../scroll-box";
+
+export interface IDropdownState {
+    isDropdownOpen: boolean;
+}
+
+export interface IDropdownProps
+    extends React.InputHTMLAttributes<any>,
+        IBaseComponentProp {
+    placeholderLocaleHandle?: string;
+    prefixIconHandle?: IconHandle;
+    dropdownOptions?: DropdownOptions;
+    suffixIconHandle?: IconHandle;
+    outSuffixIconHandle?: IconHandle;
+    helperTextLocaleHandle?: string;
+    errorTextLocaleHandle?: string;
+    onPrefixIconPressed?: () => void;
+    onSuffixIconPressed?: () => void;
+    width?: number;
+    height?: number;
+    value: string;
+    mask?: string;
+    hasError?: boolean;
+    fillPrefixIcon?: string;
+    fillSuffixIcon?: string;
+    fillOutSuffixIcon?: string;
+    pointerCursor?: boolean;
+    textarea?: boolean;
+}
+export type ValuesDropdownData = {
+    labelLocaleHandle: string;
+    key: string | number;
+};
+
+export type DropdownOptions = {
+    data: {
+        classification?: string;
+        values: ValuesDropdownData[];
+    }[];
+    selectedKey?: string;
+    multipleSelect?: boolean;
+    selectedKeys?: string[];
+    onClickItem(
+        key: string | number,
+        labelLocaleHandle?: string,
+        classification?: string
+    ): void;
+    scrollBoxProps: Omit<IScrollBoxProps, "children">;
+    value?: string;
+} & IBaseComponentProp;

package/src/components/dropdown/dropdown.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/Dropdown" {
+    import { IDropdownProps } from "robbyson-frontend-library";
+    const Dropdown: React.ComponentType<IDropdownProps>;
+
+    export default Dropdown;
+}

package/src/components/dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from "./dropdown.interface";

package/src/components/filter/filter.interface.tsx

@@ -20,6 +20,7 @@ export interface IFilterState {
     searchingFilter: number | undefined;
     filterReturn: IFilterReturn;
     openFilter: number | undefined;
+    oldFilters: Array<IFilter>
 }
 
 export interface IFilterProps extends IBaseComponentProp {
@@ -43,11 +44,12 @@ export interface IFilter {
 
 export interface IOption {
     name: string;
-    value: string | number;
+    value: string | number | undefined;
     hasChildren?: boolean;
     iconHandle?: IconHandle;
     checked?: boolean;
     category?: string;
+    bagdeValue?: number;
 }
 
 export interface IFilterReturn {

package/src/components/icon-button/icon-button.interface.ts

@@ -3,5 +3,5 @@ import { IBaseComponentProp } from "../base-component.prop.interface";
 
 export interface IIconButtonProps<T> extends React.ButtonHTMLAttributes<T>, IBaseComponentProp {
   iconHandle: IconHandle;
-  variant: "primary" | "secondary";
+  variant: "primary" | "secondary" | "ead" | "meeting";
 }

package/src/components/insight-chart/index.d.ts

@@ -0,0 +1 @@
+export * from './insight-chart.interface';

package/src/components/insight-chart/insight-chart.interface.ts

@@ -0,0 +1,23 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IInsightChartProps extends IBaseComponentProp {
+    updatedAt:string;
+    image: IconHandle;
+    percentageAchievement: number;
+    color: string;
+    money: string;
+    totalMoney: string;
+    minute: string;
+    totalMinute: string;
+    data: ChartData[];
+    ticks: number[];
+    meta: number;
+}
+
+export type ChartData = {
+    value?: number;
+    date: string;
+    teamValue?: number;
+    predictionValue?: number;
+}

package/src/components/insight-chart/insight-chart.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/InsightChart" {
+    import { IInsightChartProps } from "robbyson-frontend-library";
+    const InsightChart: React.ComponentType<IInsightChartProps>;
+
+    export default InsightChart;
+}

package/src/components/modal/modal.interface.ts

@@ -1,21 +1,30 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
+import { BasicButtonVariant } from "../basic-button";
 
 type ActionButton = {
     titleLocaleHandle: string;
     action: any;
-}
+    variant?: BasicButtonVariant;
+};
 
 export interface IModalState {
-    hidden:boolean;
+    hidden: boolean;
 }
 
+export interface IModalProps extends IBaseComponentProp {
+    children: any;
+    width?: number;
+    height?: number;
+    closeIcon?: boolean;
+    titleHandleLocale?: string;
+    actionButtons?: ActionButton[];
+    overlayZindex?: string;
+    onCloseModal?(): void;
+    isOpen?: boolean;
+    enableDrawer?: boolean;
+}
 
-export interface IModalProps extends IBaseComponentProp  {
-  children: any;
-  width?: number;
-  height?: number;
-  closeIcon?: boolean;
-  titleHandleLocale?: string;
-  actionButtons?: ActionButton[];
-  overlayZindex?: string;
+export interface IModalActions extends IBaseComponentProp {
+    actionButtons?: ActionButton[];
+    className?: string;
 }

package/src/components/mood-button/mood-button.interface.ts

@@ -1,10 +1,10 @@
 
+import { IconHandle } from "../../models";
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
-type IconHandleMoodButton = 'work-bold' | 'family-bold' | 'relationship-bold' | 'health-bold';
 type SizeMoodButton = 'medium' | 'large';
 
 export interface IMoodButtonProps<T> extends React.ButtonHTMLAttributes<T>, IBaseComponentProp {
-  iconHandle: IconHandleMoodButton;
+  iconHandle: IconHandle;
   size?: SizeMoodButton;
 }

package/src/components/mountain-chart/index.d.ts

@@ -0,0 +1 @@
+export * from './mountain-chart.interface';

package/src/components/mountain-chart/mountain-chart.interface.ts

@@ -0,0 +1,11 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IMountainChartProps extends IBaseComponentProp {
+    icon?: IconHandle;
+    percentage: number;
+    color: string;
+    width: number;
+    height: number;
+    shouldShowMeta?: boolean;
+}

package/src/components/mountain-chart/mountain-chart.types.d.ts

@@ -0,0 +1,9 @@
+///<reference types="react" />
+///<reference types="robbyson-frontend-library" />
+
+declare module "styleguide/MountainChart" {
+    import { IMountainChartProps } from "robbyson-frontend-library";
+    const MountainChart: React.ComponentType<IMountainChartProps>;
+
+    export default MountainChart;
+}

package/src/components/pages/base-app-page.component.tsx

@@ -23,14 +23,23 @@ export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
     protected abstract paramsDefaultValues: {};
     protected _localeService: ILocaleService;
     protected _themeService: IThemeService;
+    protected _linkToOverride: string | undefined;
 
     constructor(props: T) {
         super(props);
         this.translate = this.translate.bind(this);
+        this.redirect = this.redirect.bind(this);
         this._localeService = IoC.GetInstance<ILocaleService>("LocaleService");
         this._themeService = IoC.GetInstance<IThemeService>("ThemeService");
     }
-
+    private redirect(): void {
+        if(this._linkToOverride){
+            RobbysonNavigate.to(this._linkToOverride)
+        }else{
+            RobbysonNavigate.back()
+        }
+    }
+    
     public translate(text?: string, ...args: string[]): string {
         return this._localeService.getLocaleByHandle(text || "", ...args);
     }
@@ -49,7 +58,7 @@ export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
                             src={this._themeService.getIconAssetUrl(
                                 "left-arrow-large"
                             )}
-                            onClick={() => RobbysonNavigate.back()}
+                            onClick={() => this.redirect()}
                         />
 
                         <Block />

package/src/components/pages/base-app-page.styles.ts

@@ -57,7 +57,20 @@ export const Title = styled.h4`
     margin-left: 12px;
 `;
 
-export const Content = styled.div``;
+const PADDING_TOP_DESKTOP = 32;
+const PADDING_TOP_MOBILE = 32;
+const PADDING_BOTTOM_DESKTOP = 47; 
+const PADDING_BOTTOM_MOBILE = 32;
+const HEADER_HEIGHT_DESKTOP = 48;
+const HEADER_HEIGHT_MOBILE = 99;
+
+export const Content = styled.div`
+    height: calc(100vh - ${PADDING_TOP_DESKTOP + PADDING_BOTTOM_DESKTOP + HEADER_HEIGHT_DESKTOP}px);
+
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        height: calc(100vh - ${PADDING_TOP_MOBILE + PADDING_BOTTOM_MOBILE + HEADER_HEIGHT_MOBILE}px);
+    }
+`;
 
 export const LeftArrowLarge = styled(SVG)`
     display: none;

package/src/components/pagination/pagination.interface.ts

@@ -4,6 +4,9 @@ export interface IPaginationState {
     activePage: number;
     firstPage: number;
     lastPage: number;
+    activePreffixIcon: boolean;
+    activeSuffixIcon: boolean;
+    numTotalPages: number;
 }
 
 export interface IPaginationProps extends IBaseComponentProp  {

package/src/components/profile-image/profile-image.interface.ts

@@ -1,6 +1,6 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
 export interface IProfileImageProps extends IBaseComponentProp {
-    size?: 'small' | 'medium' | 'high';
+    size?: 'small' | 'medium' | 'high' | 'circular' | 'bigCircular';
     imagePath: string;
 }

package/src/components/progress-bar/progress-bar.interface.ts

@@ -1,8 +1,18 @@
-import { IconHandle } from "../../models";
 import { IBaseComponentProp } from "../base-component.prop.interface";
-export interface IProgressBarProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+
+export interface IProgressBarValue {
+    value: number
+    label: number | string
+}
+
+export interface IProgressBarProps extends IBaseComponentProp {
     labelLocaleHandle?: string;
-    values: Array<string | number>;
-    currentValue: string | number;
-    coinValue?: any;
+    values?: number[] | IProgressBarValue[];
+    currentValue: number;
+    maxValue: number
+    maxValueLabel?: string
+    hasPorcentageIndicator?: boolean
+}
+
+export interface IProgressBarState {
 }

package/src/components/progress-bar/progress-bar.types.d.ts

@@ -3,7 +3,7 @@
 
 declare module 'styleguide/ProgressBar' {
     import { IProgressBarProps } from "robbyson-frontend-library";
-    const ProgressBar: React.ComponentType<IProgressBarProps<any>>;
+    const ProgressBar: React.ComponentType<IProgressBarProps>;
 
     export default ProgressBar;
 }

package/src/components/range-date-picker/index.d.ts

@@ -0,0 +1 @@
+export * from './range-date-picker.interface';