ikoncomponents 1.4.8 → 1.4.9

package/templates/default/ikoncomponents/e-chart/index.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import React, { ForwardedRef, forwardRef, JSX, useEffect, useImperativeHandle, useRef } from 'react';
+import { EChartsType, getInstanceByDom, init, ResizeOpts } from 'echarts';
+
+interface Props {
+  parentDivProps?: any;
+  option?: Record<string | number, any>;
+  style?: Record<string, string>;
+  settings?: Record<string, any>;
+  loading?: boolean;
+  theme?: string | object | null;
+  isConfigurable?: boolean;
+  resizeKey?: null | boolean | number | string;
+  onClick?: (...args: any) => void;
+  onConfigure?: (...args: any) => void;
+}
+
+function validateOption(option?: null | Record<string, any>): Record<string, any> {
+  if (option === undefined || option === null || typeof option !== 'object') {
+    option = {};
+  }
+
+  const validatedOption = { ...option };
+
+  if (
+    validatedOption.toolbox === undefined ||
+    validatedOption.toolbox === null ||
+    typeof validatedOption.toolbox !== 'object'
+  ) {
+    validatedOption.toolbox = {};
+  }
+
+  if (
+    validatedOption.toolbox.feature === undefined ||
+    validatedOption.toolbox.feature === null ||
+    typeof validatedOption.toolbox.feature !== 'object'
+  ) {
+    validatedOption.toolbox.feature = {};
+  }
+
+  return validatedOption;
+}
+
+export const EChart = forwardRef<HTMLElement, Props>((
+  {
+    parentDivProps = {},
+    option = {},
+    style = {},
+    settings = {},
+    loading = true,
+    theme,
+    isConfigurable = false,
+    resizeKey,
+    onClick = () => { },
+    onConfigure = () => { }
+  },
+  ref
+) => {
+  const chartRef = useRef<HTMLDivElement | null>(null);
+  const chartInstanceRef = useRef<EChartsType | null>(null);
+
+  const validatedOption = validateOption(option);
+
+  if (isConfigurable) {
+    validatedOption.toolbox.feature = {
+      ...validatedOption.toolbox.feature,
+      myConfigureChartTool: {
+        show: true,
+        title: 'Configure Chart',
+        icon: 'image://data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNldHRpbmdzLTIiPjxwYXRoIGQ9Ik0yMCA3aC05Ii8+PHBhdGggZD0iTTE0IDE3SDUiLz48Y2lyY2xlIGN4PSIxNyIgY3k9IjE3IiByPSIzIi8+PGNpcmNsZSBjeD0iNyIgY3k9IjciIHI9IjMiLz48L3N2Zz4=',
+        onclick: () => onConfigure?.()
+      }
+    };
+  }
+
+  useImperativeHandle<HTMLElement, any>(ref, () => {
+    return {
+      getChartObject: () => {
+        return chartRef.current ? getInstanceByDom(chartRef.current) : null;
+      },
+
+      setOption: (validatedOption: any, settings: any) => {
+        if (!chartRef.current) {
+          return;
+        }
+
+        const chart = getInstanceByDom(chartRef.current);
+        chart?.setOption(validatedOption, settings);
+      },
+
+      resize: (secondResizeDelay = 0) => {
+        if (!chartRef.current) {
+          return;
+        }
+
+        const chart = getInstanceByDom(chartRef.current);
+        chart?.resize();
+
+        if (secondResizeDelay) {
+          setTimeout(() => chart?.resize(), secondResizeDelay);
+        }
+      },
+
+      loadingVisible: (visibility?: boolean) => {
+        if (!chartRef.current) {
+          return;
+        }
+
+        const chart = getInstanceByDom(chartRef.current);
+        visibility ? chart?.showLoading() : chart?.hideLoading();
+      },
+
+      dispose: () => {
+        if (!chartRef.current) {
+          return;
+        }
+
+        const chart = getInstanceByDom(chartRef.current);
+        chart?.dispose();
+      },
+
+      on: (eventName: string, callback: (...args: any) => void) => {
+        if (!chartRef.current) {
+          return;
+        }
+
+        const chart = getInstanceByDom(chartRef.current);
+        chart?.on(eventName, callback);
+      }
+    };
+  });
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartInstanceRef.current = init(chartRef.current, theme);
+    }
+
+    const resizeCallback = () => chartInstanceRef.current?.resize?.();
+    window.addEventListener('resize', resizeCallback);
+
+    return () => {
+      if (chartInstanceRef.current) {
+        chartInstanceRef.current.dispose();
+        chartInstanceRef.current = null;
+      }
+
+      window.removeEventListener('resize', resizeCallback);
+    };
+  }, [theme]);
+
+  useEffect(() => {
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.setOption(validatedOption, settings);
+    }
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.on('click', onClick);
+    }
+  }, [option, settings, theme]);
+
+  useEffect(() => {
+    if (chartInstanceRef.current) {
+      chartInstanceRef.current.resize();
+    }
+  }, [resizeKey]);
+
+  useEffect(() => {
+    if (chartInstanceRef.current) {
+      setTimeout(() => {
+        chartInstanceRef.current?.resize();
+      }, 500);
+    }
+  }, []);
+
+  return (
+    <div
+      ref={chartRef}
+      {...parentDivProps}
+      style={{ width: '100%', height: '100%', ...style }}
+    />
+  );
+});
+

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

@@ -0,0 +1,27 @@
+import React, { useRef } from 'react'
+import { Upload } from 'lucide-react'
+import { Input } from '../../ikonShade/input'
+import { IconButtonWithTooltip } from '../buttons';
+
+export function FileInput({ tooltipContent, fileNamePlaceholder, fileName, onFileNameChange, ...props }: any) {
+    const inputRef = useRef<HTMLInputElement>(null);
+    return (
+        <>
+            <div className='flex'>
+                <Input
+                    ref={inputRef}
+                    type="file"
+                    className="hidden"
+                    {...props}
+                />
+                <div className='mx-1'></div>
+                <Input className='rounded-e-none' placeholder={fileNamePlaceholder} onChange={(...args: any) => onFileNameChange?.(...args)} value={fileName} />
+                <IconButtonWithTooltip tooltipContent={tooltipContent || "Browse File"} onClick={() => inputRef?.current?.click()} className='border-s-0 rounded-s-none'>
+                    <Upload />
+                </IconButtonWithTooltip>
+            </div>
+        </>
+    )
+}
+
+

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

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useState, DragEvent } from "react";
+import { UploadCloud, FileUp } from "lucide-react";
+
+export interface FileUploaderProps {
+  label?: string;
+  isDrag?: boolean; // enable or disable drag & drop
+  onFileSelect: (fileObj: any) => Promise<any> | void; // now returns object with base64
+}
+
+// --- Helper: Convert File to Object with Base64 ---
+export const convertFileToObject = async (file: File) => {
+  const arrayBuffer = await file.arrayBuffer();
+  const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
+
+  return {
+    message: "File processed successfully",
+    fileName: file.name,
+    size: file.size,
+    type: file.type,
+    lastModified: file.lastModified,
+    base64: base64,
+  };
+};
+
+export function FileUploader({
+  label = "Upload File",
+  isDrag = false,
+  onFileSelect,
+}: FileUploaderProps) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFile = async (file: File) => {
+    if (!file) return;
+    const fileObj = await convertFileToObject(file); // convert to object
+    await onFileSelect(fileObj); // pass object to parent
+  };
+
+  // ---- DRAG HANDLERS ----
+  const handleDrop = (e: DragEvent<HTMLDivElement>) => {
+    if (!isDrag) return;
+    e.preventDefault();
+    setIsDragging(false);
+
+    const file = e.dataTransfer.files?.[0];
+    if (file) handleFile(file);
+  };
+
+  const handleDragOver = (e: DragEvent<HTMLDivElement>) => {
+    if (!isDrag) return;
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = () => {
+    if (!isDrag) return;
+    setIsDragging(false);
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) handleFile(file);
+  };
+
+  return (
+    <div className="flex flex-col gap-2 w-full">
+      <label className="text-sm font-medium">{label}</label>
+
+      <input
+        type="file"
+        id="fileInput"
+        className="hidden"
+        onChange={handleInputChange}
+      />
+
+      {/* ----- DRAG & DROP VERSION ----- */}
+      {isDrag ? (
+        <div
+          className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition
+            ${isDragging ? "border-blue-600 bg-blue-50" : "border-gray-300"}
+          `}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => document.getElementById("fileInput")?.click()}
+        >
+          <div className="flex flex-col items-center gap-3">
+            <UploadCloud className="w-10 h-10 text-blue-600" />
+            <p className="text-gray-600">
+              Drag & drop your file here or{" "}
+              <span className="text-blue-600 underline">browse</span>
+            </p>
+          </div>
+        </div>
+      ) : (
+        // ----- SIMPLE UPLOAD BOX -----
+        <div
+          className="border rounded-lg p-4 flex flex-col items-center gap-2 cursor-pointer text-center"
+          onClick={() => document.getElementById("fileInput")?.click()}
+        >
+          <FileUp className="w-8 h-8 text-blue-600" />
+          <span className="text-blue-600 underline">Browse File</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// --- Helper Function: Recreate Image from File Object ---
+export function getImageFromObject(obj: any) {
+  const byteCharacters = atob(obj.base64);
+  const byteNumbers = new Array(byteCharacters.length)
+    .fill(0)
+    .map((_, i) => byteCharacters.charCodeAt(i));
+  const byteArray = new Uint8Array(byteNumbers);
+
+  const blob = new Blob([byteArray], { type: obj.type });
+
+  return URL.createObjectURL(blob); // usable in <img src="..." />
+}

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

@@ -0,0 +1,111 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../ikonShade/form";
+import React from "react";
+import { FormComboboxInputProps } from "../types";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { Button } from "../../../ikonShade/button";
+import { cn } from "../../../utils/cn";
+import { Check, ChevronsUpDown } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ikonShade/command";
+
+export function FormComboboxInput({
+  formControl,
+  name,
+  label,
+  placeholder,
+  formDescription,
+  items,
+  disabled,
+  onSelect,
+}: FormComboboxInputProps) {
+  return (
+    <>
+      <FormField
+        control={formControl}
+        name={name}
+        render={({ field }) => (
+          <FormItem className="">
+            {label && (
+              <>
+                <FormLabel>{label}</FormLabel>
+
+              </>
+            )}
+            <Popover>
+              <PopoverTrigger asChild className="w-full">
+                <FormControl>
+                  <Button
+                    variant="outline"
+                    role="combobox"
+                    className={cn(
+                      "justify-between",
+                      !field.value && "text-muted-foreground"
+                    )}
+                    disabled={
+                      disabled == true ||
+                      (disabled && disabled(...arguments))
+                    }
+                  >
+                    {field.value
+                      ? items.find((item) => item.value === field.value)
+                        ?.label || field.value
+                      : placeholder}
+                    <ChevronsUpDown className="opacity-50" />
+                  </Button>
+                </FormControl>
+              </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) => {
+                            field.onChange(value);
+                            onSelect && onSelect(value);
+                          }}
+                        >
+                          {item?.label || item.value}
+                          <Check
+                            className={cn(
+                              "ml-auto",
+                              item.value === field.value
+                                ? "opacity-100"
+                                : "opacity-0"
+                            )}
+                          />
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  </CommandList>
+                </Command>
+              </PopoverContent>
+            </Popover>
+            {formDescription && (
+              <FormDescription>{formDescription}</FormDescription>
+            )}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}

package/templates/default/ikoncomponents/form-fields/combobox-input-value/index.tsx

@@ -0,0 +1,121 @@
+'use client'
+
+import React from "react";
+import { useController, Control } from "react-hook-form";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../ikonShade/form";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { Button } from "../../../ikonShade/button";
+import { cn } from "../../../utils/cn";
+import { Check, ChevronsUpDown } from "lucide-react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../../../ikonShade/command";
+
+// Updated type definition to include 'value' and 'onChange'
+export interface FormComboboxInputProps {
+  formControl: Control<any>;
+  name: string;
+  label?: string;
+  placeholder?: string;
+  formDescription?: string;
+  items: { value: string; label: string; disabled?: boolean | ((item: any) => boolean) }[];
+  disabled?: boolean | ((...args: any[]) => boolean);
+  onSelect?: (value: any) => void;
+  value?: string; // added for controlled component
+  onChange?: (value: any) => void; // added for controlled component
+}
+
+export function FormComboboxInputWithValue(props: FormComboboxInputProps) {
+  const { field } = useController({ name: props.name, control: props.formControl });
+  // Use the external value if provided, otherwise use the field's value.
+  const currentValue = props.value !== undefined ? props.value : field.value;
+  return (
+    <FormField
+      control={props.formControl}
+      name={props.name}
+      render={({ field }) => (
+        <FormItem className="">
+          {props.label && (
+            <>
+              <FormLabel>{props.label}</FormLabel>
+              <br />
+            </>
+          )}
+          <Popover>
+            <PopoverTrigger asChild className="w-full">
+              <FormControl>
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  className={cn(
+                    "justify-between",
+                    !currentValue && "text-muted-foreground"
+                  )}
+                  disabled={
+                    typeof props.disabled === "function" ? props.disabled() : props.disabled
+                  }
+                >
+                  {currentValue
+                    ? props.items.find((item) => item.value === currentValue)
+                      ?.label || currentValue
+                    : props.placeholder}
+                  <ChevronsUpDown className="opacity-50" />
+                </Button>
+              </FormControl>
+            </PopoverTrigger>
+            <PopoverContent className="p-0" align="start">
+              <Command>
+                <CommandInput placeholder="Search..." />
+                <CommandList>
+                  <CommandEmpty>No items found.</CommandEmpty>
+                  <CommandGroup>
+                    {props.items.map((item) => (
+                      <CommandItem
+                        value={item.value}
+                        key={item.value}
+                        disabled={
+                          typeof item.disabled === "function"
+                            ? item.disabled(item)
+                            : item.disabled
+                        }
+                        onSelect={(value) => {
+                          field.onChange(value);
+                          props.onSelect && props.onSelect(value);
+                          props.onChange && props.onChange(value);
+                        }}
+                      >
+                        {item?.label || item.value}
+                        <Check
+                          className={cn(
+                            "ml-auto",
+                            item.value === currentValue ? "opacity-100" : "opacity-0"
+                          )}
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContent>
+          </Popover>
+          {props.formDescription && (
+            <FormDescription>{props.formDescription}</FormDescription>
+          )}
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}

package/templates/default/ikoncomponents/form-fields/date-input/index.tsx

@@ -0,0 +1,80 @@
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../../ikonShade/form";
+import React from "react";
+import { FormDateInputProps } from "../types";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { Button } from "../../../ikonShade/button";
+import { cn } from "../../../utils/cn";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "../../../ikonShade/calendar";
+
+export function FormDateInput({
+  formControl,
+  name,
+  label,
+  placeholder,
+  dateFormat,
+  calendarDateDisabled,
+  formDescription,
+  disabled,
+}: FormDateInputProps) {
+  return (
+    <>
+      <FormField
+        control={formControl}
+        name={name}
+        render={({ field }) => (
+          <FormItem>
+            {label && (
+              <>
+                <FormLabel>{label}</FormLabel>
+              </>
+            )}
+            <Popover>
+              <PopoverTrigger asChild className="w-full">
+                <FormControl>
+                  <Button
+                    variant={"outline"}
+                    className={cn(!field.value && "text-foreground/50")}
+                    disabled={disabled}
+                  >
+                    {field.value ? (
+                      format(field.value, dateFormat || "PPP")
+                    ) : (
+                      <span>{placeholder || "Pick a date"}</span>
+                    )}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={field.value}
+                  onSelect={field.onChange}
+                  disabled={calendarDateDisabled}
+                   captionLayout="dropdown"
+                  // disabled={(date) =>
+                  //   date > new Date() || date < new Date("1900-01-01")
+                  // }
+                  autoFocus
+                />
+              </PopoverContent>
+            </Popover>
+            {formDescription && (
+              <FormDescription>{formDescription}</FormDescription>
+            )}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+}

package/templates/default/ikoncomponents/form-fields/file-input/index.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export function FormFileInput() {
+    return (
+        <>
+
+        </>
+    )
+}

package/templates/default/ikoncomponents/form-fields/input/index.tsx

@@ -0,0 +1,27 @@
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../ikonShade/form'
+import { Input } from '../../../ikonShade/input'
+import React from 'react'
+import { FormInputProps } from '../types'
+
+
+export function FormInput({ formControl, label, formDescription, extraFormComponent, name, ...inputProps }: FormInputProps) {
+  return (
+    <>
+      <FormField
+        control={formControl}
+        name={name}
+        render={({ field }) => (
+          <FormItem>
+            {label && <FormLabel>{label}</FormLabel>}
+            <FormControl>
+              <Input {...field} {...inputProps} />
+            </FormControl>
+            {extraFormComponent && extraFormComponent(field.value)}
+            {formDescription && <FormDescription>{formDescription}</FormDescription>}
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  )
+}