@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

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

package/kit/NLTSidebar/nav-main.tsx

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

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

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

package/kit/NLTSidebar/team-switcher.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { ChevronsUpDown, Plus } from "lucide-react"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from "@/UIKit/shadcn/dropdown-menu/dropdown-menu";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/UIKit/shadcn/sidebar/sidebar";
+
+export function TeamSwitcher({
+  teams,
+}: {
+  teams: {
+    name: string
+    logo: React.ElementType
+    plan: string
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+  const [activeTeam, setActiveTeam] = React.useState(teams[0])
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <SidebarMenuButton
+              size="lg"
+              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+            >
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <activeTeam.logo className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-semibold">
+                  {activeTeam.name}
+                </span>
+                <span className="truncate text-xs">{activeTeam.plan}</span>
+              </div>
+              <ChevronsUpDown className="ml-auto" />
+            </SidebarMenuButton>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuLabel className="text-xs text-zinc-500 dark:text-zinc-400">
+              Teams
+            </DropdownMenuLabel>
+            {teams.map((team, index) => (
+              <DropdownMenuItem
+                key={team.name}
+                onClick={() => setActiveTeam(team)}
+                className="gap-2 p-2"
+              >
+                <div className="flex size-6 items-center justify-center rounded-sm border">
+                  <team.logo className="size-4 shrink-0" />
+                </div>
+                {team.name}
+                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+            <DropdownMenuItem className="gap-2 p-2">
+              <div className="flex size-6 items-center justify-center rounded-md border border-zinc-200 bg-white dark:border-zinc-800 dark:bg-zinc-950">
+                <Plus className="size-4" />
+              </div>
+              <div className="font-medium text-zinc-500 dark:text-zinc-400">Add team</div>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  )
+}

package/kit/NLTTable/NLTTable.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { FC } from "react";
+
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+} from '@/UIKit/shadcn/table';
+
+interface IProps {
+    columns: { key: string; title: string; className?: string; }[]
+    data: any[]
+}
+
+export const NLTTable: FC<IProps> = ({ columns, data, }) => {
+    return (
+        <div className="space-y-4 w-full">
+            {/* <DataTableToolbar table={table} /> */}
+            <div className="rounded-md border border-cyan-900">
+                <Table>
+                    <TableHeader >
+                        <TableRow className="bg-muted" >
+                            {columns?.map((column) => (<TableHead className={column.className} key={column.key}>{column.title}</TableHead>))}
+                        </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                        {
+                            data?.length ? data.map((row, index) => (
+                                <TableRow key={index}>
+                                    {columns.map((column, index) => (
+                                        <TableCell key={index}>{row[column.key]}</TableCell>
+                                    ))}
+                                </TableRow>
+                            )) :
+                                <TableRow>
+                                    <TableCell colSpan={4} className="h-24 text-center">
+                                        No results.
+                                    </TableCell>
+                                </TableRow>
+                        }
+                    </TableBody>
+                </Table>
+            </div>
+        </div>
+    );
+};

package/kit/NLTTable/index.tsx

@@ -0,0 +1 @@
+export * from './NLTTable';