@buerokratt-ria/common-gui-components 0.0.1

package/types/customerSupportActivity.ts

@@ -0,0 +1,5 @@
+export type CustomerSupportActivityDTO = {
+  customerSupportActive: boolean;
+  customerSupportStatus: 'offline' | 'idle' | 'online';
+  customerSupportId: string;
+};

package/types/deleteChatSettings.ts

@@ -0,0 +1,9 @@
+export interface DeleteChatSettings {
+    isAuthConversations: boolean;
+    authPeriod: number;
+    isAnonymConversations: boolean;
+    anonymPeriod: number;
+    deletionTimeISO:  string;
+    startDate: Date | string;
+    endDate: Date | string;
+}

package/types/emergencyNotice.ts

@@ -0,0 +1,10 @@
+export interface EmergencyNotice {
+  emergencyNoticeText: string;
+  emergencyNoticeStartISO: Date | string;
+  emergencyNoticeEndISO: Date | string;
+  isEmergencyNoticeVisible: string;
+}
+
+export interface EmergencyNoticeResponse {
+  response: EmergencyNotice;
+}

package/types/establishment.ts

@@ -0,0 +1,4 @@
+export interface Establishment {
+  readonly id: number;
+  name: string;
+}

package/types/index.ts

@@ -0,0 +1,18 @@
+export * from "./chat";
+export * from "./authorities";
+export * from "./botConfig";
+export * from "./customerSupportActivity";
+export * from "./deleteChatSettings";
+export * from "./emergencyNotice";
+export * from "./establishment";
+export * from "./mainNavigation";
+export * from "./message";
+export * from "./organizationWorkingTime";
+export * from "./router";
+export * from "./service";
+export * from "./session";
+export * from "./skmConfig";
+export * from "./user";
+export * from "./userInfo";
+export * from "./userProfileSettings";
+export * from "./widgetConfig";

package/types/mainNavigation.ts

@@ -0,0 +1,11 @@
+export interface MenuItem {
+  id?: string;
+  label: string;
+  path: string | null;
+  target?: '_blank' | '_self';
+  children?: MenuItem[];
+}
+
+export interface MainNavigation {
+  data: MenuItem[];
+}

package/types/message.ts

@@ -0,0 +1,74 @@
+export interface UseSendAttachment {
+    successCb?: (data: any) => void;
+    errorCb?: (error: any) => void;
+    data: {
+        chatId: string,
+        name: string,
+        type: string,
+        size: string,
+        base64: string,
+    }
+}
+
+export interface Attachment {
+    chatId: string;
+    name: string;
+    type: AttachmentTypes;
+    size: number;
+    base64: string;
+}
+
+export interface Message {
+    id?: string;
+    chatId: string;
+    content?: string;
+    event?: string;
+    csaTitle?: string;
+    authorId?: string;
+    authorTimestamp: string;
+    authorFirstName: string;
+    authorLastName?: string;
+    authorRole: string;
+    forwardedByUser: string;
+    forwardedFromCsa: string;
+    forwardedToCsa: string;
+    originalBaseId?: string;
+    originalCreated?: string;
+    rating?: string;
+    created?: string;
+    preview?: string;
+    updated?: string;
+    buttons?: string;
+    options?: string;
+}
+
+export interface MessagePreviewSseResponse {
+    data: Message;
+    origin: string;
+    type: string;
+}
+
+export enum AttachmentTypes {
+    PDF = 'application/pdf',
+    PNG = 'image/png',
+    JPEG = 'image/jpeg',
+    TXT = 'text/plain',
+    DOCX = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    ODT = 'application/vnd.oasis.opendocument.text',
+    XLSX = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    ODS = 'ods',
+    CDOC = 'application/x-cdoc',
+    ASICE = 'application/vnd.etsi.asic-e+zip',
+    MP3 = 'audio/mpeg',
+    WAV = 'audio/wav',
+    M4A = 'audio/x-m4a',
+    MP4 = 'video/mp4',
+    WEBM = 'video/webm',
+    OGG = 'video/ogg',
+    MOV = 'video/quicktime',
+}
+
+export interface MessageButton {
+    title: string;
+    payload: string;
+}

package/types/organizationWorkingTime.ts

@@ -0,0 +1,27 @@
+export interface OrganizationWorkingTime {
+  organizationMondayWorkingTimeStartISO: Date | string;
+  organizationMondayWorkingTimeEndISO: Date | string;
+  organizationTuesdayWorkingTimeStartISO: Date | string;
+  organizationTuesdayWorkingTimeEndISO: Date | string;
+  organizationWednesdayWorkingTimeStartISO: Date | string;
+  organizationWednesdayWorkingTimeEndISO: Date | string;
+  organizationThursdayWorkingTimeStartISO: Date | string;
+  organizationThursdayWorkingTimeEndISO: Date | string;
+  organizationFridayWorkingTimeStartISO: Date | string;
+  organizationFridayWorkingTimeEndISO: Date | string;
+  organizationSaturdayWorkingTimeStartISO: Date | string;
+  organizationSaturdayWorkingTimeEndISO: Date | string;
+  organizationSundayWorkingTimeStartISO: Date | string;
+  organizationSundayWorkingTimeEndISO: Date | string;
+  organizationAllWeekdaysTimeStartISO: Date | string;
+  organizationAllWeekdaysTimeEndISO: Date | string;
+  organizationWorkingTimeWeekdays: string[];
+  organizationWorkingTimeNationalHolidays: boolean;
+  organizationClosedOnWeekEnds: boolean;
+  organizationTheSameOnAllWorkingDays: boolean;
+  organizationWorkingAllTime: boolean;
+  organizationNoCsaAskForContacts: boolean;
+  organizationNoCsaAvailableMessage: string;
+  organizationOutsideWorkingHoursAskForContacts: boolean;
+  organizationOutsideWorkingHoursMessage: string;
+}

package/types/router.ts

@@ -0,0 +1,4 @@
+export interface RouterResponse {
+  data: Record<string, unknown> | null;
+  error: string | null;
+}

package/types/service.ts

@@ -0,0 +1,6 @@
+export interface Service {
+  id: string;
+  name: string;
+  type: 'POST' | 'GET';
+  state?: 'active' | 'inactive' | 'draft';
+}

package/types/session.ts

@@ -0,0 +1,7 @@
+export interface Session {
+  readonly id: number;
+  key: string;
+  value: string;
+  deleted: boolean;
+  created: Date | string;
+}

package/types/skmConfig.ts

@@ -0,0 +1,8 @@
+export interface SkmConfig {
+  range: string;
+  documents: string;
+  systemMessage: string;
+  maxTokens: string;
+  indexName: string;
+  queryType: string;
+}

package/types/user.ts

@@ -0,0 +1,40 @@
+import { ROLES } from 'utils/constants';
+
+export interface User {
+  login?: string;
+  fullName?: string;
+  firstName: string;
+  lastName: string;
+  idCode: string;
+  displayName: string;
+  csaTitle: string;
+  csaEmail: string;
+  authorities: ROLES[];
+  customerSupportStatus: 'online' | 'idle' | 'offline';
+  department: string;
+}
+
+export interface UserDTO
+  extends Pick<
+    User,
+    | 'login'
+    | 'firstName'
+    | 'lastName'
+    | 'fullName'
+    | 'idCode'
+    | 'authorities'
+    | 'displayName'
+    | 'csaTitle'
+    | 'csaEmail'
+    | 'department'
+  > {}
+
+export interface UserSearchFilters {
+  search_full_name: string;
+  search_id_code: string;
+  search_display_name: string;
+  search_csa_title: string;
+  search_csa_email: string;
+  search_authority: string;
+  search_department: string;
+}

package/types/userInfo.ts

@@ -0,0 +1,16 @@
+export interface UserInfo {
+  JWTCreated: string;
+  JWTExpirationTimestamp: string;
+  firstName: string;
+  lastName: string;
+  loggedInDate: string;
+  loginExpireDate: string;
+  authMethod: string;
+  fullName: string;
+  authorities: string[];
+  displayName: string;
+  idCode: string;
+  email: string;
+  csaEmail: string;
+  csaTitle: string;
+}

package/types/userProfileSettings.ts

@@ -0,0 +1,10 @@
+export interface UserProfileSettings {
+  userId: number;
+  forwardedChatPopupNotifications: boolean;
+  forwardedChatSoundNotifications: boolean;
+  forwardedChatEmailNotifications: boolean;
+  newChatPopupNotifications: boolean;
+  newChatSoundNotifications: boolean;
+  newChatEmailNotifications: boolean;
+  useAutocorrect: boolean;
+}

package/types/widgetConfig.ts

@@ -0,0 +1,8 @@
+export interface WidgetConfig {
+  widgetProactiveSeconds: number;
+  widgetDisplayBubbleMessageSeconds: number;
+  widgetBubbleMessageText: string;
+  widgetColor: string;
+  widgetAnimation: string;
+  isWidgetActive: boolean;
+}

package/ui-components/Button/Button.scss

@@ -0,0 +1,150 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.btn {
+  $self: &;
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  background: none;
+  border: 0;
+  color: get-color(black-coral-0);
+  cursor: pointer;
+  font: inherit;
+  gap: get-spacing(rapla);
+  overflow: visible;
+  padding: 8px 40px;
+  text-decoration: none;
+  font-size: $veera-font-size-100;
+  line-height: 24px;
+  border-radius: 20px;
+  white-space: nowrap;
+
+  &:focus {
+    outline: none;
+  }
+
+  &--disabled {
+    cursor: not-allowed;
+  }
+
+  &--primary {
+    background-color: get-color(sapphire-blue-10);
+
+    &:hover,
+    &:active {
+      background-color: get-color(sapphire-blue-13);
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-3)
+    }
+
+    &#{$self}--disabled {
+      background-color: get-color(black-coral-2);
+      color: get-color(white);
+    }
+  }
+
+  &--secondary {
+    background-color: get-color(white);
+    box-shadow: inset 0 0 0 2px get-color(black-coral-10);
+    color: get-color(black-coral-15);
+
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px get-color(black-coral-2);
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    }
+
+    &#{$self}--disabled {
+      background-color: get-color(black-coral-2);
+      color: get-color(black-coral-6);
+      box-shadow: inset 0 0 0 2px get-color(black-coral-2);
+    }
+  }
+
+  &--text {
+    padding: 0;
+    background: none;
+    color: get-color(sapphire-blue-10);
+    gap: 4px;
+    border-radius: 0;
+
+    &:hover,
+    &:active {
+      text-decoration: underline;
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    }
+
+    &#{$self}--disabled {
+      color: get-color(black-coral-6);
+    }
+  }
+
+  &--icon {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    justify-content: center;
+    color: get-color(black-coral-10);
+    font-size: 24px;
+
+    &:hover,
+    &:active {
+      color: get-color(sapphire-blue-10);
+    }
+
+    &:focus {
+      color: get-color(sapphire-blue-10);
+      box-shadow: inset 0 0 0 2px get-color(sapphire-blue-10);
+    }
+  }
+
+  &--error {
+    background-color: get-color(jasper-10);
+
+    &:hover,
+    &:active {
+      background-color: get-color(jasper-12);
+    }
+
+    &:focus {
+      box-shadow: inset 0 0 0 2px get-color(jasper-13);
+    }
+
+    &#{$self}--disabled {
+      background-color: get-color(black-coral-2);
+    }
+  }
+
+  &--success {
+    background-color: get-color(sea-green-10);
+
+    &:hover,
+    &:active {
+      background-color: get-color(sea-green-12);
+    }
+
+    &:focus {
+      background-color: get-color(sea-green-10);
+      box-shadow: inset 0 0 0 2px get-color(sea-green-12);
+    }
+
+    &#{$self}--disabled {
+      background-color: get-color(black-coral-2);
+    }
+  }
+
+  &--s {
+    padding: 4.5px 24px;
+  }
+}

package/ui-components/Button/index.tsx

@@ -0,0 +1,41 @@
+import React, { ButtonHTMLAttributes, FC, PropsWithChildren, useRef } from 'react';
+import clsx from 'clsx';
+
+import './Button.scss';
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    appearance?: 'primary' | 'secondary' | 'text' | 'icon' | 'error' | 'success';
+    size?: 'm' | 's';
+    disabledWithoutStyle?: boolean;
+};
+
+const Button: FC<PropsWithChildren<ButtonProps>> = ({
+                                                        appearance = 'primary',
+                                                        size = 'm',
+                                                        disabled,
+                                                        disabledWithoutStyle = false,
+                                                        children,
+                                                        ...rest
+                                                    }) => {
+    const ref = useRef<HTMLButtonElement>(null);
+
+    const buttonClasses = clsx(
+        'btn',
+        `btn--${appearance}`,
+        `btn--${size}`,
+        disabled && 'btn--disabled'
+    );
+
+    return (
+        <button
+            className={buttonClasses}
+            ref={ref}
+            disabled={disabled || disabledWithoutStyle}
+            {...rest}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;

package/ui-components/ButtonMessage/ButtonMessage.scss

@@ -0,0 +1,16 @@
+@import 'src/styles/tools/color';
+
+.button-container {
+  display: flex;
+  gap: 12px;
+  margin: 0.3rem 0 0.7rem 0;
+
+  span {
+    padding: 0 0.5rem;
+    background-color: get-color(sea-green-12);
+    color: get-color(white);
+    border-radius: 8px;
+    box-shadow: 2px 1px 4px rgb(159, 159, 159);
+    opacity: 0.7;
+  }
+}

package/ui-components/ButtonMessage/index.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { MessageButton } from 'types/message';
+import './ButtonMessage.scss';
+
+type ButtonMessageProps = {
+    buttons: MessageButton[];
+};
+
+const ButtonMessage: FC<ButtonMessageProps> = ({ buttons }) => {
+    return (
+        <div className='button-container'>
+            {buttons.map(({title, payload}) =>
+                <span key={title}>{title}({payload})</span>
+            )}
+        </div>
+    );
+};
+
+export default ButtonMessage;

package/ui-components/Card/Card.scss

@@ -0,0 +1,69 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.card {
+  $self: &;
+  background-color: get-color(white);
+  border: 1px solid get-color(black-coral-2);
+  border-radius: $veera-radius-s;
+  max-height: 80vh;
+  overflow-y: visible;
+
+  &--borderless {
+    border: 0;
+    border-radius: 0;
+
+    #{$self}__header {
+      border-radius: 0;
+    }
+  }
+
+  &--scrollable {
+    overflow-y: auto;
+  }
+
+  &__header,
+  &__body,
+  &__footer {
+    padding: get-spacing(haapsalu);
+  }
+
+  &__header {
+    border-bottom: 1px solid get-color(black-coral-2);
+    background-color: get-color(extra-light);
+    border-radius: $veera-radius-s $veera-radius-s 0 0;
+
+    &.white {
+      background-color: white;
+    }
+  }
+
+  &__body {
+    &.divided {
+      display: flex;
+      flex-direction: column;
+      padding-left: 0px;
+      padding-right: 0px;
+
+      > :not(:last-child) {
+        margin-bottom: get-spacing(haapsalu);
+        border-bottom: 1px solid get-color(black-coral-2);
+        padding-bottom: get-spacing(haapsalu);
+        padding-left: get-spacing(haapsalu);
+      }
+
+      > :is(:last-child) {
+        padding-left: get-spacing(haapsalu);
+      }
+    }
+  }
+
+  &__footer {
+    border-top: 1px solid get-color(black-coral-2);
+    position: sticky;
+    bottom: 0;
+    background-color: get-color(white);
+  }
+}

package/ui-components/Card/index.tsx

@@ -0,0 +1,39 @@
+import React, { FC, PropsWithChildren, ReactNode } from 'react';
+import clsx from 'clsx';
+
+import './Card.scss';
+
+type CardProps = {
+    header?: ReactNode;
+    footer?: ReactNode;
+    borderless?: boolean;
+    isHeaderLight?: boolean;
+    isBodyDivided?: boolean;
+    isScrollable?: boolean;
+};
+
+const Card: FC<PropsWithChildren<CardProps>> = ({
+                                                    header,
+                                                    footer,
+                                                    borderless,
+                                                    isHeaderLight,
+                                                    isBodyDivided,
+                                                    isScrollable = false,
+                                                    children,
+                                                }) => {
+    return (
+        <div className={clsx('card', { 'card--borderless': borderless, 'card--scrollable': isScrollable })}>
+            {header && (
+                <div className={`card__header ${isHeaderLight ? 'white' : ''}`}>
+                    {header}
+                </div>
+            )}
+            <div className={`card__body ${isBodyDivided ? 'divided' : ''}`}>
+                {children}
+            </div>
+            {footer && <div className="card__footer">{footer}</div>}
+        </div>
+    );
+};
+
+export default Card;