magneto365.ui 2.80.0 → 2.81.1

package/dist/esm/index.js

@@ -141,6 +141,7 @@ export { ImageCard } from './components/UI/molecules/ImageCard/ImageCard.compone
 export { CompanyCard, CompanyCardWithDescription, CompanyCardWithoutDescription } from './components/UI/molecules/CompanyCard/CompanyCard.component.js';
 export { JobDetails } from './components/UI/molecules/JobDetails/JobDetails.component.js';
 export { default as SimilarJobsCard } from './components/UI/molecules/SimilarJobsCard/SimilarJobsCard.component.js';
+export { Chat } from './components/UI/molecules/Chat/Chat.component.js';
 export { AlertsPanel } from './components/UI/organism/AlertsPanel/AlertsPanel.component.js';
 export { default as AlphabetFilter } from './components/UI/organism/AlphabetFilter/AlphabetFilter.component.js';
 export { ApplicationSummary } from './components/UI/organism/ApplicationSummary/ApplicationSummary.component.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/tokens/_color.scss

@@ -41,6 +41,8 @@ $color-yellow-50: #fffaef;
 $color-yellow-100: #fde0a6;
 $color-yellow-200: #fcc75d;
 $color-yellow-300: #faad14;
+$color-purple-50: #f0e8ff;
+$color-purple-200: #d3b7ff;
 
 $color-map: (
   transparent: $color-transparent,
@@ -82,5 +84,7 @@ $color-map: (
   yellow-50: $color-yellow-50,
   yellow-100: $color-yellow-100,
   yellow-200: $color-yellow-200,
-  yellow-300: $color-yellow-300
+  yellow-300: $color-yellow-300,
+  purple-50: $color-purple-50,
+  purple-200: $color-purple-200
 );

package/dist/tokens/_utilities.scss

@@ -123,6 +123,12 @@
 .stroke-yellow-300 {
   stroke: color.$color-yellow-300;
 }
+.stroke-purple-50 {
+  stroke: color.$color-purple-50;
+}
+.stroke-purple-200 {
+  stroke: color.$color-purple-200;
+}
 
 .fill-transparent {
   fill: color.$color-transparent;
@@ -244,6 +250,12 @@
 .fill-yellow-300 {
   fill: color.$color-yellow-300;
 }
+.fill-purple-50 {
+  fill: color.$color-purple-50;
+}
+.fill-purple-200 {
+  fill: color.$color-purple-200;
+}
 
 .bg-transparent {
   background-color: color.$color-transparent;
@@ -365,6 +377,12 @@
 .bg-yellow-300 {
   background-color: color.$color-yellow-300;
 }
+.bg-purple-50 {
+  background-color: color.$color-purple-50;
+}
+.bg-purple-200 {
+  background-color: color.$color-purple-200;
+}
 
 .color-transparent {
   color: color.$color-transparent;
@@ -486,6 +504,12 @@
 .color-yellow-300 {
   color: color.$color-yellow-300;
 }
+.color-purple-50 {
+  color: color.$color-purple-50;
+}
+.color-purple-200 {
+  color: color.$color-purple-200;
+}
 
 .w-inherit {
   width: scale.$scale-inherit;

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/ChatQuestionnaire.interface.d.ts

@@ -0,0 +1,52 @@
+import { IChat } from '@components/UI/molecules/Chat';
+
+declare enum EQuestionType {
+    unique = 0,
+    multiple = 1,
+    openShort = 2,
+    openLong = 3
+}
+interface IPossibleAnswer {
+    id: number;
+    label: string;
+}
+declare type IQuestion = {
+    id: number;
+    titleQuestion: string;
+    caption?: string;
+    answerType: EQuestionType;
+    possibleAnswers: IPossibleAnswer[];
+};
+declare type TSendOpenQuestion = {
+    type: EQuestionType.openShort | EQuestionType.openLong;
+    id: number;
+    openAnswer: string;
+};
+declare type TSendCloseQuestion = {
+    type: EQuestionType.multiple | EQuestionType.unique;
+    id: number;
+    answer: {
+        id: number;
+        label: string;
+    }[];
+};
+declare type TSendQuestion = TSendCloseQuestion | TSendOpenQuestion;
+interface IQuestionWithAnswer {
+    question: IQuestion;
+    answer?: TSendQuestion;
+    mode: 'editing' | 'readonly';
+}
+interface IQuestionnaireMessage extends IChat.Message {
+    content: IQuestionWithAnswer;
+}
+interface IChatQuestionnaire {
+    className?: string;
+    children?: (messages: IQuestionnaireMessage[]) => React.ReactNode;
+}
+interface IQuestionnaireAnswer {
+    className?: string;
+    questionWithAnswer: IQuestionWithAnswer;
+    onChange: (answer: IQuestionWithAnswer) => void;
+}
+
+export { EQuestionType, IChatQuestionnaire, IPossibleAnswer, IQuestion, IQuestionWithAnswer, IQuestionnaireAnswer, IQuestionnaireMessage, TSendCloseQuestion, TSendOpenQuestion, TSendQuestion };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/children/ChatQuestionnaireButton/ChatQuestionnaireButton.interface.d.ts

@@ -0,0 +1,5 @@
+interface IChatQuestionnaireButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'grey' | 'blue' | 'green';
+}
+
+export { IChatQuestionnaireButton };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/children/ChatQuestionnaireMultipleChoice/ChatQuestionnaireMultipleChoice.interface.d.ts

@@ -0,0 +1,10 @@
+import { IQuestionnaireAnswer } from '../../ChatQuestionnaire.interface';
+
+interface IChatQuestionnaireMultipleChoice extends IQuestionnaireAnswer {
+    renderSubmitButton: (options: {
+        disabled: boolean;
+        className: string;
+    }) => React.ReactNode;
+}
+
+export { IChatQuestionnaireMultipleChoice };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/children/ChatQuestionnaireOpen/ChatQuestionnaireOpen.interface.d.ts

@@ -0,0 +1,14 @@
+interface IChatQuestionnaireShort extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+    maxLength: number;
+    classNames?: {
+        container?: string;
+        field?: string;
+        counter?: string;
+    };
+    renderRight?: (props: {
+        classNameBtnSend: string;
+        icon: React.ReactElement;
+    }) => React.ReactNode;
+}
+
+export { IChatQuestionnaireShort };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/children/ChatQuestionnaireQuestion/ChatQuestionnaireQuestion.interface.d.ts

@@ -0,0 +1,10 @@
+import { IQuestionWithAnswer } from '../../ChatQuestionnaire.interface';
+
+interface IChatQuestionnaireQuestion {
+    className?: string;
+    children?: React.ReactNode;
+    questionWithAnswer: IQuestionWithAnswer;
+    waitFor?: number;
+}
+
+export { IChatQuestionnaireQuestion };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/children/ChatQuestionnaireUniqueChoice/ChatQuestionnaireUniqueChoice.interface.d.ts

@@ -0,0 +1,11 @@
+import { IQuestionnaireAnswer } from '../../ChatQuestionnaire.interface';
+
+interface IChatQuestionnaireUniqueChoice extends IQuestionnaireAnswer {
+    className?: string;
+    classNames?: {
+        answers?: string;
+        option: string;
+    };
+}
+
+export { IChatQuestionnaireUniqueChoice };

package/dist/types/components/Domain/Jobs/ChatQuestionnaire/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { IChatQuestionnaireButton } from './children/ChatQuestionnaireButton/ChatQuestionnaireButton.interface';
+import { IChatQuestionnaireShort } from './children/ChatQuestionnaireOpen/ChatQuestionnaireOpen.interface';
+import { IChatQuestionnaireMultipleChoice } from './children/ChatQuestionnaireMultipleChoice/ChatQuestionnaireMultipleChoice.interface';
+import { IChatQuestionnaireUniqueChoice } from './children/ChatQuestionnaireUniqueChoice/ChatQuestionnaireUniqueChoice.interface';
+import { IChatQuestionnaireQuestion } from './children/ChatQuestionnaireQuestion/ChatQuestionnaireQuestion.interface';
+import { IChat } from '../../../UI/molecules/Chat/Chat.interface';
+import { IChatQuestionnaire, IQuestionnaireAnswer, IQuestion, IQuestionWithAnswer, TSendQuestion } from './ChatQuestionnaire.interface';
+export { EQuestionType, IChatQuestionnaire, IPossibleAnswer, IQuestion, IQuestionWithAnswer, IQuestionnaireAnswer, IQuestionnaireMessage, TSendCloseQuestion, TSendOpenQuestion, TSendQuestion } from './ChatQuestionnaire.interface';
+
+declare const ChatQuestionnaire: React.ForwardRefExoticComponent<IChatQuestionnaire & React.RefAttributes<IChat.Methods>> & {
+    Question: React.FC<IChatQuestionnaireQuestion>;
+    MessageCandidate: React.FC<React.PropsWithChildren<IQuestionnaireAnswer>>;
+    Answer: {
+        UniqueChoice: React.FC<IChatQuestionnaireUniqueChoice>;
+        MultipleChoice: React.FC<IChatQuestionnaireMultipleChoice>;
+        Open: React.FC<IChatQuestionnaireShort>;
+    };
+    useChat: (questionsParam: IQuestion[]) => {
+        next: () => IQuestionWithAnswer | null;
+        getAnswers: () => {
+            question: IQuestion;
+            answer: TSendQuestion | undefined;
+        }[];
+        saveAnswer: (data: IQuestionWithAnswer) => void;
+        reset: () => void;
+        isCompleted: boolean;
+        chat: React.RefObject<IChat.Methods>;
+    };
+    Button: React.FC<IChatQuestionnaireButton>;
+};
+
+export { ChatQuestionnaire };

package/dist/types/components/Domain/Jobs/index.d.ts

@@ -2,3 +2,5 @@ export { default as JobsPage } from './JobsPage/JobsPage.component';
 export { JobDetails } from './JobDetails/index';
 export { SimilarJobs } from './SimilarJobs/index';
 export { JobCompanyLogo } from './JobCompanyLogo/JobCompanyLogo.component';
+export { ChatQuestionnaire } from './ChatQuestionnaire/index';
+export { EQuestionType, IChatQuestionnaire, IPossibleAnswer, IQuestion, IQuestionWithAnswer, IQuestionnaireAnswer, IQuestionnaireMessage, TSendCloseQuestion, TSendOpenQuestion, TSendQuestion } from './ChatQuestionnaire/ChatQuestionnaire.interface';

package/dist/types/components/UI/atoms/ComparativeCounter/ComparativeCounter.interface.d.ts

@@ -12,6 +12,7 @@ interface IComparativeCounter {
      * this property changes the text align
      */
     position?: TComparativeCounterPosition;
+    className?: string;
 }
 
 export { IComparativeCounter, TComparativeCounterPosition };

package/dist/types/components/UI/molecules/Chat/Chat.component.d.ts

@@ -0,0 +1,15 @@
+import { TMessage } from './children/Message/Message.interface';
+import { ILoadingDots } from './children/LoadingDots/LoadingDots.interface';
+import React__default from 'react';
+import { IChat } from './Chat.interface';
+
+/**
+ * This is a Chat Component API that allows you to create a chat interface with messages.
+ * It uses a reducer to manage the state of messages and provides methods to push and update messages.
+ */
+declare const Chat: React__default.ForwardRefExoticComponent<IChat & React__default.RefAttributes<IChat.Methods>> & {
+    LoadingDots: React__default.FC<ILoadingDots>;
+    Message: React__default.FC<TMessage>;
+};
+
+export { Chat };

package/dist/types/components/UI/molecules/Chat/Chat.interface.d.ts

@@ -0,0 +1,32 @@
+interface IChat extends React.HTMLAttributes<HTMLDivElement> {
+    initialMessages?: IChat.Message[];
+    children?: (props: IChat.ChildrenPayload) => React.ReactNode;
+}
+declare namespace IChat {
+    interface Methods {
+        pushMessage: (message: IChat.Message) => void;
+        updateMessage: (message: IChat.Message) => void;
+        clear: () => void;
+        snapshot: () => IChat.Message[];
+    }
+    interface ReducerState {
+        messages: IChat.Message[];
+    }
+    type ReducerActions = {
+        type: 'PUSH_MESSAGE' | 'UPDATE_MESSAGE';
+        payload: IChat.Message;
+    } | {
+        type: 'CLEAR_MESSAGES';
+    };
+    interface ChildrenPayload {
+        messages: IChat.Message[];
+    }
+    interface Message {
+        id: string | number;
+        sender: string;
+        type: string | number;
+        content: React.ReactNode;
+    }
+}
+
+export { IChat };

package/dist/types/components/UI/molecules/Chat/children/LoadingDots/LoadingDots.interface.d.ts

@@ -0,0 +1,7 @@
+interface ILoadingDots extends React.HTMLAttributes<HTMLDivElement> {
+    classNames?: {
+        dot?: string;
+    };
+}
+
+export { ILoadingDots };

package/dist/types/components/UI/molecules/Chat/children/Message/Message.interface.d.ts

@@ -0,0 +1,11 @@
+interface TMessage extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
+    role: string;
+    to: 'right' | 'left';
+    renderLeft?: () => React.ReactNode;
+    renderRight?: () => React.ReactNode;
+    classNames?: {
+        content?: string;
+    };
+}
+
+export { TMessage };

package/dist/types/index.d.ts

@@ -246,6 +246,8 @@ export { IDetailList, IJobDetails } from './components/UI/molecules/JobDetails/J
 export { JobDetails } from './components/UI/molecules/JobDetails/JobDetails.component';
 export { default as SimilarJobsCard } from './components/UI/molecules/SimilarJobsCard/SimilarJobsCard.component';
 export { ISimilarJobsCard } from './components/UI/molecules/SimilarJobsCard/SimilarJobsCard.interface';
+export { Chat } from './components/UI/molecules/Chat/Chat.component';
+export { IChat } from './components/UI/molecules/Chat/Chat.interface';
 export { IAlertsPanel } from './components/UI/organism/AlertsPanel/AlertsPanel.interface';
 export { AlertsPanel } from './components/UI/organism/AlertsPanel/AlertsPanel.component';
 export { default as AlphabetFilter } from './components/UI/organism/AlphabetFilter/AlphabetFilter.component';

package/dist/types/shared/tokens/index.d.ts

@@ -20,7 +20,7 @@ declare type MagnetoUIBorder = '1' | '2' | 'inherit' | 'min';
  * @category theme
  * @tags color, theme, palette, branding, accessibility
  */
-declare type MagnetoUIColor = 'transparent' | 'inherit' | 'current' | 'blue-dark-50' | 'blue-dark-100' | 'blue-dark-200' | 'blue-dark-300' | 'blue-dark-400' | 'blue-dark-500' | 'blue-light-50' | 'blue-light-100' | 'blue-light-200' | 'blue-light-300' | 'blue-light-400' | 'blue-light-500' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'grey-50' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'grey-700' | 'grey-800' | 'grey-900' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'yellow-50' | 'yellow-100' | 'yellow-200' | 'yellow-300';
+declare type MagnetoUIColor = 'transparent' | 'inherit' | 'current' | 'blue-dark-50' | 'blue-dark-100' | 'blue-dark-200' | 'blue-dark-300' | 'blue-dark-400' | 'blue-dark-500' | 'blue-light-50' | 'blue-light-100' | 'blue-light-200' | 'blue-light-300' | 'blue-light-400' | 'blue-light-500' | 'green-50' | 'green-100' | 'green-200' | 'green-300' | 'green-400' | 'green-500' | 'green-600' | 'grey-50' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'grey-700' | 'grey-800' | 'grey-900' | 'red-50' | 'red-100' | 'red-200' | 'red-300' | 'yellow-50' | 'yellow-100' | 'yellow-200' | 'yellow-300' | 'purple-50' | 'purple-200';
 /**
  * @description Spacing SCC vars for CSS `gap` properties. Useful in layout systems based on grid or flexbox.
  * @example ```scss

package/package.json

@@ -4,7 +4,7 @@
     "type": "git",
     "url": "https://github.com/W170/talenta.magneto365.ui.git"
   },
-  "version": "2.80.0",
+  "version": "2.81.1",
   "description": "Magneto365 UI common components",
   "scripts": {
     "generate:tokens": "node ./.scripts/generateTokens.js",
@@ -93,8 +93,8 @@
   "files": [
     "dist"
   ],
-  "types": "dist/index.d.ts",
-  "typings": "dist/index.d.ts",
+  "types": "dist/types/index.d.ts",
+  "typings": "dist/types/index.d.ts",
   "dependencies": {},
   "peerDependencies": {
     "react-dom": "17.0.2"