@datability/8ui 1.0.0 → 1.1.0

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

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

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

@@ -0,0 +1,81 @@
+@import '../extend.scss';
+
+.DBui-wrapperInputSelect {
+  cursor: pointer;
+  position: relative;
+  height: 35px;
+  width: 100%;
+  padding: 0.3em 35px 0.3em 0.5em;
+  border-radius: 8px;
+  border: 1px solid #e3e3e8;
+  background-color: #ffffff;
+  color: #000000;
+  display: flex;
+
+  &[data-invalid='true'] {
+    border: 1px solid #eb5757;
+  }
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-wrapperLabel {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .DBui-placeholder {
+    color: #c3c3c3;
+  }
+
+  .DBui-wrapperLabelInputSelect {
+    display: flex;
+    gap: 0.3em;
+    align-items: center;
+    width: 100%;
+
+    .DBui-clearIconInputSelect {
+      width: 20px;
+
+      &[data-hidden='true'] {
+        display: none !important;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  .DBui-arrowIconInputSelect {
+    position: absolute;
+    right: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    transition: transform 0.2s;
+
+    &[data-checked='false'] {
+      transform: rotate(180deg) translateY(50%);
+    }
+  }
+}
+
+.DBui-menuItemInputSelect {
+  background-color: #ffffff;
+  color: #000000;
+  padding: 0.3em 0.5em;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #fafafa;
+  }
+
+  &[data-checked='true'] {
+    background-color: #0045a5;
+    color: #ffffff;
+  }
+}

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/src/components/input/input-switch/index.scss

@@ -0,0 +1,84 @@
+.DBui-switch {
+    position: relative;
+    display: inline-block;
+    width: 51px;
+    height: 28px;
+
+    input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+    }
+
+    .DBui-minus {
+        position: absolute;
+        height: 9px;
+        width: 1px;
+        left: 18px;
+        bottom: 9px;
+        background-color: #1C1C1E;
+        z-index: 1;
+        border-radius: 999px;
+    }
+
+    .DBui-miniCircle {
+        position: absolute;
+        border-radius: 100%;
+        height: 7px;
+        width: 7px;
+        right: 11px;
+        bottom: 10px;
+        box-shadow: 0 0 0px 1px #000000;
+        z-index: 1;
+    }
+
+    .DBui-slider {
+        border-radius: 34px;
+
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #AAAAAA;
+        -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+
+        &:before {
+            border-radius: 50%;
+            z-index: 2;
+
+            position: absolute;
+            content: '';
+            height: 20px;
+            width: 20px;
+            left: 4px;
+            bottom: 4px;
+            background-color: #1C1C1E;
+            box-shadow: 0px 0.31px 10px 0px #00000004;
+            -webkit-transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+            transition: 0.3s cubic-bezier(0.61, -0.01, 0.2, 1.37);
+        }
+    }
+
+    input:checked+.DBui-slider {
+        background-color: #477cee;
+    }
+
+    input:checked+.DBui-slider:before {
+        -webkit-transform: translateX(22px);
+        -ms-transform: translateX(22px);
+        transform: translateX(22px);
+    }
+
+    .DBui-wrapInputList {
+        display: flex;
+        flex-direction: row;
+
+        &[data-disabled='true'] {
+            opacity: 0.6;
+            pointer-events: none;
+        }
+    }
+}

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.scss

@@ -0,0 +1,10 @@
+@import '../extend.scss';
+
+.DBui-inputTextarea {
+    @extend .DBui-input;
+    resize: none;
+
+    &:disabled {
+        @extend .DBui-disabled;
+    }
+}

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.scss

@@ -0,0 +1,30 @@
+.DBui-wrapperMenu {
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.DBui-wrapperMenuItem {
+  position: fixed;
+  background: #fff;
+  color: #000;
+  border-radius: 0.3em;
+  min-width: 140px;
+  max-width: 320px;
+  max-height: 45%;
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  transition: opacity 0.1s ease;
+  z-index: var(--z-index-menu);
+
+  &[data-hidden='true'] {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &[data-is-in-modal='true'] {
+    z-index: var(--z-index-menu-in-modal);
+  }
+}

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