robbyson-frontend-library 0.0.1-rc1 → 0.0.1-rc11

package/index.d.ts

@@ -3,7 +3,7 @@ export * from "./src/models";
 export * from "./src/factories";
 export * from "./src/repositories/";
 export * from "./src/services/";
-export * from "./src/utils"
+export * from "./src/utils";
 export * from "./src/constants";
 export * from "./src/components/";
 export * from "./src/components/assets";
@@ -11,17 +11,16 @@ export * from "./src/components/badge";
 export * from "./src/components/basic-button";
 export * from "./src/components/colors";
 export * from "./src/components/checkbox";
-export * from "./src/components/divider"
+export * from "./src/components/divider";
 export * from "./src/components/context-menu";
-export * from "./src/components/speed-dial"
+export * from "./src/components/speed-dial";
 export * from "./src/components/icon-button";
 export * from "./src/components/mood-button";
 export * from "./src/components/profile-image";
-export * from "./src/components/progress-bar"
+export * from "./src/components/progress-bar";
 export * from "./src/components/progress-tracker";
 export * from "./src/components/radio-button";
 export * from "./src/components/search-input";
-export * from "./src/components/snackbar";
 export * from "./src/components/spin-edit";
 export * from "./src/components/switch";
 export * from "./src/components/tag-expand";
@@ -32,6 +31,7 @@ export * from "./src/components/typography";
 export * from "./src/components/tags";
 export * from "./src/components/timer";
 export * from "./src/components/sidebar";
+export * from "./src/components/toggle-icon-button";
 export * from "./src/components/scroll-box";
 export * from "./src/components/select";
 export * from "./src/components/accordion";
@@ -40,4 +40,17 @@ export * from "./src/components/modal";
 export * from "./src/components/pagination";
 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/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";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "robbyson-frontend-library",
-    "version": "0.0.1-rc1",
+    "version": "0.0.1-rc11",
     "description": "Robbyson frontend Library",
     "main": "./dist/index.js",
     "license": "MIT",
@@ -19,8 +19,8 @@
     "devDependencies": {
         "@types/axios": "^0.14.0",
         "@types/crypto-js": "^4.1.1",
-        "@types/history": "^5.0.0",
-        "@types/react": "^18.0.27",
+        "@types/lodash": "^4.14.199",
+        "@types/react": "~18.0.24",
         "@types/styled-components": "^5.1.26",
         "styled-components": "^5.3.9",
         "typescript": "^4.9.5"
@@ -28,13 +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"
     }
-}
+}

package/src/components/accordion/accordion.interface.ts

@@ -20,7 +20,8 @@ export interface IOptionsAccordion {
 }
 
 export interface IOptionsContentAccordion {
-  text: string;
+  text?: string;
+  html?: React.ReactNode;
   checked?: boolean;
   isCheck?: boolean;
 }

package/src/components/badge/badge.interface.ts

@@ -1,11 +1,12 @@
+import React from "react";
 import { IconHandle } from "../../models";
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
-export interface IBadgeProps extends IBaseComponentProp {
+export interface IBadgeProps extends IBaseComponentProp, React.HTMLAttributes<any> {
     value?: number;
     type: 'icon' | 'number';
     size: 'small' | 'normal'
     iconHandle?: IconHandle; 
     onUpdate?(value:number):void;
     color?: string;
-}
+}

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/base-component.prop.interface.ts

@@ -0,0 +1,2 @@
+import { IBaseTestProp } from "./base-test.prop.interface";
+export interface IBaseComponentProp extends IBaseTestProp { }

package/src/components/{base-page.prop.interface.tsx → base-page.prop.interface.ts}

@@ -1,4 +1,3 @@
 import { IBaseTestProp } from "./base-test.prop.interface";
 
-export interface IBasePageProp extends IBaseTestProp{
-}
+export interface IBasePageProp extends IBaseTestProp{ }

package/src/components/basic-button/{basic-button.interface.tsx → basic-button.interface.ts}

@@ -1,10 +1,13 @@
 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/date-picker/date-picker.interface.ts

@@ -0,0 +1,13 @@
+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">;
+}
+
+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/drawer/drawer.interface.ts

@@ -0,0 +1,10 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+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/filter/basic-button.types.d.ts

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

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

@@ -0,0 +1,61 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IFilterState {
+    filters: Array<
+        IFilter & {
+            searchCategories?: Array<string | undefined>;
+            showCategoryFilter?: boolean;
+        }
+    >;
+    width: number;
+    changedFilters: Array<
+        | {
+              id: number;
+              variant: IFilter["variant"];
+              option: IOption;
+          }
+        | undefined
+    >;
+    searchingFilter: number | undefined;
+    filterReturn: IFilterReturn;
+    openFilter: number | undefined;
+    oldFilters: Array<IFilter>
+}
+
+export interface IFilterProps extends IBaseComponentProp {
+    filters: Array<IFilter>;
+    type: "default" | "sidebar";
+    showMobileOrSideBar: boolean;
+    subtitle?: string;
+    onFilter(filter: {}): void;
+    onClose?(): void;
+    debounceTime?: number;
+}
+
+export interface IFilter {
+    title: string;
+    variant: "radio" | "checkbox";
+    id: number;
+    options: Array<IOption>;
+    searchInput?: boolean;
+    searchInputValue?: string;
+}
+
+export interface IOption {
+    name: string;
+    value: string | number;
+    hasChildren?: boolean;
+    iconHandle?: IconHandle;
+    checked?: boolean;
+    category?: string;
+    bagdeValue?: number;
+}
+
+export interface IFilterReturn {
+    [key: string]: any;
+}
+
+export type IOptionsByCategories = Array<
+    { category: string; options: [IOption & { realIndex: number }] } | undefined
+>;

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

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

package/src/components/header-context-menu/header-context-menu.interface.ts

@@ -0,0 +1,13 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IHeaderContextMenuProps extends IBaseComponentProp {
+    onClick?(buttonName: string | undefined): void;
+    buttons: Array<IHeaderContextMenuButtons>;
+    activeButton?: IHeaderContextMenuButtons;
+}
+
+export interface IHeaderContextMenuState {
+    activeButton: undefined | IHeaderContextMenuButtons;
+}
+
+export type IHeaderContextMenuButtons = "notification" | "quiz" | "informative" | "chat" | "guidance_all" | "guidance_favorites";

package/src/components/header-context-menu/header-context-menu.types.d.ts

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

package/src/components/header-context-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './header-context-menu.interface';

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

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

package/src/components/loading/loading.interface.ts

@@ -0,0 +1,10 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ILoadingProps extends IBaseComponentProp {
+    isLoading: boolean;
+    overlayZindex?: string;
+}
+
+export interface ILoadingState {
+    activeIndex: number;
+}

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

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

package/src/components/{menu.interface.tsx → menu.interface.ts}

@@ -3,8 +3,14 @@ export type MenuItem = {
     iconHandle: string,
     linkTo: string,
     disabled?: boolean
+    matchPath?: string;
 }
 
 export interface IMenuProps {
     items: MenuItem[]
+}
+
+export interface IMenuState {
+    expanded: boolean,
+    location: string,
 }

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

@@ -1,20 +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;
-  titleHandleLocale: string;
-  actionButtons?: ActionButton[];
-  exitOnOverlay?: boolean;
+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/overlay/index.d.ts

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

package/src/components/overlay/overlay.interface.ts

@@ -0,0 +1,7 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IOverlayProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+    children: React.ReactNode;
+    show: boolean;
+    zIndex?: string;
+}

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

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

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

@@ -1,11 +1,9 @@
 import React from "react";
 import { IoC } from "../../ioc";
 import {
-    IAuthenticationService,
     ILocaleService,
-    IThemeService,
+    IThemeService
 } from "../../services";
-import SVG from "react-inlinesvg";
 
 import {
     PageContainer,
@@ -13,45 +11,49 @@ import {
     Title,
     ContextMenu,
     Content,
+    LeftArrowLarge,
+    Block,
 } from "./base-app-page.styles";
 import { RobbysonNavigate } from "../../utils";
+import { QueryParamsFactory } from "../../factories/query-params.factory";
 
 export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
     protected headerLocale: string = "Header Locale";
-
+    protected abstract paramsValidValues: {};
+    protected abstract paramsDefaultValues: {};
     protected _localeService: ILocaleService;
-    protected _authenticationService: IAuthenticationService;
     protected _themeService: IThemeService;
 
     constructor(props: T) {
         super(props);
         this.translate = this.translate.bind(this);
         this._localeService = IoC.GetInstance<ILocaleService>("LocaleService");
-        this._authenticationService = IoC.GetInstance<IAuthenticationService>(
-            "AuthenticationService"
-        );
         this._themeService = IoC.GetInstance<IThemeService>("ThemeService");
     }
 
-    public translate(text?: string): string {
-        return this._localeService.getLocaleByHandle(text || "");
+    public translate(text?: string, ...args: string[]): string {
+        return this._localeService.getLocaleByHandle(text || "", ...args);
     }
 
-    abstract contextMenu(): React.ReactNode;
+        abstract contextMenu(): React.ReactNode;
 
-    abstract renderPage(): React.ReactNode;
+        abstract renderPage(): React.ReactNode;
 
     public render() {
+        QueryParamsFactory.validate(this.paramsValidValues, this.paramsDefaultValues)
         return (
             <PageContainer>
                 <Header>
                     <div>
-                        <SVG
+                        <LeftArrowLarge
                             src={this._themeService.getIconAssetUrl(
                                 "left-arrow-large"
                             )}
                             onClick={() => RobbysonNavigate.back()}
                         />
+
+                        <Block />
+
                         <Title>{this.translate(this.headerLocale)}</Title>
                     </div>
                     <ContextMenu className="body-2-book">

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

@@ -1,20 +1,20 @@
 import { LayoutDimensions } from "../../constants";
 import styled from "styled-components";
+import SVG from "react-inlinesvg";
 
 const SIDEBAR_WIDTH = 72;
 
 export const PageContainer = styled.div`
     padding: 32px 55px 47px calc(${SIDEBAR_WIDTH}px + 55px);
 
-    background: var(--solid-background);
     height: 100%;
 
-    @media (max-width: ${LayoutDimensions._width.ipadMini}px) {
-        padding: 32px 24px 24px calc(${SIDEBAR_WIDTH}px + 24px);
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        padding: 32px 24px;
     }
 
-    @media (max-width: ${LayoutDimensions._width.mobile}px) {
-        padding: 24px 16px 16px calc(${SIDEBAR_WIDTH}px + 16px);
+    @media (max-width: ${LayoutDimensions.width.mobile}px) {
+        padding: 24px 16px;
     }
 `;
 
@@ -26,6 +26,11 @@ export const Header = styled.div`
     padding-bottom: 8px;
     gap: 16px !important;
 
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        flex-direction: column !important;
+        align-items: flex-start !important;
+    }
+
     & > div {
         display: flex;
         align-items: center;
@@ -36,10 +41,51 @@ export const Header = styled.div`
     }
 `;
 
-export const ContextMenu = styled.div``;
+export const ContextMenu = styled.div`
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        width: 100%;
+    }
+`;
 
 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;
+
+    @media (min-width: ${LayoutDimensions.width.horizontalIpadMini + 1}px) {
+        display: block;
+    }
+`;
+
+export const Block = styled.div`
+    display: none;
+
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        display: block;
+        width: 24px;
+        height: 24px;
+    }
+`;

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

@@ -7,8 +7,8 @@ export interface IPaginationState {
 }
 
 export interface IPaginationProps extends IBaseComponentProp  {
-    totalPages:number;
-    maxViewPage?: number;
     activePage?: number;
     onPageChange?(page:number):void;
+    totalDocs: number;
+    per?: number;
 }

package/src/components/pdf-viewer/index.d.ts

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

package/src/components/pdf-viewer/pdf-viewer.interface.ts

@@ -0,0 +1,5 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IPDFViewerProps extends IBaseComponentProp  {
+   publicUrl: string;
+}

package/src/components/pdf-viewer/pdf-viewer.types.d.ts

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

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;
+}