@datability/8ui 1.0.0 → 1.1.0

package/src/components/button/index.tsx

@@ -0,0 +1,44 @@
+// Lib
+import React from "react"
+
+// Images
+
+// Include in project
+import "./index.scss"
+import type { PropsButton } from "./index.type"
+
+const Button: React.FC<PropsButton> = ({
+  name,
+  type = "button",
+  disabled = false,
+  onClick,
+  startIcon: StartIcon,
+  endIcon: EndIcon,
+  className,
+  style,
+  isLoading = false,
+}) => {
+  return (
+    <button
+      type={type}
+      className={`DBui-button ${className ? className : ""}`}
+      onClick={onClick && onClick}
+      disabled={isLoading || disabled}
+      style={style ? style : {}}
+    >
+      {isLoading ? (
+        <div className="DBui-loaderSpinButton" />
+      ) : (
+        <>
+          {StartIcon && typeof StartIcon === "string" && <img src={StartIcon} alt="startIcon" />}
+          {StartIcon && typeof StartIcon !== "string" && <StartIcon alt="startIcon" />}
+          {name}
+          {EndIcon && typeof EndIcon === "string" && <img src={EndIcon} alt="endIcon" />}
+          {EndIcon && typeof EndIcon !== "string" && <EndIcon alt="endIcon" />}
+        </>
+      )}
+    </button>
+  )
+}
+
+export default Button

package/src/components/button/index.type.ts

@@ -0,0 +1,13 @@
+import type { CSSProperties, ElementType } from "react"
+
+export type PropsButton = {
+  name?: string
+  type?: "button" | "submit"
+  disabled?: boolean
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  startIcon?: string | ElementType
+  endIcon?: string | ElementType
+  className?: string
+  style?: CSSProperties
+  isLoading?: boolean
+}

package/src/components/chip/index.scss

@@ -0,0 +1,32 @@
+.DBui-chip {
+  display: flex;
+  align-items: center;
+  width: fit-content;
+  padding: 0.4em 0.5em;
+  border-radius: 0.3em;
+  border: 1px solid #03287E;
+  background-color: #618aea;
+  gap: 0.5em;
+
+  &[data-checked='true'] {
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.5;
+    }
+  }
+
+  .DBui-chipIcon {
+    width: 20px;
+    height: 20px;
+
+    &[data-checked='true'] {
+      cursor: pointer;
+      
+      &:hover {
+        opacity: 0.5;
+      }
+    }
+  }
+}
+

package/src/components/chip/index.tsx

@@ -0,0 +1,39 @@
+// Lib
+import React from "react"
+
+//Images
+import closedSVG from "../assets/closed.svg"
+
+// Include in project
+import type { PropsChip } from "./index.type"
+import "./index.scss"
+
+const Chip: React.FC<PropsChip> = ({ label, onDelete, onClick, icon: Icon, className, style }) => {
+  return (
+    <div
+      className={`DBui-chip ${className ? className : ""}`}
+      style={style ? style : {}}
+      data-checked={Boolean(onClick)}
+      onClick={onClick && onClick}
+    >
+      {label}
+      {onDelete && !Icon && (
+        <img src={closedSVG} alt="icon" className="DBui-chipIcon" data-checked={Boolean(onDelete)} onClick={onDelete} />
+      )}
+      {onDelete && Icon && typeof Icon === "string" && (
+        <img src={Icon} alt="icon" className="DBui-chipIcon" data-checked={Boolean(onDelete)} onClick={onDelete} />
+      )}
+      {onDelete && Icon && typeof Icon !== "string" && (
+        <Icon alt="icon" className="DBui-chipIcon" data-checked={Boolean(onDelete)} onClick={onDelete} />
+      )}
+      {!onDelete && Icon && typeof Icon === "string" && (
+        <img src={Icon} alt="icon" className="DBui-chipIcon" data-checked={Boolean(onDelete)} onClick={onDelete} />
+      )}
+      {!onDelete && Icon && typeof Icon !== "string" && (
+        <Icon alt="icon" className="DBui-chipIcon" data-checked={Boolean(onDelete)} onClick={onDelete} />
+      )}
+    </div>
+  )
+}
+
+export default Chip

package/src/components/chip/index.type.ts

@@ -0,0 +1,12 @@
+// Lib
+
+import type { CSSProperties, ElementType } from "react"
+
+export type PropsChip = {
+  label: string
+  onDelete?: () => void
+  onClick?: () => void
+  icon?: string | ElementType
+  className?: string
+  style?: CSSProperties
+}

package/src/components/context.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, useState } from "react"
+
+type TContext = {
+  openModalCount: number
+  setOpenModalCount?: React.Dispatch<React.SetStateAction<number>>
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const DBuiContext = createContext<TContext>({
+  openModalCount: 0,
+})
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const DBuiProvider = (props: any) => {
+  const [openModalCount, setOpenModalCount] = useState(0)
+
+  return (
+    <DBuiContext.Provider
+      value={{
+        openModalCount,
+        setOpenModalCount,
+      }}
+    >
+      {props.children}
+    </DBuiContext.Provider>
+  )
+}

package/src/components/divider/index.scss

@@ -0,0 +1,4 @@
+.DBui-divider {
+    border: 1px solid #9E9E9E;
+    width: 100%;
+}

package/src/components/divider/index.tsx

@@ -0,0 +1,13 @@
+// Lib
+import React from 'react'
+
+// Images
+
+// Include in project
+import './index.scss'
+
+const Divider: React.FC = () => {
+  return <hr className="DBui-divider" />
+}
+
+export default Divider

package/src/components/index.ts

@@ -0,0 +1,62 @@
+export { default as Button } from "./button"
+export type { PropsButton } from "./button/index.type"
+
+export { default as Blackdrop } from "./blackdrop" // Need variable --z-index-backdrop
+export type { PropsBlackdrop } from "./blackdrop/index.type"
+
+export { default as Chip } from "./chip"
+export type { PropsChip } from "./chip/index.type"
+
+export { default as Divider } from "./divider"
+
+export { default as Menu } from "./menu" // Need variable --z-index-menu
+export type { PropsMenu } from "./menu/index.type"
+
+export { default as Modal } from "./modal" // Need variable --z-index-normale
+export type { PropsModal } from "./modal/index.type"
+
+export { default as Input } from "./input/input-basic"
+export type { PropsInputBasic as PropsInput } from "./input/input-basic/index.type"
+
+export { default as InputNumber } from "./input/input-number"
+export type { PropsInputNumber } from "./input/input-number/index.type"
+
+export { default as InputDate } from "./input/input-date"
+export type { PropsInputDate } from "./input/input-date/index.type"
+
+export { default as InputDateRange } from "./input/input-date-range"
+export type { PropsInputDateRange } from "./input/input-date-range/index.type"
+
+export { default as InputDateTime } from "./input/input-date-time"
+export type { PropsInputDateTime } from "./input/input-date-time/index.type"
+
+export { default as InputPassword } from "./input/input-password"
+export type { PropsInputPassword } from "./input/input-password/index.type"
+
+export { default as InputRadio } from "./input/input-radio"
+export type { PropsInputRadio } from "./input/input-radio/index.type"
+
+export { default as InputCheckbox } from "./input/input-checkbox"
+export type { PropsInputCheckbox } from "./input/input-checkbox/index.type"
+
+export { default as InputTextarea } from "./input/input-textarea"
+export type { PropsInputTextarea } from "./input/input-textarea/index.type"
+
+export { default as InputSelect } from "./input/input-select"
+export type { PropsInputSelect } from "./input/input-select/index.type"
+
+export { default as InputAutoComplete } from "./input/input-auto-complete"
+export type { PropsInputAutoComplete } from "./input/input-auto-complete/index.type"
+
+export { default as InputSwitch } from "./input/input-switch"
+export type { PropsInputSwitch } from "./input/input-switch/index.type"
+
+// Type
+export type TValueOption = string | number
+export type TOption = {
+  label: string
+  value: TValueOption
+}
+
+// Context
+export { DBuiContext, DBuiProvider } from "./context"

package/src/components/input/extend.scss

@@ -0,0 +1,19 @@
+// Disable
+.DBui-disabled {
+    cursor: not-allowed;
+    background-color: #FAFAFA;
+    color: #000000;
+}
+
+.DBui-input {
+    width: 100%;
+    padding: 0.3em 0.5em;
+    border-radius: 0.3em;
+    border: 1px solid #E3E3E8;
+    background-color: #FFFFFF;
+    color: #000000;
+
+    &[data-invalid='true'] {
+        border: 1px solid #EB5757;
+    }
+}

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

@@ -0,0 +1,53 @@
+@import '../extend.scss';
+
+.DBui-wrapInputAutoComplete {
+  @extend .DBui-input;
+
+  padding: 0.4em 0.5em;
+  display: flex;
+  align-items: center;
+  gap: 0.3em;
+  height: 36px;
+
+  &[data-disabled='true'] {
+    @extend .DBui-disabled;
+  }
+
+  .DBui-wrapSelectValueInputAutoComplete {
+    display: flex;
+    align-items: center;
+
+    .DBui-iconInputAutoComplete {
+      width: 20px;
+      color: #E3E3E8;
+      cursor: pointer;
+    }
+  }
+
+  .DBui-inputAutoComplete {
+    border: none;
+    background-color: #FFFFFF;
+    align-items: center;
+    width: 100%;
+
+    &:disabled {
+      @extend .DBui-disabled;
+    }
+  }
+}
+
+.DBui-menuItemInputAutoComplete {
+  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-auto-complete/index.tsx

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

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

@@ -0,0 +1,14 @@
+.DBui-inputBase {
+    display: flex;
+    flex-direction: column;
+
+    &[data-invalid='true'] {
+        .DBui-inputLabel {
+            color: #EB5757;
+        }
+    }
+
+    .DBui-dataInvalid {
+        color: #EB5757;
+    }
+}

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

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

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

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

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

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

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

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

@@ -0,0 +1,30 @@
+@import '../extend.scss';
+
+.DBui-wrapInputCheckboxList {
+    display: flex;
+    width: 100%;
+    gap: 1em;
+
+    .DBui-wrapInputCheckbox {
+        display: flex;
+        align-items: center;
+        gap: 0.3em;
+
+        .DBui-labelCheckbox {
+            &[data-invalid='true'] {
+                color: #EB5757;
+            }
+        }
+
+        .DBui-inputCheckbox {
+            width: 100%;
+            border-radius: 0.3em;
+            width: 18px;
+            height: 18px;
+
+            &:disabled {
+                @extend .DBui-disabled;
+            }
+        }
+    }
+}