@esic-lab/data-core-ui 0.0.13 → 0.0.14

package/dist/index.d.mts

@@ -1,4 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { EventSourceInput } from '@fullcalendar/core';
 
 type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
@@ -99,4 +101,31 @@ interface TopNavBarProps {
 }
 declare function TopNavBar({ onClickNoti, logo }: TopNavBarProps): react_jsx_runtime.JSX.Element;
 
-export { Checkbox, CheckboxGroup, GhostButton, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, Radio, RadioGroup, SecondaryButton, Switch, TopNavBar };
+interface Column<T> {
+    header: string;
+    accessor: keyof T | ((row: T) => React$1.ReactNode);
+}
+interface DataTableProps<T> {
+    columns: Column<T>[];
+    data: T[];
+}
+declare function DataTable<T>({ columns, data }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CalendarProps {
+    events: EventSourceInput | undefined;
+}
+declare function Calendar({ events }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+interface TextInputProps {
+    label: string;
+    placeholder?: string;
+    type?: "text" | "password";
+    maxLength?: number;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onChange: (value: string) => void;
+}
+declare function TextInput({ label, placeholder, type, maxLength, required, error, value, onChange, }: TextInputProps): react_jsx_runtime.JSX.Element;
+
+export { Calendar, Checkbox, CheckboxGroup, DataTable, GhostButton, Loader, MenuNavBar, type MenuNavBarProps, PrimaryButton, Radio, RadioGroup, SecondaryButton, Switch, TextInput, TopNavBar };

package/dist/index.mjs

@@ -185,9 +185,205 @@ function TopNavBar({ onClickNoti, logo }) {
     ] })
   ] });
 }
+
+// src/Table/DataTable/DataTable.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function DataTable({ columns, data }) {
+  const cols = Math.max(1, columns.length);
+  const gridClass = "grid [grid-template-columns:repeat(var(--cols),minmax(0,1fr))]";
+  return /* @__PURE__ */ jsxs9("div", { className: "border rounded-md", children: [
+    /* @__PURE__ */ jsx12("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => /* @__PURE__ */ jsx12("div", { className: "py-[8px] px-[16px] body-4 truncate", children: col.header }, i)) }),
+    data.map((row, i) => /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: `${gridClass} border-b border-gray-200 items-center`,
+        style: { ["--cols"]: cols },
+        children: columns.map((col, c) => /* @__PURE__ */ jsx12("div", { className: "py-[8px] px-[16px] body-3 truncate", children: typeof col.accessor === "function" ? col.accessor(row) : String(row[col.accessor]) }, c))
+      },
+      i
+    ))
+  ] });
+}
+
+// src/Calendar/Calendar/Calendar.tsx
+import { useEffect, useRef, useState } from "react";
+import FullCalendar from "@fullcalendar/react";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import timeGridPlugin from "@fullcalendar/timegrid";
+import interactionPlugin from "@fullcalendar/interaction";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function Calendar({ events }) {
+  const calendarRef = useRef(null);
+  const [monthTitle, setMonthTitle] = useState("");
+  const updateTitle = () => {
+    const calendarApi = calendarRef.current?.getApi();
+    if (calendarApi) {
+      setMonthTitle(calendarApi.view.title);
+    }
+  };
+  const changeView = (viewName) => {
+    const calendarApi = calendarRef.current?.getApi();
+    calendarApi?.changeView(viewName);
+  };
+  useEffect(() => {
+    updateTitle();
+  }, []);
+  return /* @__PURE__ */ jsxs10("div", { className: "fc w-full h-full", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex mb-[8px]", children: [
+      /* @__PURE__ */ jsx13("p", { className: "headline-5", children: monthTitle }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex gap-[10px] ml-auto", children: [
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              calendarRef.current.getApi().today();
+              updateTitle();
+            },
+            children: "\u0E27\u0E31\u0E19\u0E19\u0E35\u0E49"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("dayGridMonth");
+              updateTitle();
+            },
+            children: "Month"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("dayGridWeek");
+              updateTitle();
+            },
+            children: "Week"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "p",
+          {
+            className: "w-[80px] h-[35px] border-[1px] flex justify-center items-center rounded-[2px] body-3 cursor-pointer",
+            onClick: () => {
+              changeView("timeGridDay");
+              updateTitle();
+            },
+            children: "Day"
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().prev();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx13(IconChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx13(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().next();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ jsx13(IconChevronRight, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx13(
+      FullCalendar,
+      {
+        ref: calendarRef,
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
+        events,
+        locale: enLocale,
+        slotLabelFormat: {
+          hour: "numeric",
+          minute: "2-digit"
+        },
+        firstDay: 0,
+        fixedWeekCount: false,
+        initialView: "dayGridMonth",
+        headerToolbar: false,
+        dayMaxEventRows: 4,
+        moreLinkText: "\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23",
+        editable: true,
+        eventDrop: (info) => {
+          console.log("Event \u0E02\u0E2D\u0E07\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48:", info.event.startStr);
+        },
+        eventContent: (arg) => {
+          return /* @__PURE__ */ jsx13(Fragment, { children: /* @__PURE__ */ jsx13("div", { className: "relative top-4 flex items-center h-[28px] p-[4px] border-green-500 border-l-[10px] bg-red-400 rounded text-left text-white caption-1", children: arg.event.title }) });
+        }
+      }
+    )
+  ] });
+}
+
+// src/Input/TextInput/TextInput.tsx
+import { IconEye, IconEyeOff } from "@tabler/icons-react";
+import { useState as useState2 } from "react";
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function TextInput({
+  label,
+  placeholder,
+  type = "text",
+  maxLength,
+  required,
+  error,
+  value,
+  onChange
+}) {
+  const [showPassword, setShowPassword] = useState2(false);
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsxs11("p", { className: "body-1 mb-[8px]", children: [
+      label,
+      required && /* @__PURE__ */ jsx14("span", { className: "text-red-600", children: "\xA0*" })
+    ] }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center ${error ? "border-red-600" : ""}`,
+        children: [
+          /* @__PURE__ */ jsx14(
+            "input",
+            {
+              className: "w-full h-full px-[16px]",
+              style: { outline: "none" },
+              placeholder,
+              type: inputType,
+              maxLength,
+              value,
+              onChange: (e) => onChange(e.target.value)
+            }
+          ),
+          type === "password" && (showPassword ? /* @__PURE__ */ jsx14(IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ jsx14(IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx14("p", { className: "text-red-600 body-1", children: error })
+  ] });
+}
 export {
+  Calendar,
   Checkbox,
   CheckboxGroup,
+  DataTable,
   GhostButton,
   Loader,
   MenuNavBar,
@@ -196,5 +392,6 @@ export {
   RadioGroup,
   SecondaryButton,
   Switch,
+  TextInput,
   TopNavBar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",