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

package/dist/index.d.ts

@@ -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";
@@ -95,7 +97,35 @@ declare function MenuNavBar({ menus, onClick }: MenuNavBarProps): react_jsx_runt
 
 interface TopNavBarProps {
     onClickNoti: () => void;
+    logo?: React.ReactNode;
 }
-declare function TopNavBar({ onClickNoti }: TopNavBarProps): react_jsx_runtime.JSX.Element;
+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.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,13 +17,23 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Calendar: () => Calendar,
   Checkbox: () => Checkbox,
   CheckboxGroup: () => CheckboxGroup,
+  DataTable: () => DataTable,
   GhostButton: () => GhostButton,
   Loader: () => Loader,
   MenuNavBar: () => MenuNavBar,
@@ -30,6 +42,7 @@ __export(index_exports, {
   RadioGroup: () => RadioGroup,
   SecondaryButton: () => SecondaryButton,
   Switch: () => Switch,
+  TextInput: () => TextInput,
   TopNavBar: () => TopNavBar
 });
 module.exports = __toCommonJS(index_exports);
@@ -208,12 +221,10 @@ function MenuNavBar({ menus, onClick }) {
 // src/NavBar/TopNavBar/TopNavBar.tsx
 var import_icons_react2 = require("@tabler/icons-react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var import_meta = {};
-var STOLogo = new URL("../../assets/STO-logo.svg", import_meta.url).href;
-function TopNavBar({ onClickNoti }) {
+function TopNavBar({ onClickNoti, logo }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full h-full flex", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: STOLogo }),
+      logo,
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "subtitle-1", children: "Project Management" })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [
@@ -223,10 +234,206 @@ function TopNavBar({ onClickNoti }) {
     ] })
   ] });
 }
+
+// src/Table/DataTable/DataTable.tsx
+var import_jsx_runtime12 = require("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__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "border rounded-md", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${gridClass} font-semibold border-b border-gray-200`, style: { ["--cols"]: cols }, children: columns.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "py-[8px] px-[16px] body-4 truncate", children: col.header }, i)) }),
+    data.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: `${gridClass} border-b border-gray-200 items-center`,
+        style: { ["--cols"]: cols },
+        children: columns.map((col, c) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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
+var import_react = require("react");
+var import_react2 = __toESM(require("@fullcalendar/react"));
+var import_daygrid = __toESM(require("@fullcalendar/daygrid"));
+var import_timegrid = __toESM(require("@fullcalendar/timegrid"));
+var import_interaction = __toESM(require("@fullcalendar/interaction"));
+var import_en_gb = __toESM(require("@fullcalendar/core/locales/en-gb"));
+var import_icons_react3 = require("@tabler/icons-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Calendar({ events }) {
+  const calendarRef = (0, import_react.useRef)(null);
+  const [monthTitle, setMonthTitle] = (0, import_react.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);
+  };
+  (0, import_react.useEffect)(() => {
+    updateTitle();
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "fc w-full h-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex mb-[8px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "headline-5", children: monthTitle }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-[10px] ml-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "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__ */ (0, import_jsx_runtime13.jsx)(
+          "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__ */ (0, import_jsx_runtime13.jsx)(
+          "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__ */ (0, import_jsx_runtime13.jsx)(
+          "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__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().prev();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_react3.IconChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            className: "cursor-pointer",
+            onClick: () => {
+              calendarRef.current?.getApi().next();
+              updateTitle();
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_icons_react3.IconChevronRight, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      import_react2.default,
+      {
+        ref: calendarRef,
+        plugins: [import_daygrid.default, import_timegrid.default, import_interaction.default],
+        events,
+        locale: import_en_gb.default,
+        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__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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
+var import_icons_react4 = require("@tabler/icons-react");
+var import_react3 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function TextInput({
+  label,
+  placeholder,
+  type = "text",
+  maxLength,
+  required,
+  error,
+  value,
+  onChange
+}) {
+  const [showPassword, setShowPassword] = (0, import_react3.useState)(false);
+  const onShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+  const inputType = type === "password" ? showPassword ? "text" : "password" : "text";
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "body-1 mb-[8px]", children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-red-600", children: "\xA0*" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: `border-[1px] rounded-[8px] w-full h-[40px] flex justify-center items-center ${error ? "border-red-600" : ""}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "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__ */ (0, import_jsx_runtime14.jsx)(import_icons_react4.IconEye, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons_react4.IconEyeOff, { className: "text-gray-600 mr-[8px] cursor-pointer", onClick: onShowPassword }))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-red-600 body-1", children: error })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Calendar,
   Checkbox,
   CheckboxGroup,
+  DataTable,
   GhostButton,
   Loader,
   MenuNavBar,
@@ -235,5 +442,6 @@ function TopNavBar({ onClickNoti }) {
   RadioGroup,
   SecondaryButton,
   Switch,
+  TextInput,
   TopNavBar
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -39,7 +39,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "tsup src/index.ts --dts --dts-resolve --format esm --out-dir dist && npm run copy-assets",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist && npm run copy-assets",
     "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y"
   },
   "peerDependencies": {