@datability/8ui 1.1.0 → 1.1.2

package/src/App.tsx

@@ -1,370 +0,0 @@
-import { useState } from "react"
-import {
-  Blackdrop,
-  Button,
-  Chip,
-  Divider,
-  Input,
-  InputNumber,
-  InputAutoComplete,
-  InputCheckbox,
-  InputPassword,
-  InputRadio,
-  InputSelect,
-  InputTextarea,
-  InputSwitch,
-  Menu,
-  Modal,
-  InputDate,
-  InputDateTime,
-  InputDateRange,
-} from "./index"
-import { DBuiProvider } from "./components/context"
-import "./index.scss"
-import LogoSVG from "./logoDownload.svg"
-import { FormProvider, useForm } from "react-hook-form"
-import z from "zod"
-import { zodResolver } from "@hookform/resolvers/zod"
-
-function App() {
-  const [isOpenBlackDrop, setIsOpenBackDrop] = useState(false)
-  const [isOpenModal, setIsOpenModal] = useState(false)
-  const [isLoading, setIsLoading] = useState(false)
-
-  const schema = z.object({
-    input: z.string().min(1, "too short"),
-    inputNumber: z.number().min(0, "not enough").max(2000, "too much"),
-    inputPhoneNumber: z.string().min(10, "too short").max(10, "too long"),
-    inputNumberMinus: z.number().min(-2000, "not enough").max(0, "too much"),
-    inputCheckbox: z.array(z.string()).min(1, "Please select at least one option"),
-    inputPassword: z.string().min(1, "Please enter"),
-    inputRadio: z.string().min(1, "Please enter"),
-    inputTextarea: z.string().min(1, "Please enter"),
-    inputSwitch: z.string(),
-    inputSelect: z.string().min(1, "Please select"),
-    inputAutoComplete: z.array(z.string()).min(1, "Please select").max(1),
-    inputAutoCompleteMultiple: z.array(z.string()).min(1, "Please select"),
-    inputDate: z.string().min(1, "Please enter"),
-    inputDateRange: z.array(z.string()).min(2, "Please select"),
-    inputDateTime: z.string().min(1, "Please enter"),
-  })
-
-  type FormValues = z.infer<typeof schema>
-  const methods = useForm<FormValues>({
-    defaultValues: {
-      input: "",
-      inputNumber: 0,
-      inputPhoneNumber: "",
-      inputNumberMinus: -0,
-      inputCheckbox: [],
-      inputPassword: "",
-      inputRadio: "",
-      inputTextarea: "",
-      inputSwitch: "",
-      inputSelect: "",
-      inputAutoComplete: [],
-      inputAutoCompleteMultiple: [],
-      inputDate: "",
-      inputDateRange: ["", ""], // ['2025-01-01', "2025-01-02"]
-      inputDateTime: "", // '2025-01-01T00:00',
-    },
-    mode: "onSubmit",
-    resolver: zodResolver(schema),
-  })
-
-  const onSubmit = (data: FormValues) => {
-    console.log("Submit", data)
-  }
-
-  return (
-    <DBuiProvider>
-      <FormProvider {...methods}>
-        <form onSubmit={methods.handleSubmit(onSubmit)}>
-          <div className="column">
-            <div className="column align-center">
-              <h1>Button</h1>
-              <div className="row gap-sm">
-                <Button name="Button" type="submit" />
-                <Button name="Button" disabled />
-                <Button name="Button" endIcon={LogoSVG} />
-                <Button
-                  name="Asyc Action"
-                  isLoading={isLoading}
-                  onClick={() => {
-                    console.log("!Click")
-                    setIsLoading(true)
-                    setTimeout(() => {
-                      setIsLoading(false)
-                    }, 2000)
-                  }}
-                />
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Divider</h1>
-              <div className="row gap-sm">
-                <Divider />
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Blackdrop</h1>
-              <div className="row gap-sm">
-                <Button name="Open" onClick={() => setIsOpenBackDrop(true)} />
-                <Blackdrop open={isOpenBlackDrop} onClose={() => setIsOpenBackDrop(false)}>
-                  <Button name="Close" onClick={() => setIsOpenBackDrop(false)} />
-                  <Button
-                    name="TEST print console"
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      console.log("TEST")
-                    }}
-                  />
-                </Blackdrop>
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Chip</h1>
-              <div className="row gap-sm">
-                <Chip label="Chip" />
-                <Chip label="Chip" icon={LogoSVG} />
-                <Chip label="Chip" onDelete={() => console.log("delete")} />
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Input</h1>
-              <div className="row gap-sm">
-                <Input name="input" label="Input" placeholder="placeholder" require />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Number</h1>
-              <div className="row gap-sm">
-                <InputNumber require name="inputNumber" label="Input Number" placeholder="placeholder" />
-                <InputNumber
-                  require
-                  name="inputPhoneNumber"
-                  label="Input Phone Number"
-                  placeholder="placeholder"
-                  isPhoneNumber
-                />
-                <InputNumber
-                  require
-                  name="inputNumberMinus"
-                  label="Input Phone Number"
-                  placeholder="placeholder"
-                  isAvailableMinus
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Checkbox</h1>
-              <div className="row gap-sm">
-                <InputCheckbox
-                  require
-                  name="inputCheckbox"
-                  label="Input Checkbox"
-                  options={[
-                    { label: "Mac", value: "mac" },
-                    { label: "Win", value: "win" },
-                  ]}
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Password</h1>
-              <div className="row gap-sm">
-                <InputPassword name="inputPassword" label="Input Password" require />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Radio</h1>
-              <div className="row gap-sm">
-                <InputRadio
-                  name="inputRadio"
-                  label="Input Password"
-                  options={[
-                    {
-                      label: "Mac",
-                      value: "mac",
-                    },
-                    {
-                      label: "Win",
-                      value: "win",
-                    },
-                  ]}
-                  require
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Textarea</h1>
-              <div className="row gap-sm">
-                <InputTextarea name="inputTextarea" label="Input Textarea" require />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Switch</h1>
-              <div className="row gap-sm">
-                <InputSwitch name="inputSwitch" />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Select</h1>
-              <div className="row gap-sm">
-                <InputSelect
-                  placeholder="placeholder"
-                  name="inputSelect"
-                  label="Input Select"
-                  require
-                  options={[
-                    {
-                      label: "Mac",
-                      value: "MAC",
-                    },
-                    { label: "Win", value: "WIN" },
-                  ]}
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input AutoComplete</h1>
-              <div className="row gap-sm">
-                <InputAutoComplete
-                  name="inputAutoComplete"
-                  label="Input AutoComplete"
-                  require
-                  options={[
-                    { label: "Mac", value: "MAC" },
-                    { label: "Win", value: "WIN" },
-                  ]}
-                />
-                <InputAutoComplete
-                  name="inputAutoCompleteMultiple"
-                  label="Input AutoComplete Multiple"
-                  require
-                  options={[
-                    { label: "Mac", value: "MAC" },
-                    { label: "Win", value: "WIN" },
-                  ]}
-                  isMultiple
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Date</h1>
-              <div className="row gap-sm">
-                <InputDate name="inputDate" label="Input Date" disabled isHideClearIcon={false} />
-                <InputDate name="inputDate" label="Input Date" require isHideClearIcon={false} />
-                <InputDate name="inputDate" label="Input Date" placeholder="placeholder" isHideClearIcon={false} />
-                <InputDate
-                  name="inputDate"
-                  label="Input Date"
-                  fullWidth
-                  isHideClearIcon={false}
-                  minYear={2560}
-                  maxYear={2570}
-                />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Date Range</h1>
-              <div className="row gap-sm">
-                <InputDateRange name="inputDateRange" label="Input Date Range" fullWidth isHideClearIcon={false} />
-              </div>
-            </div>
-
-            <div className="column align-center">
-              <h1>Input Date Time</h1>
-              <div className="row gap-sm">
-                <InputDateTime name="inputDateTime" label="Input Date Time" disabled />
-                <InputDateTime name="inputDateTime" label="Input Date Time" require />
-                <InputDateTime name="inputDateTime" label="Input Date Time" placeholder="placeholder" />
-                <InputDateTime name="inputDateTime" label="Input Date Time" fullWidth isHideClearIcon={false} />
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Menu</h1>
-              <div className="row gap-sm">
-                <Menu trigger={() => <Button name="Click" />}>
-                  {({ close }) =>
-                    [
-                      {
-                        label:
-                          "ExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExportExport",
-                        onClick: () => {
-                          console.log("Click Export!")
-                          close()
-                        },
-                      },
-                      {
-                        label: "Export",
-                        onClick: () => {
-                          console.log("Click Export!")
-                          close()
-                        },
-                      },
-                    ].map((data, index) => {
-                      return (
-                        <p key={index} onClick={() => data.onClick()}>
-                          {data.label}
-                        </p>
-                      )
-                    })
-                  }
-                </Menu>
-              </div>
-            </div>
-
-            <br />
-            <Divider />
-
-            <div className="column align-center">
-              <h1>Modal</h1>
-              <div className="row gap-sm">
-                <Button name="Open" onClick={() => setIsOpenModal(true)} />
-                <Modal id="modalTest" open={isOpenModal} onClose={() => setIsOpenModal(false)}>
-                  <div>
-                    <h4>Modal Parent</h4>
-                    <p>Description</p>
-                  </div>
-                </Modal>
-              </div>
-            </div>
-          </div>
-        </form>
-      </FormProvider>
-    </DBuiProvider>
-  )
-}
-
-export default App

package/src/components/blackdrop/index.tsx

@@ -1,18 +0,0 @@
-// Lib
-import React, { type JSX } from "react"
-
-// Images
-
-// Include in project
-import "./index.scss"
-import type { PropsBlackdrop } from "./index.type"
-
-const Blackdrop: React.FC<PropsBlackdrop> = ({ children, open, onClose }): JSX.Element => {
-  return (
-    <div className="DBui-blackdrop" data-hidden={!open} onClick={onClose}>
-      {children}
-    </div>
-  )
-}
-
-export default Blackdrop

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

@@ -1,7 +0,0 @@
-import type { JSX } from "react"
-
-export type PropsBlackdrop = {
-  children: JSX.Element | JSX.Element[]
-  open: boolean
-  onClose?: () => void
-}

package/src/components/button/index.tsx

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

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

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

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

@@ -1,26 +0,0 @@
-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.tsx

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

@@ -1,62 +0,0 @@
-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"