@rolster/react-components 19.9.0 → 19.11.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/dist/cjs/index.cjs +229 -93
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/es/index.mjs +224 -94
- package/dist/es/index.mjs.map +1 -1
- package/dist/esm/components/atoms/Chip/Chip.d.ts +13 -0
- package/dist/esm/components/atoms/Chip/Chip.js +10 -0
- package/dist/esm/components/atoms/Chip/Chip.js.map +1 -0
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.d.ts +13 -0
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js +34 -0
- package/dist/esm/components/molecules/AppThemeTabs/AppThemeTabs.js.map +1 -0
- package/dist/esm/components/molecules/ChipGroup/ChipGroup.d.ts +31 -0
- package/dist/esm/components/molecules/ChipGroup/ChipGroup.js +34 -0
- package/dist/esm/components/molecules/ChipGroup/ChipGroup.js.map +1 -0
- package/dist/esm/components/organisms/FieldList/FieldList.js +4 -2
- package/dist/esm/components/organisms/FieldList/FieldList.js.map +1 -1
- package/dist/esm/components/organisms/LedColor/LedColor.d.ts +36 -0
- package/dist/esm/components/organisms/LedColor/LedColor.js +48 -0
- package/dist/esm/components/organisms/LedColor/LedColor.js.map +1 -0
- package/dist/esm/controllers/AppThemeController.d.ts +7 -0
- package/dist/esm/controllers/AppThemeController.js +20 -0
- package/dist/esm/controllers/AppThemeController.js.map +1 -0
- package/dist/esm/helpers/app-theme.js +2 -3
- package/dist/esm/helpers/app-theme.js.map +1 -1
- package/dist/esm/i18n.d.ts +3 -0
- package/dist/esm/i18n.js +6 -0
- package/dist/esm/i18n.js.map +1 -1
- package/dist/esm/index.d.ts +5 -0
- package/dist/esm/index.js +5 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types.d.ts +2 -2
- package/package.json +2 -2
- package/readme.md +30 -24
package/readme.md
CHANGED
|
@@ -112,6 +112,7 @@ Components that display a list of options (`RlsFieldSelect`, `RlsFieldList`, `Rl
|
|
|
112
112
|
| `RlsButtonOption` | Icon button that behaves as one option of a single selection over a control |
|
|
113
113
|
| `RlsCheckBox` | Checkbox mark driven by the `checked` prop |
|
|
114
114
|
| `RlsCheckBoxControl` | `RlsCheckBox` bound to a `boolean` control |
|
|
115
|
+
| `RlsChip` | Compact label with optional icon, remove button and clickable state |
|
|
115
116
|
| `RlsHoverSwap` | Renders `children` and swaps it for `content` while the pointer is over it |
|
|
116
117
|
| `RlsIcon` | Renders the glyph `rls-icon-{value}`, with skeleton state |
|
|
117
118
|
| `RlsImage` | `img` that shows a skeleton until the source finishes loading |
|
|
@@ -168,11 +169,13 @@ function Header({ requesting, onSave }: HeaderProps) {
|
|
|
168
169
|
| ------------------------- | ---------------------------------------------------------------------------------------- |
|
|
169
170
|
| `RlsAccordion` | Collapsible section with title and indicator, animated on the height of its content |
|
|
170
171
|
| `RlsAlert` | Message block with optional icon and bordered variant |
|
|
172
|
+
| `RlsAppThemeTabs` | Tab bar with the application themes that writes the selected one on the body |
|
|
171
173
|
| `RlsBallot` | Avatar, title and subtitle row, with skeleton state |
|
|
172
174
|
| `RlsBody` | Body container of an application page |
|
|
173
175
|
| `RlsButtonProgress` | Action button surrounded by a circular progress while `progressing` |
|
|
174
176
|
| `RlsButtonStepper` | Pair of buttons that emit a down and an up action |
|
|
175
177
|
| `RlsButtonToggle` | Action button with a second button that opens the list of `options` |
|
|
178
|
+
| `RlsChipGroup` | Group of chips that behaves as a single selection over a list of values |
|
|
176
179
|
| `RlsContent` | Content container of an application page |
|
|
177
180
|
| `RlsFieldArea` | Labelled field over `RlsAreaText`, with an optional counter and its error message |
|
|
178
181
|
| `RlsFieldDecimal` | Labelled field over `RlsInputDecimal` with its error message |
|
|
@@ -260,6 +263,7 @@ function Account() {
|
|
|
260
263
|
| `RlsFormNavigation` | Navigation panel that slides over a form |
|
|
261
264
|
| `RlsImageChooser` | Avatar that opens the file selector and the image editor |
|
|
262
265
|
| `RlsImageEditor` | Image editor with zoom, crop by ratio and export to `ImageEditorValue` |
|
|
266
|
+
| `RlsLedColor` | Led that opens the color picker and shows the selected color |
|
|
263
267
|
| `RlsModal` | Modal window with backdrop |
|
|
264
268
|
| `RlsModalClock` | Modal that hosts `RlsPickerClock` |
|
|
265
269
|
| `RlsModalDate` | Modal that hosts `RlsPickerDate` |
|
|
@@ -301,27 +305,28 @@ function Assignment({ persons }: { persons: Person[] }) {
|
|
|
301
305
|
|
|
302
306
|
### Hooks
|
|
303
307
|
|
|
304
|
-
| Hook
|
|
305
|
-
|
|
|
306
|
-
| `useRlsContext(): RlsState`
|
|
307
|
-
| `useConfirmation(): ConfirmationService`
|
|
308
|
-
| `useNotifications(): NotificationsService`
|
|
309
|
-
| `useSnackbar(): SnackbarService`
|
|
310
|
-
| `useFieldAutocomplete(props)`
|
|
311
|
-
| `useFieldList(props)`
|
|
312
|
-
| `useFieldSelect(props)`
|
|
313
|
-
| `useListController(props)`
|
|
314
|
-
| `useDatatable(table?): DatatableController`
|
|
315
|
-
| `useDesingSystemController(primary?, secondary?)`
|
|
316
|
-
| `
|
|
317
|
-
| `
|
|
318
|
-
| `
|
|
319
|
-
| `
|
|
320
|
-
| `
|
|
321
|
-
| `
|
|
322
|
-
| `
|
|
323
|
-
| `
|
|
324
|
-
| `
|
|
308
|
+
| Hook | Description |
|
|
309
|
+
| ------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
|
310
|
+
| `useRlsContext(): RlsState` | Reads the context of `RlsApplication`; throws when the wrapper is missing |
|
|
311
|
+
| `useConfirmation(): ConfirmationService` | Creates the `confirmation` function and the `RlsConfirmation` node that renders it |
|
|
312
|
+
| `useNotifications(): NotificationsService` | Creates the `notify` function and the `RlsNotifications` node with the stack |
|
|
313
|
+
| `useSnackbar(): SnackbarService` | Creates the `snackbar` function and the `RlsSnackbar` node that renders it |
|
|
314
|
+
| `useFieldAutocomplete(props)` | State of an autocomplete field: coincidences, pattern, references and event handlers |
|
|
315
|
+
| `useFieldList(props)` | State of a multiple selection field: selected elements, references and event handlers |
|
|
316
|
+
| `useFieldSelect(props)` | State of a single selection field: value, references and event handlers |
|
|
317
|
+
| `useListController(props)` | Base of the previous ones: visibility, keyboard navigation and writing to the control |
|
|
318
|
+
| `useDatatable(table?): DatatableController` | Observes the body of a table and reports whether it is scrollable |
|
|
319
|
+
| `useDesingSystemController(primary?, secondary?)` | Applies a design system and toggles between two of them |
|
|
320
|
+
| `useAppThemeController(initial?, primary?, secondary?)` | Applies an application theme and toggles between two of them |
|
|
321
|
+
| `useDropdownController(effect?): DropdownController` | Opens a `RlsDropdown` at a position or from a mouse event |
|
|
322
|
+
| `usePortalController(): PortalController` | Visibility of modals, sheets and navigation panels |
|
|
323
|
+
| `useTabsController(options): TabsController` | Creates the control of a tab bar and the `Tabs` node bound to it |
|
|
324
|
+
| `useImageEditorController(options)` | Opens the file selector and the image editor, and returns the node that renders them |
|
|
325
|
+
| `useFormSingleSelectionController(props)` | `checked` state and selection of a value over a control |
|
|
326
|
+
| `useFormToggleController(props)` | `checked` state and toggle of a `boolean` control |
|
|
327
|
+
| `useResize({ refElement, onResize })` | Reports the dimensions of an element when it changes size |
|
|
328
|
+
| `useRelocationOnComponent({ container, element })` | Allows dragging an element inside its container |
|
|
329
|
+
| `useEventCallback(callback)` | Returns a stable function that always calls the last received callback |
|
|
325
330
|
|
|
326
331
|
```tsx
|
|
327
332
|
import { RlsButton, useRlsContext } from '@rolster/react-components';
|
|
@@ -354,12 +359,12 @@ function DeleteAction({ person }: { person: Person }) {
|
|
|
354
359
|
|
|
355
360
|
### Theme and design system
|
|
356
361
|
|
|
357
|
-
The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element.
|
|
362
|
+
The application theme is written on the `app-theme` attribute of `document.body`, and the colors of a theme are written as custom properties on that same element. The themes are `light`, `dim` and `dark`, as declared by `@rolster/styles-foundations`; `RlsAppThemeTabs` renders them as a tab bar and applies the selected one, with translated labels that the `labels` prop can override.
|
|
358
363
|
|
|
359
364
|
| Function | Description |
|
|
360
365
|
| ---------------------------------------- | ---------------------------------------------------------------------------- |
|
|
361
366
|
| `getAppTheme(): RlsAppTheme` | Current theme, `light` when nothing has been set |
|
|
362
|
-
| `setAppTheme(theme)` | Writes `light` or `dark` on the application body
|
|
367
|
+
| `setAppTheme(theme)` | Writes `light`, `dim` or `dark` on the application body |
|
|
363
368
|
| `toggleAppTheme(): RlsAppTheme` | Switches between `light` and `dark`, and returns the applied theme |
|
|
364
369
|
| `setDesignSystem(designSystem?)` | Writes the class of the design system on the body and removes the other ones |
|
|
365
370
|
| `generateThemePalette(color, theme?)` | Builds a `ThemePalette` of eleven shades from a hexadecimal color |
|
|
@@ -398,7 +403,7 @@ toggleAppTheme(); // 'dark'
|
|
|
398
403
|
| Type | Description |
|
|
399
404
|
| -------------------------------- | ------------------------------------------------------------------------------- |
|
|
400
405
|
| `RlsTheme` | Color theme of a component, applied with the `rlsTheme` prop |
|
|
401
|
-
| `RlsAppTheme` | Application theme, `light` or `dark`
|
|
406
|
+
| `RlsAppTheme` | Application theme, `light`, `dim` or `dark` |
|
|
402
407
|
| `RlsDesignSystem` | Design system, `bordered`, `filled` or `gradient` |
|
|
403
408
|
| `RlsButtonType` | Button style, `ghost`, `flat` or `raised` |
|
|
404
409
|
| `PropsWithClassName` | Props with an optional `className` |
|
|
@@ -414,6 +419,7 @@ toggleAppTheme(); // 'dark'
|
|
|
414
419
|
| `NotificationsConfig` | Configuration of a notification, a `SnackbarConfig` plus `duration` |
|
|
415
420
|
| `PaginationEvent<T>` | Event of `RlsPagination`: page, limits and suggestions of the page |
|
|
416
421
|
| `Tab<T>` | Tab of `RlsTabs`: label, value and disabled state |
|
|
422
|
+
| `AppThemeLabels` | Labels of `RlsAppThemeTabs`, one optional string per application theme |
|
|
417
423
|
| `NavbarMenuOption` | Option of `RlsNavbarMenu`: identifier, icon and label |
|
|
418
424
|
| `ImageEditorValue` | Result of the image editor: `base64` and `blob` |
|
|
419
425
|
| `ThemePalette` | Palette generated for a theme: shades, custom properties and CSS |
|