@datability/8ui 1.1.0 → 1.1.2

package/src/components/input/input-auto-complete/index.tsx

@@ -1,140 +0,0 @@
-// Lib
-import React, { useState } from "react"
-import { Controller, useFormContext } from "react-hook-form"
-
-// Images
-import closedSVG from "../../assets/closed.svg"
-
-// Include in project
-import "./index.scss"
-import InputBase from "../input-base"
-import Menu from "../../menu"
-import { Chip, type TValueOption } from "../.."
-import type { PropsInputAutoComplete } from "./index.type"
-
-const InputAutoComplete: React.FC<PropsInputAutoComplete> = ({
-  name,
-  label,
-  placeholder,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  options,
-  isMultiple = false,
-  isInModal = false,
-}) => {
-  const { control } = useFormContext()
-  const [searchText, setSearchText] = useState("")
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const value: TValueOption[] = field.value ?? []
-        const { onChange } = field
-        const { invalid, error } = fieldState
-
-        const suggestions = options.filter((opt) => opt.label.toLowerCase().includes(searchText.toLowerCase()))
-
-        const handleSelect = (val: TValueOption, close: () => void) => {
-          setSearchText("")
-          close()
-
-          if (isMultiple) {
-            onChange([...value, val])
-          } else {
-            onChange([val])
-          }
-        }
-
-        const handleSearchChange = (val: string) => {
-          setSearchText(val)
-          if (!isMultiple) {
-            onChange([val])
-          }
-        }
-
-        const handleClearChip = (e: React.MouseEvent<HTMLImageElement>, target: TValueOption) => {
-          e.stopPropagation()
-          setSearchText("")
-          onChange(value.filter((v) => v !== target))
-        }
-
-        const selectedValue = value[0] || searchText
-        const selectedOption = options.find((o) => o.label === selectedValue || o.value === selectedValue)
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={invalid}
-            errorMessage={error?.message}
-          >
-            <Menu
-              isInModal={isInModal}
-              disabled={disabled}
-              trigger={() => (
-                <div className="DBui-wrapInputAutoComplete" data-invalid={invalid} data-disabled={disabled}>
-                  {isMultiple &&
-                    value.map((v, index) => {
-                      const selected = options.find((o) => o.value === v)
-                      if (!selected) return null
-
-                      if (disabled) {
-                        return <Chip key={index} label={selected.label} />
-                      }
-
-                      return (
-                        <div key={index} className="DBui-wrapSelectValueInputAutoComplete">
-                          <p>
-                            <small>{selected.label}</small>
-                          </p>
-                          <img
-                            src={closedSVG}
-                            className="DBui-iconInputAutoComplete"
-                            onClick={(e) => handleClearChip(e, v)}
-                          />
-                        </div>
-                      )
-                    })}
-
-                  <input
-                    className="DBui-inputAutoComplete"
-                    autoComplete="off"
-                    type="text"
-                    placeholder={!value.length ? placeholder : ""}
-                    disabled={disabled}
-                    value={isMultiple ? searchText : selectedOption?.label || value[0] || ""}
-                    onChange={(e) => handleSearchChange(e.target.value)}
-                  />
-                </div>
-              )}
-            >
-              {({ close }) =>
-                suggestions.map((opt, index) => {
-                  const isChecked = value.includes(opt.value)
-
-                  return (
-                    <p
-                      key={index}
-                      className="DBui-menuItemInputAutoComplete"
-                      data-checked={isChecked}
-                      onClick={() => !isChecked && handleSelect(opt.value, close)}
-                    >
-                      {opt.label}
-                    </p>
-                  )
-                })
-              }
-            </Menu>
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputAutoComplete

package/src/components/input/input-auto-complete/index.type.tsx

@@ -1,13 +0,0 @@
-import type { TOption } from "../.."
-
-export type PropsInputAutoComplete = {
-  name: string
-  label?: string
-  placeholder?: string
-  disabled?: boolean
-  require?: boolean
-  fullWidth?: boolean
-  options: TOption[]
-  isMultiple?: boolean
-  isInModal?: boolean
-}

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

@@ -1,39 +0,0 @@
-// Lib
-import React from "react"
-
-// Include in project
-import "./index.scss"
-import type { PropsInputBase } from "./index.type"
-
-const InputBase: React.FC<PropsInputBase> = ({
-  label,
-  require = false,
-  fullWidth = false,
-  children,
-  isInvalid,
-  errorMessage,
-}) => {
-  const styleDiv = {
-    width: !fullWidth ? "fit-content" : "100%",
-  }
-
-  return (
-    <div className="DBui-inputBase" style={styleDiv} data-invalid={isInvalid}>
-      {label && (
-        <p className="DBui-inputLabel">
-          <small>{label}</small> {require && <span className="DBui-dataInvalid">*</span>}
-        </p>
-      )}
-
-      {children}
-
-      {isInvalid && errorMessage && (
-        <p className="DBui-dataInvalid">
-          <small>{errorMessage.toString()}</small>
-        </p>
-      )}
-    </div>
-  )
-}
-
-export default InputBase

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

@@ -1,13 +0,0 @@
-import type { JSX } from "react"
-import type { FieldError, FieldErrorsImpl, Merge } from "react-hook-form"
-
-export type PropsInputBase = {
-  name: string
-  label?: string
-  require?: boolean
-  fullWidth?: boolean
-  children: JSX.Element | JSX.Element[]
-  isInvalid: boolean
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  errorMessage: string | FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined
-}

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

@@ -1,47 +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 { PropsInputBasic } from "./index.type"
-
-const Input: React.FC<PropsInputBasic> = ({
-  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)
-  return (
-    <InputBase
-      name={name}
-      label={label}
-      require={require}
-      fullWidth={fullWidth}
-      isInvalid={isInvalid}
-      errorMessage={error?.message}
-    >
-      <input
-        {...register(name)}
-        className="DBui-inputBasic"
-        type="text"
-        placeholder={placeholder}
-        disabled={disabled}
-        data-invalid={isInvalid}
-      />
-    </InputBase>
-  )
-}
-
-export default Input

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

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

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

@@ -1,69 +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 { PropsInputCheckbox } from "./index.type"
-
-const InputCheckbox: React.FC<PropsInputCheckbox> = ({
-  name,
-  label,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  options,
-}) => {
-  const { control } = useFormContext()
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const value: (string | number)[] = field.value ?? []
-        const { onChange } = field
-        const { error, invalid } = fieldState
-
-        const toggleValue = (checkedValue: string | number) => {
-          if (value.includes(checkedValue)) {
-            onChange(value.filter((v) => v !== checkedValue))
-          } else {
-            onChange([...value, checkedValue])
-          }
-        }
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={invalid}
-            errorMessage={error?.message}
-          >
-            <div className="DBui-wrapInputCheckboxList">
-              {options.map((data, index) => (
-                <div key={index} className="DBui-wrapInputCheckbox">
-                  <input
-                    className="DBui-inputCheckbox"
-                    type="checkbox"
-                    disabled={disabled}
-                    checked={value.includes(data.value)}
-                    onChange={() => toggleValue(data.value)}
-                  />
-                  <p className="DBui-labelCheckbox" data-invalid={invalid}>
-                    <small>{data.label}</small>
-                  </p>
-                </div>
-              ))}
-            </div>
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputCheckbox

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

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

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

@@ -1,354 +0,0 @@
-/* eslint-disable react-refresh/only-export-components */
-// Lib
-import React, { useEffect, useState } 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 type { PropsInputDate } from "./index.type"
-import Menu from "../../menu"
-import Modal from "../../modal"
-import { createPortal } from "react-dom"
-
-// 2025-09-01
-const InputDate: React.FC<PropsInputDate> = ({
-  name,
-  label,
-  placeholder,
-  disabled = false,
-  require = false,
-  fullWidth = false,
-  isHideClearIcon = true,
-  minYear,
-  maxYear,
-}) => {
-  const { control } = useFormContext()
-
-  const [showDay, setShowDay] = useState(getDateNow())
-  const [isOpenModal, setIsOpenModal] = useState(false)
-
-  const [mounted, setMounted] = useState(false)
-  useEffect(() => {
-    setMounted(true)
-    return () => setMounted(false)
-  }, [])
-
-  const yearOption = generateYearOptions(minYear, maxYear)
-  const monthOption = generateMonthOptions()
-
-  const portalRoot =
-    (document.getElementById("root") as HTMLElement) ||
-    (document.getElementById("__next") as HTMLElement) ||
-    document.body
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState }) => {
-        const value: string = field.value || ""
-        const { onChange } = field
-        const { invalid, error } = fieldState
-
-        // sync showDay เมื่อเปิด modal หรือค่าเปลี่ยน
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-          if (!isOpenModal) return
-          setShowDay(value || getDateNow())
-        }, [isOpenModal])
-
-        function CalendarRow({ year, month }: { year: number; month: string }) {
-          const days = getDaysInMonthWithWeekday(year, month)
-
-          const mapToThaiWeek = (dayIndex: number) => dayIndex % 7
-          const firstDayThaiIndex = mapToThaiWeek(new Date(`${year}-${month}-01`).getDay())
-          const emptyStartDays = Array(firstDayThaiIndex).fill(null)
-
-          const allDays = [...emptyStartDays, ...days.map((d) => d.date.split("-")[2])]
-
-          while (allDays.length < 42) allDays.push(null)
-
-          const weeks: Array<Array<string | null>> = []
-          for (let i = 0; i < allDays.length; i += 7) weeks.push(allDays.slice(i, i + 7))
-
-          return (
-            <>
-              {weeks.map((week, rowIndex) => (
-                <div key={rowIndex} className="DBui-inputDateRowDay">
-                  {week.map((day, i) => (
-                    <p
-                      key={i}
-                      className="DBui-inputDateDay"
-                      onClick={() => {
-                        if (!day) return
-                        const next = `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
-                        onChange(next)
-                        setIsOpenModal(false)
-                      }}
-                      data-checked={
-                        `${getYearInDateString(value || showDay)}-${getMonthInDateString(value || showDay)}-${getDayInDateString(
-                          value || showDay,
-                        )}` === `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
-                      }
-                      data-hidden-hover={!day}
-                    >
-                      {day || ""}
-                    </p>
-                  ))}
-                </div>
-              ))}
-            </>
-          )
-        }
-
-        const handleClear = (e: React.MouseEvent<HTMLImageElement>) => {
-          e.stopPropagation()
-          onChange("")
-        }
-
-        return (
-          <InputBase
-            name={name}
-            label={label}
-            require={require}
-            fullWidth={fullWidth}
-            isInvalid={invalid}
-            errorMessage={error?.message}
-          >
-            <>
-              <div
-                className="DBui-inputDate"
-                onClick={() => (disabled ? null : setIsOpenModal(true))}
-                data-invalid={invalid}
-                data-disabled={disabled}
-              >
-                <p>{value ? value : placeholder}</p>
-
-                <img
-                  src={closedSVG}
-                  className="DBui-clearIconInputDate"
-                  onClick={handleClear}
-                  data-hidden={value === "" || disabled || isHideClearIcon}
-                />
-              </div>
-
-              {mounted &&
-                createPortal(
-                  <Modal id="modalInputDate" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
-                    <div className="DBui-inputDateWrapperCalendar">
-                      <div className="DBui-inputDateRowMonthYear">
-                        <img
-                          src={expandArrowSVG}
-                          className="DBui-inputDateRowMonthYearSelected"
-                          style={{ transform: "rotate(90deg)" }}
-                          onClick={() => {
-                            setShowDay(
-                              updateMonthInDateString(
-                                showDay,
-                                String(Number(showDay.split("-")[1]) - 1).padStart(2, "0"),
-                              ),
-                            )
-                          }}
-                        />
-
-                        <Menu
-                          isInModal
-                          trigger={() => <h4 className="DBui-inputDateRowMonthYearSelected">{showDay.slice(0, 4)}</h4>}
-                        >
-                          {({ close }) =>
-                            yearOption.map((y, index) => (
-                              <p
-                                key={index}
-                                className="DBui-inputDateRowMonthYearOption"
-                                onClick={() => {
-                                  setShowDay(updateYearInDateString(showDay, y.value))
-                                  close()
-                                }}
-                                data-checked={getYearInDateString(showDay) === y.value}
-                              >
-                                {y.label}
-                              </p>
-                            ))
-                          }
-                        </Menu>
-
-                        <Menu
-                          isInModal
-                          trigger={() => (
-                            <h4 className="DBui-inputDateRowMonthYearSelected" style={{ width: "7rem" }}>
-                              {monthOption.find((e) => e.value === showDay.slice(5, 7))?.label}
-                            </h4>
-                          )}
-                        >
-                          {({ close }) =>
-                            monthOption.map((m, index) => (
-                              <p
-                                key={index}
-                                className="DBui-inputDateRowMonthYearOption"
-                                onClick={() => {
-                                  setShowDay(updateMonthInDateString(showDay, m.value))
-                                  close()
-                                }}
-                                data-checked={getMonthInDateString(showDay) === m.value}
-                              >
-                                {m.label}
-                              </p>
-                            ))
-                          }
-                        </Menu>
-
-                        <img
-                          src={expandArrowSVG}
-                          className="DBui-inputDateRowMonthYearSelected"
-                          style={{ transform: "rotate(-90deg)" }}
-                          onClick={() => {
-                            setShowDay(
-                              updateMonthInDateString(
-                                showDay,
-                                String(Number(showDay.split("-")[1]) + 1).padStart(2, "0"),
-                              ),
-                            )
-                          }}
-                        />
-                      </div>
-
-                      <div>
-                        <div className="DBui-inputDateRowHeaderDay">
-                          <p className="DBui-inputDateHeader">Sun</p>
-                          <p className="DBui-inputDateHeader">Mon</p>
-                          <p className="DBui-inputDateHeader">Tue</p>
-                          <p className="DBui-inputDateHeader">Wed</p>
-                          <p className="DBui-inputDateHeader">Thu</p>
-                          <p className="DBui-inputDateHeader">Fri</p>
-                          <p className="DBui-inputDateHeader">Sat</p>
-                        </div>
-
-                        <CalendarRow year={getYearInDateString(showDay)} month={getMonthInDateString(showDay)} />
-                      </div>
-                    </div>
-                  </Modal>,
-                  portalRoot,
-                )}
-              {!mounted && (
-                <Modal id="modalInputDate" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
-                  <div className="DBui-inputDateWrapperCalendar"></div>
-                </Modal>
-              )}
-            </>
-          </InputBase>
-        )
-      }}
-    />
-  )
-}
-
-export default InputDate
-
-export function generateYearOptions(minYear?: number, maxYear?: number): { label: string; value: number }[] {
-  const currentYear = new Date().getFullYear()
-
-  // Default values ถ้าไม่ส่งมา
-  const finalMax = maxYear ?? currentYear
-  const finalMin = minYear ?? currentYear - 100
-
-  const years = []
-
-  // ไล่ปีแบบมาก -> น้อย
-  for (let year = finalMax; year >= finalMin; year--) {
-    years.push({ label: String(year), value: year })
-  }
-
-  return years
-}
-
-export function generateMonthOptions(): { label: string; value: string }[] {
-  const monthNames = [
-    "January",
-    "February",
-    "March",
-    "April",
-    "May",
-    "June",
-    "July",
-    "August",
-    "September",
-    "October",
-    "November",
-    "December",
-  ]
-
-  return monthNames.map((name, index) => ({
-    label: name,
-    value: String(index + 1).padStart(2, "0"),
-  }))
-}
-
-export function updateYearInDateString(dateStr: string, newYear: number): string {
-  const newDateStr = dateStr ? dateStr : new Date().toISOString().split("T")[0]
-  const [, month, day] = newDateStr.split("-")
-
-  return `${newYear}-${month}-${day}`
-}
-
-export function updateMonthInDateString(dateStr: string, newMonth: string): string {
-  const newDateStr = dateStr || new Date().toISOString().split("T")[0]
-  const [yearStr, , dayStr] = newDateStr.split("-")
-
-  let year = parseInt(yearStr, 10)
-  let month = parseInt(newMonth, 10)
-
-  // Handle overflow/underflow
-  year += Math.floor((month - 1) / 12)
-  month = ((((month - 1) % 12) + 12) % 12) + 1 // Wrap to 1–12
-
-  const monthStr = String(month).padStart(2, "0")
-  return `${year}-${monthStr}-${dayStr}`
-}
-
-export function getYearInDateString(dateStr: string): number {
-  const [year] = dateStr.split("-")
-  return Number(year)
-}
-
-export function getMonthInDateString(dateStr: string): string {
-  const [, month] = dateStr.split("-")
-  return month
-}
-
-export function getDayInDateString(dateStr: string): string {
-  const [, , day] = dateStr.split("-")
-  return day
-}
-
-export function getDaysInMonthWithWeekday(year: number, month: string): { date: string; weekday: string }[] {
-  const days: { date: string; weekday: string }[] = []
-  const monthIndex = parseInt(month, 10) - 1 // JavaScript months are 0-based
-
-  const date = new Date(year, monthIndex, 1)
-  const weekdayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
-
-  while (date.getMonth() === monthIndex) {
-    const day = String(date.getDate()).padStart(2, "0")
-    const weekday = weekdayNames[date.getDay()]
-    const formattedDate = `${year}-${month}-${day}`
-
-    days.push({ date: formattedDate, weekday })
-    date.setDate(date.getDate() + 1)
-  }
-
-  return days
-}
-
-export function getDateNow(): string {
-  const dateNow = new Date()
-
-  const year = dateNow.getFullYear()
-  const month = `${dateNow.getMonth() + 1}`.padStart(2, "0")
-  const date = `${dateNow.getDate()}`.padStart(2, "0")
-  return `${year}-${month}-${date}`
-}