ikoncomponents 1.4.8 → 1.5.0

package/templates/default/ikoncomponents/big-calendar/index.tsx

@@ -0,0 +1,59 @@
+'use client';
+import { format, getDay, parse, startOfWeek } from "date-fns";
+import { Calendar, dateFnsLocalizer, Views } from "react-big-calendar";
+import "react-big-calendar/lib/css/react-big-calendar.css";
+import { useState } from "react";
+import { BigCalendarProps } from "./type";
+import BigCalenderToolbar from "./big-calender-toolbar";
+import BigCalenderEvent from "./big-calender-event";
+import { enUS } from 'date-fns/locale';
+
+// Localization settings
+const locales = {
+    "en-US": enUS,
+};
+
+const localizer = dateFnsLocalizer({
+    format,
+    parse,
+    startOfWeek,
+    getDay,
+    locales,
+});
+
+
+export function BigCalendar({ events, extraParamsEvent, extraTools }: BigCalendarProps) {
+    const [view, setView] = useState(
+        extraParamsEvent?.defaultView === "day" ? Views.DAY :
+            extraParamsEvent?.defaultView === "week" ? Views.WEEK :
+                extraParamsEvent?.defaultView === "month" ? Views.MONTH :
+                    extraParamsEvent?.defaultView === "work week" ? Views.WORK_WEEK :
+                        extraParamsEvent?.defaultView === "agenda" ? Views.AGENDA : Views.MONTH
+    );
+    const [date, setDate] = useState(new Date());
+
+
+    return (
+        <Calendar
+            localizer={localizer}
+            events={events || []}
+            startAccessor="start"
+            endAccessor="end"
+            views={[Views.DAY, Views.WEEK, Views.MONTH]}
+            view={view}
+            onView={(view) => setView(view)}
+            date={date}
+            onNavigate={(date) => setDate(date)}
+            components={{
+                event: (props) => <BigCalenderEvent event={props.event} extraParamsEvent={extraParamsEvent} />,
+                toolbar: (props) => <BigCalenderToolbar {...props} extraTools={extraTools} view={view} />,
+            }}
+            style={{
+                height: extraParamsEvent?.height || "100%",
+                margin: extraParamsEvent?.margin || "0px",
+            }}
+        />
+    );
+}
+
+  

package/templates/default/ikoncomponents/big-calendar/type.ts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+//import { Event } from "react-big-calendar";
+
+export interface BigCalendarProps {
+  events: BigCalendarEventProps[];
+  extraParamsEvent?: ExtraParamsEvent;
+  extraTools?: ReactNode[];
+  onDateClick?: (date: Date) => void;
+}
+
+export interface ExtraParamsEvent {
+  defaultView?: string;
+  isEditableAll?: boolean;
+  isViewable?: boolean;
+  onEditEventClick?: (event: BigCalendarEventProps) => void;
+  onViewEventClick?: (event: BigCalendarEventProps) => void;
+  height?: string;
+  margin?: string;
+}
+
+export interface BigCalendarEventProps extends Event {
+  title?: string;
+  isEditable?: boolean;
+  isViewable?: boolean;
+  start: Date;
+  end: Date;
+  onEventClick?: (event: any) => void;
+}
+
+export interface BigCalenderToolbarProps {
+  onNavigate: (view: any) => void;
+  onView: (view: any) => void;
+  label: string;
+  extraTools?: ReactNode[];
+  view: "month" | "week" | "work_week" | "day" | "agenda";
+  //extraParamsEvent?: ExtraParamsEvent;
+}

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

@@ -0,0 +1,127 @@
+import React from "react";
+import { TooltipComponent as Tooltip } from "../tooltip";
+import { Button, buttonVariants } from "../../ikonShade/button";
+import { type VariantProps } from "class-variance-authority";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export interface ButtonWithTooltipProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  VariantProps<typeof buttonVariants> {
+  children: React.ReactNode;
+  asChild?: boolean;
+  tooltipContent: string | React.ReactNode;
+}
+
+export function TextButton({
+  children,
+  variant,
+  asChild = false,
+  size,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button variant={variant} size={size} {...props} asChild={asChild}>
+      {children}
+    </Button>
+  );
+}
+
+export function TextButtonWithTooltip({
+  children,
+  variant,
+  asChild = false,
+  size,
+  tooltipContent,
+  ...props
+}: ButtonWithTooltipProps) {
+  return (
+    <Tooltip tooltipContent={tooltipContent}>
+      <TextButton variant={variant} size={size} {...props} asChild={asChild}>
+        {children}
+      </TextButton>
+    </Tooltip>
+  );
+}
+
+export function IconTextButton({
+  children,
+  variant,
+  asChild = false,
+  size,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      variant={variant || "outline"}
+      size={size || "sm"}
+      {...props}
+      asChild={asChild}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function IconTextButtonWithTooltip({
+  children,
+  variant,
+  size,
+  asChild = false,
+  tooltipContent,
+  ...props
+}: ButtonWithTooltipProps) {
+  return (
+    <Tooltip tooltipContent={tooltipContent}>
+      <IconTextButton
+        variant={variant}
+        size={size}
+        {...props}
+        asChild={asChild}
+      >
+        {children}
+      </IconTextButton>
+    </Tooltip>
+  );
+}
+
+export function IconButton({
+  children,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  return (
+    <Button
+      variant={variant || "outline"}
+      size={size || "icon"}
+      {...props}
+      asChild={asChild}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function IconButtonWithTooltip({
+  children,
+  tooltipContent,
+  asChild = false,
+  variant,
+  size,
+  ...props
+}: ButtonWithTooltipProps) {
+  return (
+    <Tooltip tooltipContent={tooltipContent}>
+      <IconButton variant={variant} size={size} {...props} asChild={asChild}>
+        {children}
+      </IconButton>
+    </Tooltip>
+  );
+}

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

@@ -0,0 +1,75 @@
+import React, { useEffect, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ikonShade/popover";
+import { Button } from "../../ikonShade/button";
+import { Check, ChevronsUpDown } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../ikonShade/command";
+import { ComboBoxInputProps } from "./type";
+import { cn } from "../../utils/cn";
+
+export function ComboboxInput({
+  placeholder,
+  items,
+  disabled,
+  onSelect,
+  defaultValue
+}: ComboBoxInputProps) {
+  const [value, setValue] = useState(defaultValue ? defaultValue : '');
+  return (
+    <>
+      <Popover>
+        <PopoverTrigger asChild className="w-full">
+          <Button
+            variant="outline"
+            role="combobox"
+            className={cn("justify-between", !value && "text-muted-foreground", "bg-secondary")}
+            disabled={disabled == true || (disabled && disabled(...arguments))}
+          >
+            {value
+              ? items.find((item) => item.value === value)?.label || value
+              : 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) => (
+                  <CommandItem
+                    value={item.value}
+                    key={item.value}
+                    disabled={
+                      item.disabled == true ||
+                      (item.disabled && item.disabled(item))
+                    }
+                    onSelect={(value) => {
+                      setValue(value);
+                      onSelect && onSelect(value);
+                    }}
+                  >
+                    {item?.label || item.value}
+                    <Check
+                      className={cn(
+                        "ml-auto",
+                        item.value === value ? "opacity-100" : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

package/templates/default/ikoncomponents/combobox-input/type.ts

@@ -0,0 +1,14 @@
+export interface ComboBoxInputProps {
+  placeholder?: string;
+  items: ComboboxItemProps[];
+  onSelect?: (value: string | string[]) => void;
+  disabled?: ((...args: any) => boolean) | boolean;
+  defaultValue?:string,
+}
+
+export interface ComboboxItemProps {
+  value: string;
+  label?: string | undefined;
+  extra?: any;
+  disabled?: ((...args: any) => boolean) | boolean;
+}

package/templates/default/ikoncomponents/custom-combo-dropdown/index.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import * as React from "react";
+import { Check, ChevronsUpDown, Plus } from "lucide-react";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "../../ikonShade/form";
+import { cn } from "../../utils/cn";
+import { Button } from "../../ikonShade/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../../ikonShade/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ikonShade/popover";
+import { Input } from "../../ikonShade/input";
+
+export type Option = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+
+type CustomComboboxInputProps = {
+    formControl: any;
+    name: string;
+    label?: string | React.ReactNode;
+    options: Option[];
+    placeholder?: string;
+    emptyMessage?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    addNewPlaceholder?: string;
+    formDescription?: string;
+    disabled?: boolean;
+};
+
+export function CustomComboboxInput({
+    formControl,
+    name,
+    label,
+    options,
+    placeholder = "Select an option",
+    emptyMessage = "No options found.",
+    onValueChange,
+    className,
+    addNewPlaceholder = "Add custom value...",
+    formDescription,
+    disabled, 
+}: CustomComboboxInputProps) {
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const [items, setItems] = React.useState<Option[]>(options);
+    const [isAddingNew, setIsAddingNew] = React.useState(false);
+    const [newValue, setNewValue] = React.useState("");
+
+    React.useEffect(() => {
+        setItems(options);
+    }, [options]);
+
+    return (
+        <FormField
+            control={formControl}
+            name={name}
+            render={({ field }) => {
+                const selectedItem = items.find((item) => item.value === field.value);
+
+                const handleAddNewItem = () => {
+                    const trimmedValue = newValue.trim();
+                    if (!trimmedValue) return;
+
+                    if (items.some((item) => item.value === trimmedValue)) {
+                        const existingItem = items.find(i => i.value === trimmedValue);
+                        if (existingItem) {
+                            field.onChange(existingItem.value);
+                            onValueChange?.(existingItem.value);
+                            setNewValue("");
+                            setIsAddingNew(false);
+                            setOpen(false);
+                            setSearchValue("");
+                        }
+                        return;
+                    }
+
+                    const newOption: Option = {
+                        value: trimmedValue,
+                        label: trimmedValue, 
+                        disabled: true,
+                    };
+
+                    setItems((prev) => [...prev, newOption]);
+                    field.onChange(trimmedValue);
+                    onValueChange?.(trimmedValue);
+
+                    setNewValue("");
+                    setIsAddingNew(false);
+                    setOpen(false);
+                    setSearchValue("");
+                };
+
+                return (
+                    <FormItem className={cn(className)}> 
+                        {label && (
+                            <>
+                                <FormLabel>{label}</FormLabel>
+                                <br />
+                            </>
+                        )}
+                        <Popover
+                            open={open}
+                            onOpenChange={(isOpen) => {
+                                setOpen(isOpen);
+                                if (!isOpen) {
+                                    setSearchValue(""); 
+                                    setIsAddingNew(false);
+                                    setNewValue("");     
+                                }
+                            }}
+                        >
+                            <PopoverTrigger asChild>
+                                <FormControl>
+                                    <Button
+                                        variant="outline"
+                                        role="combobox"
+                                        aria-expanded={open}
+                                        className={cn(
+                                            "w-full justify-between",
+                                            !field.value && "text-foreground/50",
+                                            className 
+                                        )}
+                                    disabled={disabled || field.disabled}
+                                    >
+                                        <span className="line-clamp-1 text-left">
+                                            {field.value
+                                                ? selectedItem
+                                                    ? selectedItem.label
+                                                    : field.value
+                                                : placeholder}
+                                        </span>
+                                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                                    </Button>
+                                </FormControl>
+                            </PopoverTrigger>
+                            <PopoverContent className="p-0 w-[--radix-popover-trigger-width]" align="start">
+                                <Command shouldFilter={true}> 
+                                    <CommandInput
+                                        placeholder="Search..."
+                                        value={searchValue}
+                                        onValueChange={setSearchValue}
+                                    />
+                                    <CommandList>
+                                        <CommandEmpty>
+                                            {searchValue && items.length > 0 ? "No results found." : emptyMessage}
+                                        </CommandEmpty>
+                                        <CommandGroup>
+                                            {items
+                                                .filter(item => item.label.toLowerCase().includes(searchValue.toLowerCase()) || item.value.toLowerCase().includes(searchValue.toLowerCase()))
+                                                .map((item) => (
+                                                    <CommandItem
+                                                        key={item.value}
+                                                        value={item.value} 
+                                                        onSelect={(currentValue) => { 
+                                                            field.onChange(currentValue);
+                                                            onValueChange?.(currentValue);
+                                                            setOpen(false);
+                                                            setSearchValue(""); 
+                                                        }}
+                                                        className="cursor-pointer"
+                                                    disabled={item?.disabled} 
+                                                    >
+                                                        <Check
+                                                            className={cn(
+                                                                "mr-2 h-4 w-4",
+                                                                field.value === item.value
+                                                                    ? "opacity-100"
+                                                                    : "opacity-0"
+                                                            )}
+                                                        />
+                                                        {item.label}
+                                                    </CommandItem>
+                                                ))}
+                                        </CommandGroup>
+                                    </CommandList>
+                                    <div className="border-t p-2">
+                                        {isAddingNew ? (
+                                            <div className="flex items-center gap-2">
+                                                <Input
+                                                    placeholder={addNewPlaceholder}
+                                                    value={newValue}
+                                                    onChange={(e) => setNewValue(e.target.value)}
+                                                    onKeyDown={(e) => {
+                                                        if (e.key === "Enter") {
+                                                            e.preventDefault();
+                                                            handleAddNewItem();
+                                                        }
+                                                        if (e.key === "Escape") {
+                                                            setIsAddingNew(false);
+                                                            setNewValue("");
+                                                        }
+                                                    }}
+                                                    autoFocus
+                                                    className="h-8"
+                                                />
+                                                <Button
+                                                    size="sm"
+                                                    variant="ghost"
+                                                    onClick={() => {
+                                                        setIsAddingNew(false);
+                                                        setNewValue("");
+                                                    }}
+                                                    className="h-8"
+                                                >
+                                                    Cancel
+                                                </Button>
+                                                <Button
+                                                    size="sm"
+                                                    variant="default"
+                                                    onClick={handleAddNewItem}
+                                                    className="h-8"
+                                                    disabled={!newValue.trim() || items.some(item => item.value === newValue.trim())}
+                                                >
+                                                    Add
+                                                </Button>
+                                            </div>
+                                        ) : (
+                                            <Button
+                                                variant="outline"
+                                                className="w-full justify-start"
+                                                onClick={() => setIsAddingNew(true)}
+                                            >
+                                                <Plus className="mr-2 h-4 w-4" />
+                                                Add new option
+                                            </Button>
+                                        )}
+                                    </div>
+                                </Command>
+                            </PopoverContent>
+                        </Popover>
+                        {formDescription && (
+                            <FormDescription>{formDescription}</FormDescription>
+                        )}
+                        <FormMessage />
+                    </FormItem>
+                );
+            }}
+        />
+    );
+}

package/templates/default/ikoncomponents/data-table/datatable-column-filter/index.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../../../ikonShade/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { Check, Columns, PlusCircle, Settings2 } from "lucide-react";
+import { DataTableViewOptionsProps } from "../type";
+import { getDataTableColumnTitle } from "../function";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+import { IconButton, IconTextButton } from "../../buttons";
+import { cn } from "../../../utils/cn";
+
+export function DataTableColumnFilter<TData>({
+  table,
+}: DataTableViewOptionsProps<TData>) {
+  return (
+    <Popover>
+      <Tooltip tooltipContent="Column View">
+        <PopoverTrigger asChild>
+          <IconTextButton>
+            <Settings2 />
+            View
+          </IconTextButton>
+        </PopoverTrigger>
+      </Tooltip>
+      <PopoverContent className="w-[220px] p-0" align="end">
+        <Command>
+          <CommandInput placeholder={"Search..."} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {table
+                .getAllColumns()
+                .filter(
+                  (column) =>
+                    typeof column.accessorFn !== "undefined" &&
+                    column.getCanHide()
+                )
+                .map((column) => {
+                  const isVisbile = column.getIsVisible();
+                  return (
+                    <CommandItem
+                      key={column.id}
+                      onSelect={() => {
+                        column.toggleVisibility(!isVisbile);
+                      }}
+                      disabled={column.getIsGrouped()}
+                    >
+                      <div
+                        className={cn(
+                          "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white",
+                          isVisbile
+                            ? "bg-black dark:bg-white text-white dark:text-black"
+                            : "opacity-50 [&_svg]:invisible"
+                        )}
+                      >
+                        <Check />
+                      </div>
+                      <span
+                        className="overflow-hidden text-ellipsis"
+                        title={getDataTableColumnTitle(column)}
+                      >
+                        {getDataTableColumnTitle(column)}
+                      </span>
+                    </CommandItem>
+                  );
+                })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}