@buerokratt-ria/common-gui-components 0.0.1

package/ui-components/ChatEvent/Chat.scss

@@ -0,0 +1,40 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/other';
+@import 'src/styles/settings/variables/typography';
+
+.active-chat {
+  $self: &;
+  display: flex;
+  justify-content: flex-end;
+  position: relative;
+  height: 100%;
+
+  &__event-message {
+    display: flex;
+    position: relative;
+    isolation: isolate;
+    padding: 6px 0;
+
+    p {
+      color: get-color(black-coral-12);
+      font-size: $veera-font-size-80;
+      line-height: $veera-line-height-500;
+      padding: 4px 8px 4px 0;
+      background-color: get-color(white);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      height: 1px;
+      background-color: get-color(black-coral-2);
+      position: absolute;
+      top: 50%;
+      left: 56px;
+      right: 0;
+      transform: translateY(-50%);
+      z-index: -1;
+    }
+  }
+}

package/ui-components/ChatEvent/index.tsx

@@ -0,0 +1,216 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Message } from '../../types/message';
+import { CHAT_EVENTS } from '../../types/chat';
+import { format } from 'date-fns';
+import './Chat.scss';
+
+type ChatEventProps = {
+    message: Message;
+};
+
+const ChatEvent: FC<ChatEventProps> = ({ message }) => {
+    const { t } = useTranslation();
+    const {
+        event,
+        authorTimestamp,
+        forwardedByUser,
+        forwardedFromCsa,
+        forwardedToCsa,
+    } = message;
+
+    let EVENT_PARAMS;
+
+    switch (event) {
+        case CHAT_EVENTS.REDIRECTED:
+            if (forwardedByUser === forwardedFromCsa) {
+                EVENT_PARAMS = t('chat.redirectedMessageByOwner', {
+                    from: forwardedFromCsa,
+                    to: forwardedToCsa,
+                    date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+                });
+            } else if (forwardedByUser === forwardedToCsa) {
+                EVENT_PARAMS = t('chat.redirectedMessageClaimed', {
+                    from: forwardedFromCsa,
+                    to: forwardedToCsa,
+                    date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+                });
+            } else {
+                EVENT_PARAMS = t('chat.redirectedMessage', {
+                    user: forwardedByUser,
+                    from: forwardedFromCsa,
+                    to: forwardedToCsa,
+                    date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+                });
+            }
+
+            break;
+        case CHAT_EVENTS.ANSWERED:
+            EVENT_PARAMS = t('chat.events.answered', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.TERMINATED:
+            EVENT_PARAMS = t('chat.events.terminated', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CLIENT_LEFT:
+            EVENT_PARAMS = t('chat.events.client-left', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CLIENT_LEFT_WITH_ACCEPTED:
+            EVENT_PARAMS = t('chat.events.client-left-with-accepted', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CLIENT_LEFT_WITH_NO_RESOLUTION:
+            EVENT_PARAMS = t('chat.events.client-left-with-no-resolution', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CLIENT_LEFT_FOR_UNKNOWN_REASONS:
+            EVENT_PARAMS = t('chat.events.client-left-for-unknown-reason', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ACCEPTED:
+            EVENT_PARAMS = t('chat.events.accepted', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.HATE_SPEECH:
+            EVENT_PARAMS = t('chat.events.hate-speech', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.OTHER:
+            EVENT_PARAMS = t('chat.events.other', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.RESPONSE_SENT_TO_CLIENT_EMAIL:
+            EVENT_PARAMS = t('chat.events.response-sent-to-client-email', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.GREETING:
+            EVENT_PARAMS = t('chat.events.greeting', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.REQUESTED_AUTHENTICATION:
+            EVENT_PARAMS = t('chat.events.requested-authentication', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.AUTHENTICATION_SUCCESSFUL:
+            EVENT_PARAMS = t('chat.events.authentication-successful', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.AUTHENTICATION_FAILED:
+            EVENT_PARAMS = t('chat.events.authentication-failed', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ASK_PERMISSION:
+            EVENT_PARAMS = t('chat.events.ask-permission', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ASK_PERMISSION_ACCEPTED:
+            EVENT_PARAMS = t('chat.events.ask-permission-accepted', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ASK_PERMISSION_REJECTED:
+            EVENT_PARAMS = t('chat.events.ask-permission-rejected', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ASK_PERMISSION_IGNORED:
+            EVENT_PARAMS = t('chat.events.ask-permission-ignored', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.RATING:
+            EVENT_PARAMS = t('chat.events.rating', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CONTACT_INFORMATION:
+            EVENT_PARAMS = t('chat.events.contact-information', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CONTACT_INFORMATION_REJECTED:
+            EVENT_PARAMS = t('chat.events.contact-information-rejected', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.CONTACT_INFORMATION_FULFILLED:
+            EVENT_PARAMS = t('chat.events.contact-information-fulfilled', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.REQUESTED_CHAT_FORWARD:
+            EVENT_PARAMS = t('chat.events.requested-chat-forward', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.REQUESTED_CHAT_FORWARD_ACCEPTED:
+            EVENT_PARAMS = t('chat.events.requested-chat-forward-accepted', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.REQUESTED_CHAT_FORWARD_REJECTED:
+            EVENT_PARAMS = t('chat.events.requested-chat-forward-rejected', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.ASSIGN_PENDING_CHAT_CSA:
+            EVENT_PARAMS = t('chat.events.pending-assigned', {
+                name: message.authorFirstName ?? 'CSA',
+            });
+            break;
+        case CHAT_EVENTS.PENDING_USER_REACHED:
+            EVENT_PARAMS = t('chat.events.user-reached', {
+                name: message.authorFirstName ?? 'CSA',
+            });
+            break;
+        case CHAT_EVENTS.PENDING_USER_NOT_REACHED:
+            EVENT_PARAMS = t('chat.events.user-not-reached', {
+                name: message.authorFirstName ?? 'CSA',
+            });
+            break;
+        case CHAT_EVENTS.USER_AUTHENTICATED:
+            EVENT_PARAMS = t('chat.events.user-authenticated', {
+                name: `${message.authorFirstName ?? ''} ${
+                    message.authorLastName ?? ''
+                }`,
+                date: format(new Date(message.authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        case CHAT_EVENTS.READ:
+            EVENT_PARAMS = t('chat.events.read', {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+        default:
+            EVENT_PARAMS = t(`chat.events.${event?.toLowerCase()}`, {
+                date: format(new Date(authorTimestamp), 'dd.MM.yyyy HH:mm:ss'),
+            });
+            break;
+    }
+
+    return (
+        <div className="active-chat__event-message">
+            <p>{EVENT_PARAMS}</p>
+        </div>
+    );
+};
+
+export default ChatEvent;

package/ui-components/DataTable/CloseIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './DeboucedInput.scss';
+
+const CloseIcon: React.FC = () => (
+    <svg
+        className="search-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        height="17"
+        width="17"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+    >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+);
+
+export default CloseIcon;

package/ui-components/DataTable/DataTable.scss

@@ -0,0 +1,188 @@
+@import 'src/styles/tools/spacing';
+@import 'src/styles/tools/color';
+@import 'src/styles/settings/variables/typography';
+
+.data-table {
+  width: 100%;
+  color: get-color(black-coral-20);
+  text-align: left;
+  margin-bottom: 0; 
+  display: table;
+
+  &__scrollWrapper {
+    height: 100%;
+    white-space: nowrap;
+    overflow-x: auto;
+    display: block;
+    max-height: 60vh;
+  }
+
+  thead, tbody {
+    width: 100%;
+  }
+  
+  th {
+    padding: 12px 14.5px;
+    color: get-color(black-coral-12);
+    border-bottom: 1px solid get-color(black-coral-10);
+    font-weight: $veera-font-weight-beta;
+    vertical-align: middle;
+    position: relative;
+  }
+
+  td {
+    padding: 12px 24px 12px 16px;
+    border-bottom: 1px solid get-color(black-coral-2);
+    vertical-align: middle;
+    max-width: fit-content;
+
+    p{
+      white-space: break-spaces;
+    }
+
+    .entity {
+      display: inline-flex;
+      align-items: center;
+      padding-left: 4px;
+      background-color: get-color(sapphire-blue-2);
+      border-radius: 4px;
+
+      span {
+        display: inline-flex;
+        font-size: $veera-font-size-80;
+        background-color: get-color(white);
+        padding: 0 4px;
+        border-radius: 4px;
+        margin: 2px 2px 2px 4px;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        td {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+
+  &__filter {
+    input {
+      width: 120px;
+      display: block;
+      appearance: none;
+      background-color: get-color(white);
+      border: 1px solid get-color(black-coral-6);
+      border-radius: 5px;
+      color: var(--color-black);
+      font-size: $veera-font-size-100;
+      height: 32px;
+      line-height: 24px;
+      padding: get-spacing(paldiski);
+
+      &::placeholder {
+        color: get-color(black-coral-6);
+      }
+
+      &:focus {
+        outline: none;
+        border-color: get-color(sapphire-blue-10);
+      }
+    }
+  }
+
+  &__pagination-wrapper {
+    display: flex;
+    border-top: 1px solid get-color(black-coral-10);
+    padding: 6px 16px;
+  }
+
+  &__pagination {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin: 0 auto;
+
+    + .data-table__page-size {
+      margin-left: 0;
+    }
+
+    .next,
+    .previous {
+      display: flex;
+      color: get-color(sapphire-blue-10);
+
+      &[disabled] {
+        color: get-color(black-coral-11);
+        cursor: initial;
+      }
+    }
+
+    .links {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: $veera-font-size-80;
+      color: get-color(black-coral-10);
+
+      li {
+        display: block;
+
+        a, span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 25px;
+          height: 25px;
+          border-radius: 50%;
+
+          &:hover {
+            text-decoration: none;
+          }
+        }
+
+        &.active {
+          a, span {
+            color: get-color(white);
+            background-color: get-color(sapphire-blue-10);
+          }
+        }
+      }
+    }
+  }
+
+  &__page-size {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: $veera-font-size-80;
+    line-height: 16px;
+    color: get-color(black-coral-11);
+    margin-left: auto;
+
+    select {
+      appearance: none;
+      font-size: $veera-font-size-70;
+      line-height: 16px;
+      height: 30px;
+      min-width: 50px;
+      padding: 6px 10px;
+      border: 1px solid #8F91A8;
+      border-radius: 2px;
+      background-color: get-color(white);
+      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNiIgdmlld0JveD0iMCAwIDEwIDYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNS4zMTMwNiA1LjgwODIyQzUuMTU2ODUgNS45NjQ0MyA0LjkwMzU4IDUuOTY0NDMgNC43NDczNyA1LjgwODIyTDAuMjgyNzMgMS4zNDM1OEMwLjEyNjUyIDEuMTg3MzcgMC4xMjY1MiAwLjkzNDEwMiAwLjI4MjczIDAuNzc3ODkzTDAuNzc3NzA0IDAuMjgyOTE4QzAuOTMzOTE0IDAuMTI2NzA4IDEuMTg3MTggMC4xMjY3MDggMS4zNDMzOSAwLjI4MjkxN0w1LjAzMDIyIDMuOTY5NzRMOC43MTcwNCAwLjI4MjkxN0M4Ljg3MzI1IDAuMTI2NzA4IDkuMTI2NTIgMC4xMjY3MDggOS4yODI3MyAwLjI4MjkxN0w5Ljc3NzcgMC43Nzc4OTJDOS45MzM5MSAwLjkzNDEwMiA5LjkzMzkxIDEuMTg3MzcgOS43Nzc3IDEuMzQzNThMNS4zMTMwNiA1LjgwODIyWiIgZmlsbD0iIzU1NTg2NyIvPgo8L3N2Zz4K');
+      background-repeat: no-repeat;
+      background-position: top 11px right 10px;
+    }
+  }
+}
+
+.highlighted {
+  background-color: get-color(sapphire-blue-1);
+}
+
+.default {
+  background-color: white;
+}

package/ui-components/DataTable/DeboucedInput.scss

@@ -0,0 +1,11 @@
+.input-container {
+    position: relative;
+}
+
+.search-icon {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    margin-left: 10px;
+    transform: translateY(-50%);
+}

package/ui-components/DataTable/DebouncedInput.tsx

@@ -0,0 +1,54 @@
+import React, { FC, InputHTMLAttributes, useEffect, useState } from 'react';
+import './DeboucedInput.scss';
+import CloseIcon from './CloseIcon';
+
+type DebouncedInputProps = Omit<
+    InputHTMLAttributes<HTMLInputElement>,
+    'onChange'
+> & {
+    value: string | number | string[];
+    onChange: (value: string | number | string[]) => void;
+    debounce?: number;
+};
+
+const DebouncedInput: FC<DebouncedInputProps> = ({
+                                                     value: initialValue,
+                                                     onChange,
+                                                     debounce = 500,
+                                                     ...props
+                                                 }) => {
+    const [value, setValue] = useState(initialValue);
+
+    useEffect(() => {
+        setValue(initialValue);
+    }, [initialValue]);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            onChange(value);
+        }, debounce);
+
+        return () => clearTimeout(timeout);
+    }, [value]);
+
+    return (
+        <div className="input-container">
+            <input
+                style={{ paddingRight: '30px' }}
+                {...props}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            {value && (
+                <button
+                    style={{ position: 'absolute', right: '0px', bottom: '15px' }}
+                    onClick={() => setValue('')}
+                >
+                    <CloseIcon />
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default DebouncedInput;

package/ui-components/DataTable/Filter.tsx

@@ -0,0 +1,121 @@
+import React, { FC, useState, MouseEvent } from 'react';
+import { Column, Table } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+import { MdOutlineSearch } from 'react-icons/md';
+
+import { Icon } from '../';
+import useDocumentEscapeListener from '../../hooks/useDocumentEscapeListener';
+import DebouncedInput from './DebouncedInput';
+
+type FilterProps = {
+    column: Column<any, unknown>;
+    table: Table<any>;
+};
+
+const Filter: FC<FilterProps> = ({ column, table }) => {
+    const { t } = useTranslation();
+    const [filterOpen, setFilterOpen] = useState(false);
+    const firstValue = table
+        .getPreFilteredRowModel()
+        .flatRows[0]?.getValue(column.id);
+
+    const columnFilterValue = column.getFilterValue();
+
+    useDocumentEscapeListener(() => setFilterOpen(false));
+
+    const handleFilterToggle = (e: MouseEvent) => {
+        e.stopPropagation();
+        setFilterOpen(!filterOpen);
+    };
+
+    return (
+        <>
+            <button onClick={handleFilterToggle}>
+                <Icon icon={<MdOutlineSearch fontSize={16} />} size="medium" />
+            </button>
+            {filterOpen && (
+                <div className="data-table__filter">
+                    {typeof firstValue === 'number' ? (
+                        <DebouncedInput
+                            type="number"
+                            min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
+                            max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
+                            value={(columnFilterValue as [number, number])?.[0] ?? ''}
+                            onChange={(value) =>
+                                column.setFilterValue((old: [number, number]) => [
+                                    value,
+                                    old?.[1],
+                                ])
+                            }
+                        />
+                    ) : (
+                        <DebouncedInput
+                            type="text"
+                            value={''}
+                            onChange={(value) => column.setFilterValue(value)}
+                            placeholder={t('global.search') + '...'}
+                            // list={column.id + 'list'}
+                        />
+                    )}
+                </div>
+            )}
+        </>
+    );
+
+    // return typeof firstValue === 'number' ? (
+    //   <div>
+    //     <div className='flex space-x-2'>
+    //       <DebouncedInput
+    //         type='number'
+    //         min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
+    //         max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
+    //         value={(columnFilterValue as [number, number])?.[0] ?? ''}
+    //         onChange={value =>
+    //           column.setFilterValue((old: [number, number]) => [value, old?.[1]])
+    //         }
+    //         placeholder={`Min ${
+    //           column.getFacetedMinMaxValues()?.[0]
+    //             ? `(${column.getFacetedMinMaxValues()?.[0]})`
+    //             : ''
+    //         }`}
+    //         className='w-24 border shadow rounded'
+    //       />
+    //       <DebouncedInput
+    //         type='number'
+    //         min={Number(column.getFacetedMinMaxValues()?.[0] ?? '')}
+    //         max={Number(column.getFacetedMinMaxValues()?.[1] ?? '')}
+    //         value={(columnFilterValue as [number, number])?.[1] ?? ''}
+    //         onChange={value =>
+    //           column.setFilterValue((old: [number, number]) => [old?.[0], value])
+    //         }
+    //         placeholder={`Max ${
+    //           column.getFacetedMinMaxValues()?.[1]
+    //             ? `(${column.getFacetedMinMaxValues()?.[1]})`
+    //             : ''
+    //         }`}
+    //         className='w-24 border shadow rounded'
+    //       />
+    //     </div>
+    //     <div className='h-1' />
+    //   </div>
+    // ) : (
+    //   <>
+    //     <datalist id={column.id + 'list'}>
+    //       {sortedUniqueValues.slice(0, 5000).map((value: any) => (
+    //         <option value={value} key={value} />
+    //       ))}
+    //     </datalist>
+    //     <DebouncedInput
+    //       type='text'
+    //       value={(columnFilterValue ?? '') as string}
+    //       onChange={value => column.setFilterValue(value)}
+    //       placeholder={`Search... (${column.getFacetedUniqueValues().size})`}
+    //       className='w-36 border shadow rounded'
+    //       list={column.id + 'list'}
+    //     />
+    //     <div className='h-1' />
+    //   </>
+    // );
+};
+
+export default Filter;