pixelize-design-library 2.3.20 → 2.3.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/dist/Components/Toaster/Toaster.d.ts.map +1 -1
  2. package/dist/Components/Toaster/Toaster.js +54 -12
  3. package/dist/Components/Toaster/ToasterProps.d.ts +7 -0
  4. package/dist/Components/Toaster/ToasterProps.d.ts.map +1 -1
  5. package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.d.ts +16 -0
  6. package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.d.ts.map +1 -0
  7. package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js +83 -0
  8. package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts +15 -0
  9. package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts.map +1 -0
  10. package/dist/Components/WorkspaceWindow/WorkspaceWindow.js +40 -0
  11. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts +72 -0
  12. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts.map +1 -0
  13. package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.js +2 -0
  14. package/dist/index.d.ts +4 -1
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.js +7 -2
  17. package/package.json +5 -1
  18. package/.cursor/TASK-SETUP.md +0 -43
  19. package/.cursor/agents/be-impl.md +0 -37
  20. package/.cursor/agents/fe-impl.md +0 -39
  21. package/.cursor/agents/task-plan.md +0 -56
  22. package/.cursor/agents/test-create.md +0 -31
  23. package/.cursor/agents/test-exec.md +0 -26
  24. package/.cursor/hooks/task-hint.env +0 -1
  25. package/.cursor/hooks/task-skill-nudge.sh +0 -71
  26. package/.cursor/hooks/task-slash-guard.sh +0 -31
  27. package/.cursor/hooks.json +0 -13
  28. package/.cursor/modules/account-management/MODULE.md +0 -16
  29. package/.cursor/modules/buttons/MODULE.md +0 -13
  30. package/.cursor/modules/cards/MODULE.md +0 -13
  31. package/.cursor/modules/charts/MODULE.md +0 -13
  32. package/.cursor/modules/common/MODULE.md +0 -13
  33. package/.cursor/modules/contact-auth/MODULE.md +0 -13
  34. package/.cursor/modules/data-display/MODULE.md +0 -20
  35. package/.cursor/modules/feedback/MODULE.md +0 -14
  36. package/.cursor/modules/form/MODULE.md +0 -13
  37. package/.cursor/modules/inputs-basic/MODULE.md +0 -13
  38. package/.cursor/modules/inputs-date-file/MODULE.md +0 -20
  39. package/.cursor/modules/inputs-select/MODULE.md +0 -15
  40. package/.cursor/modules/inputs-toggle/MODULE.md +0 -13
  41. package/.cursor/modules/kanban/MODULE.md +0 -14
  42. package/.cursor/modules/layout-navigation/MODULE.md +0 -103
  43. package/.cursor/modules/overlays/MODULE.md +0 -21
  44. package/.cursor/modules/playground/MODULE.md +0 -15
  45. package/.cursor/modules/table/MODULE.md +0 -15
  46. package/.cursor/modules/theme/MODULE.md +0 -15
  47. package/.cursor/modules/types-exports/MODULE.md +0 -17
  48. package/.cursor/modules/utility-ui/MODULE.md +0 -15
  49. package/.cursor/modules/utils-hooks/MODULE.md +0 -23
  50. package/.cursor/pixelize-task-statusline.sh +0 -64
  51. package/.cursor/plans/blocked/.gitkeep +0 -0
  52. package/.cursor/plans/current.md +0 -12
  53. package/.cursor/plans/done/.gitkeep +0 -0
  54. package/.cursor/rules +0 -31
  55. package/.cursor/skills/task/SKILL.md +0 -167
  56. package/CLAUDE.md +0 -122
  57. package/eslint.config.js +0 -48
  58. package/index.html +0 -13
  59. package/vite.config.ts +0 -13
@@ -1,56 +0,0 @@
1
- ---
2
- name: task-plan
3
- description: >-
4
- Creates implementation plans from user goals. Use in @task phase 1, or when
5
- a structured plan is needed before coding.
6
- ---
7
-
8
- You are the task-plan agent for **Pixelize Design Library** (Micro-Components). Produce a concrete actionable plan — do not write code.
9
-
10
- ## When invoked
11
-
12
- 1. Read CLAUDE.md and .cursor/rules
13
- 2. Read .cursor/plans/current.md if it exists — user may be resuming
14
- 3. Read `.cursor/modules/<domain>/MODULE.md` for every component domain touched
15
- 4. Ask a question only if the goal is genuinely ambiguous
16
- 5. Output a plan implementation agents can execute without replanning
17
-
18
- ## Plan format
19
-
20
- # [Component / task title]
21
-
22
- ## Goal
23
-
24
- One paragraph
25
-
26
- ## Type
27
-
28
- feat / fix / refactor / chore
29
-
30
- ## Scope
31
-
32
- - In scope: ...
33
- - Out of scope: ...
34
- - Agents needed: fe-impl / lib-impl (build-export) / both
35
-
36
- ## Tasks
37
-
38
- ### Component (fe-impl)
39
-
40
- - [ ] Task with file paths under `src/Components/` and acceptance criteria
41
-
42
- ### Build / export (lib-impl)
43
-
44
- - [ ] index.ts export, build, version bump if publishing
45
-
46
- ### Tests
47
-
48
- - [ ] Jest test files and coverage targets
49
-
50
- ## Risks / assumptions
51
-
52
- ## Rules
53
-
54
- - Never write production code
55
- - Save approved plan to .cursor/plans/current.md
56
- - End with: Ready for implementation — list which agents run next
@@ -1,31 +0,0 @@
1
- ---
2
- name: test-create
3
- description: >-
4
- Writes Jest tests for completed component work. Use in @task phase 3a
5
- after fe-impl, before test-exec.
6
- ---
7
-
8
- You are the test-create agent for **Pixelize Design Library** (Micro-Components).
9
-
10
- ## When invoked
11
-
12
- 1. Read the plan from .cursor/plans/current.md
13
- 2. Read fe-impl output summary
14
- 3. Read existing `*.test.tsx` files to match conventions
15
-
16
- ## Coverage required
17
-
18
- - Happy path render
19
- - Minimum 2 edge cases (empty, disabled, error props)
20
- - 1 regression test per bugfix
21
-
22
- ## Output
23
-
24
- - Tests added/updated: file paths and what each covers
25
- - Run command: `npm test` from Micro-Components root
26
-
27
- ## Rules
28
-
29
- - Never change production code
30
- - Never commit
31
- - Follow existing Jest + Testing Library patterns
@@ -1,26 +0,0 @@
1
- ---
2
- name: test-exec
3
- description: >-
4
- Runs Jest tests after test-create. Use in @task phase 3b.
5
- ---
6
-
7
- You are the test-exec agent for **Pixelize Design Library** (Micro-Components).
8
-
9
- ## When invoked
10
-
11
- 1. Read test-create output
12
- 2. Run `npm test` from Micro-Components root
13
- 3. Report pass/fail with relevant failure output
14
-
15
- ## Output
16
-
17
- - Test run result: pass / fail
18
- - Failed test names and error snippets if any
19
- - Recommendation: proceed to review or fix
20
-
21
- ## Rules
22
-
23
- - Never commit
24
- - Never modify production code unless fixing test failures is in scope
25
- - Never disable, skip, or comment out tests to make them pass
26
- - Never change test assertions to match wrong behavior — fix the implementation
@@ -1 +0,0 @@
1
- REPO_HINT="/ → task (this repo) or / → design-task"
@@ -1,71 +0,0 @@
1
- #!/usr/bin/env bash
2
- # Block first message without / task skill; flag session for status-line warning. Zero tokens.
3
- set -euo pipefail
4
-
5
- STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
6
- SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
7
- # shellcheck disable=SC1091
8
- source "$SCRIPT_DIR/task-hint.env"
9
-
10
- INPUT=$(cat)
11
- PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
12
- CONV_ID=$(echo "$INPUT" | jq -r '.conversation_id // empty')
13
-
14
- if [[ -z "$CONV_ID" ]]; then
15
- echo '{"continue":true}'
16
- exit 0
17
- fi
18
-
19
- has_skill() {
20
- echo "$PROMPT" | grep -qiE '^\s*/(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'
21
- }
22
-
23
- ensure_state_file() {
24
- mkdir -p "$(dirname "$STATE_FILE")"
25
- [[ -f "$STATE_FILE" ]] || echo '{}' >"$STATE_FILE"
26
- }
27
-
28
- update_state() {
29
- local first_nudge="$1"
30
- local chatting="$2"
31
- ensure_state_file
32
- local tmp
33
- tmp=$(mktemp)
34
- jq --arg id "$CONV_ID" \
35
- --argjson first "$first_nudge" \
36
- --argjson chatting "$chatting" \
37
- '.[$id] = {first_nudge_done: $first, chatting_without_skill: $chatting}' \
38
- "$STATE_FILE" >"$tmp" && mv "$tmp" "$STATE_FILE"
39
- }
40
-
41
- if has_skill; then
42
- if [[ -f "$STATE_FILE" ]] && jq -e --arg id "$CONV_ID" '.[$id]' "$STATE_FILE" >/dev/null 2>&1; then
43
- update_state true false
44
- fi
45
- echo '{"continue":true}'
46
- exit 0
47
- fi
48
-
49
- ensure_state_file
50
- FIRST_DONE=$(jq -r --arg id "$CONV_ID" '.[$id].first_nudge_done // false' "$STATE_FILE")
51
-
52
- if [[ "$FIRST_DONE" != "true" ]]; then
53
- update_state true false
54
- MSG="━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
55
- NO TASK SKILL LOADED
56
- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
57
-
58
- You are chatting WITHOUT a pipeline skill.
59
-
60
- For feature / bugfix work, use the / menu first:
61
- ${REPO_HINT}
62
-
63
- Then type your goal in the SAME input (do not type the skill name).
64
-
65
- Send this message AGAIN to continue without a skill."
66
- jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
67
- exit 0
68
- fi
69
-
70
- update_state true true
71
- echo '{"continue":true}'
@@ -1,31 +0,0 @@
1
- #!/usr/bin/env bash
2
- # Blocks plain-text task skill names (not / menu picks). Zero API tokens.
3
- set -euo pipefail
4
-
5
- SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
6
- # shellcheck disable=SC1091
7
- source "$SCRIPT_DIR/task-hint.env"
8
-
9
- INPUT=$(cat)
10
- PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
11
-
12
- # Menu picker embeds "/tickets-task ..." in prompt; attachments stay empty.
13
- # Only block plain-text mistakes: skill name at start without a leading slash.
14
- if echo "$PROMPT" | grep -qiE '^\s*@?(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'; then
15
- MSG="⚠️ TASK PIPELINE NOT ACTIVE
16
-
17
- You typed a task command as plain text. The skill was NOT loaded.
18
-
19
- To run the pipeline:
20
- 1. Click the chat input
21
- 2. Type / and pick the skill from the menu
22
- 3. Send your goal
23
-
24
- For this repo use: ${REPO_HINT}
25
-
26
- Do not type task skill names in the message body — use the / menu picker."
27
- jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
28
- exit 0
29
- fi
30
-
31
- echo '{"continue":true}'
@@ -1,13 +0,0 @@
1
- {
2
- "version": 1,
3
- "hooks": {
4
- "beforeSubmitPrompt": [
5
- {
6
- "command": ".cursor/hooks/task-slash-guard.sh"
7
- },
8
- {
9
- "command": ".cursor/hooks/task-skill-nudge.sh"
10
- }
11
- ]
12
- }
13
- }
@@ -1,16 +0,0 @@
1
- # Account Management
2
-
3
- ## Purpose
4
-
5
- Account/admin-facing components: UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, OrgSwitcher, UpgradeButton.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/UserDetails/`, `RolesPermission/`, `CustomModulesTable/`, `SignInActivityTable/`, `OrganizationDetails/`, `OrgSwitcher/`, `UpgradeButton/`
10
- - Tests: `UserDetails.test.tsx`, `RolesPermission.test.tsx`, `CustomModulesTable.test.tsx`, `SignInActivityTable.test.tsx`, `OrganizationDetails.test.tsx`
11
-
12
- ## Key rules
13
-
14
- - UserDetails, RolesPermission, CustomModulesTable, OrganizationDetails bundle their own action modals (Add/Edit/Delete/ChangeRole) in the same folder
15
- - Each exports typed Props/Labels from `<Name>Props.tsx` via `src/index.ts` — keep props API-generic, no CRM/API logic in the library
16
- - Labels are injectable for i18n; consumers pass data and handlers (props in, events out)
@@ -1,13 +0,0 @@
1
- # Buttons
2
-
3
- ## Purpose
4
-
5
- Button, ButtonGroupIcon, Buttons variants.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Button/`, `ButtonGroupIcon/`, `Buttons/`
10
-
11
- ## Key rules
12
-
13
- - Match Chakra button theming via design tokens
@@ -1,13 +0,0 @@
1
- # Cards
2
-
3
- ## Purpose
4
-
5
- Card, PaymentCard, ProfileCard, ProductCard, ProductDetails.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Card/`, `Card/PaymentCard/`, `ProfileCard/`, `ProductCard/`, `ProductDetails/`
10
-
11
- ## Key rules
12
-
13
- - ProfileCard has Header/Body/Footer subcomponents
@@ -1,13 +0,0 @@
1
- # Charts
2
-
3
- ## Purpose
4
-
5
- Apexcharts wrappers: Bar, Line, Pie, Polar.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Apexcharts/ApexBarChart/`, `ApexLineChart/`, `ApexPieChart/`, `ApexPolarCharts/`
10
-
11
- ## Key rules
12
-
13
- - react-apexcharts; colors from theme chart tokens
@@ -1,13 +0,0 @@
1
- # Common Helpers
2
-
3
- ## Purpose
4
-
5
- Internal shared helpers under `Components/Common/` — not all exported from index.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Common/` — ErrorComponent, FormLabel, etc.
10
-
11
- ## Key rules
12
-
13
- - Internal use by other components; export only if needed publicly
@@ -1,13 +0,0 @@
1
- # Contact & Email
2
-
3
- ## Purpose
4
-
5
- ContactForm, VerifyEmailOtp (EmailCards).
6
-
7
- ## Key paths
8
-
9
- - `src/Components/ContactForm/`, `EmailCards/VerifyEmailOtp/`
10
-
11
- ## Key rules
12
-
13
- - OTP flow UI only — API wiring in consumer apps
@@ -1,20 +0,0 @@
1
- # Data Display
2
-
3
- ## Purpose
4
-
5
- Tag, Timeline, Reorder, Divider, Trail.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Tag/` — `Tag.tsx`, `TagProps.ts`, `Tag.styles.tsx` (registered in `Theme/componentStyles.ts`)
10
- - `Timeline/`, `Reorder/`, `Divider/`, `Trail/`
11
- - Demo: `src/Pages/tag.tsx`
12
-
13
- ## Key rules
14
-
15
- - Timeline: each event card renders its manual notes from `event.notes` (`TimelineNote[]` — `log_note_id`, `title`, `note`, `attachments[]`, `created_by`, `created_at`). Adding a note is event-scoped via the per-card "Add note" button → `onAddNote(note, title, files, event, index)`; the consumer persists it against `event.logs_id` and re-supplies it back in `event.notes`. Attachments show as links opening `attachment.url`.
16
- - Timeline notes support edit + delete: hovering a note shows edit/delete icons → `onEditNote(logNoteId, note, title, files, event, index)` (inline `NoteTextArea`) and `onDeleteNote(logNoteId, event, index)` (consumer owns any confirm dialog). Loading props: `addNoteLoading`/`editNoteLoading` keep the editor open with a Save spinner until the request resolves (then auto-close); `deletingNoteId` shows a spinner on the note being deleted. With no loading props wired, the add editor closes immediately on submit (back-compat).
17
- - Trail includes editable cell demos
18
- - Tag styling lives in `Tag.styles.tsx` (Chakra component theme), not hardcoded in `Tag.tsx`
19
- - Tag sizes: `xs | sm | md | lg`; variants: `solid | outline | subtle`
20
- - 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
@@ -1,14 +0,0 @@
1
- # Feedback
2
-
3
- ## Purpose
4
-
5
- Loading, Skeletons, ProgressBar, Notification, FeedbackForm.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Loading/`, `Skeletons/`, `ProgressBar/`, `Notification/`, `FeedbackForm/`
10
- - `src/services/feedback.ts`
11
-
12
- ## Key rules
13
-
14
- - FeedbackForm may POST to account API in consumer apps — keep props generic
@@ -1,13 +0,0 @@
1
- # Form
2
-
3
- ## Purpose
4
-
5
- FormWrapper — shared form layout wrapper for entity forms in CRM apps.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Form/FormWrapper`
10
-
11
- ## Key rules
12
-
13
- - Used with smart forms in crm-frontend; keep generic props
@@ -1,13 +0,0 @@
1
- # Basic Inputs
2
-
3
- ## Purpose
4
-
5
- TextInput, PhoneNumberInput, InputTextArea, NoteTextArea, NumberInput, PinInput, PinInputs.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Input/`, `InputTextArea/`, `NoteTextArea/`, `NumberInput/`, `PinInput/`, `PinInputs/`
10
-
11
- ## Key rules
12
-
13
- - InputSwitch in `Input/Switch/`
@@ -1,20 +0,0 @@
1
- # Date & Files
2
-
3
- ## Purpose
4
-
5
- ThemeDatePicker (Single/Range/Time variants), FileUpload, FileUploader, Editor (jodit-react).
6
-
7
- ## Key paths
8
-
9
- - `src/Components/DatePicker/` — `ThemeDatePicker.tsx` (public entry), `SingleDatePicker.tsx`, `RangeDatePicker.tsx`, `TimePicker.tsx`, `TimeOnlyPicker.tsx`, `CalendarPanel.tsx`
10
- - `src/Components/FileUpload/`, `FileUploader/`, `Editor/`
11
-
12
- ## Key rules
13
-
14
- - DatePicker themed for brand tokens
15
- - Masked-input blur must not discard a valid value. `isMaskComplete()` only recognises numeric/`a` tokens, so text month formats (e.g. `MMM d, yyyy`) never look "complete" — `handleInputBlur`/`handleInputFocus` therefore keep any value that `parseValidatedValue()` can parse to a valid date, and only `requestClose(null)` (clear) on empty/unparseable input. The Clear button and emptied-mask paths remain the explicit ways to clear. Regression: `SingleDatePicker.blur.test.tsx`.
16
-
17
- ## Migration notes
18
-
19
- - DatePicker public export moved: `DatePicker/DatePicker` → `DatePicker/ThemeDatePicker` (exported as `DatePicker` from `src/index.ts`)
20
- - Split into Single/Range/Time picker variants under the same folder
@@ -1,15 +0,0 @@
1
- # Select & Search
2
-
3
- ## Purpose
4
-
5
- Select, SearchSelect, SelectSearch, MultiSelect, Dropdown, Search.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Select/`, `SearchSelect/`, `SelectSearch/`, `MultiSelect/`, `Dropdown/`, `Search/`
10
-
11
- ## Key rules
12
-
13
- - SearchSelect has performance tests; virtualize for large lists
14
- - Dropdown and SearchSelect main options menu are portaled to `<body>` (`position: fixed`) and clamp to the viewport — right-align/flip above when near edges
15
- - `insideSelect` prefix: mutually exclusive with main dropdown; menu uses `position: fixed`, flips above/below based on viewport space, and re-anchors on scroll/resize; supports `placeholder` when no value
@@ -1,13 +0,0 @@
1
- # Toggles
2
-
3
- ## Purpose
4
-
5
- Checkbox, RadioButton, Switch, Slider, Toggle/TableToggle.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Checkbox/`, `RadioButton/`, `Switch/`, `Slider/`, `Toggle/`
10
-
11
- ## Key rules
12
-
13
- - RadioButtonGroup for grouped radios
@@ -1,14 +0,0 @@
1
- # Kanban
2
-
3
- ## Purpose
4
-
5
- KanbanBoard with drag-and-drop columns and KanbanActions.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/KanbanBoard/`, `KanbanActions/`
10
- - Tests: `KanbanBoard.test.tsx`, `AccountCard.test.tsx`
11
-
12
- ## Key rules
13
-
14
- - Uses @hello-pangea/dnd; MeasuredItem for layout
@@ -1,103 +0,0 @@
1
- # Layout & Navigation
2
-
3
- ## Purpose
4
-
5
- Accordion, Breadcrumbs, NavigationBar, SideBar, Header, Drawer, FilterSidebar.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Accordion/`, `Breadcrumbs/`, `NavigationBar/`, `SideBar/`, `Header/`, `Drawer/`, `FilterSidebar/`
10
-
11
- ## Key rules
12
-
13
- - SideBar/Header have sub-`components/` folders
14
- - Used by crm-frontend, account-frontend sidebars
15
-
16
- ## SideBar — responsive overlay (< lg / 992px)
17
-
18
- At/above `lg` the SideBar is unchanged: inline, sticky, with the collapse/mini-rail
19
- (`toggle`). Below `lg` it becomes a slide-in **overlay** above the content (it leaves
20
- layout flow, so content stays full-width — not shrunk):
21
-
22
- - `mobileOpen?: boolean` + `onMobileClose?: () => void` props drive the overlay. Wire
23
- `mobileOpen` to the NavigationBar hamburger (`sideBarToggole` / `onSideBarToggole`).
24
- - Overlay is always expanded (collapse/mini-rail is desktop-only and hidden < lg). The
25
- header's trailing control becomes a Close (X) instead of the collapse chevron.
26
- - Dismiss: backdrop scrim click, **Esc**, the Close button, or **swipe-left** on the
27
- panel. Body scroll is locked while open; panel exposes `role="dialog"`/`aria-modal`.
28
- - NavigationBar hamburger now shows below `lg` (was `< md`); its panel icon is
29
- state-aware (`PanelLeftClose` open / `PanelRightClose` closed).
30
- - The overlay panel has **square edges** (no border radius).
31
- - Overlay panel width = `OVERLAY_WIDTH` (**14.7rem** / 235px — a touch wider than the
32
- inline expanded 13rem for touch), capped by `maxW: 88vw` on very small screens.
33
-
34
- Breakpoint, scrim/slide, and z-index are Chakra responsive props (no JS flash) when
35
- `mobileNav` is off; the breakpoint is read once via `useBreakpointValue({ base: true, lg: false })`.
36
-
37
- ## SideBar — Hide/Show (mobile navbar on big screens)
38
-
39
- A footer **Hide/Show** toggle (next to Collapse) switches the navbar *presentation*
40
- between the docked desktop sidebar and the mobile-style overlay — at **any** width, so
41
- desktop users can get the full-screen content experience. It is a layout switch, **not**
42
- a close: toggling never hides the navigation.
43
-
44
- - `mobileNav?: boolean` forces overlay presentation regardless of breakpoint:
45
- `overlay = (below lg) || mobileNav`. `onToggleMobileNav?: () => void` backs the
46
- footer control (render the control only when provided).
47
- - Footer control: docked → segmented **Collapse | Hide**; desktop mobile-nav overlay →
48
- **Show** (return to docked). Pure below-`lg` overlay shows no navbar-mode control.
49
- - Wire so entering mobile-nav also opens the overlay (sidebar stays visible) and leaving
50
- docks it — see `App.tsx`. NavigationBar `forceSideBarToggle` shows the hamburger at all
51
- widths while `mobileNav` is on.
52
- - Selecting a **leaf** menu item in overlay mode auto-closes the overlay (content returns
53
- to full-screen); submenu **parents** only expand and do not close it.
54
-
55
- ## Persisting sidebar choices — `useSidebarPrefs`
56
-
57
- Opt-in hook (`src/Hooks/useSidebarPrefs.ts`, exported from `index.ts`) that persists the
58
- user's **explicit** layout choices to `localStorage` so they survive reload/restart —
59
- without it, `mobileNav`/collapse reset to desktop default on every mount.
60
-
61
- - Persists `{ mobileNav, collapsed, mobileOpen }` so the sidebar restores to **exactly**
62
- the same state on refresh / new session (mode, mini-rail, and whether the drawer is
63
- open). It deliberately does **not** persist the `lg` breakpoint (viewport-driven, must
64
- stay live).
65
- - SSR-safe (`typeof window` guards); corrupt/invalid stored values fall back to defaults
66
- per field; `setItem` failures (private mode / quota) no-op without throwing.
67
- - API: state `{ mobileNav, collapsed, mobileOpen }`; setters `setMobileNav / setCollapsed
68
- / setMobileOpen`; toggles `toggleMobileNav / toggleCollapsed / toggleMobileOpen`; plus
69
- **composed handlers** `onToggleMobileNav` (flips navbar mode **and** syncs the drawer)
70
- and `closeMobile`. Options: `storageKey` (default `pixelize:sidebar-prefs:v1`, versioned)
71
- and `defaults`.
72
- - **Consumer adoption** — map the returned values straight onto `SideBar` + `NavBar`; the
73
- composed handlers mean apps don't re-implement the navbar-mode/drawer behavior:
74
-
75
- ```tsx
76
- const sb = useSidebarPrefs();
77
- <SideBar
78
- toggle={sb.collapsed} changeToggle={sb.toggleCollapsed}
79
- mobileNav={sb.mobileNav} onToggleMobileNav={sb.onToggleMobileNav}
80
- mobileOpen={sb.mobileOpen} onMobileClose={sb.closeMobile}
81
- /* ...menus, user, etc. */
82
- />
83
- <NavBar
84
- sideBarToggole={sb.mobileOpen} onSideBarToggole={sb.toggleMobileOpen}
85
- forceSideBarToggle={sb.mobileNav} /* ...nav props */
86
- />
87
- ```
88
-
89
- Per-app override: pass `storageKey` if an app needs a separate persisted namespace.
90
- See `App.tsx` for the live reference wiring.
91
-
92
- ### Known gaps
93
-
94
- - `SecondaryBar` keeps its current side-by-side stacking inside the overlay — revisit if
95
- it feels cramped on very narrow screens.
96
- - Consumer apps (crm/account/…) must pass `mobileOpen`/`onMobileClose` to adopt overlay
97
- mode, and adopt `useSidebarPrefs` to get persistence; until then they get the unchanged
98
- inline sidebar with non-persisted state.
99
- - Persisted `collapsed` can be transiently overridden by SideBar's existing "auto-collapse
100
- when a secondary panel is active" effect — pre-existing behavior, not regressed.
101
- - Persisting `mobileOpen` means a real phone (`belowLg`) that was left with the drawer open
102
- reloads with it open (covering content until a leaf tap auto-closes it). Accepted to honor
103
- "restore exactly the same state"; revisit with a `belowLg` gate if it proves annoying.
@@ -1,21 +0,0 @@
1
- # Overlays
2
-
3
- ## Purpose
4
-
5
- Modal, AlertDialog, ToolTip / OverflowToolTip, Toaster (+ `useToaster` hook).
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Modal/`, `AlertDialog/`, `ToolTip/`, `Toaster/`
10
-
11
- ## Key rules
12
-
13
- - Modal exports ModalHeader, ModalBody, ModalFooter subcomponents
14
- - **ToolTip `overflowOnly`:** pass `overflowOnly` to show the tooltip **only**
15
- when the child text is actually truncated (ellipsis active) — no tooltip when
16
- it fits. The child must be the single clamping element (e.g. `Text` with
17
- `noOfLines`); its ref is managed internally. Works for single- and multi-line
18
- clamps and combines with `isDisabled`. **`OverflowToolTip`** is sugar for
19
- `<ToolTip overflowOnly>`. Powered by the `useIsTruncated` hook (see
20
- `utils-hooks`). Inert unless `overflowOnly` is set — no measurement/observer
21
- for ordinary tooltips, and it never measures on hover/scroll.
@@ -1,15 +0,0 @@
1
- # Playground
2
-
3
- ## Purpose
4
-
5
- Vite dev playground — demo pages not published to npm.
6
-
7
- ## Key paths
8
-
9
- - `src/Pages/` (49 demo files), `src/App.tsx`, `src/Layout.tsx`
10
- - `npm start` launches playground
11
-
12
- ## Key rules
13
-
14
- - Demo API calls to dev.pixelizetech.com are playground-only
15
- - Not included in `dist/` publish output
@@ -1,15 +0,0 @@
1
- # Table
2
-
3
- ## Purpose
4
-
5
- Data table with virtualization, filters, pagination, column management.
6
-
7
- ## Key paths
8
-
9
- - `src/Components/Table/`, `Table/components/`, `Table/settings/`, `Table/filters/`, `Table/hooks/`
10
- - Tests: `components/TableBody.virtualize.test.tsx`, `settings/ManageColumns.test.tsx`
11
-
12
- ## Key rules
13
-
14
- - Core CRM list UI — high change frequency
15
- - `src/Utils/table.ts` helpers
@@ -1,15 +0,0 @@
1
- # Theme
2
-
3
- ## Purpose
4
-
5
- Eight brand presets (Default, Dark, Emerald, Meadow, Radiant, Rosewood, Skyline, Slate), `useCustomTheme`, `withTheme` HOC, token builders.
6
-
7
- ## Key paths
8
-
9
- - `src/Theme/`, `src/withTheme.tsx`
10
- - Export: `useCustomTheme`, `ThemesList`, `withTheme`
11
-
12
- ## Key rules
13
-
14
- - Consumers wrap app with `withTheme`; use theme tokens not hardcoded colors
15
- - Chart colors from theme via `chartColorsFromTheme`
@@ -1,17 +0,0 @@
1
- # Types & Exports
2
-
3
- ## Purpose
4
-
5
- Public API surface — semver-sensitive.
6
-
7
- ## Key paths
8
-
9
- - `src/index.ts` (~80 value exports + typed Props groups for UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails)
10
- - `src/types/`
11
- - `src/withTheme.tsx`
12
-
13
- ## Key rules
14
-
15
- - Every public component must be exported here
16
- - Breaking export changes require major version bump
17
- - Run `npm run build` after export changes