@grampro/kit 0.0.0-stage → 2.4.1

package/source/legacy-components/toast/ToastComponent.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect } from "react";
+import type { Toast } from "./types";
+import { useToastStore } from "./toastStore";
+import ToastIcon from "./ToastIcon";
+
+interface ToastProps {
+  toast: Toast;
+}
+
+const leftBorderColors = {
+  default: "border-l-zinc-550 dark:border-l-zinc-600",
+  success: "border-l-emerald-500",
+  error: "border-l-rose-500",
+  warning: "border-l-amber-500",
+} as const;
+
+const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
+  <button
+    onClick={onDismiss}
+    className="shrink-0 rounded-md p-1 transition-colors text-zinc-400 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-100 dark:hover:bg-zinc-900 focus:outline-none"
+  >
+    <svg
+      className="h-3.5 w-3.5"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2.5}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  </button>
+);
+
+export function ToastComponent({ toast }: ToastProps) {
+  const { dismiss } = useToastStore();
+  const handleDismiss = () => dismiss(toast.id);
+
+  useEffect(() => {
+    if (toast.duration !== 0) {
+      const timer = setTimeout(() => {
+        handleDismiss();
+      }, toast.duration || 5000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [toast.id, toast.duration]);
+
+  if (toast.content) {
+    return (
+      <div className="relative pointer-events-auto rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 shadow-lg">
+        {toast.content}
+        <div className="absolute top-2 right-2">
+          <CloseButton onDismiss={handleDismiss} />
+        </div>
+      </div>
+    );
+  }
+
+  const borderClass = leftBorderColors[toast.type || "default"];
+
+  return (
+    <div
+      className={`
+        transform transition-all duration-300 ease-in-out
+        pointer-events-auto relative flex w-full items-start justify-between
+        overflow-hidden rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 px-4 py-3.5 shadow-lg
+        border-l-4 ${borderClass}
+        animate-fade-in
+      `}
+      role="alert"
+    >
+      <div className="flex items-start gap-3 w-full">
+        <div className="mt-0.5 shrink-0">
+          <ToastIcon type={toast.type} />
+        </div>
+        <div className="flex-1 min-w-0">
+          {toast.title && (
+            <div className="font-bold text-sm text-zinc-900 dark:text-white tracking-tight leading-none">
+              {toast.title}
+            </div>
+          )}
+          {toast.description && (
+            <div className="text-xs font-medium text-zinc-500 dark:text-zinc-400 mt-1">
+              {toast.description}
+            </div>
+          )}
+        </div>
+        {toast.action && (
+          <div className="shrink-0 flex items-center gap-2">
+            {toast.action}
+          </div>
+        )}
+        <CloseButton onDismiss={handleDismiss} />
+      </div>
+    </div>
+  );
+}

package/source/legacy-components/toast/ToastIcon.tsx

@@ -0,0 +1,61 @@
+import type { Toast } from "./types";
+
+const ToastIcon = ({ type }: { type: Toast["type"] }) => {
+  if (!type) return null;
+
+  const iconColors = {
+    default: "text-zinc-500",
+    success: "text-emerald-500",
+    error: "text-rose-500",
+    warning: "text-amber-500",
+  } as const;
+
+  return (
+    <div className={`h-4.5 w-4.5 ${iconColors[type]}`}>
+      {type === "success" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      )}
+      {type === "error" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      )}
+      {type === "warning" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export default ToastIcon;

package/source/legacy-components/toast/index.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import type { ToastPosition } from "./types";
+import { useToastStore } from "./toastStore";
+import { ToastComponent } from "./ToastComponent";
+
+const positions: Record<ToastPosition, string> = {
+  "top-right": "top-4 right-4",
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+};
+
+export function Toaster({
+  position = "top-right",
+}: {
+  position?: ToastPosition;
+}) {
+  const [mounted, setMounted] = React.useState(false);
+  const { toasts } = useToastStore();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return createPortal(
+    <div
+      className={`fixed z-50 flex flex-col gap-2 w-full max-w-[420px] ${positions[position]}`}
+    >
+      {toasts.map((toast) => (
+        <ToastComponent key={toast.id} toast={toast} />
+      ))}
+    </div>,
+    document.body
+  );
+}

package/source/legacy-components/toast/toastStore.ts

@@ -0,0 +1,42 @@
+import React from "react";
+import type { Toast } from "./types";
+
+type ToastState = {
+  toasts: Toast[];
+  add: (toast: Omit<Toast, "id">) => void;
+  dismiss: (id: string) => void;
+};
+
+let listeners: Array<(state: ToastState) => void> = [];
+let state: ToastState = {
+  toasts: [],
+  add: (toast) => {
+    const id = Math.random().toString(36).slice(2);
+    state.toasts = [{ ...toast, id }, ...state.toasts];
+    emitChange();
+  },
+  dismiss: (id) => {
+    state.toasts = state.toasts.filter((t) => t.id !== id);
+    emitChange();
+  },
+};
+
+function emitChange() {
+  for (let listener of listeners) {
+    listener(state);
+  }
+}
+
+export function useToastStore(): ToastState {
+  const [, setUpdate] = React.useState({});
+
+  React.useEffect(() => {
+    const listener = () => setUpdate({});
+    listeners.push(listener);
+    return () => {
+      listeners = listeners.filter((l) => l !== listener);
+    };
+  }, []);
+
+  return state;
+}

package/source/legacy-components/toast/types.ts

@@ -0,0 +1,18 @@
+export type ToastType = "default" | "success" | "error" | "warning";
+export type ToastPosition =
+  | "top-right"
+  | "top-left"
+  | "top-center"
+  | "bottom-right"
+  | "bottom-left"
+  | "bottom-center";
+
+export interface Toast {
+  id: string;
+  type?: ToastType;
+  duration?: number;
+  content?: React.ReactNode;
+  title?: string;
+  description?: string;
+  action?: React.ReactNode;
+}

package/source/legacy-components/toast/useToast.ts

@@ -0,0 +1,12 @@
+import type { Toast } from "./types";
+import { useToastStore } from "./toastStore";
+
+export function useToast() {
+  const store = useToastStore();
+
+  return {
+    toast: (props: Omit<Toast, "id">) => store.add(props),
+    dismiss: store.dismiss,
+    toasts: store.toasts,
+  };
+}

package/source/legacy-components/uploader/ProgressAnimation.tsx

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Grampro Business Services and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from "react";
+
+type AestheticProcessingAnimationProps = {
+  progressPercentage: number;
+};
+
+const AestheticProcessingAnimation = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => {
+  return (
+    <div className="w-full max-w-md mx-auto p-2">
+      <div className="w-full h-1 bg-gray-200 rounded-full overflow-hidden">
+        <div className="h-full w-1/3 bg-black rounded-full animate-processing"></div>
+      </div>
+      <p className="text-xs mt-2 text-center">
+        Uploading in Progress {Math.floor(progressPercentage)}%, Please Wait...
+      </p>
+    </div>
+  );
+};
+
+const AestheticProcessingAnimationWithStyles = ({
+  progressPercentage,
+}: AestheticProcessingAnimationProps) => (
+  <>
+    <style dangerouslySetInnerHTML={{ __html: `
+      @keyframes processing {
+        0% {
+          transform: translateX(-100%);
+        }
+        100% {
+          transform: translateX(300%);
+        }
+      }
+      .animate-processing {
+        animation: processing 2s ease-in-out infinite;
+      }
+    ` }} />
+    <AestheticProcessingAnimation progressPercentage={progressPercentage} />
+  </>
+);
+
+export default AestheticProcessingAnimationWithStyles;

package/source/legacy-components/uploader/UploadedFilePreview.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import Icon from "../icon/Icon";
+import { cloudDownload, x } from "../icon/iconPaths";
+import { GetFileIcon } from "./uploaderIcon";
+import type { UploadedFilePreview } from "./types";
+
+export default function UploadedFilePreview({
+  files = [],
+  UploadedFileData,
+  apiURL,
+  showImagePreview,
+  previewUrls,
+  onFileRemove,
+  isRemovable,
+  removedId,
+}: UploadedFilePreview) {
+  const handleDownload = (fileId: any, fileName: any) => {
+    const downloadUrl = constructDownloadUrl(fileId);
+    window.open(downloadUrl, "_blank");
+  };
+
+  const constructDownloadUrl = (fileId: any) => {
+    const url = new URL("download", apiURL);
+    url.searchParams.append("id", fileId);
+    return url.href;
+  };
+
+  const isImageFile = (fileName: any) => {
+    const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
+    return imageExtensions.some((ext) => fileName.toLowerCase().endsWith(ext));
+  };
+  return (
+    <div>
+      {/* Rendering Uploded Local Files */}
+      {files.length > 0 && (
+        <div className="mt-4 space-y-2">
+          {files.map((file: any, index: number) => (
+            <div
+              key={index}
+              className="flex items-center justify-between bg-gray-50 p-2 rounded-md"
+            >
+              <div className="flex items-center space-x-2">
+                <GetFileIcon
+                  file={file}
+                  showImagePreview={showImagePreview}
+                  previewUrls={previewUrls}
+                />
+                <div>
+                  <p className="text-sm font-medium text-gray-700">
+                    {file.name}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {(file.size / 1024 / 1024).toFixed(2)} MB
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => {
+                  if (onFileRemove) onFileRemove(index);
+                }}
+                className="text-red-500 hover:text-red-700 transition-colors"
+              >
+                <Icon
+                  dimensions={{ width: "16", height: "16" }}
+                  elements={x}
+                  svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+                />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Rendering Uploded Remote Files Preview */}
+      {UploadedFileData.length > 0 &&
+        UploadedFileData.map((item: any, index: any) => (
+          <div
+            key={index}
+            className="flex items-center justify-between bg-gray-50 p-2 rounded-md mt-2"
+          >
+            <div className="flex items-center space-x-2">
+              {isImageFile(item.FileName) ? (
+                <img
+                  src={constructDownloadUrl(item.FileID)}
+                  alt={item.FileName}
+                  className="mt-2 w-8 h-8 object-cover rounded-lg"
+                />
+              ) : (
+                <GetFileIcon file={{ type: item.FileName.split(".").pop() }} />
+              )}
+              <div>
+                <p className="text-sm font-medium text-gray-700">
+                  {item.FileName}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {(item.FileSize / 1024 / 1024).toFixed(2)} MB
+                </p>
+              </div>
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={() => handleDownload(item.FileID, item.FileName)}
+              >
+                <Icon
+                  dimensions={{ width: "18", height: "18" }}
+                  elements={cloudDownload}
+                  svgClass={"stroke-zinc-700 dark:stroke-zinc-400 fill-none"}
+                />
+              </button>
+              {isRemovable && (
+                <button
+                  aria-label="Remove"
+                  onClick={() => {
+                    if (removedId) removedId(item.FileID);
+                  }}
+                >
+                  <Icon
+                    dimensions={{ width: "16", height: "16" }}
+                    elements={x}
+                    svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+                  />
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+    </div>
+  );
+}