@zealicsolutions/web-ui 1.0.133 → 1.0.135

package/dist/esm/organisms/DataGrid/types/types.d.ts

@@ -0,0 +1,232 @@
+import type { ReactNode } from 'react';
+export type RendererName = 'DefaultTextCell' | 'StatusChipCell' | 'AvatarTextCell' | 'DateCell' | 'BooleanIconCell' | 'EmailLinkCell' | 'PhoneLinkCell' | 'CurrencyCell' | 'RatingCell' | 'ActionButtonCell' | string;
+export type LucideIconName = 'Pencil' | 'Eye' | 'Trash2' | 'FileEdit' | 'Check' | 'X' | string;
+export interface ActionButtonStyle {
+    label?: string;
+    icon?: LucideIconName;
+    variant?: 'soft' | 'solid' | 'text';
+    color?: 'primary' | 'secondary' | 'error' | 'info' | string;
+    hoverColor?: string;
+    size?: 'sm' | 'md';
+}
+export interface BaseActionConfig {
+    idField?: string;
+    fieldMap?: Record<string, string>;
+    button?: ActionButtonStyle;
+}
+export 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);
+export 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';
+    };
+};
+export type ColumnKind = 'data' | 'component';
+export interface ColumnBaseConfig {
+    id: string;
+    headerName: string;
+    width: number;
+    filterable: boolean;
+    sortable?: boolean;
+    renderer: RendererName;
+    rendererProps?: Record<string, unknown>;
+    actionConfig?: ColumnActionConfig;
+}
+export interface DataColumnConfig extends ColumnBaseConfig {
+    kind: 'data';
+    field: string;
+}
+export interface ComponentColumnConfig extends ColumnBaseConfig {
+    kind: 'component';
+    componentRenderer: RendererName;
+    componentProps?: Record<string, unknown>;
+}
+export type ColumnConfig = DataColumnConfig | ComponentColumnConfig;
+export type DataGridViewMode = 'table' | 'list' | 'auto';
+export interface DataGridListMappingConfig {
+    primaryFieldId?: string;
+    secondaryFieldId?: string;
+    metaFieldIds?: string[];
+    trailingComponentIds?: string[];
+}
+export interface DataGridListLayoutConfig {
+    templateColumns?: string;
+    gap?: number;
+    verticalGap?: number;
+}
+export interface DataGridListA11yConfig {
+    primarySlot?: string;
+}
+export interface DataGridListConfig {
+    mapping?: DataGridListMappingConfig;
+    layout?: DataGridListLayoutConfig;
+    a11y?: DataGridListA11yConfig;
+}
+export interface DataGridOrganismConfig {
+    columns: ColumnConfig[];
+    /** Optional view mode for the grid: table (default), list, or auto (responsive) */
+    view?: DataGridViewMode;
+    /** Optional list configuration used when view is set to 'list' */
+    list?: DataGridListConfig;
+    toolbar?: {
+        search?: boolean;
+        exportCsv?: boolean;
+        quickFilters?: Array<{
+            label: string;
+            columnField: string;
+            value: string;
+        }>;
+        densityToggle?: boolean;
+        densityDefault?: 'compact' | 'comfortable';
+        /** Optional search control configuration rendered in the toolbar */
+        searchControl?: {
+            placeholder?: string;
+            autoFocus?: boolean;
+            borderRadius?: number;
+            backgroundColor?: string;
+            borderColor?: string;
+        };
+    };
+    /** Optional layout configuration for controls in the toolbar area */
+    layout?: {
+        controls?: {
+            controlHeight?: number;
+            searchWidth?: number;
+            columnGap?: number;
+            marginTop?: number;
+        };
+    };
+    /** Visual styles applied to wrapper/toolbar/quick-filters/grid */
+    styles?: {
+        /** Overall background for the grid area */
+        backgroundColor?: string;
+        /** Column headers styling */
+        header?: {
+            backgroundColor?: string;
+            fontSize?: number;
+        };
+        /** Row-level styling */
+        row?: {
+            height?: number;
+            hoverColor?: string;
+            striped?: boolean;
+        };
+        /** Wrapper around toolbar + grid */
+        wrapper?: {
+            backgroundColor?: string;
+            borderColor?: string;
+            borderRadius?: number;
+            paddingX?: number;
+            paddingY?: number;
+            elevation?: number;
+        };
+        /** Right-side toolbar (search + density + export) container */
+        toolbar?: {
+            backgroundColor?: string;
+            borderColor?: string;
+            borderRadius?: number;
+            gap?: number;
+        };
+        /** Quick filters chip appearance */
+        quickFilters?: {
+            chipBackgroundColor?: string;
+            chipTextColor?: string;
+            chipBorderColor?: string;
+            chipBorderRadius?: number;
+            chipGap?: number;
+        };
+        /** Export button styles */
+        exportButton?: {
+            backgroundColor?: string;
+            borderColor?: string;
+            iconColor?: string;
+            borderRadius?: number;
+        };
+        /** Density toggle styles */
+        densityToggle?: {
+            backgroundColor?: string;
+            selectedBackgroundColor?: string;
+            selectedTextColor?: string;
+            borderRadius?: number;
+        };
+    };
+}
+export interface DataGridQuery {
+    page: number;
+    pageSize: number;
+    search?: string;
+    filters?: Record<string, unknown>;
+    quickFilters?: Record<string, string | string[]>;
+    /** Optional Record-Write Object record id parsed from URL; forwarded to backend. */
+    rwoRecordId?: string;
+}
+export interface DataGridPage {
+    rows: Array<Record<string, unknown>>;
+    total: number;
+}
+export interface DataGridOrganismProps {
+    organismId: string;
+    configuration: DataGridOrganismConfig;
+    loadRows: (organismId: string, query: DataGridQuery) => Promise<DataGridPage>;
+    onAction?: (payload: {
+        action: ColumnActionConfig;
+        row: Record<string, unknown>;
+    }) => void;
+    errorState?: (error: Error) => ReactNode;
+    refreshSignal?: number;
+    /**
+     * Controlled-data mode props. When provided, the organism will render using these values
+     * and will not call loadRows. Query changes are emitted via onQueryChange for the host to refetch.
+     */
+    rows?: Array<Record<string, unknown>>;
+    rowCount?: number;
+    loading?: boolean;
+    /**
+     * Emitted when pagination/search/quick-filters change inside the grid UI.
+     */
+    onQueryChange?: (query: DataGridQuery) => void;
+    /**
+     * Optional controlled search value and handler. When provided, the internal search field
+     * will present this value and invoke onSearchChange instead of managing local state.
+     */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+}

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

@@ -0,0 +1,5 @@
+import { OrganismDTO } from 'organisms/types';
+export type OrganismProps = {
+    organism: OrganismDTO;
+};
+export declare const Organism: ({ organism }: OrganismProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/organisms/Organism/Organism.examples.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Organism } from '../../index';
+type Story = StoryObj<typeof Organism>;
+declare const meta: Meta<typeof Organism>;
+export default meta;
+export declare const OrganismExamples: Story;
+export declare const SimpleDisplayOrganism: Story;
+export declare const ProductCatalogOrganism: Story;

package/dist/esm/organisms/Organism/Organism.js

@@ -0,0 +1,2 @@
+import{jsx as r}from"@emotion/react/jsx-runtime";import{OrganismItem as o}from"../../containers/OrganismItem.js";import{toOrganismItem as m}from"../helpers.js";var t=function(t){var e=t.organism;return r(o,{item:m(e.body)})};export{t as Organism};
+//# sourceMappingURL=Organism.js.map

package/dist/esm/organisms/Organism/Organism.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Organism.js","sources":["../../../../../src/organisms/Organism/Organism.tsx"],"sourcesContent":[null],"names":["Organism","_a","organism","_jsx","OrganismItem","item","toOrganismItem","body"],"mappings":"gKAQO,IAAMA,EAAW,SAACC,GAAE,IAAAC,EAAQD,EAAAC,SACjC,OAAOC,EAACC,EAAa,CAAAC,KAAMC,EAAeJ,EAASK,OACrD"}

package/dist/esm/organisms/Organism/Organism.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryFn } from '@storybook/react';
+import { Organism as OrganismComponent } from './Organism';
+declare const _default: {
+    title: string;
+    component: ({ organism }: import("./Organism").OrganismProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const Organism: StoryFn<typeof OrganismComponent>;

package/dist/esm/organisms/Organism/mockData.d.ts

@@ -0,0 +1,410 @@
+export declare const simpleOrganismDTO: {
+    id: string;
+    name: string;
+    type: string;
+    subtype: string;
+    body: {
+        instance: string;
+        type: string;
+        config: {
+            compact: {
+                containerProps: {};
+                containerStyle: {
+                    padding: string;
+                };
+            };
+            wide: {
+                containerProps: {};
+                containerStyle: {
+                    padding: string;
+                };
+            };
+            props: {
+                formProps: {
+                    mode: string;
+                };
+                styles: {
+                    display: string;
+                    flexDirection: string;
+                    gap: string;
+                    padding: string;
+                };
+            };
+        };
+        metadata: {
+            display: {
+                type: string;
+                itemsPerStep: number;
+            };
+            validation: string;
+        };
+        children: {
+            instance: string;
+            config: {
+                compact: {
+                    containerProps: {};
+                    containerStyle: {
+                        display: string;
+                        gap: string;
+                        width: string;
+                        flexDirection: string;
+                        alignItems: string;
+                    };
+                };
+                wide: {
+                    containerProps: {};
+                    containerStyle: {
+                        display: string;
+                        gap: string;
+                        width: string;
+                        flexDirection: string;
+                        alignItems: string;
+                    };
+                };
+                props: {
+                    formStepProps: {
+                        formStepName: string;
+                        order: number;
+                        conditionConfig: null;
+                        formStepStyles: {
+                            alignItems: string;
+                        };
+                    };
+                };
+            };
+            type: string;
+            metadata: {
+                validation: string;
+                hasOwnButton: boolean;
+            };
+            children: {
+                type: string;
+                config: {
+                    wide: {
+                        containerProps: {};
+                        containerStyle: {
+                            display: string;
+                            gap: string;
+                            width: string;
+                            flexDirection: string;
+                            maxWidth: string;
+                        };
+                    };
+                    compact: {
+                        containerProps: {};
+                        containerStyle: {
+                            display: string;
+                            gap: string;
+                            width: string;
+                            flexDirection: string;
+                            maxWidth: string;
+                        };
+                    };
+                };
+                metadata: {
+                    group: string[];
+                };
+                instance: string;
+                children: ({
+                    instance: string;
+                    type: string;
+                    properties: {
+                        image: {
+                            attributeType: string;
+                            imageSource: string;
+                            id: string;
+                        };
+                        altText: {
+                            attributeType: string;
+                            text: string;
+                            id: string;
+                        };
+                        link: {
+                            attributeType: string;
+                            id: string;
+                        };
+                        text?: undefined;
+                        seoStyle?: undefined;
+                        fontVariant?: undefined;
+                        color?: undefined;
+                        passwordFieldLabel?: undefined;
+                        reenteredPasswordFieldLabel?: undefined;
+                        passwordFieldRequired?: undefined;
+                        reenteredPasswordFieldRequired?: undefined;
+                        dataModelField?: undefined;
+                        required?: undefined;
+                        title?: undefined;
+                        actionTypes?: undefined;
+                        action?: undefined;
+                    };
+                    config: {
+                        props: {
+                            width: string;
+                            height: string;
+                            behaveAs: string;
+                            isRichText?: undefined;
+                            validationLabel?: undefined;
+                            passwordInputProps?: undefined;
+                            reenteredPasswordInputProps?: undefined;
+                            fullWidth?: undefined;
+                        };
+                    };
+                    organismLibraryMoleculeId: string;
+                    moleculeLibraryId: string;
+                    metadata: {
+                        group: string[];
+                        isTrigger: boolean;
+                        notEditable?: undefined;
+                        isAction?: undefined;
+                    };
+                    id: string;
+                } | {
+                    instance: string;
+                    type: string;
+                    properties: {
+                        text: {
+                            attributeType: string;
+                            isRichText: boolean;
+                            required: boolean;
+                            showRichTextToolbar: boolean;
+                            text: string;
+                            id: string;
+                        };
+                        seoStyle: {
+                            attributeType: string;
+                            options: {
+                                id: string;
+                                label: string;
+                                value: string;
+                            }[];
+                            value: string;
+                            id: string;
+                        };
+                        fontVariant: {
+                            attributeType: string;
+                            options: {
+                                id: string;
+                                label: string;
+                                value: string;
+                            }[];
+                            value: string;
+                            id: string;
+                        };
+                        color: {
+                            attributeType: string;
+                            color: string;
+                            id: string;
+                        };
+                        image?: undefined;
+                        altText?: undefined;
+                        link?: undefined;
+                        passwordFieldLabel?: undefined;
+                        reenteredPasswordFieldLabel?: undefined;
+                        passwordFieldRequired?: undefined;
+                        reenteredPasswordFieldRequired?: undefined;
+                        dataModelField?: undefined;
+                        required?: undefined;
+                        title?: undefined;
+                        actionTypes?: undefined;
+                        action?: undefined;
+                    };
+                    config: {
+                        props: {
+                            isRichText: boolean;
+                            width?: undefined;
+                            height?: undefined;
+                            behaveAs?: undefined;
+                            validationLabel?: undefined;
+                            passwordInputProps?: undefined;
+                            reenteredPasswordInputProps?: undefined;
+                            fullWidth?: undefined;
+                        };
+                    };
+                    organismLibraryMoleculeId: string;
+                    moleculeLibraryId: string;
+                    metadata: {
+                        group: string[];
+                        isTrigger?: undefined;
+                        notEditable?: undefined;
+                        isAction?: undefined;
+                    };
+                    id: string;
+                } | {
+                    instance: string;
+                    type: string;
+                    metadata: {
+                        group: string[];
+                        notEditable: boolean;
+                        isTrigger?: undefined;
+                        isAction?: undefined;
+                    };
+                    config: {
+                        props: {
+                            validationLabel: string;
+                            passwordInputProps: {
+                                inputProps: {
+                                    type: string;
+                                    placeholder: string;
+                                };
+                            };
+                            reenteredPasswordInputProps: {
+                                inputProps: {
+                                    type: string;
+                                    placeholder: string;
+                                };
+                            };
+                            width?: undefined;
+                            height?: undefined;
+                            behaveAs?: undefined;
+                            isRichText?: undefined;
+                            fullWidth?: undefined;
+                        };
+                    };
+                    properties: {
+                        passwordFieldLabel: {
+                            attributeType: string;
+                            isRichText: boolean;
+                            required: boolean;
+                            showRichTextToolbar: boolean;
+                            text: string;
+                            id: string;
+                        };
+                        reenteredPasswordFieldLabel: {
+                            attributeType: string;
+                            isRichText: boolean;
+                            required: boolean;
+                            showRichTextToolbar: boolean;
+                            text: string;
+                            id: string;
+                        };
+                        passwordFieldRequired: {
+                            attributeType: string;
+                            id: string;
+                        };
+                        reenteredPasswordFieldRequired: {
+                            attributeType: string;
+                            id: string;
+                        };
+                        dataModelField: {
+                            attributeType: string;
+                            required: boolean;
+                            dataModelField: {
+                                dataModelFieldId: string;
+                                entitySubtypeId: string;
+                                dataFieldName: string;
+                                entitySubtypeName: string;
+                                defaultValue: null;
+                                format: {
+                                    id: string;
+                                    label: string;
+                                    value: string;
+                                    code: string;
+                                    config: {
+                                        dataModelFieldType: string;
+                                    };
+                                };
+                            };
+                            id: string;
+                        };
+                        required: {
+                            attributeType: string;
+                            value: boolean;
+                            id: string;
+                        };
+                        image?: undefined;
+                        altText?: undefined;
+                        link?: undefined;
+                        text?: undefined;
+                        seoStyle?: undefined;
+                        fontVariant?: undefined;
+                        color?: undefined;
+                        title?: undefined;
+                        actionTypes?: undefined;
+                        action?: undefined;
+                    };
+                    organismLibraryMoleculeId: string;
+                    moleculeLibraryId: string;
+                    id: string;
+                } | {
+                    instance: string;
+                    type: string;
+                    properties: {
+                        title: {
+                            attributeType: string;
+                            isRichText: boolean;
+                            required: boolean;
+                            showRichTextToolbar: boolean;
+                            text: string;
+                            id: string;
+                        };
+                        actionTypes: {
+                            attributeType: string;
+                            required: boolean;
+                            options: {
+                                id: string;
+                                label: string;
+                                value: string;
+                            }[];
+                            value: string;
+                            id: string;
+                        };
+                        action: {
+                            attributeType: string;
+                            action: {
+                                type: string;
+                                submit: {};
+                            };
+                            id: string;
+                        };
+                        image?: undefined;
+                        altText?: undefined;
+                        link?: undefined;
+                        text?: undefined;
+                        seoStyle?: undefined;
+                        fontVariant?: undefined;
+                        color?: undefined;
+                        passwordFieldLabel?: undefined;
+                        reenteredPasswordFieldLabel?: undefined;
+                        passwordFieldRequired?: undefined;
+                        reenteredPasswordFieldRequired?: undefined;
+                        dataModelField?: undefined;
+                        required?: undefined;
+                    };
+                    metadata: {
+                        group: string[];
+                        isAction: boolean;
+                        isTrigger: boolean;
+                        notEditable: boolean;
+                    };
+                    config: {
+                        props: {
+                            fullWidth: boolean;
+                            width?: undefined;
+                            height?: undefined;
+                            behaveAs?: undefined;
+                            isRichText?: undefined;
+                            validationLabel?: undefined;
+                            passwordInputProps?: undefined;
+                            reenteredPasswordInputProps?: undefined;
+                        };
+                    };
+                    organismLibraryMoleculeId: string;
+                    moleculeLibraryId: string;
+                    id: string;
+                })[];
+                organismLibraryContainerId: string;
+                containerLibraryId: string;
+                properties: {};
+                id: string;
+            }[];
+            organismLibraryContainerId: string;
+            containerLibraryId: string;
+            properties: {};
+            id: string;
+        }[];
+        organismLibraryContainerId: string;
+        containerLibraryId: string;
+        properties: {};
+        id: string;
+    };
+};

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

@@ -0,0 +1,3 @@
+import { ContainerComponentProps } from 'containers';
+import { ContainerDTO } from './types';
+export declare const toOrganismItem: ({ children, ...restContainer }: ContainerDTO | any) => ContainerComponentProps;

package/dist/esm/organisms/helpers.js

@@ -0,0 +1,2 @@
+import{__rest as n,__assign as e}from"tslib";var t=function(i){var r,o=i.children,c=n(i,["children"]);return e(e({},c),{items:null!==(r=null==o?void 0:o.map(function(n){return"molecule"===n.instance&&"consent"===n.type?n:"container"===n.instance?t(n):n}))&&void 0!==r?r:[]})};export{t as toOrganismItem};
+//# sourceMappingURL=helpers.js.map

package/dist/esm/organisms/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../src/organisms/helpers.ts"],"sourcesContent":[null],"names":["toOrganismItem","_a","children","restContainer","__rest","__assign","items","_b","map","child","instance","type"],"mappings":"6CAGO,IAAMA,EAAiB,SAACC,SAC7BC,EAAQD,EAAAC,SACLC,EAAaC,EAAAH,EAFa,cAGoB,OAC9CI,EAAAA,EAAA,CAAA,EAAAF,GACH,CAAAG,MAMI,QALFC,EAAAL,eAAAA,EAAUM,IAAI,SAACC,GACb,MAAuB,aAAnBA,EAAMC,UAA0C,YAAfD,EAAME,KAClCF,EAEiB,cAAnBA,EAAMC,SAA2BV,EAAeS,GAASA,CAClE,UAAE,IAAAF,EAAAA,EAAI"}