@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/external.ts

@@ -0,0 +1,78 @@
+const baseExternal = [
+  'path',
+  'react',
+  'react-dom',
+  'react/jsx-runtime',
+  'jsx-runtime',
+  'react-jsx',
+  'postcss',
+  'autoprefixer',
+  'react',
+  'react-dom',
+  'tailwindcss',
+  'tw-animate-css',
+  'tailwind-merge',
+  'lucide-react',
+  '@tailwindcss/vite',
+  'clsx',
+  'class-variance-authority',
+  '@oneplatformdev/utils',
+  '@oneplatformdev/hooks',
+  '@oneplatformdev/tokens',
+]
+
+const radixPackExternal = [
+  "@radix-ui/react-accordion",
+  "@radix-ui/react-alert-dialog",
+  "@radix-ui/react-aspect-ratio",
+  "@radix-ui/react-avatar",
+  "@radix-ui/react-checkbox",
+  "@radix-ui/react-collapsible",
+  "@radix-ui/react-dialog",
+  "@radix-ui/react-dropdown-menu",
+  "@radix-ui/react-hover-card",
+  "@radix-ui/react-label",
+  "@radix-ui/react-menubar",
+  "@radix-ui/react-navigation-menu",
+  "@radix-ui/react-popover",
+  "@radix-ui/react-progress",
+  "@radix-ui/react-radio-group",
+  "@radix-ui/react-scroll-area",
+  "@radix-ui/react-select",
+  "@radix-ui/react-separator",
+  "@radix-ui/react-slider",
+  "@radix-ui/react-slot",
+  "@radix-ui/react-switch",
+  "@radix-ui/react-tabs",
+  "@radix-ui/react-toast",
+  "@radix-ui/react-toggle",
+  "@radix-ui/react-toggle-group",
+  "@radix-ui/react-tooltip",
+]
+
+
+const packExternal = [
+  'lucide-react',
+  'class-variance-authority',
+  '@hookform/resolvers',
+  'cmdk',
+  'date-fns',
+  'embla-carousel-react',
+  'input-otp',
+  'next-themes',
+  'react-day-picker',
+  'react-hook-form',
+  'react-resizable-panels',
+  'recharts',
+  'sonner',
+  'vaul',
+  "@tanstack/react-table",
+  'react-dropzone',
+  'react-textarea-autosize',
+]
+
+export const external = [
+  ...baseExternal,
+  ...radixPackExternal,
+  ...packExternal,
+]

package/kit/MultiSelectCombobox/MultiSelectCombobox.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useDebounce } from "@/hooks/useDebounce.ts";
+import { IOption, MultiSelectComboboxProps } from "./types.ts";
+
+import { cn } from "@/lib/utils";
+import { NLTProgress } from "@/UIKit/components/NLTProgress/nlt-progress.tsx";
+import { Badge } from "@/UIKit/shadcn/badge.tsx";
+import { Button } from "@/UIKit/shadcn/button";
+import {
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "@/UIKit/shadcn/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/UIKit/shadcn/popover";
+
+export const MultiSelectCombobox: FC<MultiSelectComboboxProps> = (props) => {
+	const {
+		values = [],
+		options: initialOptions = [],
+		onChange,
+		fetchOptions,
+		disabled,
+		placeholder,
+		searchLabel,
+		notFoundLabel,
+		onMount,
+	} = props;
+	const { t } = useTranslation('common');
+	const isMounted = useRef(false);
+	const [ open, setOpen ] = useState(false);
+	const [ loading, setLoading ] = useState(false);
+	const [ searchTerm, setSearchTerm ] = useState("");
+	const [ options, setOptions ] = useState<IOption[]>(initialOptions);
+
+	const [ selected, setSelected ] = useState<IOption[]>([]);
+
+	const onChangeOption = useCallback((nextOptions: IOption[]) => {
+		onChange?.(nextOptions.map(o => o.value));
+		setSelected(nextOptions);
+	}, [onChange]);
+
+	const handleSelect = useCallback((option: IOption) => {
+		const next = selected.some((o) => o.value === option.value)
+			? selected.filter((o) => o.value !== option.value)
+			: [ ...selected, option ];
+		onChangeOption(next);
+	}, [selected, onChangeOption]);
+
+	const handleRemove = useCallback((option: IOption) => {
+		const next = selected.filter(o => o.value !== option.value);
+		onChangeOption?.(next);
+	}, [selected, onChangeOption]);
+
+	const getIsSelected = useCallback((option: IOption) => {
+		return values.includes(option.value) || selected?.some((o) => o.value === option.value);
+	}, [selected, values]);
+
+	const getData = async (search?: string) => {
+		setLoading(true);
+		try {
+			const fetchedOptions = await fetchOptions(search);
+			setOptions(fetchedOptions);
+		} catch (error) {
+			console.error("Option load failed:", error);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const handlePopoverOpen = async () => {
+		if (!open) {
+			getData();
+			setSearchTerm('');
+		}
+	};
+
+	const { debouncedWrapper } = useDebounce(getData, 1000);
+	const handleSearchChange = (value: string) => {
+		setSearchTerm(value);
+		debouncedWrapper(value);
+	};
+
+	const mount = useCallback(() => {
+		if(!onMount) {
+			isMounted.current = true;
+			return;
+		}
+		onMount({ setSelected })
+			.finally(() => {
+				isMounted.current = true;
+			});
+	}, [onMount]);
+
+	useEffect(() => {
+		mount();
+		return () => {
+			isMounted.current = false;
+		};
+	}, []);
+
+	return (
+		<div className="w-full">
+			<Popover
+				open={open}
+				onOpenChange={(newOpen) => {
+					setOpen(newOpen);
+					if (newOpen) handlePopoverOpen();
+				}}
+			>
+				<PopoverTrigger asChild className="border-border">
+					<Button
+						variant="outline"
+						role="combobox"
+						aria-expanded={open}
+						className={cn(
+							"flex w-full items-center justify-start h-auto min-h-[36px] border",
+							open ? "border-2 border-sidebar-accent" : "border-border",
+						)}
+						disabled={!isMounted.current || disabled}
+					>
+						<>
+							{!isMounted.current && <NLTProgress className="w-6 h-6 text-primary" />}
+							{isMounted.current && selected?.length
+							? (
+								<div className="flex flex-wrap gap-2">
+									{selected.map((opt) => (
+										<Badge
+											key={opt.value}
+											variant="secondary"
+											className='m-0 w-auto h-auto min-h-0 items-center'
+										>
+											<span>{opt.label}</span>
+											<Button
+												variant="ghost"
+												size="icon"
+												className="p-0 text-muted-foreground hover:bg-transparent h-4 w-4"
+												onClick={(e) => {
+													e?.preventDefault();
+													e?.stopPropagation();
+													handleRemove(opt);
+												}}
+											>
+												<X className="h-3 w-3" />
+											</Button>
+										</Badge>
+									))}
+								</div>
+							)
+							: (
+								<div className='flex items-center justify-between w-full'>
+									{placeholder}
+									<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50"/>
+								</div>
+							)}
+						</>
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent
+					className="w-(--radix-popper-anchor-width) max-w-none p-0"
+					align="start"
+				>
+					<Command shouldFilter={false}>
+						<CommandInput
+							placeholder={searchLabel}
+							value={searchTerm}
+							onValueChange={handleSearchChange}
+						/>
+						<CommandList>
+							{!loading && <CommandEmpty>{notFoundLabel || t('foundNothing')}</CommandEmpty>}
+							<CommandGroup>
+								{loading ? (
+									<div className="flex justify-center"><NLTProgress
+										className="w-6 h-6 text-primary"/></div>
+								) : (
+									options?.map((option) => (
+											<CommandItem
+												key={option.value}
+												value={option.value}
+												onSelect={() => {
+													handleSelect(option);
+												}}
+											>
+												{option.label}
+												<Check
+													className={cn(
+														"ml-auto",
+														getIsSelected(option) ? "opacity-100" : "opacity-0"
+													)}
+												/>
+											</CommandItem>
+										)
+									)
+								)}
+							</CommandGroup>
+						</CommandList>
+					</Command>
+				</PopoverContent>
+
+			</Popover>
+		</div>
+	);
+};
+

package/kit/MultiSelectCombobox/index.tsx

@@ -0,0 +1,2 @@
+export { MultiSelectCombobox } from './MultiSelectCombobox.tsx';
+export type * from './types.ts';

package/kit/MultiSelectCombobox/types.ts

@@ -0,0 +1,22 @@
+import { Dispatch, SetStateAction } from "react";
+
+export interface IOption {
+	value: string;
+	label: string;
+}
+
+export interface MultiSelectComboboxPropsOnMountParams {
+	setSelected:  Dispatch<SetStateAction<IOption[]>>
+}
+
+export interface MultiSelectComboboxProps {
+	values?: IOption["value"][];
+	options?: IOption[];
+	onChange?: (options?: IOption["value"][]) => void;
+	fetchOptions: (search?: string) => Promise<IOption[]>;
+	disabled?: boolean;
+	placeholder?: string;
+	searchLabel?: string;
+	notFoundLabel?: string;
+	onMount?: (params: MultiSelectComboboxPropsOnMountParams) => Promise<void>;
+}

package/kit/NLTDateRangePicker/index.tsx

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

@@ -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>
+            )}
+        />
+    )
+};