@emporix/component-library 2.1.0 → 2.1.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/README.md +64 -33
- package/dist/index.es.js +470 -470
- package/dist/index.umd.js +3 -3
- package/dist/style.css +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -134,14 +134,31 @@ All standard HTML input attributes (placeholder, value, onChange, etc.) are supp
|
|
|
134
134
|
|
|
135
135
|
### FieldLabel
|
|
136
136
|
|
|
137
|
-
Shared form field label used by InputText, Dropdown, AutoComplete, and
|
|
137
|
+
Shared form field label used by **all** labeled library controls (InputText, Dropdown, AutoComplete, LocalizedInput, and any new component with a `label` prop). Supports required asterisk and optional info tooltip.
|
|
138
|
+
|
|
139
|
+
**Agent rule:** do not render a custom `<label>` / asterisk / tooltip icon for field labels — compose `FieldLabel` instead (see `.cursor/rules/fieldlabel.mdc`).
|
|
138
140
|
|
|
139
141
|
```tsx
|
|
140
142
|
import { FieldLabel } from '@emporix/component-library'
|
|
141
143
|
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
144
|
+
const example = (
|
|
145
|
+
<FieldLabel htmlFor='name' required tooltip='Display name'>
|
|
146
|
+
Name
|
|
147
|
+
</FieldLabel>
|
|
148
|
+
)
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
Inside a library control:
|
|
152
|
+
|
|
153
|
+
```tsx
|
|
154
|
+
import { FieldLabel } from '../fieldlabel'
|
|
155
|
+
|
|
156
|
+
const labelNode =
|
|
157
|
+
label != null ? (
|
|
158
|
+
<FieldLabel htmlFor={id} required={required} tooltip={tooltip}>
|
|
159
|
+
{label}
|
|
160
|
+
</FieldLabel>
|
|
161
|
+
) : null
|
|
145
162
|
```
|
|
146
163
|
|
|
147
164
|
#### Props
|
|
@@ -162,39 +179,53 @@ Multi-language text field with expand/collapse for additional locales. Languages
|
|
|
162
179
|
```tsx
|
|
163
180
|
import { LocalizedInput } from '@emporix/component-library'
|
|
164
181
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
182
|
+
const example = (
|
|
183
|
+
<LocalizedInput
|
|
184
|
+
label='Name'
|
|
185
|
+
required
|
|
186
|
+
value={name}
|
|
187
|
+
onChange={setName}
|
|
188
|
+
languages={[{ id: 'en' }, { id: 'de' }]}
|
|
189
|
+
selectedLanguage='en'
|
|
190
|
+
showLanguagesLabel='Show languages'
|
|
191
|
+
hideLanguagesLabel='Hide languages'
|
|
192
|
+
/>
|
|
193
|
+
)
|
|
175
194
|
```
|
|
176
195
|
|
|
196
|
+
#### Consumer thin wrapper (MD / md-extensions)
|
|
197
|
+
|
|
198
|
+
In Management Dashboard and federated remotes, wrap CL `LocalizedInput` so feature screens do not pass languages/labels on every call. Reference implementation: `md-extensions/users-and-groups/src/components/shared/LocalizedInput.tsx`.
|
|
199
|
+
|
|
200
|
+
The wrapper should:
|
|
201
|
+
|
|
202
|
+
1. Resolve `languages` from app configuration (or fixed `en`/`de` when editing UI strings).
|
|
203
|
+
2. Set `selectedLanguage` from content language or `i18n.language`.
|
|
204
|
+
3. Pass `showLanguagesLabel` / `hideLanguagesLabel` from `t('global.localizedInput.*')`.
|
|
205
|
+
|
|
206
|
+
Feature screens import the **local** wrapper (`components/shared/LocalizedInput`), not `@emporix/component-library` directly. Agent playbook: `.cursor/rules/localizedinput-consumer.mdc`.
|
|
207
|
+
|
|
177
208
|
#### Props
|
|
178
209
|
|
|
179
|
-
| Prop | Type | Default | Description
|
|
180
|
-
| ------------------ | ------------------------------------------------------------- | ------------------ |
|
|
181
|
-
| label | ReactNode | - | Label above the inputs (same as InputText)
|
|
182
|
-
| tooltip | string | - | Info icon tooltip on the label
|
|
183
|
-
| required | boolean | false | Shows asterisk on label
|
|
184
|
-
| inputId | string | - | id for the first language input
|
|
185
|
-
| value | `Record<string, string> \| undefined` | - | Localized string map
|
|
186
|
-
| onChange | `(value) => void` | - | Called when any language value changes
|
|
187
|
-
| languages | `{ id: string }[]` | - | Available languages
|
|
188
|
-
| selectedLanguage | string | - | Language shown first
|
|
189
|
-
| showLanguagesLabel | ReactNode | - | Expand toggle label (from app i18n)
|
|
190
|
-
| hideLanguagesLabel | ReactNode | - | Collapse toggle label (from app i18n)
|
|
191
|
-
| displayOnly | boolean | false | Read-only inputs
|
|
192
|
-
| disabled | boolean | false | Disabled inputs
|
|
193
|
-
| error | ReactNode | - | Shared validation error
|
|
194
|
-
| errors | `Record<string, string \| { message?: string } \| undefined>` | - | Per-language validation errors
|
|
195
|
-
| showAllLanguages | boolean | false | Start with all language fields expanded
|
|
196
|
-
| placeholder | string | - | Placeholder for each input
|
|
197
|
-
| className | string | - | Additional CSS class for the root
|
|
210
|
+
| Prop | Type | Default | Description |
|
|
211
|
+
| ------------------ | ------------------------------------------------------------- | ------------------ | ---------------------------------------------- |
|
|
212
|
+
| label | ReactNode | - | Label above the inputs (same as InputText) |
|
|
213
|
+
| tooltip | string | - | Info icon tooltip on the label |
|
|
214
|
+
| required | boolean | false | Shows asterisk on label |
|
|
215
|
+
| inputId | string | - | id for the first language input |
|
|
216
|
+
| value | `Record<string, string> \| undefined` | - | Localized string map |
|
|
217
|
+
| onChange | `(value) => void` | - | Called when any language value changes |
|
|
218
|
+
| languages | `{ id: string }[]` | - | Available languages |
|
|
219
|
+
| selectedLanguage | string | - | Language shown first |
|
|
220
|
+
| showLanguagesLabel | ReactNode | - | Expand toggle label (from app i18n) |
|
|
221
|
+
| hideLanguagesLabel | ReactNode | - | Collapse toggle label (from app i18n) |
|
|
222
|
+
| displayOnly | boolean | false | Read-only inputs |
|
|
223
|
+
| disabled | boolean | false | Disabled inputs |
|
|
224
|
+
| error | ReactNode | - | Shared validation error |
|
|
225
|
+
| errors | `Record<string, string \| { message?: string } \| undefined>` | - | Per-language validation errors |
|
|
226
|
+
| showAllLanguages | boolean | false | Start with all language fields expanded |
|
|
227
|
+
| placeholder | string | - | Placeholder for each input |
|
|
228
|
+
| className | string | - | Additional CSS class for the root |
|
|
198
229
|
| data-testid | string | `localized-inputs` | Test ID for root (per-lang suffix `-en`, etc.) |
|
|
199
230
|
|
|
200
231
|
### AutoComplete
|