@capillarytech/blaze-ui 5.21.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.
- package/CapLanguageProvider/actions.js +125 -0
- package/CapLanguageProvider/actions.js.map +1 -0
- package/CapLanguageProvider/constants.js +37 -0
- package/CapLanguageProvider/constants.js.map +1 -0
- package/package.json +1 -1
- package/CapActionBar/README.md +0 -11
- package/CapAdvancedIcon/README.md +0 -185
- package/CapAdvancedIcon/use-cases.md +0 -44
- package/CapAlert/README.md +0 -144
- package/CapAppNotEnabled/README.md +0 -84
- package/CapAskAira/README.md +0 -328
- package/CapBanner/README.md +0 -4
- package/CapBlock/README.md +0 -175
- package/CapBorderedBox/Status.md +0 -40
- package/CapCSVFileUploader/README.md +0 -124
- package/CapCSVFileUploader/Status.md +0 -47
- package/CapCard/README.md +0 -85
- package/CapCard/Status.md +0 -41
- package/CapCardBox/README.md +0 -169
- package/CapCardBox/Status.md +0 -52
- package/CapCarousel/README.md +0 -190
- package/CapCarousel/Status.md +0 -73
- package/CapCheckbox/README.md +0 -254
- package/CapCheckbox/Status.md +0 -41
- package/CapColorPicker/README.md +0 -112
- package/CapColorPicker/Status.md +0 -52
- package/CapColorPicker/tests/USE_CASES_ANALYSIS.md +0 -92
- package/CapColoredTag/README.md +0 -167
- package/CapColoredTag/Status.md +0 -49
- package/CapConditionPreview/MIGRATION_ANALYSIS.md +0 -70
- package/CapConditionPreview/README.md +0 -40
- package/CapConditionPreview/tests/USE_CASES_CapConditionPreview.md +0 -65
- package/CapCustomCard/README.md +0 -182
- package/CapCustomCard/Status.md +0 -40
- package/CapCustomCarousel/Status.md +0 -69
- package/CapCustomCheckboxList/README.md +0 -178
- package/CapCustomCheckboxList/Status.md +0 -52
- package/CapCustomCheckboxList/tests/USE_CASES_ANALYSIS.md +0 -174
- package/CapCustomList/README.md +0 -117
- package/CapCustomList/Status.md +0 -77
- package/CapCustomList/tests/USE_CASES_ANALYSIS.md +0 -124
- package/CapCustomSelect/README.md +0 -38
- package/CapDatePicker/README.md +0 -139
- package/CapDateRangePicker/README.md +0 -159
- package/CapDateTimePicker/README.md +0 -136
- package/CapDateTimeRangePicker/README.md +0 -243
- package/CapDivider/README.md +0 -122
- package/CapDrawer/README.md +0 -207
- package/CapDrawer/Status.md +0 -52
- package/CapDrawer/tests/MISSING_USE_CASES.md +0 -170
- package/CapDropdown/README.md +0 -515
- package/CapDropdown/Status.md +0 -45
- package/CapDropdown/tests/USE_CASES_ANALYSIS.md +0 -137
- package/CapError/README.md +0 -88
- package/CapErrorBoundary/CapErrorBoundary-use-cases.md +0 -89
- package/CapErrorBoundary/README.md +0 -150
- package/CapErrorStateIllustration/README.md +0 -222
- package/CapErrorStateIllustration/USE_CASES.md +0 -33
- package/CapExpressionEditor/README.md +0 -32
- package/CapForm/README.md +0 -132
- package/CapForm/Status.md +0 -40
- package/CapForm/tests/PHASE1_UNFULFILLED_USE_CASES.md +0 -113
- package/CapForm/tests/USE_CASES_ANALYSIS.md +0 -119
- package/CapFormItem/README.md +0 -320
- package/CapFormItem/Status.md +0 -73
- package/CapFormItem/tests/USE_CASES_ANALYSIS.md +0 -84
- package/CapGraph/README.md +0 -69
- package/CapGraph/USE_CASES.md +0 -66
- package/CapHamburgerMenu/README.md +0 -234
- package/CapHamburgerMenu/USE_CASES.md +0 -48
- package/CapHeader/Status.md +0 -41
- package/CapHeading/README.md +0 -220
- package/CapHeading/Status.md +0 -41
- package/CapIcon/README.md +0 -207
- package/CapIllustration/Status.md +0 -41
- package/CapImage/README.md +0 -50
- package/CapImportMFEComponent/README.md +0 -121
- package/CapInfoNote/Status.md +0 -40
- package/CapInfoNote/tests/USE_CASES_ANALYSIS.md +0 -114
- package/CapInput/README.md +0 -196
- package/CapInput/Status.md +0 -123
- package/CapInput/tests/USE_CASES_ANALYSIS.md +0 -169
- package/CapLanguageProvider/CapLanguageProvider-use-cases.md +0 -56
- package/CapLanguageProvider/README.md +0 -206
- package/CapLevelGraphRenderer/CapLevelGraphRenderer-test-cases.md +0 -50
- package/CapLevelGraphRenderer/README.md +0 -123
- package/CapLevelGraphRenderer/Tooltip_MIGRATION_ANALYSIS.md +0 -120
- package/CapLink/README.md +0 -203
- package/CapLink/Status.md +0 -32
- package/CapLink/tests/CapLink.missingUseCases.md +0 -95
- package/CapList/README.md +0 -129
- package/CapList/Status.md +0 -69
- package/CapListLayout/README.md +0 -7
- package/CapLogin/README.md +0 -7
- package/CapMenu/README.md +0 -86
- package/CapModal/README.md +0 -357
- package/CapModal/Status.md +0 -52
- package/CapModal/tests/USE_CASES_GAPS.md +0 -207
- package/CapMultiSelect/README.md +0 -170
- package/CapMultiSelect/tests/USE_CASES_ANALYSIS.md +0 -29
- package/CapMultiSelectDatePicker/README.md +0 -11
- package/CapNavigation/README.md +0 -72
- package/CapNotification/README.md +0 -228
- package/CapNotificationDropdown/README.md +0 -5
- package/CapPopover/README.md +0 -234
- package/CapProgress/Status.md +0 -40
- package/CapRadio/Status.md +0 -54
- package/CapRadioButton/README.md +0 -152
- package/CapRadioButton/Status.md +0 -70
- package/CapRadioButton/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapRadioCard/README.md +0 -161
- package/CapRadioCard/Status.md +0 -78
- package/CapRadioGroup/README.md +0 -141
- package/CapRadioGroup/Status.md +0 -59
- package/CapReorderComponent/README.md +0 -179
- package/CapReorderComponent/Status.md +0 -41
- package/CapRoadMap/README.md +0 -126
- package/CapRoadMap/Status.md +0 -53
- package/CapRoadMap/tests/USE_CASE_GAPS.md +0 -92
- package/CapRow/README.md +0 -424
- package/CapSKUUploader/README.md +0 -189
- package/CapSKUUploader/Status.md +0 -66
- package/CapSecondaryTopBar/README.md +0 -7
- package/CapSelect/README.md +0 -243
- package/CapSelectFilter/README.md +0 -121
- package/CapShape/README.md +0 -96
- package/CapShape/Status.md +0 -36
- package/CapShape/tests/USE_CASES_ANALYSIS.md +0 -120
- package/CapSideBar/README.md +0 -298
- package/CapSideBar/Status.md +0 -5
- package/CapSlideBox/README.md +0 -68
- package/CapSlider/README.md +0 -423
- package/CapSlider/Status.md +0 -48
- package/CapSlider/tests/TEST_COVERAGE.md +0 -118
- package/CapSnackBar/README.md +0 -222
- package/CapSnackBar/Status.md +0 -41
- package/CapSomethingWentWrong/README.md +0 -97
- package/CapSplit/README.md +0 -19
- package/CapStatisticCard/README.md +0 -138
- package/CapStatus/README.md +0 -148
- package/CapStatus/Status.md +0 -40
- package/CapSteps/Status.md +0 -40
- package/CapStepsAccordian/README.md +0 -305
- package/CapStepsAccordian/Status.md +0 -48
- package/CapSupportVideosWrapper/README.md +0 -14
- package/CapSwitch/README.md +0 -351
- package/CapTab/README.md +0 -406
- package/CapTab/Status.md +0 -104
- package/CapTab/tests/USE_CASE_GAPS.md +0 -143
- package/CapTabV3/ANALYSIS.md +0 -60
- package/CapTabV3/README.md +0 -156
- package/CapTabV3/Status.md +0 -52
- package/CapTabV3/tests/USE_CASE_GAPS.md +0 -149
- package/CapTable/README.md +0 -160
- package/CapTable/Status.md +0 -41
- package/CapTag/README.md +0 -16
- package/CapTagDropdown/README.md +0 -171
- package/CapTagDropdown/Status.md +0 -55
- package/CapTimePicker/README.md +0 -170
- package/CapTooltip/README.md +0 -336
- package/CapTooltipWithInfo/Status.md +0 -75
- package/CapTopBar/README.md +0 -146
- package/CapTree/README.md +0 -124
- package/CapTree/Status.md +0 -48
- package/CapTree/tests/STATUS.md +0 -154
- package/CapTreeSelect/README.md +0 -217
- package/CapTreeSelect/Status.md +0 -52
- package/CapTruncateList/README.md +0 -13
- package/CapUnifiedSelect/README.md +0 -40
- package/CapUploader/README.md +0 -313
- package/CapUploader/Status.md +0 -76
- package/CapUploader/tests/USE_CASES_ANALYSIS.md +0 -225
- package/CapUserProfile/README.md +0 -105
- package/CapUserProfile/Status.md +0 -95
- package/CapVirtualList/README.md +0 -162
- package/CapVirtualList/Status.md +0 -71
- package/assets/HOCs/ComponentWithLabelHOC/README.md +0 -230
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
# CapForm Use Cases Analysis
|
|
2
|
-
|
|
3
|
-
## Component Overview
|
|
4
|
-
CapForm is a wrapper around Ant Design v5 Form component that adds:
|
|
5
|
-
- Custom wrapper div with styling (`cap-form-wrapper`)
|
|
6
|
-
- Default layout of 'vertical'
|
|
7
|
-
- Custom className support
|
|
8
|
-
- Passes through all Ant Design FormProps
|
|
9
|
-
|
|
10
|
-
## Phase 1: Use Cases NOT Currently Fulfilled
|
|
11
|
-
|
|
12
|
-
### 1. Form Instance Access
|
|
13
|
-
**Status**: ⚠️ Not Explicitly Documented/Tested
|
|
14
|
-
**Issue**: Component doesn't expose Form instance methods (getFieldsValue, setFieldsValue, validateFields, etc.) in a convenient way
|
|
15
|
-
**Current Behavior**:
|
|
16
|
-
- Form instance is available via `Form.useForm()` hook, but CapForm doesn't provide a ref or instance prop
|
|
17
|
-
- Users must use Ant Design's Form.useForm() hook separately
|
|
18
|
-
|
|
19
|
-
**Expected Behavior** (if required):
|
|
20
|
-
- Provide form instance via ref forwarding
|
|
21
|
-
- Or expose form methods through a prop
|
|
22
|
-
|
|
23
|
-
**Recommendation**: Document that users should use `Form.useForm()` hook and pass `form` prop to CapForm, or add ref forwarding if needed.
|
|
24
|
-
|
|
25
|
-
### 2. Form List/Dynamic Fields
|
|
26
|
-
**Status**: ✅ Supported (via Ant Design Form.List)
|
|
27
|
-
**Note**: Component passes through all FormProps, so Form.List should work, but it's not explicitly tested or documented in CapForm context.
|
|
28
|
-
|
|
29
|
-
**Recommendation**: Add test cases and examples for Form.List usage.
|
|
30
|
-
|
|
31
|
-
### 3. Form Dependencies (shouldUpdate, dependencies)
|
|
32
|
-
**Status**: ✅ Supported (via Ant Design Form.Item dependencies)
|
|
33
|
-
**Note**: Component passes through FormProps, so dependencies work, but not explicitly tested.
|
|
34
|
-
|
|
35
|
-
**Recommendation**: Add test cases for form field dependencies.
|
|
36
|
-
|
|
37
|
-
### 4. Custom Validation Rules
|
|
38
|
-
**Status**: ✅ Supported (via Ant Design Form.Item rules)
|
|
39
|
-
**Note**: Component passes through FormProps, so custom validation rules work via Form.Item, but not explicitly tested at CapForm level.
|
|
40
|
-
|
|
41
|
-
**Recommendation**: Add test cases demonstrating custom validation.
|
|
42
|
-
|
|
43
|
-
### 5. Form Reset Functionality
|
|
44
|
-
**Status**: ✅ Supported (via Ant Design Form instance methods)
|
|
45
|
-
**Note**: Form reset is available via form instance methods, but not explicitly tested.
|
|
46
|
-
|
|
47
|
-
**Recommendation**: Add test cases for form reset scenarios.
|
|
48
|
-
|
|
49
|
-
### 6. Form Field Value Watching
|
|
50
|
-
**Status**: ✅ Supported (via Ant Design Form.Item shouldUpdate or Form.useWatch)
|
|
51
|
-
**Note**: Component supports this via Ant Design APIs, but not explicitly tested.
|
|
52
|
-
|
|
53
|
-
**Recommendation**: Add test cases for value watching scenarios.
|
|
54
|
-
|
|
55
|
-
### 7. Form Submission Loading State
|
|
56
|
-
**Status**: ⚠️ Not Built-in
|
|
57
|
-
**Issue**: No built-in loading state management during form submission
|
|
58
|
-
**Current Behavior**:
|
|
59
|
-
- Users must manage loading state manually
|
|
60
|
-
- No `loading` prop on CapForm
|
|
61
|
-
|
|
62
|
-
**Expected Behavior** (if required):
|
|
63
|
-
- Add `loading` prop that disables form during submission
|
|
64
|
-
- Or provide loading state management helper
|
|
65
|
-
|
|
66
|
-
**Recommendation**: This is typically handled at application level, but could be a convenience feature.
|
|
67
|
-
|
|
68
|
-
### 8. Form Validation Feedback Timing
|
|
69
|
-
**Status**: ✅ Supported (via Ant Design validateTrigger)
|
|
70
|
-
**Note**: Component passes through FormProps, so validateTrigger works, but not explicitly tested.
|
|
71
|
-
|
|
72
|
-
**Recommendation**: Add test cases for different validation trigger scenarios (onChange, onBlur, onSubmit).
|
|
73
|
-
|
|
74
|
-
### 9. Nested Forms
|
|
75
|
-
**Status**: ⚠️ Not Recommended/Tested
|
|
76
|
-
**Issue**: Ant Design doesn't officially support nested forms, and CapForm doesn't prevent or handle this
|
|
77
|
-
**Current Behavior**:
|
|
78
|
-
- Nested forms may cause unexpected behavior
|
|
79
|
-
- Not tested or documented
|
|
80
|
-
|
|
81
|
-
**Recommendation**: Document that nested forms are not supported and may cause issues.
|
|
82
|
-
|
|
83
|
-
### 10. Form Field Array Operations
|
|
84
|
-
**Status**: ✅ Supported (via Ant Design Form.List)
|
|
85
|
-
**Note**: Component supports Form.List for dynamic fields, but array operations (add, remove, move) are not explicitly tested.
|
|
86
|
-
|
|
87
|
-
**Recommendation**: Add test cases for Form.List add/remove/move operations.
|
|
88
|
-
|
|
89
|
-
## Test Coverage Summary
|
|
90
|
-
|
|
91
|
-
The comprehensive test suite covers:
|
|
92
|
-
✅ Default rendering and initialization
|
|
93
|
-
✅ Layout variations (horizontal, vertical, inline)
|
|
94
|
-
✅ Custom className application
|
|
95
|
-
✅ Form callbacks (onFinish, onFinishFailed)
|
|
96
|
-
✅ Initial values handling
|
|
97
|
-
✅ Form props passthrough (size, requiredMark, colon, preserve, labelCol, wrapperCol, scrollToFirstError)
|
|
98
|
-
✅ User interactions (form submission, input changes)
|
|
99
|
-
✅ Edge cases (empty form, null/undefined children, multiple classNames)
|
|
100
|
-
✅ Accessibility (form role, ARIA attributes, keyboard navigation)
|
|
101
|
-
✅ Data flow and state management (re-renders, initialValues changes)
|
|
102
|
-
✅ Conditional rendering
|
|
103
|
-
|
|
104
|
-
## Recommendations
|
|
105
|
-
|
|
106
|
-
1. **High Priority**: Add test cases for Form.List (dynamic fields)
|
|
107
|
-
2. **High Priority**: Add test cases for form instance methods (getFieldsValue, setFieldsValue, validateFields, resetFields)
|
|
108
|
-
3. **Medium Priority**: Add test cases for form field dependencies
|
|
109
|
-
4. **Medium Priority**: Add test cases for custom validation rules
|
|
110
|
-
5. **Low Priority**: Consider adding loading state prop if commonly needed
|
|
111
|
-
6. **Low Priority**: Document form instance usage patterns
|
|
112
|
-
7. **Low Priority**: Add test cases for validateTrigger variations
|
|
113
|
-
|
|
114
|
-
## Notes
|
|
115
|
-
|
|
116
|
-
- CapForm is a thin wrapper around Ant Design Form
|
|
117
|
-
- Most functionality comes from Ant Design FormProps passthrough
|
|
118
|
-
- Component focuses on styling and default layout configuration
|
|
119
|
-
- All Ant Design Form features are available but may need explicit testing/documentation
|
package/CapFormItem/README.md
DELETED
|
@@ -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
|
package/CapFormItem/Status.md
DELETED
|
@@ -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
|
package/CapGraph/README.md
DELETED
|
@@ -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.
|