@oneplatformdev/ui 0.1.0-8 → 0.1.9-10

package/kit/NLTFormFilesDropZone/index.tsx

@@ -1,73 +0,0 @@
-// 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

@@ -1,36 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,105 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,66 +0,0 @@
-"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

@@ -1,37 +0,0 @@
-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 }
-};

package/kit/NLTPhoneInput/index.tsx

@@ -1,153 +0,0 @@
-import * as React from "react";
-import { ChevronDown } from "lucide-react";
-import * as RPNInput from "react-phone-number-input";
-import { Button } from "@/UIKit/shadcn/button/button";
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/UIKit/shadcn/command/command";
-import { Input } from "@/UIKit/shadcn/input/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/UIKit/shadcn/popover/popover";
-import { ScrollArea } from "@/UIKit/shadcn/scroll-area/scroll-area";
-import { cn } from "@/lib/utils";
-import { useState } from "react";
-
-type PhoneInputProps = Omit<React.ComponentProps<"input">, "onChange" | "value" | "ref"> &
-    Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
-        value: string;
-        placeholder?: string;
-        onChange: (value: RPNInput.Value) => void;
-    };
-
-const NLTPhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
-    React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
-        ({ className, value, onChange, placeholder, ...props }, ref) => {
-            return (
-                <RPNInput.default
-                    ref={ref}
-                    className={cn("flex", className)}
-                    value={value}
-                    defaultCountry="UA"
-                    countrySelectComponent={CountrySelect}
-                    inputComponent={InputComponent}
-                    smartCaret={false}
-                    placeholder={placeholder}
-                    /**
-                     * Handles the onChange event.
-                     *
-                     * react-phone-number-input might trigger the onChange event as undefined
-                     * when a valid phone number is not entered. To prevent this,
-                     * the value is coerced to an empty string.
-                     *
-                     * @param {E164Number | undefined} value - The entered value
-                     */
-                    onChange={onChange}
-                    {...props}
-                />
-            );
-        }
-    );
-
-NLTPhoneInput.displayName = "PhoneInput";
-
-const InputComponent = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-    ({ className, value, onChange, ...props }, ref) => {
-        const data = typeof value === "string" ? RPNInput.parsePhoneNumber(value) : undefined;
-        const realValue = data?.nationalNumber || value;
-
-        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const newValue = e.target.value;
-
-            if (newValue.length <= 15) {
-                onChange?.(e);
-            }
-        };
-        return (
-            <Input
-                className={cn("rounded-e-lg rounded-s-none border-l-0", className)}
-                {...props}
-                value={realValue}
-                onChange={handleChange}
-                ref={ref}
-            />
-        )
-    }
-);
-InputComponent.displayName = "InputComponent";
-
-type CountryEntry = { label: string; value: RPNInput.Country | undefined };
-
-type CountrySelectProps = {
-    disabled?: boolean;
-    value: RPNInput.Country;
-    options: CountryEntry[];
-    onChange: (country: RPNInput.Country) => void;
-};
-
-const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange, }: CountrySelectProps) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    return (
-        <Popover onOpenChange={(open) => setIsOpen(open)}>
-            <PopoverTrigger asChild>
-                <Button
-                    type="button"
-                    variant="outline"
-                    className="flex gap-2 rounded-e-none rounded-s-lg border border-border border-r pl-3 pr-4 focus:z-10 h-12 bg-input"
-                    disabled={disabled}
-                >
-                    <span className="text-sm font-medium text-foreground/80">
-                        {selectedCountry
-                            ? `+${RPNInput.getCountryCallingCode(selectedCountry)}`
-                            : "+380"}
-                    </span>
-                    <ChevronDown
-                        className={cn(
-                            "-mr-2 size-4 opacity-50",
-                            disabled ? "hidden" : "opacity-100",
-                            isOpen
-                                ? "rotate-180 transition-transform duration-200"
-                                : "rotate-0 transition-transform duration-200"
-                        )}
-                    />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[300px] p-0" align="start">
-                <Command>
-                    <CommandInput placeholder="Пошук країни" />
-                    <CommandList>
-                        <ScrollArea className="h-72">
-                            <CommandEmpty>No country found.</CommandEmpty>
-                            <CommandGroup>
-                                {countryList.map(({ value, label }) =>
-                                    value ? (
-                                        <CountrySelectOption
-                                            key={value}
-                                            country={value}
-                                            countryName={label}
-                                            selectedCountry={selectedCountry}
-                                            onChange={onChange}
-                                        />
-                                    ) : null
-                                )}
-                            </CommandGroup>
-                        </ScrollArea>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    );
-};
-
-interface CountrySelectOptionProps extends RPNInput.FlagProps {
-    selectedCountry: RPNInput.Country;
-    onChange: (country: RPNInput.Country) => void;
-};
-
-const CountrySelectOption = ({ country, countryName, selectedCountry, onChange, }: CountrySelectOptionProps) => {
-    return (
-        <CommandItem className={`gap-2 ${country === selectedCountry ? "bg-gray-200" : ""}`} onSelect={() => onChange(country)}>
-            <span className="flex-1 text-sm text-foreground">{countryName}</span>
-            <span className="text-sm font-medium text-foreground/50">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
-        </CommandItem>
-    );
-};
-
-export { NLTPhoneInput };