@scmlatam/web-ui 0.2.15 → 0.2.17

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.
@@ -0,0 +1,3 @@
1
+ <svg width="17" height="20" viewBox="0 0 17 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M6 16C5.45 16 4.97917 15.8042 4.5875 15.4125C4.19583 15.0208 4 14.55 4 14V2C4 1.45 4.19583 0.979167 4.5875 0.5875C4.97917 0.195833 5.45 0 6 0H15C15.55 0 16.0208 0.195833 16.4125 0.5875C16.8042 0.979167 17 1.45 17 2V14C17 14.55 16.8042 15.0208 16.4125 15.4125C16.0208 15.8042 15.55 16 15 16H6ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V5C0 4.71667 0.0958333 4.47917 0.2875 4.2875C0.479167 4.09583 0.716667 4 1 4C1.28333 4 1.52083 4.09583 1.7125 4.2875C1.90417 4.47917 2 4.71667 2 5V18H12C12.2833 18 12.5208 18.0958 12.7125 18.2875C12.9042 18.4792 13 18.7167 13 19C13 19.2833 12.9042 19.5208 12.7125 19.7125C12.5208 19.9042 12.2833 20 12 20H2Z" fill="#190007"/>
3
+ </svg>
@@ -12,8 +12,8 @@ export { PillsTabs, PillsTabs as RbPillsTabs, } from '../rb-components/navigatio
12
12
  export type { PillsTabItem, PillsTabsProps } from '../rb-components/navigation';
13
13
  export { Button as RBButton, Input, AutoCustomCompleteField, CustomDatefield, CustomDatePicker, CustomTimefield, CustomDateRangefield, CustomDateRangePicker, CustomDateRangeCalendar, RbInlineChipField, CalendarChipIcon, ClockChipIcon, Card, CardHeader, CardTitle, CardContent, CardFooter, IconButton as RbIconButton, Tooltip, Portal, RbContextMenu, Checkbox, Radio, cn, } from '../rb-components/ui';
14
14
  export type { AutoValueItem, ButtonProps as RBButtonProps, InputProps, CustomAutoCompleteFieldProps, CustomDatefieldProps, CustomDatePickerProps, CustomTimefieldProps, CustomDateRangefieldProps, CustomDateRangePickerProps, CustomDateRangeCalendarProps, RbInlineChipFieldProps, RbInlineChipFieldAction, RbContextMenuAlign, RbContextMenuItem, RbContextMenuPosition, RbContextMenuProps, RbContextMenuVariant, CardProps, IconButtonProps as RbIconButtonProps, CheckboxProps, CheckboxSize, RadioProps, PortalProps, TooltipProps, } from '../rb-components/ui';
15
- export { RbTable, RbExcelTable, RbTableToolbar, RbToolbarActionButton, RbToolbarDateRangeField, RbToolbarMultiSelectField, RbToolbarSearchField, RbToolbarSelectField, formatRbExcelDate, formatRbExcelTime, getRbExcelValueAtPath, isRbExcelEmptyValue, isValidRbExcelDate, isValidRbExcelNumber, isValidRbExcelTime, parseRbExcelValue, setRbExcelValueAtPath, } from '../rb-components/table';
16
- export type { RbExcelCellContext, RbExcelCreateRowContext, RbExcelEditorContext, RbExcelFieldType, RbExcelImportContext, RbExcelParseContext, RbExcelRenderContext, RbExcelRowsChangeMeta, RbExcelRowsChangeSource, RbExcelTableActions, RbExcelTableColumn, RbExcelTableLabels, RbExcelTableProps, RbExcelTableRef, RbExcelValidationError, RbExcelValidationErrorInput, RbExcelValidationErrorSource, RbExcelValidationResult, RbExcelValueSource, RbTableColumn, RbTableRowId, RbTableProps, RbTableCellParams, RbTableRowParams, RbTableInitialState, RbTablePinnedColumns, RbTableBaseRow, RbTableSize, RbTableDensity, RbTableAlign, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, RbTablePaginationMode, RbTablePaginationModel, RbRowSelectionModel, RbRowsPerPageOption, RbToolbarDateRangeFieldProps, RbToolbarDateRangeValue, RbAnyTableColumn, RbLegacyGridColumn, } from '../rb-components/table';
15
+ export { RbTable, RbExcelTable, RbTableToolbar, RbToolbarActionButton, RbToolbarActions, RbToolbarDateRangeField, RbToolbarMultiSelectField, RbToolbarSearchField, RbToolbarSelectField, formatRbExcelDate, formatRbExcelTime, getRbExcelValueAtPath, isRbExcelEmptyValue, isValidRbExcelDate, isValidRbExcelNumber, isValidRbExcelTime, parseRbExcelValue, setRbExcelValueAtPath, } from '../rb-components/table';
16
+ export type { RbExcelCellContext, RbExcelCreateRowContext, RbExcelEditorContext, RbExcelFieldType, RbExcelImportContext, RbExcelParseContext, RbExcelRenderContext, RbExcelRowsChangeMeta, RbExcelRowsChangeSource, RbExcelTableActions, RbExcelTableColumn, RbExcelTableLabels, RbExcelTableProps, RbExcelTableRef, RbExcelValidationError, RbExcelValidationErrorInput, RbExcelValidationErrorSource, RbExcelValidationResult, RbExcelValueSource, RbTableColumn, RbTableRowId, RbTableProps, RbTableCellParams, RbTableRowParams, RbTableInitialState, RbTablePinnedColumns, RbTableBaseRow, RbTableSize, RbTableDensity, RbTableAlign, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, RbTablePaginationMode, RbTablePaginationModel, RbRowSelectionModel, RbRowsPerPageOption, RbToolbarActionsProps, RbToolbarDateRangeFieldProps, RbToolbarDateRangeValue, RbAnyTableColumn, RbLegacyGridColumn, } from '../rb-components/table';
17
17
  export { DashboardShell, ShellContent } from '../rb-components/shell';
18
18
  export { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, } from '../rb-components/sidebar';
19
19
  export { TopBar, TopBarUserMenu } from '../rb-components/topbar';
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- export type MessageAlertType = "alert" | "error" | "warning" | "success" | "suggestion" | "info";
2
+ export type MessageAlertType = "error" | "warning" | "success" | "suggestion" | "info";
3
3
  export interface MessageAlertAction {
4
4
  label: ReactNode;
5
5
  onClick: () => void;
@@ -31,6 +31,32 @@ export declare const rbImages: {
31
31
  readonly view: string;
32
32
  readonly visibilityOff: string;
33
33
  readonly visibilityOn: string;
34
+ readonly copy: string;
35
+ readonly iconGoogle: string;
36
+ readonly iconMicrosoft: string;
37
+ readonly loggeo: string;
38
+ readonly arrowUpload: string;
39
+ readonly auditMass: string;
40
+ readonly back: string;
41
+ readonly chartDark: string;
42
+ readonly deleteIcon: string;
43
+ readonly emptyAudit: string;
44
+ readonly emptyChart: string;
45
+ readonly emptyFile: string;
46
+ readonly emptySearch: string;
47
+ readonly en: string;
48
+ readonly error: string;
49
+ readonly es: string;
50
+ readonly executeMass: string;
51
+ readonly executePlay: string;
52
+ readonly infoAzulino: string;
53
+ readonly noReview: string;
54
+ readonly ops: string;
55
+ readonly pt: string;
56
+ readonly reload: string;
57
+ readonly reviewSend: string;
58
+ readonly logoOP: string;
59
+ readonly share: string;
34
60
  };
35
61
  export type RbImageName = keyof typeof rbImages;
36
62
  export declare const getRbImageUrl: (name: RbImageName) => string;
@@ -1,4 +1,47 @@
1
1
  import { default as React } from 'react';
2
+ /**
3
+ * ----------------------------------------------------------------------------
4
+ * RB TABLE TOOLBAR
5
+ * ----------------------------------------------------------------------------
6
+ *
7
+ * Toolbar responsive para RbTable.
8
+ *
9
+ * PRINCIPIOS DE LAYOUT
10
+ *
11
+ * - La responsividad depende del ancho REAL de la toolbar mediante
12
+ * container queries. No depende directamente del viewport.
13
+ *
14
+ * - toolbarLeft y toolbarRight aceptan ReactNode para permitir
15
+ * distintas combinaciones de búsqueda, filtros y acciones.
16
+ *
17
+ * - toolbarLeft representa el sector izquierdo de la toolbar.
18
+ *
19
+ * - toolbarRight representa el sector derecho y permanece alineado
20
+ * al extremo derecho incluso cuando el contenedor pierde ancho.
21
+ *
22
+ * - Los controles normales de toolbarRight se consideran fields:
23
+ * Select, MultiSelect, DateRange, Search u otros filtros.
24
+ *
25
+ * - Los fields tienen un ancho preferido, pueden reducirse y tienen
26
+ * un ancho máximo para evitar que un único control absorba todo
27
+ * el espacio disponible.
28
+ *
29
+ * - RbToolbarActionButton conserva su tamaño natural.
30
+ *
31
+ * - RbToolbarActions permite mantener varias acciones como un
32
+ * conjunto visual.
33
+ *
34
+ * - El orden de toolbarRight siempre corresponde al orden entregado
35
+ * por el consumidor. La toolbar no asume relaciones funcionales
36
+ * entre filtros y acciones.
37
+ *
38
+ * BACKWARD COMPATIBILITY
39
+ *
40
+ * - Cualquier elemento no reconocido continúa funcionando como un
41
+ * item normal de toolbar.
42
+ *
43
+ * - data-toolbar-actions y rbToolbarActions continúan soportados.
44
+ */
2
45
  export type RbTableToolbarProps = {
3
46
  title?: React.ReactNode;
4
47
  description?: React.ReactNode;
@@ -2,12 +2,12 @@ export { RbTable } from './RbTable';
2
2
  export { RbExcelTable } from './RbExcelTable';
3
3
  export { RbTableToolbar } from './RbTableToolbar';
4
4
  export { RbToolbarActionButton } from './toolbar/RbToolbarActionButton';
5
+ export { RbToolbarActions } from './toolbar/RbToolbarActions';
5
6
  export { RbToolbarDateRangeField } from './toolbar/RbToolbarDateRangeField';
6
7
  export { RbToolbarMultiSelectField } from './toolbar/RbToolbarMultiSelectField';
7
8
  export { RbToolbarSearchField } from './toolbar/RbToolbarSearchField';
8
9
  export { RbToolbarSelectField } from './toolbar/RbToolbarSelectField';
9
10
  export { formatRbExcelDate, formatRbExcelTime, getRbExcelValueAtPath, isRbExcelEmptyValue, isValidRbExcelDate, isValidRbExcelNumber, isValidRbExcelTime, parseRbExcelValue, setRbExcelValueAtPath, } from './excel/excel.helpers';
10
11
  export type { RbExcelCellContext, RbExcelCreateRowContext, RbExcelEditorContext, RbExcelFieldType, RbExcelImportContext, RbExcelParseContext, RbExcelRenderContext, RbExcelRowsChangeMeta, RbExcelRowsChangeSource, RbExcelTableActions, RbExcelTableColumn, RbExcelTableLabels, RbExcelTableProps, RbExcelTableRef, RbExcelValidationError, RbExcelValidationErrorInput, RbExcelValidationErrorSource, RbExcelValidationResult, RbExcelValueSource, } from './excel/excel.types';
11
- export * from './toolbar';
12
- export type { RbToolbarDateRangeValue, RbToolbarDateRangeFieldProps, } from './toolbar/RbToolbarDateRangeField';
12
+ export type { RbToolbarActionButtonProps, RbToolbarActionButtonVariant, RbToolbarActionsProps, RbToolbarDateRangeFieldProps, RbToolbarDateRangeValue, RbToolbarMultiSelectFieldProps, RbToolbarSearchFieldProps, RbToolbarSelectFieldProps, RbToolbarSelectOption, } from './toolbar';
13
13
  export type { RbAnyTableColumn, RbLegacyGridColumn, RbRowSelectionModel, RbRowsPerPageOption, RbTableAlign, RbTableBaseRow, RbTableCellParams, RbTableColumn, RbTableDensity, RbTableInitialState, RbTablePaginationMode, RbTablePaginationModel, RbTablePinnedColumns, RbTableProps, RbTableRowId, RbTableRowParams, RbTableSize, RbTableCellContextMenuParams, RbTableCellContextMenuPosition, } from './types';
@@ -5,5 +5,16 @@ export type RbToolbarActionButtonProps = React.ButtonHTMLAttributes<HTMLButtonEl
5
5
  icon?: React.ReactNode;
6
6
  loading?: boolean;
7
7
  };
8
+ /**
9
+ * Acción utilizable dentro de RbTableToolbar.
10
+ *
11
+ * data-toolbar-action permite que el layout de la
12
+ * toolbar reconozca una acción incluso cuando el
13
+ * componente está envuelto por Tooltip u otro
14
+ * elemento intermedio.
15
+ *
16
+ * Las acciones mantienen su tamaño natural y no
17
+ * utilizan el sizing flexible de los filtros.
18
+ */
8
19
  export declare function RbToolbarActionButton({ children, icon, loading, disabled, variant, className, type, ...props }: RbToolbarActionButtonProps): React.JSX.Element;
9
20
  export default RbToolbarActionButton;
@@ -3,5 +3,17 @@ export type RbToolbarActionsProps = React.HTMLAttributes<HTMLDivElement>;
3
3
  type RbToolbarActionsComponent = React.ForwardRefExoticComponent<RbToolbarActionsProps & React.RefAttributes<HTMLDivElement>> & {
4
4
  rbToolbarActions?: boolean;
5
5
  };
6
+ /**
7
+ * Agrupador visual de acciones de toolbar.
8
+ *
9
+ * No establece ninguna relación funcional entre
10
+ * las acciones ni entre estas y los filtros.
11
+ *
12
+ * El grupo conserva su ancho natural mientras
13
+ * existe espacio suficiente.
14
+ *
15
+ * Si el grupo completo supera el ancho disponible,
16
+ * puede reorganizar sus acciones internamente.
17
+ */
6
18
  export declare const RbToolbarActions: RbToolbarActionsComponent;
7
19
  export default RbToolbarActions;
@@ -0,0 +1,26 @@
1
+ import { StoryObj } from '@storybook/react-vite';
2
+ import { ComponentType } from 'react';
3
+ import { TopBarUserMenu } from '../../rb-components/topbar';
4
+ declare const _default: {
5
+ title: string;
6
+ component: ComponentType<any>;
7
+ tags: string[];
8
+ parameters: {
9
+ layout: string;
10
+ };
11
+ args: {
12
+ account: {
13
+ username: string;
14
+ avatarUrl: string;
15
+ options: {
16
+ label: string;
17
+ icon: import("react").JSX.Element;
18
+ onClick: () => void;
19
+ }[];
20
+ };
21
+ };
22
+ };
23
+ export default _default;
24
+ type Story = StoryObj<typeof TopBarUserMenu>;
25
+ export declare const Basico: Story;
26
+ export declare const SinOpciones: Story;