ar-design 0.4.26 → 0.4.28

package/dist/assets/css/components/data-display/calendar/styles.css

@@ -0,0 +1,15 @@
+@import url("./styles.week-view.css");
+
+.ar-calendar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0.75rem 0.75rem 0.75rem 2rem;
+
+  > .header {
+    .week-time {
+      color: var(--gray-700);
+      font-size: 1.5rem;
+    }
+  }
+}

package/dist/assets/css/components/data-display/calendar/styles.week-view.css

@@ -0,0 +1,128 @@
+.ar-calendar {
+  > .ar-calendar-week-view {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    background-color: var(--white);
+    padding: 0.75rem 0.75rem 0.75rem 2rem;
+    border-radius: var(--border-radius-sm);
+
+    > .head {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      padding-left: 50px;
+
+      > .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1rem;
+        width: calc(100% / 7);
+        padding: 0.5rem 0;
+
+        > .day-name {
+          color: var(--gray-400);
+          font-size: 0.75rem;
+        }
+
+        > .date {
+          font-size: 1.5rem;
+        }
+      }
+    }
+
+    > .body {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+
+      > .clocks {
+        > div {
+          height: 60px;
+
+          > span {
+            color: var(--gray-700);
+            font-size: 0.75rem;
+          }
+        }
+      }
+
+      > .grid {
+        position: relative;
+        width: 100%;
+        height: calc(24 * 60px);
+        border: solid 1px transparent;
+        border-top-color: var(--gray-200);
+        overflow: hidden;
+
+        > .events-layer {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: 1;
+
+          > .event-box {
+            position: absolute;
+            width: calc(100% / 7);
+            padding: 0.5rem;
+            color: var(--white);
+            font-size: 12px;
+          }
+        }
+
+        > .row {
+          position: relative;
+          height: 60px;
+          margin: auto;
+
+          &:nth-child(2) {
+            > .cell {
+              &::before {
+                content: "";
+                position: absolute;
+                left: -1px;
+                background-color: var(--gray-200);
+                width: 1px;
+                height: 25px;
+                transform: translateY(-25px);
+              }
+            }
+          }
+
+          &:last-child {
+            > .cell {
+              border-bottom-color: transparent;
+            }
+          }
+
+          > .cell {
+            position: relative;
+            width: calc(100% / 7);
+            height: 60px;
+            padding: 0;
+            border: solid 1px transparent;
+            border-left-color: var(--gray-200);
+            border-bottom-color: var(--gray-200);
+
+            &:first-child {
+              &::after {
+                content: "";
+                position: absolute;
+                top: -2px;
+                left: 0;
+                background-color: var(--gray-200);
+                width: 15px;
+                height: 1px;
+                transform: translateX(-15px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/dist/components/data-display/calendar/Body.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { View } from "../../../libs/types";
+import { CalendarEvent } from "./IProps";
+interface IProps {
+    data: CalendarEvent[];
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+        view: {
+            get: View;
+            set: React.Dispatch<React.SetStateAction<View>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+    };
+}
+declare const Body: ({ data, states, config }: IProps) => React.JSX.Element;
+export default Body;

package/dist/components/data-display/calendar/Body.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Day from "./views/Day";
+import Week from "./views/Week";
+import Month from "./views/Month";
+const Body = ({ data, states, config }) => {
+    if (states.view.get === "Day")
+        return React.createElement(Day, null);
+    else if (states.view.get === "Week")
+        return React.createElement(Week, { data: data, states: { currentDate: states.currentDate }, config: config });
+    else if (states.view.get === "Month")
+        return React.createElement(Month, null);
+    return React.createElement(React.Fragment, null, "...");
+};
+export default Body;

package/dist/components/data-display/calendar/Header.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "../../../libs/types";
+interface IProps {
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+        view: {
+            get: View;
+            set: React.Dispatch<React.SetStateAction<View>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+declare const Header: ({ states, config }: IProps) => React.JSX.Element;
+export default Header;

package/dist/components/data-display/calendar/Header.js

@@ -0,0 +1,26 @@
+import React from "react";
+import Button from "../../form/button";
+import { ARIcon } from "../../icons";
+import Box from "../grid-system/box/Box";
+const Header = ({ states, config }) => {
+    // methods
+    const changeWeek = (direction) => {
+        states.currentDate.set((prev) => {
+            if (direction === "today")
+                return new Date();
+            const newDate = new Date(prev);
+            newDate.setDate(prev.getDate() + (direction === "next" ? 7 : -7));
+            return newDate;
+        });
+    };
+    return (React.createElement("div", { className: "header" },
+        React.createElement(Box, null,
+            React.createElement(Button, { variant: "outlined", color: "green", border: { radius: "xxl" }, onClick: () => changeWeek("today") }, "Bug\u00FCn"),
+            React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "currentColor" }) }, onClick: () => changeWeek("prev") }),
+            React.createElement(Button, { variant: "borderless", color: "light", border: { radius: "pill" }, icon: { element: React.createElement(ARIcon, { icon: "ArrowRight", stroke: "currentColor" }) }, onClick: () => changeWeek("next") }),
+            React.createElement("span", { className: "week-time" },
+                states.currentDate.get.toLocaleString(config?.locale ?? "tr-TR", { month: "long" }),
+                " ",
+                states.currentDate.get.getFullYear()))));
+};
+export default Header;

package/dist/components/data-display/calendar/IProps.d.ts

@@ -0,0 +1,12 @@
+export type CalendarEvent = {
+    start: Date;
+    end: Date;
+};
+interface IProps {
+    data: CalendarEvent[];
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+export default IProps;

package/dist/components/data-display/calendar/IProps.js

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

package/dist/components/data-display/calendar/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/calendar/styles.css";
+declare const Calendar: React.FC<IProps>;
+export default Calendar;

package/dist/components/data-display/calendar/index.js

@@ -0,0 +1,27 @@
+"use client";
+import React, { useState } from "react";
+import Body from "./Body";
+import Header from "./Header";
+import "../../../assets/css/components/data-display/calendar/styles.css";
+const Calendar = ({ data, config }) => {
+    // states
+    const [currentDate, setCurrentDate] = useState(new Date());
+    const [view, setView] = useState("Week");
+    return (React.createElement("div", { className: "ar-calendar" },
+        React.createElement(Header, { states: {
+                currentDate: { get: currentDate, set: setCurrentDate },
+                view: {
+                    get: view,
+                    set: setView,
+                },
+            }, config: config }),
+        React.createElement(Body, { data: data, states: {
+                currentDate: { get: currentDate, set: setCurrentDate },
+                view: {
+                    get: view,
+                    set: setView,
+                },
+            }, config: config })));
+};
+Calendar.displayName = "DatePicker";
+export default Calendar;

package/dist/components/data-display/calendar/views/Day.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Day: () => React.JSX.Element;
+export default Day;

package/dist/components/data-display/calendar/views/Day.js

@@ -0,0 +1,5 @@
+import React from "react";
+const Day = () => {
+    return React.createElement(React.Fragment, null);
+};
+export default Day;

package/dist/components/data-display/calendar/views/Month.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const Month: () => React.JSX.Element;
+export default Month;

package/dist/components/data-display/calendar/views/Month.js

@@ -0,0 +1,5 @@
+import React from "react";
+const Month = () => {
+    return React.createElement(React.Fragment, null);
+};
+export default Month;

package/dist/components/data-display/calendar/views/Week.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { CalendarEvent } from "../IProps";
+interface IProps {
+    data: CalendarEvent[];
+    states: {
+        currentDate: {
+            get: Date;
+            set: React.Dispatch<React.SetStateAction<Date>>;
+        };
+    };
+    config?: {
+        locale?: Intl.LocalesArgument;
+        weekStartsOn?: number;
+    };
+}
+declare const Week: ({ data, states, config }: IProps) => React.JSX.Element;
+export default Week;

package/dist/components/data-display/calendar/views/Week.js

@@ -0,0 +1,104 @@
+import React, { useEffect, useMemo, useState } from "react";
+const Week = ({ data, states, config }) => {
+    const startHour = 0;
+    const endHour = 24;
+    const hours = endHour - startHour;
+    const cellHeight = 60;
+    const [events, setEvents] = useState([]);
+    const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
+    useEffect(() => {
+        setEvents(data);
+    }, [data]);
+    return (React.createElement("div", { className: "ar-calendar-week-view" },
+        React.createElement("div", { className: "head" }, weekDays.map((day) => (React.createElement("div", { key: day.toISOString(), className: "item", style: { flex: 1, textAlign: "center" } },
+            React.createElement("span", { className: "day-name" }, day.toLocaleString(config?.locale ?? "tr", { weekday: "short" }).toUpperCase()),
+            React.createElement("span", { className: "date" }, day.getDate()))))),
+        React.createElement("div", { className: "body" },
+            React.createElement("div", { className: "clocks", style: { width: "50px" } }, Array.from({ length: hours }, (_, index) => (React.createElement("div", { key: index },
+                React.createElement("span", null,
+                    String(startHour + index).padStart(2, "0"),
+                    ":00"))))),
+            React.createElement("div", { role: "grid", className: "grid" },
+                Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (React.createElement("div", { key: colIndex, className: "cell" })))))),
+                React.createElement("div", { className: "events-layer" }, events.flatMap((event, eventIdx) => {
+                    const eventColor = getColor(eventIdx);
+                    // Her etkinlik için haftanın günlerini gezip, o güne düşen parçayı hesaplıyoruz
+                    return weekDays.map((day, dayIndex) => {
+                        const dayStart = new Date(day);
+                        dayStart.setHours(0, 0, 0, 0);
+                        const dayEnd = new Date(day);
+                        dayEnd.setHours(23, 59, 59, 999);
+                        // Etkinlik bu günle kesişiyor mu?
+                        const overlapStart = new Date(Math.max(event.start.getTime(), dayStart.getTime()));
+                        const overlapEnd = new Date(Math.min(event.end.getTime(), dayEnd.getTime()));
+                        if (overlapStart < overlapEnd) {
+                            // Bu güne düşen kısmın yükseklik ve top değerleri
+                            const startMinutes = overlapStart.getHours() * 60 + overlapStart.getMinutes();
+                            const durationMinutes = (overlapEnd.getTime() - overlapStart.getTime()) / 60000;
+                            const top = (startMinutes / 60) * cellHeight;
+                            const height = (durationMinutes / 60) * cellHeight;
+                            // Durum Kontrolleri
+                            const isContinuedFromYesterday = event.start < dayStart;
+                            const isContinuingTomorrow = event.end > dayEnd;
+                            return (React.createElement("div", { key: `${eventIdx}-${dayIndex}`, className: "event-box", style: {
+                                    backgroundColor: eventColor.bg,
+                                    top: `${top}px`,
+                                    height: `${height}px`,
+                                    left: `${(100 / 7) * dayIndex}%`,
+                                    width: `${100 / 7}%`,
+                                    borderTop: isContinuedFromYesterday ? "none" : `1px solid ${eventColor.border}`,
+                                    borderBottom: isContinuingTomorrow ? "none" : `1px solid ${eventColor.border}`,
+                                    borderRadius: isContinuedFromYesterday
+                                        ? "0 0 var(--border-radius-sm) var(--border-radius-sm)"
+                                        : isContinuingTomorrow
+                                            ? "var(--border-radius-sm) var(--border-radius-sm) 0 0"
+                                            : "var(--border-radius-sm)",
+                                } }, !isContinuedFromYesterday && (React.createElement(React.Fragment, null,
+                                React.createElement("div", { className: "event-content" },
+                                    event.start.toLocaleTimeString(config?.locale ?? "tr-TR", {
+                                        hour: "2-digit",
+                                        minute: "2-digit",
+                                    }),
+                                    " - ",
+                                    event.end.toLocaleTimeString(config?.locale ?? "tr-TR", {
+                                        hour: "2-digit",
+                                        minute: "2-digit",
+                                    }))))));
+                        }
+                        return null;
+                    });
+                }))))));
+};
+// Yardımcı Fonksiyonlar aynı kalıyor
+const getWeekRange = (date, weekStartsOn = 1) => {
+    const current = new Date(date);
+    const currentDay = current.getDay();
+    const diff = (currentDay - weekStartsOn + 7) % 7;
+    const start = new Date(current);
+    start.setDate(current.getDate() - diff);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(start);
+    end.setDate(start.getDate() + 6);
+    return { start, end };
+};
+const getWeekDays = (date, weekStartsOn = 1) => {
+    const { start } = getWeekRange(date, weekStartsOn);
+    return Array.from({ length: 7 }, (_, i) => {
+        const d = new Date(start);
+        d.setDate(start.getDate() + i);
+        return d;
+    });
+};
+const getColor = (id) => {
+    const colors = [
+        { bg: "#3174ad", border: "#2a6293" }, // Mavi
+        { bg: "#4caf50", border: "#388e3c" }, // Yeşil
+        { bg: "#ff9800", border: "#f57c00" }, // Turuncu
+        { bg: "#9c27b0", border: "#7b1fa2" }, // Mor
+        { bg: "#e91e63", border: "#c2185b" }, // Pembe
+        { bg: "#00bcd4", border: "#0097a7" }, // Turkuaz
+    ];
+    const index = typeof id === "number" ? id : id.length;
+    return colors[index % colors.length];
+};
+export default Week;

package/dist/components/data-display/table/IProps.d.ts

@@ -21,7 +21,7 @@ export type SearchedParam = {
     [key: string]: FilterValue | FilterValue[];
 };
 export type Config<T> = {
-    locale?: string;
+    locale?: Intl.LocalesArgument;
     isServerSide?: boolean;
     isProperties?: boolean;
     isSearchable?: boolean;

package/dist/components/form/date-picker/Props.d.ts

@@ -3,6 +3,7 @@ type Props = {
     label?: string;
     onChange: (value: string) => void;
     config?: {
+        locale?: Intl.LocalesArgument;
         isClock?: boolean;
         isFooterButton?: boolean;
     };

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import Select from "./components/form/select";
 import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
+import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Diagram from "./components/data-display/diagram/index";
@@ -33,4 +34,4 @@ import Pagination from "./components/navigation/pagination";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/data-display/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Drawer, Modal, Popover, Progress, Tooltip, Breadcrumb, Menu, Pagination, Steps, Grid, Layout, };

package/dist/index.js

@@ -12,6 +12,7 @@ import Switch from "./components/form/switch";
 import TextEditor from "./components/form/text-editor";
 import Upload from "./components/form/upload";
 // Data Display
+import Calendar from "./components/data-display/calendar";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Diagram from "./components/data-display/diagram/index";
@@ -42,7 +43,7 @@ export {
 // Form Elements
 Button, ButtonAction, ButtonGroup, Checkbox, DatePicker, Input, Radio, Select, Switch, TextEditor, Upload, 
 // Data Display
-Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
+Calendar, Card, Chip, Diagram, Divider, DnD, KanbanBoard, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
 Alert, Drawer, Modal, Popover, Progress, Tooltip, 
 // Navigation

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

@@ -111,4 +111,5 @@ export type EdgeData = {
         port: Port;
     };
 };
+export type View = "Day" | "Week" | "Month" | "Year";
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.26",
+  "version": "0.4.28",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",