@datability/8ui 1.0.0 → 1.1.0

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

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

@@ -0,0 +1,11 @@
+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.scss

@@ -0,0 +1,102 @@
+@import '../extend.scss';
+
+.DBui-inputDate {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDate {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  padding: 2em 0;
+  justify-content: center;
+  align-items: center;
+
+  .DBui-inputDateRowMonthYear,
+  .DBui-inputDateRowHeaderDay,
+  .DBui-inputDateRowDay {
+    display: flex;
+    flex-direction: row;
+    gap: 0.8em;
+  }
+
+  .DBui-inputDateRowMonthYear {
+    gap: 0.5em;
+    margin-left: 0.5em;
+    align-items: center;
+  }
+
+  .DBui-inputDateRowHeaderDay,
+  .DBui-inputDateRowDay {
+
+    .DBui-inputDateHeader,
+    .DBui-inputDateDay {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .DBui-inputDateDay {
+      cursor: not-allowed;
+
+      &[data-hidden-hover='false'] {
+        cursor: pointer;
+
+        &:hover {
+          background-color: #03287E;
+          border-radius: 100%;
+          color: #FFFFFF;
+        }
+      }
+
+      &[data-checked='true'] {
+        background-color: #03287E;
+        color: #FFFFFF;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+
+.DBui-inputDateRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}

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

@@ -0,0 +1,354 @@
+/* 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}`
+}

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

@@ -0,0 +1,11 @@
+export type PropsInputDate = {
+  name: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  require?: boolean
+  fullWidth?: boolean
+  isHideClearIcon?: boolean
+  minYear?: number
+  maxYear?: number
+}

package/src/components/input/input-date-range/index.scss

@@ -0,0 +1,101 @@
+@import '../extend.scss';
+
+.DBui-inputDateRange {
+  @extend .DBui-input;
+  height: 35px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-clearIconInputDateRange {
+    width: 20px;
+
+    &[data-hidden='true'] {
+      display: none !important;
+    }
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+.DBui-inputDateRangeWrapperCalendar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.3em;
+  padding: 2em 0;
+  justify-content: center;
+  align-items: center;
+
+  .DBui-inputDateRangeRowMonthYear,
+  .DBui-inputDateRangeRowHeaderDay,
+  .DBui-inputDateRangeRowDay {
+    display: flex;
+    flex-direction: row;
+    gap: 0.8em;
+  }
+
+  .DBui-inputDateRangeRowMonthYear {
+    gap: 0.5em;
+    margin-left: 0.5em;
+    align-items: center;
+  }
+
+  .DBui-inputDateRangeRowHeaderDay,
+  .DBui-inputDateRangeRowDay {
+    cursor: pointer;
+
+    .DBui-inputDateRangeHeader,
+    .DBui-inputDateRangeDay {
+      width: 30px;
+      height: 30px;
+      text-align: center;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .DBui-inputDateRangeDay {
+
+      &[data-hidden-hover='false'] {
+
+        &:hover {
+          background-color: #03287E;
+          border-radius: 100%;
+          color: #FFFFFF;
+        }
+      }
+
+      &[data-checked='true'] {
+        background-color: #03287E;
+        color: #FFFFFF;
+        border-radius: 100%;
+      }
+    }
+  }
+}
+
+.DBui-inputDateRangeRowMonthYearSelected {
+  cursor: pointer;
+  text-align: center;
+}
+
+.DBui-inputDateRangeRowMonthYearOption {
+  cursor: pointer;
+  padding: 0.5em 1em;
+
+  &:hover {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+
+  &[data-checked='true'] {
+    background-color: #03287E;
+    color: #FFFFFF;
+  }
+}