@datability/8ui 0.1.69 → 1.1.0

package/src/components/input/input-select/index.tsx

@@ -0,0 +1,113 @@
+// Lib
+import React from "react"
+import { Controller, useFormContext } from "react-hook-form"
+
+// Images
+import expandArrowSVG from "../../assets/expand-arrow.svg"
+import closedSVG from "../../assets/closed.svg"
+
+// Include in project
+import "./index.scss"
+import InputBase from "../input-base"
+import Menu from "../../menu"
+import type { TOption, TValueOption } from "../.."
+import type { PropsInputSelect } from "./index.type"
+
+const InputSelect: React.FC<PropsInputSelect> = ({
+  name,
+  label,
+  disabled = false,
+  require = false,
+  fullWidth = false,
+  options,
+  onChange,
+  isHideClearIcon = true,
+  placeholder,
+  isInModal = false,
+}) => {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => {
+        const { value, onChange: setValue } = field
+        const { invalid, error } = fieldState
+
+        const selected = options?.find((e) => e.value === value) as TOption | undefined
+
+        const handleSelect = (val: TValueOption, close: () => void) => {
+          setValue(val)
+          onChange?.(val)
+          close()
+        }
+
+        const handleClear = (e: React.MouseEvent<HTMLImageElement>) => {
+          e.stopPropagation()
+          setValue(null)
+          onChange?.(null)
+        }
+
+        return (
+          <InputBase
+            name={name}
+            label={label}
+            require={require}
+            fullWidth={fullWidth}
+            isInvalid={invalid}
+            errorMessage={error?.message}
+          >
+            <Menu
+              isInModal={isInModal}
+              disabled={disabled}
+              trigger={({ isOpen }) => (
+                <div className="DBui-wrapperInputSelect" data-invalid={invalid} data-disabled={disabled}>
+                  <div className="DBui-wrapperLabelInputSelect">
+                    {selected?.label ? (
+                      <p className="DBui-wrapperLabel">
+                        <small>{selected.label}</small>
+                      </p>
+                    ) : (
+                      <p className="DBui-placeholder">
+                        <small>{placeholder}</small>
+                      </p>
+                    )}
+
+                    <img
+                      src={closedSVG}
+                      className="DBui-clearIconInputSelect"
+                      onClick={handleClear}
+                      data-hidden={!value || disabled || isHideClearIcon}
+                    />
+                  </div>
+
+                  <img
+                    src={expandArrowSVG}
+                    className="DBui-arrowIconInputSelect"
+                    data-checked={disabled ? true : !isOpen}
+                  />
+                </div>
+              )}
+            >
+              {({ close }) =>
+                options.map((data, index) => (
+                  <p
+                    key={index}
+                    className="DBui-menuItemInputSelect"
+                    onClick={() => handleSelect(data.value, close)}
+                    data-checked={value === data.value}
+                  >
+                    {data.label}
+                  </p>
+                ))
+              }
+            </Menu>
+          </InputBase>
+        )
+      }}
+    />
+  )
+}
+
+export default InputSelect

package/src/components/input/input-select/index.type.tsx

@@ -0,0 +1,15 @@
+import type { TOption, TValueOption } from "../.."
+
+export type PropsInputSelect = {
+  name: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  require?: boolean
+  fullWidth?: boolean
+  options: TOption[]
+  onChange?: (value: TValueOption | null) => void
+  value?: string
+  isHideClearIcon?: boolean
+  isInModal?: boolean
+}

package/{dist/components/InputNonContext/InputSwitch → src/components/input/input-switch}/index.scss

@@ -63,7 +63,7 @@
     }
 
     input:checked+.DBui-slider {
-        background-color: #6F5EE0;
+        background-color: #477cee;
     }
 
     input:checked+.DBui-slider:before {

package/src/components/input/input-switch/index.tsx

@@ -0,0 +1,44 @@
+// Lib
+import React from "react"
+import { Controller, useFormContext } from "react-hook-form"
+
+// Include in project
+import "./index.scss"
+import type { PropsInputSwitch } from "./index.type"
+
+const InputSwitch: React.FC<PropsInputSwitch> = ({ name, disabled }) => {
+  const { control } = useFormContext()
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => {
+        const { value, onChange } = field
+
+        return (
+          <div className="DBui-wrapInputList" data-disabled={disabled}>
+            <label className="DBui-switch">
+              <span className="DBui-minus"></span>
+              <span className="DBui-miniCircle"></span>
+
+              <input
+                type="checkbox"
+                checked={Boolean(value)}
+                disabled={disabled}
+                onChange={(e) => {
+                  e.stopPropagation()
+                  onChange(!value)
+                }}
+              />
+
+              <span className="DBui-slider"></span>
+            </label>
+          </div>
+        )
+      }}
+    />
+  )
+}
+
+export default InputSwitch

package/src/components/input/input-switch/index.type.tsx

@@ -0,0 +1,4 @@
+export type PropsInputSwitch = {
+  name: string
+  disabled?: boolean
+}

package/src/components/input/input-textarea/index.tsx

@@ -0,0 +1,48 @@
+// Lib
+import React from "react"
+import { useFormContext, useFormState } from "react-hook-form"
+
+// Include in project
+import "./index.scss"
+import InputBase from "../input-base"
+import type { PropsInputTextarea } from "./index.type"
+
+const InputTextarea: React.FC<PropsInputTextarea> = ({
+  name,
+  label,
+  placeholder,
+  disabled = false,
+  require = false,
+  fullWidth = false,
+  rows = 2,
+  cols = 50,
+}) => {
+  const { register, control } = useFormContext()
+  const { errors } = useFormState({ control, name })
+
+  const error = errors?.[name]
+  const isInvalid = Boolean(error)
+
+  return (
+    <InputBase
+      name={name}
+      label={label}
+      require={require}
+      fullWidth={fullWidth}
+      isInvalid={isInvalid}
+      errorMessage={error?.message}
+    >
+      <textarea
+        {...register(name)}
+        className="DBui-inputTextarea"
+        placeholder={placeholder}
+        disabled={disabled}
+        rows={rows}
+        cols={cols}
+        data-invalid={isInvalid}
+      />
+    </InputBase>
+  )
+}
+
+export default InputTextarea

package/src/components/input/input-textarea/index.type.tsx

@@ -0,0 +1,10 @@
+export type PropsInputTextarea = {
+  name: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  require?: boolean
+  fullWidth?: boolean
+  rows?: number
+  cols?: number
+}

package/src/components/menu/index.tsx

@@ -0,0 +1,136 @@
+// Lib
+import React, { useEffect, useRef, useState } from "react"
+import { createPortal } from "react-dom"
+import "./index.scss"
+import type { PropsMenu } from "./index.type"
+
+const Menu: React.FC<PropsMenu> = ({ children, trigger, disabled, isInModal = false }) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [menuStyle, setMenuStyle] = useState({})
+
+  const triggerRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  // Toggle dropdown
+  const toggleMenu = () => {
+    if (!disabled) setIsOpen((prev) => !prev)
+  }
+
+  // ------------ MAIN POSITIONING FUNCTION ------------
+  const calculateMenuPosition = () => {
+    if (!triggerRef.current || !menuRef.current) return
+
+    const triggerRect = triggerRef.current.getBoundingClientRect()
+    const menu = menuRef.current
+
+    const viewportH = window.innerHeight
+    const viewportW = window.innerWidth
+    const menuWidth = menu.offsetWidth
+
+    const spaceAbove = triggerRect.top
+    const spaceBelow = viewportH - triggerRect.bottom
+
+    // วางล่างถ้าพื้นที่ล่างมากกว่า
+    const placeBottom = spaceBelow >= spaceAbove
+
+    let top = placeBottom
+      ? triggerRect.bottom // show below
+      : triggerRect.top - menu.offsetHeight // show above (height กำหนดจาก CSS max-height)
+
+    // เปลี่ยน logic ตรงนี้ → กันเมนูล้นจอจาก CSS max-height
+    // ถ้าด้านบนพื้นที่ไม่พอ ให้ clamp
+    if (!placeBottom) {
+      const minTop = 8
+      if (top < minTop) top = minTop
+    }
+
+    let left = triggerRect.left
+    if (left + menuWidth > viewportW - 8) {
+      left = viewportW - menuWidth - 8
+    }
+    if (left < 8) left = 8
+
+    setMenuStyle({
+      position: "fixed",
+      top,
+      left,
+    })
+  }
+
+  // ------------ Double RAF (ให้ DOM render ก่อน 100%) ------------
+  useEffect(() => {
+    if (!isOpen) return
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        calculateMenuPosition()
+      })
+    })
+  }, [isOpen, children])
+
+  // ------------ Reposition when scroll/resize/orientation ------------
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handler = () => calculateMenuPosition()
+
+    window.addEventListener("scroll", handler, true)
+    window.addEventListener("resize", handler)
+    window.addEventListener("orientationchange", handler)
+
+    return () => {
+      window.removeEventListener("scroll", handler, true)
+      window.removeEventListener("resize", handler)
+      window.removeEventListener("orientationchange", handler)
+    }
+  }, [isOpen, children])
+
+  // ------------ Close On Click Outside ------------
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleClick = (e: MouseEvent) => {
+      const t = triggerRef.current
+      const m = menuRef.current
+      if (!t || !m) return
+
+      if (!t.contains(e.target as Node) && !m.contains(e.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener("mousedown", handleClick)
+    return () => document.removeEventListener("mousedown", handleClick)
+  }, [isOpen])
+
+  // Portal root
+  const portalRoot = document.getElementById("root") || document.getElementById("__next") || document.body
+
+  return (
+    <>
+      <div ref={triggerRef} className="DBui-wrapperMenu" onClick={toggleMenu}>
+        {trigger({ isOpen })}
+      </div>
+
+      {isOpen &&
+        createPortal(
+          <div
+            ref={menuRef}
+            className="DBui-wrapperMenuItem"
+            style={menuStyle}
+            data-hidden={!isOpen}
+            data-is-in-modal={isInModal}
+          >
+            {typeof children === "function"
+              ? children({
+                  close: () => setIsOpen(false),
+                })
+              : children}
+          </div>,
+          portalRoot,
+        )}
+    </>
+  )
+}
+
+export default Menu

package/src/components/menu/index.type.ts

@@ -0,0 +1,8 @@
+import type { JSX } from "react"
+
+export type PropsMenu = {
+  trigger: (props: { isOpen: boolean }) => JSX.Element
+  children: (args: { close: () => void }) => JSX.Element | JSX.Element[]
+  disabled?: boolean
+  isInModal?: boolean
+}

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"]
+}