@esic-lab/data-core-ui 0.0.2 → 0.0.4

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@esic-lab/data-core-ui",
-  "version": "0.0.2",
-  "main": "index.js",
+  "version": "0.0.4",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
     "@iconify/react": "^6.0.1",
@@ -22,13 +27,15 @@
     "storybook": "^9.1.3",
     "tailwindcss": "^4.1.12",
     "ts-node": "^10.9.2",
+    "tsup": "^8.5.0",
     "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"
+    "build-storybook": "storybook build",
+    "build": "tsup src/index.ts --dts --dts-resolve --format esm,cjs --out-dir dist"
   },
   "keywords": [],
   "author": "",

package/.storybook/main.ts

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/postcss.config.js

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

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

@@ -1,20 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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>
-  );
-}

package/src/Switch/Switch/Switch.stories.tsx

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