@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

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

package/kit/NLTPieChart/index.tsx

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

@@ -1,39 +0,0 @@
-"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>
-  )
-};

package/kit/NLTSidebar/nav-main.tsx

@@ -1,68 +0,0 @@
-"use client"
-
-import { ChevronRight, type LucideIcon } from "lucide-react";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/UIKit/shadcn/collapsible/collapsible";
-import { SidebarGroup, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, } from "@/UIKit/shadcn/sidebar/sidebar";
-import { Link, useLocation } from "react-router-dom";
-import { PATHS } from "@/navigation/paths";
-
-export function NavMain({ items }: { items: { title: string; url: string; icon?: LucideIcon; isActive?: boolean; items?: { title: string, url: string }[]; }[]}) {
-  const location = useLocation();
-
-  return (
-    <SidebarGroup>
-      <SidebarMenu>
-        {items.map((item) => {
-          const isActive = location.pathname === item.url || location.pathname.startsWith(item.url + '/');
-          return (
-            <Collapsible key={item.title} asChild defaultOpen={item.isActive} className="group/collapsible">
-              <SidebarMenuItem>
-                {!item.items?.length ? (
-                  <SidebarMenuButton asChild tooltip={item.title}
-                    className={`h-10 relative transition-colors duration-300 hover:bg-[hsl(var(--sidebar-accent))] 
-                      ${isActive ? "bg-[hsl(var(--sidebar-accent))] text-[hsl(var(--sidebar-accent-foreground))]" : ""}`
-                    }>
-                    <Link to={item.url}>
-                      {item.icon && <item.icon />}
-                      <span>{item.title}</span>
-                    </Link>
-                  </SidebarMenuButton>
-                ) : (
-                  <CollapsibleTrigger asChild>
-                    <SidebarMenuButton tooltip={item.title}
-                      className={`h-10 relative transition-colors duration-300 hover:bg-[hsl(var(--sidebar-accent))] 
-                        ${isActive ? 'bg-[hsl(var(--sidebar-accent))] text-[hsl(var(--sidebar-accent-foreground))]' : ''}`
-                      }>
-                      {item.icon && <item.icon />}
-                      <span>{item.title}</span>
-                      <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                )}
-                <CollapsibleContent>
-                  <SidebarMenuSub>
-                    {item.items?.map((subItem) => {
-                      const isActive = location.pathname === subItem.url;
-                      const isBirth = subItem.url === PATHS.EMPLOYEE.BIRTHDAY;
-
-                      return (
-                        <SidebarMenuSubItem key={subItem.title} className={`relative transition-colors duration-300 rounded-md`}>
-                          <SidebarMenuSubButton asChild className={`hover:bg-[hsl(var(--sidebar-accent))] 
-                            ${isActive ? 'bg-[hsl(var(--sidebar-accent))] text-[hsl(var(--sidebar-accent-foreground))]' : ''}`}>
-                            <Link to={subItem.url}>
-                              <span>{subItem.title}</span>
-                            </Link>
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      )
-                    })}
-                  </SidebarMenuSub>
-                </CollapsibleContent>
-              </SidebarMenuItem>
-            </Collapsible>
-          )
-        })}
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-};

package/kit/NLTSidebar/nav-projects.tsx

@@ -1,89 +0,0 @@
-"use client"
-
-import {
-  Folder,
-  Forward,
-  MoreHorizontal,
-  Trash2,
-  type LucideIcon,
-} from "lucide-react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/UIKit/shadcn/dropdown-menu/dropdown-menu";
-import {
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/UIKit/shadcn/sidebar/sidebar";
-
-export function NavProjects({
-  projects,
-}: {
-  projects: {
-    name: string
-    url: string
-    icon: LucideIcon
-  }[]
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarGroup className="group-data-[collapsible=icon]:hidden">
-      <SidebarGroupLabel>Projects</SidebarGroupLabel>
-      <SidebarMenu>
-        {projects.map((item) => (
-          <SidebarMenuItem key={item.name}>
-            <SidebarMenuButton asChild>
-              <a href={item.url}>
-                <item.icon />
-                <span>{item.name}</span>
-              </a>
-            </SidebarMenuButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <SidebarMenuAction showOnHover>
-                  <MoreHorizontal />
-                  <span className="sr-only">More</span>
-                </SidebarMenuAction>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                className="w-48 rounded-lg"
-                side={isMobile ? "bottom" : "right"}
-                align={isMobile ? "end" : "start"}
-              >
-                <DropdownMenuItem>
-                  <Folder className="text-zinc-500 dark:text-zinc-400" />
-                  <span>View Project</span>
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Forward className="text-zinc-500 dark:text-zinc-400" />
-                  <span>Share Project</span>
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>
-                  <Trash2 className="text-zinc-500 dark:text-zinc-400" />
-                  <span>Delete Project</span>
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </SidebarMenuItem>
-        ))}
-        <SidebarMenuItem>
-          <SidebarMenuButton className="text-sidebar-foreground/70">
-            <MoreHorizontal className="text-sidebar-foreground/70" />
-            <span>More</span>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
-  )
-}

package/kit/NLTSidebar/nav-user.tsx

@@ -1,114 +0,0 @@
-"use client"
-
-import {
-  BadgeCheck,
-  Bell,
-  ChevronsUpDown,
-  CreditCard,
-  LogOut,
-  Sparkles,
-} from "lucide-react";
-
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/UIKit/shadcn/avatar/avatar";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/UIKit/shadcn/dropdown-menu/dropdown-menu";
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  useSidebar,
-} from "@/UIKit/shadcn/sidebar/sidebar";
-
-export function NavUser({
-  user,
-}: {
-  user: {
-    name: string
-    email: string
-    avatar: string
-  }
-}) {
-  const { isMobile } = useSidebar()
-
-  return (
-    <SidebarMenu>
-      <SidebarMenuItem>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-            >
-              <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto size-4" />
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-            side={isMobile ? "bottom" : "right"}
-            align="end"
-            sideOffset={4}
-          >
-            <DropdownMenuLabel className="p-0 font-normal">
-              <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                <Avatar className="h-8 w-8 rounded-lg">
-                  <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                </Avatar>
-                <div className="grid flex-1 text-left text-sm leading-tight">
-                  <span className="truncate font-semibold">{user.name}</span>
-                  <span className="truncate text-xs">{user.email}</span>
-                </div>
-              </div>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <Sparkles />
-                Upgrade to Pro
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <BadgeCheck />
-                Account
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <CreditCard />
-                Billing
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <Bell />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <LogOut />
-              Log out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </SidebarMenuItem>
-    </SidebarMenu>
-  )
-}