ikoncomponents 1.5.5 → 1.5.7

package/templates/default/ikoncomponents/upload-tab/index.tsx

@@ -1,237 +0,0 @@
-"use client";
-import { useState, useEffect } from "react";
-import { UploadIcon, X, FileWarning, Send } from "lucide-react";
-import { Button } from "../../shadcn/button";
-import { Input } from "../../shadcn/input";
-import { Label } from "../../shadcn/label";
-import { Progress } from "../../shadcn/progress";
-import { useForm } from "react-hook-form";
-import axios from "axios";
-
-import {
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-  FormDescription,
-} from "../../shadcn/form";
-import { NoDataComponent } from "../no-data";
-
-interface Entry {
-  text: string;
-  fileNames: string[];
-}
-
-interface FileDetails {
-  name: string;
-  url: string;
-  progress: number;
-  file: File;
-}
-
-export function UploadTab() {
-  const form = useForm<Entry>({
-    defaultValues: {
-      text: "",
-      fileNames: [],
-    },
-  });
-
-  const [inputValue, setInputValue] = useState("");
-  const [texts, setTexts] = useState<Entry[]>([]);
-  const [fileNames, setFileNames] = useState<FileDetails[]>([]); // Updated type
-  const [formattedDate, setFormattedDate] = useState("");
-  const [noFilesUploaded, setNoFilesUploaded] = useState(true);
-
-  const isUploading = fileNames.some((file) => file.progress < 100);
-
-  const simulateFileUpload = async (idx: number, file: FileDetails) => {
-    const formData = new FormData();
-    formData.append("file", file.file); // Use the actual file object
-
-    try {
-      const response = await axios.post("UPLOAD_ENDPOINT_URL", formData, {
-        onUploadProgress: (progressEvent) => {
-          const progress = Math.round(
-            (progressEvent.loaded * 100) / (progressEvent.total || 1)
-          );
-          setFileNames((prev) =>
-            prev.map((f, i) => (i === idx ? { ...f, progress } : f))
-          );
-        },
-      });
-
-      setFileNames((prev) =>
-        prev.map((f, i) =>
-          i === idx ? { ...f, url: response.data.url, progress: 100 } : f
-        )
-      );
-    } catch (error) {
-      console.error("Upload failed:", error);
-    }
-  };
-
-  useEffect(() => {
-    const currentDate = new Date();
-    const day = String(currentDate.getDate()).padStart(2, "0");
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    const year = currentDate.getFullYear();
-
-    setFormattedDate(`${day}-${month}-${year}`);
-  }, []);
-
-  useEffect(() => {
-    fileNames.forEach((file, idx) => {
-      if (file.progress === 0) {
-        simulateFileUpload(idx, file);
-      }
-    });
-  }, [fileNames]);
-
-  const handleAddText = () => {
-    if (inputValue.trim() || fileNames.length > 0) {
-      const newEntry: Entry = {
-        text: inputValue.trim(),
-        fileNames: fileNames.map((file) => file.name),
-      };
-      setTexts([newEntry, ...texts]);
-      setInputValue("");
-      setFileNames([]);
-      setNoFilesUploaded(false);
-    }
-  };
-
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files) {
-      const uploadedFiles = Array.from(e.target.files).map((file) => ({
-        name: file.name,
-        url: "",
-        progress: 0,
-        file,
-      }));
-      setFileNames((prev) => [...prev, ...uploadedFiles]); // Type now matches correctly
-      setNoFilesUploaded(false);
-    }
-  };
-
-  const removeFile = (index: number) => {
-    const updatedFiles = fileNames.filter((_, idx) => idx !== index);
-    setFileNames(updatedFiles);
-    if (updatedFiles.length === 0 && texts.length === 0) {
-      setNoFilesUploaded(true);
-    }
-  };
-
-
-
-  return (
-    <>
-      {/* Container for the text list */}
-      <div className="flex flex-col h-full w-full gap-3">
-        <div className="flex-grow overflow-auto flex flex-col-reverse gap-2">
-          {noFilesUploaded && <NoDataComponent text="No files uploaded" />}
-          {fileNames.length > 0 && (
-            <div className="p-2 my-1 rounded-md border">
-              <p className="font-bold">Selected Files:</p>
-              {fileNames.map((file, idx) => (
-                <div key={idx} className="flex flex-col mb-2">
-                  <div className="flex items-center justify-between">
-                    <a
-                      href={file.url}
-                      download={file.name}
-                      className="text-sm text-blue-600 underline cursor-pointer"
-                    >
-                      {file.name}
-                    </a>
-                    <button
-                      onClick={() => removeFile(idx)}
-                      className="text-red-500 hover:text-red-800"
-                    >
-                      <X className="w-4 h-4" />
-                    </button>
-                  </div>
-                  <Progress value={file.progress} />
-                  <p className="text-xs text-gray-500">
-                    {file.progress}% uploaded
-                  </p>
-                </div>
-              ))}
-            </div>
-          )}
-          {texts.map((entry, index) => (
-            <div key={index} className="border-b text-sm pb-2">
-              {entry.fileNames.map((fileName, idx) => (
-                <p key={idx}>
-                  <a
-                    href={
-                      fileNames.find((file) => file.name === fileName)?.url ||
-                      "#"
-                    }
-                    download={fileName}
-                    className="text-sm text-blue-500 underline cursor-pointer"
-                  >
-                    {fileName}
-                  </a>
-                </p>
-              ))}
-              <p>{entry.text || "(No Text)"}</p>
-              <div className="flex justify-between">
-                <p>John Doe</p>
-                <p>{formattedDate}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-        <Form {...form}>
-          <form onSubmit={form.handleSubmit(() => handleAddText())}>
-            <div className="flex flex-col">
-              <div className="flex items-center justify-center gap-2">
-                <div className="flex-1">
-                  <FormField
-                    name="text"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormControl>
-                          <Input
-                            id="text-input"
-                            type="text"
-                            value={inputValue}
-                            onChange={(e) => setInputValue(e.target.value)}
-                            placeholder="Type something..."
-                          />
-                        </FormControl>
-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
-                </div>
-                <div className="flex items-center gap-2">
-                  <Label htmlFor="file-upload" className="sr-only">
-                    Upload Files
-                  </Label>
-                  <Button variant="outline" asChild>
-                    <label htmlFor="file-upload" className="cursor-pointer">
-                      <UploadIcon className="w-5 h-5" />
-                    </label>
-                  </Button>
-                  <Input
-                    id="file-upload"
-                    type="file"
-                    multiple
-                    onChange={handleFileUpload}
-                    className="hidden"
-                  />
-                </div>
-                <Button variant="outline" type="submit" disabled={isUploading}>
-                  <Send />
-                </Button>
-              </div>
-            </div>
-          </form>
-        </Form>
-      </div>
-    </>
-  );
-}

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

@@ -1,81 +0,0 @@
-'use client'
-import * as React from "react";
-import { WidgetsFunctionProps } from "./type";
-import { Icon } from "../icon";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../shadcn/tooltip";
-import { Button } from "../../shadcn/button";
-
-export function Widgets({ widgetData }: WidgetsFunctionProps) {
-    const firstRowWidgets = widgetData.slice(0, 4);
-    const secondRowWidgets = widgetData.slice(4);
-
-    return (
-        <div className="flex flex-col gap-2">
-            <div className="flex flex-col md:flex-row gap-2">
-                {firstRowWidgets.map((widget) => (
-                    <div className="flex flex-1 flex-row justify-between border rounded-md p-2 border-l-4 border-l-primary" key={widget.id}>
-                        <div className="flex flex-col">
-                            <TooltipProvider>
-                                <Tooltip>
-                                    <TooltipTrigger className="cursor-default select-text">
-                                        <p className="font-medium max-w-[240px] truncate">{widget.widgetText}</p>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        <p>{widget.widgetText}</p>
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                            <div>
-                                {widget.onButtonClickfunc ?
-                                    <Button className="px-0" variant={"link"} onClick={() => widget.onButtonClickfunc?.({ id: widget.id })}>
-                                        {widget.widgetNumber}
-                                    </Button> :
-                                    <p className="inline-flex items-center justify-center px-0 py-2 text-sm font-medium border border-transparent rounded-md">
-                                        {widget.widgetNumber}
-                                    </p>
-                                }
-                            </div>
-                        </div>
-                        <div className="flex justify-end items-center">
-                            {widget.iconName && <Icon name={widget.iconName} />}
-                        </div>
-                    </div>
-                ))}
-            </div>
-
-            {secondRowWidgets.length > 0 && (
-                <div className="flex flex-col md:flex-row gap-2">
-                    {secondRowWidgets.map((widget) => (
-                        <div className="flex flex-1 flex-row justify-between border rounded-md p-2 border-l-4 border-l-primary" key={widget.id}>
-                            <div className="flex flex-col">
-                                <TooltipProvider>
-                                    <Tooltip>
-                                        <TooltipTrigger className="cursor-default select-text">
-                                            <p className="font-medium max-w-[240px] truncate">{widget.widgetText}</p>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            <p>{widget.widgetText}</p>
-                                        </TooltipContent>
-                                    </Tooltip>
-                                </TooltipProvider>
-                                <div>
-                                    {widget.onButtonClickfunc ?
-                                        <Button className="px-0" variant={"link"} onClick={() => widget.onButtonClickfunc?.({ id: widget.id })}>
-                                            {widget.widgetNumber}
-                                        </Button> :
-                                        <p className="inline-flex items-center justify-center px-0 py-2 text-sm font-medium border border-transparent rounded-md">
-                                            {widget.widgetNumber}
-                                        </p>
-                                    }
-                                </div>
-                            </div>
-                            <div className="flex justify-end items-center">
-                                {widget.iconName && <Icon name={widget.iconName} />}
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            )}
-        </div>
-    )
-}

package/templates/default/ikoncomponents/widgets/type.ts

@@ -1,11 +0,0 @@
-export interface WidgetProps {
-  id: string,
-  widgetText: string;
-  widgetNumber: string;
-  iconName?: string;
-  onButtonClickfunc?: (...params: (string | (Record<string, string>))[]) => void;
-};
-
-export interface WidgetsFunctionProps {
-  widgetData: WidgetProps[];
-}

package/templates/default/ikoncomponents/work-in-progress/index.tsx

@@ -1,16 +0,0 @@
-import React from "react";
-
-export function WorkInProgress() {
-    return (
-        <div className="flex h-full items-center justify-center">
-            <div className="bg-background text-forefround rounded-xl p-6 text-center max-w-md">
-                <div className="text-3xl font-bold mb-2 animate-pulse">
-                    🚧 Work in Progress
-                </div>
-                <p className="text-muted-foreground">
-                    We’re currently working on this section. Check back soon!
-                </p>
-            </div>
-        </div>
-    );
-}

package/templates/default/shadcn/accordion.tsx

@@ -1,66 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "../utils/cn"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/default/shadcn/alert-dialog.tsx

@@ -1,179 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
-import { cn } from "../utils/cn"
-import { buttonVariants } from "./button"
-
-// ✅ Root (NO ref here!)
-const AlertDialog = (
-  props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>
-) => <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-AlertDialog.displayName = "AlertDialog"
-
-// ✅ Trigger
-const AlertDialogTrigger = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>
->((props, ref) => (
-  <AlertDialogPrimitive.Trigger
-    data-slot="alert-dialog-trigger"
-    ref={ref}
-    {...props}
-  />
-))
-AlertDialogTrigger.displayName = "AlertDialogTrigger"
-
-// ✅ Portal (NO ref here!)
-const AlertDialogPortal = (
-  props: React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Portal>
-) => <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-AlertDialogPortal.displayName = "AlertDialogPortal"
-
-// ✅ Overlay
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    ref={ref}
-    data-slot="alert-dialog-overlay"
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out " +
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
-      "fixed inset-0 z-50 bg-black/50",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogOverlay.displayName = "AlertDialogOverlay"
-
-// ✅ Content
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      data-slot="alert-dialog-content"
-      className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out " +
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 " +
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 " +
-        "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] " +
-        "translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 " +
-        "shadow-lg duration-200 sm:max-w-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
-AlertDialogContent.displayName = "AlertDialogContent"
-
-// ✅ Header
-const AlertDialogHeader = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="alert-dialog-header"
-    className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-    {...props}
-  />
-))
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-// ✅ Footer
-const AlertDialogFooter = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div">
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    data-slot="alert-dialog-footer"
-    className={cn(
-      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogFooter.displayName = "AlertDialogFooter"
-
-// ✅ Title
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    data-slot="alert-dialog-title"
-    className={cn("text-lg font-semibold bg-background", className)}
-    {...props}
-  />
-))
-AlertDialogTitle.displayName = "AlertDialogTitle"
-
-// ✅ Description
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    data-slot="alert-dialog-description"
-    className={cn("text-muted-foreground text-sm bg-background", className)}
-    {...props}
-  />
-))
-AlertDialogDescription.displayName = "AlertDialogDescription"
-
-// ✅ Action
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
-))
-AlertDialogAction.displayName = "AlertDialogAction"
-
-// ✅ Cancel
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "bg-background",
-      className
-    )}
-    {...props}
-  />
-))
-AlertDialogCancel.displayName = "AlertDialogCancel"
-
-// ✅ Exports
-export {
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
-}

package/templates/default/shadcn/alert.tsx

@@ -1,66 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../utils/cn"
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
-  {
-    variants: {
-      variant: {
-        default: "bg-card dark:bg-background text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Alert({
-  className,
-  variant,
-  ...props
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
-    <div
-      data-slot="alert"
-      role="alert"
-      className={cn(alertVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-title"
-      className={cn(
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDescription({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-description"
-      className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription }

package/templates/default/shadcn/aspect-ratio.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
-
-function AspectRatio({
-    ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-    return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
-
-export { AspectRatio }