nurseitaly-components 0.0.1

package/dist/basic/IconButton/styles.scss

@@ -0,0 +1,192 @@
+.ds-icon-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--radius-050);
+  border: var(--border-0);
+
+  .ds-button-icon-image {
+    display: block;
+    flex-shrink: 0;
+    object-fit: contain;
+  }
+
+  &:disabled {
+    background: var(--layer-disabled) !important;
+    border: var(--border-0) !important;
+  }
+
+  &:disabled.outlined,
+  &:disabled.ghost {
+    background: var(--button-contrast) !important;
+  }
+
+  &:disabled.white {
+    background: transparent !important;
+    border: var(--border-0) !important;
+  }
+
+  &.accent {
+    &.filled {
+      background: var(--button-primary-default);
+
+      &.active {
+        background: var(--button-primary-active);
+      }
+
+      &:hover {
+        background: var(--button-primary-hover);
+      }
+    }
+
+    &.tonal {
+      background: var(--button-secondary-default);
+
+      &.active {
+        background: var(--button-secondary-active);
+      }
+
+      &:hover {
+        background: var(--button-secondary-hover);
+      }
+    }
+
+    &.outlined {
+      background: var(--button-contrast);
+      border: 1px solid var(--border-accent-2);
+
+      &.active {
+        border: var(--border-0);
+      }
+
+      &:hover {
+        border: 1px solid var(--border-hover);
+      }
+    }
+
+    &.ghost {
+      background: var(--button-contrast);
+
+      &.active {
+        border: 1px solid var(--border-only-high-contrast);
+        background: var(--button-secondary-hover);
+      }
+
+      &:hover {
+        background: var(--button-secondary-hover);
+      }
+    }
+  }
+
+  &.danger {
+    &.filled {
+      background: var(--button-danger-default);
+
+      &:hover {
+        background: var(--button-danger-hover);
+      }
+
+      &.active {
+        background: var(--button-danger-active);
+      }
+    }
+
+    &.tonal {
+      background: var(--button-secondary-default);
+
+      &.active {
+        background: var(--button-secondary-active);
+      }
+
+      &:hover {
+        background: var(--button-secondary-hover);
+      }
+    }
+
+    &.outlined {
+      background: var(--button-contrast);
+      border: 1px solid var(--border-error);
+
+      &.active {
+        border: var(--border-0);
+      }
+
+      &:hover {
+        border: 1px solid var(--border-error-hover);
+      }
+    }
+
+    &.ghost {
+      background: var(--button-contrast);
+
+      &.active {
+        border: 1px solid var(--border-only-high-contrast);
+        background: var(--layer-layer-3);
+      }
+
+      &:hover {
+        background: var(--button-secondary-default);
+      }
+    }
+  }
+
+  &.white {
+    &.filled {
+      background: var(--button-tertiary-default);
+
+      &:hover {
+        background: var(--button-tertiary-hover);
+      }
+
+      &.active {
+        background: var(--button-tertiary-active);
+      }
+    }
+
+    &.outlined {
+      background: var(--button-contrast);
+      border: 1px solid var(--border-button-white);
+
+      &.active {
+        border: var(--border-0);
+      }
+    }
+
+    &.ghost {
+      background: var(--button-contrast);
+
+      &.active {
+        background: var(--button-tertiary-active);
+      }
+
+      &:hover {
+        background: var(--button-tertiary-hover);
+      }
+    }
+  }
+
+  &.large {
+    width: 48px;
+    height: 48px;
+  }
+
+  &.medium {
+    width: 40px;
+    height: 40px;
+  }
+
+  &.small {
+    width: 32px;
+    height: 32px;
+  }
+
+  &.x-small {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.ds-icon-button-tooltip {
+  font-size: 16px !important;
+}

package/dist/basic/Pill/Pill.d.ts

@@ -0,0 +1,17 @@
+import './styles.scss';
+export declare const PillSizes: readonly ["large", "medium", "small"];
+type PillDSSizes = (typeof PillSizes)[number];
+export declare const PillTypes: readonly ["outlined", "filled"];
+type PillDSTypes = (typeof PillTypes)[number];
+export type Props = {
+    text: string;
+    icon?: string;
+    className?: string;
+    active?: boolean;
+    size?: PillDSSizes;
+    type?: PillDSTypes;
+    onClick?: () => void;
+    onIconClick?: () => void;
+};
+export default function Pill({ text, icon, className, active, size, type, onClick, onIconClick, }: Props): import("react").JSX.Element;
+export {};

package/dist/basic/Pill/Pill.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import Icon from '../Icon/Icon';
+import './styles.scss';
+export const PillSizes = ['large', 'medium', 'small'];
+export const PillTypes = ['outlined', 'filled'];
+export default function Pill({ text, icon = 'add_circle', className, active, size = 'small', type = 'outlined', onClick, onIconClick, }) {
+    const getClassNames = cx('ds-pill', className, type, size, {
+        active: active,
+    });
+    const getIconSize = () => {
+        if (size === 'large')
+            return 'medium';
+        return 'small';
+    };
+    return (_jsxs("div", { className: getClassNames, onClick: () => onClick && onClick(), children: [_jsx("span", { children: text }), _jsx(Icon, { name: icon, size: getIconSize(), onClick: (e) => {
+                    if (onIconClick) {
+                        e.stopPropagation();
+                        onIconClick();
+                    }
+                } })] }));
+}

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

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

package/dist/basic/Pill/index.js

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

package/dist/basic/Pill/styles.scss

@@ -0,0 +1,70 @@
+.ds-pill {
+  display: flex;
+  align-items: center;
+  border-radius: var(--radius-full);
+  gap: var(--spacing-050);
+  cursor: pointer;
+
+  &.filled {
+    color: var(--text-on-color-light);
+    border: 1px solid var(--tag-blue-accent);
+    background-color: var(--tag-blue-accent);
+
+    .ds-icon {
+      color: var(--text-on-color-light);
+    }
+
+    &:hover {
+      color: var(--text-on-color-accent);
+      background-color: var(--tag-blue-low);
+      border-color: var(--tag-blue-low);
+
+      .ds-icon {
+        color: var(--text-on-color-accent);
+      }
+    }
+
+    &.active {
+      background-color: var(--button-primary-active);
+      border-color: var(--button-primary-active);
+    }
+  }
+
+  &.outlined {
+    color: var(--text-accent);
+    border: 1px solid var(--tag-blue-accent);
+
+    .ds-icon {
+      color: var(--text-accent);
+    }
+
+    &:hover {
+      color: var(--text-accent);
+      background-color: var(--layer-field-hover);
+      border-color: var(--layer-field-hover);
+    }
+
+    &.active {
+      background-color: var(--layer-field-active);
+      border-color: var(--layer-field-active);
+    }
+  }
+
+  &.small {
+    @include tag-small-1;
+    padding: var(--spacing-050) var(--spacing-050) var(--spacing-050)
+      var(--spacing-100);
+  }
+
+  &.medium {
+    @include tag-medium-1;
+    padding: var(--spacing-100) var(--spacing-100) var(--spacing-100)
+      var(--spacing-150);
+  }
+
+  &.large {
+    @include tag-large-1;
+    padding: var(--spacing-100) var(--spacing-150) var(--spacing-100)
+      var(--spacing-200);
+  }
+}

package/dist/basic/SelectField/AsyncSelectField.d.ts

@@ -0,0 +1,21 @@
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import { SelectItem } from './SelectField';
+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;
+    loadOptions: (value: string) => Promise<SelectItem[]>;
+    required?: boolean;
+    multiple?: boolean;
+    freeSolo?: boolean;
+    minQueryLength?: number;
+    onChange?: (attr: string, value: any) => void;
+    noOptionsText?: string;
+};
+export default function AsyncSelectField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ className, attr, label, createdForm, disabled, title, placeholder, loadOptions, required, multiple, freeSolo, minQueryLength, onChange, noOptionsText, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/basic/SelectField/AsyncSelectField.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+import { Autocomplete, CircularProgress, FormControl, TextField, } from '@mui/material';
+import cx from 'classnames';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { selectAutocompleteTheme } from './SelectAutocompleteTheme';
+import './styles.scss';
+const MIN_QUERY_LENGTH = 2;
+const LOAD_DEBOUNCE_MS = 300;
+export default function AsyncSelectField({ className, attr, label, createdForm, disabled, title, placeholder, loadOptions, required, multiple = false, freeSolo = false, minQueryLength = MIN_QUERY_LENGTH, onChange, noOptionsText, }) {
+    const fieldName = attr;
+    const outerTheme = useTheme();
+    const [options, setOptions] = useState([]);
+    const [active, setActive] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [mouseOver, setMouseOver] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const debounceRef = useRef(null);
+    const hasError = () => !!createdForm.formState.errors[attr];
+    const getClassNames = cx('ds-select-text', className, {
+        disabled: disabled,
+    });
+    useEffect(() => {
+        if (debounceRef.current) {
+            clearTimeout(debounceRef.current);
+        }
+        if (inputValue.length < minQueryLength) {
+            setOptions([]);
+            setLoading(false);
+            return;
+        }
+        debounceRef.current = setTimeout(() => {
+            setLoading(true);
+            loadOptions(inputValue)
+                .then((data) => {
+                setOptions(data);
+                setLoading(false);
+            })
+                .catch(() => {
+                setLoading(false);
+            });
+        }, LOAD_DEBOUNCE_MS);
+        return () => {
+            if (debounceRef.current) {
+                clearTimeout(debounceRef.current);
+            }
+        };
+    }, [inputValue, loadOptions, minQueryLength]);
+    useEffect(() => {
+        if (focus || mouseOver) {
+            setActive(true);
+        }
+        else {
+            setActive(false);
+        }
+    }, [focus, mouseOver]);
+    const commitFreeSoloInput = (field, input) => {
+        const trimmed = input.trim();
+        if (!trimmed)
+            return;
+        const current = field.value;
+        if (typeof current === 'string' && current.trim() === trimmed)
+            return;
+        if (current != null &&
+            typeof current === 'object' &&
+            'value' in current &&
+            String(current.value).trim() === trimmed) {
+            return;
+        }
+        field.onChange(trimmed);
+        onChange?.(attr, trimmed);
+    };
+    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectAutocompleteTheme(outerTheme), children: [_jsx(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: _jsx(Autocomplete, { multiple: multiple, freeSolo: freeSolo, disableCloseOnSelect: multiple, value: field.value ?? (multiple ? [] : null), onChange: (_event, newValue) => {
+                                field.onChange(newValue);
+                                onChange?.(attr, newValue);
+                            }, onInputChange: (_event, newInputValue) => {
+                                setInputValue(newInputValue);
+                            }, onFocus: () => setFocus(true), onBlur: (event) => {
+                                setFocus(false);
+                                if (freeSolo && !multiple) {
+                                    const target = event.target;
+                                    commitFreeSoloInput(field, target?.value ?? inputValue);
+                                }
+                            }, onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), options: options, loading: loading, isOptionEqualToValue: (option, value) => {
+                                if (typeof option === 'string' && typeof value === 'string') {
+                                    return option === value;
+                                }
+                                if (typeof option === 'string' || typeof value === 'string') {
+                                    return false;
+                                }
+                                return option.value === value.value;
+                            }, getOptionLabel: (option) => {
+                                if (typeof option === 'string')
+                                    return option;
+                                return option.label || '';
+                            }, noOptionsText: noOptionsText, renderInput: (params) => (_jsx(TextField, { ...params, label: label, variant: "filled", required: required, disabled: disabled, placeholder: placeholder, InputProps: {
+                                    ...params.InputProps,
+                                    endAdornment: (_jsxs(_Fragment, { children: [loading ? _jsx(CircularProgress, { size: 20 }) : null, params.InputProps.endAdornment] })),
+                                }, slotProps: {
+                                    inputLabel: {
+                                        shrink: true,
+                                    },
+                                }, sx: {
+                                    borderColor: disabled
+                                        ? '#BEBFC1'
+                                        : hasError()
+                                            ? '#C6080A'
+                                            : active
+                                                ? '#1C83F4'
+                                                : '#BEBFC1',
+                                    '.MuiInputLabel-root': {
+                                        color: disabled
+                                            ? '#BEBFC1'
+                                            : hasError()
+                                                ? '#C6080A'
+                                                : active
+                                                    ? '#1C83F4'
+                                                    : '#000000',
+                                    },
+                                    '.MuiInputBase-root': {
+                                        minHeight: '48px',
+                                        height: multiple ? 'auto' : '48px',
+                                    },
+                                    '& .MuiInputBase-input': {
+                                        paddingTop: multiple ? '8px' : '16px',
+                                    },
+                                } })) }) }), title && !hasError() && (_jsx("div", { className: "validation-message", children: title })), hasError() && (_jsx("div", { className: "validation-message error", children: createdForm.formState.errors[attr]?.label?.message }))] })) }) }));
+}

package/dist/basic/SelectField/SelectAutocompleteTheme.d.ts

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

package/dist/basic/SelectField/SelectAutocompleteTheme.js

@@ -0,0 +1,78 @@
+import { createTheme } from '@mui/material/styles';
+export const selectAutocompleteTheme = (outerTheme) => createTheme({
+    ...outerTheme,
+    components: {
+        MuiFilledInput: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white',
+                    '&:before': {
+                        display: 'none',
+                    },
+                    '&:after': {
+                        display: 'none',
+                    },
+                },
+            },
+        },
+        MuiAutocomplete: {
+            styleOverrides: {
+                root: {
+                    border: '1px solid #EAEAEB',
+                    borderRadius: '4px',
+                    '& .MuiOutlinedInput-root': {
+                        padding: '0px!important',
+                        '& .MuiAutocomplete-input': {
+                            fontSize: '16px',
+                            fontWeight: '400',
+                            lineHeight: '120%',
+                            fontFamily: 'Work Sans, sans-serif',
+                            '&::placeholder': {
+                                color: '#707276',
+                            },
+                        },
+                    },
+                },
+                option: {
+                    color: '#000000',
+                    fontSize: '16px',
+                    fontWeight: '400',
+                    lineHeight: '120%',
+                    fontFamily: 'Work Sans, sans-serif',
+                    '&:hover': {
+                        backgroundColor: '#f5f5f5',
+                    },
+                },
+            },
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                root: {
+                    paddingLeft: '4px',
+                    color: '#000000',
+                    textTransform: 'uppercase',
+                    fontSize: '12px',
+                    fontWeight: '400',
+                    lineHeight: '100%',
+                    letterSpacing: '0.16px',
+                    fontFamily: 'Work Sans, sans-serif',
+                },
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                root: {
+                    backgroundColor: 'white',
+                    border: '1px solid #EAEAEB',
+                    borderRadius: '4px',
+                    '& .MuiInputAdornment-root': {
+                        marginRight: '24px',
+                    },
+                },
+                notchedOutline: {
+                    border: 'none',
+                },
+            },
+        },
+    },
+});

package/dist/basic/SelectField/SelectField.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+import './styles.scss';
+export type SelectItem = {
+    label: string;
+    value: string | number;
+};
+type DefaultEndAdornmentType = 'close' | 'info';
+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;
+    options: SelectItem[];
+    required?: boolean;
+    showEndAdornment?: boolean;
+    endAdornment?: ReactNode[];
+    defaultEndAdornments?: DefaultEndAdornmentType[];
+    onRemove?: () => void;
+    onChange?: (attr: string, value: any) => void;
+    infoText?: string;
+};
+export default function SelectField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ className, attr, label, createdForm, disabled, title, placeholder, options, required, endAdornment, defaultEndAdornments, showEndAdornment, onRemove, onChange, infoText, }: Props<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
+export {};

package/dist/basic/SelectField/SelectField.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+import { FilledInput, FormControl, InputAdornment, InputLabel, NativeSelect, } from '@mui/material';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import cx from 'classnames';
+import { useEffect, useState } from 'react';
+import { Controller, } from 'react-hook-form';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { selectFieldTheme } from './SelectFieldTheme';
+import './styles.scss';
+export default function SelectField({ className, attr, label, createdForm, disabled, title, placeholder, options = [], required, endAdornment, defaultEndAdornments = ['close'], showEndAdornment = true, onRemove, onChange, infoText, }) {
+    const fieldName = attr;
+    const outerTheme = useTheme();
+    const [active, setActive] = useState(false);
+    const [focus, setFocus] = useState(false);
+    const [mouseOver, setMouseOver] = useState(false);
+    const hasError = () => !!createdForm.formState.errors[attr];
+    const getClassNames = cx('ds-select-text', className, {
+        disabled: disabled,
+    });
+    useEffect(() => {
+        if (focus || mouseOver) {
+            setActive(true);
+        }
+        else {
+            setActive(false);
+        }
+    }, [focus, mouseOver]);
+    const getEndAdornmentIcon = (value) => {
+        const adornments = [];
+        if (defaultEndAdornments.length > 0) {
+            if (defaultEndAdornments.includes('info') && infoText) {
+                const infoTextElement = (_jsx(Icon, { name: "info", size: "small", className: `icon-info pointer ${disabled ? 'd-none' : ''}` }));
+                adornments.push(_jsx(Tooltip, { title: infoText, mode: "simple", children: _jsx("span", { children: infoTextElement }) }, "info"));
+            }
+            if (defaultEndAdornments.includes('close') &&
+                value !== undefined &&
+                onRemove) {
+                adornments.push(_jsx(Icon, { name: "close", size: "small", className: `${disabled ? 'd-none' : ''} pointer`, onClick: () => onRemove && onRemove() }, "close"));
+            }
+        }
+        if (endAdornment && endAdornment.length > 0) {
+            adornments.push(...endAdornment);
+        }
+        if (adornments.length === 0) {
+            return null;
+        }
+        if (adornments.length === 1) {
+            return adornments[0];
+        }
+        return _jsx("div", { className: "ds-end-adornments", children: adornments });
+    };
+    return (_jsx("div", { className: getClassNames, children: _jsx(Controller, { name: fieldName, control: createdForm.control, render: ({ field }) => (_jsxs(ThemeProvider, { theme: selectFieldTheme(outerTheme, {
+                    hasLabel: !!label,
+                    hasAddornments: !!endAdornment,
+                }), children: [_jsxs(FormControl, { fullWidth: true, variant: "filled", disabled: disabled, children: [label && (_jsx(InputLabel, { htmlFor: `${attr}-select`, shrink: true, sx: {
+                                    color: disabled
+                                        ? '#BEBFC1'
+                                        : hasError()
+                                            ? '#C6080A'
+                                            : active
+                                                ? '#1C83F4'
+                                                : '#000000',
+                                }, children: `${label}${required ? ' *' : ''}` })), _jsxs(NativeSelect, { ...field, id: `${attr}-select`, value: field.value ?? '', fullWidth: true, required: required, disabled: disabled, variant: "filled", onFocus: () => setFocus(true), onBlur: () => setFocus(false), onMouseOver: () => setMouseOver(true), onMouseOut: () => setMouseOver(false), onChange: (event) => {
+                                    const value = event.target.value;
+                                    field.onChange(value);
+                                    onChange && onChange(attr, value || null);
+                                }, input: _jsx(FilledInput, { endAdornment: showEndAdornment && (_jsx(InputAdornment, { position: "end", children: getEndAdornmentIcon(field.value) })), sx: {
+                                        borderColor: disabled
+                                            ? '#BEBFC1'
+                                            : hasError()
+                                                ? '#C6080A!important'
+                                                : active
+                                                    ? '#1C83F4!important'
+                                                    : '#BEBFC1!important',
+                                        backgroundColor: disabled
+                                            ? '#BEBFC1!important'
+                                            : '#FFFFFF!important',
+                                    } }), children: [_jsx("option", { value: "", children: placeholder || '\u00a0' }), options.map((option, idx) => (_jsx("option", { value: option.value, children: option.label }, idx.valueOf())))] })] }), title && !hasError() && _jsx("div", { className: "helper", children: title }), hasError() && (_jsx("div", { className: "helper error", children: String(createdForm.formState.errors[attr]?.message) }))] })) }) }));
+}

package/dist/basic/SelectField/SelectFieldTheme.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@mui/material/styles';
+type SelectFieldThemeOptions = {
+    hasLabel?: boolean;
+    hasAddornments?: boolean;
+};
+export declare const selectFieldTheme: (outerTheme: Theme, { hasLabel, hasAddornments: hasAddorments, }?: SelectFieldThemeOptions) => Theme;
+export {};