@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,320 +0,0 @@
1
- # CapFormItem Migration Guide
2
-
3
- ## Summary
4
-
5
- CapFormItem has been migrated from `cap-ui-library` to `blaze-ui` with the following changes:
6
-
7
- - Converted from JavaScript to TypeScript
8
- - Converted from styled-components to SCSS modules
9
- - Migrated to Ant Design v6 APIs
10
- - Added TypeScript interfaces for props
11
- - Maintained backward compatibility with the existing API
12
-
13
- ## Breaking Changes
14
-
15
- **No breaking changes from cap-ui-library v8.x**
16
-
17
- The component maintains full backward compatibility with the existing API. All props from the original component continue to work as expected.
18
-
19
- ## Ant Design Component Used
20
-
21
- CapFormItem wraps the **Form.Item** component from Ant Design v6.
22
-
23
- ### Form.Item Props Status
24
-
25
- **✅ No deprecated props**: The `Form.Item` component from Ant Design v6 does not have any deprecated props according to the [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6). All Form.Item props remain valid and unchanged in v6.
26
-
27
- ## Deprecated Props
28
-
29
- **None** - There are no deprecated Ant Design props for Form.Item in Ant Design v6.
30
-
31
- The following Ant Design components have deprecated props in v6, but **Form.Item is not among them**:
32
- - Dropdown: `visible` → `open`, `overlayClassName` → `classNames.root`, `overlay` → `menu`
33
- - Tooltip: `destroyTooltipOnHide` → `destroyOnHidden`, `overlayClassName` → `classNames.root`
34
- - Tabs: `TabPane` children → `items` prop, `tabPosition` → `tabPlacement`
35
- - Alert: `message` → `title`
36
-
37
- **Note**: CapFormItem only uses `Form.Item`, which has no deprecated props in v6.
38
-
39
- ## Prop Changes
40
-
41
- ### CapFormItem Props
42
-
43
- CapFormItem extends `FormItemProps` from Ant Design v6 and adds the following props:
44
-
45
- | Prop | Type | Default | Description |
46
- |------|------|---------|-------------|
47
- | `className` | `string` | `undefined` | Additional CSS class name |
48
- | `children` | `React.ReactNode` | - | Form control children (e.g., CapInput, CapSelect) |
49
- | `label` | `string` | `undefined` | Label text for the form item |
50
- | `required` | `boolean` | `false` | Whether the field is required |
51
- | `help` | `string` | `undefined` | Help text to display below the field |
52
- | `validateStatus` | `'success' \| 'warning' \| 'error' \| 'validating'` | `undefined` | Validation status |
53
-
54
- ### All Form.Item Props Supported
55
-
56
- CapFormItem accepts all props from Ant Design's `FormItemProps`, including:
57
-
58
- - `name` - Field name for form data binding
59
- - `rules` - Validation rules
60
- - `dependencies` - Field dependencies
61
- - `shouldUpdate` - Custom update logic
62
- - `initialValue` - Initial field value
63
- - `noStyle` - Remove wrapper styles
64
- - `preserve` - Preserve field value when removed
65
- - `tooltip` - Tooltip configuration
66
- - `extra` - Extra content below the field
67
- - `hasFeedback` - Show validation feedback icon
68
- - And all other [Form.Item props](https://ant.design/components/form#formitem)
69
-
70
- ## API Changes
71
-
72
- ### No API Changes Required
73
-
74
- Since `Form.Item` has no deprecated props in Ant Design v6, no API changes are required. All existing code using CapFormItem will continue to work without modifications.
75
-
76
- ```tsx
77
- // All of these continue to work exactly as before
78
- <CapFormItem label="Username" name="username" required>
79
- <CapInput />
80
- </CapFormItem>
81
-
82
- <CapFormItem
83
- label="Email"
84
- name="email"
85
- rules={[{ type: 'email', required: true }]}
86
- help="Enter your email address"
87
- >
88
- <CapInput type="email" />
89
- </CapFormItem>
90
-
91
- <CapFormItem
92
- label="Password"
93
- name="password"
94
- validateStatus="error"
95
- help="Password must be at least 8 characters"
96
- >
97
- <CapInput type="password" />
98
- </CapFormItem>
99
- ```
100
-
101
- ## Migration Steps
102
-
103
- ### 1. Update Import
104
-
105
- ```tsx
106
- // Before (cap-ui-library)
107
- import CapFormItem from '@capillarytech/cap-ui-library/CapFormItem';
108
-
109
- // After (blaze-ui)
110
- import { CapFormItem } from '@capillarytech/blaze-ui';
111
- // or
112
- import CapFormItem from '@capillarytech/blaze-ui/CapFormItem';
113
- ```
114
-
115
- ### 2. No Prop Changes Required
116
-
117
- Since there are no deprecated props, no prop changes are needed. All existing code will continue to work.
118
-
119
- ### 3. TypeScript Support (New Benefit)
120
-
121
- If using TypeScript, you now get full type checking:
122
-
123
- ```tsx
124
- import { CapFormItem } from '@capillarytech/blaze-ui';
125
- import type { CapFormItemProps } from '@capillarytech/blaze-ui/CapFormItem';
126
-
127
- // Type-safe props
128
- const props: CapFormItemProps = {
129
- label: 'Username',
130
- name: 'username',
131
- required: true,
132
- help: 'Enter your username',
133
- validateStatus: 'success',
134
- };
135
- ```
136
-
137
- ## Examples
138
-
139
- ### Basic Usage
140
-
141
- ```tsx
142
- import { CapFormItem, CapInput } from '@capillarytech/blaze-ui';
143
-
144
- function App() {
145
- return (
146
- <CapFormItem label="Username" name="username">
147
- <CapInput placeholder="Enter username" />
148
- </CapFormItem>
149
- );
150
- }
151
- ```
152
-
153
- ### Required Field
154
-
155
- ```tsx
156
- import { CapFormItem, CapInput } from '@capillarytech/blaze-ui';
157
-
158
- function App() {
159
- return (
160
- <CapFormItem label="Email" name="email" required>
161
- <CapInput type="email" placeholder="Enter email" />
162
- </CapFormItem>
163
- );
164
- }
165
- ```
166
-
167
- ### With Validation Rules
168
-
169
- ```tsx
170
- import { CapFormItem, CapInput } from '@capillarytech/blaze-ui';
171
-
172
- function App() {
173
- return (
174
- <CapFormItem
175
- label="Password"
176
- name="password"
177
- rules={[
178
- { required: true, message: 'Please input your password!' },
179
- { min: 8, message: 'Password must be at least 8 characters' }
180
- ]}
181
- >
182
- <CapInput type="password" placeholder="Enter password" />
183
- </CapFormItem>
184
- );
185
- }
186
- ```
187
-
188
- ### With Help Text
189
-
190
- ```tsx
191
- import { CapFormItem, CapInput } from '@capillarytech/blaze-ui';
192
-
193
- function App() {
194
- return (
195
- <CapFormItem
196
- label="Email"
197
- name="email"
198
- help="We will never share your email with anyone"
199
- >
200
- <CapInput type="email" placeholder="Enter email" />
201
- </CapFormItem>
202
- );
203
- }
204
- ```
205
-
206
- ### With Validation Status
207
-
208
- ```tsx
209
- import { CapFormItem, CapInput } from '@capillarytech/blaze-ui';
210
- import { useState } from 'react';
211
-
212
- function App() {
213
- const [status, setStatus] = useState<'success' | 'error' | undefined>();
214
-
215
- return (
216
- <CapFormItem
217
- label="Username"
218
- name="username"
219
- validateStatus={status}
220
- help={status === 'error' ? 'Username is already taken' : undefined}
221
- >
222
- <CapInput
223
- placeholder="Enter username"
224
- onChange={() => setStatus(undefined)}
225
- />
226
- </CapFormItem>
227
- );
228
- }
229
- ```
230
-
231
- ### With Form Context
232
-
233
- ```tsx
234
- import { CapForm, CapFormItem, CapInput, CapButton } from '@capillarytech/blaze-ui';
235
- import { Form } from 'antd-v5';
236
-
237
- function App() {
238
- const [form] = Form.useForm();
239
-
240
- const onFinish = (values: any) => {
241
- console.log('Form values:', values);
242
- };
243
-
244
- return (
245
- <CapForm form={form} onFinish={onFinish}>
246
- <CapFormItem
247
- label="Username"
248
- name="username"
249
- rules={[{ required: true, message: 'Please input your username!' }]}
250
- >
251
- <CapInput />
252
- </CapFormItem>
253
-
254
- <CapFormItem
255
- label="Email"
256
- name="email"
257
- rules={[
258
- { required: true, message: 'Please input your email!' },
259
- { type: 'email', message: 'Please enter a valid email!' }
260
- ]}
261
- >
262
- <CapInput />
263
- </CapFormItem>
264
-
265
- <CapFormItem>
266
- <CapButton type="primary" htmlType="submit">
267
- Submit
268
- </CapButton>
269
- </CapFormItem>
270
- </CapForm>
271
- );
272
- }
273
- ```
274
-
275
- ## TypeScript Types
276
-
277
- ```typescript
278
- import type { FormItemProps } from 'antd-v5';
279
-
280
- export interface CapFormItemProps extends FormItemProps {
281
- className?: string;
282
- children?: React.ReactNode;
283
- label?: string;
284
- required?: boolean;
285
- help?: string;
286
- validateStatus?: 'success' | 'warning' | 'error' | 'validating';
287
- }
288
- ```
289
-
290
- ## Notes
291
-
292
- - The component uses SCSS modules for styling to avoid style conflicts
293
- - The component uses Ant Design v6 APIs internally (via `antd-v5` package alias)
294
- - All Form.Item props from Ant Design v6 are supported
295
- - No deprecated props need to be handled since Form.Item has none in v6
296
- - The component maintains full backward compatibility with cap-ui-library v8.x
297
-
298
- ## Verification Results
299
-
300
- ### Ant Design Component Props Verification
301
-
302
- ✅ **Form.Item Component**: No deprecated props found
303
- - Component uses: `Form.Item` from `antd-v5` (Ant Design v6)
304
- - Deprecated props check: **None** - Form.Item has no deprecated props in v6
305
- - Migration guide reference: [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6)
306
-
307
- ### Backward Compatibility
308
-
309
- ✅ **Full backward compatibility maintained**
310
- - All props from original component continue to work
311
- - No prop mapping required
312
- - No console warnings needed
313
-
314
- ### Documentation Status
315
-
316
- ✅ **Documentation complete**
317
- - README.md created with proper format
318
- - Deprecated props section documented (none found)
319
- - Migration examples provided
320
- - TypeScript types documented
@@ -1,73 +0,0 @@
1
- # Migration Status: CapFormItem
2
-
3
- **Last Updated**: 2026-01-31 19:20:17
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
- - [] **Step 7**: Build blaze-ui
17
- - [] **Step 8**: Visual Testing
18
- - [] **Step 9**: CSS Analysis (if mismatches found)
19
- - [] **Step 9.5**: CSS Analysis Completed
20
- - [] **Step 10**: Git Commit & Push to branch (pre-commit hook will run tests)
21
- - [] **Step 11**: Create Pull Request
22
-
23
- ## Deprecated Props Verification
24
-
25
- ✅ **Verification Complete** - 2026-01-31
26
-
27
- ### Ant Design Component Used
28
- - **Form.Item** from `antd-v5` (Ant Design v6)
29
-
30
- ### Deprecated Props Status
31
- ✅ **No deprecated props found**
32
-
33
- The `Form.Item` component from Ant Design v6 does **not** have any deprecated props according to the [Ant Design v6 Migration Guide](https://ant.design/docs/react/migration-v6).
34
-
35
- **Verification Results:**
36
- - ✅ Component uses: `Form.Item` from Ant Design v6
37
- - ✅ Deprecated props check: **None** - Form.Item has no deprecated props in v6
38
- - ✅ Migration guide reference: ANTD_V6_MIGRATION.md reviewed
39
- - ✅ Documentation: README.md created with proper format
40
- - ✅ Backward compatibility: Full compatibility maintained (no prop changes needed)
41
-
42
- ### Documentation
43
- - ✅ README.md created with "Deprecated Props" section
44
- - ✅ Documented that Form.Item has no deprecated props
45
- - ✅ Migration examples provided
46
- - ✅ TypeScript types documented
47
-
48
- **Note**: Step 2.5 is REQUIRED and enforced.
49
- - Focus: **Ant Design component prop changes** (e.g., Dropdown, Input, Alert, Tooltip, etc.)
50
- - Reference: MIGRATION_CHANGELOG_TEMPLATE.md for format, ANTD_V6_MIGRATION.md for Ant Design deprecated APIs
51
- - Skip: If original component doesn't exist in cap-ui-library
52
- - All deprecated Ant Design props and prop changes must be documented before proceeding.
53
-
54
- ## Visual Testing Results
55
-
56
- **Last Test**: 2026-01-31 19:20:17
57
- **Maximum Mismatch**: 0%
58
-
59
- ### Mismatched Variants:
60
- -
61
-
62
-
63
- ## CSS Fixes Applied
64
-
65
- **Date**: 2026-01-31 10:13:25
66
- **Summary**: CSS fixes applied based on visual testing analysis.
67
-
68
- _See full analysis in: `/Users/sarahkhader/repos/migration/blaze-ui/tools/visual-testing/report/CapFormItem/css-fix-analysis.md`_
69
-
70
-
71
- ## Notes
72
-
73
- _No notes yet._
@@ -1,84 +0,0 @@
1
- # CapFormItem Use Cases Analysis
2
-
3
- ## Component Overview
4
- CapFormItem is a wrapper around Ant Design v6 Form.Item component that:
5
- - Adds a wrapper div with `cap-form-item-wrapper` class
6
- - Applies custom className `cap-form-item-v2`
7
- - Converts children to array using `React.Children.toArray()`
8
- - Extends all FormItemProps from antd-v5 (Ant Design v6)
9
-
10
- ## Use Cases NOT Currently Fulfilled
11
-
12
- ### 1. Custom Validation Logic
13
- **Status**: ✅ Supported via antd Form.Item `rules` prop
14
- **Note**: Component passes through all FormItemProps, so validation rules are fully supported through the underlying Form.Item.
15
-
16
- ### 2. Dependent Field Validation
17
- **Status**: ✅ Supported via antd Form.Item `dependencies` prop
18
- **Note**: Since component extends FormItemProps, `dependencies` prop is available.
19
-
20
- ### 3. Custom Error Message Formatting
21
- **Status**: ⚠️ Limited
22
- **Current Behavior**:
23
- - Error messages come from Form.Item validation rules
24
- - `help` prop displays static help text
25
- - No custom error message formatting or styling
26
-
27
- **Potential Gap**: If custom error message formatting/styling is required, it would need to be added.
28
-
29
- ### 4. Conditional Rendering Based on Form Values
30
- **Status**: ✅ Supported via antd Form.Item `shouldUpdate` or `noStyle` props
31
- **Note**: Component passes through all props, so conditional rendering is supported.
32
-
33
- ### 5. Custom Label Rendering
34
- **Status**: ⚠️ Basic support
35
- **Current Behavior**:
36
- - `label` prop accepts string
37
- - FormItemProps supports ReactNode for label, but component interface only shows string
38
-
39
- **Potential Gap**: While FormItemProps supports ReactNode labels, the TypeScript interface only explicitly shows `label?: string`. This works due to prop spreading, but the type definition could be more explicit.
40
-
41
- ### 6. Tooltip Integration
42
- **Status**: ✅ Supported via antd Form.Item `tooltip` prop
43
- **Note**: Component extends FormItemProps which includes `tooltip` prop.
44
-
45
- ### 7. Extra Information Display
46
- **Status**: ✅ Supported via antd Form.Item `extra` prop
47
- **Note**: Component extends FormItemProps which includes `extra` prop.
48
-
49
- ### 8. Custom Help Text Rendering
50
- **Status**: ✅ Supported
51
- **Current Behavior**:
52
- - `help` prop displays help text
53
- - Form.Item also supports `help` prop natively
54
-
55
- **Note**: Both custom `help` prop and Form.Item's native `help` prop work, but they may conflict if both are provided.
56
-
57
- ### 9. Children Array Handling
58
- **Status**: ⚠️ Potential Issue
59
- **Current Behavior**:
60
- - Uses `React.Children.toArray(children)` which converts children to array
61
- - This may affect how single children are rendered
62
-
63
- **Potential Gap**: If a single child is passed, it's converted to an array. This should work fine with Form.Item, but could affect edge cases.
64
-
65
- ### 10. Form Layout Integration
66
- **Status**: ✅ Supported
67
- **Note**: Component works within Form context and respects Form's layout prop (vertical/horizontal/inline).
68
-
69
- ## Recommendations
70
-
71
- 1. **Type Safety**: Consider explicitly typing `label` as `React.ReactNode` instead of just `string` to match FormItemProps capabilities.
72
-
73
- 2. **Help Prop**: Document that both custom `help` prop and Form.Item's native `help` prop exist and may conflict.
74
-
75
- 3. **Children Handling**: Document that children are converted to array, which should be transparent but worth noting.
76
-
77
- 4. **Validation**: Component relies entirely on antd Form.Item validation. No custom validation logic is added.
78
-
79
- ## Conclusion
80
-
81
- The component is a thin wrapper that successfully passes through all Form.Item functionality. Most use cases are fulfilled through the underlying Form.Item component. The main considerations are:
82
- - Type definitions could be more explicit for ReactNode props
83
- - Children array conversion is transparent but worth documenting
84
- - No custom validation or error handling logic beyond what Form.Item provides
@@ -1,69 +0,0 @@
1
- # CapGraph – Migration (Antd v3→v6) Step 1
2
-
3
- ## Stage 1: Pre-Analysis Report
4
-
5
- ### Analysis Report for CapGraph
6
-
7
- #### 1. Antd Style Overrides Found
8
-
9
- | Line # | Old Override | Can Tokenize? | Token Path | Token Value | Override Reason |
10
- |--------|-------------|---------------|------------|-------------|-----------------|
11
- | N/A | None | N/A | N/A | N/A | Component uses BizCharts (G2), not Ant Design |
12
-
13
- **Tokenizable overrides**: 0
14
- **Non-tokenizable overrides**: 0
15
- **No antd overrides found – theme config update skipped.**
16
-
17
- `styles.scss` contains only `@import '../styles/_variables.scss'` and a wrapper class. No `:global` or `.ant-` usage.
18
-
19
- #### 2. API Breaking Changes
20
-
21
- | Old API | New API | Affected Props |
22
- |---------|---------|----------------|
23
- | N/A | N/A | CapGraph does not wrap an Ant Design component |
24
-
25
- #### 3. Backward Compatibility Plan
26
-
27
- | Deprecated Prop | Fallback Logic |
28
- |-----------------|----------------|
29
- | None | N/A – no deprecated props in this migration |
30
-
31
- #### 4. Type Definitions Needed
32
-
33
- - `CapGraphProps` – main component props
34
- - `CapGraphLegendConfig` – legend marker, position, spread props
35
- - `CapGraphGuideItem` – guide position, content
36
- - `CapGraphGeomItem` – graphList item (type, groupBy, colors, shape, tooltip, label, etc.)
37
-
38
- #### 5. PropTypes Removal
39
-
40
- - [x] Component uses PropTypes: **YES** (removed)
41
- - [x] PropTypes file exists: **NO**
42
- - [x] PropTypes imports found: **YES** (removed)
43
- - [x] Component.propTypes assignments found: **YES** (removed)
44
- - All prop types moved to `types.ts` (TypeScript interfaces).
45
-
46
- #### 6. DefaultProps Removal
47
-
48
- - [x] Component uses defaultProps: **YES** (removed)
49
- - [x] Component.defaultProps assignments found: **YES** (removed)
50
- - [x] Old function syntax with props parameter: **NO** (was class component; converted to function)
51
- - [x] Default values assigned inside function body: **NO**
52
- - Defaults applied via destructuring: `graphList = []`, `xAxisProps = {}`, `yAxisProps = {}`, `title = null`, `y1AxisProps = {}`, `chartProps = {}`.
53
-
54
- ---
55
-
56
- ## Implementation Summary
57
-
58
- - **types.ts**: Added; defines `CapGraphProps`, `CapGraphLegendConfig`, `CapGraphGuideItem`, `CapGraphGeomItem`.
59
- - **index.tsx**: Converted from class to function component; removed PropTypes and defaultProps; uses TypeScript types; `tooltipIndex` moved to `useState`; defaults in destructuring.
60
- - **styles.scss**: Uses CSS Modules (`.cap-graph-wrapper`); no `:global` or `.ant-`; variables import retained.
61
- - **Package dependency**: `bizcharts` added to `package.json` (^3.5.5).
62
- - **Export**: `CapGraph` and `CapGraphProps` added to `components/index.ts`.
63
-
64
- ## Validation
65
-
66
- - **SCSS**: No `:global` or `.ant-` in `styles.scss`.
67
- - **Theme config**: Not updated (no Antd component).
68
- - **PropTypes/defaultProps**: Removed; no remaining references.
69
- - **TypeScript**: Types in `types.ts`; `bizcharts` declared in `types.d.ts` for module resolution.
@@ -1,66 +0,0 @@
1
- # Test Cases: CapGraph (Antd v3→v6)
2
-
3
- **Component**: CapGraph
4
- **Complexity**: medium (≤20 test cases)
5
- **Source**: blaze-ui/components/CapGraph/
6
-
7
- ---
8
-
9
- ## Use cases (for Storybook & migration validation)
10
-
11
- | ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
12
- |----|----------|--------------|---------------------------|----------|-----------------|--------|
13
- | UC-001 | All core prop variants | `data`, `xAxis`, `yAxis`, `graphList` (type, groupBy, colors, shape, showlabel, label), `legend` (marker, position, title), `size`, `scale`, `height` | Chart renders with correct axes, series, legend, and dimensions | P1 | PropVariants | Grouped size, scale, legend, graphList config |
14
- | UC-002 | Visual states | Default; `showGuide` + `guide`; `coord`; `y1Axis` + `y1AxisProps`; `graphList: []` | Optional sections (guide, second axis, coord) show/hide; empty graphList renders chart shell without Geoms | P1 | VisualStates | Grouped optional visual features |
15
- | UC-003 | Tooltip behavior and styling | Default tooltip; `containerTemplate`, `itemTemplate`; `g2Tooltip`, `g2TooltipList`, `g2TooltipListItem`; `tooltipData`; `showTooltip`/`tooltipDisable` on graphList item | Tooltip appears on hover with correct content and custom styles; can be disabled or fully custom per series | P0 | Tooltip | Grouped all tooltip props and behavior |
16
- | UC-004 | Content variants | Normal `data`; `data: []`; long data (many points) | Chart renders; empty data handled without crash; long data doesn’t break layout/performance | P1 | ContentVariants | Grouped normal/empty/long content |
17
- | UC-005 | Styling and chart config | `height`, `chartProps`, `guide.style` | Chart height and BizCharts options applied; guide text uses custom style | P2 | Styling | Grouped height + chartProps + guide style |
18
- | UC-006 | Axis configuration | `xAxisProps`, `yAxisProps`, `y1AxisProps` | Axis labels, ticks, and scale config applied for x, y, and optional y1 | P1 | AxisConfig | Grouped all axis prop overrides |
19
- | UC-007 | Coord and Guide | `coord` (e.g. polar); `showGuide` with `guide` (position, content, style) | Coord transforms chart (e.g. polar); guide text renders at given positions with content/style | P2 | CoordAndGuide | Grouped coord + guide usage |
20
- | UC-008 | Legend variants | `legend`: marker type (e.g. circle), position (e.g. bottom-center), title, spread `legendProps` | Legend renders with correct marker, position, and title | P1 | LegendVariants | Grouped legend options |
21
- | UC-009 | Geom types and options | `graphList`: type (line/bar/area/etc), `groupBy`, `colors`, `shape`; `showlabel` + `label` | Correct geometry and optional labels per series | P1 | GeomTypes | Grouped Geom type and label config |
22
- | UC-010 | Edge cases | `graphList: []`; omit optional props (use defaults); `data` with missing or partial keys for xAxis/yAxis | No crash; default height/empty graphList; graceful handling of malformed data | P0 | EdgeCases | Production-breaking only |
23
- | UC-011 | Tooltip template callback | `containerTemplate(tooltipData, tooltipIndex)` | Custom template receives current tooltipData and tooltipIndex (hovered point) | P2 | TooltipTemplate | Events/callbacks grouped |
24
- | UC-012 | Migration parity (v3 → v6) | Same props used in v3 and v6 (BizCharts/Chart) | Same visual and tooltip behavior after upgrade | P1 | MigrationParity | v3 vs v6 parity check |
25
-
26
- ---
27
-
28
- ## Summary
29
-
30
- - **Total**: 12 use cases (within medium limit of 20).
31
- - **P0**: UC-003 (Tooltip), UC-010 (Edge cases).
32
- - **P1**: UC-001, UC-002, UC-004, UC-006, UC-008, UC-009, UC-012.
33
- - **P2**: UC-005, UC-007, UC-011.
34
-
35
- ## Testing notes (from command)
36
-
37
- - Use **React Testing Library** with **Jest**.
38
- - Prefer `data-testid` for querying (add to CapGraph wrapper/container if needed).
39
- - Do **not** mock Cap UI Library components unless instructed.
40
- - Avoid `getByRole` for chart internals; query by testid or container.
41
- - Keep tests focused; merge scenarios to stay within limits.
42
-
43
- ---
44
-
45
- ## Google Sheets payload (for `GOOGLESHEETS_VALUES_UPDATE`)
46
-
47
- **Spreadsheet ID**: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`
48
- **Range**: `CapGraph!A1`
49
-
50
- ```json
51
- [
52
- ["ID", "Use Case", "Props/Config", "Expected Visual/Behavior", "Priority", "Storybook Story", "Notes"],
53
- ["UC-001", "All core prop variants", "data, xAxis, yAxis, graphList (type, groupBy, colors, shape, showlabel, label), legend (marker, position, title), size, scale, height", "Chart renders with correct axes, series, legend, and dimensions", "P1", "PropVariants", "Grouped size, scale, legend, graphList config"],
54
- ["UC-002", "Visual states", "Default; showGuide + guide; coord; y1Axis + y1AxisProps; graphList: []", "Optional sections (guide, second axis, coord) show/hide; empty graphList renders chart shell without Geoms", "P1", "VisualStates", "Grouped optional visual features"],
55
- ["UC-003", "Tooltip behavior and styling", "Default tooltip; containerTemplate, itemTemplate; g2Tooltip, g2TooltipList, g2TooltipListItem; tooltipData; showTooltip/tooltipDisable on graphList item", "Tooltip appears on hover with correct content and custom styles; can be disabled or fully custom per series", "P0", "Tooltip", "Grouped all tooltip props and behavior"],
56
- ["UC-004", "Content variants", "Normal data; data: []; long data (many points)", "Chart renders; empty data handled without crash; long data doesn't break layout/performance", "P1", "ContentVariants", "Grouped normal/empty/long content"],
57
- ["UC-005", "Styling and chart config", "height, chartProps, guide.style", "Chart height and BizCharts options applied; guide text uses custom style", "P2", "Styling", "Grouped height + chartProps + guide style"],
58
- ["UC-006", "Axis configuration", "xAxisProps, yAxisProps, y1AxisProps", "Axis labels, ticks, and scale config applied for x, y, and optional y1", "P1", "AxisConfig", "Grouped all axis prop overrides"],
59
- ["UC-007", "Coord and Guide", "coord (e.g. polar); showGuide with guide (position, content, style)", "Coord transforms chart (e.g. polar); guide text renders at given positions with content/style", "P2", "CoordAndGuide", "Grouped coord + guide usage"],
60
- ["UC-008", "Legend variants", "legend: marker type (e.g. circle), position (e.g. bottom-center), title, spread legendProps", "Legend renders with correct marker, position, and title", "P1", "LegendVariants", "Grouped legend options"],
61
- ["UC-009", "Geom types and options", "graphList: type (line/bar/area/etc), groupBy, colors, shape; showlabel + label", "Correct geometry and optional labels per series", "P1", "GeomTypes", "Grouped Geom type and label config"],
62
- ["UC-010", "Edge cases", "graphList: []; omit optional props (use defaults); data with missing or partial keys for xAxis/yAxis", "No crash; default height/empty graphList; graceful handling of malformed data", "P0", "EdgeCases", "Production-breaking only"],
63
- ["UC-011", "Tooltip template callback", "containerTemplate(tooltipData, tooltipIndex)", "Custom template receives current tooltipData and tooltipIndex (hovered point)", "P2", "TooltipTemplate", "Events/callbacks grouped"],
64
- ["UC-012", "Migration parity (v3 → v6)", "Same props used in v3 and v6 (BizCharts/Chart)", "Same visual and tooltip behavior after upgrade", "P1", "MigrationParity", "v3 vs v6 parity check"]
65
- ]
66
- ```