@datability/8ui 1.0.0 → 1.1.0

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

@@ -0,0 +1,367 @@
+// Lib
+import React, { useEffect, useRef, 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 { PropsInputDateTime } from "./index.type"
+import Menu from "../../menu"
+import Modal from "../../modal"
+import Button from "../../button"
+import { createPortal } from "react-dom"
+import {
+  generateMonthOptions,
+  generateYearOptions,
+  getDateNow,
+  getDayInDateString,
+  getDaysInMonthWithWeekday,
+  getMonthInDateString,
+  getYearInDateString,
+  updateMonthInDateString,
+  updateYearInDateString,
+} from "../input-date"
+
+const InputDateTime: React.FC<PropsInputDateTime> = ({
+  name,
+  label,
+  placeholder,
+  disabled = false,
+  require = false,
+  fullWidth = false,
+  isHideClearIcon = true,
+  maxYear,
+  minYear,
+}) => {
+  const { control } = useFormContext()
+
+  const hourWrapperRef = useRef<HTMLDivElement>(null)
+  const minWrapperRef = useRef<HTMLDivElement>(null)
+
+  const [isOpenModal, setIsOpenModal] = useState(false)
+
+  const [showDay, setShowDay] = useState(getDateNow())
+  const [selectedDay, setSelectedDay] = useState(getDateNow())
+  const [selectedHour, setSelectedHour] = useState("00")
+  const [selectedMin, setSelectedMin] = useState("00")
+
+  const yearOption = generateYearOptions(minYear, maxYear)
+  const monthOption = generateMonthOptions()
+  const hourOption = generateHourOptions()
+  const minOption = generateMinuteOptions()
+
+  useEffect(() => {
+    function scrollToChecked(wrapper: HTMLDivElement | null) {
+      if (!wrapper) return
+      const checkedEl = wrapper.querySelector('[data-checked="true"]') as HTMLElement
+      checkedEl?.scrollIntoView({ behavior: "smooth", block: "center" })
+    }
+    scrollToChecked(hourWrapperRef.current)
+    scrollToChecked(minWrapperRef.current)
+  }, [selectedHour, selectedMin])
+
+  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-inputDateTimeRowDay">
+            {week.map((day, i) => (
+              <p
+                key={i}
+                className="DBui-inputDateTimeDay"
+                onClick={() => {
+                  if (day) {
+                    setSelectedDay(`${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`)
+                  }
+                }}
+                data-checked={
+                  `${getYearInDateString(selectedDay)}-${getMonthInDateString(selectedDay)}-${
+                    getDayInDateString(selectedDay).split("T")[0]
+                  }` === `${getYearInDateString(showDay)}-${getMonthInDateString(showDay)}-${day}`
+                }
+                data-hidden-hover={!day}
+              >
+                {day || ""}
+              </p>
+            ))}
+          </div>
+        ))}
+      </>
+    )
+  }
+
+  const readingValue = (dateString: string) => {
+    const [date, time] = dateString.split("T")
+    return `${date} ${time}`
+  }
+
+  const portalRoot =
+    (document.getElementById("root") as HTMLElement) ||
+    (document.getElementById("__next") as HTMLElement) ||
+    document.body
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState }) => {
+        const realValue: string = field.value || ""
+        const isInvalid = fieldState.invalid
+        const errorMessage = fieldState.error?.message
+        const setValue = field.onChange
+
+        // ✅ sync RHF value -> local state (เหมือน useEffect [realValue] ของ Formik)
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(() => {
+          if (!realValue) {
+            const now = getDateNow()
+            setShowDay(now)
+            setSelectedDay(now)
+            setSelectedHour("00")
+            setSelectedMin("00")
+            return
+          }
+
+          const [d, t] = realValue.split("T")
+          const [h, m] = t.split(":")
+
+          setShowDay(d)
+          setSelectedDay(d)
+          setSelectedHour(h || "00")
+          setSelectedMin(m || "00")
+        }, [realValue])
+
+        const handleClearState = (e: React.MouseEvent<HTMLImageElement>) => {
+          e.stopPropagation()
+          setValue("")
+        }
+
+        return (
+          <InputBase
+            name={name}
+            label={label}
+            require={require}
+            fullWidth={fullWidth}
+            isInvalid={isInvalid}
+            errorMessage={errorMessage}
+          >
+            <>
+              <div
+                className="DBui-inputDateTime"
+                onClick={() => (disabled ? null : setIsOpenModal(true))}
+                data-invalid={isInvalid}
+                data-disabled={disabled}
+              >
+                <p>{realValue ? readingValue(realValue) : placeholder}</p>
+                <img
+                  src={closedSVG}
+                  className="DBui-clearIconInputDateTime"
+                  onClick={handleClearState}
+                  data-hidden={realValue === "" || disabled || isHideClearIcon}
+                />
+              </div>
+
+              {createPortal(
+                <Modal id="modalInputDateTime" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
+                  <div className="DBui-inputDateTimeWrapperCalendar">
+                    <div className="DBui-inputDateTimeWrapperYearMonthDayTime">
+                      <div className="DBui-inputDateTimeWrapperYearMonthDay">
+                        <div className="DBui-inputDateTimeRowMonthYear">
+                          <img
+                            src={expandArrowSVG}
+                            className="DBui-inputDateTimeRowMonthYearSelected"
+                            style={{ transform: "rotate(90deg)" }}
+                            onClick={() => {
+                              setShowDay(
+                                updateMonthInDateString(
+                                  showDay,
+                                  String(Number(showDay.split("-")[1]) - 1).padStart(2, "0"),
+                                ),
+                              )
+                            }}
+                          />
+
+                          <Menu
+                            isInModal
+                            trigger={() => (
+                              <h4 className="DBui-inputDateTimeRowMonthYearSelected">{showDay.slice(0, 4)}</h4>
+                            )}
+                          >
+                            {({ close }) =>
+                              yearOption.map((data, index) => (
+                                <p
+                                  key={index}
+                                  className="DBui-inputDateTimeRowMonthYearOption"
+                                  onClick={() => {
+                                    setShowDay(updateYearInDateString(showDay, data.value))
+                                    close()
+                                  }}
+                                  data-checked={getYearInDateString(showDay) === data.value}
+                                >
+                                  {data.label}
+                                </p>
+                              ))
+                            }
+                          </Menu>
+
+                          <Menu
+                            isInModal
+                            trigger={() => (
+                              <h4 className="DBui-inputDateTimeRowMonthYearSelected" style={{ width: "7rem" }}>
+                                {monthOption.find((e) => e.value === showDay.slice(5, 7))?.label}
+                              </h4>
+                            )}
+                          >
+                            {({ close }) =>
+                              monthOption.map((data, index) => (
+                                <p
+                                  key={index}
+                                  className="DBui-inputDateTimeRowMonthYearOption"
+                                  onClick={() => {
+                                    setShowDay(updateMonthInDateString(showDay, data.value))
+                                    close()
+                                  }}
+                                  data-checked={getMonthInDateString(showDay) === data.value}
+                                >
+                                  {data.label}
+                                </p>
+                              ))
+                            }
+                          </Menu>
+
+                          <img
+                            src={expandArrowSVG}
+                            className="DBui-inputDateTimeRowMonthYearSelected"
+                            style={{ transform: "rotate(-90deg)" }}
+                            onClick={() => {
+                              setShowDay(
+                                updateMonthInDateString(
+                                  showDay,
+                                  String(Number(showDay.split("-")[1]) + 1).padStart(2, "0"),
+                                ),
+                              )
+                            }}
+                          />
+                        </div>
+
+                        <div>
+                          <div className="DBui-inputDateTimeRowHeaderDay">
+                            <p className="DBui-inputDateTimeHeader">Sun</p>
+                            <p className="DBui-inputDateTimeHeader">Mon</p>
+                            <p className="DBui-inputDateTimeHeader">Tue</p>
+                            <p className="DBui-inputDateTimeHeader">Wed</p>
+                            <p className="DBui-inputDateTimeHeader">Thu</p>
+                            <p className="DBui-inputDateTimeHeader">Fri</p>
+                            <p className="DBui-inputDateTimeHeader">Sat</p>
+                          </div>
+
+                          <CalendarRow year={getYearInDateString(showDay)} month={getMonthInDateString(showDay)} />
+                        </div>
+                      </div>
+
+                      <div className="DBui-inputDateTimeWrapperHourMin">
+                        <p style={{ textAlign: "center" }}>Hr</p>
+                        <div className="DBui-inputDateTimeWrapperHourMinOptions" ref={hourWrapperRef}>
+                          {hourOption.map((hour) => (
+                            <p
+                              key={hour.value}
+                              data-checked={selectedHour === hour.value}
+                              onClick={() => setSelectedHour(hour.value)}
+                            >
+                              {hour.value}
+                            </p>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="DBui-inputDateTimeWrapperHourMin">
+                        <p style={{ textAlign: "center" }}>Min</p>
+                        <div className="DBui-inputDateTimeWrapperHourMinOptions" ref={minWrapperRef}>
+                          {minOption.map((min) => (
+                            <p
+                              key={min.value}
+                              data-checked={selectedMin === min.value}
+                              onClick={() => setSelectedMin(min.value)}
+                            >
+                              {min.value}
+                            </p>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="DBui-inputDateTimeWrapperButton">
+                      <Button
+                        type="button"
+                        onClick={() => {
+                          let hour = getHourNow()
+                          let min = getMinNow()
+                          if (selectedHour) hour = selectedHour
+                          if (selectedMin) min = selectedMin
+
+                          setValue(`${selectedDay}T${hour}:${min}`)
+                          setIsOpenModal(false)
+                        }}
+                        name="Save"
+                        className="DBui-inputDateTimeButtonSave"
+                      />
+                      <Button
+                        type="button"
+                        onClick={() => setIsOpenModal(false)}
+                        name="Cancle"
+                        className="DBui-inputDateTimeButtonCancle"
+                      />
+                    </div>
+                  </div>
+                </Modal>,
+                portalRoot,
+              )}
+            </>
+          </InputBase>
+        )
+      }}
+    />
+  )
+}
+
+export default InputDateTime
+
+function generateHourOptions(): { label: string; value: string }[] {
+  return Array.from({ length: 24 }, (_, i) => {
+    const value = String(i).padStart(2, "0")
+    return { label: value, value }
+  })
+}
+
+function generateMinuteOptions(): { label: string; value: string }[] {
+  return Array.from({ length: 60 }, (_, i) => {
+    const value = String(i).padStart(2, "0")
+    return { label: value, value }
+  })
+}
+
+function getHourNow(): string {
+  const dateNow = new Date()
+  return `${dateNow.getHours()}`.padStart(2, "0")
+}
+
+function getMinNow(): string {
+  const dateNow = new Date()
+  return `${dateNow.getMinutes()}`.padStart(2, "0")
+}

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

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

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

@@ -0,0 +1,9 @@
+@import '../extend.scss';
+
+.DBui-inputNumber {
+    @extend .DBui-input;
+
+    &:disabled {
+        @extend .DBui-disabled;
+    }
+}

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

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

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

@@ -0,0 +1,22 @@
+@import '../extend.scss';
+
+.DBui-wrapInputPassword {
+    width: 100%;
+    position: relative;
+    
+    .DBui-inputPassword {
+        @extend .DBui-input;
+
+        padding-right: 1em;
+    }
+
+    .DBui-inputPasswordIcon {
+        position: absolute;
+        right: 5px;
+        top: 50%;
+        transform: translateY(-50%);
+        cursor: pointer;
+        width: 1.5em;
+        height: 1.5em;
+    }
+}

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

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

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

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

@@ -0,0 +1,35 @@
+@import '../extend.scss';
+
+.DBui-wrapInputRadioList {
+    display: flex;
+    width: 100%;
+    gap: 1em;
+
+    &[data-vertical='true'] {
+        flex-direction: column;
+        gap: 0.5em;
+    }
+
+    .DBui-wrapInputRadio {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+
+        .DBui-labelRadio {
+            &[data-invalid='true'] {
+                color: #EB5757;
+            }
+        }
+
+        .DBui-inputRadio {
+            border-radius: 0.3em;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+
+            &:disabled {
+                @extend .DBui-disabled;
+            }
+        }
+    }
+}