@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

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

package/kit/Sidebar/SidebarNav/SidebarNavGroupItem.tsx

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

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

package/kit/Sidebar/SidebarNav/types.ts

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

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

package/kit/Stepper/LinearStepper.tsx

@@ -1,91 +0,0 @@
-import { Check } from "lucide-react";
-import { FC } from "react";
-
-import { StepperProps, StepProps } from "./types.ts";
-
-import { cn } from "@/lib/utils.ts";
-
-const Step: FC<StepProps> = (props) => {
-	const {
-		step: {
-			title = '',
-		},
-		status,
-		onClick,
-		index = 0,
-		isLast,
-	} = props;
-
-	return (
-		<div className='flex grow group items-center'>
-			<button
-				onClick={onClick}
-				className={cn(
-					'flex items-center gap-2',
-					status === 'upcoming' && "cursor-not-allowed"
-				)}
-				disabled={status === 'upcoming'}
-				aria-current={status === 'current' ? 'step' : undefined}
-			>
-				<div
-					className={cn(
-						"w-8 h-8 rounded-full border-2 flex items-center justify-center shrink-0",
-						status === 'complete' && "bg-primary border-primary text-primary-foreground",
-						status === 'current' && "border-primary text-primary",
-						status === 'upcoming' && "border-muted-foreground text-muted-foreground",
-					)}
-				>
-					{status === 'complete' ? <Check className="w-6 h-6"/> : <span>{index + 1}</span>}
-				</div>
-				<span
-					className={cn(
-						"text-nowrap",
-						status === 'complete' && "text-primary",
-						status === 'current' && "text-primary",
-						status === 'upcoming' && "text-muted-foreground",
-					)}
-				>{title}</span>
-			</button>
-			{!isLast && (
-				<div
-					className={cn(
-						"h-0.5 w-full grow mx-2",
-						status === 'complete' ? "bg-primary" : "bg-muted"
-					)}
-				/>
-			)}
-		</div>
-	);
-};
-
-export const LinearStepper: FC<StepperProps> = (props) => {
-	const {
-		steps,
-		step: currentStep,
-		onClick,
-	} = props;
-
-	return (
-		<div className='flex grow w-full h-auto justify-between items-center pl-2'>
-			{steps.map((step, index) => (
-				<Step
-					key={index}
-					step={step}
-					status={
-						index < currentStep
-							? 'complete'
-							: index === currentStep
-								? 'current'
-								: 'upcoming'
-					}
-					onClick={(e) => {
-						e?.preventDefault();
-						onClick?.(index);
-					}}
-					index={index}
-					isLast={index === steps.length - 1}
-				/>
-			))}
-		</div>
-	);
-};

package/kit/Stepper/Stepper.tsx

@@ -1,17 +0,0 @@
-import { FC } from "react";
-
-import { StepperProps } from "@/UIKit/components/Stepper/types.ts";
-
-import { LinearStepper } from "./LinearStepper.tsx";
-import { VerticalStepper } from "./VerticalStepper.tsx";
-
-const componentByType = {
-	horizontal: LinearStepper,
-	vertical: VerticalStepper,
-};
-
-export const Stepper: FC<StepperProps> = (props) => {
-	const { type = 'horizontal'} = props;
-	const Component = componentByType[type];
-	return <Component {...props}/>;
-};

package/kit/Stepper/VerticalStepper.tsx

@@ -1,91 +0,0 @@
-import { Check } from "lucide-react";
-import { FC } from "react";
-
-import { StepperProps, StepProps } from "./types.ts";
-
-import { cn } from "@/lib/utils.ts";
-
-const Step: FC<StepProps> = (props) => {
-	const {
-		step: {
-			title = '',
-			description = '',
-		},
-		status,
-		onClick,
-		isLast,
-	} = props;
-
-	return (
-		<div className="flex grow group">
-			<div className="flex flex-col items-center mr-4">
-				<button
-					onClick={onClick}
-					className={cn(
-						"w-10 h-10 rounded-full border-2 flex items-center justify-center",
-						status === 'complete' && "bg-primary border-primary text-primary-foreground",
-						status === 'current' && "border-primary text-primary",
-						status === 'upcoming' && "border-muted-foreground text-muted-foreground",
-						status === 'upcoming' && "cursor-not-allowed"
-					)}
-					disabled={status === 'upcoming'}
-					aria-current={status === 'current' ? 'step' : undefined}
-				>
-					{status === 'complete' ? <Check className="w-6 h-6"/> : <span>{title[0]}</span>}
-				</button>
-				{!isLast && (
-					<div
-						className={cn(
-							"w-0.5 grow my-2",
-							status === 'complete' ? "bg-primary" : "bg-muted"
-						)}
-					/>
-				)}
-			</div>
-			<div className="flex flex-col pb-8">
-				<button
-					onClick={onClick}
-					className={cn(
-						"text-left",
-						status === 'upcoming' && "cursor-not-allowed opacity-50"
-					)}
-					disabled={status === 'upcoming'}
-				>
-					<h3 className="text-base font-semibold">{title}</h3>
-					{description && <p className="text-sm text-muted-foreground">{description}</p>}
-				</button>
-			</div>
-		</div>
-	);
-};
-
-export const VerticalStepper: FC<StepperProps> = (props) => {
-	const {
-		steps,
-		step: currentStep,
-		onClick,
-	} = props;
-
-	return (
-		<div className="flex flex-col h-full justify-between">
-			{steps.map((step, index) => (
-				<Step
-					key={index}
-					step={step}
-					status={
-						index < currentStep
-							? 'complete'
-							: index === currentStep
-								? 'current'
-								: 'upcoming'
-					}
-					onClick={(e) => {
-						e?.preventDefault();
-						onClick?.(index);
-					}}
-					isLast={index === steps.length - 1}
-				/>
-			))}
-		</div>
-	);
-};

package/kit/Stepper/index.ts

@@ -1 +0,0 @@
-export { Stepper } from './Stepper.tsx';

package/kit/Stepper/types.ts

@@ -1,21 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface StepperOption {
-		title?: string;
-		description?: string;
-}
-
-export interface StepProps {
-	step: StepperOption;
-	onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-	status?: 'complete' | 'current' | 'upcoming';
-	isLast?: boolean;
-	index?: number;
-}
-
-export interface StepperProps {
-	step: number;
-	steps: StepperOption[];
-	type?: 'horizontal' | 'vertical';
-	onClick?: (step: number) => void;
-}

package/kit/Stepper/useStepper.ts

@@ -1,40 +0,0 @@
-import { useCallback, useState } from "react";
-
-interface IUseStepperParams {
-	step?: number,
-	minStep?: number,
-	maxStep?: number,
-}
-
-export const useStepper = (params: IUseStepperParams = {}) => {
-	const {
-		step: initialStep = 0,
-		minStep = 0,
-		maxStep = 0,
-	} = params;
-	const [step, setStep] = useState(initialStep);
-
-	const onSetStep = useCallback((set: number) => {
-		const nextStep = Math.max(minStep, Math.min(maxStep, set));
-		setStep(nextStep);
-	}, [maxStep, minStep]);
-
-	const onNextStep = useCallback(() => {
-		const nextStep = Math.min(maxStep, step + 1);
-		if(nextStep === step) return;
-		setStep(nextStep);
-	}, [maxStep, step]);
-
-	const onPrevStep = useCallback(() => {
-		const nextStep = Math.max(minStep, step - 1);
-		if(nextStep === step) return;
-		setStep(nextStep);
-	}, [minStep, step]);
-
-	return {
-		step,
-		onNextStep,
-		onPrevStep,
-		onSetStep,
-	};
-};

package/node_modules/@oneplatformdev/hooks/.babelrc

@@ -1,12 +0,0 @@
-{
-  "presets": [
-    [
-      "@nx/react/babel",
-      {
-        "runtime": "automatic",
-        "useBuiltIns": "usage"
-      }
-    ]
-  ],
-  "plugins": []
-}