pixelize-design-library 2.3.21 → 2.3.25
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/Assets/defaultLogo.tsx +30 -0
- package/dist/Components/Accordion/accordionColors.d.ts +6 -0
- package/dist/Components/Accordion/accordionColors.d.ts.map +1 -0
- package/dist/Components/Accordion/accordionColors.js +20 -0
- package/dist/Components/Editor/joditThemeVars.d.ts +21 -0
- package/dist/Components/Editor/joditThemeVars.d.ts.map +1 -0
- package/dist/Components/Editor/joditThemeVars.js +70 -0
- package/dist/Components/FilterSidebar/filterHoverStyle.d.ts +12 -0
- package/dist/Components/FilterSidebar/filterHoverStyle.d.ts.map +1 -0
- package/dist/Components/FilterSidebar/filterHoverStyle.js +14 -0
- package/dist/Components/OrganizationDetails/CreateOrgModal.js +6 -4
- package/dist/Components/OrganizationDetails/OrganizationDetails.d.ts.map +1 -1
- package/dist/Components/OrganizationDetails/OrganizationDetails.js +55 -7
- package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts +24 -14
- package/dist/Components/OrganizationDetails/OrganizationDetailsProps.d.ts.map +1 -1
- package/dist/Components/SelectV2/SelectV2.d.ts +3 -0
- package/dist/Components/SelectV2/SelectV2.d.ts.map +1 -0
- package/dist/Components/SelectV2/SelectV2.js +185 -0
- package/dist/Components/SelectV2/SelectV2Props.d.ts +67 -0
- package/dist/Components/SelectV2/SelectV2Props.d.ts.map +1 -0
- package/dist/Components/SelectV2/SelectV2Props.js +2 -0
- package/dist/Components/SideBar/sidebarAccentColors.d.ts +21 -0
- package/dist/Components/SideBar/sidebarAccentColors.d.ts.map +1 -0
- package/dist/Components/SideBar/sidebarAccentColors.js +36 -0
- package/dist/Components/Table/components/tableRowHoverStyle.d.ts +13 -0
- package/dist/Components/Table/components/tableRowHoverStyle.d.ts.map +1 -0
- package/dist/Components/Table/components/tableRowHoverStyle.js +26 -0
- package/dist/Theme/chakra/Avatar.styles.d.ts +33 -0
- package/dist/Theme/chakra/Avatar.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Avatar.styles.js +28 -0
- package/dist/Theme/chakra/Drawer.styles.d.ts +32 -0
- package/dist/Theme/chakra/Drawer.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Drawer.styles.js +26 -0
- package/dist/Theme/chakra/Menu.styles.d.ts +70 -0
- package/dist/Theme/chakra/Menu.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Menu.styles.js +50 -0
- package/dist/Theme/chakra/Modal.styles.d.ts +32 -0
- package/dist/Theme/chakra/Modal.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Modal.styles.js +26 -0
- package/dist/Theme/chakra/Popover.styles.d.ts +37 -0
- package/dist/Theme/chakra/Popover.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Popover.styles.js +30 -0
- package/dist/Theme/chakra/Slider.styles.d.ts +31 -0
- package/dist/Theme/chakra/Slider.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Slider.styles.js +25 -0
- package/dist/Theme/chakra/Switch.styles.d.ts +31 -0
- package/dist/Theme/chakra/Switch.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Switch.styles.js +24 -0
- package/dist/Theme/chakra/Tabs.styles.d.ts +43 -0
- package/dist/Theme/chakra/Tabs.styles.d.ts.map +1 -0
- package/dist/Theme/chakra/Tabs.styles.js +41 -0
- package/dist/Theme/chakra/common.web.d.ts +171 -0
- package/dist/Theme/chakra/common.web.d.ts.map +1 -0
- package/dist/Theme/chakra/common.web.js +21 -0
- package/dist/Theme/chakra/componentStyles.d.ts +240 -0
- package/dist/Theme/chakra/componentStyles.d.ts.map +1 -0
- package/dist/Theme/chakra/componentStyles.js +150 -0
- package/dist/Theme/chakra/createBrandTheme.d.ts +18 -0
- package/dist/Theme/chakra/createBrandTheme.d.ts.map +1 -0
- package/dist/Theme/chakra/createBrandTheme.js +78 -0
- package/dist/Theme/chakra/fonts.web.d.ts +42 -0
- package/dist/Theme/chakra/fonts.web.d.ts.map +1 -0
- package/dist/Theme/chakra/fonts.web.js +15 -0
- package/dist/Theme/provider/PixelizeThemeProvider.d.ts +46 -0
- package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map +1 -0
- package/dist/Theme/provider/PixelizeThemeProvider.js +124 -0
- package/dist/Theme/provider/ThemeSwitcher.d.ts +8 -0
- package/dist/Theme/provider/ThemeSwitcher.d.ts.map +1 -0
- package/dist/Theme/provider/ThemeSwitcher.js +111 -0
- package/dist/Theme/provider/colorModeStorage.d.ts +10 -0
- package/dist/Theme/provider/colorModeStorage.d.ts.map +1 -0
- package/dist/Theme/provider/colorModeStorage.js +106 -0
- package/dist/Theme/provider/index.d.ts +6 -0
- package/dist/Theme/provider/index.d.ts.map +1 -0
- package/dist/Theme/provider/index.js +9 -0
- package/dist/Theme/provider/useThemeMode.d.ts +3 -0
- package/dist/Theme/provider/useThemeMode.d.ts.map +1 -0
- package/dist/Theme/provider/useThemeMode.js +13 -0
- package/dist/Theme/tokens/brands/emerald/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/emerald/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/emerald/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/emerald/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/emerald/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/emerald/palette.light.js +135 -0
- package/dist/Theme/tokens/brands/index.d.ts +28 -0
- package/dist/Theme/tokens/brands/index.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/index.js +93 -0
- package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/lavender/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/lavender/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/lavender/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/lavender/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/lavender/palette.light.js +316 -0
- package/dist/Theme/tokens/brands/meadow/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/meadow/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/meadow/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/meadow/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/meadow/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/meadow/palette.light.js +133 -0
- package/dist/Theme/tokens/brands/radiant/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/radiant/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/radiant/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/radiant/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/radiant/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/radiant/palette.light.js +135 -0
- package/dist/Theme/tokens/brands/rosewood/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/rosewood/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/rosewood/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/rosewood/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/rosewood/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/rosewood/palette.light.js +139 -0
- package/dist/Theme/tokens/brands/skyline/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/skyline/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/skyline/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/skyline/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/skyline/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/skyline/palette.light.js +133 -0
- package/dist/Theme/tokens/brands/slate/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/slate/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/slate/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/slate/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/slate/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/slate/palette.light.js +137 -0
- package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts +7 -0
- package/dist/Theme/tokens/brands/storefront/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/storefront/palette.dark.js +13 -0
- package/dist/Theme/tokens/brands/storefront/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/storefront/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/storefront/palette.light.js +127 -0
- package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts +204 -0
- package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/zinc/palette.dark.js +204 -0
- package/dist/Theme/tokens/brands/zinc/palette.light.d.ts +375 -0
- package/dist/Theme/tokens/brands/zinc/palette.light.d.ts.map +1 -0
- package/dist/Theme/tokens/brands/zinc/palette.light.js +383 -0
- package/dist/Theme/tokens/builders/accentText.d.ts +56 -0
- package/dist/Theme/tokens/builders/accentText.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/accentText.js +92 -0
- package/dist/Theme/tokens/builders/buildBrandTokens.d.ts +16 -0
- package/dist/Theme/tokens/builders/buildBrandTokens.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/buildBrandTokens.js +33 -0
- package/dist/Theme/tokens/builders/buildDarkPalette.d.ts +23 -0
- package/dist/Theme/tokens/builders/buildDarkPalette.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/buildDarkPalette.js +282 -0
- package/dist/Theme/tokens/builders/chartColorsFromTheme.d.ts +17 -0
- package/dist/Theme/tokens/builders/chartColorsFromTheme.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/chartColorsFromTheme.js +26 -0
- package/dist/Theme/tokens/builders/color.d.ts +50 -0
- package/dist/Theme/tokens/builders/color.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/color.js +156 -0
- package/dist/Theme/tokens/builders/index.d.ts +6 -0
- package/dist/Theme/tokens/builders/index.d.ts.map +1 -0
- package/dist/Theme/tokens/builders/index.js +21 -0
- package/dist/Theme/tokens/index.d.ts +15 -0
- package/dist/Theme/tokens/index.d.ts.map +1 -0
- package/dist/Theme/tokens/index.js +30 -0
- package/dist/Theme/tokens/primitives/breakpoints.d.ts +9 -0
- package/dist/Theme/tokens/primitives/breakpoints.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/breakpoints.js +10 -0
- package/dist/Theme/tokens/primitives/index.d.ts +10 -0
- package/dist/Theme/tokens/primitives/index.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/index.js +27 -0
- package/dist/Theme/tokens/primitives/letterSpacings.d.ts +10 -0
- package/dist/Theme/tokens/primitives/letterSpacings.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/letterSpacings.js +11 -0
- package/dist/Theme/tokens/primitives/lineHeights.d.ts +19 -0
- package/dist/Theme/tokens/primitives/lineHeights.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/lineHeights.js +20 -0
- package/dist/Theme/tokens/primitives/radii.d.ts +13 -0
- package/dist/Theme/tokens/primitives/radii.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/radii.js +14 -0
- package/dist/Theme/tokens/primitives/shadows.d.ts +16 -0
- package/dist/Theme/tokens/primitives/shadows.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/shadows.js +17 -0
- package/dist/Theme/tokens/primitives/sizes.d.ts +63 -0
- package/dist/Theme/tokens/primitives/sizes.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/sizes.js +39 -0
- package/dist/Theme/tokens/primitives/space.d.ts +34 -0
- package/dist/Theme/tokens/primitives/space.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/space.js +35 -0
- package/dist/Theme/tokens/primitives/typography.d.ts +73 -0
- package/dist/Theme/tokens/primitives/typography.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/typography.js +43 -0
- package/dist/Theme/tokens/primitives/zIndices.d.ts +17 -0
- package/dist/Theme/tokens/primitives/zIndices.d.ts.map +1 -0
- package/dist/Theme/tokens/primitives/zIndices.js +18 -0
- package/dist/Theme/tokens/types.d.ts +116 -0
- package/dist/Theme/tokens/types.d.ts.map +1 -0
- package/dist/Theme/tokens/types.js +8 -0
- 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 -30
- 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,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,30 +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
|
-
- **Toaster `showToast({ actions })`:** optional `actions?: (onClose) => ReactNode`
|
|
14
|
-
renders action buttons under the message (e.g. Jira-style "View" / "Copy link").
|
|
15
|
-
The render-prop receives the toast's own `onClose` so an action can dismiss it;
|
|
16
|
-
callers style the buttons with their app theme. Prefer this over a bespoke Chakra
|
|
17
|
-
`useToast` in a consumer app — a second `useToast` renders into a *different* toast
|
|
18
|
-
portal that a `Modal`'s overlay/focus-trap can hide, so the toast silently never
|
|
19
|
-
appears. The toast card slides in (framer tween), pulses the status icon once on
|
|
20
|
-
mount, and **pauses the auto-dismiss countdown on hover** so the user can read and
|
|
21
|
-
click an action before it dismisses.
|
|
22
|
-
- Modal exports ModalHeader, ModalBody, ModalFooter subcomponents
|
|
23
|
-
- **ToolTip `overflowOnly`:** pass `overflowOnly` to show the tooltip **only**
|
|
24
|
-
when the child text is actually truncated (ellipsis active) — no tooltip when
|
|
25
|
-
it fits. The child must be the single clamping element (e.g. `Text` with
|
|
26
|
-
`noOfLines`); its ref is managed internally. Works for single- and multi-line
|
|
27
|
-
clamps and combines with `isDisabled`. **`OverflowToolTip`** is sugar for
|
|
28
|
-
`<ToolTip overflowOnly>`. Powered by the `useIsTruncated` hook (see
|
|
29
|
-
`utils-hooks`). Inert unless `overflowOnly` is set — no measurement/observer
|
|
30
|
-
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
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
# Utility UI
|
|
2
|
-
|
|
3
|
-
## Purpose
|
|
4
|
-
|
|
5
|
-
Generic standalone UI helpers: CopyButton, ScrollToTop, LazyWrapper, MoreItems, EmptyState, PdfViewer, FilePreview, FieldSelectModal, ProfilePhotoViewer, StageProgress.
|
|
6
|
-
|
|
7
|
-
## Key paths
|
|
8
|
-
|
|
9
|
-
- `src/Components/CopyButton/`, `ScrollToTop/`, `LazyWrapper/`, `MoreItems/`, `EmptyState/`, `PdfViewer/`, `FilePreview/`, `FieldSelectModal/`, `ProfilePhotoViewer/`, `StageProgress/`
|
|
10
|
-
|
|
11
|
-
## Key rules
|
|
12
|
-
|
|
13
|
-
- FilePreview also exports `FilePreviewTrigger`; StageProgress also exports `StageItem` (StepperStage is internal)
|
|
14
|
-
- LazyWrapper wraps lazy/Suspense loading; ScrollToTop is a scroll-position helper — keep them framework-agnostic (props in, events out)
|
|
15
|
-
- Single-file components (CopyButton, ScrollToTop, LazyWrapper, PdfViewer, FieldSelectModal) have no colocated Props file — types are inline
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
# Utils & Hooks
|
|
2
|
-
|
|
3
|
-
## Purpose
|
|
4
|
-
|
|
5
|
-
Shared utilities and hooks: debounce, table helpers, preferences, ref merging,
|
|
6
|
-
truncation detection.
|
|
7
|
-
|
|
8
|
-
## Key paths
|
|
9
|
-
|
|
10
|
-
- `src/Utils/table.ts`, `src/Utils/mergeRefs.ts`, `src/Hooks/usePreferences.ts`,
|
|
11
|
-
`src/Hooks/useIsTruncated.ts`, `src/services/feedback.ts`
|
|
12
|
-
|
|
13
|
-
## Key rules
|
|
14
|
-
|
|
15
|
-
- `debounce` exported from index.ts
|
|
16
|
-
- **`useIsTruncated(content?, enabled?)`** (exported) — returns `{ ref, isTruncated }`;
|
|
17
|
-
attach `ref` to a clamped element to detect real overflow (`scrollWidth/Height`
|
|
18
|
-
vs `clientWidth/Height`, single- and multi-line). Re-measures on mount, element
|
|
19
|
-
resize (`ResizeObserver`), and `content` change — never on hover/scroll. Pass
|
|
20
|
-
`enabled=false` to make it fully inert. Powers `ToolTip overflowOnly` (see
|
|
21
|
-
`overlays`).
|
|
22
|
-
- **`mergeRefs(...refs)`** (internal) — combine a caller ref with an injected one
|
|
23
|
-
when cloning an element.
|
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env bash
|
|
2
|
-
# Local status line only — never sent to the model. See .cursor/TASK-SETUP.md
|
|
3
|
-
set -euo pipefail
|
|
4
|
-
|
|
5
|
-
STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
|
|
6
|
-
|
|
7
|
-
payload=$(cat)
|
|
8
|
-
dir=$(echo "$payload" | jq -r ".cwd // .workspace.current_dir // empty")
|
|
9
|
-
session_id=$(echo "$payload" | jq -r ".session_id // empty")
|
|
10
|
-
base=$(basename "$dir")
|
|
11
|
-
|
|
12
|
-
show_no_skill_warning=false
|
|
13
|
-
if [[ -n "$session_id" && -f "$STATE_FILE" ]]; then
|
|
14
|
-
if jq -e --arg id "$session_id" '.[$id].chatting_without_skill == true' "$STATE_FILE" >/dev/null 2>&1; then
|
|
15
|
-
show_no_skill_warning=true
|
|
16
|
-
fi
|
|
17
|
-
fi
|
|
18
|
-
|
|
19
|
-
case "$base" in
|
|
20
|
-
account-frontend|account-service)
|
|
21
|
-
line1="/ → task (Account FE + BE)"
|
|
22
|
-
line2=""
|
|
23
|
-
;;
|
|
24
|
-
crm-frontend|crm-service)
|
|
25
|
-
line1="/ → task (this repo)"
|
|
26
|
-
line2="/ → crm-task (CRM FE + BE)"
|
|
27
|
-
;;
|
|
28
|
-
social-frontend|social-service)
|
|
29
|
-
line1="/ → task (this repo)"
|
|
30
|
-
line2="/ → social-task (Social FE + BE)"
|
|
31
|
-
;;
|
|
32
|
-
tickets-frontend)
|
|
33
|
-
line1="/ → task (this repo)"
|
|
34
|
-
line2="/ → tickets-task"
|
|
35
|
-
;;
|
|
36
|
-
crm-mobile)
|
|
37
|
-
line1="/ → task (this repo)"
|
|
38
|
-
line2="/ → crm-mobile-task"
|
|
39
|
-
;;
|
|
40
|
-
Micro-Components)
|
|
41
|
-
line1="/ → task (this repo)"
|
|
42
|
-
line2="/ → design-task"
|
|
43
|
-
;;
|
|
44
|
-
hrms)
|
|
45
|
-
line1="/ → task (this repo)"
|
|
46
|
-
line2="/ → hrms-task (HRMS FE + BE)"
|
|
47
|
-
;;
|
|
48
|
-
*)
|
|
49
|
-
line1="Open a Pixelize repo root for / → task"
|
|
50
|
-
line2=""
|
|
51
|
-
;;
|
|
52
|
-
esac
|
|
53
|
-
|
|
54
|
-
if [[ "$show_no_skill_warning" == "true" ]]; then
|
|
55
|
-
echo -e "\033[1;33m\033[7m ⚠ CHATTING WITHOUT TASK SKILL — use / menu ⚠ \033[0m"
|
|
56
|
-
echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
|
|
57
|
-
fi
|
|
58
|
-
|
|
59
|
-
echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
|
|
60
|
-
echo -e "\033[1;33m FEATURE WORK → $line1\033[0m"
|
|
61
|
-
if [ -n "$line2" ]; then
|
|
62
|
-
echo -e "\033[1;33m Full pipeline → $line2\033[0m"
|
|
63
|
-
fi
|
|
64
|
-
echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
|
|
File without changes
|
package/.cursor/plans/current.md
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
# Fix Kanban collapsed column reset on drag
|
|
2
|
-
|
|
3
|
-
## Problem
|
|
4
|
-
`collapsedColumns` is re-hydrated from stale `kanbanPreferencesJson` whenever `mergedColumns` changes (e.g. after drag when parent updates `data`).
|
|
5
|
-
|
|
6
|
-
## Solution
|
|
7
|
-
1. Hydrate `collapsedColumns` from preferences **once** (when prefs load and columns exist).
|
|
8
|
-
2. On `mergedColumns` change, only **prune** keys for removed columns — never re-apply saved prefs.
|
|
9
|
-
|
|
10
|
-
## Files
|
|
11
|
-
- `src/Components/KanbanBoard/KanbanBoard.tsx`
|
|
12
|
-
- `src/Components/KanbanBoard/KanbanBoard.test.tsx`
|
|
File without changes
|
package/.cursor/rules
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
## Session start
|
|
2
|
-
- Always read CLAUDE.md before starting any task
|
|
3
|
-
- Always read MODULE.md before touching a component family (`.cursor/modules/<domain>/MODULE.md`)
|
|
4
|
-
- Read one similar existing component before implementing
|
|
5
|
-
- Never invent a new pattern if one already exists
|
|
6
|
-
|
|
7
|
-
## Implementation
|
|
8
|
-
- Components live in `src/Components/<Name>/`
|
|
9
|
-
- Public API via `src/index.ts` only
|
|
10
|
-
- Demo pages in `src/Pages/` for playground — not published
|
|
11
|
-
- Never add CRM/app-specific API calls to library components
|
|
12
|
-
- Use theme tokens from `src/Theme/` — no hardcoded brand colors
|
|
13
|
-
- Add Jest tests for new behavior (`*.test.tsx`)
|
|
14
|
-
- Keep changes minimal — no scope creep
|
|
15
|
-
|
|
16
|
-
## Output quality
|
|
17
|
-
- Never create placeholder files unless explicitly asked
|
|
18
|
-
- Never use fake data, lorem ipsum, example.com, or demo seeds
|
|
19
|
-
- Never leave TODO comments — implement fully or report blocked
|
|
20
|
-
- Production-ready components with loading/error states where applicable
|
|
21
|
-
|
|
22
|
-
## Branch rules
|
|
23
|
-
- Always branch from **develop** — never from main
|
|
24
|
-
- Feature work: `feature/<domain>-<short-description>`
|
|
25
|
-
- Bug fixes: `fix/<domain>-<short-description>`
|
|
26
|
-
- Never commit directly to main
|
|
27
|
-
|
|
28
|
-
## Commit rules
|
|
29
|
-
- Never commit without explicit user confirmation
|
|
30
|
-
- Never run git push under any condition
|
|
31
|
-
- Never add Cursor co-author lines
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
name: task
|
|
3
|
-
description: >-
|
|
4
|
-
Runs the Pixelize Design Library dev pipeline: task-plan → fe-impl → test-create → test-exec → review gate → commit. Use when the user invokes @task, /task, or requests component library delivery.
|
|
5
|
-
disable-model-invocation: true
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
# Task Pipeline — Pixelize Design Library
|
|
9
|
-
|
|
10
|
-
Single library repo **Micro-Components** (`pixelize-design-library`). Module docs: `.cursor/modules/<domain>/MODULE.md`.
|
|
11
|
-
|
|
12
|
-
Run phases in order. Do not skip unless user opts out.
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
- [ ] 1. Task plan (agent: task-plan)
|
|
16
|
-
- [ ] 2. Implementation (agents: fe-impl + be-impl, parallel when both needed)
|
|
17
|
-
- [ ] 3a. Test creation (agent: test-create)
|
|
18
|
-
- [ ] 3b. Test execution (agent: test-exec)
|
|
19
|
-
- [ ] 4. Review gate (orchestrator — show diff, wait for user)
|
|
20
|
-
- [ ] 5. Commit (orchestrator only)
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
---
|
|
24
|
-
|
|
25
|
-
## Before Starting
|
|
26
|
-
|
|
27
|
-
1. Read CLAUDE.md
|
|
28
|
-
2. Confirm user goal — feat / fix / refactor / chore
|
|
29
|
-
3. Tell user which phases apply
|
|
30
|
-
|
|
31
|
-
---
|
|
32
|
-
|
|
33
|
-
## Phase 1 — Task Plan
|
|
34
|
-
|
|
35
|
-
Agent: task-plan → `.cursor/agents/task-plan.md`
|
|
36
|
-
|
|
37
|
-
- Read `.cursor/modules/<domain>/MODULE.md` for touched component families
|
|
38
|
-
- Plan saved to `.cursor/plans/current.md`
|
|
39
|
-
- If current.md already exists — read it first, user may be resuming
|
|
40
|
-
|
|
41
|
-
Gate: do not start phase 2 until plan has concrete tasks.
|
|
42
|
-
|
|
43
|
-
---
|
|
44
|
-
|
|
45
|
-
## Phase 2 — Implementation
|
|
46
|
-
|
|
47
|
-
| Plan says | Action |
|
|
48
|
-
|-----------|--------|
|
|
49
|
-
| Library only | Invoke fe-impl only |
|
|
50
|
-
| Both | Rare — fe-impl + test agents |
|
|
51
|
-
|
|
52
|
-
Pass `.cursor/plans/current.md` to each agent.
|
|
53
|
-
|
|
54
|
-
If blocked mid-task:
|
|
55
|
-
- Save progress to `.cursor/plans/blocked/<task-name>.md` with exact blocker details
|
|
56
|
-
- Stop pipeline and report to user
|
|
57
|
-
|
|
58
|
-
Gate: all required agents must report Done or Blocked before phase 3.
|
|
59
|
-
|
|
60
|
-
---
|
|
61
|
-
|
|
62
|
-
## Phase 3 — Tests
|
|
63
|
-
|
|
64
|
-
3a: test-create → `.cursor/agents/test-create.md`
|
|
65
|
-
3b: test-exec → `.cursor/agents/test-exec.md`
|
|
66
|
-
|
|
67
|
-
Jest: `npm test` from repo root.
|
|
68
|
-
|
|
69
|
-
Gate: do not proceed to review if tests failed and not explicitly waived by user.
|
|
70
|
-
|
|
71
|
-
---
|
|
72
|
-
|
|
73
|
-
## Phase 4 — Review Gate
|
|
74
|
-
|
|
75
|
-
```bash
|
|
76
|
-
git status
|
|
77
|
-
git diff
|
|
78
|
-
git diff --staged
|
|
79
|
-
git log -5 --oneline
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
Run git status/diff. STOP and wait for user approval.
|
|
83
|
-
|
|
84
|
-
```
|
|
85
|
-
CHANGES READY TO COMMIT
|
|
86
|
-
|
|
87
|
-
Backend:
|
|
88
|
-
- path/to/file — what changed
|
|
89
|
-
|
|
90
|
-
Frontend:
|
|
91
|
-
- path/to/component — what changed
|
|
92
|
-
|
|
93
|
-
Tests:
|
|
94
|
-
- path/to/test — what it covers
|
|
95
|
-
|
|
96
|
-
MODULE.md updates:
|
|
97
|
-
- path/to/MODULE.md
|
|
98
|
-
|
|
99
|
-
Excluded:
|
|
100
|
-
- none
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
STOP. Wait for: "yes" / "commit" / "looks good" / "go ahead"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
## Phase 5 — Commit
|
|
107
|
-
|
|
108
|
-
### Commit message format
|
|
109
|
-
|
|
110
|
-
```
|
|
111
|
-
<type>(<module>): <concise imperative title>
|
|
112
|
-
|
|
113
|
-
Backend:
|
|
114
|
-
- <specific change — file context>
|
|
115
|
-
|
|
116
|
-
Frontend:
|
|
117
|
-
- <specific change — file context>
|
|
118
|
-
|
|
119
|
-
Tests:
|
|
120
|
-
- <what is covered and where>
|
|
121
|
-
|
|
122
|
-
Config:
|
|
123
|
-
- <migrations, registry changes, config updates>
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Commit steps
|
|
127
|
-
|
|
128
|
-
1. Scan diff — if .env or secrets found, warn user and ask if they want to include. Commit only on confirmation.
|
|
129
|
-
2. git add relevant files — state any exclusions clearly
|
|
130
|
-
3. git commit using HEREDOC — never add Cursor attribution lines
|
|
131
|
-
4. If Cursor injects co-author lines — amend immediately if unpushed
|
|
132
|
-
5. Verify: git status + git log -1 --format=full
|
|
133
|
-
6. Show commit hash to user
|
|
134
|
-
7. Move `.cursor/plans/current.md` → `.cursor/plans/done/<YYYY-MM-DD>-<title>.md`
|
|
135
|
-
|
|
136
|
-
Never run git push under any condition.
|
|
137
|
-
|
|
138
|
-
### Commit safety
|
|
139
|
-
|
|
140
|
-
- Never --no-verify unless user explicitly requests
|
|
141
|
-
- Never force-push any branch
|
|
142
|
-
- Nothing staged → skip commit, report clearly
|
|
143
|
-
|
|
144
|
-
---
|
|
145
|
-
|
|
146
|
-
## Final Report
|
|
147
|
-
|
|
148
|
-
| Phase | Status | Notes |
|
|
149
|
-
| -------- | -------------- | --------------------------------- |
|
|
150
|
-
| 1 Plan | done / skipped | saved to .cursor/plans/current.md |
|
|
151
|
-
| 2 Impl | fe / be / both | done / blocked |
|
|
152
|
-
| 3 Tests | create / exec | pass / fail / blocked |
|
|
153
|
-
| 4 Review | approved | confirmed by user |
|
|
154
|
-
| 5 Commit | done / skipped | hash if committed |
|
|
155
|
-
|
|
156
|
-
---
|
|
157
|
-
|
|
158
|
-
## User Opt-outs
|
|
159
|
-
|
|
160
|
-
| User says | Effect |
|
|
161
|
-
| ------------- | ----------------------------------------- |
|
|
162
|
-
| "plan only" | Stop after phase 1 |
|
|
163
|
-
| "no tests" | Skip phase 3 — confirm with user first |
|
|
164
|
-
| "no commit" | Stop after phase 4 review |
|
|
165
|
-
| "commit only" | Phase 4+5 only — still show diff and wait |
|
|
166
|
-
| "skip review" | Go straight to commit — confirm with user |
|
|
167
|
-
|
package/CLAUDE.md
DELETED
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
# Pixelize Design Library — Agent Guide
|
|
2
|
-
|
|
3
|
-
Rules for AI assistants working in **Micro-Components** (npm: `pixelize-design-library`).
|
|
4
|
-
|
|
5
|
-
## 1. App name and purpose
|
|
6
|
-
|
|
7
|
-
**Pixelize Design Library** — shared React UI component library and theme system for all Pixelize frontends. Published to npm; local Vite playground demos components in `src/Pages/`.
|
|
8
|
-
|
|
9
|
-
## 2. Stack
|
|
10
|
-
|
|
11
|
-
| Layer | Technology | Version |
|
|
12
|
-
| ------------- | ----------------------------------- | -------------- |
|
|
13
|
-
| Framework | React + TypeScript | 18.3.1 / 5.9.3 |
|
|
14
|
-
| UI base | Chakra UI + Emotion + Framer Motion | 2.8.2 |
|
|
15
|
-
| Build | `tsc` → `dist/` + CSS copy | — |
|
|
16
|
-
| Dev | Vite playground | 6.2.0 |
|
|
17
|
-
| Styling | Tailwind + global CSS | 3.4.17 |
|
|
18
|
-
| Tests | Jest + Testing Library | 29.7.0 |
|
|
19
|
-
| Package | `pixelize-design-library` | 2.2.x |
|
|
20
|
-
|
|
21
|
-
Not a monorepo — single package, one `package.json`.
|
|
22
|
-
|
|
23
|
-
## 3. Repo relationship
|
|
24
|
-
|
|
25
|
-
| Repo / package | Role |
|
|
26
|
-
| --------------------------- | ------------------------------------------------- |
|
|
27
|
-
| **Micro-Components** (here) | Source of `pixelize-design-library` npm package |
|
|
28
|
-
| **crm-frontend** | Consumer — `npm run pixelize` to update |
|
|
29
|
-
| **account-frontend** | Consumer |
|
|
30
|
-
| **social-frontend** | Consumer |
|
|
31
|
-
| **tickets-frontend** | Consumer |
|
|
32
|
-
| **crm-mobile** | Consumer (native-base overlap — check mobile) |
|
|
33
|
-
| **pixelize-authenticator** | Companion auth UI package (separate repo) |
|
|
34
|
-
|
|
35
|
-
No backend API in this repo. Demo pages may call dev APIs for playground only.
|
|
36
|
-
|
|
37
|
-
## 4. Folder structure (2 levels)
|
|
38
|
-
|
|
39
|
-
```
|
|
40
|
-
Micro-Components/
|
|
41
|
-
├── package.json, tsconfig.json, vite.config.ts
|
|
42
|
-
├── src/
|
|
43
|
-
│ ├── index.ts public exports (~80)
|
|
44
|
-
│ ├── withTheme.tsx HOC wrapper
|
|
45
|
-
│ ├── Components/ 73 component families
|
|
46
|
-
│ ├── Theme/ 8 brand presets + useCustomTheme
|
|
47
|
-
│ ├── Pages/ 49 Vite demo/playground pages
|
|
48
|
-
│ ├── Utils/, Hooks/, services/, types/
|
|
49
|
-
│ └── App.tsx, Layout.tsx playground shell
|
|
50
|
-
├── dist/ publish output (gitignored)
|
|
51
|
-
└── .cursor/modules/ MODULE.md per component domain (22 domains)
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
## 5. Dev commands
|
|
55
|
-
|
|
56
|
-
```bash
|
|
57
|
-
npm start # Vite playground
|
|
58
|
-
npm run build # tsc + copy CSS → dist/
|
|
59
|
-
npm test # Jest
|
|
60
|
-
npm run test:watch
|
|
61
|
-
npm run remove # strip dev artifacts from dist before publish
|
|
62
|
-
npm run package # version patch + build + publish
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
## 6. Module / component pattern
|
|
66
|
-
|
|
67
|
-
Follow the **Table** or **KanbanBoard** pattern for complex components:
|
|
68
|
-
|
|
69
|
-
| Step | Path |
|
|
70
|
-
| ---- | ---- |
|
|
71
|
-
| Component | `src/Components/<Name>/` |
|
|
72
|
-
| Subcomponents | `src/Components/<Name>/Components/` or nested folders |
|
|
73
|
-
| Props/types | `<Name>Props.ts` or colocated types |
|
|
74
|
-
| Tests | `*.test.tsx` next to component |
|
|
75
|
-
| Stories | `*.stories.tsx` (where present) |
|
|
76
|
-
| Demo page | `src/Pages/<name>.tsx` |
|
|
77
|
-
| Public export | add to `src/index.ts` |
|
|
78
|
-
| Module doc | `.cursor/modules/<domain>/MODULE.md` |
|
|
79
|
-
|
|
80
|
-
Read `.cursor/modules/<domain>/MODULE.md` before touching a component family.
|
|
81
|
-
|
|
82
|
-
## 7. Publishing integration
|
|
83
|
-
|
|
84
|
-
- **Exports:** every public component must be exported from `src/index.ts`
|
|
85
|
-
- **Peers:** React 18, Chakra, Emotion — consumers install alongside library
|
|
86
|
-
- **Build:** `npm run build` compiles to `dist/`; never edit `dist/` directly
|
|
87
|
-
- **Version:** patch releases via `npm run package`; CI publishes on merge to `develop`
|
|
88
|
-
- **Breaking changes:** require version bump + consumer update in frontends
|
|
89
|
-
|
|
90
|
-
## 8. Checklist — adding a new component
|
|
91
|
-
|
|
92
|
-
1. Read similar component + `.cursor/modules/<domain>/MODULE.md`
|
|
93
|
-
2. Create `src/Components/<Name>/` with component + props
|
|
94
|
-
3. Add demo page in `src/Pages/` if needed
|
|
95
|
-
4. Export from `src/index.ts`
|
|
96
|
-
5. Add Jest tests (`*.test.tsx`)
|
|
97
|
-
6. Update `.cursor/modules/<domain>/MODULE.md`
|
|
98
|
-
7. Verify playground: `npm start`
|
|
99
|
-
8. After merge to develop: consumers run `npm run pixelize` in their frontend
|
|
100
|
-
|
|
101
|
-
## 9. Do
|
|
102
|
-
|
|
103
|
-
- Match existing Chakra + design token patterns in `src/Theme/`
|
|
104
|
-
- Keep components framework-agnostic where possible (props in, events out)
|
|
105
|
-
- Add tests for new behavior
|
|
106
|
-
- Use `useCustomTheme` / theme tokens — no hardcoded brand colors
|
|
107
|
-
- Branch from **feature/cursor-ai-setup** or **develop**
|
|
108
|
-
|
|
109
|
-
## 10. Don't
|
|
110
|
-
|
|
111
|
-
- Don't add app-specific business logic (CRM entities, API calls) to library components
|
|
112
|
-
- Don't break existing exports without semver major bump
|
|
113
|
-
- Don't edit `dist/` — always change `src/` and rebuild
|
|
114
|
-
- Don't skip `index.ts` export for public components
|
|
115
|
-
- Don't introduce a second component pattern without team agreement
|
|
116
|
-
- Don't commit npm tokens or `.env` secrets
|
|
117
|
-
|
|
118
|
-
## Task pipeline
|
|
119
|
-
|
|
120
|
-
- **Feature work:** invoke via **`/` menu → `task`** (not by typing `/task` in the message).
|
|
121
|
-
- Cross-repo: **`/ → design-task**`.
|
|
122
|
-
- One-time status line + hook details: [.cursor/TASK-SETUP.md](.cursor/TASK-SETUP.md).
|