@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/kit/NLTFilesDropZone/imageList/index.tsx

@@ -0,0 +1,86 @@
+// TODO: check next code
+/* eslint-disable */
+// @ts-nocheck
+
+import { ArrowDownToLine, X } from "lucide-react";
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import { convertBytesToMB } from '@/lib/file.utils.ts';
+
+interface IProps {
+    isFile?: boolean;
+    files: any[];
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>, fileName: string) => void;
+};
+
+export const ImageList: React.FC<IProps> = ({ files, onRemove }) => {
+    const { t } = useTranslation('common');
+
+    return (
+        <ul className="list-none m-0 p-0 w-full">
+            {files.map((file, index) => {
+              const name = file.name ? file.name : file.original_name;
+              const fileOrId = file.extension ? file.id : file;
+              const fileId = file.id || file.name;
+
+              return (
+                <li
+                    key={file.id ? file.id : file.name + index}
+                    className="flex items-center justify-between gap-2.5 p-2 border border-border rounded-md mb-2 bg-card"
+                >
+                    <RenderMediaPreview file={file} />
+                    <div className="grow mr-2 text-left">
+                        {name && <p className="m-0 text-sm font-bold">{name}</p>}
+                        {file?.size && <p className="m-0 text-xs text-gray-500">{convertBytesToMB(file?.size)}</p>}
+                    </div>
+                    <div className="flex gap-2">
+                        <button
+                            // onClick={(e) => { e.stopPropagation(); handleDownloadFile(fileOrId, name)}}
+                            type='button'
+                            // disabled={loadingFiles[fileId]}
+                            // className={classNames("bg-transparent border-none text-lg cursor-pointer w-6 h-6 transition", {
+                            //     'opacity-40' : loadingFiles[fileId]
+                            // })}
+                            title={t("button.load")}
+                        >
+                            <ArrowDownToLine />
+                        </button>
+                        <button
+                            onClick={(e) => { e.stopPropagation(); onRemove?.(e, file.id ? file.id : name) }}
+                            className="bg-transparent border-none text-lg cursor-pointer w-6 h-6"
+                            title={t("button.delete")}
+                            type='button'
+                        >
+                            <X />
+                        </button>
+                    </div>
+                </li>
+            );})}
+        </ul>
+    );
+};
+
+const RenderMediaPreview = ({ file }: { file: any }) => {
+    const path = file.extension ? file.extension : file.path.match(/\.([a-zA-Z0-9]+)$/)?.[1];
+    let imagePath = '';
+
+    switch (path) {
+        case 'docx':
+            imagePath = '/extensions/doc.svg';
+            break;
+        case 'pdf':
+            imagePath = '/extensions/pdf.svg';
+            break;
+        case 'png':
+        case 'jpg':
+        case 'jpeg':
+            imagePath = file.extension ? file.path : URL.createObjectURL(file);
+            break;
+    }
+
+
+    return <picture className='block w-10 h-10 rounded overflow-hidden'>
+        <img className="w-full h-full object-contain" src={imagePath} alt={`${file.name ? file.name : file.original_name} extension`}/>
+    </picture>;
+};

package/kit/NLTFilesDropZone/index.tsx

@@ -0,0 +1,52 @@
+import { Upload } from "lucide-react";
+import { FC, MouseEvent, useMemo } from "react";
+import { DropzoneOptions, FileRejection, useDropzone } from "react-dropzone";
+import { useTranslation } from "react-i18next";
+
+import { ImageList } from "./imageList";
+
+export interface IProps extends DropzoneOptions {
+    label?: string;
+    isFile?: boolean;
+    acceptedFileTypes?: string[];
+    maxSizeMB?: number;
+    files: any[];
+    onDrop: (acceptedFiles: File[], rejectedFiles: FileRejection[]) => void;
+    onRemove: (event: MouseEvent<HTMLButtonElement>, fileName: string) => void;
+};
+
+export const NLTFilesDropZone: FC<IProps> = ({ maxSizeMB = 5, acceptedFileTypes = ['image/png', 'image/jpeg', 'application/pdf', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'], ...other }) => {
+    const { t } = useTranslation("common");
+
+    const accept = useMemo(() => {
+        return acceptedFileTypes.reduce((acc, fileType) => {
+            acc[fileType] = [];
+            return acc;
+        }, {} as Record<string, string[]>);
+    }, [acceptedFileTypes]);
+
+    const { getRootProps, getInputProps } = useDropzone({ ...other, maxSize: maxSizeMB * 1024 * 1024, accept, });
+
+    return (
+        <div>
+            <div
+                {...getRootProps()}
+                className={`flex flex-col items-center justify-center p-5 border-2 border-dashed rounded-md transition-colors duration-200 text-foreground cursor-pointer text-center w-full mb-5 mt-2`}
+            >
+                <input {...getInputProps()} />
+                <div className="p-3">
+                    <Upload className="w-10 h-10 mx-auto mb-2" />
+                </div>
+                <div className="w-full text-gray-500 p-4 pb-6">
+                    <p className="w-full break-words">{t('acceptableFileTypes') + 'PNG, JPG, PDF або DOCX'}</p>
+                    <p className="w-full break-words">{t('maxSize') + maxSizeMB + ' MB'}</p>
+                </div>
+                <ImageList
+                    files={other.files}
+                    onRemove={other.onRemove}
+                    isFile={other.isFile}
+                />
+            </div>
+        </div>
+    );
+};

package/kit/NLTFormDateRangePicker/index.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/UIKit/shadcn/form/form";
+import { DatePickerWithRange } from "@/UIKit/shadcn/date-range-picker/date-range-picker";
+
+interface DatePickerWithRangeProps {
+    form: any;
+    formLabel: string;
+    name: string;
+};
+
+export function NLTFormDateRangePicker({ form, name, formLabel }: DatePickerWithRangeProps) {
+
+    return (
+        <FormField
+            control={form.control}
+            name={name}
+            render={({ field }: any) => (
+                <FormItem>
+                    <FormLabel>{formLabel}</FormLabel>
+                    <FormControl>
+                        <DatePickerWithRange {...field} />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    )
+};

package/kit/NLTFormFilesDropZone/index.tsx

@@ -0,0 +1,73 @@
+// TODO: check next code
+/* eslint-disable */
+// @ts-nocheck
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FC } from "react";
+import { FileRejection } from 'react-dropzone';
+import { Controller } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/UIKit/shadcn/form";
+import { NLTFilesDropZone } from "../NLTFilesDropZone";
+
+interface NLTFormDropZoneProps{
+    form: any;
+    name: string;
+    formLabel?: string;
+};
+
+export const NLTFormFilesDropZone: FC<NLTFormDropZoneProps> = ({ form, name, formLabel, ...other }) => {
+    const maxFiles = 5;
+    const maxSizeMB = 5;
+    const { t } = useTranslation("common");
+
+    return (
+        <FormField
+            control={form.control}
+            name={name}
+             
+            render={({ field }: any) => (
+                <FormItem>
+                    <FormLabel>{formLabel}</FormLabel>
+                    <FormControl>
+                        <Controller
+                            control={form.control}
+                            name={name}
+                            render={({ field }) => (
+                                <NLTFilesDropZone
+                                    {...other}
+                                    maxFiles={maxFiles}
+                                    files={field.value || []}
+                                    onDrop={(acceptedFiles: File[], rejectedFiles: FileRejection[]) => {
+                                        const currentFiles = Array.isArray(field.value) ? field.value : [];
+
+                                        if (field.value.length + acceptedFiles.length + rejectedFiles.length > maxFiles) {
+                                            alert(`${t('maxFilesExceeded')} ${maxFiles}`);
+                                            return;
+                                        }
+
+                                        const totalCurrentSize = currentFiles.reduce((sum, file: File) => sum + file.size, 0);
+                                        const totalNewSize = acceptedFiles.reduce((sum, file) => sum + file.size, totalCurrentSize);
+
+                                        if (totalNewSize > maxSizeMB * 1024 * 1024) {
+                                            alert(`${t("maxSize")} ${maxSizeMB} MB`);
+                                            return;
+                                        }
+
+                                        const updatedFiles = [...currentFiles, ...acceptedFiles];
+                                        field.onChange(updatedFiles);
+                                    }}
+                                    onRemove={(e, fileName) => {
+                                        const updatedFiles = field.value.filter((file: any) => file.id ? file.id !== fileName : file.name !== fileName);
+                                        field.onChange(updatedFiles);
+                                    }}
+                                />
+                            )}
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+};

package/kit/NLTFormPhoneField/index.tsx

@@ -0,0 +1,36 @@
+import { FC } from "react"
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/UIKit/shadcn/form/form";
+import { Input } from "@/UIKit/shadcn/input/input";
+import InputMask from 'react-input-mask';
+
+interface IProps {
+    form: any;
+    formLabel: string;
+    name: string;
+    placeholder?: string;
+    mask: string;
+};
+
+export const NLTFormPhoneField: FC<IProps> = ({ form, formLabel, name, placeholder, mask }) => {
+    return (
+        <FormField
+            control={form.control}
+            name={name}
+            render={({ field }) => (
+                <FormItem>
+                    <FormLabel>{formLabel}</FormLabel>
+                    <FormControl>
+                        <InputMask
+                            mask={mask}
+                            maskChar={null}
+                            {...field}
+                        >
+                            {(inputProps) => <Input placeholder={placeholder} {...inputProps} />}
+                        </InputMask>
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    )
+};

package/kit/NLTFormPhoneInput/index.tsx

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { NLTPhoneInput } from '../NLTPhoneInput';
+import { FormField, FormItem, FormLabel, FormControl, FormMessage } from '@/UIKit/shadcn/form/form';
+
+interface NLTPhoneInputProps {
+    form: any;
+    formLabel?: string;
+    placeholder?: string;
+    name: string;
+}; 
+
+export const NLTFormPhoneInput: FC<NLTPhoneInputProps> = ({ form, formLabel, name, placeholder }) => {
+    return (
+        <FormField
+            control={form.control}
+            name={name}
+            render={({ field }: any) => (
+                <FormItem>
+                    <FormLabel>{formLabel}</FormLabel>
+                    <FormControl>
+                        <NLTPhoneInput
+                            value={field.value}
+                            placeholder={placeholder}
+                            onChange={field.onChange} 
+                        />
+                    </FormControl>
+                    <FormMessage />
+                </FormItem>
+            )}
+        />
+    );
+};

package/kit/NLTImageDropZone/index.tsx

@@ -0,0 +1,105 @@
+import { Upload, X } from 'lucide-react';
+import { observer } from 'mobx-react';
+import { FC, useCallback, useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
+
+import { Button } from '@/UIKit/shadcn/button';
+import { Card, CardContent } from '@/UIKit/shadcn/card';
+import { Label } from '@/UIKit/shadcn/label';
+import docImage from '../../assets/files/doc.png';
+import pdfImage from '../../assets/files/pdf.png';
+import txtImage from '../../assets/files/txt.png';
+import undefinedImage from '../../assets/files/undefined.png';
+import xlsImage from '../../assets/files/xlsx.png';
+import zipImage from '../../assets/files/zip.png';
+
+interface IProps {
+    onImageUpload: (file: File | null) => void
+    label?: string
+    maxSizeMB?: number
+    acceptedFileTypes?: string[]
+}
+
+const PREVIEWS = {
+    'text/plain': txtImage,
+    'application/pdf': pdfImage,
+    'application/msword': docImage,
+    'application/document': docImage,
+    'application/vnd.ms-excel': xlsImage,
+    'application/sheet': xlsImage,
+    'application/zip': zipImage,
+    undefined: undefinedImage,
+};
+
+export const NLTImageDropZone: FC<IProps> = observer(({ label, onImageUpload, maxSizeMB = 6, acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif'] }) => {
+    const { t } = useTranslation('common');
+    const [preview, setPreview] = useState<string | null>(null);
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        const file = acceptedFiles[0];
+        if (file && file.size <= maxSizeMB * 1024 * 1024) {
+            onImageUpload(file);
+            const reader = new FileReader();
+            console.log('NLTImageDropZone', file.type);
+            // @ts-ignore
+            if (PREVIEWS[file?.type]) {
+                // @ts-ignore
+                setPreview(PREVIEWS[file.type]);
+                return;
+            }
+            reader.onloadend = () => {
+                setPreview(reader.result as string);
+            };
+            reader.readAsDataURL(file);
+        } else {
+            alert(`${t('fileSizeAlert')} ${maxSizeMB}MB`);
+        }
+    }, [maxSizeMB, onImageUpload]);
+
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: acceptedFileTypes.reduce((acc, curr) => ({ ...acc, [curr]: [] }), {}),
+        maxFiles: 1
+    });
+
+    const removeImage = (e: any) => {
+        e.stopPropagation();
+        setPreview(null);
+        onImageUpload(null);
+    };
+
+    return (
+        <Card className="min:w-[300px]">
+            <CardContent className="p-4">
+                <Label htmlFor="image-upload">{label || t('uploadImage')}</Label>
+                <div
+                    {...getRootProps()}
+                    className={`mt-2 ${preview ? '' : 'border-2'} border-dashed rounded-lg text-center cursor-pointer h-[200px] flex items-center justify-center ${isDragActive ? 'border-primary' : 'border-gray-300'}`}
+                >
+                    <input {...getInputProps()} id="image-upload" />
+                    {preview ? (
+                        <div className="relative w-full h-full">
+                            <img src={preview} alt="Preview" className="w-full h-full object-cover rounded-lg" />
+                            <Button
+                                type="button"
+                                variant="destructive"
+                                size="icon"
+                                className="absolute top-2 right-2"
+                                onClick={removeImage}
+                            >
+                                <X className="w-4 h-4" />
+                            </Button>
+                        </div>
+                    ) : (
+                        <div className="text-gray-500 p-4 w-full">
+                            <Upload className="w-8 h-8 mx-auto mb-2" />
+                            <p className='text-ellipsis overflow-hidden' >{t('acceptableFileTypes') + acceptedFileTypes}</p>
+                            <p>{t('maxSize') + maxSizeMB + ' MB'}</p>
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+});

package/kit/NLTModal/index.tsx

@@ -0,0 +1,36 @@
+import { FC, ReactNode } from "react";
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle
+} from "@/UIKit/shadcn/dialog";
+import { ScrollArea } from "@/UIKit/shadcn/scroll-area";
+
+interface IProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const NLTModal: FC<IProps> = ({ title, description, isOpen, onClose, children }) => {
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="sm:max-w-[525px]">
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>
+                        {description}
+                    </DialogDescription>
+                </DialogHeader>
+                <ScrollArea className="max-h-[70vh]">
+                    {children}
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    );
+};

package/kit/NLTModal/useModal.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export const useModal = () => {
+    const [isOpen, setOpen] = useState<boolean>(false); 
+
+    const onOpen = () => setOpen(true);
+    const onClose = () => setOpen(false);
+    
+    return { isOpen, onOpen, onClose }
+};

package/kit/NLTModalHeader/index.tsx

@@ -0,0 +1,48 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from "@/UIKit/shadcn/dialog/dialog";
+import { ScrollArea } from "@/UIKit/shadcn/scroll-area/scroll-area";
+import { FC, ReactNode, useEffect } from "react";
+
+interface IProps {
+    className?: string;
+    titleclassName?: string;
+    title: string;
+    description?: string;
+    children: ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+};
+
+export const NLTModalHeader: FC<IProps> = ({ title, description, isOpen, onClose, children, className }) => {
+
+    useEffect(() => {
+        return () => {
+            document.body.style.overflow = "";
+            // remove pointer events if exists
+            if('pointer-events' in document.body.style) {
+                document.body.style.removeProperty('pointer-events');
+            }
+        };
+    }, [isOpen]);
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className={`sm:max-w-[525px] ${className}`}>
+                <DialogHeader>
+                    <DialogTitle className="font-[20px]">{title}</DialogTitle>
+                    <DialogDescription>
+                        {description}
+                    </DialogDescription>
+                </DialogHeader>
+                <ScrollArea>
+                    {children}
+                </ScrollArea>
+            </DialogContent>
+        </Dialog>
+    );
+};

package/kit/NLTModalHeader/useModal.ts

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export const useModal = () => {
+    const [isOpen, setOpen] = useState<boolean>(false); 
+
+    const onOpen = () => setOpen(true);
+    const onClose = () => setOpen(false);
+    
+    return { isOpen, onOpen, onClose }
+};

package/kit/NLTMonthYearPicker/index.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { FC, useState } from 'react';
+import { Button } from '@/UIKit/shadcn/button/button';
+import { Label } from '@/UIKit/shadcn/label/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/UIKit/shadcn/popover/popover';
+import { useMonthYearPicker } from './useMonthYearPicker';
+import { CalendarIcon } from 'lucide-react';
+import { NLTSelect } from '../NLTSelect';
+import { IFilters } from '@/modules/productionWages/report/presenters/useReportFilters';
+import { useTranslation } from 'react-i18next';
+import { cn } from '@/lib/utils';
+
+interface IProps {
+    month: string | undefined;
+    year: string | undefined;
+    onChange: (key: keyof IFilters) => (value: any) => void;
+};
+
+export const NLTMonthYearPicker: FC<IProps> = ({ month, year, onChange }) => {
+    const { t } = useTranslation('common');
+    const [open, setOpen] = useState(false)
+    const { months, years } = useMonthYearPicker()
+
+    const selectedMonth =
+        month && month !== "00"
+            ? months.find((m) => m.value === month)?.label.slice(0, 3)
+            : "";
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="outline"
+                    className={cn("w-full justify-start text-left font-normal border-border px-3 py-2 data-placeholder:text-muted-foreground bg-input", !(month && year) && "text-muted-foreground")}
+                >
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {month && year ? `${selectedMonth} ${year}` : t('month_year_placeholder')}
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-80" align='start'>
+                <div className="grid gap-4">
+                    <div className="space-y-2">
+                        <p className="text-sm text-muted-foreground">
+                            {t('choose_month_year')}
+                        </p>
+                    </div>
+                    <div className="flex flex-col gap-2">
+                        <div className="flex items-center gap-4">
+                            <Label htmlFor="month" className="min-w-[70px]">{t('month')}</Label>
+                            <div className="flex-1">
+                                <NLTSelect options={months} value={month} onChange={onChange('month')} placeholder={t('month_placeholder')} />
+                            </div>
+                        </div>
+                        <div className="flex items-center gap-4">
+                            <Label htmlFor="year" className="min-w-[70px]">{t('year')}</Label>
+                            <div className="flex-1">
+                                <NLTSelect options={years} value={year} onChange={onChange('year')} placeholder={t('year_placeholder')} />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+};

package/kit/NLTMonthYearPicker/useMonthYearPicker.ts

@@ -0,0 +1,37 @@
+import { useTranslation } from "react-i18next";
+
+export function useMonthYearPicker() {
+    const { t } = useTranslation('month');
+    
+    const months = [
+        { value: "01", label: t('january') },
+        { value: "02", label: t('february') },
+        { value: "03", label: t('march') },
+        { value: "04", label: t('april') },
+        { value: "05", label: t('may') },
+        { value: "06", label: t('june') },
+        { value: "07", label: t('july') },
+        { value: "08", label: t('august') },
+        { value: "09", label: t('september') },
+        { value: "10", label: t('october') },
+        { value: "11", label: t('november') },
+        { value: "12", label: t('december') }
+    ];
+
+    const years = [
+        { value: "2025", label: "2025" },
+        { value: "2024", label: "2024" },
+        { value: "2023", label: "2023" },
+        { value: "2022", label: "2022" },
+        { value: "2021", label: "2021" },
+        { value: "2020", label: "2020" },
+        { value: "2019", label: "2019" },
+        { value: "2018", label: "2018" },
+        { value: "2017", label: "2017" },
+        { value: "2016", label: "2016" },
+        { value: "2015", label: "2015" },
+        { value: "2014", label: "2014" }
+    ];
+
+    return { months, years }
+};