robbyson-frontend-library 0.0.1-rc9 → 1.0.0

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/header-context-menu/header-context-menu.interface.ts

@@ -10,4 +10,4 @@ export interface IHeaderContextMenuState {
     activeButton: undefined | IHeaderContextMenuButtons;
 }
 
-export type IHeaderContextMenuButtons = "notification" | "quiz" | "informative" | "chat" | "guidance_all" | "guidance_favorites";
+export type IHeaderContextMenuButtons = "notification" | "quiz" | "informative" | "chat" | "guidance_all" | "guidance_favorites" | "calendar";

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/primary-tag/index.d.ts

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

package/src/components/primary-tag/primary-tag.interface.ts

@@ -0,0 +1,21 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IPrimaryTagState {
+    show: boolean;
+}
+export interface IPrimaryTagProps<T>
+    extends IBaseComponentProp,
+        React.HTMLAttributes<T> {
+    iconHandle?: IconHandle;
+    type?: "success" | "error" | "warning" | "neutral";
+    size: "small" | "large";
+    disabled?: boolean;
+    textLocaleHandle?: string;
+    deletable?: boolean;
+    textColor?: string;
+    bgColor?: string;
+    iconColor?: string;
+    customIcon?: React.ReactNode;
+    textClassName?: string;
+}

package/src/components/primary-tag/primary-tag.types.d.ts

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

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';

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

@@ -0,0 +1,16 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { ITextFieldProps } from "../text-field";
+
+export interface IRangeDatePickerProps
+    extends IBaseComponentProp {
+    onConfirm: (startDate: Date, endDate: Date) => void;
+    startDate: Date | null;
+    endDate: Date | null;
+    customInputOptions?: Omit<ITextFieldProps, "value">,
+    
+}
+
+export interface IRangeDatePickerState {
+    startDate: Date | null;
+    endDate: Date | null;
+}

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

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

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

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

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

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

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

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

package/src/components/scroll-box/scroll-box.interface.ts

@@ -2,9 +2,11 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
 export interface IScrollBoxProps extends IBaseComponentProp {
-  height: string;
+  height?: string;
   children: React.ReactNode;
   onScrollBottom?(): void;
   className?: string;
   hideScrollBar?: boolean;
+  maxHeight?: string;
+  getRef?(ref: HTMLDivElement | null): void;
 }

package/src/components/sidebar/sidebar.interface.ts

@@ -12,4 +12,10 @@ export interface ISidebarProps extends IBaseComponentProp {
     overlayZindex?: string;
     showOverlay?: boolean;
     subtitle?: string;
+    enableDrawer?: boolean;
+    sideBarFooter?: React.ReactNode;
 }
+
+export interface ISidebarState{
+    hasScroll?: boolean;
+}