@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/kit/NLTDateRangePicker/index.tsx

@@ -1,85 +0,0 @@
-import { endOfDay, format, startOfDay } from 'date-fns';
-import { CalendarIcon } from 'lucide-react';
-import React, { FC, useState } from 'react';
-import { DateRange } from 'react-day-picker';
-
-import { useWindowSize } from '@/hooks/useWindowSize';
-
-import { cn } from '@/lib/utils';
-import { Button } from '@/UIKit/shadcn/button';
-import { Calendar } from '@/UIKit/shadcn/calendar';
-import { Popover, PopoverContent, PopoverTrigger } from '@/UIKit/shadcn/popover';
-
-export type DateRangePickerProps = React.HTMLAttributes<HTMLDivElement> & {
-    range: DateRange | undefined,
-    onRangeChange: (range: DateRange | undefined) => void,
-}
-
-export const DateRangePicker: FC<DateRangePickerProps> = ({ range, onRangeChange, className, }) => {
-    const { isMobile } = useWindowSize();
-    const [isOpen, setIsOpen] = useState(false);
-    const [pickerRange, setPickerRange] = useState<DateRange | undefined>(range);
-
-    const onOpenChange = (open: boolean) => {
-        if (open) {
-            setIsOpen(true);
-        } else {
-            setIsOpen(false);
-        }
-    };
-
-    const closePicker = () => {
-        setIsOpen(false);
-    };
-
-    const onSubmitPicker = () => {
-        onRangeChange(pickerRange as DateRange);
-        closePicker();
-    };
-
-    const handleRangeChange = (range: DateRange | undefined) => {
-        if (range) {
-            const adjustedRange = {
-                from: range.from ? startOfDay(range.from) : undefined,
-                to: range.to ? endOfDay(range.to) : undefined,
-            };
-            setPickerRange(adjustedRange);
-        } else {
-            setPickerRange(undefined);
-        }
-    };
-
-    return (
-        <div className={cn('grid gap-2', className)}>
-            <Popover open={isOpen} onOpenChange={onOpenChange}>
-                <PopoverTrigger asChild>
-                    <Button id="date" variant="outline" className={'w-[50px] sm:w-[220px] h-[40px] justify-start text-left font-normal'}>
-                        <CalendarIcon className="sm:mr-2 h-4 w-4" />
-                        {isMobile ? null : range?.from ? (
-                            range.to
-                                ? (<>{format(range.from, 'LLL dd, y')}{' '}-{' '}{format(range.to, 'LLL dd, y')}</>)
-                                : (format(range.from, 'LLL dd, y'))
-                        ) : (<span>Pick a date</span>)}
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent className="w-auto p-0" align="end">
-                    <Calendar
-                        // initialFocus
-                        mode="range"
-                        selected={pickerRange}
-                        onSelect={handleRangeChange}
-                        numberOfMonths={2}
-                    />
-                    {!!pickerRange && (
-                        <div className="px-5 pb-4 flex justify-end">
-                            <Button disabled={!range?.from || !range?.to} onClick={onSubmitPicker}>
-                                Apply
-                            </Button>
-                        </div>
-                    )}
-                </PopoverContent>
-            </Popover>
-        </div>
-    );
-};
-

package/kit/NLTFilesDropZone/imageList/index.tsx

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

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

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

@@ -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 }
-};