nurseitaly-components 0.0.1

package/dist/common/AppModal/AppModalRemove.d.ts

@@ -0,0 +1,22 @@
+import './style.scss';
+type Props = {
+    title: string;
+    subtitle: string;
+    onClose: () => void;
+    onConfirm: () => void;
+    disableClose?: boolean;
+    disableEscapeClose?: boolean;
+};
+export default function AppModalRemove({ title, subtitle, onClose, onConfirm, disableClose, disableEscapeClose, }: Props): import("react").JSX.Element;
+export declare const modalRemoveStyle: {
+    position: string;
+    top: string;
+    left: string;
+    transform: string;
+    width: string;
+    maxWidth: string;
+    borderRadius: string;
+    boxShadow: number;
+    bgcolor: string;
+};
+export {};

package/dist/common/AppModal/AppModalRemove.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Modal } from '@mui/material';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from '../../basic';
+import './style.scss';
+import { attachCloseToEscape, stopEventPropagation } from './AppModalUtils';
+export default function AppModalRemove({ title, subtitle, onClose, onConfirm, disableClose, disableEscapeClose, }) {
+    const { t } = useTranslation('common');
+    useEffect(() => {
+        if (disableEscapeClose)
+            return;
+        return attachCloseToEscape(onClose);
+    }, [onClose, disableEscapeClose]);
+    return (_jsx(Modal, { open: true, disableEscapeKeyDown: !!disableEscapeClose, onClose: (event) => {
+            stopEventPropagation(event);
+            if (disableClose)
+                return;
+            onClose();
+        }, children: _jsxs(Box, { className: "modal-container modal-remove", sx: modalRemoveStyle, children: [_jsxs("div", { className: "body", children: [_jsx(Icon, { name: "delete", size: "large", filled: true }), _jsxs("div", { className: "texts", children: [_jsx("span", { className: "title", children: title }), _jsx("span", { className: "subtitle", children: subtitle })] })] }), _jsxs("div", { className: "footer", children: [_jsx(Button, { onClick: (e) => {
+                                stopEventPropagation(e);
+                                onClose();
+                            }, text: t('button.cancel'), mode: "tonal" }), _jsx(Button, { onClick: onConfirm, text: t('button.confirm') })] })] }) }));
+}
+export const modalRemoveStyle = {
+    position: 'absolute',
+    top: '40%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: '30%',
+    maxWidth: '580px',
+    borderRadius: 'var(--radius-200)',
+    boxShadow: 24,
+    bgcolor: 'var(--background-default)',
+};

package/dist/common/AppModal/AppModalUtils.d.ts

@@ -0,0 +1,2 @@
+export declare const stopEventPropagation: (event: unknown) => void;
+export declare const attachCloseToEscape: (handleClose: () => void) => () => void;

package/dist/common/AppModal/AppModalUtils.js

@@ -0,0 +1,17 @@
+export const stopEventPropagation = (event) => {
+    const e = event;
+    e.preventDefault?.();
+    e.stopPropagation?.();
+    e.stopImmediatePropagation?.();
+};
+export const attachCloseToEscape = (handleClose) => {
+    const closeOnEscape = (e) => {
+        if (e.key === "Escape" || e.code === "Escape") {
+            stopEventPropagation(e);
+            handleClose();
+        }
+    };
+    // Capture phase makes this resilient if inner components stopPropagation() on Escape.
+    window.addEventListener("keydown", closeOnEscape, { capture: true });
+    return () => window.removeEventListener("keydown", closeOnEscape, { capture: true });
+};

package/dist/common/AppModal/index.d.ts

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

package/dist/common/AppModal/index.js

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

package/dist/common/AppModal/style.scss

@@ -0,0 +1,100 @@
+.modal-container {
+  display: flex;
+  flex-direction: column;
+
+  > .header {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--border-subtle-1);
+    padding: var(--spacing-300) var(--spacing-200) var(--spacing-150);
+
+    .titles {
+      .title {
+        @include label-large-2;
+        display: block;
+      }
+
+      .subtitle {
+        display: block;
+        @include body-medium-1;
+        color: var(--text-secondary);
+      }
+    }
+
+    > .ds-icon {
+      margin-left: auto;
+      margin-bottom: auto;
+    }
+  }
+
+  > .body {
+    padding: var(--spacing-300) var(--spacing-200) var(--spacing-150);
+  }
+
+  > .footer {
+    display: flex;
+    justify-content: end;
+    margin-top: auto;
+    gap: 10px;
+    padding: var(--spacing-200) var(--spacing-200) var(--spacing-150);
+  }
+
+  &.modal-remove,
+  &.modal-confirm {
+    > .body {
+      display: flex;
+      gap: 16px;
+
+      > .ds-icon {
+        color: var(--icon-warning);
+      }
+
+      .texts {
+        display: flex;
+        flex-direction: column;
+
+        > .title {
+          @include subtitle-medium-2;
+          color: var(--text-primary);
+        }
+
+        > .subtitle {
+          @include body-medium-1;
+          color: var(--text-secondary);
+        }
+      }
+    }
+  }
+
+  &.modal-remove > .body > .ds-icon {
+    color: var(--icon-error);
+  }
+}
+
+@media (max-width: 1366px) {
+  .modal-container {
+    width: 40%;
+  }
+}
+
+@media (max-width: 768px) {
+  .modal-container {
+    width: 90% !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .modal-container {
+    .footer {
+      .ds-button {
+        font-size: 16px;
+        font-weight: 600;
+        line-height: 100%;
+        letter-spacing: 0.32px;
+        text-transform: uppercase;
+        padding: var(--spacing-100) var(--spacing-200);
+        height: 40px;
+      }
+    }
+  }
+}

package/dist/common/AppPagination/AppPagination.d.ts

@@ -0,0 +1,12 @@
+import { PaginationState } from '@tanstack/react-table';
+import './styles.scss';
+type Props<TData> = {
+    totalElements: number;
+    pagination: PaginationState;
+    setPagination: (p: PaginationState) => void;
+    hideItensPage?: boolean;
+    numItens?: number[];
+    size?: 'medium' | 'small';
+};
+export default function AppPagination<TData>({ totalElements, pagination, setPagination, hideItensPage, numItens, size, }: Props<TData>): import("react").JSX.Element;
+export {};

package/dist/common/AppPagination/AppPagination.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { Icon, IconButton } from '../../basic';
+import './styles.scss';
+const DRAG_THRESHOLD_PX = 6;
+export default function AppPagination({ totalElements, pagination, setPagination, hideItensPage, numItens = [10, 25, 50], size = 'medium', }) {
+    const { t } = useTranslation('common');
+    const scrollContainerRef = useRef(null);
+    const activePageButtonRef = useRef(null);
+    const [stripScrollEdges, setStripScrollEdges] = useState({
+        overflow: false,
+        canScrollLeft: false,
+        canScrollRight: false,
+    });
+    const { isDraggingScroll, suppressPageClickRef, pagesTotalPointerHandlers } = useDragToScrollRow(scrollContainerRef, DRAG_THRESHOLD_PX);
+    const updateStripScrollEdgeState = useCallback(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const maxScroll = el.scrollWidth - el.clientWidth;
+        const overflow = maxScroll > 1;
+        setStripScrollEdges({
+            overflow,
+            canScrollLeft: overflow && el.scrollLeft > 1,
+            canScrollRight: overflow && el.scrollLeft < maxScroll - 1,
+        });
+    }, []);
+    const scrollPageStrip = useCallback((direction) => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const step = Math.max(72, Math.floor(el.clientWidth * 0.8));
+        el.scrollBy({ left: direction * step, behavior: 'smooth' });
+    }, []);
+    const numPages = Math.ceil(totalElements / pagination.pageSize);
+    const currentPage = pagination.pageIndex + 1;
+    const getFirstElementNumber = () => pagination.pageIndex * pagination.pageSize + 1;
+    const getLastElementNumber = () => Math.min((pagination.pageIndex + 1) * pagination.pageSize, totalElements);
+    const setPageSize = (p) => {
+        setPagination({ ...pagination, pageSize: p });
+    };
+    const setPageIndex = (p) => {
+        setPagination({ ...pagination, pageIndex: p });
+    };
+    /** Scroll only the page strip — never `scrollIntoView`, which can scroll the document. */
+    const scrollActivePageIntoCenter = useCallback(() => {
+        const container = scrollContainerRef.current;
+        const button = activePageButtonRef.current;
+        if (!container || !button)
+            return;
+        const maxScroll = Math.max(0, container.scrollWidth - container.clientWidth);
+        if (maxScroll <= 0)
+            return;
+        const cRect = container.getBoundingClientRect();
+        const bRect = button.getBoundingClientRect();
+        const buttonLeftInContent = container.scrollLeft + (bRect.left - cRect.left);
+        const targetScrollLeft = buttonLeftInContent - container.clientWidth / 2 + button.offsetWidth / 2;
+        const clamped = Math.max(0, Math.min(maxScroll, targetScrollLeft));
+        container.scrollTo({ left: clamped, behavior: 'smooth' });
+    }, []);
+    useLayoutEffect(() => {
+        scrollActivePageIntoCenter();
+        requestAnimationFrame(() => updateStripScrollEdgeState());
+    }, [
+        numPages,
+        pagination.pageIndex,
+        pagination.pageSize,
+        scrollActivePageIntoCenter,
+        updateStripScrollEdgeState,
+    ]);
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const onScroll = () => updateStripScrollEdgeState();
+        el.addEventListener('scroll', onScroll, { passive: true });
+        const ro = new ResizeObserver(() => updateStripScrollEdgeState());
+        ro.observe(el);
+        return () => {
+            el.removeEventListener('scroll', onScroll);
+            ro.disconnect();
+        };
+    }, [updateStripScrollEdgeState]);
+    useEffect(() => {
+        const el = scrollContainerRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (el.scrollWidth <= el.clientWidth + 1)
+                return;
+            const dominantX = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+            const scrollDelta = dominantX ? e.deltaX : e.deltaY;
+            if (scrollDelta === 0)
+                return;
+            const maxScroll = el.scrollWidth - el.clientWidth;
+            const nextLeft = el.scrollLeft + scrollDelta;
+            const clamped = Math.max(0, Math.min(maxScroll, nextLeft));
+            const atStart = el.scrollLeft <= 0;
+            const atEnd = el.scrollLeft >= maxScroll - 1;
+            if ((scrollDelta < 0 && atStart) || (scrollDelta > 0 && atEnd)) {
+                return;
+            }
+            el.scrollLeft = clamped;
+            e.preventDefault();
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, []);
+    return (_jsxs("div", { className: classNames('app-table-pagination', {
+            small: size === 'small',
+        }), children: [_jsxs("div", { className: "itens-container", children: [!hideItensPage && (_jsxs("div", { className: "itens-page", children: [_jsx("span", { className: "itens-page-label", children: t('table.label.rows-page') }), _jsx("select", { className: "select-pages", value: pagination.pageSize, onChange: (e) => setPageSize(Number(e.target.value)), children: numItens.map((pageSizeOption) => (_jsx("option", { value: pageSizeOption, children: pageSizeOption }, pageSizeOption))) })] })), _jsx("div", { className: "itens-total", children: _jsx("span", { children: _jsx(Trans, { t: t, i18nKey: "table.label.items", values: {
+                                    first: getFirstElementNumber(),
+                                    last: getLastElementNumber(),
+                                    total: totalElements,
+                                } }) }) })] }), _jsxs("div", { className: "pages-navigation", children: [_jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex - 1), disabled: pagination.pageIndex === 0, name: "chevron_backward" }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollLeft, onClick: () => scrollPageStrip(-1), "aria-label": t('table.pagination.scroll-strip-left'), title: t('table.pagination.scroll-strip-left'), children: _jsx(Icon, { name: "keyboard_double_arrow_left", size: "x-small" }) })), _jsx("div", { ref: scrollContainerRef, className: classNames('pages-total', {
+                            'is-dragging': isDraggingScroll,
+                        }), ...pagesTotalPointerHandlers, children: Array.from({ length: numPages }, (_, index) => {
+                            const pageNum = index + 1;
+                            const isActive = pageNum === currentPage;
+                            return (_jsx("button", { ref: isActive ? activePageButtonRef : undefined, type: "button", className: classNames('page-number', { active: isActive }), onClick: () => {
+                                    if (suppressPageClickRef.current) {
+                                        return;
+                                    }
+                                    setPageIndex(index);
+                                }, "aria-current": isActive ? 'page' : undefined, children: pageNum }, pageNum));
+                        }) }), _jsx("div", { className: "pages-total-mobile", children: _jsx("select", { className: "select-pages", value: currentPage, onChange: (e) => setPageIndex(Number(e.target.value) - 1), children: Array.from({ length: numPages }, (_, index) => (_jsx("option", { value: index + 1, children: index + 1 }, index + 1))) }) }), stripScrollEdges.overflow && (_jsx("button", { type: "button", className: "page-strip-nudge", disabled: !stripScrollEdges.canScrollRight, onClick: () => scrollPageStrip(1), "aria-label": t('table.pagination.scroll-strip-right'), title: t('table.pagination.scroll-strip-right'), children: _jsx(Icon, { name: "keyboard_double_arrow_right", size: "x-small" }) })), _jsx(IconButton, { size: size, mode: "tonal", onClick: () => setPageIndex(pagination.pageIndex + 1), disabled: pagination.pageIndex >= numPages - 1, name: "chevron_forward" })] })] }));
+}
+const initialDragRow = {
+    pointerId: null,
+    startX: 0,
+    startScrollLeft: 0,
+    dragging: false,
+};
+/**
+ * Horizontal drag-to-scroll for an overflow-x container: hides reliance on
+ * the scrollbar (paired with CSS) while keeping click-vs-drag distinct.
+ */
+function useDragToScrollRow(containerRef, dragThresholdPx) {
+    const suppressPageClickRef = useRef(false);
+    const dragRef = useRef({ ...initialDragRow });
+    const [isDraggingScroll, setIsDraggingScroll] = useState(false);
+    const pagesTotalPointerHandlers = useMemo(() => {
+        const endPointer = (e) => {
+            const d = dragRef.current;
+            if (d.pointerId !== e.pointerId)
+                return;
+            const el = containerRef.current;
+            if (d.dragging) {
+                suppressPageClickRef.current = true;
+                window.setTimeout(() => {
+                    suppressPageClickRef.current = false;
+                }, 0);
+            }
+            dragRef.current = { ...initialDragRow };
+            setIsDraggingScroll(false);
+            if (el) {
+                try {
+                    el.releasePointerCapture(e.pointerId);
+                }
+                catch {
+                    /* capture may already be released */
+                }
+            }
+        };
+        return {
+            onPointerDown(e) {
+                if (e.button !== 0)
+                    return;
+                const target = e.target;
+                if (target?.closest('.page-number')) {
+                    return;
+                }
+                const el = containerRef.current;
+                if (!el)
+                    return;
+                dragRef.current = {
+                    pointerId: e.pointerId,
+                    startX: e.clientX,
+                    startScrollLeft: el.scrollLeft,
+                    dragging: false,
+                };
+                el.setPointerCapture(e.pointerId);
+            },
+            onPointerMove(e) {
+                const d = dragRef.current;
+                if (d.pointerId !== e.pointerId)
+                    return;
+                const el = containerRef.current;
+                if (!el)
+                    return;
+                const dx = e.clientX - d.startX;
+                if (!d.dragging && Math.abs(dx) > dragThresholdPx) {
+                    d.dragging = true;
+                    setIsDraggingScroll(true);
+                }
+                if (d.dragging) {
+                    el.scrollLeft = d.startScrollLeft - dx;
+                    e.preventDefault();
+                }
+            },
+            onPointerUp: endPointer,
+            onPointerCancel: endPointer,
+        };
+    }, [containerRef, dragThresholdPx]);
+    return {
+        isDraggingScroll,
+        suppressPageClickRef,
+        pagesTotalPointerHandlers,
+    };
+}

package/dist/common/AppPagination/index.d.ts

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

package/dist/common/AppPagination/index.js

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

package/dist/common/AppPagination/styles.scss

@@ -0,0 +1,230 @@
+.app-table-pagination {
+  display: flex;
+  padding: var(--spacing-150) var(--spacing-100);
+  border-top: 1px solid var(--border-subtle-2);
+
+  .itens-container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .itens-page {
+      display: flex;
+      align-items: center;
+      margin-right: 16px;
+      gap: 16px;
+    }
+
+    .itens-total {
+      display: flex;
+      align-items: center;
+      margin-right: auto;
+    }
+  }
+
+  .pages-total-mobile {
+    display: none;
+  }
+
+  .pages-total {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-wrap: nowrap;
+    max-width: 196px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    cursor: grab;
+    touch-action: pan-x;
+    overscroll-behavior-x: contain;
+    overscroll-behavior-y: contain;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    user-select: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &.is-dragging {
+      cursor: grabbing;
+
+      .page-number {
+        cursor: grabbing;
+      }
+    }
+
+    .page-number {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 36px;
+      height: 40px;
+      padding: 0 var(--spacing-50);
+      margin: 0;
+      border: none;
+      border-radius: 0;
+      font-family: 'Work Sans', sans-serif;
+      @include button-small;
+      color: var(--text-on-color-dark);
+      background-color: var(--button-secondary-default);
+      cursor: pointer;
+
+      &:hover:not(.active) {
+        filter: brightness(1.05);
+      }
+
+      &.active {
+        background-color: var(--button-primary-default);
+        color: var(--text-on-color-light);
+        cursor: default;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--border-focus);
+        outline-offset: 2px;
+      }
+    }
+  }
+
+  .pages-navigation {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    margin-left: auto;
+  }
+
+  .select-pages {
+    box-sizing: border-box;
+    min-width: 56px;
+    height: 40px;
+    margin: 0;
+    padding: var(--spacing-0) 28px var(--spacing-0) var(--spacing-100);
+    border: none;
+    border-radius: 0;
+    font-family: 'Work Sans', sans-serif;
+    @include button-small;
+    color: var(--text-on-color-dark);
+    background-color: var(--button-secondary-default);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23222' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 4px center;
+    background-size: 20px 20px;
+    cursor: pointer;
+    appearance: none;
+
+    &:hover {
+      filter: brightness(1.05);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  .page-strip-nudge {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 22px;
+    min-width: 22px;
+    height: 40px;
+    padding: 0;
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    background-color: var(--button-secondary-default);
+    color: var(--text-on-color-dark);
+    cursor: pointer;
+
+    &:hover:not(:disabled) {
+      filter: brightness(1.05);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-focus);
+      outline-offset: 2px;
+    }
+  }
+
+  &.small {
+    padding: var(--spacing-100);
+
+    .itens-page {
+      margin-right: 12px;
+    }
+
+    .pages-total {
+      width: 160px;
+
+      .page-number {
+        min-width: 28px;
+        height: 32px;
+      }
+    }
+
+    .page-strip-nudge {
+      height: 32px;
+    }
+
+    .select-pages {
+      height: 32px;
+      background-position: right 2px center;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .app-table-pagination {
+    flex-direction: column;
+
+    .itens-container .itens-total {
+      margin-right: unset;
+      margin-left: auto;
+    }
+
+    .pages-navigation {
+      justify-content: center;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 16px;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  .app-table-pagination {
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 12px 0px;
+
+    .itens-container {
+      .itens-page {
+        .itens-page-label {
+          display: none;
+        }
+      }
+    }
+
+    .pages-total-mobile {
+      display: block;
+    }
+
+    .pages-total {
+      display: none;
+    }
+
+    .pages-navigation {
+      justify-content: center;
+      margin: 0px;
+    }
+  }
+}

package/dist/common/AppPicture/AppPicture.d.ts

@@ -0,0 +1,10 @@
+import './style.scss';
+type PictureProps = {
+    src: string;
+    title?: string;
+    className?: string;
+    person?: boolean;
+    onClick?: () => void;
+};
+export default function AppPicture({ src, title, className, person, onClick, }: PictureProps): import("react").JSX.Element;
+export {};

package/dist/common/AppPicture/AppPicture.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import ImageUtils from '../../functions/ImageUtils';
+import './style.scss';
+export default function AppPicture({ src, title, className, person, onClick, }) {
+    const [empty, setEmpty] = useState(false);
+    useEffect(() => {
+        setEmpty(!src);
+    }, []);
+    return (_jsx("div", { className: `app-picture-container ${empty ? 'empty' : ''}`, children: _jsx("img", { className: cx(className, { 'picture-placeholder': !src }), src: ImageUtils.display(src, person), title: title, onClick: () => onClick && onClick(), onError: ({ currentTarget }) => {
+                setEmpty(true);
+                /* eslint-disable no-param-reassign */
+                currentTarget.onerror = null; // prevents looping
+                currentTarget.src = ImageUtils.getPlaceHolder(person);
+                /* eslint-enable no-param-reassign */
+            } }) }));
+}

package/dist/common/AppPicture/index.d.ts

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