refactor: demo doc, dist file

jukbot · Sep 22, 2023 · 356527c · 356527c
1 parent 79b48f5
commit 356527c
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 14 deletions.
diff --git a/dist/assets/index-402d6723.js b/dist/assets/index-402d6723.js
diff --git a/dist/assets/index-aadd4a5c.css b/dist/assets/index-aadd4a5c.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Example Thai Citizen ID Input Validation with WCAG Support"
+    />
+    <meta name="author" content="Chukkrit V." />
+    <title>Thai Citizen ID Input Validation</title>
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/imask/7.1.3/imask.min.js"
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+
+    <script type="module" crossorigin src="/assets/index-402d6723.js"></script>
+    <link rel="stylesheet" href="/assets/index-aadd4a5c.css">
+  </head>
+
+  <body>
+    <a
+      href="https://github.com/jukbot/thai-citizen-id-validator"
+      class="github-corner"
+      aria-label="View source on Github"
+    >
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        style="
+          fill: #151513;
+          color: #fff;
+          position: absolute;
+          top: 0;
+          border: 0;
+          right: 0;
+        "
+        aria-hidden="true"
+      >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style="transform-origin: 130px 106px"
+          class="octo-arm"
+        ></path>
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          class="octo-body"
+        ></path>
+      </svg>
+    </a>
+    <style>
+      .github-corner:hover .octo-arm {
+        animation: octocat-wave 560ms ease-in-out;
+      }
+
+      @keyframes octocat-wave {
+        0%,
+        100% {
+          transform: rotate(0);
+        }
+        20%,
+        60% {
+          transform: rotate(-25deg);
+        }
+        40%,
+        80% {
+          transform: rotate(10deg);
+        }
+      }
+
+      @media (max-width: 500px) {
+        .github-corner:hover .octo-arm {
+          animation: none;
+        }
+        .github-corner .octo-arm {
+          animation: octocat-wave 560ms ease-in-out;
+        }
+      }
+    </style>
+    <section>
+      <h1>Thai Citizen ID Validation with WCAG Standard</h1>
+
+      <h2>ตรวจสอบความถูกต้องเลขบัตรประชาชน</h2>
+
+      <form id="validator-form" action="/target" method="post">
+        <label class="label" id="InputLabel" for="citizenid"
+          >Enter your 🇹🇭 citizen ID</label
+        >
+        <input
+          class="input"
+          id="citizenid"
+          type="text"
+          name="citizenid"
+          placeholder="X-XXXX-XXXXX-XX-X"
+          autocomplete="off"
+          autofocus
+          title="citizen ID Input"
+          aria-labelledby="InputLabel"
+          aria-invalid
+          aria-required="true"
+          required
+          tabindex="1"
+        />
+        <button
+          type="submit"
+          id="button"
+          value="confirm"
+          tabindex="2"
+          aria-label="Submit"
+          disabled
+        >
+          Submit 🕵️‍♀️
+        </button>
+      </form>
+      <div
+        class="text error"
+        id="errorMessage"
+        aria-hidden="true"
+        aria-label="Invalid ID"
+        role="alert"
+      >
+        <p>ID is invalid format ❌</p>
+      </div>
+      <div
+        class="text success"
+        id="successMessage"
+        aria-hidden="true"
+        aria-label="Valid ID"
+        role="alert"
+      >
+        <p>ID is valid format ✅</p>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/dist/validator.min.js.mjs → dist/validator.es.js b/dist/validator.min.js.mjs → dist/validator.es.js
diff --git a/dist/validator.min.js.umd.js → dist/validator.umd.js b/dist/validator.min.js.umd.js → dist/validator.umd.js
diff --git a/docs/index.html b/docs/index.html
@@ -15,11 +15,7 @@
       crossorigin="anonymous"
       referrerpolicy="no-referrer"
     ></script>
-    <script
-      type="module"
-      src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"
-    ></script>
-    <script src="js/script.js"></script>
+    <script type="module" src="js/script.js"></script>
   </head>
 
   <body>

diff --git a/docs/js/script.js b/docs/js/script.js
@@ -1,3 +1,5 @@
+import validateThaiID from "../../lib/validator";
+
 document.addEventListener("DOMContentLoaded", () => {
   const input = document.getElementById("citizenid");
   const btn = document.getElementById("button");
@@ -27,8 +29,12 @@ document.addEventListener("DOMContentLoaded", () => {
     input.setAttribute("aria-invalid", String(!isThaiIDValid));
     error.setAttribute("aria-hidden", String(isThaiIDValid));
     success.setAttribute("aria-hidden", String(!isThaiIDValid));
-    error.style.display = isThaiIDValid ? "none" : "block";
-    success.style.display = isThaiIDValid ? "block" : "none";
+    error.style.display = isValidLength
+      ? !isThaiIDValid
+        ? "block"
+        : "none"
+      : "none";
+    success.style.display = isValidLength && isThaiIDValid ? "block" : "none";
   }
 
   function disableEnterSubmit(event) {

diff --git a/package.json b/package.json
@@ -1,14 +1,24 @@
 {
   "name": "thai-id-validator",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "Thai Citizen ID validator with zero dependencies",
   "keywords": [
     "thai-citizen-id",
     "id-validator",
     "validator",
     "national-id"
   ],
-  "main": "dist/validator.min.js.mjs",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/validator.umd.js",
+  "module": "./dist/validator.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/validator.es.js",
+      "require": "./dist/validator.umd.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jukbot/thai-citizen-id-validatorr.git"
@@ -23,8 +33,10 @@
     "test": "test"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --config vite-docs.config.js",
     "build": "vite build",
+    "build:lib": "vite build",
+    "build:docs": "vite build --config vite-docs.config.js",
     "lint": "standard",
     "test": "vitest run",
     "coverage": "nyc --reporter=lcov --reporter=text-summary npm run test"

diff --git a/vite-docs.config.js b/vite-docs.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  root: "docs",
+  build: {
+    minify: "esbuild",
+    outDir: "../dist",
+  },
+};
diff --git a/vite.config.js b/vite.config.js
@@ -1,7 +1,4 @@
 module.exports = {
-  cors: {
-    origin: "http://localhost:3000",
-  },
   test: {
     coverage: {
       provider: "istanbul",
@@ -13,7 +10,7 @@ module.exports = {
     lib: {
       entry: "./lib/validator.js",
       name: "validateThaiID",
-      fileName: "validator.min.js",
+      fileName: (format) => `validator.${format}.js`,
     },
   },
 };