@capillarytech/blaze-ui 5.20.0 → 5.22.0

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 (189) hide show
  1. package/CapAskAira/CapAiMediaGeneration/saga.js +1446 -0
  2. package/CapAskAira/CapAiMediaGeneration/saga.js.map +1 -0
  3. package/CapCollapsibleLeftNavigation/saga.js +1441 -0
  4. package/CapCollapsibleLeftNavigation/saga.js.map +1 -0
  5. package/CapLanguageProvider/actions.js +125 -0
  6. package/CapLanguageProvider/actions.js.map +1 -0
  7. package/CapLanguageProvider/constants.js +37 -0
  8. package/CapLanguageProvider/constants.js.map +1 -0
  9. package/CapLanguageProvider/reducer.js +130 -0
  10. package/CapLanguageProvider/reducer.js.map +1 -0
  11. package/CapLanguageProvider/saga.js +1457 -0
  12. package/CapLanguageProvider/saga.js.map +1 -0
  13. package/CapLanguageProvider/selector.js +186 -0
  14. package/CapLanguageProvider/selector.js.map +1 -0
  15. package/CapSupportVideosWrapper/utils.js +34 -0
  16. package/CapSupportVideosWrapper/utils.js.map +1 -0
  17. package/package.json +1 -1
  18. package/CapActionBar/README.md +0 -11
  19. package/CapAdvancedIcon/README.md +0 -185
  20. package/CapAdvancedIcon/use-cases.md +0 -44
  21. package/CapAlert/README.md +0 -144
  22. package/CapAppNotEnabled/README.md +0 -84
  23. package/CapAskAira/README.md +0 -328
  24. package/CapBanner/README.md +0 -4
  25. package/CapBlock/README.md +0 -175
  26. package/CapBorderedBox/Status.md +0 -40
  27. package/CapCSVFileUploader/README.md +0 -124
  28. package/CapCSVFileUploader/Status.md +0 -47
  29. package/CapCard/README.md +0 -85
  30. package/CapCard/Status.md +0 -41
  31. package/CapCardBox/README.md +0 -169
  32. package/CapCardBox/Status.md +0 -52
  33. package/CapCarousel/README.md +0 -190
  34. package/CapCarousel/Status.md +0 -73
  35. package/CapCheckbox/README.md +0 -254
  36. package/CapCheckbox/Status.md +0 -41
  37. package/CapColorPicker/README.md +0 -112
  38. package/CapColorPicker/Status.md +0 -52
  39. package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
  40. package/CapColoredTag/README.md +0 -167
  41. package/CapColoredTag/Status.md +0 -49
  42. package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
  43. package/CapConditionPreview/README.md +0 -40
  44. package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
  45. package/CapCustomCard/README.md +0 -182
  46. package/CapCustomCard/Status.md +0 -40
  47. package/CapCustomCarousel/Status.md +0 -69
  48. package/CapCustomCheckboxList/README.md +0 -178
  49. package/CapCustomCheckboxList/Status.md +0 -52
  50. package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
  51. package/CapCustomList/README.md +0 -117
  52. package/CapCustomList/Status.md +0 -77
  53. package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
  54. package/CapCustomSelect/README.md +0 -38
  55. package/CapDatePicker/README.md +0 -139
  56. package/CapDateRangePicker/README.md +0 -159
  57. package/CapDateTimePicker/README.md +0 -136
  58. package/CapDateTimeRangePicker/README.md +0 -243
  59. package/CapDivider/README.md +0 -122
  60. package/CapDrawer/README.md +0 -207
  61. package/CapDrawer/Status.md +0 -52
  62. package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
  63. package/CapDropdown/README.md +0 -515
  64. package/CapDropdown/Status.md +0 -45
  65. package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
  66. package/CapError/README.md +0 -88
  67. package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
  68. package/CapErrorBoundary/README.md +0 -150
  69. package/CapErrorStateIllustration/README.md +0 -222
  70. package/CapErrorStateIllustration/USE_CASES.md +0 -33
  71. package/CapExpressionEditor/README.md +0 -32
  72. package/CapForm/README.md +0 -132
  73. package/CapForm/Status.md +0 -40
  74. package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
  75. package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
  76. package/CapFormItem/README.md +0 -320
  77. package/CapFormItem/Status.md +0 -73
  78. package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
  79. package/CapGraph/README.md +0 -69
  80. package/CapGraph/USE_CASES.md +0 -66
  81. package/CapHamburgerMenu/README.md +0 -234
  82. package/CapHamburgerMenu/USE_CASES.md +0 -48
  83. package/CapHeader/Status.md +0 -41
  84. package/CapHeading/README.md +0 -220
  85. package/CapHeading/Status.md +0 -41
  86. package/CapIcon/README.md +0 -207
  87. package/CapIllustration/Status.md +0 -41
  88. package/CapImage/README.md +0 -50
  89. package/CapImportMFEComponent/README.md +0 -121
  90. package/CapInfoNote/Status.md +0 -40
  91. package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
  92. package/CapInput/README.md +0 -196
  93. package/CapInput/Status.md +0 -123
  94. package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
  95. package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
  96. package/CapLanguageProvider/README.md +0 -206
  97. package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
  98. package/CapLevelGraphRenderer/README.md +0 -123
  99. package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
  100. package/CapLink/README.md +0 -203
  101. package/CapLink/Status.md +0 -32
  102. package/CapLink/tests/CapLink.missingUseCases.md +0 -95
  103. package/CapList/README.md +0 -129
  104. package/CapList/Status.md +0 -69
  105. package/CapListLayout/README.md +0 -7
  106. package/CapLogin/README.md +0 -7
  107. package/CapMenu/README.md +0 -86
  108. package/CapModal/README.md +0 -357
  109. package/CapModal/Status.md +0 -52
  110. package/CapModal/tests/USE_CASES_GAPS.md +0 -207
  111. package/CapMultiSelect/README.md +0 -170
  112. package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
  113. package/CapMultiSelectDatePicker/README.md +0 -11
  114. package/CapNavigation/README.md +0 -72
  115. package/CapNotification/README.md +0 -228
  116. package/CapNotificationDropdown/README.md +0 -5
  117. package/CapPopover/README.md +0 -234
  118. package/CapProgress/Status.md +0 -40
  119. package/CapRadio/Status.md +0 -54
  120. package/CapRadioButton/README.md +0 -152
  121. package/CapRadioButton/Status.md +0 -70
  122. package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
  123. package/CapRadioCard/README.md +0 -161
  124. package/CapRadioCard/Status.md +0 -78
  125. package/CapRadioGroup/README.md +0 -141
  126. package/CapRadioGroup/Status.md +0 -59
  127. package/CapReorderComponent/README.md +0 -179
  128. package/CapReorderComponent/Status.md +0 -41
  129. package/CapRoadMap/README.md +0 -126
  130. package/CapRoadMap/Status.md +0 -53
  131. package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
  132. package/CapRow/README.md +0 -424
  133. package/CapSKUUploader/README.md +0 -189
  134. package/CapSKUUploader/Status.md +0 -66
  135. package/CapSecondaryTopBar/README.md +0 -7
  136. package/CapSelect/README.md +0 -243
  137. package/CapSelectFilter/README.md +0 -121
  138. package/CapShape/README.md +0 -96
  139. package/CapShape/Status.md +0 -36
  140. package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
  141. package/CapSideBar/README.md +0 -298
  142. package/CapSideBar/Status.md +0 -5
  143. package/CapSlideBox/README.md +0 -68
  144. package/CapSlider/README.md +0 -423
  145. package/CapSlider/Status.md +0 -48
  146. package/CapSlider/tests/TEST_COVERAGE.md +0 -118
  147. package/CapSnackBar/README.md +0 -222
  148. package/CapSnackBar/Status.md +0 -41
  149. package/CapSomethingWentWrong/README.md +0 -97
  150. package/CapSplit/README.md +0 -19
  151. package/CapStatisticCard/README.md +0 -138
  152. package/CapStatus/README.md +0 -148
  153. package/CapStatus/Status.md +0 -40
  154. package/CapSteps/Status.md +0 -40
  155. package/CapStepsAccordian/README.md +0 -305
  156. package/CapStepsAccordian/Status.md +0 -48
  157. package/CapSupportVideosWrapper/README.md +0 -14
  158. package/CapSwitch/README.md +0 -351
  159. package/CapTab/README.md +0 -406
  160. package/CapTab/Status.md +0 -104
  161. package/CapTab/tests/USE_CASE_GAPS.md +0 -143
  162. package/CapTabV3/ANALYSIS.md +0 -60
  163. package/CapTabV3/README.md +0 -156
  164. package/CapTabV3/Status.md +0 -52
  165. package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
  166. package/CapTable/README.md +0 -160
  167. package/CapTable/Status.md +0 -41
  168. package/CapTag/README.md +0 -16
  169. package/CapTagDropdown/README.md +0 -171
  170. package/CapTagDropdown/Status.md +0 -55
  171. package/CapTimePicker/README.md +0 -170
  172. package/CapTooltip/README.md +0 -336
  173. package/CapTooltipWithInfo/Status.md +0 -75
  174. package/CapTopBar/README.md +0 -146
  175. package/CapTree/README.md +0 -124
  176. package/CapTree/Status.md +0 -48
  177. package/CapTree/tests/STATUS.md +0 -154
  178. package/CapTreeSelect/README.md +0 -217
  179. package/CapTreeSelect/Status.md +0 -52
  180. package/CapTruncateList/README.md +0 -13
  181. package/CapUnifiedSelect/README.md +0 -40
  182. package/CapUploader/README.md +0 -313
  183. package/CapUploader/Status.md +0 -76
  184. package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
  185. package/CapUserProfile/README.md +0 -105
  186. package/CapUserProfile/Status.md +0 -95
  187. package/CapVirtualList/README.md +0 -162
  188. package/CapVirtualList/Status.md +0 -71
  189. package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
@@ -1,60 +0,0 @@
1
- # Analysis Report for CapTabV3
2
-
3
- ## 1. Antd Style Overrides Found
4
-
5
- | Line # | Old Override | Token Path | Token Value |
6
- |--------|-------------|------------|-------------|
7
- | 8 | `.ant-tabs-nav .ant-tabs-tab { padding: $CAP_SPACE_12 $CAP_SPACE_16 }` | `components.Tabs.itemPadding` | `'12px 16px'` (0.857rem 1.142rem) |
8
- | 9 | `.ant-tabs-nav .ant-tabs-tab { font-weight: $FONT_WEIGHT_MEDIUM }` | `components.Tabs.itemFontWeight` | `500` |
9
- | 10 | `.ant-tabs-nav .ant-tabs-tab { color: $FONT_COLOR_02 }` | `components.Tabs.colorText` | `#5e6c84` (already set) |
10
- | 13 | `.ant-tabs-nav .ant-tabs-tab-active { color: $FONT_COLOR_01 }` | `components.Tabs.itemActiveColor` | `#091e42` (already set) |
11
- | 16 | `.ant-tabs-nav .ant-tabs-tab:hover { color: $FONT_COLOR_01 }` | `components.Tabs.itemHoverColor` | `#091e42` (already set) |
12
- | 17 | `.ant-tabs-nav .ant-tabs-tab:hover { background-color: #faf9f4 }` | `components.Tabs.itemHoverBg` | `#faf9f4` |
13
- | 23 | `.ant-tabs-tab-disabled.ant-tabs-tab-active { color: $FONT_COLOR_03 }` | `components.Tabs.itemSelectedColorDisabled` | `#97a0af` |
14
- | 25 | `.ant-tabs-tab-disabled { color: $FONT_COLOR_04 }` | `components.Tabs.colorTextDisabled` | `#b3bac5` (needs override) |
15
- | 33 | `.ant-tabs-card .ant-tabs-tab-active { color: $FONT_COLOR_01 }` | `components.Tabs.itemSelectedColor` | `#091e42` (already set) |
16
- | 37 | `.ant-tabs-ink-bar { background-color: $CAP_G01 }` | `components.Tabs.inkBarColor` | `#091e42` (already set) |
17
-
18
- **Total overrides found**: 10
19
- **New tokens needed**: `itemPadding`, `itemFontWeight`, `itemHoverBg`, `itemSelectedColorDisabled`, `colorTextDisabled` override
20
-
21
- ## 2. API Breaking Changes
22
-
23
- **CRITICAL**: Reference `MIGRATION_CHANGELOG_TEMPLATE.md` for Ant Design prop deprecations.
24
-
25
- | Old API | New API | Affected Props | Source |
26
- |---------|---------|----------------|--------|
27
- | `tabPosition` | `tabPlacement` | `tabPosition` prop | Ant Design v6 Tabs API |
28
- | `TabPane` children | `items` prop | Internal implementation | Ant Design v6 Tabs API |
29
-
30
- **Reference**: Ant Design v6 Tabs component uses `tabPlacement` instead of `tabPosition`, and `items` prop instead of `TabPane` children.
31
-
32
- ## 3. Backward Compatibility Plan
33
-
34
- **CRITICAL**: Follow the format in `MIGRATION_CHANGELOG_TEMPLATE.md` for documenting deprecated props.
35
-
36
- | Deprecated Prop | Replacement | Fallback Logic | Documentation Source |
37
- |----------------|-------------|----------------|----------------------|
38
- | `tabPosition` | `tabPlacement` | `tabPlacement ?? tabPosition` with value mapping (`left` → `start`, `right` → `end`) | Ant Design v6 Tabs API |
39
-
40
- **Reference**: The component already implements backward compatibility for `tabPosition` prop with value mapping.
41
-
42
- ## 4. Type Definitions Needed
43
-
44
- - ✅ `CapTabV3Props` - Already exists in types.ts
45
- - ✅ `TabPaneData` - Already exists in types.ts
46
- - ✅ `DeprecatedTabPosition` - Already exists in types.ts
47
-
48
- All required types are already defined in types.ts.
49
-
50
- ## 5. DOM Structure Analysis (CRITICAL)
51
-
52
- - **Original DOM structure**: Based on current implementation, the component wraps `Tabs` in a `Row` component with className `cap-tab-v3-wrapper`
53
- - **Wrapper elements**: `Row` wrapper exists in current implementation
54
- - **Component hierarchy**: `Row` → `Tabs` (with className `cap-tab-v3`)
55
- - **Planned changes**:
56
- - Remove `Row` wrapper if it wasn't in original (need to verify original component)
57
- - Keep `Tabs` component structure
58
- - Preserve className handling
59
-
60
- **Note**: Need to verify if `Row` wrapper existed in original cap-ui-library component. If not, it should be removed to preserve exact DOM structure.
@@ -1,156 +0,0 @@
1
- # CapTabV3
2
-
3
- CapTabV3 component migrated from Ant Design v3 to v6.
4
-
5
- ## Migration Summary
6
-
7
- This component has been migrated to use Ant Design v6 APIs and design tokens.
8
-
9
- ## Breaking Changes
10
-
11
- **No breaking changes** - The component maintains **100% backward compatibility** with existing code. Deprecated Ant Design APIs (`tabPosition` prop) continue to work exactly as before. However, deprecated APIs will show console warnings in development mode and should be migrated to the new API for future compatibility.
12
-
13
- ## Deprecated Props
14
-
15
- The following Ant Design component APIs are deprecated but still supported for backward compatibility:
16
-
17
- ### `tabPosition` (Ant Design Tabs Component)
18
-
19
- - **Status:** ⚠️ Deprecated
20
- - **Ant Design Component:** Tabs
21
- - **Deprecated Prop:** `tabPosition`
22
- - **Replacement:** Use `tabPlacement` prop instead
23
- - **Migration:** Replace `tabPosition` with `tabPlacement` (note: `left` → `start`, `right` → `end`)
24
- - **Removal:** Will be removed in next major version
25
-
26
- **Before (Deprecated):**
27
-
28
- ```tsx
29
- import CapTabV3 from '@capillarytech/blaze-ui';
30
-
31
- <CapTabV3
32
- panes={panes}
33
- tabPosition="left"
34
- />
35
- ```
36
-
37
- **After (Recommended):**
38
-
39
- ```tsx
40
- import CapTabV3 from '@capillarytech/blaze-ui';
41
-
42
- <CapTabV3
43
- panes={panes}
44
- tabPlacement="start"
45
- />
46
- ```
47
-
48
- **Value Mapping:**
49
- - `left` → `start`
50
- - `right` → `end`
51
- - `top` → `top` (unchanged)
52
- - `bottom` → `bottom` (unchanged)
53
-
54
- **Note:** A deprecation warning will be shown in development mode when using `tabPosition` instead of `tabPlacement`.
55
-
56
- ### Internal Implementation: `TabPane` Component (Ant Design Tabs Component)
57
-
58
- - **Status:** ⚠️ Deprecated (Internal Implementation)
59
- - **Ant Design Component:** Tabs
60
- - **Deprecated API:** `TabPane` children pattern
61
- - **Replacement:** Ant Design v6 uses `items` prop instead
62
- - **Note:** This is an internal implementation detail. Consumers should continue using the `panes` prop as before. The component handles the conversion internally.
63
-
64
- **Consumer Impact:** None - The component internally converts `panes` prop to the new `items` format. No changes required for consumers.
65
-
66
- ## Deprecated APIs Summary
67
-
68
- | Deprecated API | Ant Design Component | Replacement | Removal Version |
69
- |----------------|---------------------|-------------|----------------|
70
- | `tabPosition` prop | Tabs | `tabPlacement` prop | Next major version |
71
- | `TabPane` children (internal) | Tabs | `items` prop (internal) | Next major version |
72
-
73
- ## Backward Compatibility
74
-
75
- - `tabPosition` prop is still accepted and automatically mapped to `tabPlacement`
76
- - A deprecation warning will be shown in development mode when using `tabPosition`
77
- - All existing code using `tabPosition` will continue to work without modifications
78
- - The component internally handles conversion from `panes` prop to Ant Design v6 `items` format
79
-
80
- ## Prop Changes
81
-
82
- | Prop | Status | Notes |
83
- |------|--------|-------|
84
- | `panes` | ✅ Unchanged | Array of tab panes with key, tab label, content, and optional disabled state |
85
- | `activeKey` | ✅ Unchanged | Controlled active tab key |
86
- | `onTabChange` | ✅ Unchanged | Callback function called when tab changes |
87
- | `className` | ✅ Unchanged | Custom CSS class name |
88
- | `tabPlacement` | ✅ New | Preferred prop name for tab placement (v6 API) |
89
- | `tabPosition` | ⚠️ Deprecated | Use `tabPlacement` instead. Still supported for backward compatibility |
90
- | All other Ant Design Tabs props | ✅ Unchanged | Passed through to underlying Tabs component |
91
-
92
- ## Migration Guide
93
-
94
- 1. **Replace `tabPosition` prop with `tabPlacement`:**
95
- ```tsx
96
- // Before
97
- <CapTabV3 panes={panes} tabPosition="left" />
98
-
99
- // After
100
- <CapTabV3 panes={panes} tabPlacement="start" />
101
- ```
102
-
103
- 2. **Update value mappings:**
104
- - `left` → `start`
105
- - `right` → `end`
106
- - `top` → `top` (unchanged)
107
- - `bottom` → `bottom` (unchanged)
108
-
109
- 3. **No changes required for `panes` prop** - The component handles internal conversion automatically.
110
-
111
- ## Usage Examples
112
-
113
- ### Basic Usage
114
-
115
- ```tsx
116
- import CapTabV3 from '@capillarytech/blaze-ui';
117
-
118
- <CapTabV3
119
- panes={[
120
- {
121
- key: '1',
122
- tab: 'Tab 1',
123
- content: <div>Content for Tab 1</div>,
124
- },
125
- {
126
- key: '2',
127
- tab: 'Tab 2',
128
- content: <div>Content for Tab 2</div>,
129
- },
130
- ]}
131
- />
132
- ```
133
-
134
- ### With Tab Placement (v6 API)
135
-
136
- ```tsx
137
- <CapTabV3
138
- panes={panes}
139
- tabPlacement="start"
140
- />
141
- ```
142
-
143
- ### Backward Compatibility
144
-
145
- ```tsx
146
- // Old API still works (deprecated)
147
- <CapTabV3 panes={panes} tabPosition="left" />
148
-
149
- // New API (recommended)
150
- <CapTabV3 panes={panes} tabPlacement="start" />
151
- ```
152
-
153
- ## References
154
-
155
- - [Ant Design Tabs Component](https://ant.design/components/tabs)
156
- - [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6)
@@ -1,52 +0,0 @@
1
- # Migration Status: CapTabV3
2
-
3
- **Last Updated**: 2026-02-11 09:28:36
4
-
5
- ## Migration Steps
6
-
7
- - [x] **Step 0**: Setup branch and remote tracking
8
- - [x] **Step 1**: Migration Prompt 1 (Main migration)
9
- - [x] **Step 1.5**: Export component in blaze-ui/components/index.ts
10
- - [x] **Step 2**: Migration Prompt 2 (Storybook support)
11
- - [x] **Step 2.5**: Verify deprecated props and prop changes (REQUIRED - enforced)
12
- - [x] **Step 3**: Migration Prompt 3 (Unit tests)
13
- - [x] **Step 4**: Migration Prompt 4 (Visual test cases)
14
- - [x] **Step 5**: Linting (ESLint)
15
- - [x] **Step 6**: Pre-build Validation
16
- - [x] **Step 7**: Build blaze-ui
17
- - [x] **Step 8**: Visual Testing
18
- - [x] **Step 9**: CSS Analysis (if mismatches found)
19
- - [x] **Step 9.5**: CSS Analysis Completed
20
- - [x] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
21
- - [x] **Step 11**: Create Pull Request
22
-
23
- ## Deprecated Props Verification
24
-
25
- _No deprecated props verification results yet._
26
-
27
- **Note**: Step 2.5 is REQUIRED and enforced.
28
- - Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
29
- - Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
30
- - Skip: If original component doesn't exist in cap-ui-library
31
- - All deprecated Ant Design props and prop changes must be documented before proceeding.
32
-
33
- ## Visual Testing Results
34
-
35
- **Last Test**: 2026-02-11 09:28:36
36
- **Maximum Mismatch**: 0%
37
-
38
- ### Mismatched Variants:
39
- -
40
-
41
-
42
- ## CSS Fixes Applied
43
-
44
- **Date**: 2026-02-06 13:45:34
45
- **Summary**: CSS fixes applied based on visual testing analysis.
46
-
47
- _See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapTabV3/css-fix-analysis.md`_
48
-
49
-
50
- ## Notes
51
-
52
- _No notes yet._
@@ -1,149 +0,0 @@
1
- # CapTabV3 Use Case Gaps Analysis
2
-
3
- ## Phase 0: Google Sheets Access
4
-
5
- **Status**: ⚠️ **Unable to access Google Sheets**
6
-
7
- - MCP Server `google_sheets` was not available
8
- - Spreadsheet ID: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`
9
- - Tab: `CapTabV3`
10
-
11
- **Action Required**: Manual review of Google Sheets to compare use cases against component implementation.
12
-
13
- ---
14
-
15
- ## Phase 1: Use Cases NOT Fulfilled by CapTabV3
16
-
17
- Based on component analysis (`index.tsx`, `types.ts`, `README.md`, `stories/CapTabV3.stories.tsx`), the following use cases are **NOT currently supported**:
18
-
19
- ### 1. **Advanced Tab Management**
20
- - ❌ **Add/Remove tabs dynamically**: No API to programmatically add or remove tabs (only `editable-card` type supports UI-based add, but no programmatic control)
21
- - ❌ **Reorder tabs**: No drag-and-drop or programmatic reordering capability
22
- - ❌ **Tab validation**: No validation before tab change (e.g., prevent navigation if form is dirty)
23
- - ❌ **Tab lifecycle hooks**: No `onBeforeChange` or `onAfterChange` callbacks
24
-
25
- ### 2. **Enhanced User Interactions**
26
- - ❌ **Keyboard navigation**: No explicit keyboard shortcuts documentation or custom handlers (relies on Ant Design defaults)
27
- - ❌ **Tab close functionality**: No close button on tabs (except `editable-card` type)
28
- - ❌ **Tab context menu**: No right-click menu for tab actions
29
- - ❌ **Tab tooltips**: No built-in tooltip support for tab labels
30
- - ❌ **Tab badges/notifications**: No badge or notification count display on tabs
31
-
32
- ### 3. **Loading and Error States**
33
- - ❌ **Loading state per tab**: No loading indicator for individual tabs
34
- - ❌ **Error state per tab**: No error display for failed tab content
35
- - ❌ **Lazy loading**: Content is conditionally rendered but not truly lazy-loaded (all content exists in DOM)
36
- - ❌ **Async tab content**: No built-in support for async content loading
37
-
38
- ### 4. **Customization and Styling**
39
- - ❌ **Custom tab icons**: No built-in icon prop support (must be included in `tab` ReactNode)
40
- - ❌ **Custom tab styling per pane**: All tabs use same styling, no per-tab className
41
- - ❌ **Custom content wrapper**: No ability to wrap content in custom containers
42
- - ❌ **Tab width control**: No min-width or max-width control for tabs
43
- - ❌ **Responsive breakpoints**: No built-in responsive behavior configuration
44
-
45
- ### 5. **Data and State Features**
46
- - ❌ **Tab persistence**: No localStorage/sessionStorage persistence for active tab
47
- - ❌ **Tab history**: No browser history integration for tab navigation
48
- - ❌ **Tab state management**: No Redux/Zustand integration helpers
49
- - ❌ **Tab analytics**: No built-in analytics tracking for tab views
50
- - ❌ **Tab metadata**: No way to attach custom metadata to tabs
51
-
52
- ### 6. **Accessibility Enhancements**
53
- - ❌ **Custom ARIA labels**: No `ariaLabel` prop for tabs (relies on Ant Design defaults)
54
- - ❌ **Screen reader announcements**: No custom announcements for tab changes
55
- - ❌ **Focus management**: No explicit focus management after tab change
56
- - ❌ **Skip navigation**: No skip-to-content link support
57
-
58
- ### 7. **Integration Features**
59
- - ❌ **Form integration**: No Form.Item wrapper or form validation integration
60
- - ❌ **Router integration**: No built-in React Router integration
61
- - ❌ **URL synchronization**: No URL hash/query param synchronization
62
- - ❌ **Deep linking**: No support for deep linking to specific tabs
63
-
64
- ### 8. **Advanced Content Features**
65
- - ❌ **Tab content animations**: No custom animations for content transitions
66
- - ❌ **Tab content caching**: No way to preserve tab content state when switching
67
- - ❌ **Nested tabs**: No built-in support for tabs within tabs
68
- - ❌ **Tab groups**: No grouping or categorization of tabs
69
-
70
- ### 9. **Performance Optimizations**
71
- - ❌ **Virtual scrolling**: No virtual scrolling for many tabs
72
- - ❌ **Tab virtualization**: No virtualization for tab list
73
- - ❌ **Memoization helpers**: No built-in memoization for tab content
74
-
75
- ### 10. **Developer Experience**
76
- - ❌ **Tab refs**: No way to get refs to individual tab elements
77
- - ❌ **Tab scroll into view**: No automatic scroll to active tab
78
- - ❌ **Tab overflow handling**: No custom overflow menu for many tabs
79
- - ❌ **Tab search/filter**: No search or filter functionality for tabs
80
-
81
- ---
82
-
83
- ## Current Component Capabilities
84
-
85
- ✅ **Supported Features**:
86
-
87
- 1. **Basic Tab Functionality**
88
- - ✅ Multiple tabs with panes array
89
- - ✅ Tab switching via click
90
- - ✅ Active tab highlighting
91
- - ✅ Disabled tabs support
92
-
93
- 2. **Controlled and Uncontrolled Modes**
94
- - ✅ Controlled mode with `activeKey`
95
- - ✅ Uncontrolled mode with internal state
96
- - ✅ `onTabChange` callback
97
-
98
- 3. **Tab Placement**
99
- - ✅ `tabPlacement` prop (top, start, end, bottom)
100
- - ✅ Backward compatibility with deprecated `tabPosition`
101
- - ✅ Automatic mapping (left → start, right → end)
102
-
103
- 4. **Ant Design Tabs Props**
104
- - ✅ Type variants (line, card, editable-card)
105
- - ✅ Size variants (small, middle, large)
106
- - ✅ Centered tabs
107
- - ✅ Animated transitions
108
- - ✅ Hide add button for editable-card
109
-
110
- 5. **Content Rendering**
111
- - ✅ Conditional rendering (only active tab content)
112
- - ✅ React element content support
113
- - ✅ String content support
114
-
115
- 6. **Styling**
116
- - ✅ Custom className support
117
- - ✅ Wrapper className
118
- - ✅ SCSS styling with design tokens
119
-
120
- 7. **Backward Compatibility**
121
- - ✅ Deprecated `tabPosition` prop support
122
- - ✅ Development mode warnings
123
- - ✅ No breaking changes
124
-
125
- ---
126
-
127
- ## Recommendations
128
-
129
- ### High Priority (Common Use Cases)
130
- 1. **Tab close functionality** - Add close button support for non-editable tabs
131
- 2. **Loading states** - Add loading indicator per tab
132
- 3. **Keyboard navigation** - Document and enhance keyboard shortcuts
133
- 4. **Tab badges** - Add notification count/badge support
134
-
135
- ### Medium Priority (Enhanced UX)
136
- 1. **Tab persistence** - Add localStorage persistence option
137
- 2. **URL synchronization** - Add hash/query param sync
138
- 3. **Custom icons** - Add icon prop support
139
- 4. **Tab validation** - Add `onBeforeChange` callback
140
-
141
- ### Low Priority (Advanced Features)
142
- 1. **Router integration** - Add React Router helpers
143
- 2. **Tab virtualization** - For many tabs scenarios
144
- 3. **Nested tabs** - Support tabs within tabs
145
- 4. **Tab analytics** - Built-in tracking
146
-
147
- ---
148
-
149
- **Note**: This analysis is based on component code review. Actual use cases from Google Sheets may reveal additional gaps or prioritize differently.
@@ -1,160 +0,0 @@
1
- # CapTable Migration: Ant Design v3 → v6
2
-
3
- ## Migration Summary
4
-
5
- CapTable has been successfully migrated from Ant Design v3 to v6. All style overrides have been moved to design tokens, and the component now uses v6-compatible APIs.
6
-
7
- ## Breaking Changes
8
-
9
- ### None
10
-
11
- CapTable does not use any deprecated Ant Design APIs. The component was already using v6-compatible prop names.
12
-
13
- ## Style Migration
14
-
15
- ### Before (SCSS Overrides)
16
-
17
- The component previously used SCSS overrides with `:global` and `.ant-` class selectors:
18
-
19
- ```scss
20
- .cap-table-v2 {
21
- :global {
22
- .ant-table {
23
- border: $border-width-1 solid $cap-g07;
24
- .ant-table-thead > tr > th {
25
- font-size: $font-size-s;
26
- line-height: $spacing-16;
27
- padding: $spacing-16 $spacing-24;
28
- }
29
- // ... more overrides
30
- }
31
- }
32
- }
33
- ```
34
-
35
- ### After (Design Tokens)
36
-
37
- All style overrides have been migrated to design tokens in `getCapThemeConfig.ts`:
38
-
39
- ```typescript
40
- Table: {
41
- borderColor: styledVars.CAP_G07 || '#dfe2e7',
42
- headerFontSize: remToPx(styledVars.FONT_SIZE_S, '0.857rem'), // 12px
43
- headerLineHeight: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
44
- headerPaddingBlock: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
45
- headerPaddingInline: remToPx(styledVars.SPACING_24, '1.714rem'), // 24px
46
- paddingBlock: remToPx(styledVars.SPACING_16, '1.142rem'), // 16px
47
- paddingInline: remToPx(styledVars.SPACING_24, '1.714rem'), // 24px
48
- }
49
- ```
50
-
51
- ### Style Overrides Migrated
52
-
53
- | Old Override | New Token Path | Value |
54
- |-------------|----------------|-------|
55
- | `.ant-table { border }` | `components.Table.borderColor` | `#dfe2e7` |
56
- | `.ant-table-thead > tr > th { font-size }` | `components.Table.headerFontSize` | `12px` |
57
- | `.ant-table-thead > tr > th { line-height }` | `components.Table.headerLineHeight` | `16px` |
58
- | `.ant-table-thead > tr > th { padding }` | `components.Table.headerPaddingBlock`<br>`components.Table.headerPaddingInline` | `16px`<br>`24px` |
59
- | `.ant-table-tbody > tr > td { padding }` | `components.Table.paddingBlock`<br>`components.Table.paddingInline` | `16px`<br>`24px` |
60
- | `.ant-table-tbody > tr > td { border-bottom }` | `components.Table.borderColor` | `#dfe2e7` |
61
-
62
- ## API Changes
63
-
64
- ### Import Statement
65
-
66
- **Before:**
67
- ```typescript
68
- import { Table } from 'antd-v5';
69
- import type { TableProps } from 'antd-v5';
70
- ```
71
-
72
- **After:**
73
- ```typescript
74
- import { Table } from 'antd';
75
- import type { CapTableProps, OffsetLimit } from './types';
76
- ```
77
-
78
- ### Loading State
79
-
80
- The `showLoader` prop now uses Ant Design's built-in `loading` prop instead of a custom CSS pseudo-element.
81
-
82
- **Before:**
83
- - Custom CSS pseudo-element (`::after`) displayed "Loading..." text
84
- - Required `:global` and `.ant-` class selectors
85
-
86
- **After:**
87
- - Uses Ant Design's native `loading` prop
88
- - Displays Ant Design's standard loading spinner
89
- - No custom CSS required
90
-
91
- ## Type Definitions
92
-
93
- All types have been extracted to `types.ts`:
94
-
95
- - `CapTableProps` - Main component props interface
96
- - `OffsetLimit` - Pagination structure interface
97
-
98
- ## Validation
99
-
100
- ### ✅ Style Validation
101
-
102
- ```bash
103
- grep -E '(:global|\.ant-)' components/CapTable/styles.scss
104
- # Expected: Empty (no matches)
105
- ```
106
-
107
- ### ✅ Theme Config Validation
108
-
109
- ```bash
110
- git diff components/utils/getCapThemeConfig.ts
111
- # Expected: Shows additions under components.Table
112
- ```
113
-
114
- ### ✅ TypeScript Compilation
115
-
116
- ```bash
117
- tsc --noEmit
118
- # Expected: Exit code 0 (no errors)
119
- ```
120
-
121
- ## Usage
122
-
123
- The component API remains unchanged:
124
-
125
- ```tsx
126
- import CapTable from '@capillarytech/blaze-ui';
127
-
128
- <CapTable
129
- id="my-table"
130
- dataSource={data}
131
- infiniteScroll
132
- showLoader={loading}
133
- offset_limit={offsetLimit}
134
- setPagination={handlePagination}
135
- scroll={{ y: 400 }}
136
- >
137
- <Table.Column title="Name" dataIndex="name" />
138
- <Table.Column title="Email" dataIndex="email" />
139
- </CapTable>
140
- ```
141
-
142
- ## Files Changed
143
-
144
- 1. ✅ `components/CapTable/index.tsx` - Updated imports, removed type definitions
145
- 2. ✅ `components/CapTable/types.ts` - New file with extracted types
146
- 3. ✅ `components/CapTable/styles.scss` - Removed all `:global` and `.ant-` selectors
147
- 4. ✅ `components/utils/getCapThemeConfig.ts` - Added Table design tokens
148
- 5. ✅ `components/CapTable/README.md` - Migration documentation (this file)
149
-
150
- ## Migration Checklist
151
-
152
- - [x] All `:global` keywords removed from styles.scss
153
- - [x] All `.ant-` class selectors removed from styles.scss
154
- - [x] Design tokens added to getCapThemeConfig.ts
155
- - [x] Import changed from `antd-v5` to `antd`
156
- - [x] Types extracted to types.ts
157
- - [x] Loading state uses Ant Design's `loading` prop
158
- - [x] TypeScript compiles without errors
159
- - [x] No breaking API changes
160
- - [x] Documentation updated
@@ -1,41 +0,0 @@
1
- # Migration Status: CapTable
2
-
3
- **Last Updated**: 2026-02-06 11:48:41
4
-
5
- ## Migration Steps
6
-
7
- - [x] **Step 0**: Setup branch and remote tracking
8
- - [x] **Step 1**: Migration Prompt 1 (Main migration)
9
- - [x] **Step 2**: Migration Prompt 2 (Storybook support)
10
- - [x] **Step 3**: Migration Prompt 3 (Unit tests)
11
- - [x] **Step 4**: Migration Prompt 4 (Visual test cases)
12
- - [x] **Step 5**: Linting (ESLint)
13
- - [x] **Step 6**: Pre-build Validation
14
- - [x] **Step 7**: Build blaze-ui
15
- - [x] **Step 8**: Visual Testing
16
- - [ ] **Step 9**: CSS Analysis (if mismatches found)
17
- - [ ] **Step 9.5**: CSS Analysis Completed
18
- - [] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
19
- - [] **Step 11**: Create Pull Request
20
-
21
- ## Visual Testing Results
22
-
23
- **Last Test**: 2026-02-06 11:48:41
24
- **Maximum Mismatch**: 3.26%
25
-
26
- ### Mismatched Variants:
27
- - default:3.15%
28
- - infinite-scroll:2.90%
29
- - bordered:2.78%
30
- - selected-rows:2.78%
31
- - long-list:2.89%
32
- - custom-scroll:3.26%
33
-
34
-
35
- ## CSS Fixes Applied
36
-
37
- _No CSS fixes applied yet._
38
-
39
- ## Notes
40
-
41
- _No notes yet._
package/CapTag/README.md DELETED
@@ -1,16 +0,0 @@
1
- # CapTag
2
-
3
- Extended version of Ant Design Tag component with custom styling and variants.
4
-
5
- ## Migration from Ant Design v3/v5 to v6
6
-
7
- This component has been migrated to Ant Design v6. No breaking API changes were required as the Tag component API remains compatible between versions.
8
-
9
-
10
- ## Breaking Changes
11
-
12
- None. The component maintains full backward compatibility with previous versions.
13
-
14
- ## New Props in v6
15
-
16
- 1. variant prop was introduced in v6 but in order to maintain backward compatibility we will consume type only.