ar-design 0.1.61 → 0.1.63

package/dist/assets/css/components/feedback/confirm/confirm.css

@@ -12,7 +12,7 @@
   padding: 10px;
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
-  z-index: 5;
+  z-index: 1051;
 }
 
 .ar-confirm > .content {

package/dist/assets/css/components/form/date-picker/calendar/calendar.css

@@ -5,6 +5,6 @@
   border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-lg);
   box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
-  z-index: 15;
+  z-index: 1051;
   transition: visibility 250ms, opacity 250ms ease-in-out;
 }

package/dist/assets/css/components/form/date-picker/clock/clock.css

@@ -10,7 +10,7 @@
   border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-lg);
   box-shadow: 0 0 10px -5px rgba(var(--black-rgb), 0.25);
-  z-index: 5;
+  z-index: 1051;
   user-select: none;
 }
 .ar-date-calendar > .clock.active {

package/dist/assets/css/components/form/upload/animations.css

@@ -0,0 +1,14 @@
+@keyframes count {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    box-shadow: 0 0 0 2.5px rgba(var(--warning-rgb), 0.25);
+    color: var(--warning);
+    -webkit-text-stroke: 1px var(--warning);
+    transform: scale(1.25);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/dist/assets/css/components/form/upload/styles.css

@@ -0,0 +1,102 @@
+.ar-upload {
+  position: relative;
+  width: 8.5rem;
+}
+.ar-upload > input {
+  display: none;
+}
+
+.ar-upload > .ar-upload-button > .count {
+  position: absolute;
+  top: 8px;
+  left: 42.5px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--border-radius-pill);
+  box-shadow: 0 0 0 2.5px rgba(var(--black-rgb), 0.1);
+  color: var(--success);
+  font-size: 0.75rem;
+  -webkit-text-stroke: 1px var(--success);
+  user-select: none;
+}
+.ar-upload > .ar-upload-button > .count.changed {
+  animation: count cubic-bezier(0.23, 1, 0.32, 1) 250ms 0s 1 normal both;
+}
+.ar-upload > .ar-upload-button > button {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem 0;
+  background-color: rgba(var(--success-rgb), 0.1);
+  width: 100%;
+  padding: 0.75rem 1rem;
+  border: dashed 2px rgba(var(--success-rgb), 0.5);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  color: var(--success);
+  box-shadow: 0 0 0 2.5px rgba(var(--success-rgb), 0.1);
+}
+
+.ar-upload > .ar-upload-button .selected-files {
+  list-style: none;
+}
+.ar-upload > .ar-upload-button .selected-files > li {
+  display: flex;
+  flex-direction: row;
+  gap: 0 0.5rem;
+}
+.ar-upload > .ar-upload-button .selected-files > li > span:first-child {
+  font-size: 0.15rem;
+}
+
+.ar-upload-files {
+  position: absolute;
+  background-color: var(--white);
+  width: 250px;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
+  z-index: 5;
+  transition: top 250ms ease-in-out;
+}
+.ar-upload-files::after {
+  position: absolute;
+  top: 10px;
+  left: 100%;
+  content: "";
+  border: solid 5px transparent;
+  border-left-color: var(--white);
+}
+.ar-upload-files > ul {
+  display: flex;
+  flex-direction: column;
+  list-style-type: none;
+}
+.ar-upload-files > ul > li {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  border-bottom: solid 1px var(--gray-200);
+}
+.ar-upload-files > ul > li:last-child {
+  border-bottom: none;
+}
+.ar-upload-files > ul > li > span:first-child {
+  width: 90%;
+  font-size: 0.75rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ar-upload-files > ul > li > span:last-child {
+  cursor: pointer;
+}
+
+@import url("./animations.css");

package/dist/assets/icons/linear/CloseSquare.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="m9.17 14.83 5.66-5.66M14.83 14.83 9.17 9.17M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z" stroke="#FF8A65" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>

package/dist/components/feedback/confirm/index.js

@@ -31,7 +31,6 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
                 const screenCenter = window.innerHeight / 2;
                 const sx = window.scrollX || document.documentElement.scrollLeft;
                 const sy = window.scrollY || document.documentElement.scrollTop;
-                console.log(screenCenter, elementRect.top);
                 _arConfirm.current.style.top = `${(elementRect.top > screenCenter
                     ? elementRect.top - confirmRect.height + elementRect.height
                     : elementRect.top) + sy}px`;

package/dist/components/form/upload/Props.d.ts

@@ -0,0 +1,15 @@
+import { IValidation } from "../../../libs/types/IGlobalProps";
+interface IMultiple {
+    file: FormData[];
+    onChange: (files: FormData) => void;
+    multiple: true;
+}
+interface ISingle {
+    file: FormData | undefined;
+    onChange: (file: FormData | undefined) => void;
+    multiple?: false;
+}
+type Props = {
+    disabled?: boolean;
+} & (IMultiple | ISingle) & IValidation;
+export default Props;

package/dist/components/form/upload/Props.js

@@ -0,0 +1 @@
+export {};

package/dist/components/form/upload/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import Props from "./Props";
+import "../../../assets/css/components/form/upload/styles.css";
+declare const Upload: React.FC<Props>;
+export default Upload;

package/dist/components/form/upload/index.js

@@ -0,0 +1,119 @@
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/form/upload/styles.css";
+import Icons from "../../../libs/infrastructure/shared/Icons";
+import ReactDOM from "react-dom";
+const Upload = ({ file, onChange, multiple }) => {
+    // refs
+    const _input = useRef(null);
+    const _arUplaod = useRef(null);
+    const _arUplaodFiles = useRef(null);
+    const _count = useRef(null);
+    const _countInterval = useRef();
+    // states
+    const [open, setOpen] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    // methods
+    const handleClickOutSide = (event) => {
+        const target = event.target;
+        if (_arUplaodFiles.current && !_arUplaodFiles.current.contains(target))
+            setOpen(false);
+    };
+    const handleKeys = (event) => {
+        const key = event.key;
+        if (key === "Escape")
+            setOpen(false);
+    };
+    const handlePosition = () => {
+        if (_arUplaod.current && _arUplaodFiles.current) {
+            const wRect = _arUplaod.current.getBoundingClientRect(); // Wrapper
+            const ufRect = _arUplaodFiles.current.getBoundingClientRect(); // Popup
+            const screenCenter = window.innerHeight / 2;
+            const sx = window.scrollX || document.documentElement.scrollLeft;
+            const sy = window.scrollY || document.documentElement.scrollTop;
+            if (multiple) {
+                _arUplaodFiles.current.style.top = `${(wRect.top > screenCenter ? wRect.top - ufRect.height + wRect.height : wRect.top) + sy}px`;
+            }
+            else {
+                _arUplaodFiles.current.style.top = `${wRect.top + sy}px`;
+            }
+            _arUplaodFiles.current.style.left = `${wRect.left - ufRect.width + sx - 10}px`;
+        }
+    };
+    const handleFileChange = (event) => {
+        const filesArray = Array.from(event.target.files ?? []);
+        setSelectedFiles(filesArray);
+        if (filesArray.length > 0) {
+            const formData = new FormData();
+            if (multiple) {
+                filesArray.forEach((file) => formData.append("file", file));
+                onChange(formData);
+            }
+            else {
+                formData.append("file", filesArray[0]);
+                onChange(formData);
+            }
+        }
+    };
+    const handleFileRemove = (fileToRemove) => {
+        setSelectedFiles((prev) => prev.filter((x) => x.name !== fileToRemove.name));
+        // Dosyayı input'tan kaldırmak için input'un value'sunu sıfırla
+        if (_input.current) {
+            const inputFiles = Array.from(_input.current.files ?? []);
+            const updatedFiles = inputFiles.filter((file) => file.name !== fileToRemove.name);
+            const dataTransfer = new DataTransfer();
+            updatedFiles.forEach((file) => dataTransfer.items.add(file));
+            // input'un files özelliğini güncelle
+            _input.current.files = dataTransfer.files;
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        handlePosition();
+        if (_count.current) {
+            _count.current.classList.add("changed");
+            _countInterval.current = setTimeout(() => {
+                _count.current?.classList.remove("changed");
+                clearTimeout(_countInterval.current);
+            }, 250);
+        }
+    }, [selectedFiles]);
+    useEffect(() => {
+        if (_input.current) {
+            const dataTransfer = new DataTransfer();
+            _input.current.files = dataTransfer.files;
+        }
+    }, [file]);
+    useEffect(() => {
+        if (open) {
+            handlePosition();
+            //   window.addEventListener("blur", () => setOpen(false));
+            document.addEventListener("click", handleClickOutSide);
+            document.addEventListener("keydown", handleKeys);
+        }
+        return () => {
+            window.removeEventListener("blur", () => setOpen(false));
+            document.removeEventListener("click", handleClickOutSide);
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [open]);
+    return (React.createElement("div", { ref: _arUplaod, className: "ar-upload" },
+        React.createElement("input", { ref: _input, type: "file", onChange: handleFileChange, multiple: multiple }),
+        React.createElement("div", { className: "ar-upload-button" },
+            React.createElement("span", { ref: _count, className: "count", onClick: () => setOpen((prev) => !prev) }, selectedFiles.length),
+            React.createElement("button", { onClick: () => {
+                    if (_input.current)
+                        _input.current.click();
+                } },
+                Icons.Upload,
+                React.createElement("span", null, "Dosya Y\u00FCkle"))),
+        open &&
+            selectedFiles.length > 0 &&
+            ReactDOM.createPortal(React.createElement("div", { ref: _arUplaodFiles, className: "ar-upload-files" },
+                React.createElement("ul", null, selectedFiles.map((selectedFile, index) => (React.createElement("li", { key: index },
+                    React.createElement("span", null, selectedFile.name),
+                    React.createElement("span", { onClick: (event) => {
+                            event.stopPropagation();
+                            handleFileRemove(selectedFile);
+                        } }, Icons.CrudProcesses.Trash)))))), document.body)));
+};
+export default Upload;

package/dist/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const CloseSquare: React.FC;

package/dist/components/icons/index.js

@@ -0,0 +1,5 @@
+import React from "react";
+export const CloseSquare = () => {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { d: "m9.17 14.83 5.66-5.66M14.83 14.83 9.17 9.17M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7Z", stroke: "#FF8A65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import DatePicker from "./components/form/date-picker";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
 import Switch from "./components/form/switch";
+import Upload from "./components/form/upload";
 import Radio from "./components/form/radio";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
@@ -25,4 +26,4 @@ import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Upload, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Progress, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -8,6 +8,7 @@ import DatePicker from "./components/form/date-picker";
 import Select from "./components/form/select";
 import Checkbox from "./components/form/checkbox";
 import Switch from "./components/form/switch";
+import Upload from "./components/form/upload";
 import Radio from "./components/form/radio";
 // Data Display
 import Card from "./components/data-display/card";
@@ -32,7 +33,7 @@ import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
 export { 
 // Form Elements
-Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, 
+Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Upload, Checkbox, Radio, 
 // Data Display
 Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback

package/dist/libs/infrastructure/shared/Icons.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare const Icons: {
+    CrudProcesses: {
+        Trash: React.JSX.Element;
+    };
+    Close: React.JSX.Element;
+    Upload: React.JSX.Element;
+};
+export default Icons;

package/dist/libs/infrastructure/shared/Icons.js

@@ -0,0 +1,16 @@
+import React from "react";
+const Icons = {
+    CrudProcesses: {
+        Trash: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none" },
+            React.createElement("path", { d: "M21.07 5.23c-1.61-.16-3.22-.28-4.84-.37v-.01l-.22-1.3c-.15-.92-.37-2.3-2.71-2.3h-2.62c-2.33 0-2.55 1.32-2.71 2.29l-.21 1.28c-.93.06-1.86.12-2.79.21l-2.04.2c-.42.04-.72.41-.68.82.04.41.4.71.82.67l2.04-.2c5.24-.52 10.52-.32 15.82.21h.08c.38 0 .71-.29.75-.68a.766.766 0 0 0-.69-.82Z", fill: "var(--gray-500)" }),
+            React.createElement("path", { opacity: ".399", d: "M19.23 8.14c-.24-.25-.57-.39-.91-.39H5.68c-.34 0-.68.14-.91.39-.23.25-.36.59-.34.94l.62 10.26c.11 1.52.25 3.42 3.74 3.42h6.42c3.49 0 3.63-1.89 3.74-3.42l.62-10.25c.02-.36-.11-.7-.34-.95Z", fill: "var(--gray-500)" }),
+            React.createElement("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.58 17a.75.75 0 0 1 .75-.75h3.33a.75.75 0 0 1 0 1.5h-3.33a.75.75 0 0 1-.75-.75ZM8.75 13a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75Z", fill: "var(--gray-500)" }))),
+    },
+    Close: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { opacity: ".4", d: "M16.19 2H7.81C4.17 2 2 4.17 2 7.81v8.37C2 19.83 4.17 22 7.81 22h8.37c3.64 0 5.81-2.17 5.81-5.81V7.81C22 4.17 19.83 2 16.19 2Z", fill: "#FF8A65" }),
+        React.createElement("path", { d: "m13.06 12 2.3-2.3c.29-.29.29-.77 0-1.06a.754.754 0 0 0-1.06 0l-2.3 2.3-2.3-2.3a.754.754 0 0 0-1.06 0c-.29.29-.29.77 0 1.06l2.3 2.3-2.3 2.3c-.29.29-.29.77 0 1.06.15.15.34.22.53.22s.38-.07.53-.22l2.3-2.3 2.3 2.3c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06l-2.3-2.3Z", fill: "#FF8A65" }))),
+    Upload: (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none" },
+        React.createElement("path", { opacity: ".4", d: "M20.5 10.19h-2.89c-2.37 0-4.3-1.93-4.3-4.3V3c0-.55-.45-1-1-1H8.07C4.99 2 2.5 4 2.5 7.57v8.86C2.5 20 4.99 22 8.07 22h7.86c3.08 0 5.57-2 5.57-5.57v-5.24c0-.55-.45-1-1-1Z", fill: "var(--success)" }),
+        React.createElement("path", { d: "M15.8 2.21c-.41-.41-1.12-.13-1.12.44v3.49c0 1.46 1.24 2.67 2.75 2.67.95.01 2.27.01 3.4.01.57 0 .87-.67.47-1.07-1.44-1.45-4.02-4.06-5.5-5.54ZM11.53 12.47l-2-2c-.01-.01-.02-.01-.02-.02a.855.855 0 0 0-.22-.15h-.02c-.08-.03-.16-.04-.24-.05h-.08c-.06 0-.13.02-.19.04-.03.01-.05.02-.07.03-.08.04-.16.08-.22.15l-2 2c-.29.29-.29.77 0 1.06.29.29.77.29 1.06 0l.72-.72V17c0 .41.34.75.75.75s.75-.34.75-.75v-4.19l.72.72c.15.15.34.22.53.22s.38-.07.53-.22c.29-.29.29-.77 0-1.06Z", fill: "var(--success)" }))),
+};
+export default Icons;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "ar-design",
-  "version": "0.1.61",
+  "version": "0.1.63",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./@charts": "./dist/components/charts/index.js",
+    "./@icons": "./dist/components/icons/index.js",
     "./@service": "./dist/libs/core/service/index.js",
     "./@config": "./dist/libs/core/application/contexts/index.js",
     "./@hooks": "./dist/libs/core/application/hooks/index.js",