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

package/dist/index.css

@@ -24,14 +24,20 @@
       "Courier New",
       monospace;
     --color-red-100: #fac5c3;
+    --color-red-400: #f16965;
     --color-red-500: #ee443f;
+    --color-red-600: #d93e39;
+    --color-green-500: #43b75d;
     --color-blue-500: #0095ff;
     --color-gray-200: #e5e7ea;
     --color-gray-300: #d2d5db;
     --color-gray-400: #9ea2ae;
+    --color-gray-600: #4d5461;
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
+    --font-weight-semibold: 600;
+    --radius-md: 0.375rem;
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -230,12 +236,24 @@
   }
 }
 @layer utilities {
+  .relative {
+    position: relative;
+  }
   .static {
     position: static;
   }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
   .mt-\[10px\] {
     margin-top: 10px;
   }
+  .mr-\[8px\] {
+    margin-right: 8px;
+  }
+  .mb-\[8px\] {
+    margin-bottom: 8px;
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -248,6 +266,9 @@
   .flex {
     display: flex;
   }
+  .grid {
+    display: grid;
+  }
   .hidden {
     display: none;
   }
@@ -269,9 +290,15 @@
   .h-\[24px\] {
     height: 24px;
   }
+  .h-\[28px\] {
+    height: 28px;
+  }
   .h-\[30px\] {
     height: 30px;
   }
+  .h-\[35px\] {
+    height: 35px;
+  }
   .h-\[40px\] {
     height: 40px;
   }
@@ -281,6 +308,9 @@
   .h-\[47px\] {
     height: 47px;
   }
+  .h-\[700px\] {
+    height: 700px;
+  }
   .h-full {
     height: 100%;
   }
@@ -305,12 +335,21 @@
   .w-\[40px\] {
     width: 40px;
   }
+  .w-\[80px\] {
+    width: 80px;
+  }
+  .w-\[100px\] {
+    width: 100px;
+  }
   .w-\[202px\] {
     width: 202px;
   }
   .w-\[242px\] {
     width: 242px;
   }
+  .w-\[1500px\] {
+    width: 1500px;
+  }
   .w-full {
     width: 100%;
   }
@@ -343,6 +382,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .\[grid-template-columns\:repeat\(var\(--cols\)\,minmax\(0\,1fr\)\)\] {
+    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  }
   .flex-col {
     flex-direction: column;
   }
@@ -364,6 +406,17 @@
   .gap-\[20px\] {
     gap: 20px;
   }
+  .truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .rounded-\[6px\] {
     border-radius: 6px;
   }
@@ -373,6 +426,9 @@
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -385,6 +441,14 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-l-\[10px\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 10px;
+  }
   .border-solid {
     --tw-border-style: solid;
     border-style: solid;
@@ -392,6 +456,15 @@
   .border-black {
     border-color: var(--color-black);
   }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
+  .border-red-600 {
+    border-color: var(--color-red-600);
+  }
   .border-t-transparent {
     border-top-color: transparent;
   }
@@ -413,6 +486,9 @@
   .bg-primary-500 {
     background-color: var(--color-primary-500);
   }
+  .bg-red-400 {
+    background-color: var(--color-red-400);
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -422,15 +498,37 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-\[4px\] {
+    padding: 4px;
+  }
   .p-\[10px\] {
     padding: 10px;
   }
+  .px-\[16px\] {
+    padding-inline: 16px;
+  }
+  .py-\[8px\] {
+    padding-block: 8px;
+  }
+  .text-left {
+    text-align: left;
+  }
   .text-\[20px\] {
     font-size: 20px;
   }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .text-black {
     color: var(--color-black);
   }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
   .text-white {
     color: var(--color-white);
   }
@@ -449,6 +547,10 @@
       var(--tw-ring-shadow),
       var(--tw-shadow);
   }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -573,6 +675,9 @@
     border-color: var(--color-gray-200, currentcolor);
   }
 }
+::-ms-reveal {
+  display: none;
+}
 .headline-1 {
   font-family: "Kanit";
   font-size: 48px;
@@ -713,6 +818,52 @@
   font-weight: 600;
   line-height: 12px;
 }
+.fc-toolbar-title {
+  font-family: "Kanit";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+}
+.fc-col-header-cell-cushion {
+  font-family: "Kanit";
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+.fc-daygrid-day {
+  height: 100px;
+}
+.fc-daygrid-day-number {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+.fc-daygrid-day-top {
+  display: flex;
+  justify-content: center;
+}
+.fc-event {
+  border: none;
+  background: none;
+}
+.fc-daygrid-more-link {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
+.fc-popover-title {
+  font-family: "Kanit";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+}
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; }
@@ -725,6 +876,7 @@
 @property --tw-skew-x { syntax: "*"; inherits: false; }
 @property --tw-skew-y { syntax: "*"; inherits: false; }
 @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; }
+@property --tw-font-weight { syntax: "*"; inherits: false; }
 @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
 @property --tw-shadow-color { syntax: "*"; inherits: false; }
 @property --tw-shadow-alpha { syntax: "<percentage>"; inherits: false; initial-value: 100%; }
@@ -739,6 +891,7 @@
 @property --tw-ring-offset-width { syntax: "<length>"; inherits: false; initial-value: 0px; }
 @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; }
 @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; }
+@property --tw-outline-style { syntax: "*"; inherits: false; initial-value: solid; }
 @property --tw-duration { syntax: "*"; inherits: false; }
 @keyframes spin {
   to {
@@ -763,6 +916,7 @@
       --tw-skew-x: initial;
       --tw-skew-y: initial;
       --tw-border-style: solid;
+      --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -777,6 +931,7 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
       --tw-duration: initial;
     }
   }

package/dist/index.d.mts

@@ -95,7 +95,8 @@ 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 };

package/dist/index.js

@@ -47,7 +47,7 @@ function PrimaryButton({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor}`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor} body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: iconLeft }),
@@ -64,7 +64,7 @@ function SecondaryButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: iconLeft }),
@@ -81,7 +81,7 @@ function GhostButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9]`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9] body-1`,
       onClick,
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: iconLeft }),
@@ -125,7 +125,7 @@ function Checkbox({ label, checked, onChange }) {
         )
       }
     ),
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: label })
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "body-1", children: label })
   ] });
 }
 
@@ -153,7 +153,7 @@ var import_jsx_runtime8 = require("react/jsx-runtime");
 function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: opt.label })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "body-1", children: opt.label })
   ] }, opt.value)) });
 }
 
@@ -184,7 +184,7 @@ function Switch({ label, checked, onChange }) {
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function MenuNavBar({ menus, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full h-full p-[10px]", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
     menu?.subMenus.map((subMenu) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "div",
@@ -205,16 +205,15 @@ function MenuNavBar({ menus, onClick }) {
   ] }, `menu_${menu.title}`)) });
 }
 
-// src/assets/STO-logo.svg
-var STO_logo_default = "./STO-logo-ADYYAPS3.svg";
-
 // 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 }) {
   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: STO_logo_default }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("img", { src: STOLogo }),
       /* @__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: [

package/dist/index.mjs

@@ -11,7 +11,7 @@ function PrimaryButton({
   return /* @__PURE__ */ jsx(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor}`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor} body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx("div", { children: iconLeft }),
@@ -28,7 +28,7 @@ function SecondaryButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ jsx2(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs2("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx2("div", { children: iconLeft }),
@@ -45,7 +45,7 @@ function GhostButton({ title, onClick, iconLeft, iconRight }) {
   return /* @__PURE__ */ jsx3(
     "button",
     {
-      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9]`,
+      className: `flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9] body-1`,
       onClick,
       children: /* @__PURE__ */ jsxs3("div", { className: "flex justify-center items-center gap-[10px]", children: [
         iconLeft && /* @__PURE__ */ jsx3("div", { children: iconLeft }),
@@ -89,7 +89,7 @@ function Checkbox({ label, checked, onChange }) {
         )
       }
     ),
-    label && /* @__PURE__ */ jsx5("p", { children: label })
+    label && /* @__PURE__ */ jsx5("p", { className: "body-1", children: label })
   ] });
 }
 
@@ -117,7 +117,7 @@ import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function RadioGroup({ options, value, onChange, alignment = "horizontal" }) {
   return /* @__PURE__ */ jsx8("div", { className: `flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`, children: options.map((opt) => /* @__PURE__ */ jsxs5("label", { className: "flex items-center gap-2 cursor-pointer", children: [
     /* @__PURE__ */ jsx8(Radio, { selected: value === opt.value, onChange: () => onChange(opt.value) }),
-    /* @__PURE__ */ jsx8("span", { children: opt.label })
+    /* @__PURE__ */ jsx8("span", { className: "body-1", children: opt.label })
   ] }, opt.value)) });
 }
 
@@ -148,7 +148,7 @@ function Switch({ label, checked, onChange }) {
 // src/NavBar/MenuNavBar/MenuNavBar.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function MenuNavBar({ menus, onClick }) {
-  return /* @__PURE__ */ jsx10("div", { className: "w-full h-full p-[10px]", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs7("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
+  return /* @__PURE__ */ jsx10("div", { className: "w-full h-full p-[10px] bg-white", children: menus?.map((menu, index) => /* @__PURE__ */ jsxs7("div", { className: `p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`, children: [
     /* @__PURE__ */ jsx10("p", { className: "p-[10px] w-[202px] h-[47px] subtitle-1", children: menu.title }),
     menu?.subMenus.map((subMenu) => /* @__PURE__ */ jsxs7(
       "div",
@@ -169,16 +169,13 @@ function MenuNavBar({ menus, onClick }) {
   ] }, `menu_${menu.title}`)) });
 }
 
-// src/assets/STO-logo.svg
-var STO_logo_default = "./STO-logo-ADYYAPS3.svg";
-
 // src/NavBar/TopNavBar/TopNavBar.tsx
 import { IconBellRinging } from "@tabler/icons-react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-function TopNavBar({ onClickNoti }) {
+function TopNavBar({ onClickNoti, logo }) {
   return /* @__PURE__ */ jsxs8("div", { className: "w-full h-full flex", children: [
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-[20px] p-[10px]", children: [
-      /* @__PURE__ */ jsx11("img", { src: STO_logo_default }),
+      logo,
       /* @__PURE__ */ jsx11("p", { className: "subtitle-1", children: "Project Management" })
     ] }),
     /* @__PURE__ */ jsxs8("div", { className: "flex items-center ml-auto gap-[20px] p-[10px]", children: [

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "dist/assets",
+    "README.md",
+    "LICENSE"
   ],
   "style": "dist/index.css",
   "devDependencies": {
@@ -36,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,cjs --out-dir dist && npm run copy-assets",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm --out-dir dist && npm run copy-assets",
     "copy-assets": "xcopy src\\assets dist\\assets /E /I /Y"
   },
   "peerDependencies": {
@@ -48,6 +51,11 @@
   "license": "MIT",
   "description": "STO-core-UI",
   "dependencies": {
+    "@fullcalendar/core": "^6.1.19",
+    "@fullcalendar/daygrid": "^6.1.19",
+    "@fullcalendar/interaction": "^6.1.19",
+    "@fullcalendar/react": "^6.1.19",
+    "@fullcalendar/timegrid": "^6.1.19",
     "@tabler/icons-react": "^3.34.1",
     "classnames": "^2.5.1"
   },