@esic-lab/data-core-ui 0.0.2

package/.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.stories.@(ts|tsx|js|jsx|mdx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ESIC Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@esic-lab/data-core-ui",
+  "version": "0.0.2",
+  "main": "index.js",
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@iconify/react": "^6.0.1",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-styling-webpack": "^2.0.0",
+    "@storybook/addon-vitest": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.11",
+    "@types/react-dom": "^19.1.8",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "playwright": "^1.55.0",
+    "postcss": "^8.5.6",
+    "prop-types": "^15.8.1",
+    "storybook": "^9.1.3",
+    "tailwindcss": "^4.1.12",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "description": "STO-core-UI",
+  "dependencies": {
+    "@tabler/icons-react": "^3.34.1",
+    "classnames": "^2.5.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ESICLab/STO-core-UI.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ESICLab/STO-core-UI/issues"
+  },
+  "homepage": "https://github.com/ESICLab/STO-core-UI#readme"
+}

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

package/src/Button/GhostButton/GhostButton.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { GhostButton } from "./GhostButton";
+
+import { IconPlus } from "@tabler/icons-react";
+
+const meta = {
+  component: GhostButton,
+} satisfies Meta<typeof GhostButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "สร้างโครงการ",
+    onClick: () => alert("onClick"),
+    iconLeft: <IconPlus size={16} />,
+  },
+};

package/src/Button/GhostButton/GhostButton.tsx

@@ -0,0 +1,26 @@
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
+type ThemeColor = `bg-${BaseColor}-${ColorScale}`;
+
+interface GhostButtonProps {
+  title: string;
+  onClick: () => void;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+}
+
+//TODO: disabled button, on hover, loading
+export function GhostButton({ title, onClick, iconLeft, iconRight }: GhostButtonProps) {
+  return (
+    <button
+      className={`flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer bg-[#E9E9E9]`}
+      onClick={onClick}
+    >
+      <div className="flex justify-center items-center gap-[10px]">
+        {iconLeft && <div>{iconLeft}</div>}
+        {title}
+        {iconRight && <div>{iconRight}</div>}
+      </div>
+    </button>
+  );
+}

package/src/Button/PrimaryButton/PrimaryButton.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { PrimaryButton } from "./PrimaryButton";
+
+import { IconPlus } from "@tabler/icons-react";
+
+const meta = {
+  component: PrimaryButton,
+} satisfies Meta<typeof PrimaryButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "สร้างโครงการ",
+    onClick: () => alert("onClick"),
+    iconLeft: <IconPlus size={16} />,
+    textColor: "white",
+  },
+};

package/src/Button/PrimaryButton/PrimaryButton.tsx

@@ -0,0 +1,35 @@
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
+type ThemeColor = `bg-${BaseColor}-${ColorScale}`;
+
+interface PrimaryButtonProps {
+  title: string;
+  onClick: () => void;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+  bgColor?: ThemeColor;
+  textColor?: "white" | "black";
+}
+
+//TODO: disabled button, on hover, loading
+export function PrimaryButton({
+  title,
+  onClick,
+  iconLeft,
+  iconRight,
+  bgColor = "bg-primary-500",
+  textColor = "black",
+}: PrimaryButtonProps) {
+  return (
+    <button
+      className={`flex justify-center w-full h-[42px] rounded-[6px] p-[10px] cursor-pointer ${bgColor} text-${textColor}`}
+      onClick={onClick}
+    >
+      <div className="flex justify-center items-center gap-[10px]">
+        {iconLeft && <div>{iconLeft}</div>}
+        {title}
+        {iconRight && <div>{iconRight}</div>}
+      </div>
+    </button>
+  );
+}

package/src/Button/SecondaryButton/SecondaryButton.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SecondaryButton } from "./SecondaryButton";
+
+const meta = {
+  component: SecondaryButton,
+} satisfies Meta<typeof SecondaryButton>;
+
+export default meta;
+type Story = StoryObj<typeof SecondaryButton>;
+
+export const Default: Story = {
+  render: () => {
+    return <SecondaryButton title="Demo" onClick={() => alert("onClick")} />;
+  },
+};

package/src/Button/SecondaryButton/SecondaryButton.tsx

@@ -0,0 +1,26 @@
+type ColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type BaseColor = "primary" | "gray" | "green" | "red" | "yellow" | "blue";
+type ThemeColor = `bg-${BaseColor}-${ColorScale}`;
+
+interface SecondaryButtonProps {
+  title: string;
+  onClick: () => void;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
+}
+
+//TODO: disabled button, on hover
+export function SecondaryButton({ title, onClick, iconLeft, iconRight }: SecondaryButtonProps) {
+  return (
+    <button
+      className={`flex justify-center w-full h-[42px] rounded-[6px] p-[10px] border-[1px] border-black cursor-pointer bg-white text-black`}
+      onClick={onClick}
+    >
+      <div className="flex justify-center items-center gap-[10px]">
+        {iconLeft && <div>{iconLeft}</div>}
+        {title}
+        {iconRight && <div>{iconRight}</div>}
+      </div>
+    </button>
+  );
+}

package/src/Checkbox/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "./Checkbox";
+import { useState } from "react";
+
+const meta = {
+  component: Checkbox,
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <Checkbox checked={checked} onChange={setChecked} label="Remember me" />;
+  },
+};

package/src/Checkbox/Checkbox/Checkbox.tsx

@@ -0,0 +1,27 @@
+import { IconCheck } from "@tabler/icons-react";
+
+interface CheckboxProps {
+  label?: string;
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export function Checkbox({ label, checked, onChange }: CheckboxProps) {
+  return (
+    <div className="flex gap-[10px]">
+      <div
+        className={`flex justify-center items-center border-[1px] border-black w-[24px] h-[24px] rounded-[8px] cursor-pointer transition-colors duration-100 
+          ${checked ? "bg-black text-white" : "bg-white text-black"}`}
+        onClick={() => onChange(!checked)}
+      >
+        <span
+          className={`flex justify-center items-center transition-transform duration-150 
+            ${checked ? "scale-100 opacity-100" : "scale-0 opacity-0"}`}
+        >
+          <IconCheck size={20} />
+        </span>
+      </div>
+      {label && <p>{label}</p>}
+    </div>
+  );
+}

package/src/Checkbox/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+
+import { CheckboxGroup } from "./CheckboxGroup";
+import { useState } from "react";
+
+const meta = {
+  component: CheckboxGroup,
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof CheckboxGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const [options, setOptions] = useState([
+      { checked: false, label: "Apple" },
+      { checked: true, label: "Banana" },
+      { checked: false, label: "Cherry" },
+    ]);
+
+    const onChange = (label: string) => {
+      setOptions((prev) => prev.map((opt) => (opt.label === label ? { ...opt, checked: !opt.checked } : opt)));
+    };
+
+    const selectedItem = options.filter((opt) => opt.checked).map((item) => item.label);
+
+    return (
+      <div>
+        <CheckboxGroup options={options} onChange={onChange} alignment="vertical" />
+        <p>Selected items: {selectedItem.join(", ")} </p>
+      </div>
+    );
+  },
+};

package/src/Checkbox/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Checkbox } from "../Checkbox/Checkbox";
+
+interface CheckboxOption {
+  checked: boolean;
+  label: string;
+}
+
+interface CheckboxGroupProps {
+  options: CheckboxOption[];
+  onChange: (label: string) => void;
+  alignment?: "horizontal" | "vertical";
+}
+
+export function CheckboxGroup({ options, onChange, alignment = "vertical" }: CheckboxGroupProps) {
+  return (
+    <div className={`flex gap-4 ${alignment === "vertical" ? "flex-col" : ""}`}>
+      {options.map((opt) => (
+        <Checkbox key={opt.label} checked={opt.checked} label={opt.label} onChange={() => onChange(opt.label)} />
+      ))}
+    </div>
+  );
+}

package/src/Loader/Loader/Loader.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Loader } from "./Loader";
+
+const meta = {
+  component: Loader,
+} satisfies Meta<typeof Loader>;
+
+export default meta;
+type Story = StoryObj<typeof Loader>;
+
+export const Default: Story = {
+  render: () => {
+    return <Loader />;
+  },
+};

package/src/Loader/Loader/Loader.tsx

@@ -0,0 +1,12 @@
+interface LoaderProps {
+  size?: number;
+}
+
+export function Loader({ size = 25 }: LoaderProps) {
+  return (
+    <div
+      style={{ width: size, height: size }}
+      className="border-4 border-black border-t-transparent border-solid rounded-full animate-spin"
+    ></div>
+  );
+}

package/src/NavBar/MenuNavBar/MenuNavBar.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuNavBar } from "./MenuNavBar";
+
+import { Icon } from "@iconify/react";
+
+import {
+  IconLayoutDashboard,
+  IconLayoutDashboardFilled,
+  IconFolder,
+  IconFolderFilled,
+  IconSquareCheck,
+  IconSquareCheckFilled,
+  IconCalendarMonth,
+  IconFileAnalytics,
+  IconSettings,
+  IconHelp,
+  IconCalendarMonthFilled,
+  IconFileAnalyticsFilled,
+} from "@tabler/icons-react";
+
+const meta = {
+  component: MenuNavBar,
+} satisfies Meta<typeof MenuNavBar>;
+
+export default meta;
+type Story = StoryObj<typeof MenuNavBar>;
+
+export const Default: Story = {
+  render: () => {
+    const MENU = [
+      {
+        title: "ภาพรวม",
+        subMenus: [
+          {
+            title: "แดชบอร์ด",
+            icon: <IconLayoutDashboard />,
+            iconActive: <IconLayoutDashboardFilled />,
+            path: "/dashboard",
+          },
+          { title: "โครงการ", icon: <IconFolder />, iconActive: <IconFolderFilled />, path: "/project" },
+        ],
+      },
+      {
+        title: "การจัดการ",
+        subMenus: [
+          {
+            title: "สิ่งที่ต้องทำ",
+            icon: <IconSquareCheck />,
+            iconActive: <IconSquareCheckFilled />,
+            path: "/todo",
+            customNode: (
+              <div
+                className="flex justify-center items-center w-[30px] h-[30px] rounded-[6px] bg-red-500 text-white 
+              group-hover:bg-white group-hover:text-primary-500 group-hover:border-[1px] group-hover:border-primary-500 
+              group-active:bg-red-500 group-active:text-white  btn-small"
+              >
+                5
+              </div>
+            ),
+          },
+          {
+            title: "กำหนดการ",
+            icon: <IconCalendarMonth />,
+            iconActive: <IconCalendarMonthFilled />,
+            path: "/calendar",
+          },
+          { title: "รายงาน", icon: <IconFileAnalytics />, iconActive: <IconFileAnalyticsFilled />, path: "/report" },
+          { title: "ทีม", icon: <Icon icon="ri:team-line" />, iconActive: <Icon icon="ri:team-fill" />, path: "/team" },
+        ],
+      },
+      {
+        title: "ตั้งค่า",
+        subMenus: [
+          { title: "ตั้งค่า", icon: <IconSettings />, path: "/setting" },
+          { title: "ศูนย์ความช่วยเหลือ", icon: <IconHelp />, path: "/help" },
+        ],
+      },
+    ];
+    return (
+      <div className="w-[242px]">
+        <MenuNavBar menus={MENU} onClick={(v) => console.log(v)} />
+      </div>
+    );
+  },
+};

package/src/NavBar/MenuNavBar/MenuNavBar.tsx

@@ -0,0 +1,43 @@
+interface Menu {
+  title: string;
+  subMenus: {
+    title: string;
+    icon?: React.ReactNode;
+    iconActive?: React.ReactNode;
+    path: string;
+    customNode?: React.ReactNode;
+  }[];
+}
+
+interface MenuNavBarProps {
+  menus: Menu[];
+  onClick: (path: string) => void;
+}
+
+export function MenuNavBar({ menus, onClick }: MenuNavBarProps) {
+  return (
+    <div className="w-full h-full p-[10px]">
+      {menus?.map((menu, index) => (
+        <div key={`menu_${menu.title}`} className={`p-[10px] ${index !== 0 ? "mt-[10px]" : ""}`}>
+          <p className="p-[10px] w-[202px] h-[47px] subtitle-1">{menu.title}</p>
+          {menu?.subMenus.map((subMenu) => (
+            <div
+              key={`sub_${subMenu.title}`}
+              className="group flex justify-center items-center gap-[10px] p-[10px] w-[202px] h-[47px] rounded-[6px] subtitle-2 cursor-pointer hover:bg-red-100 active:bg-primary-500 hover:text-white active:text-white"
+              onClick={() => onClick(subMenu.path)}
+            >
+              <span className="flex justify-center items-center w-[24px] h-[24px] text-[20px]">
+                {subMenu.icon && (
+                  <span className={`block ${subMenu.iconActive ? "group-active:hidden" : ""}`}>{subMenu.icon}</span>
+                )}
+                {subMenu.iconActive && <span className="hidden group-active:block">{subMenu.iconActive}</span>}
+              </span>
+              {subMenu.title}
+              <span className="flex ml-auto">{subMenu.customNode && subMenu.customNode}</span>
+            </div>
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/NavBar/TopNavBar/TopNavBar.stories.tsx

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { TopNavBar } from "./TopNavBar";
+
+const meta = {
+  component: TopNavBar,
+} satisfies Meta<typeof TopNavBar>;
+
+export default meta;
+type Story = StoryObj<typeof TopNavBar>;
+
+export const Default: Story = {
+  render: () => {
+    return <TopNavBar onClickNoti={() => console.log("noti")} />;
+  },
+};

package/src/NavBar/TopNavBar/TopNavBar.tsx

@@ -0,0 +1,24 @@
+import STOLogo from "../../assets/STO-logo.svg";
+import { IconBellRinging } from "@tabler/icons-react";
+
+interface TopNavBarProps {
+  onClickNoti: () => void;
+}
+
+export function TopNavBar({ onClickNoti }: TopNavBarProps) {
+  return (
+    <div className="w-full h-full flex">
+      <div className="flex items-center gap-[20px] p-[10px]">
+        <img src={STOLogo} />
+        <p className="subtitle-1">Project Management</p>
+      </div>
+      <div className="flex items-center ml-auto gap-[20px] p-[10px]">
+        <div>Search</div>
+        <div>
+          <IconBellRinging onClick={onClickNoti} className="cursor-pointer" />
+        </div>
+        <div className="w-[40px] h-[40px] bg-gray-400 rounded-full cursor-pointer"></div>
+      </div>
+    </div>
+  );
+}

package/src/Radio/Radio/Radio.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Radio } from "./Radio";
+import { useState } from "react";
+
+const meta = {
+  component: Radio,
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  render: () => {
+    const [selected, setSelected] = useState(false);
+    return <Radio selected={selected} onChange={setSelected} />;
+  },
+};

package/src/Radio/Radio/Radio.tsx

@@ -0,0 +1,15 @@
+interface RadioProps {
+  selected: boolean;
+  onChange: (selected: boolean) => void;
+}
+
+export function Radio({ selected, onChange }: RadioProps) {
+  return (
+    <div
+      className="flex justify-center items-center w-[16px] h-[16px] border-[1px] border-black rounded-full cursor-pointer"
+      onClick={() => onChange(!selected)}
+    >
+      {selected && <div className={`bg-black w-[10px] h-[10px] rounded-full transition-all duration-300`} />}
+    </div>
+  );
+}

package/src/Radio/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { RadioGroup } from "./RadioGroup";
+
+const meta = {
+  component: RadioGroup,
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Default: Story = {
+  render: () => {
+    const options = [
+      { value: "1", label: "Option 1" },
+      { value: "2", label: "Option 2" },
+      { value: "3", label: "Option 3" },
+    ];
+
+    const [selected, setSelected] = useState("1");
+    return <RadioGroup onChange={setSelected} options={options} value={selected} alignment="vertical" />;
+  },
+};

package/src/Radio/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,27 @@
+import { Radio } from "../Radio/Radio";
+
+interface RadioOption {
+  value: string;
+  label: string;
+}
+
+interface RadioGroupProps {
+  options: RadioOption[];
+  value: string;
+  onChange: (value: string) => void;
+  alignment?: "vertical" | "horizontal";
+}
+
+//TODO: ALIGNMENT
+export function RadioGroup({ options, value, onChange, alignment = "horizontal" }: RadioGroupProps) {
+  return (
+    <div className={`flex gap-2 ${alignment === "vertical" ? "flex-col" : ""}`}>
+      {options.map((opt) => (
+        <label key={opt.value} className="flex items-center gap-2 cursor-pointer">
+          <Radio selected={value === opt.value} onChange={() => onChange(opt.value)} />
+          <span>{opt.label}</span>
+        </label>
+      ))}
+    </div>
+  );
+}