@datability/8ui 1.1.0 → 1.1.2

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

@@ -1,118 +0,0 @@
-// Lib
-import React, { useEffect, useState } from "react"
-import { useFormContext, Controller } from "react-hook-form"
-
-// Include in project
-import "./index.scss"
-import InputBase from "../input-base"
-import type { PropsInputNumber } from "./index.type"
-
-const InputNumber: React.FC<PropsInputNumber> = ({
-  name,
-  label,
-  placeholder,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  isPhoneNumber = false,
-  isAvailableMinus = false,
-}) => {
-  const { control } = useFormContext()
-  const [showValue, setShowValue] = useState<string>("")
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const { value, onChange } = field
-        const { error, invalid } = fieldState
-
-        // sync RHF value → showValue
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-          if (!isPhoneNumber && typeof value === "number" && !isNaN(value)) {
-            setShowValue(value.toLocaleString("en-US"))
-          } else if (typeof value === "string") {
-            setShowValue(value)
-          } else {
-            setShowValue(value ?? "")
-          }
-        }, [value])
-
-        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-          const input = event.target.value
-
-          // ล้างช่อง
-          if (input === "") {
-            if (isPhoneNumber) {
-              onChange("")
-              setShowValue("")
-            } else {
-              onChange(0)
-              setShowValue("0")
-            }
-            return
-          }
-
-          // phone number
-          if (isPhoneNumber) {
-            onChange(input)
-            setShowValue(input)
-            return
-          }
-
-          const rawValue = input.replace(/,/g, "")
-          const regex = isAvailableMinus ? /^-?[0-9]*\.?[0-9]*$/ : /^[0-9]*\.?[0-9]*$/
-
-          if (!regex.test(rawValue)) return
-
-          if (rawValue === "-" || rawValue.endsWith(".")) {
-            setShowValue(formatWithComma(rawValue))
-            onChange(rawValue)
-            return
-          }
-
-          const numericValue = Number(rawValue)
-          if (isNaN(numericValue)) return
-
-          onChange(numericValue)
-          setShowValue(formatWithComma(rawValue))
-        }
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={invalid}
-            errorMessage={error?.message}
-          >
-            <input
-              className="DBui-inputNumber"
-              type="text"
-              placeholder={placeholder}
-              disabled={disabled}
-              value={showValue}
-              onChange={handleChange}
-              inputMode="decimal"
-              pattern="-?[0-9,]*\.?[0-9]*"
-              data-invalid={invalid}
-            />
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputNumber
-
-const formatWithComma = (val: string): string => {
-  if (val === "" || val === "-" || val === "." || val === "-.") return val
-
-  const [intPart, decPart] = val.split(".")
-  const formattedInt = intPart ? Number(intPart).toLocaleString("en-US") : ""
-  return decPart !== undefined ? `${formattedInt}.${decPart}` : formattedInt
-}

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

@@ -1,11 +0,0 @@
-export type PropsInputNumber = {
-  name: string
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  require?: boolean
-  fullWidth?: boolean
-  isPhoneNumber?: boolean // If isPhoneNumber === true type will be string, else type number
-  isAvailableMinus?: boolean
-}
-

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

@@ -1,60 +0,0 @@
-// Lib
-import React, { useState } from "react"
-import { useFormContext, useFormState } from "react-hook-form"
-
-// Images
-import visibilitySVG from "../../assets/visibility.svg"
-import visibilityOffSVG from "../../assets/visibility-off.svg"
-
-// Include in project
-import "./index.scss"
-import InputBase from "../input-base"
-import type { PropsInputPassword } from "./index.type"
-
-const InputPassword: React.FC<PropsInputPassword> = ({
-  name,
-  label,
-  placeholder,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-}) => {
-  const { register, control } = useFormContext()
-  const { errors } = useFormState({ control, name })
-
-  const error = errors?.[name]
-  const isInvalid = Boolean(error)
-
-  const [isShow, setIsShow] = useState(false)
-
-  return (
-    <InputBase
-      name={name}
-      label={label}
-      require={require}
-      fullWidth={fullWidth}
-      isInvalid={isInvalid}
-      errorMessage={error?.message}
-    >
-      <div className="DBui-wrapInputPassword">
-        <input
-          {...register(name)}
-          className="DBui-inputPassword"
-          type={isShow ? "text" : "password"}
-          placeholder={placeholder}
-          disabled={disabled}
-          data-invalid={isInvalid}
-        />
-
-        <img
-          className="DBui-inputPasswordIcon"
-          src={isShow ? visibilitySVG : visibilityOffSVG}
-          alt="toggle visibility"
-          onClick={() => setIsShow((s) => !s)}
-        />
-      </div>
-    </InputBase>
-  )
-}
-
-export default InputPassword

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

@@ -1,8 +0,0 @@
-export type PropsInputPassword = {
-  name: string
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  require?: boolean
-  fullWidth?: boolean
-}

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

@@ -1,72 +0,0 @@
-// Lib
-import React from "react"
-import { Controller, useFormContext } from "react-hook-form"
-
-// Include in project
-import "./index.scss"
-import InputBase from "../input-base"
-import type { PropsInputRadio } from "./index.type"
-
-const InputRadio: React.FC<PropsInputRadio> = ({
-  name,
-  label,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  isVertical = false,
-  options,
-}) => {
-  const { control } = useFormContext()
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const { value, onChange } = field
-        const { invalid, error } = fieldState
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={invalid}
-            errorMessage={error?.message}
-          >
-            <div className="DBui-wrapInputRadioList" data-vertical={isVertical}>
-              {options.map((data, index) => {
-                const isChecked = value === data.value
-
-                return (
-                  <div key={index} className="DBui-wrapInputRadio">
-                    <input
-                      className="DBui-inputRadio"
-                      type="radio"
-                      disabled={disabled}
-                      checked={isChecked}
-                      onClick={() => {
-                        // คลิกซ้ำ = uncheck
-                        if (isChecked) {
-                          onChange("")
-                        } else {
-                          onChange(data.value)
-                        }
-                      }}
-                    />
-                    <p className="DBui-labelRadio" data-invalid={invalid}>
-                      <small>{data.label}</small>
-                    </p>
-                  </div>
-                )
-              })}
-            </div>
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputRadio

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

@@ -1,12 +0,0 @@
-export type PropsInputRadio = {
-  name: string
-  label?: string
-  disabled?: boolean
-  require?: boolean
-  fullWidth?: boolean
-  isVertical?: boolean
-  options: {
-    label: string
-    value: string | number
-  }[]
-}

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

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

@@ -1,15 +0,0 @@
-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/src/components/input/input-switch/index.tsx

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

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

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

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

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

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

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