gbs-add-block 0.0.5 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/uploader/Uploader.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useRef } from "react";
+import { upload, x } from "@/src/component-lib/icon/iconPaths";
+import Icon from "@/src/component-lib/icon/Icon";
+import { GetFileIcon } from "./uploaderIcon";
+
+export const FileUploader = ({ showImagePreview = false }: any) => {
+  const [files, setFiles] = useState<any[]>([]);
+  const [previewUrls, setPreviewUrls] = useState<{ [key: string]: string }>({});
+  const fileInputRef = useRef<any>(null);
+
+  // adds files to file array
+  const handleFileChange = (e: any) => {
+    const selectedFiles = Array.from(e.target.files);
+    const newPreviewUrls = { ...previewUrls };
+
+    selectedFiles.forEach((file: any) => {
+      if (showImagePreview && file.type.startsWith("image/")) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          newPreviewUrls[file.name] = reader.result as string;
+          setPreviewUrls(newPreviewUrls);
+        };
+        reader.readAsDataURL(file);
+      }
+    });
+
+    setFiles((prevFiles: any) => [...prevFiles, ...selectedFiles]);
+  };
+
+  // remove file from the file array
+  const removeFile = (index: any) => {
+    const fileToRemove = files[index];
+    setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
+    setPreviewUrls((prevPreviews) => {
+      const { [fileToRemove.name]: _, ...rest } = prevPreviews;
+      return rest;
+    });
+  };
+
+  return (
+    <div className="w-full max-w-md mx-auto">
+      <div
+        className="flex flex-col items-center border-2 border-dashed border-gray-300 rounded-lg p-4 text-center cursor-pointer hover:border-gray-400 transition-colors"
+        onClick={() => fileInputRef.current.click()}
+      >
+        <Icon
+          dimensions={{ width: "36", height: "36" }}
+          elements={upload}
+          svgClass={"stroke-gray-400 fill-none dark:stroke-white"}
+        />
+        <p className="mt-2 text-sm text-gray-500">
+          Click to upload or drag and drop
+        </p>
+        <p className="text-xs text-gray-400">Supports multiple file uploads</p>
+      </div>
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="hidden"
+        onChange={handleFileChange}
+        multiple
+      />
+
+      {files.length > 0 && (
+        <div className="mt-4 space-y-2">
+          {files.map((file: any, index) => (
+            <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={() => removeFile(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>
+      )}
+    </div>
+  );
+};

package/source/components/uploader/uploaderIcon.tsx

@@ -0,0 +1,67 @@
+import {
+  fileimage,
+  filespreadsheet,
+  filetext,
+  film,
+  music,
+  upload,
+  x,
+} from "../../icon/iconPaths";
+import Icon from "../../icon/Icon";
+
+// returns an icon based on the selected file type
+export const GetFileIcon = ({ file, showImagePreview, previewUrls }: any) => {
+  if (file.type.startsWith("image/"))
+    return showImagePreview ? (
+      <img
+        src={previewUrls[file.name]}
+        alt={file.name}
+        className="mt-2 w-8 h-8 object-cover rounded-lg"
+      />
+    ) : (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={fileimage}
+        svgClass={"stroke-blue-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type === "application/pdf")
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={filetext}
+        svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.includes("spreadsheet") || file.type.includes("excel"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={filespreadsheet}
+        svgClass={"stroke-green-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.startsWith("video/"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={film}
+        svgClass={"stroke-purple-500 fill-none dark:stroke-white"}
+      />
+    );
+  if (file.type.startsWith("audio/"))
+    return (
+      <Icon
+        dimensions={{ width: "26", height: "26" }}
+        elements={music}
+        svgClass={"stroke-yellow-500 fill-none dark:stroke-white"}
+      />
+    );
+  return (
+    <Icon
+      dimensions={{ width: "16", height: "16" }}
+      elements={filetext}
+      svgClass={"stroke-red-500 fill-none dark:stroke-white"}
+    />
+  );
+};

package/source/icon/iconPaths.ts

@@ -90,3 +90,79 @@ export let sun: any = [
 export let moon: any = [
   { type: "path", d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z", key: "a7tn18" },
 ];
+
+export const upload: any = [
+  {
+    type: "path",
+    d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4",
+    key: "ih7n3h",
+  },
+  { type: "polyline", points: "17 8 12 3 7 8", key: "t8dd8p" },
+  { type: "line", x1: "12", x2: "12", y1: "3", y2: "15", key: "widbto" },
+];
+
+export const filetext: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "path", d: "M10 9H8", key: "b1mrlr" },
+  { type: "path", d: "M16 13H8", key: "t4e002" },
+  { type: "path", d: "M16 17H8", key: "z1uh3a" },
+];
+
+export const fileimage: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "circle", cx: "10", cy: "12", r: "2", key: "737tya" },
+  {
+    type: "path",
+    d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22",
+    key: "wt3hpn",
+  },
+];
+
+export const music: any = [
+  { type: "path", d: "M9 18V5l12-2v13", key: "1jmyc2" },
+  { type: "circle", cx: "6", cy: "18", r: "3", key: "fqmcym" },
+  { type: "circle", cx: "18", cy: "16", r: "3", key: "1hluhg" },
+];
+
+export const film: any = [
+  {
+    type: "rect",
+    width: "18",
+    height: "18",
+    x: "3",
+    y: "3",
+    rx: "2",
+    key: "afitv7",
+  },
+  { type: "path", d: "M7 3v18", key: "bbkbws" },
+  { type: "path", d: "M3 7.5h4", key: "zfgn84" },
+  { type: "path", d: "M3 12h18", key: "1i2n21" },
+  { type: "path", d: "M3 16.5h4", key: "1230mu" },
+  { type: "path", d: "M17 3v18", key: "in4fa5" },
+  { type: "path", d: "M17 7.5h4", key: "myr1c1" },
+  { type: "path", d: "M17 16.5h4", key: "go4c1d" },
+];
+
+export const filespreadsheet: any = [
+  {
+    type: "path",
+    d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z",
+    key: "1rqfz7",
+  },
+  ,
+  { type: "path", d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" },
+  { type: "path", d: "M8 13h2", key: "yr2amv" },
+  { type: "path", d: "M14 13h2", key: "un5t4a" },
+  { type: "path", d: "M8 17h2", key: "2yhykz" },
+  { type: "path", d: "M14 17h2", key: "10kma7" },
+];