@dartech/arsenal-ui 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dartech/arsenal-ui",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "author": "DAR",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,6 +24,15 @@
     "react-router-dom": "6.8.0",
     "react-toastify": "^9.1.1",
     "classnames": "^2.3.1",
-    "@tanstack/react-query": "^4.24.10"
-  }
+    "@tanstack/react-query": "^4.24.10",
+    "@dartech/arsenal-ui": "0.3.69",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "qs": "6.11.0",
+    "tss-react": "4.6.0"
+  },
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "peerDependencies": {}
 }

package/src/consts/index.d.ts

@@ -0,0 +1,12 @@
+export declare const defaultDefinitionArrayValue: {
+    code: string;
+    name: string;
+    version: number;
+    properties: any[];
+};
+export declare const defaultDefinitionObjectValue: {
+    code: string;
+    name: string;
+    version: number;
+    properties: {};
+};

package/src/interfaces/common.d.ts

@@ -0,0 +1,17 @@
+export declare enum RoundingMode {
+    UP = "UP",
+    DOWN = "DOWN",
+    CEILING = "CEILING",
+    FLOOR = "FLOOR",
+    HALF_UP = "HALF_UP",
+    HALF_DOWN = "HALF_DOWN",
+    HALF_EVEN = "HALF_EVEN",
+    UNNECESSARY = "UNNECESSARY"
+}
+export interface PaginateData<T> {
+    collection: T[];
+    totalItems: number;
+    totalPages: number;
+    total?: number;
+    pageNumber: number;
+}

package/src/interfaces/definition.d.ts

@@ -0,0 +1,107 @@
+import { RoundingMode } from './common';
+export declare enum PropertyType {
+    STRING = "STRING",
+    INTEGER = "INTEGER",
+    BIG_INTEGER = "BIG_INTEGER",
+    BIG_DECIMAL = "BIG_DECIMAL",
+    FLOAT = "FLOAT",
+    LONG = "LONG",
+    DOUBLE = "DOUBLE",
+    BOOLEAN = "BOOLEAN",
+    ENTITY_REFERENCE = "ENTITY_REFERENCE",
+    ENTITY = "ENTITY",
+    JSON = "JSON",
+    DATE = "DATE",
+    TIME = "TIME",
+    DATE_TIME = "DATE_TIME",
+    ANY = "ANY"
+}
+export interface Definition<T = Record<string, never>> {
+    code: string;
+    version: number;
+    name: string;
+    properties: PropertiesObjectType<T>;
+}
+export type PropertiesObjectType<T = Record<string, never>> = Record<string, PropertyUnion & T>;
+export type PropertiesArrayType<T = Record<string, never>> = Array<PropertyUnion & T>;
+export interface CreateDefinitionType<T = Record<string, never>> extends Omit<Definition<T>, 'properties'> {
+    properties: PropertiesArrayType<T>;
+}
+export interface UpdateDefinitionType<T = Record<string, never>> extends Omit<Definition<T>, 'properties'> {
+    properties: PropertiesArrayType<T>;
+}
+export interface Property {
+    propertyType: keyof typeof PropertyType | {
+        value: keyof typeof PropertyType;
+    };
+    name: string;
+    defaultValue: unknown;
+    defaultValues: unknown[];
+    isRequired: boolean;
+    isMultiple: boolean;
+    sortOrder: number;
+    isEnabled: boolean;
+    uiSettings: unknown;
+    validationNode: unknown;
+    key?: string;
+}
+export interface BigDecimalProperty extends Property {
+    propertyType: PropertyType.BIG_DECIMAL;
+    precisionScale: number;
+    roundingMode: keyof typeof RoundingMode;
+}
+export interface BigIntegerProperty extends Property {
+    propertyType: PropertyType.BIG_INTEGER;
+}
+export interface BooleanProperty extends Property {
+    propertyType: PropertyType.BOOLEAN;
+}
+export interface DateProperty extends Property {
+    propertyType: PropertyType.DATE;
+    format: string;
+}
+export interface DateTimeProperty extends Property {
+    propertyType: PropertyType.DATE_TIME;
+    format: string;
+}
+export interface DoubleProperty extends Property {
+    propertyType: PropertyType.DOUBLE;
+}
+export interface EntityTypeProperty<T = Record<string, never>> extends Property {
+    propertyType: PropertyType.ENTITY;
+    properties: PropertiesObjectType<T> | PropertiesArrayType<T>;
+}
+export interface EntityReferenceProperty extends Property {
+    propertyType: PropertyType.ENTITY_REFERENCE;
+    definitionCode: string;
+    definitionVersion: string;
+    labelPropertyCode: string;
+    valuePropertyCode: string;
+}
+export interface FloatProperty extends Property {
+    propertyType: PropertyType.FLOAT;
+}
+export interface StringProperty extends Property {
+    propertyType: PropertyType.STRING;
+    restrictedValues: string[];
+}
+export interface IntegerProperty extends Property {
+    propertyType: PropertyType.INTEGER;
+}
+export interface JsonProperty extends Property {
+    propertyType: PropertyType.JSON;
+}
+export interface LongProperty extends Property {
+    propertyType: PropertyType.LONG;
+}
+export interface TimeProperty extends Property {
+    propertyType: PropertyType.TIME;
+    format: string;
+}
+export interface AnyProperty extends Property {
+    propertyType: PropertyType.ANY;
+}
+export type PropertyUnion<T = Record<string, never>> = BigDecimalProperty | BigIntegerProperty | BooleanProperty | DateProperty | DateTimeProperty | DoubleProperty | EntityTypeProperty<T> | EntityReferenceProperty | FloatProperty | StringProperty | IntegerProperty | JsonProperty | LongProperty | TimeProperty | AnyProperty;
+export declare const DATE_DEFAULT_FORMAT = "yyyy-MM-dd";
+export declare const TIME_DEFAULT_FORMAT = "HH:mm:ss";
+export declare const DATE_TIME_DEFAULT_FORMAT = "yyyy-MM-dd'T'HH:mm:ss.SSSXXX";

package/src/interfaces/{index.ts → index.d.ts}

@@ -1,3 +1,3 @@
-export * from './definition';
-export * from './ui';
-export * from './common';
+export * from './definition';
+export * from './ui';
+export * from './common';

package/src/interfaces/ui.d.ts

@@ -0,0 +1,70 @@
+import { PaginateData } from './common';
+import { PropertiesArrayType } from './definition';
+import { ReactNode } from 'react';
+type PaginateParams = {
+    page: string;
+    size: string;
+    [key: string]: string;
+};
+export interface FilterField {
+    name: string;
+    label: string;
+    type: 'text' | 'select' | 'autocomplete' | 'date' | 'number' | 'date_time' | 'query_autocomplete';
+    value?: unknown;
+    multiple?: boolean;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+    searchBy?: string;
+    sortBy?: string;
+    labelKey?: string;
+    valueKey?: string;
+    queryFunction?: (params: PaginateParams) => Promise<PaginateData<unknown>>;
+}
+export interface Option<T = string> {
+    value: T;
+    label: string;
+}
+export type TableDataType = 'id' | 'JSON' | 'JSON_text' | 'JSON_copy' | 'copy' | 'boolean' | 'date' | 'status' | 'array';
+export type JsonPathPickerProperty = {
+    properties: PropertiesArrayType;
+    pathPrefix: string;
+    title: string;
+};
+export type CustomPropertyFieldProps = {
+    name: string;
+    label?: string;
+    type: 'text' | 'checkbox' | 'number' | 'select' | 'autocomplete' | 'json';
+    decimal?: boolean;
+    options?: string[] | {
+        value: unknown;
+        label: string;
+    }[];
+    required?: boolean;
+};
+export type PropertyFillType = 'expression' | 'widget' | 'null' | 'string' | 'json_valid' | 'json_notvalid' | 'dem_builder';
+export type StatusVariant = 'default' | 'success' | 'error' | 'warning';
+export type ValidateFunc = (value: string) => boolean | string;
+export interface Column<T> {
+    id: string;
+    label: string;
+    align?: 'right' | 'left';
+    type?: TableDataType;
+    sortKey?: string;
+    width?: number;
+    renderCell?: (row: Row<T>, rowIndex: number) => ReactNode;
+}
+export type Row<T> = T & {
+    id?: string;
+    onClick?: (event: React.MouseEvent<HTMLTableRowElement>) => void;
+};
+export type Route = {
+    name: string;
+    main?: boolean;
+    icon?: ReactNode;
+    link?: string;
+    query?: string;
+    children?: Route[];
+};
+export {};

package/src/lib/Alert/Alert.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { DialogProps } from '@mui/material/Dialog';
+/**
+ * This interface is referencing the [[AlertDialog]] component props.
+ * @category Common UI components
+ */
+export interface AlertDialogProps {
+    /**
+     * Is dialog open flag
+     */
+    open: boolean;
+    /**
+     * Dialog title
+     */
+    title: string;
+    /**
+     * Dialog description
+     */
+    description?: string;
+    /**
+     * Close button text
+     */
+    closeButtonTitle?: string;
+    /**
+     * Confirm button text
+     */
+    confirmButtonTitle?: string;
+    /**
+     * onClose event handle function
+     */
+    onClose: () => void;
+    /**
+     * onConfirm event handle function
+     */
+    onConfirm?: (values?: any) => void;
+    /**
+     * children components
+     */
+    children?: React.ReactNode;
+    /**
+     * Material UI Dialog component props
+     */
+    dialogProps?: Partial<DialogProps>;
+    loading?: boolean;
+    confirmButtonDisabled?: boolean;
+    maxWidth?: false | "xs" | "sm" | "md" | "lg" | "xl";
+}
+/**
+ * Alert dialog component. Used for popup information
+ * @category Common UI components
+ */
+export declare const AlertDialog: ({ open, title, description, closeButtonTitle, onClose, confirmButtonTitle, confirmButtonDisabled, onConfirm, children, dialogProps, loading, maxWidth }: AlertDialogProps) => JSX.Element;
+export default AlertDialog;

package/src/lib/Alert/index.d.ts

@@ -0,0 +1 @@
+export * from './Alert';

package/src/lib/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    crumbs: {
+        title: string;
+        link?: string;
+    }[];
+};
+export declare const Breadcrumbs: ({ crumbs }: Props) => JSX.Element;
+export {};

package/src/lib/Breadcrumbs/Breadcrumbs.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledLink: import("@emotion/styled").StyledComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/src/lib/Breadcrumbs/{index.ts → index.d.ts}

@@ -1 +1 @@
-export * from './Breadcrumbs';
+export * from './Breadcrumbs';

package/src/lib/ContentLayout/ContentLayout.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+type Props = {
+    children?: ReactNode;
+    toolbar?: ReactNode;
+    contentSx?: SxProps<Theme>;
+};
+export declare const ContentLayout: ({ children, toolbar, contentSx }: Props) => JSX.Element;
+export {};

package/src/lib/ContentLayout/index.d.ts

@@ -0,0 +1 @@
+export * from './ContentLayout';

package/src/lib/Definition/CreateDefinition/CreateDefinition.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    definitionFieldName?: string;
+    title?: string;
+    hideCodeField?: boolean;
+    hideVersionField?: boolean;
+    hideNameField?: boolean;
+    required?: boolean;
+};
+export declare const CreateDefinition: ({ definitionFieldName, title, hideCodeField, hideVersionField, hideNameField, required, }: Props) => JSX.Element;
+export default CreateDefinition;

package/src/lib/Definition/CreateDefinition/{index.ts → index.d.ts}

@@ -1 +1 @@
-export * from './CreateDefinition';
+export * from './CreateDefinition';

package/src/lib/Definition/DefinitionFiller/DefinitionFiller.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { PropertiesArrayType } from '../../../interfaces';
+type Props = {
+    properties: PropertiesArrayType;
+    dataFieldName: string;
+    useExpression?: boolean;
+    title?: string;
+};
+export declare const DefinitionFiller: ({ properties, dataFieldName, useExpression, title }: Props) => JSX.Element;
+export default DefinitionFiller;

package/src/lib/Definition/DefinitionFiller/{index.ts → index.d.ts}

@@ -1 +1 @@
-export * from './DefinitionFiller';
+export * from './DefinitionFiller';

package/src/lib/Definition/DefinitionValueView/DefinitionValueView.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PropertiesArrayType } from '../../../interfaces';
+type Props = {
+    properties: PropertiesArrayType<unknown>;
+    data: unknown;
+};
+export declare const DefinitionValueView: ({ properties, data }: Props) => JSX.Element;
+export default DefinitionValueView;

package/src/lib/Definition/DefinitionValueView/PropertyDataView.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { PropertyUnion } from '../../../interfaces';
+type Props = {
+    property: PropertyUnion;
+    data: unknown;
+    hasBackground?: boolean;
+};
+export declare const PropertyDataView: ({ property, data, hasBackground }: Props) => JSX.Element;
+export default PropertyDataView;

package/src/lib/Definition/DefinitionValueView/{index.ts → index.d.ts}

@@ -1 +1 @@
-export * from './DefinitionValueView';
+export * from './DefinitionValueView';

package/src/lib/Definition/{index.ts → index.d.ts}

@@ -1,3 +1,3 @@
-export * from './CreateDefinition';
-export * from './DefinitionFiller';
-export * from './DefinitionValueView';
+export * from './CreateDefinition';
+export * from './DefinitionFiller';
+export * from './DefinitionValueView';

package/src/lib/Forms/BackButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props = {
+    text?: string;
+    buttonProps?: Record<string, unknown>;
+};
+export declare const BackButton: ({ text, buttonProps }: Props) => JSX.Element;
+export default BackButton;

package/src/lib/Forms/ControlAceEditor.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import AceEditor from 'react-ace';
+import 'ace-builds/src-noconflict/mode-python';
+import 'ace-builds/src-noconflict/theme-monokai';
+import 'ace-builds/src-noconflict/ext-language_tools';
+import { Control } from 'react-hook-form';
+export interface ControlAceEditorProps {
+    name: string;
+    control: Control<any>;
+    mode?: string;
+    label?: string;
+    width?: string;
+    height?: string;
+    theme?: string;
+    readOnly?: boolean;
+    required?: boolean;
+    validateJson?: boolean;
+    fontSize?: number;
+    validate?: boolean;
+    parseValue?: boolean;
+    [key: string]: unknown;
+}
+export declare const ControlAceEditor: import("react").ForwardRefExoticComponent<Omit<ControlAceEditorProps, "ref"> & import("react").RefAttributes<AceEditor>>;
+export default ControlAceEditor;

package/src/lib/Forms/ControlAutocomplete.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+import { AutocompleteProps } from '@mui/material/Autocomplete';
+import { TextFieldProps } from '@mui/material/TextField';
+import { Control } from 'react-hook-form';
+import { ValidateFunc } from '../../interfaces';
+/**
+ * This interface is referencing the [[ControlAutocomplete]] component props.
+ * @category Forms
+ */
+export type ControlAutocompleteProps = Omit<AutocompleteProps<unknown, boolean, boolean, boolean, React.ElementType<any>>, 'renderInput'> & {
+    /**
+     * React Hook Form control `name` propery
+     */
+    name: string;
+    /**
+     * Label for MUI TextField select component
+     */
+    label?: string;
+    /**
+     * React Hook Form `control`
+     */
+    control: Control<any>;
+    /**
+     * Is input required flag
+     */
+    required?: boolean;
+    /**
+     * React Hook Form `defaultValue`
+     */
+    defaultValue?: unknown;
+    /**
+     * Is disabled input flag
+     */
+    disabled?: boolean;
+    /**
+     * React Hook Form validate function
+     * ```typescript
+     * type ValidateFunc = (value: string) => boolean | string;
+     * ```
+     */
+    validate?: ValidateFunc | Record<string, ValidateFunc>;
+    /**
+     * Hide error message flag
+     */
+    hideErrorMessage?: boolean;
+    /**
+     * Custom onChange functionƒ
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: unknown) => void;
+    /**
+     * Key for option label
+     */
+    labelKey?: string;
+    /**
+     * Key for option value
+     */
+    valueKey?: string;
+    /**
+     * Select options
+     */
+    options: string[] | unknown[];
+    textFieldProps?: TextFieldProps;
+};
+/**
+ * Material UI `Autocomplete` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export declare const ControlAutocomplete: ({ control, validate, name, label, required, defaultValue, disabled, hideErrorMessage, onChange: customOnChange, labelKey, valueKey, options, multiple, textFieldProps, disableCloseOnSelect, ...autocompleteProps }: ControlAutocompleteProps) => JSX.Element;
+export default ControlAutocomplete;

package/src/lib/Forms/ControlCheckbox.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { Control } from 'react-hook-form';
+import { ValidateFunc } from '../../interfaces';
+/**
+ * This interface is referencing the [[ControlCheckbox]] component props.
+ * @category Forms
+ */
+export type ControlCheckboxProps = CheckboxProps & {
+    /**
+     * React Hook Form control `name` propery
+     */
+    name: string;
+    /**
+     * Label for MUI TextField component
+     */
+    label?: string;
+    /**
+     * React Hook Form `control`
+     */
+    control: Control<any>;
+    /**
+     * React Hook Form `defaultValue`
+     */
+    defaultValue?: unknown;
+    /**
+     * Is disabled input flag
+     */
+    disabled?: boolean;
+    /**
+     * React Hook Form validate function
+     * ```typescript
+     * type ValidateFunc = (value: string) => boolean | string;
+     * ```
+     */
+    validate?: ValidateFunc | Record<string, ValidateFunc>;
+    /**
+     * Hide error message flag
+     */
+    hideErrorMessage?: boolean;
+    /**
+     * Custom onChange functionƒ
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+/**
+ * Material UI `Checkbox` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export declare const ControlCheckbox: ({ control, validate, name, label, required, defaultValue, disabled, hideErrorMessage, onChange: customOnChange, ...checkboxProps }: ControlCheckboxProps) => JSX.Element;
+export default ControlCheckbox;

package/src/lib/Forms/ControlDate.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+type Props = {
+    /**
+     * React Hook Form `control`
+     */
+    control: Control<any>;
+    /**
+     * Is input required flag
+     */
+    required?: boolean;
+    name: string;
+    label?: string;
+    format?: string;
+    hideErrorMessage?: boolean;
+};
+export declare const ControlDate: ({ control, name, required, label, format, hideErrorMessage, }: Props) => JSX.Element;
+export default ControlDate;

package/src/lib/Forms/ControlDateTime.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+type Props = {
+    /**
+     * React Hook Form `control`
+     */
+    control: Control<any>;
+    /**
+     * Is input required flag
+     */
+    required?: boolean;
+    name: string;
+    label?: string;
+    format?: string;
+    hideErrorMessage?: boolean;
+};
+export declare const ControlDateTime: ({ control, name, required, label, format, hideErrorMessage, }: Props) => JSX.Element;
+export default ControlDateTime;

package/src/lib/Forms/ControlDebouncedInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ControlInputProps } from './ControlInput';
+export declare const ControlDebouncedInput: ({ control, validate, name, label, required, defaultValue, disabled, textarea, hideErrorMessage, onChange: customOnChange, ...textFieldProps }: ControlInputProps) => JSX.Element;
+export default ControlDebouncedInput;

package/src/lib/Forms/ControlInput.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { TextFieldProps } from '@mui/material/TextField';
+import { ValidateFunc } from '../../interfaces';
+/**
+ * This interface is referencing the [[ControlInput]] component props.
+ * @category Forms
+ */
+export type ControlInputProps = TextFieldProps & {
+    /**
+     * React Hook Form control `name` propery
+     */
+    name: string;
+    /**
+     * Label for MUI TextField component
+     */
+    label?: string;
+    /**
+     * React Hook Form `control`
+     */
+    control: Control<any>;
+    /**
+     * Is input required flag
+     */
+    required?: boolean;
+    /**
+     * React Hook Form `defaultValue`
+     */
+    defaultValue?: unknown;
+    /**
+     * Is disabled input flag
+     */
+    disabled?: boolean;
+    /**
+     * React Hook Form validate function
+     * ```typescript
+     * type ValidateFunc = (value: string) => boolean | string;
+     * ```
+     */
+    validate?: ValidateFunc | Record<string, ValidateFunc>;
+    /**
+     * Is input textarea flag
+     */
+    textarea?: boolean;
+    /**
+     * Hide error message flag
+     */
+    hideErrorMessage?: boolean;
+    /**
+     * Custom onChange functionƒ
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+/**
+ * Material UI `TextField` controlled component. Used with react-hook-form
+ * @category Forms
+ */
+export declare const ControlInput: ({ control, validate, name, label, required, defaultValue, disabled, textarea, hideErrorMessage, onChange: customOnChange, ...textFieldProps }: ControlInputProps) => JSX.Element;
+export default ControlInput;