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

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

package/kit/NLTTablePagination/index.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+
+import { Button } from '@/UIKit/shadcn/button';
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/UIKit/shadcn/select";
+
+interface IProps {
+    limit: number;
+    offset: number;
+    totalRows: number;
+    setLimit: (limit: number) => void;
+    setOffset: (offset: number) => void;
+}
+
+export const NLTTablePagination: FC<IProps> = ({ offset, limit, totalRows, setLimit, setOffset }) => {
+    const { t } = useTranslation('common');
+
+    const currentPage = Math.ceil(offset / limit) + 1;
+    const totalPages = Math.ceil(totalRows / limit);
+    const isLastPage = currentPage === totalPages;
+
+    const onChangeLimit = (value: string) => {
+        setOffset(0);
+        setLimit(parseInt(value));
+    };
+
+    const onPrevious = () => {
+        let nextOffset = offset - limit;
+        if (nextOffset < 0) {
+            nextOffset = 0;
+        }
+        setOffset(nextOffset);
+    };
+
+    const onNext = () => {
+        let nextOffset = offset + limit;
+        if (nextOffset > totalRows) {
+            nextOffset = totalRows - limit;
+        }
+        setOffset(nextOffset);
+    };
+
+    return (
+        <div className="flex items-center justify-end space-x-2 py-4">
+            <div className="flex items-center space-x-2">
+                <span className="text-sm">{t('rowsPerPage')}</span>
+                <Select value={limit?.toString()} onValueChange={onChangeLimit} >
+                    <SelectTrigger className="w-[70px]">
+                        <SelectValue placeholder="6" />
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectItem value="5">5</SelectItem>
+                        <SelectItem value="10">10</SelectItem>
+                        <SelectItem value="20">20</SelectItem>
+                        <SelectItem value="30">30</SelectItem>
+                        <SelectItem value="50">50</SelectItem>
+                    </SelectContent>
+                </Select>
+            </div>
+            <div className="space-x-2">
+                <Button variant="outline" size="sm" disabled={!offset} onClick={onPrevious}>{t('previous')}</Button>
+                <span className="text-sm">{`${t('page')} ${currentPage} ${t('of')} ${totalPages}`}</span>
+                <Button variant="outline" size="sm" disabled={isLastPage} onClick={onNext}>{t('next')}</Button>
+            </div>
+        </div>
+    );
+};

package/kit/Sidebar/SidebarNav/SidebarNavGroup.tsx

@@ -0,0 +1,27 @@
+import { FC } from "react";
+
+import { SidebarGroup, SidebarMenu } from "@/UIKit/shadcn/sidebar.tsx";
+import { SidebarNavGroupItem } from "./SidebarNavGroupItem.tsx";
+import { ISidebarNavGroupProps } from "./types";
+
+export const SidebarNavGroup: FC<ISidebarNavGroupProps> = (props) => {
+	const {
+		items = [],
+		getNavItemIsActive,
+		getNavSubItemIsActive
+	} = props;
+	return (
+			<SidebarGroup>
+				<SidebarMenu>
+					{items.map((item) => (
+						<SidebarNavGroupItem
+							key={item.title}
+							getNavItemIsActive={getNavItemIsActive}
+							getNavSubItemIsActive={getNavSubItemIsActive}
+							{...item}
+						/>
+					))}
+				</SidebarMenu>
+			</SidebarGroup>
+	);
+};

package/kit/Sidebar/SidebarNav/SidebarNavGroupItem.tsx

@@ -0,0 +1,120 @@
+import { clsx } from "clsx";
+import { ChevronRight } from "lucide-react";
+import { FC, Fragment, isValidElement, PropsWithChildren, useMemo } from "react";
+import { Link } from "react-router";
+
+import { ISideNavBaseItem, ISideNavItem } from "./types.ts";
+
+import { cn } from "@/lib/utils.ts";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger
+} from "@/UIKit/shadcn/collapsible.tsx";
+import {
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem
+} from "@/UIKit/shadcn/sidebar.tsx";
+
+const CollapsibleTriggerWrapper: FC<PropsWithChildren> = ({ children }) => (
+	<CollapsibleTrigger asChild>
+		{children}
+	</CollapsibleTrigger>
+);
+
+const SideMenuItemHeadButtonIcon: FC<Pick<ISideNavBaseItem, 'icon'>> = ({ icon }) => {
+	if(!icon) return null;
+	const Icon = icon;
+	if(!isValidElement(<Icon/>)) return null;
+	return <Icon/>;
+};
+
+const SideMenuItemHeadButton: FC<ISideNavItem> = (props) => {
+	const {
+		title = '',
+		isActive,
+		icon,
+		url,
+		items = [],
+	} = props;
+
+	const Wrapper = items.length ? CollapsibleTriggerWrapper : Fragment;
+	return (
+		<Wrapper>
+			<SidebarMenuButton
+				asChild
+				tooltip={title}
+				className={clsx(
+					`hover:text-background h-10 relative transition-colors duration-300 hover:bg-[hsl(var(--primary))]`,
+					isActive && "bg-[hsl(var(--primary))]",
+					)}
+			>
+				<Link to={items.length ? '#' : url || '#'}>
+					<SideMenuItemHeadButtonIcon icon={icon}/>
+					<span className={clsx(isActive && "text-background")}>
+						{title}
+				</span>
+					{Boolean(items.length) && (
+						<ChevronRight
+							className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
+						/>
+					)}
+				</Link>
+		</SidebarMenuButton>
+		</Wrapper>
+	);
+};
+
+export const SidebarNavGroupItem: FC<ISideNavItem> = (props) => {
+	const {
+		isActive = false,
+		url = '/',
+		items = [],
+		getNavItemIsActive,
+		getNavSubItemIsActive,
+	} = props;
+
+	const itemIsActive = useMemo(() => {
+		return getNavItemIsActive?.(url) || isActive;
+	}, [isActive, getNavItemIsActive, url]);
+
+	return (
+		<Collapsible asChild defaultOpen={itemIsActive} className="group/collapsible w-full">
+			<SidebarMenuItem>
+				<SideMenuItemHeadButton {...props} isActive={itemIsActive}/>
+				{Boolean(items.length) && (
+					<CollapsibleContent>
+						<SidebarMenuSub>
+							{items?.map((subItem) => {
+
+								if(subItem?.items?.length) {
+									return <SidebarNavGroupItem {...subItem}/>;
+								}
+								
+								return (
+									<SidebarMenuSubItem key={subItem.title} className={`relative transition-colors duration-300 rounded-md`}>
+										<SidebarMenuSubButton asChild className={`hover:text-background hover:bg-[hsl(var(--primary))]`}>
+											<Link to={subItem.url || '#'}>
+												<span>{subItem.title}</span>
+												<span
+													className={cn(
+														"w-2 h-2 bg-white rounded-full ml-auto hidden",
+														Boolean(getNavSubItemIsActive) && getNavSubItemIsActive?.(subItem.url) && 'visible block',
+														!getNavSubItemIsActive && location.pathname === subItem.url && 'visible block',
+													)}
+												/>
+											</Link>
+										</SidebarMenuSubButton>
+									</SidebarMenuSubItem>
+								);
+							})}
+						</SidebarMenuSub>
+					</CollapsibleContent>
+				)}
+			</SidebarMenuItem>
+		</Collapsible>
+	);
+};

package/kit/Sidebar/SidebarNav/index.ts

@@ -0,0 +1,3 @@
+export { SidebarNavGroup } from './SidebarNavGroup.tsx';
+export { SidebarNavGroupItem } from './SidebarNavGroupItem.tsx';
+export type * from './types.ts';

package/kit/Sidebar/SidebarNav/types.ts

@@ -0,0 +1,19 @@
+import { LucideIcon } from "lucide-react";
+
+export interface ISideNavBaseItem {
+	isActive?: boolean;
+	title?: string;
+	url: string;
+	icon?: LucideIcon;
+}
+
+export interface ISideNavItem extends ISideNavBaseItem {
+	getNavItemIsActive?: (url: string) => boolean;
+	getNavSubItemIsActive?: (url: string) => boolean;
+	items?: ISideNavItem[];
+}
+
+export interface ISidebarNavGroupProps
+	extends Pick<ISideNavItem, 'getNavItemIsActive' | 'getNavSubItemIsActive'>{
+	items?: ISideNavItem[];
+}

package/kit/Sidebar/index.ts

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