@pairbo/ui-kit 0.0.5 → 0.1.0

package/README.md

@@ -1,60 +1,148 @@
-# Custom Integration Components
+## **🚀 V1 To-Do List**
 
-This project is the @pairbo/ui-kit, for the user integration Pairbo into the merchant frontend website.
+### **🔧 Pending Setup**
 
-## Current States
+- [ ] **11ty setup is incomplete.**
+- [ ] **Mock API needed** for:
+  - Fetching and submitting cards
+  - Processing handwritten images
 
-V0
+---
+
+## **🎨 Global Theme ([src/themes](src/themes))**
+
+- [ ] Define global theme styles
+  - Identify `--sl-` global CSS variables in component styles, and replace with `--pbo-`
+  - Declare variables in [`default.css`](src/themes/default.css)
+
+---
+
+## **📌 Components Overview**
+
+### **🗂️ Drawer ([src/components/drawer](src/components/drawer))**
+
+- [x] Implement **window-like title bar** with:
+  - **Left:** Back icon (if not on Card Selection page)
+  - **Center:** Current page name (**Card Selection** / **Card Editing**)
+  - **Right:** Close icon to dismiss drawer
+- [x] Make styles more flexible:
+  - Support top/bottom/left/right drawers
+  - Allow setting drawer size (`30%`, `50%`, `60%`, `100%`)
+  - Add opening animations
+- [ ] _(Optional)_ Customizable themes (background, colors, etc.)
+
+---
+
+### **✍️ Editor ([src/components/editor](src/components/editor))**
+
+#### 🖥️ **Desktop Layout**
+
+- [x] Implement responsive grid layout for desktop
+- Grid rows: `1`
+- Grid cols: `12`
+- Image Slider:
+  - `sm`: col start `2`, end `7`
+  - `2xl`: col start `3`, end `7`
+- Message Editor:
+  - `sm`: col start `7`, end `12`
+  - `2xl`: col start `7`, end `11`
+
+#### 📱 **Mobile Layout**
+
+- [x] Implement responsive flex layout for mobile
+- `display: flex`
+- `flex-direction: column`
+- `gap: 1rem`
+
+---
+
+## **📝 Form Elements**
 
-## To do list
+### **📄 Type Form ([src/components/type-form](src/components/type-form))**
 
-- 11ty not fully set up.
-- Mock API for the fetching and submitting cards, and getting processed handwritten image.
+- [x] Add gap between form elements
+- [ ] Implement submit logic:
+  - If message is empty → CTA button turns **red** and shows `Skip` link
+  - **❓ Where to implement validation logic?** (At type form level or button level?)
+- [x] **Editor ↔️ Image Slider Communication**
+  - Auto-focus image slider when user types in textarea
+  - Improve communication logic between image slider and type form
 
-### [Global Theme](src/themes)
+---
+
+### **🔠 Font Selector**
+
+- [ ] **Extract** `font-selector` as a separate reusable component
+- [ ] Optimize font variable passing
+- [ ] Display font preview in dropdown
+- [ ] Enable global font imports
+- [ ] Improve font variable handling in `<pbo-selector>`
+
+---
+
+### **📝 Textarea ([src/components/textarea](src/components/textarea))**
+
+- [x] Show **current/max characters** indicator
+- [ ] _(Optional)_ Show **current/max lines** indicator
+
+---
 
-- [ ] Setting up the global theme styles.
+## **🎛️ Form Controls**
 
-### [drawer](src/components/drawer)
+### **️ Radio Button, Group, and Button Enhancements**
 
-- [ ] Apply a window like title bar.
-- [ ] Title bar will has
-  - Left: go back icon if no in the Card selection page
-  - Center current page name (Card Selection / Card Editing)
-  - Right: Close icon to close the drawer
-- [ ] More flexible styles settings
-  - Top/bottom/left/right drawer
-  - Custom the space it takes on the screen (e.g. 30%/50%/60%/100%)
-  - Animation when open the drawer
-- [ ] (Optional) Allow customize the theme like back ground etc.
+#### **✅ Submit Button ([src/components/button](src/components/button))**
+
+- [ ] **Submit Button Logic**
+  - Add validation to check form inputs
+  - Support `pre-submit` & `post-submit` callbacks:
+    - `pre-submit`: E.g. validate stock before adding a card
+    - `post-submit`: E.g. update cart after adding a card
+
+#### **🎛️ Button Group ([src/components/button-group](src/components/button-group))**
+
+- [x] Define group styles
+- [ ] Implement submit validation & error handling
+
+#### **🔘 Radio Button ([src/components/radio-button](src/components/radio-button))**
+
+- [x] Enhance styling and logic based on button component
+
+#### **📻 Radio Group ([src/components/radio-group](src/components/radio-group))**
+
+- [x] Define group styles
+- [ ] Implement validation & error handling
+
+---
 
-### [category](src/components/category) & [category image](src/components/category-image/)
+## **📂 Category & Category Image Components**
 
-Current category using the `SplideJs` to show the cards as slider.
+### **📦 Category ([src/components/category](src/components/category))**
 
-- [ ] Set the image size to the fixed ratio. Right now the image ratio will changed responsively.
-- [ ] The slider should be responsive
-  - Show 4 cards on desktop and 2 cards on mobile
-  - Don't show the arrows if no more than 4 (desktop) or 2 (mobile)
-  - Add hover animation and styles
-- [ ] Title Styles
+- [x] Fix **image aspect ratio** (currently responsive)
+- [x] Ensure **responsive slider**:
+  - **Desktop:** Show **4** cards
+  - **Mobile:** Show **2** cards
+  - Hide arrows if fewer than needed cards
+- [x] Add **hover animations**
+- [x] Improve **category title styling**
 
 ## Roadmap
 
 ### Preprepare
 
-- [ ] **Live Documentation for Development and Future Reference**  
+- [x] **Live Documentation for Development and Future Reference**  
        _Status_: The basic structure has been initialized using **11ty**. However, the bundling process for `src/components` is not fully configured. Additionally, rendering inline `` `html` `` within Markdown to actual HTML in **11ty** is not yet fully functional.
 
 ---
 
 ### Phase 1: Core Card Editor
 
-- [ ] **Font Dropdown Selector**
-- [ ] **Editor Dropdown Selector**
+- [x] **Font Dropdown Selector**
+- [x] **Editor Dropdown Selector**
 - [x] **Text Alignment Button Group**
 - [x] **Text Color Block**
-- [ ] **Live Preview (Zoomed View)**
+- [x] **Live Preview (Zoomed View)**
 - [x] **Typing Live Preview**
 - [ ] **Handwritten Live Preview**
 - [x] **Image Slider**
@@ -68,7 +156,7 @@ Current category using the `SplideJs` to show the cards as slider.
 - [x] **Image Slider for Card Covers**  
        _(4 columns on desktop, 2 columns on mobile)_
 - [x] **Category Selection**
-- [ ] **Image Components (Optional)**
+- [x] **Image Components (Optional)**
 
 ---
 

package/dist/mockServiceWorker.js

@@ -0,0 +1,302 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const PACKAGE_VERSION = "2.7.3";
+const INTEGRITY_CHECKSUM = "00729d72e3b82faf54ca8b9621dbb96f";
+const IS_MOCKED_RESPONSE = Symbol("isMockedResponse");
+const activeClientIds = new Set();
+
+self.addEventListener("install", function () {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", function (event) {
+  event.waitUntil(self.clients.claim());
+});
+
+self.addEventListener("message", async function (event) {
+  const clientId = event.source.id;
+
+  if (!clientId || !self.clients) {
+    return;
+  }
+
+  const client = await self.clients.get(clientId);
+
+  if (!client) {
+    return;
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  });
+
+  switch (event.data) {
+    case "KEEPALIVE_REQUEST": {
+      sendToClient(client, {
+        type: "KEEPALIVE_RESPONSE",
+      });
+      break;
+    }
+
+    case "INTEGRITY_CHECK_REQUEST": {
+      sendToClient(client, {
+        type: "INTEGRITY_CHECK_RESPONSE",
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      });
+      break;
+    }
+
+    case "MOCK_ACTIVATE": {
+      activeClientIds.add(clientId);
+
+      sendToClient(client, {
+        type: "MOCKING_ENABLED",
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      });
+      break;
+    }
+
+    case "MOCK_DEACTIVATE": {
+      activeClientIds.delete(clientId);
+      break;
+    }
+
+    case "CLIENT_CLOSED": {
+      activeClientIds.delete(clientId);
+
+      const remainingClients = allClients.filter(client => {
+        return client.id !== clientId;
+      });
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister();
+      }
+
+      break;
+    }
+  }
+});
+
+self.addEventListener("fetch", function (event) {
+  const { request } = event;
+
+  // Bypass navigation requests.
+  if (request.mode === "navigate") {
+    return;
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === "only-if-cached" && request.mode !== "same-origin") {
+    return;
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return;
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID();
+  event.respondWith(handleRequest(event, requestId));
+});
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event);
+  const response = await getResponse(event, client, requestId);
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    (async function () {
+      const responseClone = response.clone();
+
+      sendToClient(
+        client,
+        {
+          type: "RESPONSE",
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseClone.body,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseClone.body]
+      );
+    })();
+  }
+
+  return response;
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId);
+
+  if (activeClientIds.has(event.clientId)) {
+    return client;
+  }
+
+  if (client?.frameType === "top-level") {
+    return client;
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: "window",
+  });
+
+  return allClients
+    .filter(client => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === "visible";
+    })
+    .find(client => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id);
+    });
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event;
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone();
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers);
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get("accept");
+    if (acceptHeader) {
+      const values = acceptHeader.split(",").map(value => value.trim());
+      const filteredValues = values.filter(value => value !== "msw/passthrough");
+
+      if (filteredValues.length > 0) {
+        headers.set("accept", filteredValues.join(", "));
+      } else {
+        headers.delete("accept");
+      }
+    }
+
+    return fetch(requestClone, { headers });
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough();
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough();
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer();
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: "REQUEST",
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer]
+  );
+
+  switch (clientMessage.type) {
+    case "MOCK_RESPONSE": {
+      return respondWithMock(clientMessage.data);
+    }
+
+    case "PASSTHROUGH": {
+      return passthrough();
+    }
+  }
+
+  return passthrough();
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel();
+
+    channel.port1.onmessage = event => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error);
+      }
+
+      resolve(event.data);
+    };
+
+    client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)));
+  });
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error();
+  }
+
+  const mockedResponse = new Response(response.body, response);
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  });
+
+  return mockedResponse;
+}