@bfrs/agentic-components 0.2.1 → 0.2.2
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/BFRS_AGENTIC_COMPONENTS.md +2 -0
- package/README.md +22 -0
- package/package.json +1 -1
|
@@ -88,6 +88,8 @@ Use attributes for simple props: `variant`, `size`, `tone`, `label`, `loading`,
|
|
|
88
88
|
|
|
89
89
|
Common component events: `(value-change)`, `(checked-change)`, `(open-change)`, `(close)`, `(confirm)`, `(cancel)`, `(row-click)`, `(sort-change)`, `(page-change)`, `(page-size-change)`, `(action-select)`, `(dropdown-select)`, `(date-range-change)`, `(search-change)`, `(open-filters)`, `(apply)`, `(reset)`, and `(submit)`. Payloads are available on `$event.detail`.
|
|
90
90
|
|
|
91
|
+
For validated forms, keep client validation, API validation, and submit side effects in the consuming app. In React, pass field errors through `FormField errorText` and set `Input error`. In Angular, use `bfrs-input` with `[attr.error]` and `[attr.error-message]`, listen to `(value-change)`, and manage success/failure notifications with `bfrs-toast-manager`.
|
|
92
|
+
|
|
91
93
|
```html
|
|
92
94
|
<bfrs-select
|
|
93
95
|
placeholder="Channel"
|
package/README.md
CHANGED
|
@@ -114,6 +114,28 @@ Use simple attributes for primitive values and `[props]` for structured values o
|
|
|
114
114
|
|
|
115
115
|
Registered tags include `bfrs-box`, `bfrs-container`, `bfrs-paper`, `bfrs-stack`, `bfrs-grid`, `bfrs-text`, `bfrs-icon`, `bfrs-button`, `bfrs-icon-button`, `bfrs-form-field`, `bfrs-label`, `bfrs-input`, `bfrs-textarea`, `bfrs-select`, `bfrs-date-range-picker`, `bfrs-searchable-select`, `bfrs-checkbox`, `bfrs-radio`, `bfrs-switch`, `bfrs-badge`, `bfrs-chip`, `bfrs-alert`, `bfrs-toast-manager`, `bfrs-spinner`, `bfrs-skeleton`, `bfrs-empty-state`, `bfrs-error-state`, `bfrs-loading-state`, `bfrs-modal`, `bfrs-drawer`, `bfrs-confirm-dialog`, `bfrs-dropdown`, `bfrs-tooltip`, `bfrs-popover`, `bfrs-avatar`, `bfrs-metric-card`, `bfrs-table-pagination`, `bfrs-data-table`, `bfrs-tabs`, `bfrs-breadcrumbs`, `bfrs-action-menu`, `bfrs-page-header`, `bfrs-section-header`, `bfrs-layout-shell`, `bfrs-form-section`, `bfrs-filter-bar`, `bfrs-filter-drawer`, `bfrs-chat-bubble`, `bfrs-chat-composer`, `bfrs-full-page-loader`, `bfrs-business-info-display-card`, and `bfrs-step-progress-card`.
|
|
116
116
|
|
|
117
|
+
### Validated Forms
|
|
118
|
+
|
|
119
|
+
Keep form validation and API checks in the app. Render field errors below inputs, then show success or failure through the toast API.
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
<FormField label="Pickup pincode" errorText={errors.pickupPincode}>
|
|
123
|
+
<Input error={Boolean(errors.pickupPincode)} value={pickupPincode} onChange={updatePickupPincode} />
|
|
124
|
+
</FormField>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<bfrs-input
|
|
129
|
+
label="Pickup pincode"
|
|
130
|
+
[value]="pickupPincode"
|
|
131
|
+
[attr.error]="errors.pickupPincode ? true : null"
|
|
132
|
+
[attr.error-message]="errors.pickupPincode || null"
|
|
133
|
+
(value-change)="pickupPincode = $event.detail.value">
|
|
134
|
+
</bfrs-input>
|
|
135
|
+
|
|
136
|
+
<bfrs-toast-manager [props]="{ toasts: toasts }" (dismiss)="dismissToast($event.detail.id)"></bfrs-toast-manager>
|
|
137
|
+
```
|
|
138
|
+
|
|
117
139
|
### DateRangePicker
|
|
118
140
|
|
|
119
141
|
Use `DateRangePicker` for preset and custom date-range filters. Keep API date formatting in the consuming app.
|