robbyson-frontend-library 0.0.1-rc1

package/package.json

@@ -0,0 +1,40 @@
+{
+    "name": "robbyson-frontend-library",
+    "version": "0.0.1-rc1",
+    "description": "Robbyson frontend Library",
+    "main": "./dist/index.js",
+    "license": "MIT",
+    "author": {
+        "name": "Robbyson Systems S/A",
+        "email": "contact@robbyson.com",
+        "url": "https://www.robbyson.com"
+    },
+    "scripts": {
+        "watch": "yarn clean && tsc -w",
+        "build:dev": "yarn clean && tsc --build",
+        "build:prod": "yarn clean && tsc",
+        "clean": "rm -rf dist",
+        "import-components": "node importComponents"
+    },
+    "devDependencies": {
+        "@types/axios": "^0.14.0",
+        "@types/crypto-js": "^4.1.1",
+        "@types/history": "^5.0.0",
+        "@types/react": "^18.0.27",
+        "@types/styled-components": "^5.1.26",
+        "styled-components": "^5.3.9",
+        "typescript": "^4.9.5"
+    },
+    "dependencies": {
+        "axios": "^1.3.5",
+        "crypto-js": "^4.1.1",
+        "localforage": "^1.10.0",
+        "moment": "^2.29.4",
+        "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

@@ -0,0 +1,26 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IAccordionProps<T> extends IBaseComponentProp {
+  titleLocaleHandle?: string;
+  variant?: 'primary' | 'secondary';
+  options: IOptionsAccordion[];
+}
+
+export interface IAccordionState {
+  options: IOptionsAccordion[];
+}
+
+export interface IOptionsAccordion {
+  title: string;
+  choiseMode?: boolean;
+  isOpen?: boolean;
+  isCheckAll?: boolean;
+  isCheck?: boolean;
+  content: IOptionsContentAccordion[];
+}
+
+export interface IOptionsContentAccordion {
+  text: string;
+  checked?: boolean;
+  isCheck?: boolean;
+}

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

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

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

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

package/src/components/assets/assets.interfaces.tsx

@@ -0,0 +1,5 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IAssetsProps<T> extends React.DOMAttributes<T>, IBaseComponentProp {
+
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IBalloonProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+    variant?:
+        | "right-top"
+        | "right-bottom"
+        | "bottom-right"
+        | "bottom-left"
+        | "left-top"
+        | "left-bottom";
+    width: string;
+    height: string;
+    titleLocaleHandle: string;
+}

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

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

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

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

package/src/components/base-component.prop.interface.tsx

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

package/src/components/base-page.prop.interface.tsx

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

package/src/components/base-test.prop.interface.tsx

@@ -0,0 +1,3 @@
+export interface IBaseTestProp {
+  dataTestId: string;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ICheckboxProps<T> extends React.InputHTMLAttributes<T>, IBaseComponentProp {
+    indeterminate?: boolean;
+    labelLocaleHandle?: string;
+    infoTextLocaleHandle?: string;
+    id: string;
+}

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

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

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

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

package/src/components/colors/colors.interfaces.tsx

@@ -0,0 +1,5 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IColorsProps<T> extends React.DOMAttributes<T>, IBaseComponentProp {
+
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IContextMenuProps extends IBaseComponentProp {
+  items: DefaultItem[] | CheckboxItem;
+  onClickItem: (key: string[]) => void;
+  selectedItemsKeys: string[];
+  className?: string;
+  children: React.ReactNode;
+}
+
+export interface DefaultItem {
+  labelLocaleHandle: string;
+  key: string;
+}
+
+export interface CheckboxItem {
+  [titleLocaleHandle: string]: DefaultItem[];
+}
+
+export interface IContextMenuState {
+  show: boolean;
+}

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

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

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

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

package/src/components/divider/divider.interface.tsx

@@ -0,0 +1,4 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+export interface IDividerProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+    align?: 'vertical' | 'horizontal';
+}

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

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

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

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

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

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

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

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

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

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

package/src/components/image-progress-graph/image-progress-graph.interface.ts

@@ -0,0 +1,13 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IImageProgressGraphProps extends IBaseComponentProp {
+    value?: number;
+    goalValue?: number;
+    imagePath: string;
+    barColor?: string;
+    indicatorIcon?: IconHandle;
+    goalIcon?: IconHandle;
+    showGoalIcon?:boolean;
+    variant: 'simple' | 'general-level';
+}

package/src/components/image-progress-graph/image-progress-graph.types.d.ts

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

package/src/components/image-progress-graph/index.d.ts

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

package/src/components/index.tsx

@@ -0,0 +1,5 @@
+export * from "./base-component.prop.interface";
+export * from "./base-page.prop.interface";
+export * from "./base-test.prop.interface";
+export * from "./pages/base-app-page.component";
+export * from "./menu.interface";

package/src/components/menu.interface.tsx

@@ -0,0 +1,10 @@
+export type MenuItem = {
+    captionLocale: string,
+    iconHandle: string,
+    linkTo: string,
+    disabled?: boolean
+}
+
+export interface IMenuProps {
+    items: MenuItem[]
+}

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

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

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

@@ -0,0 +1,20 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+type ActionButton = {
+    titleLocaleHandle: string;
+    action: any;
+}
+
+export interface IModalState {
+    hidden:boolean;
+}
+
+
+export interface IModalProps extends IBaseComponentProp  {
+  children: any;
+  width?: number;
+  height?: number;
+  titleHandleLocale: string;
+  actionButtons?: ActionButton[];
+  exitOnOverlay?: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,10 @@
+
+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;
+  size?: SizeMoodButton;
+}

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

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

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { IoC } from "../../ioc";
+import {
+    IAuthenticationService,
+    ILocaleService,
+    IThemeService,
+} from "../../services";
+import SVG from "react-inlinesvg";
+
+import {
+    PageContainer,
+    Header,
+    Title,
+    ContextMenu,
+    Content,
+} from "./base-app-page.styles";
+import { RobbysonNavigate } from "../../utils";
+
+export abstract class BaseAppPage<T, T1> extends React.Component<T, T1> {
+    protected headerLocale: string = "Header Locale";
+
+    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 || "");
+    }
+
+    abstract contextMenu(): React.ReactNode;
+
+    abstract renderPage(): React.ReactNode;
+
+    public render() {
+        return (
+            <PageContainer>
+                <Header>
+                    <div>
+                        <SVG
+                            src={this._themeService.getIconAssetUrl(
+                                "left-arrow-large"
+                            )}
+                            onClick={() => RobbysonNavigate.back()}
+                        />
+                        <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,45 @@
+import { LayoutDimensions } from "../../constants";
+import styled from "styled-components";
+
+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.mobile}px) {
+        padding: 24px 16px 16px calc(${SIDEBAR_WIDTH}px + 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;
+
+    & > div {
+        display: flex;
+        align-items: center;
+    }
+
+    svg {
+        cursor: pointer;
+    }
+`;
+
+export const ContextMenu = styled.div``;
+
+export const Title = styled.h4`
+    margin-left: 12px;
+`;
+
+export const Content = styled.div``;

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

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

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

@@ -0,0 +1,14 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface IPaginationState {
+    activePage: number;
+    firstPage: number;
+    lastPage: number;
+}
+
+export interface IPaginationProps extends IBaseComponentProp  {
+    totalPages:number;
+    maxViewPage?: number;
+    activePage?: number;
+    onPageChange?(page:number):void;
+}

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/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';
+    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.tsx

@@ -0,0 +1,8 @@
+import { IconHandle } from "../../models";
+import { IBaseComponentProp } from "../base-component.prop.interface";
+export interface IProgressBarProps<T> extends React.HTMLAttributes<T>, IBaseComponentProp {
+    labelLocaleHandle?: string;
+    values: Array<string | number>;
+    currentValue: string | number;
+    coinValue?: any;
+}

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<any>>;
+
+    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.tsx

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