nurseitaly-components 0.0.1

package/dist/basic/CheckboxField/index.d.ts

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

package/dist/basic/CheckboxField/index.js

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

package/dist/basic/CheckboxField/style.scss

@@ -0,0 +1,4 @@
+.ds-checkbox {
+  display: flex;
+  align-items: center;
+}

package/dist/basic/DatePickerField/DatePickerField.d.ts

@@ -0,0 +1,26 @@
+import { Locale } from 'date-fns/locale';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import './styles.scss';
+type Props<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
+    attr: string;
+    label?: string;
+    createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
+    className?: string;
+    disabled?: boolean;
+    title?: string;
+    placeholder?: string;
+    required?: boolean;
+    onChange?: (attr: string, value: any) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    width?: string | number;
+    height?: string | number;
+    minDate?: Date;
+    maxDate?: Date;
+    adapterLocale?: Locale;
+    displayFormat?: string;
+};
+export default function DatePickerField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ className, attr, label, createdForm, disabled, title, placeholder, required, onChange, onFocus, onBlur, onKeyDown, inputRef, width, height, minDate, maxDate, adapterLocale, displayFormat, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/basic/DatePickerField/DatePickerField.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import cx from 'classnames';
+import { format, isValid, parse, parseISO } from 'date-fns';
+import { enGB } from 'date-fns/locale';
+import { useRef } from 'react';
+import { Controller } from 'react-hook-form';
+import { datePickerTheme } from './DatePickerTheme';
+import './styles.scss';
+const STORAGE_FORMAT = 'yyyy-MM-dd';
+// Convert stored value (yyyy-MM-dd, ISO instant, etc.) to Date
+const parseDate = (value) => {
+    if (!value)
+        return null;
+    if (value instanceof Date)
+        return isNaN(value.getTime()) ? null : value;
+    const s = String(value).trim();
+    if (!s)
+        return null;
+    const fromIso = parseISO(s);
+    if (isValid(fromIso))
+        return fromIso;
+    try {
+        const parsed = parse(s, STORAGE_FORMAT, new Date());
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    catch {
+        return null;
+    }
+};
+// Format Date object into yyyy-MM-dd for storage
+const formatDate = (date) => date && !isNaN(date.getTime()) ? format(date, STORAGE_FORMAT) : '';
+export default function DatePickerField({ className, attr, label, createdForm, disabled, title, placeholder, required, onChange, onFocus, onBlur, onKeyDown, inputRef, width = '100%', height = '48px', minDate, maxDate, adapterLocale = enGB, displayFormat = 'dd/MM/yyyy', }) {
+    const fieldName = attr;
+    const outerTheme = useTheme();
+    const inputElementRef = useRef(null);
+    const hasError = () => !!createdForm.formState.errors[attr];
+    const getClassNames = cx('ds-input-datepicker', className, { disabled });
+    return (_jsx("div", { className: getClassNames, style: { width }, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: datePickerTheme(outerTheme), children: [_jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: adapterLocale, children: _jsx(DatePicker, { label: label, format: displayFormat, value: parseDate(field.value), onChange: (date, context) => {
+                                if (date == null && context?.validationError != null) {
+                                    return;
+                                }
+                                const formatted = formatDate(date);
+                                field.onChange(formatted);
+                                onChange && onChange(attr, formatted);
+                            }, onAccept: () => {
+                                // Trigger onBlur logic after date is selected from calendar
+                                if (onBlur && inputElementRef.current) {
+                                    const syntheticEvent = {
+                                        target: inputElementRef.current,
+                                        currentTarget: inputElementRef.current,
+                                    };
+                                    onBlur(syntheticEvent);
+                                }
+                            }, disabled: disabled, minDate: minDate, maxDate: maxDate, slotProps: {
+                                textField: {
+                                    required,
+                                    variant: 'filled',
+                                    InputLabelProps: { shrink: true },
+                                    inputRef: (element) => {
+                                        inputElementRef.current = element;
+                                        // Also call the original inputRef if provided
+                                        if (inputRef) {
+                                            if (typeof inputRef === 'function') {
+                                                inputRef(element);
+                                            }
+                                            else if ('current' in inputRef) {
+                                                inputRef.current = element;
+                                            }
+                                        }
+                                    },
+                                    fullWidth: true,
+                                    placeholder: placeholder || displayFormat,
+                                    onFocus: (e) => {
+                                        onFocus && onFocus(e);
+                                    },
+                                    onBlur: (e) => {
+                                        onBlur && onBlur(e);
+                                    },
+                                    onKeyDown,
+                                    error: !!hasError(),
+                                    sx: {
+                                        height,
+                                    },
+                                },
+                            } }) }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
+}

package/dist/basic/DatePickerField/DatePickerTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '@mui/material/styles';
+export declare const datePickerTheme: (outerTheme: Theme) => Theme;

package/dist/basic/DatePickerField/DatePickerTheme.js

@@ -0,0 +1,59 @@
+import { createTheme } from '@mui/material/styles';
+export const datePickerTheme = (outerTheme) => createTheme({
+    ...outerTheme,
+    components: {
+        // Keep targeting TextField root in case of any wrappers
+        MuiFormControl: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white',
+                    border: '1px solid #9D9FA2',
+                    borderRadius: '4px',
+                    padding: 0,
+                    // fix background inheritance in DatePicker wrapper
+                    '& .MuiFilledInput-root': {
+                        backgroundColor: 'white',
+                    },
+                    '& .MuiInputBase-input': {
+                        // label-medium-1
+                        fontSize: '16px',
+                        fontWeight: '400',
+                        lineHeight: '120%',
+                        letterSpacing: '0px',
+                        fontFamily: 'Work Sans, sans-serif',
+                        '&::placeholder': {
+                            color: '#707276',
+                        },
+                        '&:-webkit-autofill': {
+                            WebkitBoxShadow: '0 0 0px 1000px transparent inset !important',
+                            WebkitTextFillColor: '#000 !important',
+                            transition: 'background-color 5000s ease-in-out 0s', // Prevents flashing
+                        },
+                    },
+                    '& .MuiPickersInputBase-root::before': {
+                        content: 'none',
+                    },
+                    '& .MuiPickersInputBase-root::after': {
+                        content: 'none',
+                    },
+                    '& .MuiPickersInputBase-root': {
+                        backgroundColor: 'white',
+                        paddingLeft: '4px',
+                        height: '100%',
+                    },
+                    '& .MuiInputLabel-root': {
+                        paddingLeft: '4px',
+                        color: '#000000',
+                        textTransform: 'uppercase',
+                        // helper-medium-1
+                        fontSize: '12px',
+                        fontWeight: '400',
+                        lineHeight: '100%',
+                        letterSpacing: '0.16px',
+                        fontFamily: 'Work Sans, sans-serif',
+                    },
+                },
+            },
+        },
+    },
+});

package/dist/basic/DatePickerField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DatePickerField';

package/dist/basic/DatePickerField/index.js

@@ -0,0 +1 @@
+export { default } from './DatePickerField';

package/dist/basic/DatePickerField/styles.scss

@@ -0,0 +1,26 @@
+.ds-input-datepicker {
+  width: 100%;
+  position: relative;
+
+  > .helper {
+    @include helper-small-1;
+    margin-top: 4px;
+
+    &.error {
+      color: var(--text-error);
+    }
+  }
+
+  .icon-info {
+    color: var(--icon-tertiary);
+  }
+
+  &.disabled {
+    color: var(--text-on-disabled);
+    cursor: not-allowed;
+
+    input {
+      cursor: not-allowed;
+    }
+  }
+}

package/dist/basic/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,18 @@
+import { DropdownItem } from '../DropdownList/DropdownItemList';
+import './styles.scss';
+export declare const DropdownButtonSizes: readonly ["large", "medium", "small", "x-small"];
+export type DropdownButtonSizes = (typeof DropdownButtonSizes)[number];
+export declare const DropdownButtonColors: readonly ["primary", "secondary", "tertiary"];
+export type DropdownButtonColors = (typeof DropdownButtonColors)[number];
+export type Props = JSX.IntrinsicElements['button'] & {
+    text: string;
+    list: DropdownItem[];
+    color?: DropdownButtonColors;
+    size?: DropdownButtonSizes;
+    active?: boolean;
+    onSelect?: (item: string | number | object) => void;
+    hideDivider?: boolean;
+    right?: boolean;
+    icon?: string;
+};
+export default function DropdownButton({ text, list, className, disabled, active, color, size, onSelect, hideDivider, right, icon, }: Props): import("react").JSX.Element;

package/dist/basic/DropdownButton/DropdownButton.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+import DropdownList from '../DropdownList';
+import Icon from '../Icon';
+import './styles.scss';
+export const DropdownButtonSizes = [
+    'large',
+    'medium',
+    'small',
+    'x-small',
+];
+export const DropdownButtonColors = [
+    'primary',
+    'secondary',
+    'tertiary',
+];
+export default function DropdownButton({ text, list, className = '', disabled = false, active = false, color = 'primary', size = 'large', onSelect, hideDivider, right, icon, }) {
+    const [show, setShow] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setShow(false);
+            }
+        };
+        if (show) {
+            document.addEventListener('mousedown', handleClickOutside);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [show]);
+    const getClassNames = cx('ds-dropdown-button', className, size, color, {
+        active: !disabled && active,
+    });
+    return (_jsxs("div", { className: "ds-dropdown-container", ref: containerRef, children: [_jsxs("button", { type: "button", disabled: disabled, className: getClassNames, onClick: () => setShow(!show), children: [_jsxs("div", { className: "left-side", children: [icon && _jsx(Icon, { name: icon, className: "icon-custom" }), _jsx("span", { className: "text", children: text })] }), !hideDivider && _jsx("div", { className: "divider", children: "\u00A0" }), _jsx(Icon, { name: "arrow_drop_down", className: "icon-arrow" })] }), show && (_jsx(DropdownList, { right: right, list: list, onSelect: (s) => {
+                    onSelect && onSelect(s);
+                    setTimeout(function () {
+                        setShow(false);
+                    }, 200);
+                } }))] }));
+}

package/dist/basic/DropdownButton/index.d.ts

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

package/dist/basic/DropdownButton/index.js

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

package/dist/basic/DropdownButton/styles.scss

@@ -0,0 +1,172 @@
+.ds-dropdown-container {
+  display: inline-block;
+  position: relative;
+
+  .ds-dropdown-button {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-150);
+    box-sizing: border-box;
+    cursor: pointer;
+    border-radius: var(--radius-050);
+    color: var(--text-on-color-light);
+    width: 100%;
+
+    .ds-icon {
+      color: var(--text-on-color-light);
+    }
+
+    .left-side {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-150);
+      flex: 1 1 auto;
+      min-width: 0;
+    }
+
+    > .divider {
+      align-self: stretch;
+      border-left: 1px solid var(--neutral-dark-0);
+      width: 1px;
+      padding: 0 !important;
+      margin: 0;
+      flex-shrink: 0;
+    }
+
+    &:disabled.primary,
+    &:disabled.secondary {
+      background: var(--layer-disabled) !important;
+      border: 1px solid var(--layer-disabled) !important;
+      color: var(--text-on-disabled) !important;
+
+      .ds-icon {
+        color: var(--text-on-disabled) !important;
+      }
+    }
+
+    &:disabled.tertiary {
+      background: var(--button-contrast) !important;
+      border: 1px solid var(--border-subtle-2) !important;
+      color: var(--text-disabled) !important;
+
+      .ds-icon {
+        color: var(--text-disabled) !important;
+      }
+
+      > .divider {
+        border: 1px solid var(--border-subtle-2) !important;
+      }
+    }
+
+    &.primary {
+      background: var(--button-primary-default);
+      border: 1px solid var(--button-primary-default);
+
+      &.active {
+        background: var(--button-primary-active);
+        border: 1px solid var(--button-primary-active);
+      }
+
+      &:hover {
+        background: var(--button-primary-hover);
+        border: 1px solid var(--button-primary-hover);
+      }
+    }
+
+    &.secondary {
+      background: var(--button-secondary-default);
+      border: 1px solid var(--button-secondary-default);
+      color: var(--text-on-color-dark);
+
+      .ds-icon {
+        color: var(--text-on-color-dark);
+      }
+
+      &.active {
+        background: var(--button-secondary-default);
+        border: 1px solid var(--button-secondary-default);
+      }
+
+      &:hover {
+        background: var(--button-secondary-hover);
+        border: 1px solid var(--button-secondary-hover);
+      }
+    }
+
+    &.tertiary {
+      background: var(--button-contrast);
+      border: 1px solid var(--border-accent-3);
+      color: var(--text-primary);
+
+      .ds-icon {
+        color: var(--text-primary);
+      }
+
+      > .divider {
+        border-left: 1px solid var(--border-accent-3);
+      }
+
+      &:hover {
+        border: 1px solid var(--border-hover);
+        background: var(--button-secondary-default);
+
+        > .divider {
+          border-left: 1px solid var(--border-hover);
+        }
+      }
+    }
+
+    &.large {
+      @include button-large;
+      height: 48px;
+      padding: 0 var(--spacing-150) 0 var(--spacing-250);
+    }
+
+    &.medium {
+      @include button-medium;
+      height: 40px;
+      padding: 0 var(--spacing-100) 0 var(--spacing-200);
+      gap: 8px;
+
+      .left-side {
+        padding-right: 4px;
+        gap: 4px;
+      }
+    }
+
+    &.small {
+      @include button-small;
+      height: 32px;
+      padding: 0 var(--spacing-050) 0 var(--spacing-150);
+      gap: 4px;
+
+      .left-side {
+        gap: 4px;
+        padding-right: 8px;
+      }
+    }
+
+    &.x-small {
+      @include button-small;
+      height: 24px;
+      padding: 0 var(--spacing-050) 0 var(--spacing-100);
+      gap: 0px;
+
+      .left-side {
+        gap: 4px;
+        padding-right: 12px;
+      }
+    }
+
+    .icon-custom {
+      flex-shrink: 0;
+    }
+
+    .icon-arrow {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      padding: 0;
+    }
+  }
+}

package/dist/basic/DropdownList/DropdownItemList.d.ts

@@ -0,0 +1,16 @@
+import './styles.scss';
+export type DropdownItem = {
+    label: string;
+    value: string | boolean | object;
+    sublabel?: string;
+    icon?: string;
+    tag?: string;
+    image?: string;
+    disabled?: boolean;
+    className?: string;
+};
+export type Props = {
+    item: DropdownItem;
+    onClick: () => void;
+};
+export default function DropdownItemList({ item, onClick }: Props): import("react").JSX.Element;

package/dist/basic/DropdownList/DropdownItemList.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useState } from 'react';
+import Avatar from '../Avatar';
+import Icon from '../Icon';
+import Tag from '../Tag';
+import './styles.scss';
+export default function DropdownItemList({ item, onClick = () => { } }) {
+    const [hover, setHover] = useState(false);
+    const getClassNames = cx('ds-dropdown-itemlist', item.className, {
+        disabled: item.disabled,
+    });
+    return (_jsxs("div", { className: getClassNames, onClick: (e) => {
+            e.stopPropagation();
+            onClick();
+        }, onMouseOver: () => setHover(true), onMouseOut: () => setHover(false), children: [item.icon && (_jsx(Icon, { name: item.icon, size: "x-small", disabled: item.disabled })), item.tag && (_jsx(Tag, { text: item.tag, color: "gray", type: hover ? 'accent' : 'low', size: "small", disabled: item.disabled })), item.image && _jsx(Avatar, { src: item.image, size: "x-small" }), _jsx("span", { className: "label", children: item.label }), item.sublabel && _jsx("span", { className: "sublabel", children: item.sublabel })] }));
+}

package/dist/basic/DropdownList/DropdownList.d.ts

@@ -0,0 +1,9 @@
+import './styles.scss';
+import { DropdownItem } from './DropdownItemList';
+export type Props = {
+    list: DropdownItem[];
+    onSelect: (item: DropdownItem) => void;
+    className?: string;
+    right?: boolean;
+};
+export default function DropdownList({ list, className, onSelect, right, }: Props): import("react").JSX.Element;

package/dist/basic/DropdownList/DropdownList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import './styles.scss';
+import DropdownItemList from './DropdownItemList';
+export default function DropdownList({ list = [], className = '', onSelect, right = true, }) {
+    const getClassNames = cx('ds-dropdown-list', className, {
+        right: right,
+    });
+    return (_jsx("div", { className: getClassNames, children: list.map((item, idx) => (_jsx(DropdownItemList, { item: item, onClick: () => onSelect(item) }, idx.valueOf()))) }));
+}

package/dist/basic/DropdownList/index.d.ts

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

package/dist/basic/DropdownList/index.js

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

package/dist/basic/DropdownList/styles.scss

@@ -0,0 +1,56 @@
+.ds-dropdown-list {
+  position: absolute;
+  top: 100%;
+  z-index: 1000;
+  min-width: 100%;
+  border: 1px solid var(--border-subtle-1);
+  border-radius: var(--radius-050);
+  background: var(--background-default);
+  box-shadow: 0px 8px 18px -6px #18274b1f;
+  max-height: 40vh;
+  overflow-y: auto;
+
+  &.right {
+    right: 0px;
+  }
+}
+
+.ds-dropdown-itemlist {
+  display: flex;
+  align-items: center;
+  background: var(--background-default);
+  padding: var(--spacing-0) var(--spacing-150);
+  min-height: 40px;
+  justify-content: left;
+  white-space: nowrap;
+  cursor: pointer;
+
+  > .label {
+    padding-right: var(--spacing-150);
+    @include label-medium-1;
+  }
+
+  > .ds-icon {
+    margin-right: 8px;
+  }
+
+  .sublabel {
+    @include helper-small-1;
+    margin-left: auto;
+    text-transform: uppercase;
+    padding-left: var(--spacing-150);
+  }
+
+  &.disabled {
+    cursor: default;
+    background: var(--layer-disabled);
+
+    > span {
+      color: var(--text-on-disabled);
+    }
+  }
+
+  &:hover {
+    background: var(--layer-hover-1);
+  }
+}

package/dist/basic/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,13 @@
+import './styles.scss';
+export type Props = {
+    list: DropdownMenuItem[];
+    className?: string;
+};
+export type DropdownMenuItem = {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+};
+export default function DropdownMenu({ list, className }: Props): import("react").JSX.Element;

package/dist/basic/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { useState } from 'react';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import './styles.scss';
+export default function DropdownMenu({ list, className }) {
+    const [open, setOpen] = useState(false);
+    const getClassNames = cx('ds-dropdown-menu', className);
+    const getOptionClassNames = (optionClassName, disabled) => cx('option', optionClassName, { disabled });
+    return (_jsx("div", { className: getClassNames, children: _jsxs("div", { className: "menu", onClick: () => setOpen(!open), children: [_jsx(IconButton, { name: "drag_indicator", mode: "outlined", size: "small", active: open }), open && (_jsx("div", { className: "options", children: list.map((item, idx) => (_jsxs("div", { className: getOptionClassNames(item.className, item.disabled), onClick: () => item.onClick && item.onClick(), children: [item.icon && _jsx(Icon, { name: item.icon, size: "small" }), _jsx("span", { children: item.label })] }, idx.valueOf()))) }))] }) }));
+}

package/dist/basic/DropdownMenu/index.d.ts

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

package/dist/basic/DropdownMenu/index.js

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