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.
- package/dist/Components/Toaster/Toaster.d.ts.map +1 -1
- package/dist/Components/Toaster/Toaster.js +54 -12
- package/dist/Components/Toaster/ToasterProps.d.ts +7 -0
- package/dist/Components/Toaster/ToasterProps.d.ts.map +1 -1
- package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.d.ts +16 -0
- package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.d.ts.map +1 -0
- package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js +83 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts +15 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts.map +1 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindow.js +40 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts +72 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts.map +1 -0
- package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.js +2 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -2
- package/package.json +5 -1
- package/.cursor/TASK-SETUP.md +0 -43
- package/.cursor/agents/be-impl.md +0 -37
- package/.cursor/agents/fe-impl.md +0 -39
- package/.cursor/agents/task-plan.md +0 -56
- package/.cursor/agents/test-create.md +0 -31
- package/.cursor/agents/test-exec.md +0 -26
- package/.cursor/hooks/task-hint.env +0 -1
- package/.cursor/hooks/task-skill-nudge.sh +0 -71
- package/.cursor/hooks/task-slash-guard.sh +0 -31
- package/.cursor/hooks.json +0 -13
- package/.cursor/modules/account-management/MODULE.md +0 -16
- package/.cursor/modules/buttons/MODULE.md +0 -13
- package/.cursor/modules/cards/MODULE.md +0 -13
- package/.cursor/modules/charts/MODULE.md +0 -13
- package/.cursor/modules/common/MODULE.md +0 -13
- package/.cursor/modules/contact-auth/MODULE.md +0 -13
- package/.cursor/modules/data-display/MODULE.md +0 -20
- package/.cursor/modules/feedback/MODULE.md +0 -14
- package/.cursor/modules/form/MODULE.md +0 -13
- package/.cursor/modules/inputs-basic/MODULE.md +0 -13
- package/.cursor/modules/inputs-date-file/MODULE.md +0 -20
- package/.cursor/modules/inputs-select/MODULE.md +0 -15
- package/.cursor/modules/inputs-toggle/MODULE.md +0 -13
- package/.cursor/modules/kanban/MODULE.md +0 -14
- package/.cursor/modules/layout-navigation/MODULE.md +0 -103
- package/.cursor/modules/overlays/MODULE.md +0 -21
- package/.cursor/modules/playground/MODULE.md +0 -15
- package/.cursor/modules/table/MODULE.md +0 -15
- package/.cursor/modules/theme/MODULE.md +0 -15
- package/.cursor/modules/types-exports/MODULE.md +0 -17
- package/.cursor/modules/utility-ui/MODULE.md +0 -15
- package/.cursor/modules/utils-hooks/MODULE.md +0 -23
- package/.cursor/pixelize-task-statusline.sh +0 -64
- package/.cursor/plans/blocked/.gitkeep +0 -0
- package/.cursor/plans/current.md +0 -12
- package/.cursor/plans/done/.gitkeep +0 -0
- package/.cursor/rules +0 -31
- package/.cursor/skills/task/SKILL.md +0 -167
- package/CLAUDE.md +0 -122
- package/eslint.config.js +0 -48
- package/index.html +0 -13
- 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}'
|
package/.cursor/hooks.json
DELETED
|
@@ -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
|
-
# 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,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
|
-
# 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,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
|