pixelize-design-library 2.3.1-beta.8 → 2.3.2

package/.cursor/TASK-SETUP.md

@@ -0,0 +1,43 @@
+# Task pipeline — one-time developer setup
+
+Hooks in this repo work automatically after clone.
+
+## Recommended (global skills + status line)
+
+```bash
+git clone git@github.com:pixelize-tech/pixelize-cursor-setup.git
+cd pixelize-cursor-setup && ./install.sh
+```
+
+Installs all cross-repo `/` skills (`crm-task`, `social-task`, …), status line, and `cli-config.json`. Restart Cursor.
+
+Repo: https://github.com/pixelize-tech/pixelize-cursor-setup
+
+## Manual status line only
+
+1. Copy the script to your user Cursor folder:
+
+   ```bash
+   cp .cursor/pixelize-task-statusline.sh ~/.cursor/pixelize-task-statusline.sh
+   chmod +x ~/.cursor/pixelize-task-statusline.sh
+   ```
+
+2. Add to `~/.cursor/cli-config.json` (merge if the file already exists):
+
+   ```json
+   {
+     "statusLine": {
+       "type": "command",
+       "command": "~/.cursor/pixelize-task-statusline.sh",
+       "padding": 0
+     }
+   }
+   ```
+
+3. Restart Cursor or open a new Agent chat.
+
+## Task skill (feature work)
+
+- Pick **`task`** from the **`/`** menu, then describe your goal.
+- Do **not** type `/task` in the message body — a hook will block it (zero tokens wasted).
+- See repo `CLAUDE.md` for the cross-repo skill name if applicable.

package/.cursor/agents/be-impl.md

@@ -0,0 +1,37 @@
+---
+name: be-impl
+description: >-
+  Handles build, exports, and publish pipeline changes. Use in @task phase 2
+  when plan includes index.ts, tsc build, or npm publish steps.
+---
+
+You are the lib-impl (build/export) agent for **Pixelize Design Library** (Micro-Components).
+
+Note: This repo has no backend API. This agent covers build pipeline, not crm-service.
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read the plan from .cursor/plans/current.md
+3. Read `.cursor/modules/types-exports/MODULE.md`
+
+## Workflow
+
+1. Work only inside Micro-Components
+2. Update `src/index.ts` exports
+3. Verify `tsconfig.json` and build output in `dist/`
+4. Run `npm run build` to validate
+5. Update MODULE.md if export surface changes
+6. Do not run `npm publish` unless user explicitly requests
+
+## Output
+
+- Done / Blocked lists
+- Files changed
+- Build result (pass/fail)
+
+## Rules
+
+- Never edit `dist/` directly — change `src/` and rebuild
+- Never commit without user confirmation
+- Never break existing exports without noting semver impact

package/.cursor/agents/fe-impl.md

@@ -0,0 +1,39 @@
+---
+name: fe-impl
+description: >-
+  Implements component changes from an approved plan. Use in @task phase 2
+  for UI components, theme, and playground pages.
+---
+
+You are the fe-impl (component implementation) agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read the plan from .cursor/plans/current.md — do not replan
+3. Read `.cursor/modules/<domain>/MODULE.md` for every domain you will touch
+4. Read one existing similar component before starting
+
+## Workflow
+
+1. Work only inside Micro-Components
+2. Implement in `src/Components/<Name>/`
+3. Add/update demo in `src/Pages/` if needed for playground
+4. Export from `src/index.ts` for public API
+5. Use Chakra + theme tokens from `src/Theme/` — match existing patterns
+6. Always handle null/undefined, loading, and error states
+7. Update `.cursor/modules/<domain>/MODULE.md` after implementation
+8. Keep changes minimal — no scope creep
+
+## Output
+
+- Done: bullet list of completed tasks
+- Files changed: every file path with one-line description
+- Blocked: anything not completed with exact reason
+- Notes for test-create: what needs Jest coverage
+
+## Rules
+
+- Never add app-specific CRM/API logic to library components
+- Never commit
+- No placeholder files or fake demo data

package/.cursor/agents/task-plan.md

@@ -0,0 +1,56 @@
+---
+name: task-plan
+description: >-
+  Creates implementation plans from user goals. Use in @task phase 1, or when
+  a structured plan is needed before coding.
+---
+
+You are the task-plan agent for **Pixelize Design Library** (Micro-Components). Produce a concrete actionable plan — do not write code.
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read .cursor/plans/current.md if it exists — user may be resuming
+3. Read `.cursor/modules/<domain>/MODULE.md` for every component domain touched
+4. Ask a question only if the goal is genuinely ambiguous
+5. Output a plan implementation agents can execute without replanning
+
+## Plan format
+
+# [Component / task title]
+
+## Goal
+
+One paragraph
+
+## Type
+
+feat / fix / refactor / chore
+
+## Scope
+
+- In scope: ...
+- Out of scope: ...
+- Agents needed: fe-impl / lib-impl (build-export) / both
+
+## Tasks
+
+### Component (fe-impl)
+
+- [ ] Task with file paths under `src/Components/` and acceptance criteria
+
+### Build / export (lib-impl)
+
+- [ ] index.ts export, build, version bump if publishing
+
+### Tests
+
+- [ ] Jest test files and coverage targets
+
+## Risks / assumptions
+
+## Rules
+
+- Never write production code
+- Save approved plan to .cursor/plans/current.md
+- End with: Ready for implementation — list which agents run next

package/.cursor/agents/test-create.md

@@ -0,0 +1,31 @@
+---
+name: test-create
+description: >-
+  Writes Jest tests for completed component work. Use in @task phase 3a
+  after fe-impl, before test-exec.
+---
+
+You are the test-create agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read the plan from .cursor/plans/current.md
+2. Read fe-impl output summary
+3. Read existing `*.test.tsx` files to match conventions
+
+## Coverage required
+
+- Happy path render
+- Minimum 2 edge cases (empty, disabled, error props)
+- 1 regression test per bugfix
+
+## Output
+
+- Tests added/updated: file paths and what each covers
+- Run command: `npm test` from Micro-Components root
+
+## Rules
+
+- Never change production code
+- Never commit
+- Follow existing Jest + Testing Library patterns

package/.cursor/agents/test-exec.md

@@ -0,0 +1,26 @@
+---
+name: test-exec
+description: >-
+  Runs Jest tests after test-create. Use in @task phase 3b.
+---
+
+You are the test-exec agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read test-create output
+2. Run `npm test` from Micro-Components root
+3. Report pass/fail with relevant failure output
+
+## Output
+
+- Test run result: pass / fail
+- Failed test names and error snippets if any
+- Recommendation: proceed to review or fix
+
+## Rules
+
+- Never commit
+- Never modify production code unless fixing test failures is in scope
+- Never disable, skip, or comment out tests to make them pass
+- Never change test assertions to match wrong behavior — fix the implementation

package/.cursor/hooks/task-hint.env

@@ -0,0 +1 @@
+REPO_HINT="/ → task (this repo) or / → design-task"

package/.cursor/hooks/task-skill-nudge.sh

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# Block first message without / task skill; flag session for status-line warning. Zero tokens.
+set -euo pipefail
+
+STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/task-hint.env"
+
+INPUT=$(cat)
+PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
+CONV_ID=$(echo "$INPUT" | jq -r '.conversation_id // empty')
+
+if [[ -z "$CONV_ID" ]]; then
+  echo '{"continue":true}'
+  exit 0
+fi
+
+has_skill() {
+  echo "$PROMPT" | grep -qiE '^\s*/(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'
+}
+
+ensure_state_file() {
+  mkdir -p "$(dirname "$STATE_FILE")"
+  [[ -f "$STATE_FILE" ]] || echo '{}' >"$STATE_FILE"
+}
+
+update_state() {
+  local first_nudge="$1"
+  local chatting="$2"
+  ensure_state_file
+  local tmp
+  tmp=$(mktemp)
+  jq --arg id "$CONV_ID" \
+    --argjson first "$first_nudge" \
+    --argjson chatting "$chatting" \
+    '.[$id] = {first_nudge_done: $first, chatting_without_skill: $chatting}' \
+    "$STATE_FILE" >"$tmp" && mv "$tmp" "$STATE_FILE"
+}
+
+if has_skill; then
+  if [[ -f "$STATE_FILE" ]] && jq -e --arg id "$CONV_ID" '.[$id]' "$STATE_FILE" >/dev/null 2>&1; then
+    update_state true false
+  fi
+  echo '{"continue":true}'
+  exit 0
+fi
+
+ensure_state_file
+FIRST_DONE=$(jq -r --arg id "$CONV_ID" '.[$id].first_nudge_done // false' "$STATE_FILE")
+
+if [[ "$FIRST_DONE" != "true" ]]; then
+  update_state true false
+  MSG="━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  NO TASK SKILL LOADED
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+You are chatting WITHOUT a pipeline skill.
+
+For feature / bugfix work, use the / menu first:
+  ${REPO_HINT}
+
+Then type your goal in the SAME input (do not type the skill name).
+
+Send this message AGAIN to continue without a skill."
+  jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
+  exit 0
+fi
+
+update_state true true
+echo '{"continue":true}'

package/.cursor/hooks/task-slash-guard.sh

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+# Blocks plain-text task skill names (not / menu picks). Zero API tokens.
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/task-hint.env"
+
+INPUT=$(cat)
+PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
+
+# Menu picker embeds "/tickets-task ..." in prompt; attachments stay empty.
+# Only block plain-text mistakes: skill name at start without a leading slash.
+if echo "$PROMPT" | grep -qiE '^\s*@?(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'; then
+  MSG="⚠️  TASK PIPELINE NOT ACTIVE
+
+You typed a task command as plain text. The skill was NOT loaded.
+
+To run the pipeline:
+  1. Click the chat input
+  2. Type / and pick the skill from the menu
+  3. Send your goal
+
+For this repo use: ${REPO_HINT}
+
+Do not type task skill names in the message body — use the / menu picker."
+  jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
+  exit 0
+fi
+
+echo '{"continue":true}'

package/.cursor/hooks.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "hooks": {
+    "beforeSubmitPrompt": [
+      {
+        "command": ".cursor/hooks/task-slash-guard.sh"
+      },
+      {
+        "command": ".cursor/hooks/task-skill-nudge.sh"
+      }
+    ]
+  }
+}

package/.cursor/modules/account-management/MODULE.md

@@ -0,0 +1,16 @@
+# Account Management
+
+## Purpose
+
+Account/admin-facing components: UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, OrgSwitcher, UpgradeButton.
+
+## Key paths
+
+- `src/Components/UserDetails/`, `RolesPermission/`, `CustomModulesTable/`, `SignInActivityTable/`, `OrganizationDetails/`, `OrgSwitcher/`, `UpgradeButton/`
+- Tests: `UserDetails.test.tsx`, `RolesPermission.test.tsx`, `CustomModulesTable.test.tsx`, `SignInActivityTable.test.tsx`, `OrganizationDetails.test.tsx`
+
+## Key rules
+
+- UserDetails, RolesPermission, CustomModulesTable, OrganizationDetails bundle their own action modals (Add/Edit/Delete/ChangeRole) in the same folder
+- Each exports typed Props/Labels from `<Name>Props.tsx` via `src/index.ts` — keep props API-generic, no CRM/API logic in the library
+- Labels are injectable for i18n; consumers pass data and handlers (props in, events out)

package/.cursor/modules/buttons/MODULE.md

@@ -0,0 +1,13 @@
+# Buttons
+
+## Purpose
+
+Button, ButtonGroupIcon, Buttons variants.
+
+## Key paths
+
+- `src/Components/Button/`, `ButtonGroupIcon/`, `Buttons/`
+
+## Key rules
+
+- Match Chakra button theming via design tokens

package/.cursor/modules/cards/MODULE.md

@@ -0,0 +1,13 @@
+# Cards
+
+## Purpose
+
+Card, PaymentCard, ProfileCard, ProductCard, ProductDetails.
+
+## Key paths
+
+- `src/Components/Card/`, `Card/PaymentCard/`, `ProfileCard/`, `ProductCard/`, `ProductDetails/`
+
+## Key rules
+
+- ProfileCard has Header/Body/Footer subcomponents

package/.cursor/modules/charts/MODULE.md

@@ -0,0 +1,13 @@
+# Charts
+
+## Purpose
+
+Apexcharts wrappers: Bar, Line, Pie, Polar.
+
+## Key paths
+
+- `src/Components/Apexcharts/ApexBarChart/`, `ApexLineChart/`, `ApexPieChart/`, `ApexPolarCharts/`
+
+## Key rules
+
+- react-apexcharts; colors from theme chart tokens

package/.cursor/modules/common/MODULE.md

@@ -0,0 +1,13 @@
+# Common Helpers
+
+## Purpose
+
+Internal shared helpers under `Components/Common/` — not all exported from index.
+
+## Key paths
+
+- `src/Components/Common/` — ErrorComponent, FormLabel, etc.
+
+## Key rules
+
+- Internal use by other components; export only if needed publicly

package/.cursor/modules/contact-auth/MODULE.md

@@ -0,0 +1,13 @@
+# Contact & Email
+
+## Purpose
+
+ContactForm, VerifyEmailOtp (EmailCards).
+
+## Key paths
+
+- `src/Components/ContactForm/`, `EmailCards/VerifyEmailOtp/`
+
+## Key rules
+
+- OTP flow UI only — API wiring in consumer apps

package/.cursor/modules/data-display/MODULE.md

@@ -0,0 +1,18 @@
+# Data Display
+
+## Purpose
+
+Tag, Timeline, Reorder, Divider, Trail.
+
+## Key paths
+
+- `src/Components/Tag/` — `Tag.tsx`, `TagProps.ts`, `Tag.styles.tsx` (registered in `Theme/componentStyles.ts`)
+- `Timeline/`, `Reorder/`, `Divider/`, `Trail/`
+- Demo: `src/Pages/tag.tsx`
+
+## Key rules
+
+- Trail includes editable cell demos
+- Tag styling lives in `Tag.styles.tsx` (Chakra component theme), not hardcoded in `Tag.tsx`
+- Tag sizes: `xs | sm | md | lg`; variants: `solid | outline | subtle`
+- Tag colors are token-driven from the active theme via `colorScheme` (brand `primary/secondary/tertiary` + global scales); palette resolution falls back to `gray` so a missing scale never throws

package/.cursor/modules/feedback/MODULE.md

@@ -0,0 +1,14 @@
+# Feedback
+
+## Purpose
+
+Loading, Skeletons, ProgressBar, Notification, FeedbackForm.
+
+## Key paths
+
+- `src/Components/Loading/`, `Skeletons/`, `ProgressBar/`, `Notification/`, `FeedbackForm/`
+- `src/services/feedback.ts`
+
+## Key rules
+
+- FeedbackForm may POST to account API in consumer apps — keep props generic

package/.cursor/modules/form/MODULE.md

@@ -0,0 +1,13 @@
+# Form
+
+## Purpose
+
+FormWrapper — shared form layout wrapper for entity forms in CRM apps.
+
+## Key paths
+
+- `src/Components/Form/FormWrapper`
+
+## Key rules
+
+- Used with smart forms in crm-frontend; keep generic props

package/.cursor/modules/inputs-basic/MODULE.md

@@ -0,0 +1,13 @@
+# Basic Inputs
+
+## Purpose
+
+TextInput, PhoneNumberInput, InputTextArea, NoteTextArea, NumberInput, PinInput, PinInputs.
+
+## Key paths
+
+- `src/Components/Input/`, `InputTextArea/`, `NoteTextArea/`, `NumberInput/`, `PinInput/`, `PinInputs/`
+
+## Key rules
+
+- InputSwitch in `Input/Switch/`

package/.cursor/modules/inputs-date-file/MODULE.md

@@ -0,0 +1,19 @@
+# Date & Files
+
+## Purpose
+
+ThemeDatePicker (Single/Range/Time variants), FileUpload, FileUploader, Editor (jodit-react).
+
+## Key paths
+
+- `src/Components/DatePicker/` — `ThemeDatePicker.tsx` (public entry), `SingleDatePicker.tsx`, `RangeDatePicker.tsx`, `TimePicker.tsx`, `TimeOnlyPicker.tsx`, `CalendarPanel.tsx`
+- `src/Components/FileUpload/`, `FileUploader/`, `Editor/`
+
+## Key rules
+
+- DatePicker themed for brand tokens
+
+## Migration notes
+
+- DatePicker public export moved: `DatePicker/DatePicker` → `DatePicker/ThemeDatePicker` (exported as `DatePicker` from `src/index.ts`)
+- Split into Single/Range/Time picker variants under the same folder

package/.cursor/modules/inputs-select/MODULE.md

@@ -0,0 +1,14 @@
+# Select & Search
+
+## Purpose
+
+Select, SearchSelect, SelectSearch, MultiSelect, Dropdown, Search.
+
+## Key paths
+
+- `src/Components/Select/`, `SearchSelect/`, `SelectSearch/`, `MultiSelect/`, `Dropdown/`, `Search/`
+
+## Key rules
+
+- SearchSelect has performance tests; virtualize for large lists
+- Dropdown menu is portaled to `<body>` (position fixed) and clamps to the viewport — it right-aligns/flips to stay on-screen near edges

package/.cursor/modules/inputs-toggle/MODULE.md

@@ -0,0 +1,13 @@
+# Toggles
+
+## Purpose
+
+Checkbox, RadioButton, Switch, Slider, Toggle/TableToggle.
+
+## Key paths
+
+- `src/Components/Checkbox/`, `RadioButton/`, `Switch/`, `Slider/`, `Toggle/`
+
+## Key rules
+
+- RadioButtonGroup for grouped radios

package/.cursor/modules/kanban/MODULE.md

@@ -0,0 +1,14 @@
+# Kanban
+
+## Purpose
+
+KanbanBoard with drag-and-drop columns and KanbanActions.
+
+## Key paths
+
+- `src/Components/KanbanBoard/`, `KanbanActions/`
+- Tests: `KanbanBoard.test.tsx`, `AccountCard.test.tsx`
+
+## Key rules
+
+- Uses @hello-pangea/dnd; MeasuredItem for layout

package/.cursor/modules/layout-navigation/MODULE.md

@@ -0,0 +1,14 @@
+# Layout & Navigation
+
+## Purpose
+
+Accordion, Breadcrumbs, NavigationBar, SideBar, Header, Drawer, FilterSidebar.
+
+## Key paths
+
+- `src/Components/Accordion/`, `Breadcrumbs/`, `NavigationBar/`, `SideBar/`, `Header/`, `Drawer/`, `FilterSidebar/`
+
+## Key rules
+
+- SideBar/Header have sub-`components/` folders
+- Used by crm-frontend, account-frontend sidebars

package/.cursor/modules/overlays/MODULE.md

@@ -0,0 +1,13 @@
+# Overlays
+
+## Purpose
+
+Modal, AlertDialog, ToolTip, Toaster (+ `useToaster` hook).
+
+## Key paths
+
+- `src/Components/Modal/`, `AlertDialog/`, `ToolTip/`, `Toaster/`
+
+## Key rules
+
+- Modal exports ModalHeader, ModalBody, ModalFooter subcomponents

package/.cursor/modules/playground/MODULE.md

@@ -0,0 +1,15 @@
+# Playground
+
+## Purpose
+
+Vite dev playground — demo pages not published to npm.
+
+## Key paths
+
+- `src/Pages/` (49 demo files), `src/App.tsx`, `src/Layout.tsx`
+- `npm start` launches playground
+
+## Key rules
+
+- Demo API calls to dev.pixelizetech.com are playground-only
+- Not included in `dist/` publish output

package/.cursor/modules/table/MODULE.md

@@ -0,0 +1,15 @@
+# Table
+
+## Purpose
+
+Data table with virtualization, filters, pagination, column management.
+
+## Key paths
+
+- `src/Components/Table/`, `Table/components/`, `Table/settings/`, `Table/filters/`, `Table/hooks/`
+- Tests: `components/TableBody.virtualize.test.tsx`, `settings/ManageColumns.test.tsx`
+
+## Key rules
+
+- Core CRM list UI — high change frequency
+- `src/Utils/table.ts` helpers

package/.cursor/modules/theme/MODULE.md

@@ -0,0 +1,15 @@
+# Theme
+
+## Purpose
+
+Eight brand presets (Default, Dark, Emerald, Meadow, Radiant, Rosewood, Skyline, Slate), `useCustomTheme`, `withTheme` HOC, token builders.
+
+## Key paths
+
+- `src/Theme/`, `src/withTheme.tsx`
+- Export: `useCustomTheme`, `ThemesList`, `withTheme`
+
+## Key rules
+
+- Consumers wrap app with `withTheme`; use theme tokens not hardcoded colors
+- Chart colors from theme via `chartColorsFromTheme`

package/.cursor/modules/types-exports/MODULE.md

@@ -0,0 +1,17 @@
+# Types & Exports
+
+## Purpose
+
+Public API surface — semver-sensitive.
+
+## Key paths
+
+- `src/index.ts` (~80 value exports + typed Props groups for UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails)
+- `src/types/`
+- `src/withTheme.tsx`
+
+## Key rules
+
+- Every public component must be exported here
+- Breaking export changes require major version bump
+- Run `npm run build` after export changes