@datability/8ui 1.0.0 → 1.1.0

package/src/components/modal/index.scss

@@ -0,0 +1,33 @@
+.DBui-modalContent {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  border-radius: 1em;
+  background-color: #FFFFFF;
+  box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;
+  min-width: 320px;
+  min-height: 150px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .DBui-close {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 30px;
+    height: 30px;
+    z-index: var(--z-index-normale);
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+}

package/src/components/modal/index.tsx

@@ -0,0 +1,99 @@
+// Lib
+import React, { useContext, useEffect, useRef, type JSX } from "react"
+
+//Images
+import closedSVG from "../assets/closed.svg"
+
+// Include in project
+import "./index.scss"
+import Blackdrop from "../blackdrop"
+import { DBuiContext } from "../context"
+import type { PropsModal } from "./index.type"
+
+const Modal: React.FC<PropsModal> = ({ children, open, onClose, id }): JSX.Element => {
+  const { openModalCount, setOpenModalCount } = useContext(DBuiContext)
+  const setModalIncress = () => setOpenModalCount?.((prev) => prev + 1)
+  const setModalDecress = () => setOpenModalCount?.((prev) => prev - 1)
+  const setModalZero = () => setOpenModalCount?.(0)
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const modalRef = useRef<any>(null)
+
+  // whitelist for portal UI
+  const WHITELIST_CLASSES = [
+    "DBui-wrapperMenuItem",
+    "DBui-inputDateWrapperCalendar",
+    "DBui-inputDateRangeRowMonthYearSelected",
+    "DBui-inputDateTimeWrapperCalendar",
+  ]
+
+  useEffect(() => {
+    // Update the global counter and adjust the overflow style
+    if (open) {
+      setModalIncress()
+      document.body.style.overflow = "hidden"
+    } else {
+      if (openModalCount <= 0) {
+        setModalZero()
+        document.body.style.overflow = "visible"
+      } else {
+        setModalDecress()
+      }
+    }
+
+    return () => {
+      if (openModalCount === 0) {
+        document.body.style.overflow = "visible"
+      }
+    }
+  }, [open])
+
+  useEffect(() => {
+    const modalElements = document.querySelectorAll(".DBui-modalBase")
+    const modalArray = Array.from(modalElements)
+    const showModals = modalArray.filter((modal) => modal.getAttribute("data-hidden") === "false")
+    const topModal = showModals[showModals.length - 1]
+
+    if (topModal?.getAttribute("id") !== id) return
+
+    // ---------- ESC CLOSE ----------
+    function handleKeydown(event: KeyboardEvent) {
+      if (event.key === "Escape" || event.keyCode === 27) {
+        onClose()
+      }
+    }
+
+    // ---------- CLICK OUTSIDE CLOSE ----------
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as HTMLElement
+
+      // ถ้า click ใน modal → ไม่ปิด
+      if (modalRef.current?.contains(target)) return
+
+      // ถ้า click ใน whitelist (menu, dropdown, select panel)
+      const isInWhitelist = WHITELIST_CLASSES.some((cls) => target.closest("." + cls))
+      if (isInWhitelist) return
+
+      onClose()
+    }
+
+    document.addEventListener("keydown", handleKeydown)
+    document.addEventListener("mousedown", handleClickOutside)
+
+    return () => {
+      document.removeEventListener("keydown", handleKeydown)
+      document.removeEventListener("mousedown", handleClickOutside)
+    }
+  }, [openModalCount])
+
+  return (
+    <Blackdrop open={open}>
+      <div className="DBui-modalBase DBui-modalContent" data-hidden={!open} ref={modalRef} id={id}>
+        <img src={closedSVG} alt="" className="DBui-close" onClick={onClose} />
+        <div>{children}</div>
+      </div>
+    </Blackdrop>
+  )
+}
+
+export default Modal

package/src/components/modal/index.type.tsx

@@ -0,0 +1,8 @@
+import type { JSX } from "react"
+
+export type PropsModal = {
+  children: JSX.Element | JSX.Element[]
+  open: boolean
+  onClose: () => void
+  id: string
+}

package/src/index.scss

@@ -0,0 +1,44 @@
+* {
+  outline: none !important;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 1em 0;
+  padding: 0;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 70%;
+  min-height: 100px;
+  background-color: #FAFAFA;
+  border: 1px solid #E3E3E8;
+  margin: 1em 0;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.gap-sm {
+  gap: 1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+}

package/src/index.ts

@@ -0,0 +1,62 @@
+export { default as Button } from "./components/button"
+export type { PropsButton } from "./components/button/index.type"
+
+export { default as Blackdrop } from "./components/blackdrop" // Need variable --z-index-backdrop
+export type { PropsBlackdrop } from "./components/blackdrop/index.type"
+
+export { default as Chip } from "./components/chip"
+export type { PropsChip } from "./components/chip/index.type"
+
+export { default as Divider } from "./components/divider"
+
+export { default as Menu } from "./components/menu" // Need variable --z-index-menu
+export type { PropsMenu } from "./components/menu/index.type"
+
+export { default as Modal } from "./components/modal" // Need variable --z-index-normale
+export type { PropsModal } from "./components/modal/index.type"
+
+export { default as Input } from "./components/input/input-basic"
+export type { PropsInputBasic as PropsInput } from "./components/input/input-basic/index.type"
+
+export { default as InputNumber } from "./components/input/input-number"
+export type { PropsInputNumber } from "./components/input/input-number/index.type"
+
+export { default as InputDate } from "./components/input/input-date"
+export type { PropsInputDate } from "./components/input/input-date/index.type"
+
+export { default as InputDateRange } from "./components/input/input-date-range"
+export type { PropsInputDateRange } from "./components/input/input-date-range/index.type"
+
+export { default as InputDateTime } from "./components/input/input-date-time"
+export type { PropsInputDateTime } from "./components/input/input-date-time/index.type"
+
+export { default as InputPassword } from "./components/input/input-password"
+export type { PropsInputPassword } from "./components/input/input-password/index.type"
+
+export { default as InputRadio } from "./components/input/input-radio"
+export type { PropsInputRadio } from "./components/input/input-radio/index.type"
+
+export { default as InputCheckbox } from "./components/input/input-checkbox"
+export type { PropsInputCheckbox } from "./components/input/input-checkbox/index.type"
+
+export { default as InputTextarea } from "./components/input/input-textarea"
+export type { PropsInputTextarea } from "./components/input/input-textarea/index.type"
+
+export { default as InputSelect } from "./components/input/input-select"
+export type { PropsInputSelect } from "./components/input/input-select/index.type"
+
+export { default as InputAutoComplete } from "./components/input/input-auto-complete"
+export type { PropsInputAutoComplete } from "./components/input/input-auto-complete/index.type"
+
+export { default as InputSwitch } from "./components/input/input-switch"
+export type { PropsInputSwitch } from "./components/input/input-switch/index.type"
+
+// Type
+export type TValueOption = string | number
+export type TOption = {
+  label: string
+  value: TValueOption
+}
+
+// Context
+export { DBuiContext, DBuiProvider } from "./components/context"

package/src/logoDownload.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.77508 4.84992C3.69885 4.77369 3.65602 4.6703 3.65602 4.5625C3.65602 4.4547 3.69885 4.35131 3.77508 4.27508C3.85131 4.19885 3.9547 4.15602 4.0625 4.15602C4.1703 4.15602 4.27369 4.19885 4.34992 4.27508L6.09375 6.01941V1.71875C6.09375 1.61101 6.13655 1.50767 6.21274 1.43149C6.28892 1.3553 6.39226 1.3125 6.5 1.3125C6.60774 1.3125 6.71108 1.3553 6.78726 1.43149C6.86345 1.50767 6.90625 1.61101 6.90625 1.71875V6.01941L8.65008 4.27508C8.72631 4.19885 8.8297 4.15602 8.9375 4.15602C9.0453 4.15602 9.14869 4.19885 9.22492 4.27508C9.30115 4.35131 9.34398 4.4547 9.34398 4.5625C9.34398 4.6703 9.30115 4.77369 9.22492 4.84992L6.78742 7.28742C6.74969 7.32519 6.70489 7.35516 6.65557 7.3756C6.60625 7.39605 6.55339 7.40657 6.5 7.40657C6.44661 7.40657 6.39375 7.39605 6.34443 7.3756C6.29511 7.35516 6.25031 7.32519 6.21258 7.28742L3.77508 4.84992ZM12.1875 7.40625V10.6562C12.1875 10.8717 12.1019 11.0784 11.9495 11.2308C11.7972 11.3831 11.5905 11.4688 11.375 11.4688H1.625C1.40951 11.4688 1.20285 11.3831 1.05048 11.2308C0.898102 11.0784 0.8125 10.8717 0.8125 10.6562V7.40625C0.8125 7.19076 0.898102 6.9841 1.05048 6.83173C1.20285 6.67935 1.40951 6.59375 1.625 6.59375H4.28594C4.31262 6.59373 4.33905 6.59897 4.3637 6.60916C4.38836 6.61935 4.41077 6.63431 4.42965 6.65316L5.63672 7.86328C5.74994 7.9769 5.88449 8.06705 6.03263 8.12857C6.18077 8.19008 6.3396 8.22174 6.5 8.22174C6.6604 8.22174 6.81923 8.19008 6.96737 8.12857C7.11551 8.06705 7.25006 7.9769 7.36328 7.86328L8.57188 6.65469C8.60938 6.61642 8.66048 6.59451 8.71406 6.59375H11.375C11.5905 6.59375 11.7972 6.67935 11.9495 6.83173C12.1019 6.9841 12.1875 7.19076 12.1875 7.40625ZM10.1562 9.03125C10.1562 8.91073 10.1205 8.79291 10.0536 8.6927C9.98659 8.59249 9.89142 8.51438 9.78007 8.46826C9.66872 8.42214 9.5462 8.41007 9.42799 8.43358C9.30978 8.4571 9.2012 8.51513 9.11598 8.60036C9.03076 8.68558 8.97272 8.79416 8.94921 8.91237C8.9257 9.03057 8.93776 9.1531 8.98389 9.26445C9.03001 9.3758 9.10811 9.47097 9.20832 9.53793C9.30854 9.60489 9.42635 9.64062 9.54688 9.64062C9.70849 9.64062 9.86349 9.57642 9.97777 9.46214C10.092 9.34786 10.1562 9.19287 10.1562 9.03125Z" fill="#C3C3C3"/>
+</svg>

package/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import App from "./App.tsx"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "composite": true,
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+   "declaration": true,
+    "declarationDir": "dist/types",
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "rootDir": "src",
+    "outDir": "dist/types",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "typeRoots": [
+      "./dist/index.d.ts",
+      "node_modules/@types"
+    ]
+  },
+  "include": [
+    "src",
+    "./index.ts",
+    "declaration.d.ts"
+  ],
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+
+    "composite": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/vite.config.ts

@@ -0,0 +1,35 @@
+import path from "path"
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import dts from "vite-plugin-dts"
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "iteratex-component-library",
+      fileName: (format) => `index.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+    cssCodeSplit: true,
+    sourcemap: true,
+    emptyOutDir: true,
+  },
+  server: { host: true, port: 3000 },
+  plugins: [
+    react(),
+    dts({
+      insertTypesEntry: true,
+      rollupTypes: false,
+      outDir: "dist/types",
+    }),
+  ],
+})