robbyson-frontend-library 0.0.1-rc12 → 0.0.1-rc13

package/index.d.ts

@@ -28,7 +28,8 @@ export * from "./src/components/text-field";
 export * from "./src/components/tooltip";
 export * from "./src/components/transitions";
 export * from "./src/components/typography";
-export * from "./src/components/tags";
+export * from "./src/components/primary-tag";
+export * from "./src/components/tag";
 export * from "./src/components/timer";
 export * from "./src/components/sidebar";
 export * from "./src/components/toggle-icon-button";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "robbyson-frontend-library",
-    "version": "0.0.1-rc12",
+    "version": "0.0.1-rc13",
     "description": "Robbyson frontend Library",
     "main": "./dist/index.js",
     "license": "MIT",
@@ -20,6 +20,7 @@
         "@types/axios": "^0.14.0",
         "@types/crypto-js": "^4.1.1",
         "@types/lodash": "^4.14.199",
+        "@types/ramda": "^0.27.32",
         "@types/react": "~18.2.0",
         "@types/styled-components": "^5.1.26",
         "styled-components": "^5.3.9",

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

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

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

@@ -0,0 +1,8 @@
+import { IBaseComponentProp } from "../base-component.prop.interface";
+
+export interface ITagProps<T> extends IBaseComponentProp {
+    type?: string
+    textColor?: string
+    bgColor?: string
+    textLocaleHandle?: string;
+}

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

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

package/src/components/timer/timer.interface.ts

@@ -1,12 +1,11 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
 export interface ITimerProps extends IBaseComponentProp {
-  expirationDate: Date;
+  expirationDate: string;
   onTimerEnd?: () => void;
 }
 
 export interface ITimerState {
   showStopWatch: boolean;
   expirationDateStopWatch: string;
-  isFirstRender: boolean;
 }

package/src/components/tooltip/tooltip.interface.ts

@@ -1,19 +1,28 @@
 import { IBaseComponentProp } from "../base-component.prop.interface";
 
-export type TooltipPosition = "top" | "bottom"
+export type TooltipPosition = "top" | "bottom";
 
 export interface ITooltipProps extends IBaseComponentProp {
     textLocaleHandle: string;
-    delay?: number;
-    children: any;
-    width?:number;
-    onShow?():void;
-    onHide?():void;
-    className?:string;
+    children: React.ReactNode;
+    className?: string;
     startDirection?: TooltipPosition;
+    width?: number;
+    /**
+     * @description
+     * Use `virtualizedId` to re-render dynamically texts, like: `states update`.
+     */
+    virtualizedId?: string;
+
+    /**
+     * @description
+     * Use `forceRecreate` to re-create tooltip component with new dimensions.
+     * 
+     * This is useful when you need to re-render tooltip with dynamically texts sizes.
+     */
+    forceRecreate?: boolean;
 }
 
 export interface ITooltipState {
-    hidden: boolean;
     startDirection?: TooltipPosition;
-}
+}

package/src/index.ts

@@ -40,3 +40,5 @@ export * from "./constants";
 
 // DTOs
 export * from "./services/dtos";
+//types
+export * from "./types";

package/src/models/theme-base.ts

@@ -1,4 +1,3 @@
-
 class ThemeBaseColors {
     primary1: string;
     primary2: string;
@@ -12,10 +11,10 @@ class ThemeBaseColors {
     solidBackground: string;
     gradientBackground: string;
     levels: {
-        shade100: string,
-        shade75: string,
-        shade50: string,
-        shade25: string,
+        shade100: string;
+        shade75: string;
+        shade50: string;
+        shade25: string;
         radialGradient: string;
     }[];
     neutral90: string;
@@ -29,66 +28,274 @@ class ThemeBaseColors {
     neutral10: string;
     neutral0: string;
     successes: {
-        text: string,
-        hover: string,
-        dark: string,
-        default: string,
-        light: string,
-        background: string
+        text: string;
+        hover: string;
+        dark: string;
+        default: string;
+        light: string;
+        background: string;
     };
     errors: {
-        text: string,
-        hover: string,
-        dark: string,
-        default: string,
-        light: string,
-        background: string
+        text: string;
+        hover: string;
+        dark: string;
+        default: string;
+        light: string;
+        background: string;
     };
     warnings: {
-        text: string,
-        hover: string,
-        dark: string,
-        default: string,
-        light: string,
-        background: string
+        text: string;
+        hover: string;
+        dark: string;
+        default: string;
+        light: string;
+        background: string;
     };
     itemsTags: {
         experience: {
-            text: string,
-            background: string
-        },
+            text: string;
+            background: string;
+        };
         physical: {
-            text: string,
-            background: string
-        },
+            text: string;
+            background: string;
+        };
         auction: {
-            text: string,
-            background: string
-        },
+            text: string;
+            background: string;
+        };
         raffle: {
-            text: string,
-            background: string
-        },
+            text: string;
+            background: string;
+        };
         crowdfunding: {
-            text: string,
-            background: string
-        },
+            text: string;
+            background: string;
+        };
         voucher: {
-            text: string,
-            background: string
-        }
+            text: string;
+            background: string;
+        };
     };
     complementary: {
         agendaReminder: string;
         angelGodson: string;
         angelGodfather: string;
     };
-
 }
 
-export const ICON_HANDLES = ['active-bold','active-thin', 'avatar-login', 'add-challenge-bold','add-challenge-thin','add-notification-bold','add-notification-thin','add-quiz-bold','add-quiz-thin','angel-friend-add-bold','angel-friend-add-thin','angel-friend-bold','angel-friend-thin','attachment-bold','attachment-thin','auction-bold','auction-thin','available-bold','available-thin','broadcast-bold','broadcast-thin','calendar-bold','calendar-thin','camera-bold','camera-thin','cancel-bold','cancel-thin','challenge-bold','challenge-thin','chat-bold','chatbot-bold','chatbot-thin','chat-fil-bold','chat-fill-thin','chat-smile-bold','chat-smile-thin','chat-thin','check-bold','check-thin','chocolate-menu','chronometer-bold','chronometer-thin','clock-bold','clock-thin','close-bold','close-thin','cloud-bold','cloud-thin','coin-bold','coin-thin','column-view-active-bold','column-view-active-thin','column-view-bold','column-view-thin','contacts-bold','contacts-thin','delete-bold','delete-thin','documents-bold','documents-thin','down-arrow','download-bold','download-thin','downward-arrow-bold','downward-arrow-thin','duplicate-bold','duplicate-thin','eagle-bold','eagle-thin','edit-bold','edit-thin','emoji-bold','emoji-thin','family-bold','family-thin','filter-active-bold','filter-active-thin','filter-inactive-bold','filter-inactive-thin','filter','forward-bold','forward-thin','goal-bold','goal-thin','grid-view-active-bold','grid-view-active-thin','grid-view-bold','grid-view-thin','group-bold','group-brackets-bold','group-brackets-thin','group-fill-bold','group-fill-thin','group-thin','guide-bold','guide-thin','health-bold','health-thin','heart-bold','heart-fill-bold','heart-fill-thin','heart-thin','humor-bold','humor-thin','inactive-bold','inactive-thin','indicator-bold','indicator-thin','info-bold','info-thin','integration-bold','integration-thin','learning-bold','learning-thin','leave-bold','leave-thin','left-arrow-large','left-arrow-small','like-bold','like-fill-bold','like-fill-thin','like-thin','magnifying-glass-bold','magnifying-glass-thin','minus','more-vert','mountain-bold','mountain-thin','new-document-bold','new-document-thin','new-tip-thin-1','new-tip-thin','notification-bold','notification-thin','objetive-bold','objetive-thin','order-bold-1','order-bold','order-thin-1','order-thin','performance-bold','performance-thin','phone-bold','phone-thin','plus','quiz-bold','quiz-thin','raffle-bold','raffle-draw-bold','raffle-draw-thin','raffle-thin','relationship-bold','relationship-thin','reports-bold','reports-thin','right-arrow-large','right-arrow-small','send-bold','send-thin','settings-bold','settings-thin','star-bold','star-thin','store-bold','store-item-bold','store-item-thin','store-thin','tag-bold','tag-thin','test-bold','test-thin','tips-bold','tips-thin','tree-bold','tree-thin','trophy-bold','trophy-thin','up-arrow','upload-bold','upload-thin','upward-arrow-bold','upward-arrow-thin','user-bold','user-thin','variable-pay-bold','variable-pay-thin','view-bold','view-thin','not-view-thin', 'not-view-bold', 'work-bold','working','work-thin', 'no-results-found', 'not-found-bold', 'hamburger-menu', 'cloud-circle', 'mountain-circle', 'star-circle', 'expand-image-bold', 'camera-off-bold' , 'minimize-image-bold' , 'phone-call-bold' , 'microphone-bold' , 'microphone-off-bold' , 'share-screen-bold', 'ead-play-button'] as const;
+export const ICON_HANDLES = [
+    "active-bold",
+    "active-thin",
+    "avatar-login",
+    "add-challenge-bold",
+    "add-challenge-thin",
+    "add-notification-bold",
+    "add-notification-thin",
+    "add-quiz-bold",
+    "add-quiz-thin",
+    "angel-friend-add-bold",
+    "angel-friend-add-thin",
+    "angel-friend-bold",
+    "angel-friend-thin",
+    "attachment-bold",
+    "attachment-thin",
+    "auction-bold",
+    "auction-thin",
+    "available-bold",
+    "available-thin",
+    "broadcast-bold",
+    "broadcast-thin",
+    "calendar-bold",
+    "calendar-thin",
+    "camera-bold",
+    "camera-thin",
+    "cancel-bold",
+    "cancel-thin",
+    "challenge-bold",
+    "challenge-thin",
+    "chat-bold",
+    "chatbot-bold",
+    "chatbot-thin",
+    "chat-fil-bold",
+    "chat-fill-thin",
+    "chat-smile-bold",
+    "chat-smile-thin",
+    "chat-thin",
+    "check-bold",
+    "check-thin",
+    "chocolate-menu",
+    "chronometer-bold",
+    "chronometer-thin",
+    "clock-bold",
+    "clock-thin",
+    "close-bold",
+    "close-thin",
+    "cloud-bold",
+    "cloud-thin",
+    "coin-bold",
+    "coin-thin",
+    "column-view-active-bold",
+    "column-view-active-thin",
+    "column-view-bold",
+    "column-view-thin",
+    "contacts-bold",
+    "contacts-thin",
+    "delete-bold",
+    "delete-thin",
+    "documents-bold",
+    "documents-thin",
+    "down-arrow",
+    "download-bold",
+    "download-thin",
+    "downward-arrow-bold",
+    "downward-arrow-thin",
+    "duplicate-bold",
+    "duplicate-thin",
+    "eagle-bold",
+    "eagle-thin",
+    "edit-bold",
+    "edit-thin",
+    "emoji-bold",
+    "emoji-thin",
+    "family-bold",
+    "family-thin",
+    "filter-active-bold",
+    "filter-active-thin",
+    "filter-inactive-bold",
+    "filter-inactive-thin",
+    "filter",
+    "forward-bold",
+    "forward-thin",
+    "goal-bold",
+    "goal-thin",
+    "grid-view-active-bold",
+    "grid-view-active-thin",
+    "grid-view-bold",
+    "grid-view-thin",
+    "group-bold",
+    "group-brackets-bold",
+    "group-brackets-thin",
+    "group-fill-bold",
+    "group-fill-thin",
+    "group-thin",
+    "guide-bold",
+    "guide-thin",
+    "health-bold",
+    "health-thin",
+    "heart-bold",
+    "heart-fill-bold",
+    "heart-fill-thin",
+    "heart-thin",
+    "humor-bold",
+    "humor-thin",
+    "inactive-bold",
+    "inactive-thin",
+    "indicator-bold",
+    "indicator-thin",
+    "info-bold",
+    "info-thin",
+    "integration-bold",
+    "integration-thin",
+    "learning-bold",
+    "learning-thin",
+    "leave-bold",
+    "leave-thin",
+    "left-arrow-large",
+    "left-arrow-small",
+    "like-bold",
+    "like-fill-bold",
+    "like-fill-thin",
+    "like-thin",
+    "magnifying-glass-bold",
+    "magnifying-glass-thin",
+    "minus",
+    "more-vert",
+    "mountain-bold",
+    "mountain-thin",
+    "new-document-bold",
+    "new-document-thin",
+    "new-tip-thin-1",
+    "new-tip-thin",
+    "notification-bold",
+    "notification-thin",
+    "objetive-bold",
+    "objetive-thin",
+    "order-bold-1",
+    "order-bold",
+    "order-thin-1",
+    "order-thin",
+    "performance-bold",
+    "performance-thin",
+    "phone-bold",
+    "phone-thin",
+    "plus",
+    "quiz-bold",
+    "quiz-thin",
+    "raffle-bold",
+    "raffle-draw-bold",
+    "raffle-draw-thin",
+    "raffle-thin",
+    "relationship-bold",
+    "relationship-thin",
+    "reports-bold",
+    "reports-thin",
+    "right-arrow-large",
+    "right-arrow-small",
+    "send-bold",
+    "send-thin",
+    "settings-bold",
+    "settings-thin",
+    "star-bold",
+    "star-thin",
+    "store-bold",
+    "store-item-bold",
+    "store-item-thin",
+    "store-thin",
+    "tag-bold",
+    "tag-thin",
+    "test-bold",
+    "test-thin",
+    "tips-bold",
+    "tips-thin",
+    "tree-bold",
+    "tree-thin",
+    "trophy-bold",
+    "trophy-thin",
+    "up-arrow",
+    "upload-bold",
+    "upload-thin",
+    "upward-arrow-bold",
+    "upward-arrow-thin",
+    "user-bold",
+    "user-thin",
+    "variable-pay-bold",
+    "variable-pay-thin",
+    "view-bold",
+    "view-thin",
+    "not-view-thin",
+    "not-view-bold",
+    "work-bold",
+    "working",
+    "work-thin",
+    "no-results-found",
+    "not-found-bold",
+    "hamburger-menu",
+    "cloud-circle",
+    "mountain-circle",
+    "star-circle",
+    "expand-image-bold",
+    "camera-off-bold",
+    "minimize-image-bold",
+    "phone-call-bold",
+    "microphone-bold",
+    "microphone-off-bold",
+    "share-screen-bold",
+    "ead-play-button",
+    "tag-left-triangle",
+] as const;
 
-export type IconHandle = typeof ICON_HANDLES[number];
+export type IconHandle = (typeof ICON_HANDLES)[number];
 
 class ThemeBaseRect {
     top: string;
@@ -129,8 +336,8 @@ class Typography {
     h6Bold: ThemeTypography;
     subtitle2: ThemeTypography;
     subtitle1: ThemeTypography;
-    body1Medium: ThemeTypography
-    body1Book: ThemeTypography
+    body1Medium: ThemeTypography;
+    body1Book: ThemeTypography;
     body1BookItalic: ThemeTypography;
     body1Link: ThemeTypography;
     body2Medium: ThemeTypography;
@@ -144,7 +351,7 @@ class Typography {
     small: ThemeTypography;
     smallMedium: ThemeTypography;
     toolTip: ThemeTypography;
-};
+}
 
 export class ThemeBase {
     colors: ThemeBaseColors;
@@ -152,7 +359,7 @@ export class ThemeBase {
         fontFamily: string; // font-family
         fontWeight: string; // font-weight
         fontStyle: string; // font-style
-        src: string; // src  
+        src: string; // src
     }[];
     transitions: ThemeTransition;
     typography: Typography;
@@ -165,10 +372,10 @@ export class ThemeBase {
         logoCompleteNegative: ThemeAssets;
         logoIconNegative: ThemeAssets;
         backgroundLogo: ThemeAssets;
-        humorAvatar: ThemeAssets,
-        humorImGoodCircle: ThemeAssets,
-        humorImTopCircle: ThemeAssets,
-        humorImbadCircle: ThemeAssets,
+        humorAvatar: ThemeAssets;
+        humorImGoodCircle: ThemeAssets;
+        humorImTopCircle: ThemeAssets;
+        humorImbadCircle: ThemeAssets;
         logoMobile: ThemeAssets;
         loginRobbysonAvatar: ThemeAssets;
         quizThankYouAvatar: ThemeAssets;
@@ -193,4 +400,4 @@ export class ThemeBase {
             quizThankYouAvatar: new ThemeAssets(),
         };
     }
-};
+}

package/src/services/index.d.ts

@@ -14,3 +14,4 @@ export * from "./dtos";
 export * from "./agenda.service.interface";
 export * from "./chat.service.interface";
 export * from "./friendship.service.interface";
+export * from "./tree.service.interface";

package/src/services/tree.service.interface.ts

@@ -0,0 +1,4 @@
+export interface ITreeService {
+    setDateTree(date: any): void;
+}
+

package/src/states/main-container/root-app.state.interface.ts

@@ -1,3 +1,5 @@
+import { Week } from "../../components/tree-date-picker";
+
 import {
     HumorLastModel,
     HumorListModel,
@@ -24,5 +26,8 @@ export interface IRootApp {
         lastHumor: HumorLastModel[];
         hasRegisterMood: boolean;
     };
+    selectedDate: Date| null,
+    selectedMonth: Date | null,
+    selectedWeek?: Week,
     createGlobalImplementations: () => void;
 }

package/src/types/index.ts

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

package/src/types/tree/index.ts

@@ -0,0 +1 @@
+export * from './tree.types';

package/src/types/tree/tree.types.ts

@@ -0,0 +1,31 @@
+// import { DurationInputArg1, DurationInputArg2 } from 'moment';
+// import { AxiosRequestConfig } from 'axios';
+
+export enum UnitType {
+    MONTHS = 'months',
+    WEEKS = 'weeks',
+    DAYS = 'days',
+    HOURS = 'hours',
+    MINUTES = 'minutes',
+    SECONDS = 'seconds',
+}
+
+type User = {
+    _id: number;
+    contractor_id: number;
+    login: string;
+    name: string;
+    robbyson_user_id: number;
+    system_id: number;
+    identification: string;
+}
+
+export type JWT = {
+    iat: number;
+    exp: number;
+    sub: User;
+}
+
+export enum TreeActionTypes {
+    SET_DATETREE = "SET_DATETREE",
+}

package/src/utils/date.utils.ts

@@ -1,6 +1,11 @@
 import _ from "lodash";
 import moment from "moment";
 
+type RemainingTime = {
+    timeRemainingText: string;
+    secondsDistance: number;
+};
+
 export class DateUtils {
     static isSameDateAsNow(date: Date): boolean {
         return moment(date).isSame(moment(new Date()), "day");
@@ -32,4 +37,38 @@ export class DateUtils {
 
         return dates;
     }
+
+    static getRemainingTimeFromNow(
+        compareDate: Date,
+        complementaryText: string
+    ): RemainingTime {
+        if (!compareDate)
+            return {
+                secondsDistance: 0,
+                timeRemainingText: "",
+            };
+
+        function formatTime(time: number, length = 2): string {
+            return time.toString().padStart(length, "0");
+        }
+
+        const diff = moment(compareDate).diff(moment(), "seconds");
+
+        const days = formatTime(Math.floor(diff / (60 * 60 * 24)), 3);
+        const hours = formatTime(
+            Math.floor((diff % (60 * 60 * 24)) / (60 * 60))
+        );
+        const minutes = formatTime(Math.floor((diff % (60 * 60)) / 60));
+        const seconds = formatTime(Math.floor(diff % 60));
+
+        const text =
+            diff < 0
+                ? `000 ${complementaryText} 00:00:00`
+                : `${days} ${complementaryText} ${hours}:${minutes}:${seconds}`;
+
+        return {
+            timeRemainingText: text,
+            secondsDistance: diff,
+        };
+    }
 }

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

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

package/src/components/tags/tags.interface.ts

@@ -1,17 +0,0 @@
-import { IconHandle } from "../../models";
-import { IBaseComponentProp } from "../base-component.prop.interface";
-
-export interface ITagsState {
-  show: boolean;
-}
-export interface ITagsProps<T> extends IBaseComponentProp, React.HTMLAttributes<T> {
-  closeable?: boolean;
-  fillIcon?: string;
-  iconHandle?: IconHandle;
-  children?: any;
-  variant?: "primary" | "secondary";
-  type?: "success" | "error" | "warning";
-  size: "small" | "large";
-  disabled?: boolean
-  textLocaleHandle?: string;
-}

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

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