ikoncomponents 1.5.8 → 1.5.10

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

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

@@ -1,27 +0,0 @@
-import React, { useRef } from 'react'
-import { Upload } from 'lucide-react'
-import { Input } from '../../shadcn/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

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

@@ -1,111 +0,0 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../../shadcn/form";
-import React from "react";
-import { FormComboboxInputProps } from "../types";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
-import { Button } from "../../../shadcn/button";
-import { cn } from "../../../utils/cn";
-import { Check, ChevronsUpDown } from "lucide-react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../../../shadcn/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

@@ -1,121 +0,0 @@
-'use client'
-
-import React from "react";
-import { useController, Control } from "react-hook-form";
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../../shadcn/form";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
-import { Button } from "../../../shadcn/button";
-import { cn } from "../../../utils/cn";
-import { Check, ChevronsUpDown } from "lucide-react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "../../../shadcn/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

@@ -1,80 +0,0 @@
-import {
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "../../../shadcn/form";
-import React from "react";
-import { FormDateInputProps } from "../types";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
-import { Button } from "../../../shadcn/button";
-import { cn } from "../../../utils/cn";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import { Calendar } from "../../../shadcn/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

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

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

@@ -1,27 +0,0 @@
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '../../../shadcn/form'
-import { Input } from '../../../shadcn/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>
-        )}
-      />
-    </>
-  )
-}