@mistertemp/libs-front-shared 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+## [1.1.1](https://github.com/mistertemp/shared-libs-front/compare/@mistertemp/libs-front-shared@1.1.0...@mistertemp/libs-front-shared@1.1.1) (2025-05-05)
+
+
+### Bug Fixes
+
+* publish ([#450](https://github.com/mistertemp/shared-libs-front/issues/450)) ([caf27e3](https://github.com/mistertemp/shared-libs-front/commit/caf27e3519662eb4a66d55317ba0315b442b9aa2))
+
+## [1.1.0](https://github.com/mistertemp/shared-core-components/compare/@mistertemp/libs-front-shared-v1.0.0...@mistertemp/libs-front-shared@1.1.0) (2025-05-05)
+
+
+### Features
+
+* deploy everything kaboom ([67c63d4](https://github.com/mistertemp/shared-core-components/commit/67c63d4e680a844966a8aff7d25aab4da0e97574))

package/README.md

@@ -0,0 +1,18 @@
+# @mistertemp/common-core-components
+
+## 1.3.0
+
+### Components
+- **CopyToClipboard** added
+
+## 1.2.0
+### Features
+- **ControlledInputDate**: add min and max date handling
+
+## 1.1.0
+### Components
+- **ControlledInputTime** for compatibility with react-hook-form
+
+## 1.0.0
+### Components
+- **ControlledInputDate** for compatibility with react-hook-form

package/index.ts

@@ -0,0 +1,3 @@
+export * from './src/components';
+export * from './src/hooks';
+export * from './src/typings';

package/package.json

@@ -0,0 +1,100 @@
+{
+    "name": "@mistertemp/libs-front-shared",
+    "version": "1.1.1",
+    "main": "index.ts",
+    "license": "UNLICENSED",
+    "scripts": {
+        "demo": "vite --config ./demo/vite.config.ts",
+        "lint": "eslint --cache . --ext .ts  --ext .tsx",
+        "lint:fix": "eslint . --ext .ts  --ext .tsx --fix",
+        "lint-style": "stylelint '**/*.scss'",
+        "lint-style:fix": "stylelint '**/*.scss' --fix",
+        "type-check": "tsc --noEmit",
+        "test": "NODE_ENV=test ENV=local jest --config=./.jest/jest.config.json",
+        "test:watch": "NODE_ENV=test ENV=test jest --watch --config=./jest.config.json --rootDir=."
+    },
+    "eslintConfig": {
+        "extends": "./.eslintrc"
+    },
+    "prettier": "./.prettierrc.json",
+    "stylelint": {
+        "extends": "./.stylelintrc"
+    },
+    "devDependencies": {
+        "@axe-core/react": "4.10.0",
+        "@mistertemp/design-system": "12.0.0",
+        "@mistertemp/libs-work-environments": "0.8.1",
+        "@mistertemp/types-shared": "2.2.0",
+        "@testing-library/dom": "10.4.0",
+        "@testing-library/jest-dom": "6.6.2",
+        "@testing-library/react": "12.1.5",
+        "@testing-library/user-event": "14.6.1",
+        "@types/jest": "29.5.7",
+        "@types/lodash": "4.17.4",
+        "@types/react": "17.0.52",
+        "@types/react-dom": "17.0.18",
+        "@types/react-router-dom": "5.3.3",
+        "@types/react-test-renderer": "^18.0.7",
+        "@types/react-transition-group": "4.4.10",
+        "@typescript-eslint/eslint-plugin": "7.18.0",
+        "@typescript-eslint/parser": "7.18.0",
+        "@vitejs/plugin-react-swc": "3.9.0",
+        "date-fns": "2.30.0",
+        "eslint": "8.57.0",
+        "eslint-config-prettier": "9.1.0",
+        "eslint-plugin-import": "2.31.0",
+        "eslint-plugin-jsx-a11y": "6.10.0",
+        "eslint-plugin-prettier": "5.2.1",
+        "eslint-plugin-react": "7.37.1",
+        "eslint-plugin-react-hooks": "4.6.0",
+        "eslint-plugin-simple-import-sort": "12.1.0",
+        "eslint-plugin-testing-library": "6.5.0",
+        "fuse.js": "7.0.0",
+        "i18next": "23.15.1",
+        "i18next-browser-languagedetector": "8.0.4",
+        "i18next-http-backend": "2.6.1",
+        "identity-obj-proxy": "3.0.0",
+        "jest-environment-jsdom": "29.7.0",
+        "lodash": "4.17.21",
+        "prettier": "3.4.1",
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "react-hook-form": "7.53.0",
+        "react-i18next": "14.1.0",
+        "react-router-dom": "6.28.0",
+        "react-transition-group": "4.4.5",
+        "sass": "1.87.0",
+        "stylelint": "16.19.1",
+        "stylelint-config-idiomatic-order": "10.0.0",
+        "stylelint-config-standard-scss": "14.0.0",
+        "stylelint-prettier": "5.0.3",
+        "ts-jest": "29.2.3",
+        "ts-node": "10.9.1",
+        "typescript": "5.7.2",
+        "vite": "6.3.4",
+        "vite-plugin-environment": "1.1.3",
+        "vite-plugin-svgr": "4.3.0"
+    },
+    "peerDependencies": {
+        "@mistertemp/design-system": ">=12.0.0",
+        "@mistertemp/libs-work-environments": "^0.8.1",
+        "i18next": "^23.5.0",
+        "i18next-browser-languagedetector": ">=8.0.0",
+        "i18next-http-backend": ">=2.2.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "react-i18next": "^14.0.0 || ^15.0.0"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    }
+}

package/src/components/ControlledInputDate/ControlledInputDate.tsx

@@ -0,0 +1,82 @@
+import { Input, InputProps } from '@mistertemp/design-system';
+import { format, parse } from 'date-fns';
+import React from 'react';
+import { Controller, FieldPath, FieldValues, UseControllerProps } from 'react-hook-form';
+
+const controlledInputDateDefaultFormat = 'dd/MM/yyyy';
+
+const toDateInputValue = (formDateValue: string | null | undefined, dateFormat: string) =>
+    formDateValue
+        ? format(parse(formDateValue, dateFormat, new Date()), controlledInputDateDefaultFormat)
+        : '';
+
+const toDateFormValue = (valueAsDate: Date | null | undefined, dateFormat: string) =>
+    valueAsDate ? format(valueAsDate, dateFormat) : '';
+
+export type ControlledInputDateProps<
+    TFieldValues extends FieldValues,
+    TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> & {
+    inputProps: Omit<InputProps, 'inputType' | 'value'>;
+    format?: string;
+    minErrorMessage?: string;
+    maxErrorMessage?: string;
+};
+
+export const ControlledInputDate = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    inputProps: { onChange: externalOnChange, ...otherInputProps },
+    format = controlledInputDateDefaultFormat,
+    maxErrorMessage = 'max exceeded',
+    minErrorMessage = 'min exceeded',
+    ...controllerProps
+}: ControlledInputDateProps<TFieldValues, TName>) => (
+    <Controller
+        {...controllerProps}
+        rules={{
+            ...controllerProps.rules,
+            max: otherInputProps.max
+                ? {
+                      value: otherInputProps.max,
+                      message: maxErrorMessage,
+                  }
+                : undefined,
+            min: otherInputProps.min
+                ? {
+                      value: otherInputProps.min,
+                      message: minErrorMessage,
+                  }
+                : undefined,
+        }}
+        render={({ field: { value, onChange, ...fieldProps }, fieldState: { error } }) => (
+            <Input
+                {...fieldProps}
+                inputType="date"
+                value={toDateInputValue(value, format)}
+                onChange={(e) => {
+                    const formValue = toDateFormValue(e.target.valueAsDate, format);
+
+                    onChange(formValue);
+
+                    externalOnChange?.({
+                        target: {
+                            name: fieldProps.name,
+                            type: 'date',
+                            value: formValue,
+                            valueAsDate: e.target.valueAsDate,
+                        },
+                    });
+                }}
+                hint={
+                    error?.type == 'max' || error?.type == 'min'
+                        ? error.message
+                        : otherInputProps.hint
+                }
+                hasError={!!error}
+                {...otherInputProps}
+            />
+        )}
+    />
+);

package/src/components/ControlledInputDate/__tests__/ControlledInputDate.unit.test.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { act, fireEvent, render, screen } from '../../../../.jest/reactTestingLibrary.config';
+import { ControlledInputDate } from '../ControlledInputDate';
+
+describe('Components => ControlledInputDate', () => {
+    const FormComponent = ({
+        testId,
+        value,
+        onChange,
+    }: {
+        testId: string;
+        value?: string;
+        onChange?: (value: string) => void;
+    }) => {
+        const { control, setValue, getValues, watch } = useForm<{ date: string }>({
+            defaultValues: { date: '' },
+        });
+
+        useEffect(() => {
+            if (value) {
+                setValue('date', value);
+            }
+        }, [value]);
+
+        useEffect(() => {
+            onChange?.(getValues('date'));
+        }, [watch('date')]);
+
+        return (
+            <ControlledInputDate
+                control={control}
+                name="date"
+                inputProps={{
+                    'data-testid': testId,
+                    type: 'primary',
+                    size: 'sm',
+                }}
+            />
+        );
+    };
+
+    it('should render', () => {
+        render(<FormComponent testId="test" />);
+
+        expect(screen.getByTestId('test')).toBeInTheDocument();
+        expect(screen.getByTestId('test+input')).toBeInTheDocument();
+    });
+
+    it('should apply value', () => {
+        render(<FormComponent testId="test" value="01/01/1999" />);
+        expect(screen.getByTestId('test+input')).toBeInTheDocument();
+        expect(screen.getByTestId('test+input')).toHaveValue('01/01/1999');
+    });
+
+    it('should handle onChange', async () => {
+        const onChange = jest.fn();
+
+        render(<FormComponent testId="test" onChange={onChange} />);
+
+        const input = screen.getByTestId('test+input');
+
+        expect(input).toBeInTheDocument();
+
+        // eslint-disable-next-line testing-library/no-unnecessary-act
+        await act(async () => {
+            await userEvent.type(input, '2/2/22');
+            fireEvent.focusOut(input);
+        });
+
+        expect(input).toHaveValue('02/02/2022');
+        expect(onChange).toHaveBeenCalledWith('02/02/2022');
+    });
+});

package/src/components/ControlledInputDate/index.ts

@@ -0,0 +1 @@
+export * from './ControlledInputDate';

package/src/components/ControlledInputTime/ControlledInputTime.tsx

@@ -0,0 +1,70 @@
+import { Input, InputProps } from '@mistertemp/design-system';
+import { DEFAULT_TIME_SEPARATOR } from '@mistertemp/design-system/src/components/design-system/Input/InputTime/InputTime.utils';
+import React from 'react';
+import { Controller, FieldPath, FieldValues, UseControllerProps } from 'react-hook-form';
+
+const controlledInputTimeDefaultSeparator = ':';
+
+const toTimeInputValue = (
+    formTimeValue: string | null | undefined,
+    inputSeparator: string,
+    dataSeparator: string,
+) => {
+    return formTimeValue?.replace(dataSeparator, inputSeparator) ?? '';
+};
+
+const toTimeFormValue = (
+    inputValue: string | null | undefined,
+    inputSeparator: string,
+    dataSeparator: string,
+) => {
+    return inputValue?.replace(inputSeparator, dataSeparator) ?? '';
+};
+
+export type ControlledInputTimeProps<
+    TFieldValues extends FieldValues,
+    TName extends FieldPath<TFieldValues>,
+> = UseControllerProps<TFieldValues, TName> & {
+    inputProps: Omit<InputProps, 'inputType' | 'value'>;
+    separator?: string;
+};
+
+export const ControlledInputTime = <
+    TFieldValues extends FieldValues = FieldValues,
+    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+    inputProps: {
+        onChange: externalOnChange,
+        timeSeparator = DEFAULT_TIME_SEPARATOR,
+        ...otherInputProps
+    },
+    separator = controlledInputTimeDefaultSeparator,
+    ...controllerProps
+}: ControlledInputTimeProps<TFieldValues, TName>) => (
+    <Controller
+        {...controllerProps}
+        render={({ field: { value, onChange, ...fieldProps }, fieldState: { error } }) => (
+            <Input
+                {...fieldProps}
+                inputType="time"
+                timeSeparator={timeSeparator}
+                value={toTimeInputValue(value, timeSeparator, separator)}
+                onChange={(e) => {
+                    const formValue = toTimeFormValue(e.target.value, timeSeparator, separator);
+
+                    onChange(formValue);
+
+                    externalOnChange?.({
+                        target: {
+                            name: fieldProps.name,
+                            type: 'string',
+                            value: formValue,
+                        },
+                    });
+                }}
+                hasError={!!error}
+                {...otherInputProps}
+            />
+        )}
+    />
+);

package/src/components/ControlledInputTime/__tests__/ControlledInputTime.unit.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+
+import { act, render, screen } from '../../../../.jest/reactTestingLibrary.config';
+import { ControlledInputTime } from '../ControlledInputTime';
+
+describe('Components => ControlledInputTime', () => {
+    const FormComponent = ({
+        testId,
+        value,
+        dataSeparator,
+        inputSeparator,
+        onChange,
+    }: {
+        testId: string;
+        value?: string;
+        dataSeparator?: string;
+        inputSeparator?: string;
+        onChange?: (value: string) => void;
+    }) => {
+        const { control, setValue, getValues, watch } = useForm<{ time: string }>({
+            defaultValues: { time: '' },
+        });
+
+        useEffect(() => {
+            if (value) {
+                setValue('time', value);
+            }
+        }, [value]);
+
+        useEffect(() => {
+            onChange?.(getValues('time'));
+        }, [watch('time')]);
+
+        return (
+            <ControlledInputTime
+                control={control}
+                name="time"
+                separator={dataSeparator}
+                inputProps={{
+                    'data-testid': testId,
+                    type: 'primary',
+                    size: 'sm',
+                    timeSeparator: inputSeparator,
+                }}
+            />
+        );
+    };
+
+    it('should render', () => {
+        render(<FormComponent testId="test" />);
+
+        expect(screen.getByTestId('test')).toBeInTheDocument();
+        expect(screen.getByTestId('test+input')).toBeInTheDocument();
+    });
+
+    it('should apply value', () => {
+        render(<FormComponent testId="test" value="10:10" />);
+        expect(screen.getByTestId('test+input')).toBeInTheDocument();
+        expect(screen.getByTestId('test+input')).toHaveValue('10:10');
+    });
+
+    it('should handle onChange', async () => {
+        const onChange = jest.fn();
+
+        render(<FormComponent testId="test" onChange={onChange} />);
+
+        const input = screen.getByTestId('test+input');
+
+        expect(input).toBeInTheDocument();
+
+        // eslint-disable-next-line testing-library/no-unnecessary-act
+        await act(async () => {
+            await userEvent.type(input, '2020');
+        });
+
+        expect(input).toHaveValue('20:20');
+        expect(onChange).toHaveBeenCalledWith('20:20');
+    });
+
+    it('should handle different separators between input and data', async () => {
+        const onChange = jest.fn();
+
+        render(
+            <FormComponent
+                testId="test"
+                dataSeparator="LL"
+                inputSeparator="-"
+                onChange={onChange}
+            />,
+        );
+
+        const input = screen.getByTestId('test+input');
+
+        expect(input).toBeInTheDocument();
+
+        // eslint-disable-next-line testing-library/no-unnecessary-act
+        await act(async () => {
+            await userEvent.type(input, '2020');
+        });
+
+        expect(input).toHaveValue('20-20');
+        expect(onChange).toHaveBeenCalledWith('20LL20');
+    });
+});

package/src/components/ControlledInputTime/index.ts

@@ -0,0 +1 @@
+export * from './ControlledInputTime';

package/src/components/CopyToClipboard/CopyToClipboard.tsx

@@ -0,0 +1,61 @@
+import {
+    Button,
+    DuplicateSvg,
+    SvgIcon,
+    ToastContext,
+    ToastProps,
+    ToastType,
+} from '@mistertemp/design-system';
+import React, { MouseEvent, useContext } from 'react';
+
+export type CopyToClipboardProps = {
+    value?: string | null;
+    className?: string;
+    icon?: SvgIcon;
+    toast?: string | Omit<ToastProps, 'id'>;
+    onCopy?: (event: MouseEvent<Element>, value: string) => void;
+    'data-testid'?: string;
+};
+
+export const CopyToClipboard = ({
+    value,
+    className,
+    icon = DuplicateSvg,
+    toast,
+    onCopy,
+    'data-testid': dataTestId = 'copyToClipboard',
+}: CopyToClipboardProps) => {
+    const toastContext = useContext(ToastContext);
+
+    const showToast = () => {
+        if (toastContext && toast) {
+            const toastProps =
+                typeof toast === 'string'
+                    ? {
+                          type: ToastType.SUCCESS,
+                          title: toast,
+                      }
+                    : toast;
+
+            toastContext.enqueue(toastProps);
+        }
+    };
+
+    const copyToClipboard = async (event: MouseEvent<Element>) => {
+        if (value) {
+            await navigator.clipboard.writeText(value);
+            showToast();
+            onCopy?.(event, value);
+        }
+    };
+
+    return (
+        <Button
+            className={className}
+            onClick={copyToClipboard}
+            data-testid={dataTestId}
+            size="xsmall"
+            leftIcon={icon}
+        />
+    );
+};

package/src/components/CopyToClipboard/__tests__/CopyToClipboard.unit.test.tsx

@@ -0,0 +1,54 @@
+import userEvent, { UserEvent } from '@testing-library/user-event';
+import React from 'react';
+
+import { render, screen } from '../../../../.jest/reactTestingLibrary.config';
+import { CopyToClipboard } from '../CopyToClipboard';
+
+describe('Components => CopyToClipboard', () => {
+    let user: UserEvent;
+
+    beforeEach(async () => {
+        // Setup clipboard
+        user = userEvent.setup();
+    });
+
+    it('should render', () => {
+        render(<CopyToClipboard data-testid="test" />);
+
+        expect(screen.getByTestId('test')).toBeInTheDocument();
+    });
+
+    it('should handle classNames', () => {
+        render(<CopyToClipboard data-testid="test" className="className" />);
+
+        expect(screen.getByTestId('test')).toHaveClass('className');
+    });
+
+    it('should handle copy to clipboard', async () => {
+        const onCopy = jest.fn();
+        const valueToCopy = 'hello world!';
+
+        render(<CopyToClipboard data-testid="test" value={valueToCopy} onCopy={onCopy} />);
+
+        await user.click(screen.getByTestId('test'));
+
+        const clipboardValue = await navigator.clipboard.readText();
+
+        expect(clipboardValue).toEqual(valueToCopy);
+        expect(onCopy).toHaveBeenCalledWith(expect.any(Object), valueToCopy);
+    });
+
+    it('should handle missing value', async () => {
+        const onCopy = jest.fn();
+        const valueToCopy = null;
+
+        render(<CopyToClipboard data-testid="test" value={valueToCopy} onCopy={onCopy} />);
+
+        await user.click(screen.getByTestId('test'));
+
+        const clipboardValue = await navigator.clipboard.readText();
+
+        expect(clipboardValue).toEqual('');
+        expect(onCopy).not.toHaveBeenCalled();
+    });
+});

package/src/components/CopyToClipboard/index.ts

@@ -0,0 +1 @@
+export * from './CopyToClipboard';

package/src/components/DateFilter/DateFilter.module.scss

@@ -0,0 +1,4 @@
+.dropdown {
+    height: fit-content;
+    max-height: unset;
+}