robbyson-frontend-library 0.0.1 → 1.0.0

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

@@ -0,0 +1,76 @@
+import React from "react";
+import { IoC } from "../../ioc";
+import {
+    ILocaleService,
+    IThemeService
+} from "../../services";
+
+import {
+    PageContainer,
+    Header,
+    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 _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);
+    }
+
+        abstract contextMenu(): React.ReactNode;
+
+        abstract renderPage(): React.ReactNode;
+
+    public render() {
+        QueryParamsFactory.validate(this.paramsValidValues, this.paramsDefaultValues)
+        return (
+            <PageContainer>
+                <Header>
+                    <div>
+                        <LeftArrowLarge
+                            src={this._themeService.getIconAssetUrl(
+                                "left-arrow-large"
+                            )}
+                            onClick={() => this.redirect()}
+                        />
+
+                        <Block />
+
+                        <Title>{this.translate(this.headerLocale)}</Title>
+                    </div>
+                    <ContextMenu className="body-2-book">
+                        {this.contextMenu()}
+                    </ContextMenu>
+                </Header>
+                <Content>{this.renderPage()}</Content>
+            </PageContainer>
+        );
+    }
+}

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

@@ -0,0 +1,91 @@
+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);
+
+    height: 100%;
+
+    @media (max-width: ${LayoutDimensions.width.horizontalIpadMini}px) {
+        padding: 32px 24px;
+    }
+
+    @media (max-width: ${LayoutDimensions.width.mobile}px) {
+        padding: 24px 16px;
+    }
+`;
+
+export const Header = styled.div`
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    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;
+    }
+
+    svg {
+        cursor: pointer;
+    }
+`;
+
+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;
+`;
+
+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/index.d.ts

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

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

@@ -0,0 +1,17 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IPaginationState {
+    activePage: number;
+    firstPage: number;
+    lastPage: number;
+    activePreffixIcon: boolean;
+    activeSuffixIcon: boolean;
+    numTotalPages: number;
+}
+
+export interface IPaginationProps extends IBaseComponentProp  {
+    activePage?: number;
+    onPageChange?(page:number):void;
+    totalDocs: number;
+    per?: number;
+}

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

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

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

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

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

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

package/src/components/profile-image/profile-image.types.d.ts

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

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

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

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

@@ -0,0 +1,18 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IProgressBarValue {
+    value: number
+    label: number | string
+}
+
+export interface IProgressBarProps extends IBaseComponentProp {
+    labelLocaleHandle?: string;
+    values?: number[] | IProgressBarValue[];
+    currentValue: number;
+    maxValue: number
+    maxValueLabel?: string
+    hasPorcentageIndicator?: boolean
+}
+
+export interface IProgressBarState {
+}

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

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

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

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

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

@@ -0,0 +1,6 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IProgressTrackerProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+    steps: number;
+    currentStep: number;
+}

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

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

package/src/components/radio-button/index.d.ts

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

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

@@ -0,0 +1,5 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IRadioButtonProps<T> extends React.InputHTMLAttributes<T>, IBaseComponentProp {
+    labelLocaleHandle?: string;
+}

package/src/components/radio-button/radio-button.types.d.ts

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

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

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

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

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

package/src/components/scroll-box/scroll-box.types.d.ts

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

package/src/components/search-input/index.d.ts

@@ -0,0 +1 @@
+export * from './search-input.interfaces';

package/src/components/search-input/search-input.interfaces.ts

@@ -0,0 +1,14 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+import { ITextFieldProps } from "../text-field";
+
+export interface ISearchInputState {
+    disabled:boolean;
+    active:boolean;
+    hasError:boolean;
+    empty:boolean;
+    text: string;
+    errorText:string;
+}
+
+export interface ISearchInputProps extends ITextFieldProps, IBaseComponentProp {
+}

package/src/components/search-input/search-input.types.d.ts

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

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

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

package/src/components/select/select.interface.ts

@@ -0,0 +1,18 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ISelectProps<T> extends React.SelectHTMLAttributes<T>, IBaseComponentProp, ISelectOptionsProps {
+    error?: boolean;
+    helperTextLocaleHandle?: string;
+    labelLocaleHandle: string;
+    onSelectOpt(e: string | number): void;
+    value?: string | number;
+}
+
+export interface ISelectOptionsProps {
+    options: Array<{value: string | number, textLocaleHandle: string, hidden?: boolean, disabled?: boolean}>
+}
+
+export interface ISelectState<T> {
+    active: boolean,
+    value: string | number
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ISidebarProps extends IBaseComponentProp {
+    show: boolean;
+    position: "left" | "right";
+    children: React.ReactNode;
+    onClose: () => void;
+    titleLocaleHandle: string;
+    height?: number;
+    width?: number;
+    top?: number;
+    overlayZindex?: string;
+    showOverlay?: boolean;
+    subtitle?: string;
+    enableDrawer?: boolean;
+    sideBarFooter?: React.ReactNode;
+}
+
+export interface ISidebarState{
+    hasScroll?: boolean;
+}

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

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

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

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

package/src/components/sort/sort.interface.ts

@@ -0,0 +1,28 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ISortProps extends IBaseComponentProp {
+    titleLocaleHandle?: string;
+    options: Array<{
+        nameLocaleHandle: string;
+        value: string | number;
+    }>;
+    defaultOption?: string | number;
+    selectedKeys?: string[];
+    icon: IconHandle;
+    onChangeOption?(option: {
+        nameLocaleHandle: string;
+        value: string | number;
+    }): void;
+    hideOnMouseOver?: boolean;
+    hideOnChangeOption?: boolean;
+    width?: string | number;
+    type?: "checkbox" | "default";
+    className?: string;
+    fillIcon?: string;
+}
+
+export interface ISortState {
+    showSort: boolean;
+    sortValue?: string | number;
+}

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

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

package/src/components/speed-dial/index.d.ts

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

package/src/components/speed-dial/speed-dial.interface.ts

@@ -0,0 +1,16 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+interface ISpeedDialItem {
+    icon: IconHandle;
+    onClick: () => void;
+    nameLocaleHandle: string;
+}
+
+export interface ISpeedDialProps extends IBaseComponentProp {
+    items: ISpeedDialItem[];
+}
+
+export interface ISpeedDialState{
+    onShow: boolean;
+}

package/src/components/speed-dial/speed-dial.types.d.ts

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

package/src/components/spin-edit/index.d.ts

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

package/src/components/spin-edit/spin-edit.interface.ts

@@ -0,0 +1,12 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ISpinEditProps extends IBaseComponentProp {
+    value?: number;
+    maxValue?: number;
+    minValue?:number;
+    onUpdate?(value:number):void;
+}
+
+export interface ISpinEditState{
+    value: number;
+}