@datability/8ui 0.1.69 → 1.1.0

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": false,
+  "trailingComma": "all",
+  "singleQuote": false,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "endOfLine": "auto"
+}

package/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint"
+  ]
+}

package/README.md

@@ -1,25 +1,73 @@
-<br />
-<div align="center">
-  <img src="https://s3.ap-southeast-1.amazonaws.com/datability.info/logo-datability.svg" alt="Logo" width="350">
-  <br />
-  <br />
-  <h1>Datability UI</h1>
-</div>
+# React + TypeScript + Vite
 
-**Datability UI** contains foundational React UI component base libraries.
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 
-<div align="center">
+Currently, two official plugins are available:
 
-[![npm latest package](https://img.shields.io/npm/v/@datability/8ui/latest.svg)](https://www.npmjs.com/package/@datability/8ui)
-[![npm next package](https://img.shields.io/npm/v/@datability/8ui/next.svg)](https://www.npmjs.com/package/@datability/8ui)
-[![npm downloads](https://img.shields.io/npm/dm/@datability/8ui.svg)](https://www.npmjs.com/package/@datability/8ui)
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 
-</div>
+## React Compiler
 
-# Documentation
-...
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 
-# Examples
-...
+## Expanding the ESLint configuration
 
-<br>
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/declaration.d.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module "*.scss" {
+  const content: Record<string, string>
+  export default content
+}
+
+declare module "*.svg" {
+  const content: any
+  export default content
+}

package/docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  frontend:
+    container_name: npm-fe
+    image: node:20
+    volumes:
+      - .:/workdir
+    working_dir: /workdir
+    ports:
+      - 4000:3000
+    # command: >
+    #   bash -c "
+    #     npm install &&
+    #     npm run dev
+    #   "
+    command: >
+      bash -c "
+        npm install &&
+        npm run build && 
+        npm run preview
+      "

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>8ui</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,46 +1,47 @@
 {
   "name": "@datability/8ui",
-  "version": "0.1.69",
-  "description": "",
-  "main": "dist/components/index.js",
-  "types": "dist/components/index.d.ts",
-  "author": "Datability",
-  "license": "ISC",
-  "keywords": [],
+  "version": "1.1.0",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./style.css": "./dist/index.css"
+  },
   "scripts": {
-    "start": "react-scripts start",
+    "dev": "vite",
+    "build": "vite build && npm run cp-scss && npm run cp-scss-2 && npm run cp-svg",
+    "lint": "eslint .",
+    "preview": "vite preview",
     "cp-svg": "copyfiles -u 1 src/components/**/*.svg dist/",
     "cp-scss": "copyfiles -u 1 src/components/**/*.scss dist/",
-    "cp-scss-2": "copyfiles -u 1 src/components/**/**/*.scss dist/",
-    "build": "rm -rf dist/ && tsc && npm run cp-scss && npm run cp-scss-2 && npm run cp-svg"
+    "cp-scss-2": "copyfiles -u 1 src/components/**/**/*.scss dist/"
   },
-  "files": [
-    "/dist"
-  ],
-  "dependencies": {
-    "copyfiles": "^2.4.1",
-    "formik": "^2.4.6",
-    "prettier": "^3.2.5",
-    "react-scripts": "^5.0.1",
-    "sass": "^1.77.0",
-    "sass-loader": "^14.2.1"
+  "peerDependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-hook-form": "^7.71.1",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "copyfiles": "^2.4.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "sass": "^1.97.3",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx

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

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

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