tycho-components 0.0.10-SNAPSHOT-8 → 0.0.11-SNAPSHOT

package/dist/AppLoading/AppLoading.d.ts

@@ -0,0 +1,3 @@
+import './style.scss';
+declare function AppLoading(): import("react/jsx-runtime").JSX.Element;
+export default AppLoading;

package/dist/AppLoading/AppLoading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactLoading from 'react-loading';
+import './style.scss';
+function AppLoading() {
+    return (_jsx("div", { className: "loading-container", children: _jsx(ReactLoading, { type: "spinningBubbles", color: "blue", height: 50, width: 50 }) }));
+}
+export default AppLoading;

package/dist/AppLoading/index.d.ts

@@ -0,0 +1,2 @@
+import AppLoading from './AppLoading';
+export default AppLoading;

package/dist/AppLoading/index.js

@@ -0,0 +1,2 @@
+import AppLoading from './AppLoading';
+export default AppLoading;

package/dist/AppLoading/style.scss

@@ -0,0 +1,8 @@
+.loading-container {
+  height: 50vh;
+  margin-top: calc(var(--spacing-xxlarge) + var(--spacing-large));
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/dist/AppPlaceholder/AppPlaceholder.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './style.scss';
+type Props = {
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+export default function AppPlaceholder({ children, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AppPlaceholder/AppPlaceholder.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './style.scss';
+export default function AppPlaceholder({ children, onClick }) {
+    return (_jsx("div", { role: "presentation", className: "placeholder-container", onClick: () => onClick && onClick(), onKeyDown: () => onClick && onClick(), children: children }));
+}

package/dist/AppPlaceholder/index.d.ts

@@ -0,0 +1,2 @@
+import AppPlaceholder from './AppPlaceholder';
+export default AppPlaceholder;

package/dist/AppPlaceholder/index.js

@@ -0,0 +1,2 @@
+import AppPlaceholder from './AppPlaceholder';
+export default AppPlaceholder;

package/dist/AppPlaceholder/style.scss

@@ -0,0 +1,18 @@
+.placeholder-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  margin: 32px 16px;
+  font-size: var(--font-size-xlarge);
+
+  height: 75%;
+  padding: var(--spacing-small);
+  background-color: var(--opacity-black-08);
+  justify-content: center;
+  align-items: center;
+  font-weight: var(--font-weight-large);
+  color: var(--color-primary-alternative);
+}

package/dist/Comments/Comments.d.ts

@@ -0,0 +1,9 @@
+import './style.scss';
+type Props = {
+    lexicon: string;
+    entry: string;
+    keywords: Record<string, string | number | boolean>;
+    onClose: () => void;
+};
+export default function Comments({ lexicon, entry, keywords, onClose }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Comments/Comments.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { yupResolver } from '@hookform/resolvers/yup';
+import { Drawer } from '@mui/material';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { Avatar, Button, IconButton, SelectField, TextField, } from 'tycho-storybook';
+import * as yup from 'yup';
+import AppLoading from '../AppLoading';
+import AppPlaceholder from '../AppPlaceholder';
+import CommonContext from '../configs/CommonContext';
+import { useMessageUtils } from '../configs/useMessageUtils';
+import DateUtils from '../functions/DateUtils';
+import FormUtils from '../functions/FormUtils';
+import SecurityUtils from '../functions/SecurityUtils';
+import './style.scss';
+import { EMPTY_COMMENT_REQUEST, } from './types/Comment';
+import CommentService from './types/CommentService';
+export default function Comments({ lexicon, entry, keywords, onClose }) {
+    const { t } = useTranslation('comments');
+    const { state } = useContext(CommonContext);
+    const { isLoading, dispatchLoading } = useMessageUtils();
+    const [openAddComment, setOpenAddComment] = useState(false);
+    const [comment, setComment] = useState();
+    const [comments, setComments] = useState();
+    const [users, setUsers] = useState([]);
+    const createdForm = useForm({
+        resolver: yupResolver(getFormSchema(t)),
+        mode: 'onChange',
+    });
+    const load = async () => {
+        try {
+            const [commentsResponse, usersResponse] = await Promise.all([
+                CommentService.find(lexicon, entry),
+                CommentService.findAvailableUsers(lexicon),
+            ]);
+            setComments(commentsResponse.data);
+            setUsers(usersResponse.data);
+        }
+        catch (error) {
+            console.error('Error loading comments or users', error);
+            // optionally handle specific error state here
+        }
+    };
+    const handleAdd = () => {
+        if (isLoading())
+            return;
+        dispatchLoading(true);
+        CommentService.add(lexicon, entry, createdForm.getValues(), keywords).then((r) => {
+            dispatchLoading(false);
+            setOpenAddComment(false);
+            setComment(undefined);
+            setComments((prev) => [...(prev || []), r.data]);
+            createdForm.reset(EMPTY_COMMENT_REQUEST);
+        });
+    };
+    const handleMarkRead = (thisComment) => {
+        CommentService.markRead(thisComment.id).then(() => {
+            const updated = { ...thisComment, read: true };
+            setComments(comments?.map((c) => c.id === thisComment.id ? { ...c, ...updated } : c));
+        });
+    };
+    const handleRemove = (thisComment) => {
+        CommentService.remove(thisComment.id).then(() => {
+            setComments(comments?.filter((c) => c.id !== thisComment.id));
+        });
+    };
+    const handleEdit = (thisComment) => {
+        setComment(thisComment);
+        setOpenAddComment(true);
+        createdForm.reset({
+            value: thisComment.value,
+            title: thisComment.title,
+            requestedUser: thisComment.requested?.uid,
+        });
+    };
+    const handleUpdate = () => {
+        if (!comment)
+            return;
+        CommentService.update(comment.id, createdForm.getValues()).then((r) => {
+            setComments((prev) => prev?.map((c) => (c.id === comment.id ? r.data : c)));
+            setComment(undefined);
+            setOpenAddComment(false);
+        });
+    };
+    const hasEditAccess = useMemo(() => {
+        return SecurityUtils.hasAccess(lexicon, ['ADMIN', 'EDITOR']);
+    }, [lexicon]);
+    useEffect(() => {
+        load();
+    }, []);
+    if (!comments)
+        return _jsx(AppLoading, {});
+    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, children: _jsxs("div", { className: "comments-container", children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
+                                    setComment(undefined);
+                                    setOpenAddComment(!openAddComment);
+                                } })) })] }), _jsxs("div", { className: "body", children: [openAddComment && (_jsxs("div", { className: "form", children: [_jsx(TextField, { label: t('input.value'), attr: "value", createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder'), required: true, multiline: true }), _jsx(TextField, { label: t('input.title'), attr: "title", createdForm: createdForm, showEndAdornment: false, placeholder: t('common:generic.placeholder') }), _jsx(SelectField, { label: t('input.user'), attr: "requestedUser", createdForm: createdForm, options: [
+                                        { label: t('common:generic.placeholder.select'), value: '' },
+                                        ...FormUtils.convertList(users, 'name', 'uid'),
+                                    ], showEndAdornment: false }), _jsxs("div", { className: "buttons", children: [comment && (_jsx(Button, { onClick: comment?.id ? handleUpdate : handleAdd, text: t('button.discard'), color: "danger" })), _jsx(Button, { onClick: comment ? handleUpdate : handleAdd, text: comment ? t('label.button.update') : t('label.button.add'), disabled: !createdForm.formState.isValid })] })] })), comments?.length === 0 && (_jsx(AppPlaceholder, { children: _jsx("span", { children: t('placeholder.comments.empty') }) })), comments?.map((el, idx) => (_jsxs("div", { className: "comment", children: [_jsxs("div", { className: "top", children: [_jsx(Avatar, { title: el.name, src: el.picture, size: "medium" }), _jsx("div", { className: "name", children: el.name }), _jsxs("div", { className: "buttons", children: [state.logged?.uid === el.user && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => handleEdit(el), title: t('tooltip.edit'), name: "edit" }), _jsx(IconButton, { size: "small", onClick: () => handleRemove(el), title: t('tooltip.delete'), name: "delete" })] })), el.requested &&
+                                                    !el.read &&
+                                                    state.logged?.uid === el.requested.uid && (_jsx(IconButton, { size: "small", onClick: () => {
+                                                        handleMarkRead(el);
+                                                    }, title: t('tooltip.read'), name: "check_circle" }))] })] }), _jsxs("div", { className: "content", children: [el.title && _jsx("div", { className: "title", children: el.title }), _jsx("div", { className: "text", children: el.value }), el.requested && (_jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.requested.to') }), _jsx("span", { children: el.requested.name })] })), _jsxs("div", { className: "date", children: [_jsx("span", { className: "me-1", children: t('label.posted.on') }), _jsx("span", { className: "me-1", children: DateUtils.formatDateTime(el.edited ? el.edited : el.date, 'MM/dd/yyyy - HH:mm') }), el.edited && _jsx("i", { children: "edited" })] })] })] }, idx.valueOf())))] })] }) }));
+}
+const getFormSchema = (t) => yup.object().shape({
+    title: yup.string().optional(),
+    value: yup.string().required(t('common:validation.required')),
+    requestedUser: yup.string().optional(),
+});

package/dist/Comments/HeaderNotifications/HeaderNotifications.d.ts

@@ -0,0 +1,6 @@
+import './style.scss';
+type Props = {
+    lexicon: string;
+};
+export default function HeaderNotifications({ lexicon }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Comments/HeaderNotifications/HeaderNotifications.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+import { Avatar, IconButton } from 'tycho-storybook';
+import DateUtils from '../../functions/DateUtils';
+import CommentService from '../types/CommentService';
+import './style.scss';
+export default function HeaderNotifications({ lexicon }) {
+    const navigate = useNavigate();
+    const { t } = useTranslation('comments');
+    const [open, setOpen] = useState(false);
+    const [notifications, setNotifications] = useState();
+    const [comments, setComments] = useState();
+    const [tab, setTab] = useState('unread');
+    const handleOpen = (notification) => {
+        navigate(`/edit/${notification.entry}`);
+        setOpen(false);
+    };
+    const load = () => {
+        const serviceMethod = tab === 'read'
+            ? CommentService.findReadNotifications
+            : CommentService.findNotifications;
+        serviceMethod(lexicon).then((r) => {
+            if (tab !== 'read') {
+                setComments(r.data);
+            }
+            setNotifications(r.data);
+        });
+    };
+    useEffect(() => {
+        load();
+    }, [lexicon, tab]);
+    return (_jsxs("div", { className: "ds-dropdown-container notifications-container", children: [_jsx(IconButton, { name: "notifications_active", className: comments && comments.length > 0 ? 'shake' : '', size: "medium", onClick: () => setOpen(!open) }), open && (_jsx("div", { className: "ds-dropdown-list", children: _jsxs("div", { className: "notifications-panel", children: [_jsxs("div", { className: "header", children: [_jsx("span", { children: t('notification.title') }), _jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: () => setOpen(false) })] }), _jsxs("div", { className: "tabs", children: [_jsxs("button", { className: tab === 'unread' ? 'active-tab' : '', onClick: () => setTab('unread'), children: [t('notification.unread'), " (", comments?.length || 0, ")"] }), _jsx("button", { className: tab === 'read' ? 'active-tab' : '', onClick: () => setTab('read'), children: t('notification.all') })] }), _jsxs("div", { className: "content", children: [notifications &&
+                                    notifications.map((not, idx) => (_jsxs("div", { className: "item", onClick: () => handleOpen(not), children: [_jsx(Avatar, { src: not.picture, size: "small" }), _jsxs("div", { className: "message", children: [_jsx("span", { className: "text", children: _jsx(Trans, { t: t, i18nKey: "notification.text", values: {
+                                                                user: not.name,
+                                                                entry: not.keywords ? not.keywords['entry'] : '',
+                                                            } }) }), _jsx("span", { className: "date", children: DateUtils.formatDateTime(not.edited ? not.edited : not.date, 'MM/dd/yyyy - HH:mm') })] })] }, idx.valueOf()))), notifications && notifications.length === 0 && (_jsx("div", { className: "empty-notifications", children: t('notification.empty') }))] })] }) }))] }));
+}

package/dist/Comments/HeaderNotifications/index.d.ts

@@ -0,0 +1,2 @@
+import HeaderNotifications from './HeaderNotifications';
+export default HeaderNotifications;

package/dist/Comments/HeaderNotifications/index.js

@@ -0,0 +1,2 @@
+import HeaderNotifications from './HeaderNotifications';
+export default HeaderNotifications;

package/dist/Comments/HeaderNotifications/style.scss

@@ -0,0 +1,104 @@
+@use 'tycho-storybook/dist/styles/main' as *;
+
+.notifications-container {
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    20% {
+      transform: rotate(-15deg);
+    }
+    40% {
+      transform: rotate(15deg);
+    }
+    60% {
+      transform: rotate(-10deg);
+    }
+    80% {
+      transform: rotate(10deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  .shake {
+    animation: shake 0.5s ease-in-out infinite;
+  }
+
+  > .ds-dropdown-list {
+    right: 0;
+    width: auto;
+
+    .notifications-panel {
+      width: 320px;
+      overflow: hidden;
+      background: #fff;
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 12px;
+        border-bottom: 1px solid var(--border-subtle-1);
+        font-weight: bold;
+      }
+
+      .tabs {
+        display: flex;
+        border-bottom: 1px solid var(--border-subtle-1);
+
+        > button {
+          flex: 1;
+          padding: 8px;
+          border: none;
+          background: none;
+          cursor: pointer;
+          font-weight: 500;
+        }
+
+        .active-tab {
+          border-bottom: 2.5px solid var(--border-hover);
+          color: var(--icon-accent-hover);
+        }
+      }
+
+      > .content {
+        .item {
+          display: flex;
+          align-items: flex-start;
+          gap: 8px;
+          cursor: pointer;
+          padding: 16px;
+          border-bottom: 1px solid var(--border-subtle-1);
+
+          &:hover {
+            background-color: var(--layer-hover-1);
+          }
+
+          .message {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+
+            .text {
+              font-size: 14px;
+            }
+
+            .date {
+              @include helper-small-1;
+              color: var(--text-tertiary);
+            }
+          }
+        }
+      }
+
+      .empty-notifications {
+        text-align: center;
+        font-size: 13px;
+        color: #666;
+        padding: 20px 0;
+      }
+    }
+  }
+}

package/dist/Comments/index.d.ts

@@ -0,0 +1,2 @@
+import Comments from './Comments';
+export default Comments;

package/dist/Comments/index.js

@@ -0,0 +1,2 @@
+import Comments from './Comments';
+export default Comments;

package/dist/Comments/style.scss

@@ -0,0 +1,136 @@
+@use 'tycho-storybook/dist/styles/main' as *;
+
+.comments-container {
+  display: flex;
+  flex-direction: column;
+  width: 480px;
+
+  > .header {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-100);
+    border-bottom: 1px solid var(--border-subtle-1);
+
+    > .title {
+      @include tag-medium-1;
+      color: var(--text-secondary);
+      margin-left: 8px;
+    }
+
+    > .actions {
+      display: flex;
+      margin-left: auto;
+
+      .edit-button {
+        margin-right: var(--spacing-100);
+      }
+    }
+  }
+
+  > .body {
+    padding: var(--spacing-0) var(--spacing-250);
+    background-color: #fff;
+    padding: 16px;
+
+    .comment {
+      display: flex;
+      flex-direction: column;
+      padding: var(--spacing-150) var(--spacing-100);
+      border-bottom: 1px solid var(--border-subtle-1);
+
+      .top {
+        display: flex;
+        align-items: center;
+
+        > .ds-avatar {
+          margin-right: 8px;
+        }
+
+        .buttons {
+          display: flex;
+          margin-left: auto;
+          gap: 8px;
+
+          button {
+            border: none;
+            border-radius: var(--border-radius-button);
+            cursor: pointer;
+          }
+        }
+      }
+
+      .content {
+        margin-top: 16px;
+
+        .title {
+          @include tag-small-1;
+          color: var(--text-accent);
+          text-transform: none;
+        }
+
+        .text {
+          @include body-medium-1;
+          color: var(--text-primary);
+        }
+
+        .date {
+          @include helper-small-1;
+          color: var(--text-tertiary);
+          margin-top: 8px;
+        }
+      }
+    }
+
+    .form {
+      display: flex;
+      flex-direction: column;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border-subtle-1);
+
+      > .ds-input-text,
+      > .ds-select-text {
+        margin-bottom: 8px;
+      }
+
+      > .buttons {
+        display: flex;
+        gap: 8px;
+
+        > .ds-button {
+          width: 100%;
+        }
+      }
+    }
+
+    .placeholder-container {
+      margin: 0px;
+      font-size: var(--font-size-medium);
+    }
+  }
+}
+
+.modal-comment-info {
+  .modal-body {
+    > textarea {
+      width: 100%;
+      height: 20vh;
+      padding: 8px;
+    }
+
+    .footnote-actions {
+      text-align: center;
+
+      > button {
+        font-family: var(--font-family-regular);
+        font-style: var(--font-weight-medium);
+        font-weight: var(--font-weight-medium);
+        font-size: var(--font-size-button);
+        color: var(--color-background);
+        width: 200px;
+        border-radius: 8px;
+        padding: 12px;
+        border: none;
+      }
+    }
+  }
+}

package/dist/Comments/types/Comment.d.ts

@@ -0,0 +1,28 @@
+export type CommentRequest = {
+    title?: string;
+    value: string;
+    requestedUser?: string;
+};
+export type Comment = {
+    id: string;
+    title?: string;
+    value: string;
+    date: string;
+    edited?: string;
+    name: string;
+    user: string;
+    picture: string;
+    lexicon: string;
+    entry: string;
+    requested?: UserComment;
+    read?: boolean;
+    keywords?: Record<string, string>;
+};
+export type UserComment = {
+    uid: string;
+    name: string;
+    picture: string;
+    email: string;
+};
+export declare const EMPTY_COMMENT: Comment;
+export declare const EMPTY_COMMENT_REQUEST: CommentRequest;

package/dist/Comments/types/Comment.js

@@ -0,0 +1,13 @@
+export const EMPTY_COMMENT = {
+    id: '',
+    value: '',
+    date: '',
+    user: '',
+    name: '',
+    picture: '',
+    entry: '',
+    lexicon: '',
+};
+export const EMPTY_COMMENT_REQUEST = {
+    value: '',
+};

package/dist/Comments/types/CommentService.d.ts

@@ -0,0 +1,21 @@
+import User from '../../configs/User';
+import { Comment, CommentRequest } from './Comment';
+declare function markRead(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function update(id: string, comment: CommentRequest): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function remove(id: string): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function add(lexicon: string, entry: string, comment: CommentRequest, keywords: Record<string, string | number | boolean>): Promise<import("axios").AxiosResponse<Comment, any>>;
+declare function find(lexicon: string, entry?: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findNotifications(lexicon: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findReadNotifications(lexicon: string): Promise<import("axios").AxiosResponse<Comment[], any>>;
+declare function findAvailableUsers(lexicon: string): Promise<import("axios").AxiosResponse<User[], any>>;
+declare const CommentService: {
+    add: typeof add;
+    remove: typeof remove;
+    update: typeof update;
+    markRead: typeof markRead;
+    find: typeof find;
+    findNotifications: typeof findNotifications;
+    findReadNotifications: typeof findReadNotifications;
+    findAvailableUsers: typeof findAvailableUsers;
+};
+export default CommentService;

package/dist/Comments/types/CommentService.js

@@ -0,0 +1,44 @@
+import api from '../../configs/api';
+function markRead(id) {
+    return api.put(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`);
+}
+function update(id, comment) {
+    return api.patch(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${id}`, { ...comment });
+}
+function remove(id) {
+    return api.delete(`${import.meta.env.VITE_APP_COMMENT_API_URL}/${id}`);
+}
+function add(lexicon, entry, comment, keywords) {
+    return api.post(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${lexicon}`, {
+        ...comment,
+        entry,
+        keywords,
+    });
+}
+function find(lexicon, entry) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/${lexicon}`, {
+        params: {
+            entry,
+        },
+    });
+}
+function findNotifications(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/notifications/${lexicon}`);
+}
+function findReadNotifications(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_COMMENT_API_URL}/lexicon/notifications/read/${lexicon}`);
+}
+function findAvailableUsers(lexicon) {
+    return api.get(`${import.meta.env.VITE_APP_AUTH_API}/lexicon/${lexicon}`);
+}
+const CommentService = {
+    add,
+    remove,
+    update,
+    markRead,
+    find,
+    findNotifications,
+    findReadNotifications,
+    findAvailableUsers,
+};
+export default CommentService;

package/dist/configs/Localization.d.ts

@@ -39,6 +39,34 @@ export declare const commonResources: {
             'modal.select.transfer': string;
             'participant.code.exists': string;
         };
+        comments: {
+            'label.title.comments': string;
+            'placeholder.comment.text': string;
+            'placeholder.comment.title': string;
+            'placeholder.comment.person': string;
+            'label.button.add': string;
+            'label.button.update': string;
+            'label.requested.to': string;
+            'label.posted.on': string;
+            'placeholder.comments.empty': string;
+            'tooltip.edit': string;
+            'tooltip.delete': string;
+            'tooltip.read': string;
+            'modal.title.footnote': string;
+            'placeholder.footnote.text': string;
+            'modal.title.footnote.remove': string;
+            'modal.text.footnote.remove': string;
+            'button.add': string;
+            'input.value': string;
+            'input.title': string;
+            'input.user': string;
+            'button.discard': string;
+            'notification.title': string;
+            'notification.unread': string;
+            'notification.all': string;
+            'notification.empty': string;
+            'notification.text': string;
+        };
     };
     'pt-BR': {
         common: {
@@ -78,6 +106,34 @@ export declare const commonResources: {
             'modal.input.name': string;
             'participant.code.exists': string;
         };
+        comments: {
+            'label.title.comments': string;
+            'placeholder.comment.text': string;
+            'placeholder.comment.title': string;
+            'placeholder.comment.person': string;
+            'label.button.add': string;
+            'label.button.update': string;
+            'label.requested.to': string;
+            'label.posted.on': string;
+            'placeholder.comments.empty': string;
+            'tooltip.edit': string;
+            'tooltip.delete': string;
+            'tooltip.read': string;
+            'modal.title.footnote': string;
+            'placeholder.footnote.text': string;
+            'modal.title.footnote.remove': string;
+            'modal.text.footnote.remove': string;
+            'button.add': string;
+            'input.value': string;
+            'input.title': string;
+            'input.user': string;
+            'button.discard': string;
+            'notification.title': string;
+            'notification.unread': string;
+            'notification.all': string;
+            'notification.empty': string;
+            'notification.text': string;
+        };
     };
 };
 export default function commonLocalization(): void;

package/dist/configs/Localization.js

@@ -3,14 +3,17 @@ import languageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import { ParticipantsTexts } from './localization/ParticipantsTexts';
 import { CommonTexts } from './localization/CommonTexts';
+import { CommentsTexts } from './localization/CommentsTexts';
 export const commonResources = {
     en: {
         common: CommonTexts.en,
         participants: ParticipantsTexts.en,
+        comments: CommentsTexts.en,
     },
     'pt-BR': {
         common: CommonTexts['pt-BR'],
         participants: ParticipantsTexts['pt-BR'],
+        comments: CommentsTexts['pt-BR'],
     },
 };
 export default function commonLocalization() {
@@ -20,7 +23,7 @@ export default function commonLocalization() {
         .init({
         resources: commonResources,
         fallbackLng: 'en',
-        defaultNS: 'message',
+        defaultNS: 'common',
         interpolation: {
             escapeValue: false,
         },

package/dist/configs/User.d.ts

@@ -0,0 +1,16 @@
+export declare enum UserStatus {
+    ACTIVE = "ACTIVE",
+    INACTIVE = "INACTIVE",
+    SUPER = "SUPER",
+    VISITOR = "VISITOR"
+}
+type User = {
+    uid: string;
+    name: string;
+    sub: string;
+    picture: string;
+    lang: string;
+    status: UserStatus;
+    permissions: string[];
+};
+export default User;

package/dist/configs/User.js

@@ -0,0 +1,7 @@
+export var UserStatus;
+(function (UserStatus) {
+    UserStatus["ACTIVE"] = "ACTIVE";
+    UserStatus["INACTIVE"] = "INACTIVE";
+    UserStatus["SUPER"] = "SUPER";
+    UserStatus["VISITOR"] = "VISITOR";
+})(UserStatus || (UserStatus = {}));

package/dist/configs/localization/CommentsTexts.d.ts

@@ -0,0 +1,58 @@
+export declare const CommentsTexts: {
+    en: {
+        'label.title.comments': string;
+        'placeholder.comment.text': string;
+        'placeholder.comment.title': string;
+        'placeholder.comment.person': string;
+        'label.button.add': string;
+        'label.button.update': string;
+        'label.requested.to': string;
+        'label.posted.on': string;
+        'placeholder.comments.empty': string;
+        'tooltip.edit': string;
+        'tooltip.delete': string;
+        'tooltip.read': string;
+        'modal.title.footnote': string;
+        'placeholder.footnote.text': string;
+        'modal.title.footnote.remove': string;
+        'modal.text.footnote.remove': string;
+        'button.add': string;
+        'input.value': string;
+        'input.title': string;
+        'input.user': string;
+        'button.discard': string;
+        'notification.title': string;
+        'notification.unread': string;
+        'notification.all': string;
+        'notification.empty': string;
+        'notification.text': string;
+    };
+    'pt-BR': {
+        'label.title.comments': string;
+        'placeholder.comment.text': string;
+        'placeholder.comment.title': string;
+        'placeholder.comment.person': string;
+        'label.button.add': string;
+        'label.button.update': string;
+        'label.requested.to': string;
+        'label.posted.on': string;
+        'placeholder.comments.empty': string;
+        'tooltip.edit': string;
+        'tooltip.delete': string;
+        'tooltip.read': string;
+        'modal.title.footnote': string;
+        'placeholder.footnote.text': string;
+        'modal.title.footnote.remove': string;
+        'modal.text.footnote.remove': string;
+        'button.add': string;
+        'input.value': string;
+        'input.title': string;
+        'input.user': string;
+        'button.discard': string;
+        'notification.title': string;
+        'notification.unread': string;
+        'notification.all': string;
+        'notification.empty': string;
+        'notification.text': string;
+    };
+};

package/dist/configs/localization/CommentsTexts.js

@@ -0,0 +1,58 @@
+export const CommentsTexts = {
+    en: {
+        'label.title.comments': 'Comments',
+        'placeholder.comment.text': 'Your comment',
+        'placeholder.comment.title': 'Title (optional)',
+        'placeholder.comment.person': 'Select person',
+        'label.button.add': 'Add comment',
+        'label.button.update': 'Update comment',
+        'label.requested.to': 'Sent to:',
+        'label.posted.on': 'Posted on:',
+        'placeholder.comments.empty': 'No comments available.',
+        'tooltip.edit': 'Edit comment',
+        'tooltip.delete': 'Remove comment',
+        'tooltip.read': 'Mark as read',
+        'modal.title.footnote': 'Edit footnote',
+        'placeholder.footnote.text': 'Enter footnote',
+        'modal.title.footnote.remove': 'Confirm footnote removal',
+        'modal.text.footnote.remove': 'Are you sure you want to remove this footnote? This action is irreversible.',
+        'button.add': 'Add comment',
+        'input.value': 'Comment',
+        'input.title': 'Title',
+        'input.user': 'Send to user',
+        'button.discard': 'Discard',
+        'notification.title': 'Notifications',
+        'notification.unread': 'Unread',
+        'notification.all': 'Read',
+        'notification.empty': 'No more notifications',
+        'notification.text': '{{user}} added a comment to entry {{entry}}.',
+    },
+    'pt-BR': {
+        'label.title.comments': 'Comentários',
+        'placeholder.comment.text': 'Seu comentário',
+        'placeholder.comment.title': 'Título (opcional)',
+        'placeholder.comment.person': 'Selecione a pessoa',
+        'label.button.add': 'Adicionar comentário',
+        'label.button.update': 'Atualizar comentário',
+        'label.requested.to': 'Enviado para:',
+        'label.posted.on': 'Postado em:',
+        'placeholder.comments.empty': 'Nenhum comentário disponível.',
+        'tooltip.edit': 'Editar commentário',
+        'tooltip.delete': 'Remover commentário',
+        'tooltip.read': 'Marcar como lido',
+        'modal.title.footnote': 'Editar nota de rodapé',
+        'placeholder.footnote.text': 'Entre o texto da nota de rodapé',
+        'modal.title.footnote.remove': 'Confirmação de exclusão de nota de rodapé',
+        'modal.text.footnote.remove': 'Tem certeza de que deseja remover esta nota de rodapé? Esta ação é irreversível.',
+        'button.add': 'Adicionar comentário',
+        'input.value': 'Comentário',
+        'input.title': 'Título',
+        'input.user': 'Enviar para usuário',
+        'button.discard': 'Descartar',
+        'notification.title': 'Notificações',
+        'notification.unread': 'Não lidas',
+        'notification.all': 'Lidas',
+        'notification.empty': 'Não há notificações',
+        'notification.text': '{{user}} adicionou um comentário na entrada {{entry}}.',
+    },
+};

package/dist/configs/store/actions.d.ts

@@ -1,4 +1,6 @@
 import ToastMessage from '../../AppToast/ToastMessage';
+import User from '../User';
 import { StoreAction } from './types';
+export declare const logged: (data: User | undefined) => StoreAction;
 export declare const message: (data: ToastMessage) => StoreAction;
 export declare const toastLoading: (data: boolean) => StoreAction;

package/dist/configs/store/actions.js

@@ -1,4 +1,8 @@
 import { types } from './types';
+export const logged = (data) => ({
+    type: types.LOGGED,
+    payload: data,
+});
 export const message = (data) => ({
     type: types.MESSAGE,
     payload: data,

package/dist/configs/store/reducer.js

@@ -2,6 +2,11 @@
 import { types } from './types';
 function reducer(state, action) {
     switch (action.type) {
+        case types.LOGGED:
+            return {
+                ...state,
+                logged: action.payload,
+            };
         case types.MESSAGE:
             return {
                 ...state,

package/dist/configs/store/store.js

@@ -1,5 +1,6 @@
 import { EMPTY_TOAST } from '../../AppToast/ToastMessage';
 const store = {
+    logged: undefined,
     message: EMPTY_TOAST,
     toastLoading: false,
 };

package/dist/configs/store/types.d.ts

@@ -1,13 +1,16 @@
 import ToastMessage from '../../AppToast/ToastMessage';
+import User from '../User';
 export type UserStore = {
+    logged: User | undefined;
     message: ToastMessage;
     toastLoading: boolean;
 };
 export type StoreAction = {
     type: string;
-    payload?: ToastMessage | boolean;
+    payload?: ToastMessage | boolean | User;
 };
 export declare const types: {
     MESSAGE: string;
     TOAST_LOADING: string;
+    LOGGED: string;
 };

package/dist/configs/store/types.js

@@ -1,4 +1,5 @@
 export const types = {
     MESSAGE: 'MESSAGE',
     TOAST_LOADING: 'TOAST_LOADING',
+    LOGGED: 'LOGGED',
 };

package/dist/functions/DateUtils.d.ts

@@ -0,0 +1,9 @@
+declare function extractDateFromMongoId(id: string, time?: boolean): string;
+declare const DateUtils: {
+    millis: () => number;
+    formatDate: (date: Date | null, fmt: string) => string;
+    parseTime: (time: number) => string;
+    extractDateFromMongoId: typeof extractDateFromMongoId;
+    formatDateTime: (isoDateStr: string, outputFormat: string) => string;
+};
+export default DateUtils;

package/dist/functions/DateUtils.js

@@ -0,0 +1,42 @@
+import { addSeconds, parseISO } from 'date-fns';
+import { format } from 'date-fns-tz';
+const millis = () => new Date().getTime();
+const formatDateTime = (isoDateStr, outputFormat) => {
+    try {
+        const parsedDate = parseISO(isoDateStr);
+        return format(parsedDate, outputFormat);
+    }
+    catch (error) {
+        console.error('Invalid date or format:', error);
+        return '';
+    }
+};
+const formatDate = (date, fmt) => {
+    console.log(typeof date);
+    if (!date)
+        return '';
+    return format(date, fmt);
+};
+const parseTime = (time) => {
+    if (time == null || time <= 0)
+        return '00:00:00.000';
+    return new Date(time * 1000).toISOString().slice(11, 23);
+};
+function extractDateFromMongoId(id, time) {
+    const DATE_PATTERN = 'yyyy-MM-dd';
+    const TIME_PATTERN = 'HH:mm:ss';
+    const hexTimestamp = id.substring(0, 8);
+    const timestampInMilliseconds = parseInt(hexTimestamp, 16) * 1000;
+    const dtf = time ? `${DATE_PATTERN} ${TIME_PATTERN}` : DATE_PATTERN;
+    const date = addSeconds(new Date(0), timestampInMilliseconds / 1000);
+    const formattedDate = format(date, dtf);
+    return formattedDate;
+}
+const DateUtils = {
+    millis,
+    formatDate,
+    parseTime,
+    extractDateFromMongoId,
+    formatDateTime,
+};
+export default DateUtils;

package/dist/functions/FormUtils.d.ts

@@ -0,0 +1,11 @@
+import { TFunction } from 'i18next';
+import { SelectItem } from 'tycho-storybook/dist/SelectField/SelectField';
+declare const FormUtils: {
+    convertEnum: (values: Record<string, string>, t?: TFunction, prefix?: string) => SelectItem[];
+    convertList: (values: any, labelAttr: string, valueAttr: string) => SelectItem[];
+    convertStringArray: (values: string[]) => SelectItem[];
+    booleanOptions: (t: TFunction) => SelectItem[];
+    convertMap: (values: Record<string, any> | undefined) => SelectItem[];
+    sortByLabel: (items: SelectItem[]) => SelectItem[];
+};
+export default FormUtils;

package/dist/functions/FormUtils.js

@@ -0,0 +1,56 @@
+const convertEnum = (values, t, prefix) => {
+    if (!t)
+        return Object.entries(values).map(([key, label]) => ({
+            value: key,
+            label,
+        }));
+    return Object.entries(values).map(([key, label]) => ({
+        value: key,
+        label: t(`${prefix}.${label}`),
+    }));
+};
+const sortByLabel = (items) => {
+    return [...items].sort((a, b) => a.label.localeCompare(b.label));
+};
+const convertList = (values, labelAttr, valueAttr) => {
+    if (!values)
+        return [];
+    let fields = [];
+    values.map((value) => {
+        fields = [...fields, { label: value[labelAttr], value: value[valueAttr] }];
+    });
+    return fields;
+};
+const convertMap = (values) => {
+    if (!values)
+        return [];
+    let fields = [];
+    Object.keys(values).map((key) => {
+        fields = [...fields, { label: values[key], value: key }];
+    });
+    return fields;
+};
+const convertStringArray = (values) => {
+    if (!values)
+        return [];
+    let fields = [];
+    values.map((value) => {
+        fields = [...fields, { label: value, value }];
+    });
+    return fields;
+};
+const booleanOptions = (t) => {
+    return [
+        { label: t('message:generic.option.true'), value: 'true' },
+        { label: t('message:generic.option.false'), value: 'false' },
+    ];
+};
+const FormUtils = {
+    convertEnum,
+    convertList,
+    convertStringArray,
+    booleanOptions,
+    convertMap,
+    sortByLabel,
+};
+export default FormUtils;

package/dist/functions/SecurityUtils.d.ts

@@ -0,0 +1,6 @@
+import User from '../configs/User';
+declare const SecurityUtils: {
+    hasAccess: (uid: string, roles: string[]) => boolean;
+    parseJwt: (token: string) => User;
+};
+export default SecurityUtils;

package/dist/functions/SecurityUtils.js

@@ -0,0 +1,28 @@
+import CookieStorage from '../configs/CookieStorage';
+import { UserStatus } from '../configs/User';
+const hasAccess = (uid, roles) => {
+    const token = CookieStorage.getJwtToken();
+    if (!token)
+        return false;
+    const logged = parseJwt(token);
+    if (logged.status && logged.status === UserStatus.SUPER)
+        return true;
+    return roles.some((role) => logged.permissions.includes(`ROLE_${role}_LEXICON_${uid}`));
+};
+const parseJwt = (token) => {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const payload = decodeURIComponent(window
+        .atob(base64)
+        .split('')
+        .map(function (c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    })
+        .join(''));
+    return JSON.parse(payload);
+};
+const SecurityUtils = {
+    hasAccess,
+    parseJwt,
+};
+export default SecurityUtils;

package/dist/index.d.ts

@@ -6,12 +6,17 @@ export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
 export { default as VirtualKeyboard } from './VirtualKeyboard';
+export { default as CommentComponent } from './Comments';
+export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export { CommonProvider } from './configs/CommonContext';
 export { useMessageUtils } from './configs/useMessageUtils';
 export { validateFormField } from './AppEditable/FormField';
 export { convertEnum, convertList } from './AppEditable/FormFieldOption';
 export { commonResources } from './configs/Localization';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as DateUtils } from './functions/DateUtils';
+export { default as FormUtils } from './functions/FormUtils';
+export { default as SecurityUtils } from './functions/SecurityUtils';
 export type { FormFieldOption } from './AppEditable/FormFieldOption';
 export type { AppEditableField } from './AppEditable/AppEditableField';
 export type { FieldOperations, FormField } from './AppEditable/FormField';

package/dist/index.js

@@ -6,9 +6,14 @@ export { default as AppModal } from './AppModal';
 export { default as AppModalConfirm } from './AppModal/AppModalConfirm';
 export { default as AppModalRemove } from './AppModal/AppModalRemove';
 export { default as VirtualKeyboard } from './VirtualKeyboard';
+export { default as CommentComponent } from './Comments';
+export { default as HeaderNotifications } from './Comments/HeaderNotifications';
 export { CommonProvider } from './configs/CommonContext';
 export { useMessageUtils } from './configs/useMessageUtils';
 export { validateFormField } from './AppEditable/FormField';
 export { convertEnum, convertList } from './AppEditable/FormFieldOption';
 export { commonResources } from './configs/Localization';
 export { KeyboardCustomLayouts } from './VirtualKeyboard/KeyboardCustomLayout';
+export { default as DateUtils } from './functions/DateUtils';
+export { default as FormUtils } from './functions/FormUtils';
+export { default as SecurityUtils } from './functions/SecurityUtils';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.0.10-SNAPSHOT-8",
+  "version": "0.0.11-SNAPSHOT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -47,6 +47,7 @@
     "react-dom": ">=17 <19",
     "react-hook-form": "^7.45.2",
     "react-i18next": "^13.0.2",
+    "react-router-dom": "^6.14.2",
     "tycho-storybook": "0.1.5-SNAPSHOT",
     "yup": "^1.2.0"
   },