ikoncomponents 1.5.8 → 1.5.10

package/templates/default/ikoncomponents/multi-combobox/index.tsx

@@ -1,345 +0,0 @@
-// import React, { useEffect, useState } from 'react'
-// import { Popover, PopoverContent, PopoverTrigger } from '@/shadcn/ui/popover'
-// import { Button } from '@/shadcn/ui/button'
-// import { cn } from '@/shadcn/lib/utils'
-// import { Check, ChevronsUpDown } from 'lucide-react'
-// import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/shadcn/ui/command'
-
-// interface MultiComboboxProps {
-//   placeholder: string;
-//   items: { value: string; label?: string }[];
-//   onValueChange: (selectedItems: string[]) => void;
-//   defaultValue?: string[];
-// }
-
-// export default function MultiCombobox({ placeholder, items, onValueChange, defaultValue }: MultiComboboxProps) {
-//   const [selectedItems, setSelectedItems] = useState<string[]>(defaultValue ? defaultValue : []);
-//   useEffect(() => {
-//     onValueChange(selectedItems)
-//   }, [selectedItems])
-//   return (
-//     <>
-//       <Popover>
-//         <PopoverTrigger asChild>
-//           <Button
-//             variant="outline"
-//             role="combobox"
-//             className={cn(
-//               "justify-between",
-//               selectedItems.length == 0 && "text-muted-foreground"
-//             )}
-//           >
-//             {selectedItems && selectedItems.length > 0 ? (
-//               <div className='flex gap-2 items-center'>
-//                 {
-//                   selectedItems.map((value: string) => (
-//                     <span
-//                       key={value}
-//                       className="px-2 py-1 bg-secondary text-secondary-foreground rounded-md"
-//                     >
-//                       {
-//                         (items.find(
-//                           (item) => item.value === value
-//                         )?.label || value)
-//                       }
-//                     </span>
-//                   ))
-//                 }
-//               </div>
-//             ) : placeholder}
-//             <ChevronsUpDown className="opacity-50" />
-//           </Button>
-//         </PopoverTrigger>
-//         <PopoverContent className="p-0" align='start'>
-//           <Command>
-//             <CommandInput
-//               placeholder="Search..."
-//             />
-//             <CommandList>
-//               <CommandEmpty>No items found.</CommandEmpty>
-//               <CommandGroup>
-//                 {
-//                   items.map((item) => {
-//                     const isSelected = selectedItems.includes(item.value);
-//                     return (
-//                       <CommandItem
-//                         value={item.value}
-//                         key={item.value}
-//                         onSelect={(value) => {
-//                           let updatedItems;
-//                           if (selectedItems.includes(value)) {
-//                             updatedItems = selectedItems.filter((val) => val !== value);
-//                           } else {
-//                             updatedItems = [...selectedItems, value];
-//                           }
-//                           setSelectedItems(updatedItems);
-//                         }}
-//                       >
-//                         {item?.label || item.value}
-//                         <Check
-//                           className={cn(
-//                             "ml-auto",
-//                             isSelected
-//                               ? "opacity-100"
-//                               : "opacity-0"
-//                           )}
-//                         />
-//                       </CommandItem>
-//                     )
-//                   })
-//                 }
-//               </CommandGroup>
-//             </CommandList>
-//           </Command>
-//         </PopoverContent>
-//       </Popover>
-//     </>
-//   )
-// }
-
-
-
-import React, { useEffect, useState, useRef, useCallback } from 'react';
-import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover';
-import { Button } from '../../shadcn/button';
-import { cn } from '../../utils/cn';
-import { ChevronsUpDown, X } from 'lucide-react';
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList
-} from '../../shadcn/command';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from '../../shadcn/tooltip';
-import { Checkbox } from '../../shadcn/checkbox';
-
-interface MultiComboboxProps {
-  placeholder: string;
-  items: { value: string; label?: string; disabled?: boolean | ((item: any) => boolean) }[];
-  onValueChange: (selectedItems: string[]) => void;
-  defaultValue?: string[];
-  defaultOptions?: number;
-}
-
-export function MultiCombobox({
-  placeholder,
-  items,
-  onValueChange,
-  defaultValue,
-  defaultOptions = 2
-}: MultiComboboxProps) {
-  const [selectedItems, setSelectedItems] = useState<string[]>(defaultValue || []);
-  const [search, setSearch] = useState("");
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    onValueChange(selectedItems);
-  }, [selectedItems, onValueChange]);
-
-  const filteredItems = items
-    .filter((item) =>
-      (item.label || item.value).toLowerCase().includes(search.toLowerCase())
-    )
-    .sort((a, b) => (a?.label ?? "").localeCompare(b?.label ?? ""));
-
-  const onWheel = (e: React.WheelEvent<HTMLDivElement>) => {
-    const el = e.currentTarget;
-    el.scrollTop += e.deltaY;
-    e.preventDefault();
-  };
-
-  const toggleItem = (value: string) => {
-    const updatedItems = selectedItems.includes(value)
-      ? selectedItems.filter((val) => val !== value)
-      : [...selectedItems, value];
-    setSelectedItems(updatedItems);
-  };
-
-  const [visibleCount, setVisibleCount] = useState(selectedItems.length);
-
-  const calculateVisibleItems = useCallback(() => {
-    const container = containerRef.current;
-    if (!container) return visibleCount;
-
-    const children = Array.from(container.children) as HTMLElement[];
-
-    let availableWidth = container.offsetWidth;
-    let usedWidth = 0;
-    let fitCount = 0;
-
-    for (const child of children) {
-      const childWidth = child.offsetWidth + 4; // Account for gap
-      if (usedWidth + childWidth <= availableWidth) {
-        usedWidth += childWidth;
-        fitCount++;
-      } else {
-        break;
-      }
-    }
-    return fitCount;
-  }, [visibleCount]);
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    let animationFrameId: number | null = null;
-
-    const resizeObserver = new ResizeObserver(() => {
-      if (animationFrameId) cancelAnimationFrame(animationFrameId);
-      animationFrameId = requestAnimationFrame(() => {
-        const newVisibleCount = calculateVisibleItems();
-        setVisibleCount((prevVisibleCount) =>
-          prevVisibleCount !== newVisibleCount ? newVisibleCount : prevVisibleCount
-        );
-      });
-    });
-
-    resizeObserver.observe(container);
-    setVisibleCount(calculateVisibleItems());
-
-    return () => {
-      if (animationFrameId) cancelAnimationFrame(animationFrameId);
-      resizeObserver.disconnect();
-    };
-  }, [calculateVisibleItems]);
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild className="w-full">
-        <Button
-          variant="outline"
-          role="combobox"
-          className={cn("justify-between px-3 py-2 h-10", selectedItems.length === 0 && "text-foreground/50", "bg-secondary")}
-          onClick={() => setOpen((prev) => !prev)}
-        >
-          {selectedItems.length > 0 ? (
-            <TooltipProvider>
-              <div ref={containerRef} className="flex flex-wrap gap-2 items-center overflow-hidden flex-1">
-                {selectedItems.slice(0, defaultOptions).map((value) => {
-                  const label = items.find((item) => item.value === value)?.label || value;
-                  return (
-                    <span
-                      key={value}
-                      className="flex items-center px-2 py-1 bg-secondary text-secondary-foreground rounded-md truncate max-w-full"
-                      title={label}
-                    >
-                      <span className="truncate max-w-[120px]">{label}</span>
-                      <span
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          toggleItem(value);
-                        }}
-                        onKeyDown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            toggleItem(value);
-                          }
-                        }}
-                        className="ml-1 text-muted-foreground hover:text-destructive cursor-pointer outline-none"
-                      >
-                        <X className="w-3 h-3 ml-1" />
-                      </span>
-                    </span>
-                  );
-                })}
-                {selectedItems.length > defaultOptions && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <span className="px-2 py-1 bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground keross:bg-secondary keross:text-secondary-foreground rounded-md cursor-pointer">
-                        +{selectedItems.length - defaultOptions} more
-                      </span>
-                    </TooltipTrigger>
-                    <TooltipContent className="max-w-xs break-words">
-                      <div
-                        onWheel={onWheel}
-                        className="flex flex-col gap-1 max-h-[200px] overflow-auto"
-                      >
-                        {selectedItems.slice(defaultOptions).map((value) => (
-                          <span key={value} className="text-sm">
-                            {items.find((item) => item.value === value)?.label || value}
-                          </span>
-                        ))}
-                      </div>
-                    </TooltipContent>
-                  </Tooltip>
-                )}
-              </div>
-            </TooltipProvider>
-          ) : (
-            <span className="flex-1 text-left truncate">{placeholder}</span>
-          )}
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="p-0 min-w-[var(--radix-popover-trigger-width)]"
-        style={{ width: 'max-content', maxWidth: 'min(500px, 90vw)' }}
-        align="start"
-      >
-        <Command onMouseDown={(e) => e.preventDefault()}>
-          <CommandInput
-            placeholder="Search..."
-            value={search}
-            onValueChange={setSearch}
-          />
-          <CommandList onWheel={onWheel} className="max-h-60 overflow-auto">
-            <CommandEmpty>No items found.</CommandEmpty>
-            <CommandGroup>
-              {filteredItems.map((item) => {
-                const isSelected = selectedItems.includes(item.value);
-                const isDisabled = item.disabled === true || (typeof item.disabled === "function" && item.disabled(item));
-                return (
-                  <CommandItem
-                    key={item.value}
-                    value={item.label || item.value}
-                    disabled={isDisabled}
-                    onPointerDown={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                    }}
-                    onSelect={() => {
-                      if (!isDisabled) {
-                        toggleItem(item.value);
-                      }
-                    }}
-                    className={cn(
-                      "flex items-center justify-between space-x-2",
-                      isDisabled && "opacity-50 cursor-not-allowed"
-                    )}
-                  >
-                    <Checkbox
-                      checked={isSelected}
-                      onCheckedChange={() => {
-                        if (!isDisabled) {
-                          toggleItem(item.value);
-                        }
-                      }}
-                      onClick={(e) => e.stopPropagation()}
-                      disabled={isDisabled}
-                    />
-                    <span className="flex-grow text-left">
-                      {item?.label || item.value}
-                    </span>
-                  </CommandItem>
-                );
-              })}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
-}
-

package/templates/default/ikoncomponents/no-data/index.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { CircleAlert } from "lucide-react";
-
-export function NoDataComponent({ text }: { text?: string }) {
-  return (
-    <div className="flex flex-col h-full justify-center text-center gap-2">
-      <CircleAlert className="text-muted-foreground mx-auto" size={36} />
-      <p className="text-muted-foreground">{text ? text : "No Data Available"}</p>
-    </div>
-  );
-}

package/templates/default/ikoncomponents/page-wrapper/index.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import React, { ReactNode } from "react";
-
-interface Props {
-  title?: string | ReactNode;
-  subtitle?: string | ReactNode;
-  tools?: ReactNode;
-  children: ReactNode;
-}
-
-export function PageWrapper({ title, subtitle, tools, children }: Props) {
-  title = title ?? '';
-  subtitle = subtitle ?? '';
-
-  return (
-    <div className={"flex flex-col gap-4 h-full"}>
-      <div className={"flex items-center justify-between gap-4"}>
-        <div className={'grid grid-cols-1 gap-1'}>
-          {title && <h1 className={'text-2xl font-semibold'}>{title}</h1>}
-          {subtitle && <p className={'text-muted-foreground/60'}>{subtitle}</p>}
-        </div>
-        <div>
-          {tools}
-        </div>
-      </div>
-      {children}
-    </div>
-  );
-}

package/templates/default/ikoncomponents/password-strength-meter/index.tsx

@@ -1,49 +0,0 @@
-import { Progress } from "../../shadcn/progress";
-import React, { useState } from "react";
-import zxcvbn from "zxcvbn";
-
-export const PasswordStrengthMeter = ({ value }: { value: string }) => {
-  const testResult = zxcvbn(value);
-  const num = (testResult.score * 100) / 4;
-
-  const createPassLabel = () => {
-    switch (testResult.score) {
-      case 0:
-        return "Very weak";
-      case 1:
-        return "Weak";
-      case 2:
-        return "Fair";
-      case 3:
-        return "Good";
-      case 4:
-        return "Strong";
-      default:
-        return "";
-    }
-  };
-
-  const funcProgressColor = () => {
-    switch (testResult.score) {
-      case 0:
-        return "#828282";
-      case 1:
-        return "#EA1111";
-      case 2:
-        return "#FFAD00";
-      case 3:
-        return "#9bc158";
-      case 4:
-        return "#00b500";
-      default:
-        return "";
-    }
-  };
-
-
-  return (
-    <>
-      <Progress value={num} indicatorColor={funcProgressColor()} />
-    </>
-  );
-};

package/templates/default/ikoncomponents/phone-input/index.tsx

@@ -1,72 +0,0 @@
-import * as React from "react";
-import { Button } from '../../shadcn/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../shadcn/command'
-import { Popover, PopoverContent, PopoverTrigger } from '../../shadcn/popover'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { useState } from 'react'
-import { countries } from 'countries-list'
-import * as Flags from "country-flag-icons/react/3x2";
-
-const Flag = ({ code }: { code: string }) => {
-    const FlagComponent = Flags[code as keyof typeof Flags];
-    return <FlagComponent />;
-};
-
-export function PhoneInput({ className, ...props }: any) {
-    const [open, setOpen] = useState(false)
-    const [value, setValue] = useState<string>("")
-    const [countryCode, setCountryCode] = useState<string>("")
-
-    return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    variant="outline"
-                    role="combobox"
-                    aria-expanded={open}
-                    className="justify-between bg-secondary"
-                >
-                    {countryCode
-                        ? <Flag code={countryCode} />
-                        : "..."}
-                    <ChevronsUpDown className="opacity-50" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="p-0" align='start'>
-                <Command
-                    filter={(value, search, keywords = []) => {
-                        const extendValue = value.toLowerCase() + ' ' + keywords.join(' ').toLowerCase()
-                        if (extendValue.includes(search.toLowerCase())) return 1
-                        return 0
-                    }}
-
-                >
-                    <CommandInput placeholder="Search ..." className="h-9" />
-                    <CommandList>
-                        <CommandEmpty>No country found.</CommandEmpty>
-                        <CommandGroup>
-                            {Object.entries(countries).map(([code, country]) => (
-                                country.phone.map((phone) =>
-                                    <CommandItem
-                                        key={phone}
-                                        value={`${phone}`}
-                                        keywords={[country.name, "+" + phone.toString(), code]}
-                                        onSelect={(currentValue) => {
-                                            setValue(currentValue === value ? "" : currentValue)
-                                            setCountryCode(code)
-                                            setOpen(false)
-                                        }}
-                                    //className={(value == phone.toString()) ? "bg-accent" : ""}
-                                    >
-                                        <Flag code={code} /> {country.name} +{phone}
-
-                                    </CommandItem>
-                                )
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-            </PopoverContent>
-        </Popover>
-    )
-}

package/templates/default/ikoncomponents/provider-wrapper/index.tsx

@@ -1,32 +0,0 @@
-"use client";
-
-import React from "react";
-import { ThemeProvider } from "../../utils/theme-provider";
-import { FontProvider } from "../../utils/font-provider";
-import { RadiusProvider } from "../../utils/border-radius-provider";
-import { BreadcrumbProvider } from "../app-breadcrumb/BreadcrumbProvider";
-import { MainLayout } from "../main-layout";
-
-export function ProviderWrapper({ 
-    children, 
-    baseUrl, 
-    platformUrl 
-}: { 
-    children: React.ReactNode; 
-    baseUrl: string;
-    platformUrl: string;
-}) {
-    return (
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-            <FontProvider>
-                <RadiusProvider>
-                    <BreadcrumbProvider>
-                        <MainLayout baseUrl={baseUrl} platformUrl={platformUrl}>
-                            {children}
-                        </MainLayout>
-                    </BreadcrumbProvider>
-                </RadiusProvider>
-            </FontProvider>
-        </ThemeProvider>
-    );
-}

package/templates/default/ikoncomponents/search-input/index.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import { Input } from '../../shadcn/input'
-import { cx } from 'class-variance-authority'
-import { Search } from 'lucide-react'
-
-export function SearchInput({ className, ...props }: any) {
-    return (
-        <div className="relative w-auto flex items-center">
-            <Search className="absolute left-2 mr-2 h-4 w-4 shrink-0 opacity-50" />
-            <Input
-                className={cx(
-                    'pl-8 h-8',
-                    className
-                )}
-                {...props} />
-        </div>
-    )
-}

package/templates/default/ikoncomponents/sheet/index.tsx

@@ -1,34 +0,0 @@
-import * as React from "react"
-import { Button } from "../../shadcn/button"
-import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "../../shadcn/sheet"
-
-export function SheetComponent({
-  buttonText,
-  buttonIcon,
-  buttonStyle,
-  sheetContent,
-  sheetDescription,
-  sheetTitle,
-  closeButton
-}: {
-  buttonText?: React.ReactNode,
-  buttonIcon?: React.ReactNode,
-  buttonStyle?: string,
-  sheetTitle?: React.ReactNode,
-  sheetDescription?: React.ReactNode,
-  sheetContent?: React.ReactNode,
-  closeButton?: boolean
-
-}) {
-  return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button variant='outline' className={buttonStyle} size={"smIcon"}>{buttonText}{buttonIcon}</Button>
-      </SheetTrigger>
-      <SheetContent className="p-4" >
-        <SheetTitle>{sheetTitle}</SheetTitle>
-        {sheetContent}
-      </SheetContent>
-    </Sheet>
-  )
-}

package/templates/default/ikoncomponents/simple-widget/index.tsx

@@ -1,54 +0,0 @@
-import { Card, CardContent } from "../../shadcn/card";
-import { icons, LoaderCircle, LucideIcon } from "lucide-react";
-import React, { ReactNode } from "react";
-
-interface Props {
-  title: string;
-  iconName?: string;
-  iconSize?: number;
-  iconClass?: string;
-  primaryText: number | string | ReactNode;
-  secondaryText?: string | ReactNode;
-  mainClassName?: string;
-  loading?: boolean;
-  loadingMessage?: string;
-}
-
-const LUCID_ICONS: Record<string, LucideIcon> = icons;
-
-export function SimpleWidget({ title, iconName, iconSize, iconClass, primaryText, secondaryText, mainClassName = '', loading, loadingMessage }: Props) {
-  let IconComponent: LucideIcon | null = null;
-
-  if (iconName) {
-    IconComponent = LUCID_ICONS[iconName]
-  }
-
-  iconSize = iconSize === undefined ? 20 : iconSize;
-  iconClass = iconClass ?? '';
-  loadingMessage = loadingMessage ?? 'Loading...';
-
-  return (
-    <Card className={mainClassName}>
-      <CardContent className={'p-5'}>
-        <div className={'flex items-center justify-between gap-4'}>
-          <span>{title}</span>
-          {loading ? (
-            <LoaderCircle size={iconSize} className={'animate-spin ' + iconClass} />
-          ) : (
-            IconComponent && <IconComponent size={iconSize} className={iconClass} />
-          )}
-        </div>
-
-        <div className={'mt-6 text-2xl font-semibold'}>
-          {loading ? '...' : primaryText}
-        </div>
-
-        {secondaryText && (
-          <small className={'mt-2 text-gray-400'}>
-            {loading ? loadingMessage : secondaryText}
-          </small>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/templates/default/ikoncomponents/skeleton-loader/skeleton-table.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { Skeleton } from "../../shadcn/skeleton";
-
-export interface GradeTableLoaderProps {
-  rowCount?: number;
-  showToolbar?: boolean;
-}
-
-export function GradeTableLoader({
-  rowCount = 6,
-  showToolbar = true,
-}: GradeTableLoaderProps) {
-  return (
-    <div className="space-y-4">
-      {/* Top action bar */}
-      {showToolbar && (
-        <div className="flex justify-between">
-          <Skeleton className="h-8 w-64 rounded-md" />
-          <Skeleton className="h-8 w-32 rounded-md" />
-        </div>
-      )}
-
-      {/* Table body rows */}
-      <div className="space-y-4">
-        {[...Array(rowCount)].map((_, i) => (
-          <div key={i} className="grid gap-4 items-center">
-            <Skeleton className="h-8 w-full" />
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}