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

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

package/kit/NLTPhoneInput/index.tsx

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

package/kit/NLTPieChart/index.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { FC } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { Label, Pie, PieChart, ResponsiveContainer } from "recharts";
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/UIKit/shadcn/chart";
+
+export interface IDataItem {
+    name: string;
+    value: number;
+    fill: string;
+}
+
+export interface IConfigItem {
+    label: string;
+    color: string;
+}
+
+export interface IConfig {
+    [key: string]: IConfigItem;
+}
+
+interface IProps {
+    data: IDataItem[];
+    config: IConfig;
+    label: string;
+}
+
+export const NLTPieChart: FC<IProps> = ({ data, config, label }) => {
+    const total = data.reduce((sum, item) => sum + item.value, 0);
+
+    return (
+        <ChartContainer config={config}>
+            <Fragment>
+                <ResponsiveContainer width="100%" height="100%">
+                    <PieChart>
+                        <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                        <Pie data={data} cx="50%" cy="50%" innerRadius="70%" outerRadius="100%" paddingAngle={2} dataKey="value">
+                            <Label
+                                content={({ viewBox }) => {
+                                    if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                        return (
+                                            <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+                                                <tspan x={viewBox.cx} y={viewBox.cy} className="fill-foreground text-3xl font-bold">
+                                                    {total.toLocaleString()}
+                                                </tspan>
+                                                <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                                                    {label}
+                                                </tspan>
+                                            </text>
+                                        );
+                                    }
+                                }}
+                            />
+                        </Pie>
+                    </PieChart>
+                </ResponsiveContainer>
+            </Fragment>
+        </ChartContainer>
+    );
+};

package/kit/NLTSidebar/app-sidebar.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import * as React from "react";
+import { NavMain } from "./nav-main";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from "@/UIKit/shadcn/sidebar/sidebar";
+import { PATHS } from "@/navigation/paths";
+import { Link } from "react-router-dom";
+import { useSidebarData } from "@/layout/useSidebarData";
+import { useTheme } from "next-themes";
+import { APP_VERSION, IS_DEV } from "@/config.ts";
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const data = useSidebarData();
+  const { theme } = useTheme()
+
+  return (
+    <Sidebar collapsible="icon" {...props}>
+      <SidebarHeader>
+        <div className="grid gap-2 text-center">
+          <Link to={PATHS.HOME}>
+            {theme === 'dark'
+              ? <img src="/small_logo_dark.svg" alt="Image" width="90" height="79" className="object-cover text-white mx-auto" />
+              : <img src="/small_logo.svg" alt="Image" width="90" height="79" className="object-cover text-white mx-auto" />
+            }
+          </Link>
+        </div>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+      </SidebarContent>
+      <SidebarFooter>
+        {IS_DEV && (
+          <span className='text-xs'>v{APP_VERSION}</span>
+        )}
+      </SidebarFooter>
+      <SidebarRail/>
+    </Sidebar>
+  )
+};