@pairbo/ui-kit 0.0.4 → 0.0.5

package/README.md

@@ -1,13 +1,50 @@
 # Custom Integration Components
 
-This directory contains custom elements and integrations for the **Pairbo** project.
+This project is the @pairbo/ui-kit, for the user integration Pairbo into the merchant frontend website.
+
+## Current States
+
+V0
+
+## To do list
+
+- 11ty not fully set up.
+- Mock API for the fetching and submitting cards, and getting processed handwritten image.
+
+### [Global Theme](src/themes)
+
+- [ ] Setting up the global theme styles.
+
+### [drawer](src/components/drawer)
+
+- [ ] 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.
+
+### [category](src/components/category) & [category image](src/components/category-image/)
+
+Current category using the `SplideJs` to show the cards as slider.
+
+- [ ] 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
 
 ## Roadmap
 
 ### Preprepare
 
 - [ ] **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.
+       _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.
 
 ---
 
@@ -15,12 +52,12 @@ This directory contains custom elements and integrations for the **Pairbo** proj
 
 - [ ] **Font Dropdown Selector**
 - [ ] **Editor Dropdown Selector**
-- [ ] **Text Alignment Button Group**
-- [ ] **Text Color Block**
+- [x] **Text Alignment Button Group**
+- [x] **Text Color Block**
 - [ ] **Live Preview (Zoomed View)**
-- [ ] **Typing Live Preview**
+- [x] **Typing Live Preview**
 - [ ] **Handwritten Live Preview**
-- [ ] **Image Slider**
+- [x] **Image Slider**
 - [ ] **CTA Button**
 - [ ] **Handwritten Description Section**
 
@@ -28,28 +65,28 @@ This directory contains custom elements and integrations for the **Pairbo** proj
 
 ### Phase 2: Core Card Selection
 
-- [ ] **Image Slider for Card Covers**  
-      _(4 columns on desktop, 2 columns on mobile)_
-- [ ] **Category Selection**
+- [x] **Image Slider for Card Covers**  
+       _(4 columns on desktop, 2 columns on mobile)_
+- [x] **Category Selection**
 - [ ] **Image Components (Optional)**
 
 ---
 
 ### Phase 3: Integration Components
 
-- [ ] **Card Selection - Main Content**
-- [ ] **Card Editor (Typing) - Right Content Group**
+- [x] **Card Selection - Main Content**
+- [x] **Card Editor (Typing) - Right Content Group**
 - [ ] **Card Editor (Handwritten) - Right Content Group**
 - [ ] **Card Editor (Handwritten) - Content Section**
-- [ ] **Card Editor (Typing) - Content Section**
+- [x] **Card Editor (Typing) - Content Section**
 
 ---
 
 ### Phase 4: Modal/Pop-up
 
 - [ ] **Checkboxes**
-- [ ] **Basic Modal Implementation**
-- [ ] **Sectioned Form in Modal**
+- [x] **Basic Modal Implementation**
+- [x] **Sectioned Form in Modal**
 - [ ] **Modal Submission API**
 
 ---