@oneplatformdev/ui 0.1.0-8 → 0.1.9-10

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

package/kit/NLTSidebar/team-switcher.tsx

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

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

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

package/kit/NLTTablePagination/index.tsx

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

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