@oneplatformdev/ui 0.1.0-8 → 0.1.9-10

package/dist/package.json

@@ -1,77 +0,0 @@
-{
-  "name": "@oneplatformdev/ui",
-  "version": "0.1.0-7",
-  "description": "React hook library",
-  "author": "One Platform Development Team",
-  "keywords": [
-    "react",
-    "oneplatform",
-    "hooks",
-    "typescript"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/oneplatformdev/core.git",
-    "directory": "packages/hooks"
-  },
-  "bugs": {
-    "url": "https://github.com/oneplatformdev/core/issues"
-  },
-  "homepage": "private package",
-  "private": false,
-  "license": "MIT",
-  "type": "module",
-  "main": "./index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "sideEffects": [
-    "./global.css"
-  ],
-  "exports": {
-    "./package.json": "./package.json",
-    "./global.css": "./global.css",
-    ".": {
-      "@oneplatformdev/source": "./src/index.ts",
-      "types": "./index.d.ts",
-      "import": "./index.js",
-      "default": "./index.js"
-    },
-    "./*": {
-      "types": "./*.d.ts",
-      "import": "./*.js",
-      "default": "./*.js"
-    }
-  },
-  "files": [
-    "**/*",
-    "dist",
-    "package.json",
-    "README.md",
-    "LICENSE",
-    "!**/*.tsbuildinfo"
-  ],
-  "peerDependencies": {
-    "react": ">=18 || >=19",
-    "react-dom": ">=18 || >=19",
-    "tailwindcss": ">=4.0.0",
-    "tw-animate-css": "^1.3.8",
-    "clsx": "^2.1.1",
-    "class-variance-authority": "^0.7.1",
-    "tailwind-merge": "^2.3.0",
-    "lucide-react": "^0.452.0"
-  },
-  "peerDependenciesMeta": {
-    "@types/react": {
-      "optional": true
-    },
-    "@types/react-dom": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "@oneplatformdev/hooks": "workspace:^",
-    "@oneplatformdev/utils": "workspace:^",
-    "@radix-ui/react-slot": "1.1.1",
-    "@radix-ui/react-tooltip": "^1.2.8"
-  }
-}

package/external.ts

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

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

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

package/kit/MultiSelectCombobox/types.ts

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

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