ar-design 0.4.26 → 0.4.27

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,124 @@
+.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%;
+
+      > .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%;
+        border: solid 1px transparent;
+        border-top-color: var(--gray-200);
+
+        > .events-layer {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1;
+
+          > .event-box {
+            position: absolute;
+            background-color: rgba(var(--primary-rgb), 0.75);
+            width: calc(100% / 7);
+            padding: 0.5rem;
+            border-radius: var(--border-radius-sm);
+            color: var(--white);
+            font-size: 12px;
+          }
+        }
+
+        > .row {
+          position: relative;
+          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,99 @@
+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 slotDuration = 15;
+    // const slotHeight = cellHeight / (60 / slotDuration);
+    // states
+    const [events, setEvents] = useState([]);
+    // const [tempStart, setTempStart] = useState<{
+    //   date: Date;
+    //   minutes: number;
+    // } | null>(null);
+    // methods
+    // const handleClick = (weekDay: Date, hourIndex: number) => (event: React.MouseEvent<HTMLDivElement>) => {
+    //   const rect = event.currentTarget.getBoundingClientRect();
+    //   const y = event.clientY - rect.top;
+    //   const slotIndex = Math.floor(y / slotHeight);
+    //   const minutes = hourIndex * 60 + slotIndex * slotDuration;
+    //   if (!tempStart) {
+    //     setTempStart({ date: weekDay, minutes });
+    //     return;
+    //   }
+    //   const startMinutes = Math.min(tempStart.minutes, minutes);
+    //   const endMinutes = Math.max(tempStart.minutes, minutes) + slotDuration;
+    //   const startDate = new Date(weekDay);
+    //   startDate.setHours(Math.floor(startMinutes / 60), startMinutes % 60, 0, 0);
+    //   const endDate = new Date(weekDay);
+    //   endDate.setHours(Math.floor(endMinutes / 60), endMinutes % 60, 0, 0);
+    //   setEvents((prev) => [...prev, { start: startDate, end: endDate }]);
+    //   setTempStart(null);
+    // };
+    const weekDays = useMemo(() => getWeekDays(states.currentDate.get, config?.weekStartsOn ?? 1), [states.currentDate.get, config?.weekStartsOn]);
+    // useEffects
+    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" },
+            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" }, 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" },
+                React.createElement("div", { className: "events-layer" }, events.map((event, index) => {
+                    const dayIndex = weekDays.findIndex((d) => d.toDateString() === event.start.toDateString());
+                    if (dayIndex === -1)
+                        return null;
+                    const startMinutes = event.start.getHours() * 60 + event.start.getMinutes();
+                    const durationMinutes = (event.end.getTime() - event.start.getTime()) / 60000;
+                    const top = (startMinutes / 60) * cellHeight;
+                    const height = (durationMinutes / 60) * cellHeight;
+                    return (React.createElement("div", { key: index, className: "event-box", style: {
+                            top,
+                            height,
+                            left: `${(100 / 7) * dayIndex}%`,
+                        } },
+                        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",
+                        })));
+                })),
+                Array.from({ length: hours }).map((_, rowIndex) => (React.createElement("div", { key: rowIndex, className: "row" }, weekDays.map((_, colIndex) => (
+                // <div key={colIndex} className="cell" onClick={handleClick(weekDay, rowIndex)} />
+                React.createElement("div", { key: colIndex, className: "cell" }))))))))));
+};
+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;
+    });
+};
+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.27",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",