ar-design 0.1.56 → 0.1.57

package/dist/assets/css/components/charts/pie/pie.css

@@ -0,0 +1,84 @@
+.ar-pie-chart-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem 0;
+}
+.ar-pie-chart-wrapper > div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0 2rem;
+}
+
+.ar-pie-chart-wrapper > .title {
+  width: 100%;
+  color: var(--gray-700);
+  font-size: 1.2rem;
+  font-weight: bold;
+  text-align: left;
+}
+
+.ar-pie-chart-wrapper > div > .ar-pie-chart {
+  position: relative;
+  width: 200px;
+  height: 200px;
+  border-radius: var(--border-radius-pill);
+  user-select: none;
+}
+.ar-pie-chart-wrapper > div > .ar-pie-chart > article {
+  position: absolute;
+  inset: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--white);
+  border-radius: var(--border-radius-pill);
+  box-shadow: inset 0 0 0 5px rgba(var(--black-rgb), 0.1);
+  color: var(--gray-700);
+}
+
+.ar-pie-chart-wrapper > div > .information-field {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 0.5rem 0;
+  width: 100%;
+}
+.ar-pie-chart-wrapper > div > .information-field > article {
+  display: flex;
+  flex-direction: row;
+  flex: 2;
+  align-items: center;
+  gap: 0 0.5rem;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:first-child {
+  position: relative;
+  min-width: 1.75rem;
+  min-height: 1rem;
+  padding-left: 0.85rem;
+  border-radius: var(--border-radius-sm);
+  color: var(--white);
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1rem;
+  overflow: hidden;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:first-child::before {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  content: "%";
+  background-color: rgba(var(--black-rgb), 0.2);
+  width: 0.75rem;
+  font-size: 0.65rem;
+  text-align: center;
+}
+.ar-pie-chart-wrapper > div > .information-field > article > span:last-child {
+  font-size: 0.75rem;
+}

package/dist/assets/css/components/data-display/paper/paper.css

@@ -1,4 +1,5 @@
 .ar-paper {
+  position: relative;
   background-color: var(--white);
   padding: 2rem;
   border-radius: var(--border-radius-lg);

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

@@ -1,4 +1,5 @@
 .notification {
+  background-color: var(--danger);
   position: fixed;
   display: flex;
   flex-direction: column-reverse;
@@ -24,120 +25,124 @@
   right: 1rem;
 }
 
-.notification > .item {
+.ar-notification-item {
+  position: fixed;
+  left: 2rem;
   display: flex;
   flex-direction: row;
   gap: 0 0.5rem;
-  width: 100%;
-  height: 5rem;
+  background-color: rgba(var(--white-rgb), 0.5);
+  backdrop-filter: blur(5px);
+  width: 350px;
+  height: 7.5rem;
   border-radius: var(--border-radius-xl);
+  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  transition: all 250ms ease-in-out;
   overflow: hidden;
   /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
   animation: openSnackbar ease-in-out 500ms 0s 1 normal both;
 }
 
-.notification > .item.success {
-  background-color: var(--success);
-}
-.notification > .item.warning {
-  background-color: var(--warning);
-}
-.notification > .item.information {
-  background-color: var(--info);
-}
-.notification > .item.error {
-  background-color: var(--danger);
-}
-
-.notification > .item > .icon {
+.ar-notification-item > .icon {
   position: relative;
   min-width: 3rem;
   border-top-left-radius: var(--border-radius-xl);
   border-bottom-left-radius: var(--border-radius-xl);
   overflow: hidden;
 }
-.notification > .item > .icon > span {
+.ar-notification-item > .icon > span {
   position: absolute;
   border-radius: var(--border-radius-pill);
 }
-/* .notification > .item > .icon > span:nth-child(1) {
+.ar-notification-item > .icon > span:nth-child(1) {
   top: 0.5rem;
   left: 0.5rem;
   width: 0.25rem;
   height: 0.25rem;
 }
-.notification > .item > .icon > span:nth-child(2) {
+.ar-notification-item > .icon > span:nth-child(2) {
   top: 1.5rem;
   left: 0.5rem;
   width: 0.5rem;
   height: 0.5rem;
 }
-.notification > .item > .icon > span:nth-child(3) {
+.ar-notification-item > .icon > span:nth-child(3) {
   top: 2rem;
   left: 1.75rem;
   width: 1rem;
   height: 1rem;
 }
-.notification > .item > .icon > span:nth-child(4) {
+.ar-notification-item > .icon > span:nth-child(4) {
   bottom: -1.5rem;
   left: -0.5rem;
   width: 3rem;
   height: 3rem;
 }
-.notification > .item > .icon > span:nth-child(5) {
+.ar-notification-item > .icon > span:nth-child(5) {
   bottom: 1.15rem;
   left: 1rem;
   width: 0.55rem;
   height: 0.55rem;
-} */
-.notification > .item > .icon > span.success {
+}
+.ar-notification-item > .icon > span.success {
   background-color: var(--success);
 }
-.notification > .item > .icon > span.warning {
+.ar-notification-item > .icon > span.warning {
   background-color: var(--warning);
 }
-.notification > .item > .icon > span.information {
+.ar-notification-item > .icon > span.information {
   background-color: var(--info);
 }
-.notification > .item > .icon > span.error {
+.ar-notification-item > .icon > span.error {
   background-color: var(--danger);
 }
 
-.notification > .item > .content {
+.ar-notification-item > .content {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 0.25rem 0;
+  gap: 0.75rem 0;
   width: 100%;
   padding: 0 1rem;
-  color: var(--white);
+  color: var(--gray-700);
 }
-.notification > .item > .content > .title {
-  font-size: 1.3rem;
+.ar-notification-item > .content > .title {
+  font-size: 1.2rem;
 }
-.notification > .item > .content > .message {
+.ar-notification-item > .content > .message {
+  color: var(--gray-600);
 }
 
-.notification > .item > .close {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.ar-notification-item > .close {
   min-width: 2.5rem;
-  background-color: rgba(var(--black-rgb), 0.1);
-  color: rgba(var(--white-rgb), 0.75);
+}
+.ar-notification-item > .close::before,
+.ar-notification-item > .close::after {
+  position: absolute;
+  top: 0.75rem;
+  right: 1.25rem;
+  content: "";
+  width: 2px;
+  height: 15px;
+  background-color: var(--gray-500);
+  transform-origin: center;
+  transform: rotate(45deg);
+}
+.ar-notification-item > .close::after {
+  transform: rotate(-45deg);
 }
 
 @media only screen and (max-width: 480px) {
-  .notification.top-left {
+  .ar-notification.top-left {
     inset: 1rem 1rem auto 1rem;
   }
-  .notification.top-right {
+  .ar-notification.top-right {
     inset: 1rem 1rem auto 1rem;
   }
-  .notification.bottom-left {
+  .ar-notification.bottom-left {
     inset: auto 1rem 1rem 1rem;
   }
-  .notification.bottom-right {
+  .ar-notification.bottom-right {
     inset: auto 1rem 1rem 1rem;
   }
 }

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

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/index.js

@@ -0,0 +1,2 @@
+import Pie from "./pie";
+export { Pie };

package/dist/components/charts/pie/IProps.d.ts

@@ -0,0 +1,7 @@
+import { PieChartDataType } from "../../../libs/types";
+interface IProps {
+    title: string;
+    data: PieChartDataType[];
+    size?: number;
+}
+export default IProps;

package/dist/components/charts/pie/IProps.js

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

package/dist/components/charts/pie/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/charts/pie/pie.css";
+declare const Pie: React.FC<IProps>;
+export default Pie;

package/dist/components/charts/pie/index.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/charts/pie/pie.css";
+const Pie = ({ title, data, size }) => {
+    // refs
+    const _arPieChart = useRef(null);
+    // const _randomIndex = useRef<number[]>([]);
+    // state
+    const [conic, setConic] = useState([]);
+    // variable/s
+    const conicColors = [
+        ["#fff35e", "#000"], // Sarı
+        ["#ffc752", "#000"], // Açık Sarı
+        ["#ff9151", "#fff"], // Turuncu
+        ["#ee544e", "#fff"], // Kırmızı
+        ["#e52b66", "#fff"], // Pembemsi Kırmızı
+        ["#3c1d43", "#fff"], // Koyu Mor
+        ["#582d62", "#fff"], // Mor
+        ["#0470a7", "#fff"], // Açık Mavi
+        ["#068aa8", "#fff"], // Mavi-Turkuaz
+        ["#72a9bb", "#fff"], // Açık Mavi-Gri
+    ];
+    useEffect(() => {
+        if (!_arPieChart.current || data.length === 0)
+            return;
+        const conicGradients = [];
+        let total = data.reduce((sum, value) => sum + value.value, 0);
+        let normalizedData = data.map((value) => (value.value / total) * 100);
+        let start = 0;
+        // Gelen data uzunluğunda rastgele bir sayı dizisi oluşturuyor.
+        // do {
+        //   const r = Math.floor(Math.random() * conicColors.length);
+        //   if (!_randomIndex.current.includes(r)) _randomIndex.current.push(r);
+        // } while (_randomIndex.current.length < data.length);
+        normalizedData.forEach((percent, index) => {
+            let end = start + percent;
+            if (index === 0)
+                conicGradients.push(`#fff ${start + 0.5}% ${start}%`);
+            conicGradients.push(`${conicColors[index][0]} ${start}% ${end}%`);
+            conicGradients.push(`#fff ${end}% ${end + 0.5}%`);
+            start = end;
+        });
+        setConic(conicGradients);
+    }, [data]);
+    return (React.createElement("div", { className: "ar-pie-chart-wrapper" },
+        React.createElement("div", { className: "title" },
+            React.createElement("span", null, title)),
+        React.createElement("div", null,
+            React.createElement("div", { ref: _arPieChart, className: "ar-pie-chart", style: { background: `conic-gradient(${conic.join(", ")})`, width: size, height: size } },
+                React.createElement("article", null)),
+            React.createElement("div", { className: "information-field" }, data.map((item, index) => (React.createElement("article", { key: index },
+                React.createElement("span", { style: { backgroundColor: conicColors[index][0] } },
+                    React.createElement("span", { style: { color: conicColors[index][1] } }, item.value)),
+                React.createElement("span", null, item.text))))))));
+};
+export default Pie;

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -1,6 +1,6 @@
 import { ParagraphColors, Status } from "../../../../libs/types";
-import { IChildren, IGlobalProps } from "../../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "status">, IChildren {
+import { IChildren, IGlobalProps, ISizes } from "../../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "status">, IChildren, ISizes {
     color?: ParagraphColors | Status;
     align?: "left" | "center" | "right";
 }

package/dist/components/feedback/notification/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/feedback/notification/notification.css";
-declare const Notification: ({ title, message, status, direction, trigger }: IProps) => React.JSX.Element;
+declare const Notification: ({ title, message, status, direction, trigger }: IProps) => React.JSX.Element[];
 export default Notification;

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

@@ -5,7 +5,8 @@ import "../../../assets/css/components/feedback/notification/notification.css";
 const Notification = ({ title, message, status, direction = "bottom-left", trigger }) => {
     // useRefs
     const _firstLoad = useRef(false);
-    const _index = useRef(0);
+    // const _index = useRef<number>(0);
+    const _notificationItems = useRef([]);
     const _interval = useRef();
     // useStates
     const [items, setItems] = useState([]);
@@ -15,26 +16,37 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
             _firstLoad.current = true;
             return;
         }
-        _index.current += 1;
-        const createItem = (React.createElement("div", { className: `item ${status}` },
-            React.createElement("div", { className: "content" },
-                React.createElement("span", { className: `title ${status}` }, title),
-                React.createElement("span", { className: "message" }, message)),
-            React.createElement("div", { className: "close", "data-index": _index.current, onClick: (event) => {
-                    const target = event.currentTarget;
-                    setItems((item) => item.filter((x) => x.index !== Number(target.dataset.index)));
-                } }, "x")));
-        setItems((items) => [...items, { index: _index.current, element: createItem }]);
+        setItems((items) => [...items, { title, message, status, direction }]);
     }, [trigger]);
     useEffect(() => {
         if (items.length === 0)
             return;
         // Ekleme işlemi bittikten bir süre sonra tekrar kaldırma işlemi yapılmaktadır.
         _interval.current = setTimeout(() => {
-            setItems((items) => items.slice(0, -1));
+            setItems((items) => items.slice(1));
             clearTimeout(_interval.current);
         }, 3000);
     }, [items]);
-    return (React.createElement("div", { className: `notification ${direction}` }, items.map((item, index) => (React.createElement(React.Fragment, { key: index }, item.element)))));
+    return items.map((item, index) => {
+        let bottom = 0;
+        // Önceki öğenin yüksekliğini dikkate alarak `bottom` hesaplanıyor.
+        if (_notificationItems.current[index - 1] && index > 0) {
+            bottom = _notificationItems.current.slice(0, index).reduce((acc, el) => {
+                const rect = el.getBoundingClientRect();
+                return acc + rect.height + 20; // Önceki öğelerin yüksekliğini topluyoruz.
+            }, 0);
+        }
+        return (React.createElement("div", { key: index, ref: (element) => (_notificationItems.current[index] = element), className: "ar-notification-item", style: { bottom: `${items.length > 5 ? index * 10.5 : bottom}px` } },
+            React.createElement("div", { className: "icon" },
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status }),
+                React.createElement("span", { className: item.status })),
+            React.createElement("div", { className: "content" },
+                React.createElement("span", { className: "title" }, item.title),
+                React.createElement("span", { className: "message" }, item.message)),
+            React.createElement("div", { className: "close", onClick: () => setItems((items) => items.filter((_, _index) => _index !== index)) })));
+    });
 };
 export default Notification;

package/dist/components/form/button/IProps.d.ts

@@ -1,5 +1,5 @@
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Bileşenin şekil varyantını belirtir ve genellikle sadece ikon için kullanılmalıdır.
      * İki seçenekten biri olabilir: "circle" veya "square".

package/dist/components/form/checkbox/IProps.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "icon" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "icon" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "size"> {
     label?: string;
 }
 export default IProps;

package/dist/components/form/input/IProps.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import IButtonProps from "../button/IProps";
 import { Variants } from "../../../libs/types";
-import { IGlobalProps, IValidation } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children" | "disabled">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
+import { IGlobalProps, ISizes, IValidation } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children" | "disabled">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size">, IValidation {
     button?: IButtonProps;
     addon?: {
         variant?: Variants;

package/dist/components/form/radio/IProps.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
-import { IGlobalProps } from "../../../libs/types/IGlobalProps";
-interface IProps extends Omit<IGlobalProps, "children">, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
+import { IGlobalProps, ISizes } from "../../../libs/types/IGlobalProps";
+interface IProps extends Omit<IGlobalProps, "children">, ISizes, Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "size"> {
     label?: string;
 }
 export default IProps;

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

@@ -1,13 +1,11 @@
 "use client";
-import React, { forwardRef, useRef, useState } from "react";
+import React, { forwardRef, useRef } from "react";
 import "../../../assets/css/components/form/radio/radio.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "sm" }, upperCase, ...attributes }, ref) => {
     // refs
     const _checkbox = useRef(null);
     const _checkboxClassName = ["ar-radio"];
-    // states
-    const [checked, setChecked] = useState(false);
     _checkboxClassName.push(...Utils.GetClassName("filled", undefined, border, size, undefined, attributes.className));
     return (React.createElement("div", { className: "ar-radio-wrapper" },
         React.createElement("label", null,
@@ -16,11 +14,6 @@ const Radio = forwardRef(({ label, size = "normal", status, border = { radius: "
                         const _current = _checkbox.current;
                         if (!_current)
                             return;
-                        // 'checked' durumunun false olup olmadığını kontrol et
-                        if (event.target.checked === false) {
-                            console.log("Radio button is unchecked");
-                        }
-                        setChecked(event.target.checked);
                     })();
                     (() => attributes.onChange && attributes.onChange(event))();
                 } }),

package/dist/libs/types/IGlobalProps.d.ts

@@ -75,7 +75,6 @@ export interface IGlobalProps {
      * ```
      */
     border?: Border;
-    size?: Sizes;
     /**
      * Bileşendeki metni büyük harflere dönüştürüp dönüştürmeyeceğini belirtir.
      * Boolean (true/false) değeri alır.

package/dist/libs/types/index.d.ts

@@ -52,3 +52,7 @@ export type ValidationProperties<T> = {
     }[];
     where?: (param: T) => boolean;
 };
+export type PieChartDataType = {
+    value: number;
+    text: string;
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "ar-design",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
+    "./@charts": "./dist/components/charts/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",