@zealicsolutions/web-ui 1.0.98-beta.7 → 1.0.98-beta.9

package/dist/esm/organisms/index.d.ts

@@ -1 +1,3 @@
+export * from './DataGrid';
+export { DataGridConfigurator } from './DataGridConfigurator/DataGridConfigurator';
 export { Organism } from './Organism/Organism';

package/dist/esm/setup/muiXLicense.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/setup/muiXLicense.js

@@ -0,0 +1,2 @@
+import{LicenseInfo as e}from"../node_modules/@mui/x-license/utils/licenseInfo.js";e.setLicenseKey("63bb688efedb479b44a1b4526fe75808Tz05ODQ2NSxFPTE3NTgzNzg1NDgwMDAsUz1wcm8sTE09c3Vic2NyaXB0aW9uLFBWPVEzLTIwMjQsS1Y9Mg==");
+//# sourceMappingURL=muiXLicense.js.map

package/dist/esm/setup/muiXLicense.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"muiXLicense.js","sources":["../../../../src/setup/muiXLicense.ts"],"sourcesContent":[null],"names":["LicenseInfo","setLicenseKey"],"mappings":"kFAGAA,EAAYC,cACR"}

package/dist/index.d.ts

@@ -3079,6 +3079,219 @@ declare const ContentWrapper: react__default.FC<ContentWrapperProps>;
 
 declare const SpeedDial: react__default.FC<SpeedDialProps>;
 
+type RendererName = 'DefaultTextCell' | 'StatusChipCell' | 'AvatarTextCell' | 'DateCell' | 'BooleanIconCell' | 'EmailLinkCell' | 'PhoneLinkCell' | 'CurrencyCell' | 'RatingCell' | 'ActionButtonCell' | string;
+type LucideIconName = 'Pencil' | 'Eye' | 'Trash2' | 'FileEdit' | 'Check' | 'X' | string;
+interface ActionButtonStyle {
+    label?: string;
+    icon?: LucideIconName;
+    variant?: 'soft' | 'solid' | 'text';
+    color?: 'primary' | 'secondary' | 'error' | 'info' | string;
+    hoverColor?: string;
+    size?: 'sm' | 'md';
+}
+interface BaseActionConfig {
+    idField?: string;
+    fieldMap?: Record<string, string>;
+    button?: ActionButtonStyle;
+}
+type ColumnActionConfig = ({
+    type: 'edit_record';
+    targetFormId: string;
+} & BaseActionConfig) | ({
+    type: 'view_record_details';
+    routeKey: string;
+} & BaseActionConfig) | ({
+    type: 'delete_record';
+    apiKey: string;
+    confirm?: {
+        title?: string;
+        body?: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+    };
+} & BaseActionConfig) | ({
+    type: 'custom';
+    eventKey: string;
+    payloadTemplate?: Record<string, string>;
+} & BaseActionConfig);
+type PredefinedActionsConfig = {
+    idField?: string;
+    gap?: number;
+    edit?: {
+        enabled: boolean;
+        targetFormId?: string;
+        tooltip?: string;
+        icon?: LucideIconName;
+        variant?: 'text' | 'outlined' | 'contained';
+    };
+    view?: {
+        enabled: boolean;
+        routeKey?: string;
+        tooltip?: string;
+        icon?: LucideIconName;
+        variant?: 'text' | 'outlined' | 'contained';
+    };
+    delete?: {
+        enabled: boolean;
+        confirmText?: string;
+        tooltip?: string;
+        icon?: LucideIconName;
+        variant?: 'text' | 'outlined' | 'contained';
+    };
+};
+type ColumnKind = 'data' | 'component';
+interface ColumnBaseConfig {
+    id: string;
+    headerName: string;
+    width: number;
+    filterable: boolean;
+    sortable?: boolean;
+    renderer: RendererName;
+    rendererProps?: Record<string, unknown>;
+    actionConfig?: ColumnActionConfig;
+}
+interface DataColumnConfig extends ColumnBaseConfig {
+    kind: 'data';
+    field: string;
+}
+interface ComponentColumnConfig extends ColumnBaseConfig {
+    kind: 'component';
+    componentRenderer: RendererName;
+    componentProps?: Record<string, unknown>;
+}
+type ColumnConfig = DataColumnConfig | ComponentColumnConfig;
+interface DataGridOrganismConfig {
+    columns: ColumnConfig[];
+    toolbar?: {
+        search?: boolean;
+        exportCsv?: boolean;
+        quickFilters?: Array<{
+            label: string;
+            columnField: string;
+            value: string;
+        }>;
+        densityToggle?: boolean;
+        densityDefault?: 'compact' | 'comfortable';
+    };
+}
+interface DataGridQuery {
+    page: number;
+    pageSize: number;
+    search?: string;
+    filters?: Record<string, unknown>;
+    quickFilters?: Record<string, string | string[]>;
+}
+interface DataGridPage {
+    rows: Array<Record<string, unknown>>;
+    total: number;
+}
+interface DataGridOrganismProps {
+    organismId: string;
+    configuration: DataGridOrganismConfig;
+    loadRows: (organismId: string, query: DataGridQuery) => Promise<DataGridPage>;
+    onAction?: (payload: {
+        action: ColumnActionConfig;
+        row: Record<string, unknown>;
+    }) => void;
+    emptyState?: ReactNode;
+    errorState?: (error: Error) => ReactNode;
+    refreshSignal?: number;
+}
+
+declare const DataGridOrganism: react.NamedExoticComponent<DataGridOrganismProps>;
+
+type ActionButtonCellProps = {
+    tooltip?: string;
+    label?: string;
+    icon?: React.ReactNode | string;
+    variant?: 'text' | 'outlined' | 'contained';
+    color?: 'primary' | 'secondary' | 'error' | 'info' | 'inherit';
+    size?: 'small' | 'medium';
+    onClick?: () => void;
+};
+declare const ActionButtonCell: FC<ActionButtonCellProps>;
+
+type AvatarTextCellProps = {
+    row: Record<string, unknown>;
+    avatarField: string;
+    textField: string;
+};
+declare const AvatarTextCell: FC<AvatarTextCellProps>;
+
+type BooleanIconCellProps = {
+    value: boolean | string | number | null | undefined;
+    trueLabel?: string;
+    falseLabel?: string;
+};
+declare const BooleanIconCell: FC<BooleanIconCellProps>;
+
+type CurrencyCellProps = {
+    value: number | string | null | undefined;
+    currency?: string;
+    locale?: string;
+};
+declare const CurrencyCell: FC<CurrencyCellProps>;
+
+type DateCellProps = {
+    value: string | number | Date | null | undefined;
+    formatString?: string;
+};
+declare const DateCell: FC<DateCellProps>;
+
+type DefaultTextCellProps = {
+    value: string | number | boolean | null | undefined;
+};
+declare const DefaultTextCell: FC<DefaultTextCellProps>;
+
+type EmailLinkCellProps = {
+    value: string | null | undefined;
+};
+declare const EmailLinkCell: FC<EmailLinkCellProps>;
+
+type PhoneLinkCellProps = {
+    value: string | number | null | undefined;
+};
+declare const PhoneLinkCell: FC<PhoneLinkCellProps>;
+
+type RatingCellProps = {
+    value: number | string | null | undefined;
+    max?: number;
+};
+declare const RatingCell: FC<RatingCellProps>;
+
+type RendererComponent = FC<Record<string, unknown>>;
+declare const CellRendererRegistry: Record<string, RendererComponent>;
+
+type StatusChipCellProps = {
+    value: string;
+    mapping?: Record<string, {
+        label: string;
+        color?: 'default' | 'success' | 'error' | 'warning' | 'info';
+    }>;
+};
+declare const StatusChipCell: FC<StatusChipCellProps>;
+
+type DataGridConfiguratorProps = {
+    value: DataGridOrganismConfig;
+    availableFields: Array<{
+        id: string;
+        name: string;
+        dataType: string;
+    }>;
+    rendererSuggestions?: Record<string, RendererName>;
+    onChange: (next: DataGridOrganismConfig) => void;
+    onSave: (next: DataGridOrganismConfig) => Promise<void>;
+    actionTargets?: Array<{
+        id: string;
+        name: string;
+    }>;
+    viewRoutes?: Array<{
+        key: string;
+        label: string;
+    }>;
+};
+declare const DataGridConfigurator: react.NamedExoticComponent<DataGridConfiguratorProps>;
+
 type OrganismProps = {
     organism: OrganismDTO;
 };
@@ -3114,4 +3327,4 @@ declare const toastStyles: _emotion_react.SerializedStyles;
 
 declare const useMediaQuery: (breakpointSize: BreakpointSizesTypes$1) => boolean;
 
-export { AccordionMoleculeType, AccountButtonContext, AccountButtonContextType, AccountButtonProvider, AccountButtonProviderProps, ActionEventType, ActionProperties, ActionType, ActionTypes, AdditionalContainerProps, AlertMolecule, AlertMoleculeProps, AlertMoleculeType, AnnotationsList, ApiContext, ApiInterface, ApiProvider, AvatarMoleculeType, BackgroundImage, BadgeMolecule, BadgeMoleculeProps, BadgeMoleculeType, BaseMolecule, BaseMoleculeType, BaseSpeedDialItem, BaseStateValue, BaseTextButton, BasicTextField, BasicTextFieldMoleculeType, BasicTextFieldProps, BinaryRadioButtons, BinaryRadioButtonsMoleculeType, BinaryRadioButtonsProps, BooleanProperties, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMoleculeType, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CalendarMoleculeType, Checkbox, CheckboxMoleculeType, CheckboxProps, Checklist, ChecklistItem, ChecklistItemType, ChecklistProperties, ChecklistProps, ChecklistsMoleculeType, ChipMolecule, ChipMoleculeProps, ChipMoleculeType, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorProperties, ConditionConfig, ConditionConfigProperties, ConditionCriteria, ConfigurationItem, ConfigurationItemInfo, ConsentFieldMoleculeType, ConsentMolecule, ConsentType, Container, ContainerAlignItemsType, ContainerComponentProps, ContainerConfig, ContainerPositionType, ContainerProperties, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, ContentWrapper, ContentWrapperProps, CountValidationTypes, CriteriaType, CurrencyInputFieldMoleculeType, CustomStep, CustomValidation, CustomValidationProps, CustomValidationRule, DataCaptureProperties, DataConnectionValues, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DateCalendar, DateCalendarMoleculeProps, DateCalendarMoleculeType, DateCalendarProps, DatePickerMolecule, DatePickerMoleculeProps, DatePickerMoleculeType, DateProperties, Divider, DividerItemType, DividerMoleculeType, DividerProps, DownloadFile, Drawer, DrawerMoleculeType, DrawerState, EmailInputFieldMoleculeType, ErrorText, FontSizesTypes, FontWeight, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, FormStepContext, FormStepContextProvider, FormStepContextProviderProps, FormStepContextType, HorizontalButtons, HorizontalButtonsProps, HorizontalPadding, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconRenderer, IconRendererProps, IconWrapper, Image, ImageMoleculeType, ImageProperties, ImageProps, Input, InputFieldInternalConfigProps, InputIconProps, InputProps, LayoutContext, LayoutContextType, LayoutProvider, LayoutProviderProps, Link, LinkMoleculeType, LinkProperties, LinkProps, LinkTypes, LinkVariant, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MaxRuleValidation, MenuMoleculeType, MetadataStateConfig, MetadataType, MinRuleValidation, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeItemTypes, MoleculeTypes, NumericInputFieldMoleculeType, ObjectStateProperties, Option, Organism, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, Padding, PaddingProps, PaddingVariants, PasswordFields, PasswordRuleValidation, PasswordSetup, PasswordSetupMoleculeType, PasswordSetupProps, PdfDocument, PdfDocumentProps, PhoneNumberInputFieldMoleculeType, PopupPropsType, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RatingMolecule, RatingMoleculeProps, RatingMoleculeType, RegularImage, RegularImageProps, RichTextEditorProps, RichTextItemType, RichTextViewer, SegmentationType, Select, SelectInternalConfigurationOptions, SelectMolecule, SelectMoleculeOption, SelectMoleculeProps, SelectMoleculeType, SelectOption, SelectProps, SeoTags, SetPasswordRuleValidation, SimpleTextMoleculeType, SizesTypes, SliderMolecule, SliderMoleculeProps, SliderMoleculeType, SliderProps, Spacer, SpacerProps, SpeedDial, SpeedDialActionItemProps, SpeedDialActionItemType, SpeedDialItem, SpeedDialItemType, SpeedDialMoleculeType, SpeedDialProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, StateProperties, Stepper, StepperMoleculeType, StepperOrientation, StepperProps, StyleWrapper, SwitchMolecule, SwitchMoleculeProps, SwitchMoleculeType, TabsMoleculeType, TextAlign, TextButton, TextButtonProps, TextElementProps, TextItemType, TextMolecule, TextMoleculeType, TextProperties, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, TimePickerMolecule, TimePickerMoleculeProps, TimePickerMoleculeType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoMoleculeType, VideoProperties, VideoProps, VisitMoleculeProps, VisitMoleculeType, WrappedContainerType, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, defaultTheme, passwordValidationMapper, richTextDefaultValue, toast, toastStyles, useAccountButtonContext, useApi, useButtonActionsContext, useFormStepContext, useLayoutContext, useMediaQuery, useMlrRichTextViewerContext, useOrganismContext, useStateContext };
+export { AccordionMoleculeType, AccountButtonContext, AccountButtonContextType, AccountButtonProvider, AccountButtonProviderProps, ActionButtonCell, ActionButtonStyle, ActionEventType, ActionProperties, ActionType, ActionTypes, AdditionalContainerProps, AlertMolecule, AlertMoleculeProps, AlertMoleculeType, AnnotationsList, ApiContext, ApiInterface, ApiProvider, AvatarMoleculeType, AvatarTextCell, BackgroundImage, BadgeMolecule, BadgeMoleculeProps, BadgeMoleculeType, BaseActionConfig, BaseMolecule, BaseMoleculeType, BaseSpeedDialItem, BaseStateValue, BaseTextButton, BasicTextField, BasicTextFieldMoleculeType, BasicTextFieldProps, BinaryRadioButtons, BinaryRadioButtonsMoleculeType, BinaryRadioButtonsProps, BooleanIconCell, BooleanProperties, BreakpointSizesTypes, Button, ButtonActionsContext, ButtonActionsContextType, ButtonActionsProvider, ButtonActionsProviderProps, ButtonMoleculeType, ButtonProps, COMMUNICATION_LINK_DATA_TEXT, COMMUNICATION_LINK_DATA_URL, COMMUNICATION_LINK_ELEMENT_ID, CalendarMoleculeType, CellRendererRegistry, Checkbox, CheckboxMoleculeType, CheckboxProps, Checklist, ChecklistItem, ChecklistItemType, ChecklistProperties, ChecklistProps, ChecklistsMoleculeType, ChipMolecule, ChipMoleculeProps, ChipMoleculeType, Circle, CircleBoxProps, CirclesWrapper, CircularIndicator, CircularIndicatorProps, CircularIndicatorStyledComponent, ColorProperties, ColumnActionConfig, ColumnBaseConfig, ColumnConfig, ColumnKind, ComponentColumnConfig, ConditionConfig, ConditionConfigProperties, ConditionCriteria, ConfigurationItem, ConfigurationItemInfo, ConsentFieldMoleculeType, ConsentMolecule, ConsentType, Container, ContainerAlignItemsType, ContainerComponentProps, ContainerConfig, ContainerPositionType, ContainerProperties, ContainerProps, ContainerPropsType, ContainerScrollBehaviourType, ContainerTemplateType, ContainerType, ContainerWrapper, ContentWrapper, ContentWrapperProps, CountValidationTypes, CriteriaType, CurrencyCell, CurrencyInputFieldMoleculeType, CustomStep, CustomValidation, CustomValidationProps, CustomValidationRule, DataCaptureProperties, DataColumnConfig, DataConnectionValues, DataGridConfigurator, DataGridOrganism, DataGridOrganismConfig, DataGridOrganismProps, DataGridPage, DataGridQuery, DataModelFieldFormat, DataModelFieldFormatCodeTypes, DataModelFieldFormatValueTypes, DateCalendar, DateCalendarMoleculeProps, DateCalendarMoleculeType, DateCalendarProps, DateCell, DatePickerMolecule, DatePickerMoleculeProps, DatePickerMoleculeType, DateProperties, DefaultTextCell, Divider, DividerItemType, DividerMoleculeType, DividerProps, DownloadFile, Drawer, DrawerMoleculeType, DrawerState, EmailInputFieldMoleculeType, EmailLinkCell, ErrorText, FontSizesTypes, FontWeight, FormContainerProps, FormDataStateConfig, FormOrganismItem, FormStateType, FormStepContainerProps, FormStepContext, FormStepContextProvider, FormStepContextProviderProps, FormStepContextType, HorizontalButtons, HorizontalButtonsProps, HorizontalPadding, Icon, IconButton, IconButtonProps, IconNames, IconProps, IconRenderer, IconRendererProps, IconWrapper, Image, ImageMoleculeType, ImageProperties, ImageProps, Input, InputFieldInternalConfigProps, InputIconProps, InputProps, LayoutContext, LayoutContextType, LayoutProvider, LayoutProviderProps, Link, LinkMoleculeType, LinkProperties, LinkProps, LinkTypes, LinkVariant, LucideIconName, MATRIX_MESSAGE_DATA_ID, MATRIX_MESSAGE_ELEMENT_ID, MaxRuleValidation, MenuMoleculeType, MetadataStateConfig, MetadataType, MinRuleValidation, MlrRichTextViewerContext, MlrRichTextViewerContextType, MlrRichTextViewerProvider, MlrRichTextViewerProviderProps, ModalWrapper, Molecule, MoleculeItemTypes, MoleculeTypes, NumericInputFieldMoleculeType, ObjectStateProperties, Option, Organism, OrganismContext, OrganismContextProvider, OrganismContextProviderProps, OrganismContextType, OrganismItem, Padding, PaddingProps, PaddingVariants, PasswordFields, PasswordRuleValidation, PasswordSetup, PasswordSetupMoleculeType, PasswordSetupProps, PdfDocument, PdfDocumentProps, PhoneLinkCell, PhoneNumberInputFieldMoleculeType, PopupPropsType, PredefinedActionsConfig, RadioButtonInternalConfigProps, RadioButtons, RadioButtonsProps, RadioGroupWrapper, RatingCell, RatingMolecule, RatingMoleculeProps, RatingMoleculeType, RegularImage, RegularImageProps, RendererName, RichTextEditorProps, RichTextItemType, RichTextViewer, SegmentationType, Select, SelectInternalConfigurationOptions, SelectMolecule, SelectMoleculeOption, SelectMoleculeProps, SelectMoleculeType, SelectOption, SelectProps, SeoTags, SetPasswordRuleValidation, SimpleTextMoleculeType, SizesTypes, SliderMolecule, SliderMoleculeProps, SliderMoleculeType, SliderProps, Spacer, SpacerProps, SpeedDial, SpeedDialActionItemProps, SpeedDialActionItemType, SpeedDialItem, SpeedDialItemType, SpeedDialMoleculeType, SpeedDialProps, Spinner, StateActionType, StateConfigType, StateContext, StateContextProvider, StateContextProviderProps, StateContextType, StateEventType, StateListenerConfigType, StateModifierConfigType, StateProperties, StatusChipCell, Stepper, StepperMoleculeType, StepperOrientation, StepperProps, StyleWrapper, SwitchMolecule, SwitchMoleculeProps, SwitchMoleculeType, TabsMoleculeType, TextAlign, TextButton, TextButtonProps, TextElementProps, TextItemType, TextMolecule, TextMoleculeType, TextProperties, TextProps, TextTypes, TextWrapper, TextWrapperProps, ThemeColors, ThemeColorsType, ThemeDevicesType, ThemeSizesType, ThemeTextType, TimePickerMolecule, TimePickerMoleculeProps, TimePickerMoleculeType, Tooltip, TooltipProps, TouchableOpacity, TouchableOpacityProps, ValidationTag, ValidationTagProps, ValidationTagStatus, VerticalPadding, Video, VideoMoleculeType, VideoProperties, VideoProps, VisitMoleculeProps, VisitMoleculeType, WrappedContainerType, ZealTheme, ZealThemeProvider, ZealUIModal, ZealUIModalProps, defaultTheme, passwordValidationMapper, richTextDefaultValue, toast, toastStyles, useAccountButtonContext, useApi, useButtonActionsContext, useFormStepContext, useLayoutContext, useMediaQuery, useMlrRichTextViewerContext, useOrganismContext, useStateContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "1.0.98-beta.7",
+  "version": "1.0.98-beta.9",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"
@@ -112,6 +112,10 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/x-data-grid": "7.2.0",
+    "@mui/x-data-grid-pro": "7.2.0",
+    "@mui/icons-material": "7.2.0",
+    "@mui/x-license": "7.2.0",
     "@mui/material": "7.2.0",
     "@mui/system": "7.2.0",
     "@mui/utils": "^7.2.0",