ikoncomponents 1.4.8 → 1.5.0

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

@@ -0,0 +1,345 @@
+// 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 '../../ikonShade/popover';
+import { Button } from '../../ikonShade/button';
+import { cn } from '../../utils/cn';
+import { ChevronsUpDown, X } from 'lucide-react';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '../../ikonShade/command';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from '../../ikonShade/tooltip';
+import { Checkbox } from '../../ikonShade/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

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

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

@@ -0,0 +1,49 @@
+import { Progress } from "../../ikonShade/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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Button } from '../../ikonShade/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../ikonShade/command'
+import { Popover, PopoverContent, PopoverTrigger } from '../../ikonShade/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

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Input } from '../../ikonShade/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

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { Button } from "../../ikonShade/button"
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "../../ikonShade/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

@@ -0,0 +1,54 @@
+import { Card, CardContent } from "../../ikonShade/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

@@ -0,0 +1,34 @@
+"use client";
+
+import { Skeleton } from "../../ikonShade/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>
+  );
+}